@orz/ui 0.0.0-stage → 0.1.0

package/dist/components/theme-editor/tokens.js

@@ -0,0 +1,155 @@
+const pair = (surface, surfaceLabel, text, textLabel) => ({
+    kind: "pair",
+    surface: { name: surface, label: surfaceLabel },
+    text: { name: text, label: textLabel },
+});
+const single = (name, label) => ({
+    kind: "single",
+    token: { name, label },
+});
+const ANSI = [
+    ["black", "Black"],
+    ["red", "Red"],
+    ["green", "Green"],
+    ["yellow", "Yellow"],
+    ["blue", "Blue"],
+    ["magenta", "Magenta"],
+    ["cyan", "Cyan"],
+    ["white", "White"],
+];
+export const UI_TOKEN_GROUPS = [
+    {
+        id: "surfaces",
+        label: "Surfaces",
+        rows: [
+            pair("background", "Background", "foreground", "Text"),
+            pair("card", "Card", "card-foreground", "Card text"),
+            pair("popover", "Popover", "popover-foreground", "Popover text"),
+        ],
+    },
+    {
+        id: "actions",
+        label: "Actions",
+        rows: [
+            pair("primary", "Primary", "primary-foreground", "On primary"),
+            pair("secondary", "Secondary", "secondary-foreground", "On secondary"),
+            pair("accent", "Accent", "accent-foreground", "On accent"),
+            pair("muted", "Muted", "muted-foreground", "Muted text"),
+            single("destructive", "Destructive"),
+        ],
+    },
+    {
+        id: "lines",
+        label: "Lines & focus",
+        rows: [
+            single("border", "Border"),
+            single("input", "Input border"),
+            single("ring", "Focus ring"),
+        ],
+    },
+    {
+        id: "charts",
+        label: "Charts",
+        rows: [
+            {
+                kind: "strip",
+                tokens: [1, 2, 3, 4, 5].map((n) => ({
+                    name: `chart-${n}`,
+                    label: `Chart ${n}`,
+                })),
+            },
+        ],
+    },
+    {
+        id: "sidebar",
+        label: "Sidebar",
+        rows: [
+            pair("sidebar", "Sidebar", "sidebar-foreground", "Sidebar text"),
+            pair("sidebar-primary", "Sidebar primary", "sidebar-primary-foreground", "On sidebar primary"),
+            pair("sidebar-accent", "Sidebar accent", "sidebar-accent-foreground", "On sidebar accent"),
+            single("sidebar-border", "Sidebar border"),
+            single("sidebar-ring", "Sidebar focus ring"),
+        ],
+    },
+    {
+        id: "diff",
+        label: "Diff",
+        rows: [
+            single("diff-addition", "Addition"),
+            single("diff-deletion", "Deletion"),
+        ],
+    },
+];
+export const TERMINAL_TOKEN_GROUPS = [
+    {
+        id: "terminal-text",
+        label: "Background & text",
+        rows: [
+            pair("terminal-background", "Background", "terminal-foreground", "Text"),
+        ],
+    },
+    {
+        id: "ansi",
+        label: "ANSI colours",
+        rows: [
+            {
+                kind: "strip",
+                tokens: ANSI.map(([id, label]) => ({
+                    name: `ansi-${id}`,
+                    label,
+                })),
+            },
+            {
+                kind: "strip",
+                tokens: ANSI.map(([id, label]) => ({
+                    name: `ansi-bright-${id}`,
+                    label,
+                })),
+            },
+        ],
+    },
+    {
+        id: "cursor",
+        label: "Cursor & selection",
+        rows: [
+            single("terminal-cursor", "Cursor"),
+            single("terminal-selection", "Selection"),
+        ],
+    },
+];
+/** The token names a row or group holds, in display order. */
+export function rowTokens(row) {
+    if (row.kind === "pair")
+        return [row.surface, row.text];
+    if (row.kind === "single")
+        return [row.token];
+    return row.tokens;
+}
+export function groupTokens(group) {
+    return group.rows.flatMap((row) => rowTokens(row).map((t) => t.name));
+}
+/**
+ * The surface a single token is drawn on, for its popover's contrast ratio.
+ * Pair members are absent: their row shows the pair's ratio.
+ */
+export const UI_CONTRAST_WITH = {
+    destructive: "background",
+    border: "background",
+    input: "background",
+    ring: "background",
+    "chart-1": "background",
+    "chart-2": "background",
+    "chart-3": "background",
+    "chart-4": "background",
+    "chart-5": "background",
+    "diff-addition": "background",
+    "diff-deletion": "background",
+    "sidebar-border": "sidebar",
+    "sidebar-ring": "sidebar",
+};
+export const TERMINAL_CONTRAST_WITH = Object.fromEntries([
+    ...ANSI.flatMap(([id]) => [`ansi-${id}`, `ansi-bright-${id}`]),
+    "terminal-cursor",
+    "terminal-selection",
+].map((name) => [name, "terminal-background"]));
+//# sourceMappingURL=tokens.js.map

