@bendyline/squisq-editor-react 2.1.0 → 2.3.0

package/src/customThemes/CustomThemeContext.tsx

@@ -1,185 +0,0 @@
-/**
- * CustomThemeContext — exposes the merged set of doc-level + library custom
- * themes to the rest of the editor (chiefly ThemePicker and CustomThemeDialog).
- *
- * The theme analog of CustomTemplateContext. The host wraps the editor in a
- * provider, supplying:
- *   - `docThemes`: the list currently sourced from the active doc's
- *     frontmatter (read from `Doc.customThemes`).
- *   - `onDocThemesChange`: a callback the host uses to persist a change back
- *     into the doc (e.g. by updating the markdown source).
- *
- * Library themes come from `localStorage` via `customThemeLibrary.ts` and are
- * managed entirely within the context — the host doesn't see them.
- *
- * `applyTheme(theme)` is the bridge between the two pools: when a user picks a
- * library theme, we copy its definition into the doc's `customThemes` (if it
- * isn't already there) so the doc remains self-sufficient for SSR / export.
- * Selecting it as the active theme (writing `squisq-theme: <id>`) is a
- * separate step the caller performs; this just ensures the doc-scoped resolve
- * has the definition — exactly as `applyTemplate` seeds `Doc.customTemplates`.
- */
-
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react';
-import type { Theme } from '@bendyline/squisq/schemas';
-import {
-  listLibraryThemes,
-  saveLibraryTheme as saveLibraryThemeRaw,
-  deleteLibraryTheme as deleteLibraryThemeRaw,
-  THEME_LIBRARY_STORAGE_KEY,
-} from './customThemeLibrary';
-
-export interface CustomThemeContextValue {
-  /** Themes inlined into the current doc's frontmatter. */
-  docThemes: Theme[];
-  /** Themes the user has saved to their browser-local library. */
-  libraryThemes: Theme[];
-  /**
-   * Convenience: the union of doc + library, with library entries skipped
-   * when a doc theme of the same id already exists. Used by the picker so a
-   * single "Custom" section covers both sources without duplicates.
-   */
-  allThemes: Theme[];
-
-  /**
-   * Persist a theme into the current doc. Replaces any existing entry with
-   * the same `id`. Triggers the host's `onDocThemesChange` so the doc's
-   * frontmatter ends up updated.
-   */
-  upsertDocTheme: (theme: Theme) => void;
-  /** Persist a theme into the user's library (replaces by id). */
-  upsertLibraryTheme: (theme: Theme) => void;
-  /** Remove a doc-level theme by id. */
-  removeDocTheme: (id: string) => void;
-  /** Remove a library theme by id. */
-  removeLibraryTheme: (id: string) => void;
-  /**
-   * Apply a theme to the current doc. If the theme is already in the doc,
-   * this is a no-op. If it's only in the library, it's copied into the doc
-   * so SSR / export work. Returns the resolved definition so callers can
-   * also write the `squisq-theme` selection.
-   */
-  applyTheme: (theme: Theme) => Theme;
-}
-
-const CustomThemeContext = createContext<CustomThemeContextValue | null>(null);
-
-export interface CustomThemeProviderProps {
-  /** The current doc's custom themes (from `Doc.customThemes`). */
-  docThemes: Theme[];
-  /**
-   * Callback the host uses to persist a new doc-theme list back into the doc
-   * (e.g. by writing the encoded payload into the markdown's
-   * `squisq-custom-themes` frontmatter key).
-   */
-  onDocThemesChange: (next: Theme[]) => void;
-  children: ReactNode;
-}
-
-export function CustomThemeProvider({
-  docThemes,
-  onDocThemesChange,
-  children,
-}: CustomThemeProviderProps) {
-  const [libraryThemes, setLibraryThemes] = useState<Theme[]>(() => listLibraryThemes());
-
-  // Re-read the library when this provider mounts so cross-tab edits (or
-  // initial first-paint quirks) are picked up. We don't subscribe to
-  // localStorage events in v1 — opening the picker re-renders and re-reads,
-  // which is enough for the single-tab common case.
-  useEffect(() => {
-    setLibraryThemes(listLibraryThemes());
-    const onStorage = (event: StorageEvent) => {
-      if (event.key === THEME_LIBRARY_STORAGE_KEY) setLibraryThemes(listLibraryThemes());
-    };
-    window.addEventListener('storage', onStorage);
-    return () => window.removeEventListener('storage', onStorage);
-  }, []);
-
-  const upsertDocTheme = useCallback(
-    (theme: Theme) => {
-      const existingIdx = docThemes.findIndex((t) => t.id === theme.id);
-      const next =
-        existingIdx >= 0
-          ? docThemes.map((t, i) => (i === existingIdx ? theme : t))
-          : [...docThemes, theme];
-      onDocThemesChange(next);
-    },
-    [docThemes, onDocThemesChange],
-  );
-
-  const removeDocTheme = useCallback(
-    (id: string) => {
-      const next = docThemes.filter((t) => t.id !== id);
-      if (next.length !== docThemes.length) onDocThemesChange(next);
-    },
-    [docThemes, onDocThemesChange],
-  );
-
-  const upsertLibraryTheme = useCallback((theme: Theme) => {
-    setLibraryThemes(saveLibraryThemeRaw(theme));
-  }, []);
-
-  const removeLibraryTheme = useCallback((id: string) => {
-    setLibraryThemes(deleteLibraryThemeRaw(id));
-  }, []);
-
-  const applyTheme = useCallback(
-    (theme: Theme) => {
-      // If the doc already has this theme (matching id), leave both alone —
-      // the existing entry might be a customized copy.
-      const inDoc = docThemes.find((t) => t.id === theme.id);
-      if (!inDoc) upsertDocTheme(theme);
-      return inDoc ?? theme;
-    },
-    [docThemes, upsertDocTheme],
-  );
-
-  const allThemes = useMemo(() => {
-    const seen = new Set(docThemes.map((t) => t.id));
-    return [...docThemes, ...libraryThemes.filter((t) => !seen.has(t.id))];
-  }, [docThemes, libraryThemes]);
-
-  const value = useMemo<CustomThemeContextValue>(
-    () => ({
-      docThemes,
-      libraryThemes,
-      allThemes,
-      upsertDocTheme,
-      upsertLibraryTheme,
-      removeDocTheme,
-      removeLibraryTheme,
-      applyTheme,
-    }),
-    [
-      docThemes,
-      libraryThemes,
-      allThemes,
-      upsertDocTheme,
-      upsertLibraryTheme,
-      removeDocTheme,
-      removeLibraryTheme,
-      applyTheme,
-    ],
-  );
-
-  return <CustomThemeContext.Provider value={value}>{children}</CustomThemeContext.Provider>;
-}
-
-/**
- * Hook returning the current context. Returns null when no provider is
- * mounted — callers can degrade to "no custom themes" rather than throwing,
- * since the feature is optional.
- */
-// eslint-disable-next-line react-refresh/only-export-components -- hook is co-located with its provider by design, mirroring CustomTemplateContext
-export function useCustomThemes(): CustomThemeContextValue | null {
-  return useContext(CustomThemeContext);
-}

