SHiNE-server/shine-UI/js/components/palette-editor.js

// Редактор точной настройки палитры.
import {
  PALETTE_PRESETS,
  PALETTE_ROLES,
  exportPalette,
  getPaletteSettings,
  importPalette,
  resolvePalette,
  resolveThemeMode,
  setPaletteSettings,
} from '../services/theme-service.js';

export function openPaletteEditor({ theme = resolveThemeMode(), onClose } = {}) {
  let editTheme = theme === 'light' ? 'light' : 'dark';
  const opener = document.activeElement;

  const modal = document.createElement('div');
  modal.className = 'modal palette-editor';
  modal.innerHTML = `
    <div class="modal-card palette-editor__card" role="dialog" aria-modal="true" aria-labelledby="palette-editor-title">
      <div class="palette-editor__head">
        <h2 class="modal-title" id="palette-editor-title">Цвета оформления</h2>
        <button class="icon-btn palette-editor__close" type="button" aria-label="Закрыть">✕</button>
      </div>
      <div class="palette-editor__section">
        <span class="palette-editor__label">Основа</span>
        <select class="input palette-editor__presets" aria-label="Готовая цветовая тема"></select>
        <div class="palette-editor__preview" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      </div>
      <div class="palette-editor__section">
        <span class="palette-editor__label">Настраиваемая тема</span>
        <div class="tabs tabs--auto" role="radiogroup" aria-label="Тема для настройки">
          <button type="button" class="tab-btn" role="radio" data-edit-theme="light">День</button>
          <button type="button" class="tab-btn" role="radio" data-edit-theme="dark">Ночь</button>
        </div>
        <p class="palette-editor__hint">Правки видны сразу. Меняется только выбранная тема.</p>
      </div>
      <div class="palette-editor__roles"></div>
      <details class="palette-editor__share">
        <summary>Поделиться палитрой</summary>
        <p class="palette-editor__hint">Скопируйте текст и отправьте команде или вставьте чужую палитру и нажмите «Применить».</p>
        <textarea class="input palette-editor__json" rows="8" spellcheck="false"></textarea>
        <p class="palette-editor__error" role="alert" hidden></p>
        <div class="palette-editor__actions">
          <button type="button" class="secondary-btn" data-action="copy">Скопировать</button>
          <button type="button" class="secondary-btn" data-action="import">Применить</button>
        </div>
      </details>
      <div class="palette-editor__actions">
        <button type="button" class="secondary-btn" data-action="reset-theme">Сбросить эту тему</button>
        <button type="button" class="primary-btn" data-action="done">Готово</button>
      </div>
    </div>
  `;

  const card = modal.querySelector('.palette-editor__card');
  const presetsEl = modal.querySelector('.palette-editor__presets');
  const rolesEl = modal.querySelector('.palette-editor__roles');
  const jsonEl = modal.querySelector('.palette-editor__json');
  const errorEl = modal.querySelector('.palette-editor__error');

  for (const [id, preset] of Object.entries(PALETTE_PRESETS)) {
    const option = document.createElement('option');
    option.value = id;
    option.textContent = preset.label;
    presetsEl.append(option);
  }

  const update = (mutate) => {
    const settings = getPaletteSettings();
    const next = { preset: settings.preset, custom: { dark: { ...settings.custom.dark }, light: { ...settings.custom.light } } };
    mutate(next);
    setPaletteSettings(next);
    render();
  };

  function render() {
    const settings = getPaletteSettings();
    const colors = resolvePalette(editTheme, settings);
    const custom = settings.custom[editTheme];
    presetsEl.value = settings.preset;
    modal.querySelectorAll('.palette-editor__preview span').forEach((swatch, index) => {
      swatch.style.backgroundColor = [colors.background, colors.surface, colors.accent, colors['surface-selected']][index];
    });
    modal.querySelectorAll('[data-edit-theme]').forEach((btn) => {
      btn.setAttribute('aria-checked', String(btn.dataset.editTheme === editTheme));
    });
    rolesEl.replaceChildren(...PALETTE_ROLES.map((role) => {
      const row = document.createElement('label');
      row.className = 'palette-editor__role';
      const changed = Boolean(custom[role.id]);
      row.innerHTML = `
        <input type="color" value="${colors[role.id]}" aria-label="${role.label}">
        <span class="palette-editor__role-name">${role.label}${changed ? ' <span class="palette-editor__changed">изменён</span>' : ''}</span>
        <code class="palette-editor__role-value">${colors[role.id]}</code>
      `;
      const input = row.querySelector('input');
      input.addEventListener('input', () => {
        document.documentElement.style.setProperty(`--${role.id}`, input.value);
        row.querySelector('code').textContent = input.value;
      });
      input.addEventListener('change', () => update((next) => { next.custom[editTheme][role.id] = input.value; }));
      return row;
    }));
    jsonEl.value = exportPalette();
    errorEl.hidden = true;
  }

  const close = () => {
    document.removeEventListener('keydown', onKeydown);
    modal.remove();
    opener?.focus?.();
    onClose?.();
  };
  const onKeydown = (event) => { if (event.key === 'Escape') close(); };

  modal.addEventListener('click', async (event) => {
    if (event.target === modal) { close(); return; }
    // data-edit-theme, а не data-theme: data-theme стоит на <html>, и closest() находил бы его при любом клике.
    const themeBtn = event.target.closest('[data-edit-theme]');
    if (themeBtn) { editTheme = themeBtn.dataset.editTheme; render(); return; }
    if (event.target.closest('.palette-editor__close')) { close(); return; }
    const action = event.target.closest('[data-action]')?.dataset.action;
    if (action === 'done') close();
    if (action === 'reset-theme') update((next) => { next.custom[editTheme] = {}; });
    if (action === 'copy') {
      try {
        await navigator.clipboard.writeText(jsonEl.value);
      } catch {
        jsonEl.select();
      }
    }
    if (action === 'import') {
      try {
        importPalette(jsonEl.value);
        render();
      } catch {
        errorEl.textContent = 'Не удалось прочитать палитру: проверьте, что текст скопирован целиком.';
        errorEl.hidden = false;
      }
    }
  });
  presetsEl.addEventListener('change', () => update((next) => {
    next.preset = presetsEl.value;
    next.custom = { dark: {}, light: {} };
  }));
  document.addEventListener('keydown', onKeydown);

  render();
  document.body.append(modal);
  card.querySelector('.palette-editor__close').focus();
  return close;
}