package/dist/components/theme-editor/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../../src/components/theme-editor/tokens.ts"],"names":[],"mappings":"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"}

package/dist/components/theme-editor.d.ts

@@ -0,0 +1,26 @@
+export type CustomThemeKind = "ui" | "terminal";
+export interface ThemeEditorProps {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    /**
+     * The custom theme to open, as `ThemeMenu`'s `onCustomize(id?)` passes it. Absent, an id the
+     * store does not hold, or a theme of a kind this store cannot show: a new theme. Read when
+     * `open` turns true; changing it while open selects that theme (with the unsaved-changes
+     * prompt).
+     */
+    themeId?: string;
+    /**
+     * The kind of a new theme, as `ThemeMenu`'s `onCustomize(id, slot)` passes its slot. Unset, or a
+     * slot the store lacks: "ui" when the store has a UI slot, else "terminal". Read when `open`
+     * turns true, as `themeId` is.
+     */
+    kind?: CustomThemeKind;
+}
+/**
+ * The custom theme editor: a panel docked to the right that edits the
+ * store's custom themes while the page previews the draft. A store with a
+ * UI slot edits UI themes, one with a terminal slot terminal themes, and one
+ * with both, both kinds.
+ */
+export declare function ThemeEditor(props: ThemeEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-editor.d.ts.map

package/dist/components/theme-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-editor.d.ts","sourceRoot":"","sources":["../../src/components/theme-editor.tsx"],"names":[],"mappings":"AA6DA,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,UAAU,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IAClC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAeD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BA4ClD"}

package/dist/components/theme-editor.js

@@ -0,0 +1,467 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_VARIANT, isCustomTerminalTheme, } from "@orz/themes";
+import { XIcon } from "lucide-react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { serializeThemeFile } from "../lib/theme-file.js";
+import { useDirtySource } from "../lib/unsaved-guard.js";
+import { useTerminalTheme, useTheme, useThemeSlots, } from "../theme/index.js";
+import { Button } from "./button.js";
+import { ConfirmDialog } from "./confirm-dialog.js";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, } from "./sheet.js";
+import { duplicate, newTheme, newThemeId, sameTerminal, useThemeDraft, } from "./theme-editor/draft.js";
+import { ALL_THEMES_FILE_NAME, ExportPanel, themeFileName, } from "./theme-editor/export-panel.js";
+import { TerminalThemeForm, ThemeForm, } from "./theme-editor/form.js";
+import { ImportPanel } from "./theme-editor/import-panel.js";
+import { displayLabel, ThemeList } from "./theme-editor/theme-list.js";
+import { UnsavedChangesDialog } from "./unsaved-changes-dialog.js";
+const FORM = { kind: "form" };
+const SCHEMES = ["light", "dark"];
+const other = (scheme) => scheme === "light" ? "dark" : "light";
+const kindOf = (custom) => isCustomTerminalTheme(custom) ? "terminal" : "ui";
+/**
+ * The custom theme editor: a panel docked to the right that edits the
+ * store's custom themes while the page previews the draft. A store with a
+ * UI slot edits UI themes, one with a terminal slot terminal themes, and one
+ * with both, both kinds.
+ */
+export function ThemeEditor(props) {
+    // Esc, the outside click and ✕ all arrive here; the session decides
+    // whether to ask first.
+    const requestClose = useRef(() => props.onOpenChange(false));
+    // The sheet keeps its content through the exit animation, so a reopening
+    // in that window would otherwise get the closing session back.
+    const [opening, setOpening] = useState({ open: props.open, count: 0 });
+    if (opening.open !== props.open) {
+        setOpening({
+            open: props.open,
+            count: opening.count + (props.open ? 1 : 0),
+        });
+    }
+    return (_jsx(Sheet, { open: props.open, onOpenChange: (open) => {
+            if (!open)
+                requestClose.current();
+        }, children: _jsx(SheetContent, { side: "right", overlay: "clear", showCloseButton: false, className: "gap-0 data-[side=right]:w-full data-[side=right]:sm:max-w-[460px]", onEscapeKeyDown: (event) => {
+                // An Esc that clears the colour filter or ends an IME composition is not a close.
+                const { target } = event;
+                if (event.isComposing ||
+                    (target instanceof Element && target.closest("[data-keeps-escape]"))) {
+                    event.preventDefault();
+                }
+            }, children: _jsx(EditorSession, { ...props, requestClose: requestClose }, opening.count) }) }));
+}
+/** One opening of the editor; mounted while the sheet is open. */
+function EditorSession({ open, themeId, kind, onOpenChange, requestClose, }) {
+    const ui = useTheme();
+    const terminal = useTerminalTheme();
+    const slots = useThemeSlots();
+    const { customThemes: everyCustom, pref, setPref, preview } = ui;
+    // Without a UI slot useTheme() answers a fallback list.
+    const themes = slots.ui ? ui.themes : NO_THEMES;
+    const offered = (k) => slots[k];
+    const newKind = kind !== undefined && offered(kind) ? kind : slots.ui ? "ui" : "terminal";
+    // Writes go through the whole stored list, so a kind this store cannot
+    // show is written back untouched.
+    const customs = useMemo(() => everyCustom.filter((c) => slots[kindOf(c)]), [everyCustom, slots]);
+    const customIds = useMemo(() => new Set(everyCustom.map((c) => c.id)), [everyCustom]);
+    const baseThemes = useMemo(() => themes.filter((t) => !customIds.has(t.id)), [themes, customIds]);
+    const palettes = useMemo(() => (slots.terminal ? terminal.themes : themes).filter((t) => !customIds.has(t.id)), [slots.terminal, terminal.themes, themes, customIds]);
+    // Custom themes are never bases, so the draft composes against the base
+    // lists alone.
+    const composeList = useMemo(() => [...baseThemes, ...palettes], [baseThemes, palettes]);
+    // Names are unique across both kinds and both slots' base themes, so the
+    // two pickers never show two rows with one name.
+    const labels = useMemo(() => [
+        ...everyCustom.map((c) => c.label),
+        ...composeList.map((t) => t.label),
+    ], [everyCustom, composeList]);
+    const start = (id, kindForNew = newKind) => {
+        const custom = id === undefined ? undefined : customs.find((c) => c.id === id);
+        if (custom !== undefined)
+            return { draft: custom, saved: custom };
+        // The committed picks, not what the page shows: that may be this
+        // session's preview.
+        const committed = themes.find((t) => t.id === pref.ui?.theme) ?? ui.theme;
+        if (kindForNew === "terminal") {
+            const pick = pref.terminal;
+            const picked = pick && terminal.themes.find((t) => t.id === pick.theme);
+            const shown = picked !== undefined
+                ? {
+                    theme: picked,
+                    variant: pick?.variant ?? DEFAULT_VARIANT,
+                    following: false,
+                }
+                : slots.ui
+                    ? {
+                        theme: committed,
+                        variant: pref.ui?.variant ?? DEFAULT_VARIANT,
+                        following: true,
+                    }
+                    : {
+                        theme: terminal.theme,
+                        variant: terminal.variant,
+                        following: false,
+                    };
+            const draft = newTheme({
+                kind: "terminal",
+                pref,
+                terminal: shown,
+                baseThemes,
+                customs: everyCustom,
+                labels,
+            });
+            return { draft, saved: null };
+        }
+        const draft = newTheme({
+            pref,
+            resolved: {
+                theme: committed,
+                variant: pref.ui?.variant ?? DEFAULT_VARIANT,
+            },
+            baseThemes,
+            customs: everyCustom,
+            labels,
+        });
+        return { draft, saved: null };
+    };
+    const [initial] = useState(() => start(themeId));
+    const { state, draft, dirty, composed, dispatch } = useThemeDraft(initial, composeList);
+    const terminalDraft = isCustomTerminalTheme(draft) ? draft : null;
+    const uiDraft = isCustomTerminalTheme(draft) ? null : draft;
+    const composedUi = terminalDraft ? null : composed;
+    const composedTerminal = terminalDraft
+        ? composed
+        : null;
+    const shownScheme = (custom) => isCustomTerminalTheme(custom) || !slots.ui
+        ? terminal.colorScheme
+        : ui.colorScheme;
+    const firstScheme = (custom) => {
+        const scheme = shownScheme(custom);
+        return custom[scheme]
+            ? scheme
+            : (SCHEMES.find((s) => custom[s] !== undefined) ?? scheme);
+    };
+    const [tab, setTab] = useState(() => firstScheme(initial.draft));
+    // The side the page shows: the last Light or Dark tab.
+    const [uiScheme, setUiScheme] = useState(() => firstScheme(initial.draft));
+    const viewFor = (custom, side) => ({
+        split: isCustomTerminalTheme(custom) || !sameTerminal(custom),
+        side: custom[side] ? side : other(side),
+    });
+    const [terminalView, setTerminalView] = useState(() => viewFor(initial.draft, firstScheme(initial.draft)));
+    const [panel, setPanel] = useState(FORM);
+    const [formKey, setFormKey] = useState(0);
+    const [prompt, setPrompt] = useState(null);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const [saveError, setSaveError] = useState(null);
+    const [importError, setImportError] = useState(null);
+    const both = draft.light !== undefined && draft.dark !== undefined;
+    const shared = uiDraft !== null && both && !terminalView.split && sameTerminal(uiDraft);
+    // The colours each side last showed, so a side whose base disappears can
+    // still be kept as fully custom.
+    const lastShown = useRef({});
+    const lastShownTerminal = useRef({});
+    useEffect(() => {
+        for (const scheme of SCHEMES) {
+            const palette = composedUi?.[scheme];
+            if (palette)
+                lastShown.current[scheme] = palette;
+            const terminalPalette = composedTerminal?.[scheme];
+            if (terminalPalette) {
+                lastShownTerminal.current[scheme] = terminalPalette.terminal;
+            }
+        }
+    }, [composedUi, composedTerminal]);
+    // A drag repaints at most once a frame.
+    const [pending, setPending] = useState(null);
+    const pendingNext = useRef(null);
+    const frame = useRef(0);
+    const queuePreview = (next) => {
+        pendingNext.current = next;
+        if (next === null) {
+            cancelAnimationFrame(frame.current);
+            frame.current = 0;
+            setPending(null);
+            return;
+        }
+        if (frame.current !== 0)
+            return;
+        frame.current = requestAnimationFrame(() => {
+            frame.current = 0;
+            setPending(pendingNext.current);
+        });
+    };
+    const shownTheme = useMemo(() => {
+        if (composedUi === null)
+            return null;
+        const scheme = composedUi[uiScheme] ? uiScheme : other(uiScheme);
+        const palette = composedUi[scheme];
+        if (palette === undefined)
+            return null;
+        let { tokens, terminal: terminalTokens } = palette;
+        // On the Terminal tab the page keeps its UI side and shows the terminal
+        // being edited.
+        const edited = tab === "terminal" && both && !shared ? terminalView.side : scheme;
+        const editedPalette = composedUi[edited];
+        if (editedPalette)
+            terminalTokens = editedPalette.terminal;
+        if (pending?.kind === "ui" && pending.scheme === scheme) {
+            tokens = { ...tokens, [pending.name]: pending.value };
+        }
+        else if (pending?.kind === "terminal") {
+            terminalTokens = { ...terminalTokens, [pending.name]: pending.value };
+        }
+        return {
+            theme: {
+                ...composedUi,
+                [scheme]: { ...palette, tokens, terminal: terminalTokens },
+            },
+            scheme,
+        };
+    }, [composedUi, uiScheme, tab, both, shared, terminalView.side, pending]);
+    // A terminal theme previews through the terminal slot alone, on the side
+    // of the active tab (or the one it has).
+    const shownTerminal = useMemo(() => {
+        if (composedTerminal === null)
+            return null;
+        const scheme = composedTerminal[uiScheme] ? uiScheme : other(uiScheme);
+        const palette = composedTerminal[scheme];
+        if (palette === undefined)
+            return null;
+        if (pending?.kind !== "terminal") {
+            return { theme: composedTerminal, scheme };
+        }
+        return {
+            theme: {
+                ...composedTerminal,
+                [scheme]: {
+                    terminal: { ...palette.terminal, [pending.name]: pending.value },
+                },
+            },
+            scheme,
+        };
+    }, [composedTerminal, uiScheme, pending]);
+    // Set once the editor hands back control, so a re-render on the way out
+    // (Save re-composes the lists) does not preview again.
+    const closing = useRef(false);
+    useEffect(() => {
+        if (closing.current)
+            return;
+        if (open && shownTerminal !== null) {
+            preview({
+                terminal: { theme: shownTerminal.theme, mode: shownTerminal.scheme },
+            });
+            return;
+        }
+        if (!open || shownTheme === null) {
+            preview(null);
+            return;
+        }
+        preview({
+            ui: { theme: shownTheme.theme, mode: shownTheme.scheme },
+            // Shows the edited terminal even when the user picked a separate one.
+            ...(tab === "terminal" && slots.terminal
+                ? { terminal: "follow" }
+                : {}),
+        });
+    }, [open, shownTheme, shownTerminal, tab, slots.terminal, preview]);
+    useEffect(() => () => {
+        cancelAnimationFrame(frame.current);
+        preview(null);
+    }, [preview]);
+    useDirtySource(() => dirty);
+    const finish = () => {
+        closing.current = true;
+        preview(null);
+        onOpenChange(false);
+    };
+    const guarded = (proceed) => {
+        if (dirty)
+            setPrompt({ proceed });
+        else
+            proceed();
+    };
+    const close = () => guarded(finish);
+    useEffect(() => {
+        requestClose.current = close;
+    });
+    const load = (next) => {
+        dispatch({ type: "load", ...next });
+        lastShown.current = {};
+        lastShownTerminal.current = {};
+        queuePreview(null);
+        setPanel(FORM);
+        setSaveError(null);
+        // A terminal theme has no Terminal tab.
+        if (isCustomTerminalTheme(next.draft) && tab === "terminal") {
+            setTab(uiScheme);
+        }
+        setTerminalView(viewFor(next.draft, uiScheme));
+        setFormKey((k) => k + 1);
+    };
+    const select = (id, kindForNew) => guarded(() => load(start(id, kindForNew)));
+    const seenThemeId = useRef(themeId);
+    useEffect(() => {
+        // On the way out the app clears the id; that is not a new selection.
+        if (!open || closing.current)
+            return;
+        if (themeId === seenThemeId.current)
+            return;
+        seenThemeId.current = themeId;
+        if (themeId !== undefined && themeId === draft.id)
+            return;
+        select(themeId);
+    });
+    const stored = customIds.has(draft.id);
+    const deletedElsewhere = state.saved !== null && !stored;
+    const label = draft.label.trim();
+    const clash = label === ""
+        ? undefined
+        : [...everyCustom.filter((c) => c.id !== draft.id), ...composeList].find((t) => t.label.trim().toLowerCase() === label.toLowerCase());
+    const nameError = label === ""
+        ? "A theme needs a name."
+        : clash
+            ? `The theme "${clash.label}" already has this name.`
+            : null;
+    const sideError = draft.light === undefined && draft.dark === undefined
+        ? "A theme needs a light or a dark side."
+        : null;
+    const save = () => {
+        if (nameError !== null || sideError !== null)
+            return;
+        let theme = { ...draft, label };
+        // A new theme's id was free when it was made; another tab may have
+        // taken it since.
+        if (state.saved === null && stored) {
+            theme = {
+                ...theme,
+                id: newThemeId([
+                    ...everyCustom.map((c) => c.id),
+                    ...composeList.map((t) => t.id),
+                ]),
+            };
+        }
+        const saved = theme;
+        const next = everyCustom.some((c) => c.id === saved.id)
+            ? everyCustom.map((c) => (c.id === saved.id ? saved : c))
+            : [...everyCustom, saved];
+        try {
+            ui.setCustomThemes(next);
+        }
+        catch (error) {
+            setSaveError(`The theme could not be saved: ${error instanceof Error ? error.message : String(error)}`);
+            return;
+        }
+        dispatch({ type: "markSaved", saved });
+        // The saved theme stays on screen: reverting to the old pick right
+        // after the page showed the new one would look like the save failed.
+        if (isCustomTerminalTheme(saved)) {
+            const mode = pref.terminal?.mode ?? pref.ui?.mode ?? "system";
+            setPref({ ...pref, terminal: { theme: saved.id, mode } });
+        }
+        else {
+            setPref({
+                ...pref,
+                ui: { theme: saved.id, mode: pref.ui?.mode ?? uiScheme },
+            });
+        }
+        finish();
+    };
+    // The order the list shows: UI themes, then terminal themes.
+    const listed = useMemo(() => [
+        ...customs.filter((c) => !isCustomTerminalTheme(c)),
+        ...customs.filter(isCustomTerminalTheme),
+    ], [customs]);
+    // After Delete the editor stays open on a neighbour of the deleted theme,
+    // or a new one of its kind; loaded once the store's list and pick reflect
+    // the delete.
+    const [afterDelete, setAfterDelete] = useState(null);
+    useLayoutEffect(() => {
+        if (afterDelete === null)
+            return;
+        setAfterDelete(null);
+        load(start(afterDelete.id, afterDelete.kind));
+    });
+    const remove = () => {
+        setConfirmingDelete(false);
+        const at = listed.findIndex((c) => c.id === draft.id);
+        const next = listed[at + 1] ?? listed[at - 1];
+        try {
+            ui.setCustomThemes(everyCustom.filter((c) => c.id !== draft.id));
+        }
+        catch (error) {
+            setSaveError(`The theme could not be deleted: ${error instanceof Error ? error.message : String(error)}`);
+            return;
+        }
+        setAfterDelete({ id: next?.id, kind: kindOf(draft) });
+    };
+    const copy = () => guarded(() => load({
+        draft: duplicate(state.saved ?? draft, {
+            baseThemes,
+            customs: everyCustom,
+            labels,
+        }),
+        saved: null,
+    }));
+    const importThemes = (picked) => guarded(() => {
+        const taken = [
+            ...everyCustom.map((c) => c.id),
+            ...composeList.map((t) => t.id),
+        ];
+        const added = picked.map((theme) => {
+            const id = newThemeId(taken);
+            taken.push(id);
+            return { ...theme, id };
+        });
+        try {
+            ui.setCustomThemes([...everyCustom, ...added]);
+        }
+        catch (error) {
+            setImportError(`The themes could not be imported: ${error instanceof Error ? error.message : String(error)}`);
+            return;
+        }
+        const first = added.find((c) => offered(kindOf(c)));
+        if (first)
+            load({ draft: first, saved: first });
+    });
+    const exported = useMemo(() => {
+        if (panel.kind !== "export")
+            return null;
+        if (panel.scope === "all") {
+            return {
+                title: "Export all themes",
+                text: serializeThemeFile(everyCustom, composeList),
+                fileName: ALL_THEMES_FILE_NAME,
+            };
+        }
+        const label = displayLabel(draft.label);
+        return {
+            title: `Export ${label}`,
+            text: serializeThemeFile([{ ...draft, label }], composeList),
+            fileName: themeFileName(label),
+        };
+    }, [panel, everyCustom, composeList, draft]);
+    // The button that switched panels is gone with the old panel; without
+    // this, focus would fall back to the sheet itself.
+    const body = useRef(null);
+    const shownPanel = useRef(panel);
+    useEffect(() => {
+        if (shownPanel.current === panel)
+            return;
+        shownPanel.current = panel;
+        body.current?.querySelector("input, textarea")?.focus();
+    }, [panel]);
+    const changeTab = (next) => {
+        setTab(next);
+        if (next !== "terminal")
+            setUiScheme(next);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(SheetHeader, { className: "gap-3 border-b", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(SheetTitle, { className: "flex-1", children: "Custom themes" }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": "Close", onClick: close, children: _jsx(XIcon, {}) })] }), _jsx(SheetDescription, { className: "sr-only", children: "Edit a custom theme. The page previews every change until you save or close." }), _jsx(ThemeList, { customs: customs, kinds: ["ui", "terminal"].filter(offered), draft: draft, dirty: dirty, themes: composeList, onSelect: (id) => select(id), onNew: (k) => select(undefined, k), onImport: () => {
+                            setImportError(null);
+                            setPanel({ kind: "import" });
+                        }, exportAllDisabled: everyCustom.length === 0, onExportAll: () => setPanel({ kind: "export", scope: "all" }) })] }), _jsx("div", { ref: body, className: "min-h-0 flex-1 overflow-y-auto p-4", children: panel.kind === "form" ? (_jsxs(_Fragment, { children: [deletedElsewhere && (_jsx("p", { role: "status", className: "mb-3 rounded-lg border border-amber-500/40 bg-amber-500/10 p-2.5 text-xs", children: "This theme was deleted elsewhere. Save adds it again." })), terminalDraft ? (_jsx(TerminalThemeForm, { draft: terminalDraft, dispatch: dispatch, composed: composedTerminal, lastShown: (scheme) => lastShownTerminal.current[scheme], palettes: palettes, composeList: composeList, nameError: nameError, tab: tab === "terminal" ? uiScheme : tab, onTabChange: changeTab, onPreview: queuePreview }, formKey)) : (_jsx(ThemeForm, { draft: uiDraft, dispatch: dispatch, composed: composedUi, lastShown: (scheme) => lastShown.current[scheme], baseThemes: baseThemes, palettes: palettes, composeList: composeList, committedTheme: pref.ui?.theme, nameError: nameError, tab: tab, onTabChange: changeTab, terminalView: terminalView, onTerminalViewChange: setTerminalView, shared: shared, onPreview: queuePreview }, formKey))] })) : panel.kind === "import" ? (_jsx(ImportPanel, { themes: composeList, labels: labels, slots: slots, onImport: importThemes, error: importError, onBack: () => setPanel(FORM) })) : (exported && (_jsx(ExportPanel, { ...exported, onBack: () => setPanel(FORM) }))) }), panel.kind === "form" && (_jsxs(SheetFooter, { className: "gap-2 border-t", children: [[sideError, saveError].map((message) => message && (_jsx("p", { role: "alert", className: "text-xs text-[color-mix(in_oklab,var(--destructive),var(--foreground)_65%)]", children: message }, message))), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Button, { type: "button", variant: "destructive", size: "sm", disabled: !stored, onClick: () => setConfirmingDelete(true), children: "Delete" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: copy, children: "Duplicate" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setPanel({ kind: "export", scope: "theme" }), children: "Export" }), _jsx("div", { className: "flex-1" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: close, children: "Cancel" }), _jsx(Button, { type: "button", size: "sm", disabled: nameError !== null || sideError !== null, onClick: save, children: "Save" })] })] })), _jsx(UnsavedChangesDialog, { open: prompt !== null, onProceed: () => {
+                    setPrompt(null);
+                    prompt?.proceed();
+                }, onStay: () => setPrompt(null) }), _jsx(ConfirmDialog, { open: confirmingDelete, onOpenChange: setConfirmingDelete, title: `Delete ${displayLabel(state.saved?.label ?? draft.label)}?`, description: "It is removed from the custom themes. A pick that shows it falls back to another theme.", confirmLabel: "Delete", destructive: true, onConfirm: remove })] }));
+}
+const NO_THEMES = [];
+//# sourceMappingURL=theme-editor.js.map