package/src/customThemes/CustomThemeDialog.tsx

@@ -1,316 +0,0 @@
-/**
- * CustomThemeDialog
- *
- * Docked, **non-modal** theme designer pane — the theme analog of
- * `TemplateDesigner`. Because applying theme properties (colors, fonts, …) is
- * WYSIWYG, the designer docks into the editor's content row (below the
- * toolbars, to the right of the preview) rather than covering the canvas with
- * a modal; the preview shrinks to make room, so it stays fully visible and
- * interactive while the user edits. `onChange` fires the compiled theme on
- * every edit so the host can preview it via `PreviewSettingsProvider`'s
- * `themeOverride`; the doc is only mutated on Save.
- *
- * The user picks a base theme to inherit render style / layout from, edits seed
- * colors (primary / secondary / tertiary), an add/remove list of accent colors,
- * fonts and style presets, and saves to the document or the browser-local
- * library (`saveTarget: 'doc' | 'library'`).
- *
- * Rendered as a plain flex-item pane (a fixed-width, full-height column) — the
- * host (`ThemeDesignerDock` inside `EditorShell`'s content row) places it as a
- * sibling of the preview so the flexbox reflows the preview narrower.
- *
- * The editing model (draft + `compileDraft`) and the form rows are shared with
- * the lighter `ThemeCustomizerPanel` popover via `themeDraft` + `themeControls`.
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { CustomTemplateDefinition, Theme, ThemeSeedColors } from '@bendyline/squisq/schemas';
-import { resolveTheme } from '@bendyline/squisq/schemas';
-import { ThemePicker } from '../ThemePicker';
-import { ImportThemeSection } from './ImportThemeSection';
-import {
-  type Draft,
-  type AccentInput,
-  themeToDraft,
-  compileDraft,
-  accentsFromTheme,
-  BORDER_RADIUS_PRESETS,
-  ANIMATION_SPEED_PRESETS,
-  TEXT_SHADOW_PRESETS,
-  CONTRAST_PRESETS,
-  IMAGE_TREATMENT_PRESETS,
-  type BorderRadiusPreset,
-  type AnimationSpeedPreset,
-  type TextShadowPreset,
-  type ContrastPreset,
-  type ImageTreatmentPreset,
-} from './themeDraft';
-import { Section, SeedColorRow, FontPicker, PresetRow, AccentEditor } from './themeControls';
-
-/** Where a saved theme lands — mirrors `DesignerSaveTarget` for templates. */
-export type ThemeSaveTarget = 'doc' | 'library';
-
-/** Extra assets riding along with a theme save (file-import byproducts). */
-export interface ThemeSaveExtras {
-  /** Custom layout templates inferred from an imported PPTX. */
-  templates?: CustomTemplateDefinition[];
-}
-
-export interface CustomThemeDialogProps {
-  /** Theme being edited, or null to author a new one. */
-  value: Theme | null;
-  /** Fired on every edit with the compiled theme (host previews via themeOverride). */
-  onChange?: (theme: Theme) => void;
-  /** Fired when the user saves, with the chosen target. */
-  onSave: (theme: Theme, target: ThemeSaveTarget, extras?: ThemeSaveExtras) => void;
-  /** Dismiss (Cancel / Esc / close button). */
-  onClose: () => void;
-}
-
-function initialDraft(value: Theme | null): Draft {
-  const d = themeToDraft(value);
-  // Re-opening an existing custom theme: treat its accents as authored so a
-  // seed-only edit doesn't silently drop them back to the base's schemes.
-  if (value) d.accentsEdited = true;
-  return d;
-}
-
-export function CustomThemeDialog({ value, onChange, onSave, onClose }: CustomThemeDialogProps) {
-  const [draft, setDraft] = useState<Draft>(() => initialDraft(value));
-  // Layout templates inferred from a file import, saved alongside the theme.
-  const [importedLayouts, setImportedLayouts] = useState<CustomTemplateDefinition[] | null>(null);
-
-  const nameRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    nameRef.current?.focus();
-    nameRef.current?.select();
-  }, []);
-
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  const compile = useCallback(
-    (d: Draft): Theme => {
-      const base = d.baseId ? resolveTheme(d.baseId) : undefined;
-      return compileDraft(d, { existingId: value?.id, base });
-    },
-    [value?.id],
-  );
-
-  const updateDraft = useCallback(
-    (patch: Partial<Draft> | ((d: Draft) => Draft)) => {
-      setDraft((prev) => {
-        const next = typeof patch === 'function' ? patch(prev) : { ...prev, ...patch };
-        try {
-          onChange?.(compile(next));
-        } catch {
-          // Invalid intermediate state (e.g. bad hex mid-typing) — skip preview.
-        }
-        return next;
-      });
-    },
-    [onChange, compile],
-  );
-
-  const updateSeed = useCallback(
-    (key: keyof ThemeSeedColors, hex: string) =>
-      updateDraft((d) => ({ ...d, seeds: { ...d.seeds, [key]: hex } })),
-    [updateDraft],
-  );
-
-  const handleSave = useCallback(
-    (target: ThemeSaveTarget) => {
-      try {
-        const extras =
-          importedLayouts && importedLayouts.length > 0
-            ? { templates: importedLayouts }
-            : undefined;
-        onSave(compile(draft), target, extras);
-      } catch {
-        // A compile failure here means the draft is invalid; leave the dialog open.
-      }
-    },
-    [draft, onSave, compile, importedLayouts],
-  );
-
-  // Accents show the base's schemes until the user edits them (then the draft's
-  // own list wins). Editing any accent flips `accentsEdited` so the compiled
-  // theme replaces `colorSchemes` wholesale.
-  const base = useMemo(() => (draft.baseId ? resolveTheme(draft.baseId) : null), [draft.baseId]);
-  const displayAccents: AccentInput[] = draft.accentsEdited
-    ? draft.accents
-    : accentsFromTheme(base);
-  const onAccentsChange = useCallback(
-    (next: AccentInput[]) => updateDraft({ accents: next, accentsEdited: true }),
-    [updateDraft],
-  );
-
-  return (
-    <div className="squisq-custom-theme-pane" role="dialog" aria-label="Design custom theme">
-      <div className="squisq-doc-settings-header">
-        <h2 className="squisq-doc-settings-title">
-          {value ? 'Edit custom theme' : 'New custom theme'}
-        </h2>
-        <button
-          type="button"
-          className="squisq-doc-settings-close"
-          onClick={onClose}
-          aria-label="Close"
-        >
-          &times;
-        </button>
-      </div>
-
-      <div className="squisq-doc-settings-body squisq-theme-customizer-body squisq-custom-theme-pane-body">
-        <Section title="Name">
-          <input
-            ref={nameRef}
-            type="text"
-            className="squisq-theme-customizer-input"
-            value={draft.name}
-            onChange={(e) => updateDraft({ name: e.target.value })}
-            aria-label="Theme name"
-          />
-        </Section>
-
-        <Section title="Base theme" hint="Inherit render style, motion, and layout from a base.">
-          <ThemePicker
-            value={draft.baseId ?? ''}
-            onChange={(id) => updateDraft({ baseId: id || undefined })}
-            includeDefault
-            variant="full"
-            ariaLabel="Base theme"
-          />
-        </Section>
-
-        <Section
-          title="Import from file"
-          hint="Pull colors and fonts from a Word, PowerPoint, or Excel file. PowerPoint slide layouts become custom layouts."
-        >
-          <ImportThemeSection
-            allowLayouts
-            onImported={(patch, result) => {
-              updateDraft(patch);
-              setImportedLayouts(result.layouts ?? null);
-            }}
-          />
-        </Section>
-
-        <Section
-          title="Colors"
-          hint="Primary, secondary, and tertiary (accent). The rest is derived."
-        >
-          <SeedColorRow
-            label="Primary"
-            value={draft.seeds.primary}
-            onChange={(v) => updateSeed('primary', v)}
-          />
-          <SeedColorRow
-            label="Secondary"
-            value={draft.seeds.secondary ?? ''}
-            onChange={(v) => updateSeed('secondary', v)}
-          />
-          <SeedColorRow
-            label="Tertiary"
-            value={draft.seeds.accent ?? ''}
-            onChange={(v) => updateSeed('accent', v)}
-          />
-          <SeedColorRow
-            label="Background"
-            value={draft.seeds.background ?? ''}
-            onChange={(v) => updateSeed('background', v)}
-          />
-          <SeedColorRow
-            label="Text"
-            value={draft.seeds.text ?? ''}
-            onChange={(v) => updateSeed('text', v)}
-          />
-        </Section>
-
-        <Section title="Accents" hint="Per-block accent colors. Add as many as you like.">
-          <AccentEditor accents={displayAccents} onChange={onAccentsChange} />
-        </Section>
-
-        <Section title="Typography">
-          <FontPicker
-            label="Heading"
-            value={draft.titleFont}
-            onChange={(next) => updateDraft({ titleFont: next })}
-          />
-          <FontPicker
-            label="Body"
-            value={draft.bodyFont}
-            onChange={(next) => updateDraft({ bodyFont: next })}
-          />
-        </Section>
-
-        <Section title="Style">
-          <PresetRow
-            label="Border radius"
-            value={draft.borderRadius}
-            options={Object.keys(BORDER_RADIUS_PRESETS) as BorderRadiusPreset[]}
-            onChange={(v) => updateDraft({ borderRadius: v })}
-          />
-          <PresetRow
-            label="Animation"
-            value={draft.animationSpeed}
-            options={Object.keys(ANIMATION_SPEED_PRESETS) as AnimationSpeedPreset[]}
-            onChange={(v) => updateDraft({ animationSpeed: v })}
-          />
-          <PresetRow
-            label="Text shadow"
-            value={draft.textShadow}
-            options={Object.keys(TEXT_SHADOW_PRESETS) as TextShadowPreset[]}
-            onChange={(v) => updateDraft({ textShadow: v })}
-          />
-          <PresetRow
-            label="Contrast"
-            value={draft.contrast}
-            options={CONTRAST_PRESETS as readonly ContrastPreset[]}
-            onChange={(v) => updateDraft({ contrast: v })}
-          />
-          <PresetRow
-            label="Image grade"
-            value={draft.imageTreatment}
-            options={IMAGE_TREATMENT_PRESETS as readonly ImageTreatmentPreset[]}
-            onChange={(v) => updateDraft({ imageTreatment: v })}
-          />
-        </Section>
-      </div>
-
-      <div className="squisq-doc-settings-footer squisq-custom-theme-pane-footer">
-        <button
-          type="button"
-          className="squisq-doc-settings-btn squisq-doc-settings-btn--secondary"
-          onClick={onClose}
-        >
-          Cancel
-        </button>
-        <button
-          type="button"
-          className="squisq-doc-settings-btn squisq-doc-settings-btn--secondary"
-          onClick={() => handleSave('library')}
-          title={
-            importedLayouts && importedLayouts.length > 0
-              ? 'Save to your browser-local library so other docs can use it (imported slide layouts only save to the document)'
-              : 'Save to your browser-local library so other docs can use it'
-          }
-        >
-          Save to library
-        </button>
-        <button
-          type="button"
-          className="squisq-doc-settings-btn squisq-doc-settings-btn--primary"
-          onClick={() => handleSave('doc')}
-        >
-          Save to document
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/customThemes/ImportThemeSection.tsx

@@ -1,178 +0,0 @@
-/**
- * ImportThemeSection
- *
- * "Infer theme from a file" affordance shared by the CustomThemeDialog pane
- * and the ThemeCustomizerPanel popover: a Choose-file button plus a local
- * dropzone that accepts a Word/PowerPoint/Excel file, runs
- * `inferThemeFromFile` from `@bendyline/squisq-formats/infer` (loaded
- * lazily), and hands back a `Partial<Draft>` patch for the host's
- * `updateDraft` — so the existing live-preview path applies unchanged.
- *
- * The dropzone handles its own drag events with `stopPropagation` so a file
- * dropped here never reaches EditorShell's document-import drop handling.
- */
-
-import { useCallback, useRef, useState } from 'react';
-import type { DragEvent } from 'react';
-import type { CustomTemplateDefinition, Theme } from '@bendyline/squisq/schemas';
-import { draftPatchFromImportedTheme, type Draft } from './themeDraft';
-
-export interface ImportedThemeResult {
-  theme: Theme;
-  /** PPTX only, when `allowLayouts`: custom templates derived from slide layouts. */
-  layouts?: CustomTemplateDefinition[];
-  warnings: string[];
-  fileName: string;
-}
-
-export interface ImportThemeSectionProps {
-  /** Fired on successful inference with the draft patch + full result. */
-  onImported: (patch: Partial<Draft>, result: ImportedThemeResult) => void;
-  /** Also derive PPTX slide layouts as custom templates. Default false. */
-  allowLayouts?: boolean;
-}
-
-const ACCEPT = '.docx,.pptx,.xlsx';
-const SUPPORTED_RE = /\.(docx|pptx|xlsx)$/i;
-const MAX_VISIBLE_WARNINGS = 4;
-
-/**
- * Read a File's bytes. Prefers the modern `arrayBuffer()`; falls back to
- * FileReader for environments (e.g. some jsdom builds) whose Blob lacks it —
- * same posture as the formats registry's byte normalizer.
- */
-function readFileBytes(file: File): Promise<ArrayBuffer> {
-  if (typeof file.arrayBuffer === 'function') return file.arrayBuffer();
-  return new Promise<ArrayBuffer>((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onload = () => resolve(reader.result as ArrayBuffer);
-    reader.onerror = () => reject(reader.error);
-    reader.readAsArrayBuffer(file);
-  });
-}
-
-export function ImportThemeSection({ onImported, allowLayouts = false }: ImportThemeSectionProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [busy, setBusy] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [status, setStatus] = useState<string | null>(null);
-  const [warnings, setWarnings] = useState<string[]>([]);
-  const [dragOver, setDragOver] = useState(false);
-
-  const handleFile = useCallback(
-    async (file: File) => {
-      if (!SUPPORTED_RE.test(file.name)) {
-        setError('Only .docx, .pptx, or .xlsx files carry a theme.');
-        return;
-      }
-      setBusy(true);
-      setError(null);
-      setStatus(null);
-      setWarnings([]);
-      try {
-        const buffer = await readFileBytes(file);
-        const { inferThemeFromFile } = await import('@bendyline/squisq-formats/infer');
-        const nameHint = file.name.replace(/\.[^.]+$/, '');
-        const result = await inferThemeFromFile(buffer, {
-          inferLayouts: allowLayouts,
-          nameHint,
-        });
-        const layouts = result.layouts ?? [];
-        onImported(draftPatchFromImportedTheme(result.theme), {
-          theme: result.theme,
-          ...(layouts.length > 0 ? { layouts } : {}),
-          warnings: result.warnings,
-          fileName: file.name,
-        });
-        setStatus(
-          layouts.length > 0
-            ? `Imported colors and fonts from ${file.name} — ${layouts.length} slide layout${
-                layouts.length === 1 ? '' : 's'
-              } will be saved with the document.`
-            : `Imported colors and fonts from ${file.name}.`,
-        );
-        setWarnings(result.warnings);
-      } catch (err: unknown) {
-        setError(err instanceof Error ? err.message : 'Could not read a theme from that file.');
-      } finally {
-        setBusy(false);
-        if (inputRef.current) inputRef.current.value = '';
-      }
-    },
-    [allowLayouts, onImported],
-  );
-
-  // Local drag handling only — never let the editor's global drop routing
-  // treat a theme-source file as a document import.
-  const onDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOver(true);
-  }, []);
-  const onDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOver(false);
-  }, []);
-  const onDrop = useCallback(
-    (e: DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setDragOver(false);
-      const file = e.dataTransfer.files?.[0];
-      if (file) void handleFile(file);
-    },
-    [handleFile],
-  );
-
-  const visibleWarnings = warnings.slice(0, MAX_VISIBLE_WARNINGS);
-  const hiddenWarnings = warnings.length - visibleWarnings.length;
-
-  return (
-    <div className="squisq-theme-import">
-      <div
-        className={`squisq-theme-import-drop${dragOver ? ' squisq-theme-import-drop--active' : ''}${
-          busy ? ' squisq-theme-import-drop--busy' : ''
-        }`}
-        onDragOver={onDragOver}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-      >
-        <button
-          type="button"
-          className="squisq-theme-customizer-button"
-          onClick={() => inputRef.current?.click()}
-          disabled={busy}
-        >
-          {busy ? 'Reading…' : 'Choose file…'}
-        </button>
-        <span className="squisq-theme-import-hint">or drop a .docx / .pptx / .xlsx here</span>
-        <input
-          ref={inputRef}
-          type="file"
-          accept={ACCEPT}
-          style={{ display: 'none' }}
-          onChange={(e) => {
-            const file = e.target.files?.[0];
-            if (file) void handleFile(file);
-          }}
-          aria-label="Import theme from file"
-        />
-      </div>
-      {error && (
-        <div className="squisq-theme-import-error" role="alert">
-          {error}
-        </div>
-      )}
-      {status && <div className="squisq-theme-import-status">{status}</div>}
-      {visibleWarnings.length > 0 && (
-        <ul className="squisq-theme-import-warnings">
-          {visibleWarnings.map((w, i) => (
-            <li key={i}>{w}</li>
-          ))}
-          {hiddenWarnings > 0 && <li>…and {hiddenWarnings} more</li>}
-        </ul>
-      )}
-    </div>
-  );
-}