@orz/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,638 @@
+import { composeTerminalTheme, composeTheme, DEFAULT_VARIANT, isCustomTerminalTheme, schemesOf, } from "@orz/themes";
+import { useMemo, useReducer } from "react";
+import { uniqueLabel } from "../../lib/theme-file.js";
+const SCHEMES = ["light", "dark"];
+const other = (scheme) => scheme === "light" ? "dark" : "light";
+const isBased = (side) => "base" in side;
+const isBasedTerminal = (terminal) => "base" in terminal;
+function baseRef(ref) {
+    const out = { ...ref };
+    if (out.variant === undefined || out.variant === DEFAULT_VARIANT) {
+        delete out.variant;
+    }
+    return out;
+}
+function withoutKey(record, key) {
+    if (record === undefined || !Object.hasOwn(record, key))
+        return record;
+    const out = { ...record };
+    delete out[key];
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+/** `{ ...object, [key]: value }`, the key left out when the value is undefined. */
+function setOptional(object, key, value) {
+    const out = { ...object };
+    if (value === undefined)
+        delete out[key];
+    else
+        out[key] = value;
+    return out;
+}
+/** On a terminal theme, the mode of the side's terminal palette. */
+export function sideMode(draft, scheme) {
+    const side = draft[scheme];
+    if (side === undefined)
+        return "none";
+    return "base" in side ? "based" : "detached";
+}
+/** The terminal palette a side carries: on a terminal theme, the side itself. */
+export function terminalOf(draft, scheme) {
+    return isCustomTerminalTheme(draft) ? draft[scheme] : draft[scheme]?.terminal;
+}
+/** null when the side is None. A terminal theme's side never follows. */
+export function terminalMode(draft, scheme) {
+    if (isCustomTerminalTheme(draft)) {
+        const side = draft[scheme];
+        if (side === undefined)
+            return null;
+        return isBasedTerminal(side) ? "based" : "detached";
+    }
+    const side = draft[scheme];
+    return side === undefined ? null : terminalModeOf(side);
+}
+function terminalModeOf(side) {
+    if (side.terminal === undefined)
+        return "follow";
+    return isBasedTerminal(side.terminal) ? "based" : "detached";
+}
+/** True only on a based side that pins `name`. */
+export function isOverridden(draft, scheme, name) {
+    const side = draft[scheme];
+    return (side !== undefined &&
+        isBased(side) &&
+        side.tokens !== undefined &&
+        Object.hasOwn(side.tokens, name));
+}
+/** True only on a based terminal that pins `name`. */
+export function isTerminalOverridden(draft, scheme, name) {
+    const terminal = terminalOf(draft, scheme);
+    return (terminal !== undefined &&
+        isBasedTerminal(terminal) &&
+        terminal.tokens !== undefined &&
+        Object.hasOwn(terminal.tokens, name));
+}
+/** Overrides on the side, among `names` when given (a group's tokens). */
+export function overrideCount(draft, scheme, names) {
+    const side = draft[scheme];
+    if (side === undefined || !isBased(side) || side.tokens === undefined) {
+        return 0;
+    }
+    const keys = Object.keys(side.tokens);
+    return names ? keys.filter((k) => names.includes(k)).length : keys.length;
+}
+export function terminalOverrideCount(draft, scheme, names) {
+    const terminal = terminalOf(draft, scheme);
+    if (terminal === undefined ||
+        !isBasedTerminal(terminal) ||
+        terminal.tokens === undefined) {
+        return 0;
+    }
+    const keys = Object.keys(terminal.tokens);
+    return names ? keys.filter((k) => names.includes(k)).length : keys.length;
+}
+/**
+ * Both sides exist and carry equal terminals. Two following terminals count
+ * only on the same base and variant: following different bases shows
+ * different colours, and a pin would give each side a different reference.
+ */
+export function sameTerminal(draft) {
+    const { light, dark } = draft;
+    if (light === undefined || dark === undefined)
+        return false;
+    if (!deepEqual(light.terminal, dark.terminal))
+        return false;
+    return light.terminal !== undefined || followSameBase(light, dark);
+}
+function followSameBase(a, b) {
+    return (isBased(a) && isBased(b) && deepEqual(baseRef(a.base), baseRef(b.base)));
+}
+/**
+ * Only a based UI side can leave its terminal to its base; both sides at
+ * once only when they are based on the same base.
+ */
+export function canFollow(draft, target) {
+    if (target !== "both")
+        return sideMode(draft, target) === "based";
+    const { light, dark } = draft;
+    return light !== undefined && dark !== undefined
+        ? followSameBase(light, dark)
+        : SCHEMES.some((s) => sideMode(draft, s) === "based");
+}
+/** Structural equality on JSON-like values; an undefined property counts as absent. */
+export function deepEqual(a, b) {
+    if (a === b)
+        return true;
+    if (typeof a !== "object" || typeof b !== "object" || !a || !b)
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const left = a;
+    const right = b;
+    const keys = new Set([...Object.keys(left), ...Object.keys(right)].filter((k) => left[k] !== undefined || right[k] !== undefined));
+    for (const key of keys) {
+        if (!deepEqual(left[key], right[key]))
+            return false;
+    }
+    return true;
+}
+export function isDirty(state) {
+    return state.saved === null
+        ? state.touched
+        : !deepEqual(state.draft, state.saved);
+}
+export function initDraftState(initial) {
+    return {
+        saved: initial.saved,
+        draft: initial.draft,
+        memory: {},
+        touched: false,
+    };
+}
+function remember(memory, side) {
+    if (side === undefined)
+        return memory;
+    return isBased(side)
+        ? { ...memory, based: side }
+        : { ...memory, detached: side };
+}
+function rememberTerminal(memory, side) {
+    const terminal = side.terminal;
+    if (terminal === undefined)
+        return memory;
+    return isBasedTerminal(terminal)
+        ? { ...memory, terminalBased: terminal }
+        : { ...memory, terminalDetached: terminal };
+}
+function detach(based, resolved) {
+    // A palette the user named is kept; a terminal following the base or
+    // already detached becomes the colours it shows.
+    const terminal = based?.terminal && isBasedTerminal(based.terminal)
+        ? based.terminal
+        : { tokens: { ...resolved.terminal } };
+    return { tokens: { ...resolved.tokens }, terminal };
+}
+function setSideMode(state, action) {
+    const { scheme, mode } = action;
+    const current = state.draft[scheme];
+    if (sideMode(state.draft, scheme) === mode)
+        return null;
+    const memory = remember(state.memory[scheme] ?? {}, current);
+    let next;
+    if (mode === "based") {
+        next =
+            memory.based ??
+                (action.base ? { base: baseRef(action.base) } : undefined);
+        if (next === undefined)
+            return null;
+    }
+    else if (mode === "detached") {
+        if (memory.detached)
+            next = memory.detached;
+        else if (action.resolved) {
+            next = detach(current && isBased(current) ? current : memory.based, action.resolved);
+        }
+        else
+            return null;
+    }
+    return {
+        draft: setOptional(state.draft, scheme, next),
+        memory: { ...state.memory, [scheme]: memory },
+    };
+}
+/** Applies `edit` to the side(s) `target` names that exist; an edit returning undefined leaves a side as is. */
+function editSides(state, target, edit) {
+    let draft = state.draft;
+    let memory = state.memory;
+    for (const scheme of target === "both" ? SCHEMES : [target]) {
+        const side = draft[scheme];
+        if (side === undefined)
+            continue;
+        const result = edit(side, memory[scheme] ?? {});
+        if (result === undefined || deepEqual(result.side, side))
+            continue;
+        draft = { ...draft, [scheme]: result.side };
+        if (result.memory)
+            memory = { ...memory, [scheme]: result.memory };
+    }
+    return draft === state.draft ? null : { draft, memory };
+}
+function editBased(state, scheme, edit) {
+    return editSides(state, scheme, (side) => isBased(side) ? { side: edit(side) } : undefined);
+}
+function setTerminal(side, terminal) {
+    return setOptional(side, "terminal", terminal);
+}
+function editBasedTerminal(state, target, edit) {
+    return editSides(state, target, (side) => side.terminal && isBasedTerminal(side.terminal)
+        ? { side: setTerminal(side, edit(side.terminal)) }
+        : undefined);
+}
+function setTerminalMode(state, action) {
+    const { target, mode } = action;
+    if (mode === "none")
+        return null;
+    // For both sides, the first side's choice is written to each, so a shared
+    // terminal stays one terminal even when the sides remember different ones.
+    const source = target === "both" ? SCHEMES.find((s) => state.draft[s]) : target;
+    const side = source && state.draft[source];
+    if (source === undefined || side === undefined)
+        return null;
+    if (terminalModeOf(side) === mode)
+        return null;
+    const memory = rememberTerminal(state.memory[source] ?? {}, side);
+    let terminal;
+    if (mode === "follow") {
+        if (!canFollow(state.draft, target))
+            return null;
+    }
+    else if (mode === "based") {
+        terminal =
+            memory.terminalBased ??
+                (action.base ? { base: baseRef(action.base) } : undefined);
+        if (terminal === undefined)
+            return null;
+    }
+    else {
+        terminal =
+            memory.terminalDetached ??
+                (action.resolved ? { tokens: { ...action.resolved } } : undefined);
+        if (terminal === undefined)
+            return null;
+    }
+    return editSides(state, target, (each, eachMemory) => ({
+        side: setTerminal(each, terminal),
+        memory: rememberTerminal(eachMemory, each),
+    }));
+}
+function shareTerminal(state, from, resolved) {
+    const source = state.draft[from];
+    const target = state.draft[other(from)];
+    if (source === undefined || target === undefined)
+        return null;
+    if (sameTerminal(state.draft))
+        return null;
+    if (source.terminal === undefined &&
+        isBased(source) &&
+        isBased(target) &&
+        !followSameBase(source, target)) {
+        // Following two different bases is not one terminal; both name the
+        // source's base, which shows what following it did.
+        const terminal = { base: baseRef({ ...source.base }) };
+        return {
+            draft: {
+                ...state.draft,
+                [from]: setTerminal(source, terminal),
+                [other(from)]: setTerminal(target, terminal),
+            },
+            memory: state.memory,
+        };
+    }
+    if (source.terminal === undefined && !isBased(target)) {
+        if (resolved === undefined)
+            return null;
+        const terminal = { tokens: { ...resolved } };
+        return {
+            draft: {
+                ...state.draft,
+                [from]: setTerminal(source, terminal),
+                [other(from)]: setTerminal(target, terminal),
+            },
+            memory: state.memory,
+        };
+    }
+    return {
+        draft: {
+            ...state.draft,
+            [other(from)]: setTerminal(target, source.terminal),
+        },
+        memory: state.memory,
+    };
+}
+/** Applies `edit` to a terminal theme's side, when it exists. */
+function editTerminalSide(state, target, edit) {
+    if (target === "both")
+        return null;
+    const side = state.draft[target];
+    const next = side && edit(side);
+    if (next === undefined || deepEqual(next, side))
+        return null;
+    return { draft: { ...state.draft, [target]: next }, memory: state.memory };
+}
+function editBasedTerminalSide(state, target, edit) {
+    return editTerminalSide(state, target, (side) => isBasedTerminal(side) ? edit(side) : undefined);
+}
+/** None · Based on a palette · Fully custom for one side of a terminal theme. */
+function setTerminalSideMode(state, action) {
+    const { target, mode } = action;
+    if (target === "both" || mode === "follow")
+        return null;
+    if (sideMode(state.draft, target) === mode)
+        return null;
+    const current = state.draft[target];
+    let memory = state.memory[target] ?? {};
+    if (current !== undefined) {
+        memory = isBasedTerminal(current)
+            ? { ...memory, terminalBased: current }
+            : { ...memory, terminalDetached: current };
+    }
+    let next;
+    if (mode === "based") {
+        next =
+            memory.terminalBased ??
+                (action.base ? { base: baseRef(action.base) } : undefined);
+        if (next === undefined)
+            return null;
+    }
+    else if (mode === "detached") {
+        next =
+            memory.terminalDetached ??
+                (action.resolved ? { tokens: { ...action.resolved } } : undefined);
+        if (next === undefined)
+            return null;
+    }
+    return {
+        draft: setOptional(state.draft, target, next),
+        memory: { ...state.memory, [target]: memory },
+    };
+}
+/** The terminal actions, on a terminal theme's sides; UI actions do nothing. */
+function applyTerminal(state, action) {
+    switch (action.type) {
+        case "setTerminalMode":
+            return setTerminalSideMode(state, action);
+        case "setTerminalBase":
+            return editTerminalSide(state, action.target, (side) => {
+                const next = { base: baseRef(action.base) };
+                if (isBasedTerminal(side) && side.tokens)
+                    next.tokens = side.tokens;
+                return next;
+            });
+        case "setTerminalVariant":
+            return editBasedTerminalSide(state, action.target, (terminal) => ({
+                ...terminal,
+                base: baseRef({ ...terminal.base, variant: action.variant }),
+            }));
+        case "setTerminalToken":
+            return editTerminalSide(state, action.target, (side) => {
+                const pinned = { [action.name]: action.value };
+                // A based side pins the value even when it equals the base's: only ↺ unpins.
+                return isBasedTerminal(side)
+                    ? { ...side, tokens: { ...side.tokens, ...pinned } }
+                    : { tokens: { ...side.tokens, ...pinned } };
+            });
+        case "resetTerminalToken":
+            return editBasedTerminalSide(state, action.target, (terminal) => setOptional(terminal, "tokens", withoutKey(terminal.tokens, action.name)));
+        case "resetAllTerminal":
+            return editBasedTerminalSide(state, action.target, (terminal) => setOptional(terminal, "tokens", undefined));
+        default:
+            return null;
+    }
+}
+function apply(state, action) {
+    if (action.type === "load" || action.type === "markSaved")
+        return null;
+    if (action.type === "setLabel") {
+        return action.label === state.draft.label
+            ? null
+            : {
+                draft: { ...state.draft, label: action.label },
+                memory: state.memory,
+            };
+    }
+    if (isCustomTerminalTheme(state.draft)) {
+        return applyTerminal(state, action);
+    }
+    return applyUi(state, action);
+}
+function applyUi(state, action) {
+    switch (action.type) {
+        case "load":
+        case "markSaved":
+        case "setLabel":
+            return null;
+        case "setSideMode":
+            return setSideMode(state, action);
+        case "setBase":
+            return editBased(state, action.scheme, (side) => ({
+                ...side,
+                base: baseRef(action.base),
+            }));
+        case "setVariant":
+            return editBased(state, action.scheme, (side) => ({
+                ...side,
+                base: baseRef({ ...side.base, variant: action.variant }),
+            }));
+        case "setToken":
+            // A based side pins the value even when it equals the base's: only ↺ unpins.
+            return editSides(state, action.scheme, (side) => ({
+                side: {
+                    ...side,
+                    tokens: { ...side.tokens, [action.name]: action.value },
+                },
+            }));
+        case "resetToken":
+            return editBased(state, action.scheme, (side) => setOptional(side, "tokens", withoutKey(side.tokens, action.name)));
+        case "resetAll":
+            return editBased(state, action.scheme, (side) => setOptional(side, "tokens", undefined));
+        case "setTerminalMode":
+            return setTerminalMode(state, action);
+        case "setTerminalBase":
+            return editSides(state, action.target, (side) => {
+                const terminal = side.terminal;
+                const tokens = terminal && isBasedTerminal(terminal) ? terminal.tokens : undefined;
+                const next = { base: baseRef(action.base) };
+                if (tokens)
+                    next.tokens = tokens;
+                return { side: setTerminal(side, next) };
+            });
+        case "setTerminalVariant":
+            return editBasedTerminal(state, action.target, (terminal) => ({
+                ...terminal,
+                base: baseRef({ ...terminal.base, variant: action.variant }),
+            }));
+        case "setTerminalToken":
+            return editSides(state, action.target, (side) => {
+                const terminal = side.terminal;
+                const pinned = { [action.name]: action.value };
+                let next;
+                if (terminal === undefined) {
+                    // Editing a following terminal pins the colour on the UI base's own
+                    // terminal, which shows exactly what following did.
+                    if (!isBased(side))
+                        return undefined;
+                    next = { base: baseRef({ ...side.base }), tokens: pinned };
+                }
+                else if (isBasedTerminal(terminal)) {
+                    next = { ...terminal, tokens: { ...terminal.tokens, ...pinned } };
+                }
+                else {
+                    next = { tokens: { ...terminal.tokens, ...pinned } };
+                }
+                return { side: setTerminal(side, next) };
+            });
+        case "resetTerminalToken":
+            return editBasedTerminal(state, action.target, (terminal) => setOptional(terminal, "tokens", withoutKey(terminal.tokens, action.name)));
+        case "resetAllTerminal":
+            return editBasedTerminal(state, action.target, (terminal) => setOptional(terminal, "tokens", undefined));
+        case "shareTerminal":
+            return shareTerminal(state, action.from, action.resolved);
+    }
+}
+// A load or markSaved may change the kind; only the editor sends those, and
+// it keeps the union.
+export function draftReducer(state, action) {
+    if (action.type === "load")
+        return initDraftState(action);
+    if (action.type === "markSaved") {
+        return {
+            ...state,
+            saved: action.saved,
+            draft: action.saved,
+            touched: false,
+        };
+    }
+    const patch = apply(state, action);
+    return patch === null
+        ? state
+        : { ...state, ...patch, touched: true };
+}
+export function composeDraft(draft, themes) {
+    const label = draft.label.trim() || "Untitled theme";
+    return isCustomTerminalTheme(draft)
+        ? composeTerminalTheme({ ...draft, label }, themes)
+        : composeTheme({ ...draft, label }, themes);
+}
+/**
+ * The draft for one editing session. `initial` is read on mount only; switch
+ * themes with a `load` action. `themes`: the UI and terminal lists together,
+ * as the store composes against.
+ */
+export function useThemeDraft(initial, themes) {
+    const [state, dispatch] = useReducer(draftReducer, initial, initDraftState);
+    const composed = useMemo(() => composeDraft(state.draft, themes), [state.draft, themes]);
+    return {
+        state,
+        draft: state.draft,
+        saved: state.saved,
+        dirty: isDirty(state),
+        composed,
+        dispatch,
+    };
+}
+const ID_LENGTH = 8;
+/** `custom-` and 8 random base-36 characters, regenerated while it is in `taken`. */
+export function newThemeId(taken) {
+    for (;;) {
+        const bytes = crypto.getRandomValues(new Uint8Array(ID_LENGTH));
+        // 252 is the largest multiple of 36 below 256; rejecting above it keeps
+        // every character equally likely.
+        if (bytes.some((b) => b >= 252))
+            continue;
+        const id = `custom-${Array.from(bytes, (b) => (b % 36).toString(36)).join("")}`;
+        if (!taken.includes(id))
+            return id;
+    }
+}
+const takenIds = (ctx) => [
+    ...ctx.customs.map((c) => c.id),
+    ...ctx.baseThemes.map((t) => t.id),
+];
+function copySides(custom) {
+    const out = {};
+    for (const scheme of SCHEMES) {
+        const side = custom[scheme];
+        if (side !== undefined)
+            out[scheme] = structuredClone(side);
+    }
+    return out;
+}
+/** "*Label* copy", numbered until free, as an unsaved theme of the same kind with a new id. */
+export function duplicate(custom, ctx) {
+    return {
+        id: newThemeId(takenIds(ctx)),
+        ...(isCustomTerminalTheme(custom) ? { kind: "terminal" } : {}),
+        label: uniqueLabel(`${custom.label} copy`, ctx.labels),
+        ...copySides(custom),
+    };
+}
+export function newTheme(ctx) {
+    if ("kind" in ctx && ctx.kind === "terminal")
+        return newTerminalTheme(ctx);
+    return newUiTheme(ctx);
+}
+function newUiTheme(ctx) {
+    const id = newThemeId(takenIds(ctx));
+    const label = uniqueLabel("Custom theme", ctx.labels);
+    const shown = ctx.resolved.theme.id;
+    const custom = ctx.customs.find((c) => c.id === shown);
+    if (custom !== undefined && !isCustomTerminalTheme(custom)) {
+        return { id, label, ...copySides(custom) };
+    }
+    const base = ctx.baseThemes.find((t) => t.id === shown) ??
+        ctx.baseThemes[0] ??
+        ctx.resolved.theme;
+    const variant = ctx.pref.ui?.theme === base.id ? ctx.pref.ui.variant : ctx.resolved.variant;
+    const out = { id, label };
+    for (const scheme of schemesOf(base)) {
+        const variants = base[scheme]?.variants ?? {};
+        out[scheme] = {
+            base: baseRef({
+                theme: base.id,
+                variant: variant !== undefined && Object.hasOwn(variants, variant)
+                    ? variant
+                    : undefined,
+            }),
+        };
+    }
+    return out;
+}
+/**
+ * A copy of what the terminal shows. A base theme (UI or terminal-only): each
+ * scheme it has becomes a based side on it, with the current variant where
+ * that palette defines it. A terminal custom theme: its sides. A UI custom
+ * theme cannot be a base, so each of its sides becomes Fully custom from the
+ * terminal colours it shows.
+ */
+function newTerminalTheme(ctx) {
+    const id = newThemeId(takenIds(ctx));
+    const label = uniqueLabel("Terminal theme", ctx.labels);
+    const { theme, following } = ctx.terminal;
+    const custom = ctx.customs.find((c) => c.id === theme.id);
+    if (custom !== undefined && isCustomTerminalTheme(custom)) {
+        return { id, kind: "terminal", label, ...copySides(custom) };
+    }
+    const out = { id, kind: "terminal", label };
+    const pick = following ? ctx.pref.ui : ctx.pref.terminal;
+    const variant = pick?.theme === theme.id && pick.variant !== undefined
+        ? pick.variant
+        : ctx.terminal.variant;
+    for (const scheme of schemesOf(theme)) {
+        const palette = theme[scheme];
+        if (palette === undefined)
+            continue;
+        if (custom !== undefined) {
+            out[scheme] = { tokens: { ...palette.terminal } };
+            continue;
+        }
+        out[scheme] = {
+            base: baseRef({
+                theme: theme.id,
+                variant: Object.hasOwn(palette.variants ?? {}, variant)
+                    ? variant
+                    : undefined,
+            }),
+        };
+    }
+    return out;
+}
+/**
+ * The base a side takes when it turns based with nothing remembered: the
+ * committed UI theme if it is a base theme with `scheme`, else the first base
+ * theme that has it.
+ */
+export function fallbackBase(scheme, committedTheme, baseThemes) {
+    const theme = baseThemes.find((t) => t.id === committedTheme && t[scheme]) ??
+        baseThemes.find((t) => t[scheme] !== undefined);
+    return theme && { theme: theme.id };
+}
+//# sourceMappingURL=draft.js.map