@d0nj/dsh-ui-custom 0.0.0-stage → 0.2.0

package/dist/client/client.js

@@ -0,0 +1,1626 @@
+window.__ModuleLoader__.load({
+  id: '@d0nj/dsh-ui-custom',
+  factory(require) {
+    const __modules = new Map()
+    function __require(id) {
+      if (__modules.has(id)) return __modules.get(id)
+      const factory = __factories[id]
+      if (factory === undefined) throw new Error('ui-custom: unknown module ' + id)
+      const module = { exports: {} }
+      __modules.set(id, module.exports)
+      factory(module, module.exports, __require)
+      __modules.set(id, module.exports)
+      return module.exports
+    }
+    const __factories = {
+      "./client/index.js": (module, exports, __require) => {
+        const { PRESETS, TOKEN_SPECS } = __require('./spec.js');
+        const { resolveCustomization } = __require('./resolve.js');
+        const { ThemeStudio } = __require('./client/panel.js');
+        /** Layer identity; the runtime keeps one layer per source. */
+        const OVERRIDE_SOURCE = 'd0nj-ui-custom';
+        /** Services required before `apply` runs. */
+        const inject = ['theme', 'configForms', 'slots'];
+        /**
+         * The React namespace, handed in by the module envelope.
+         *
+         * The browser loader resolves React through its own module table, so a client
+         * half cannot import it. The stamped envelope calls useReact before apply,
+         * which keeps the dependency explicit instead of reading an ambient global.
+         */
+        let ReactImpl;
+        /**
+         * Provide the React namespace to this plugin.
+         * @param react - the namespace the loader resolved.
+         */
+        function useReact(react) {
+            ReactImpl = react;
+        }
+        /**
+         * Flatten a preset's per-mode tokens to the single value the `register` arm
+         * expects, picking the mode that matches the preset's own base palette.
+         *
+         * `register` takes a flat `tokens` map rather than the two-mode shape
+         * `overrideTokens` accepts, so the mapping has to happen somewhere; doing it
+         * here keeps the colorScheme and the chosen values from disagreeing.
+         *
+         * @param preset - one shipped preset.
+         * @returns the flat token map for `register`.
+         */
+        function flatPresetTokens(preset) {
+            const tokens = {};
+            for (const [name, modes] of Object.entries(preset.tokens)) {
+                tokens[name] = preset.colorScheme === 'dark' ? modes.dark : modes.light;
+            }
+            return tokens;
+        }
+        /**
+         * Normalize the stored value into a document.
+         *
+         * The settings snapshot carries the parsed namespace value, which is already
+         * shaped like the config; this narrows it without trusting the transport.
+         * @param value - snapshot value.
+         * @returns the document to resolve.
+         */
+        function asDocument(value) {
+            const fallback = {
+                basePreset: 'none',
+                tokens: {},
+                typography: {
+                    textFontFamily: '',
+                    codeFontFamily: '',
+                    terminalFontFamily: '',
+                    fontSize: 14,
+                    codeFontSize: 11,
+                    terminalFontSize: 13,
+                },
+                geometry: { radius: 8, density: 'comfortable' },
+            };
+            if (value === null || typeof value !== 'object')
+                return fallback;
+            const record = value;
+            const typography = record.typography;
+            const geometry = record.geometry;
+            return {
+                basePreset: typeof record.basePreset === 'string' ? record.basePreset : 'none',
+                tokens: record.tokens !== null && typeof record.tokens === 'object'
+                    ? record.tokens
+                    : {},
+                typography: {
+                    ...fallback.typography,
+                    ...(typography !== null && typeof typography === 'object'
+                        ? typography
+                        : {}),
+                },
+                geometry: {
+                    ...fallback.geometry,
+                    ...(geometry !== null && typeof geometry === 'object'
+                        ? geometry
+                        : {}),
+                },
+            };
+        }
+        /**
+         * Client plugin body.
+         * @param ctx - client cordis context with `theme` and `configForms` injected.
+         */
+        function apply(ctx) {
+            // A throw here fails the whole web boot (1 entry did not activate), which takes
+            // the UI down for a customization plugin. Every step is therefore guarded: a
+            // problem is reported once and the rest of the harness keeps working.
+            try {
+                applyInner(ctx);
+            }
+            catch (error) {
+                reportFailure(ctx, error);
+            }
+        }
+        /**
+         * Report one fatal setup failure without rethrowing.
+         * @param ctx - client context.
+         * @param error - the failure.
+         */
+        function reportFailure(ctx, error) {
+            const message = error instanceof Error ? error.message : String(error);
+            const logger = ctx.logger;
+            logger?.('ui-custom').error("theme customization disabled: " + message);
+        }
+        /**
+         * The real client body, called under a guard by {@link apply}.
+         * @param ctx - client context.
+         */
+        function applyInner(ctx) {
+            const theme = ctx.theme;
+            const forms = ctx.configForms;
+            // Presets register once, as real themes, so they appear among the normal
+            // choices and survive a reload even if this plugin's override layer is empty.
+            for (const preset of PRESETS) {
+                try {
+                    ctx.effect(() => theme.register({
+                        id: preset.id,
+                        colorScheme: preset.colorScheme,
+                        tokens: flatPresetTokens(preset),
+                    }));
+                }
+                catch (error) {
+                    // A preset id that is already taken (the built-in light/dark pair, or a
+                    // re-registration after HMR) must not cost the user the editor.
+                    reportFailure(ctx, error);
+                }
+            }
+            const form = forms.get('ui-custom');
+            let disposeLayer;
+            // The last typography this plugin applied, so it writes only real changes and
+            // never fights the shipped Appearance rows on every snapshot.
+            let appliedTypography = '';
+            /**
+             * Recompute the layer from the stored document.
+             */
+            const refresh = () => {
+                const snapshot = form.getSnapshot();
+                if (snapshot.value === undefined)
+                    return;
+                const resolved = resolveCustomization(asDocument(snapshot.value));
+                disposeLayer?.();
+                disposeLayer = theme.overrideTokens(OVERRIDE_SOURCE, resolved.tokens);
+                // Typography goes through the theme service's own entries, so the built-in
+                // rows and this panel share one source of truth instead of shadowing each
+                // other. Sizes are only written when they differ, because each write is a
+                // settings mutation.
+                const typography = resolved.typography;
+                const key = JSON.stringify(typography);
+                if (key !== appliedTypography) {
+                    appliedTypography = key;
+                    const roles = [
+                        ['text', typography.textFontFamily, typography.fontSize],
+                        ['code', typography.codeFontFamily, typography.codeFontSize],
+                        ['terminal', typography.terminalFontFamily, typography.terminalFontSize],
+                    ];
+                    for (const [role, family, size] of roles) {
+                        try {
+                            theme.setFontFamily(role, family);
+                            theme.setFontSize(role, size);
+                        }
+                        catch {
+                            // A font name the runtime rejects must not stop the colour layer from
+                            // applying; the panel surfaces the rejected value instead.
+                        }
+                    }
+                }
+            };
+            ctx.effect(() => form.subscribe(refresh));
+            ctx.effect(() => () => {
+                disposeLayer?.();
+            });
+            refresh();
+            try {
+                registerPanel(ctx, () => panelState(form), panelActions(form, readDocument), form);
+            }
+            catch (error) {
+                reportFailure(ctx, error);
+            }
+        }
+        /**
+         * Register the Theme Studio page into the settings section list.
+         *
+         * Kept separate from `apply` so the section registration can be exercised in a
+         * unit test with a stub slots service, without a browser.
+         *
+         * @param ctx - client context.
+         * @param getState - supplies the current panel state.
+         * @param actions - the reactions the panel invokes.
+         */
+        function registerPanel(ctx, getState, actions, settingsForm) {
+            const slots = ctx.slots;
+            if (ReactImpl === undefined)
+                return;
+            const React = ReactImpl;
+            /**
+             * The slot component.
+             *
+             * It is a real component rather than a direct call, so hooks belong to it and a
+             * settings change re-renders it. The subscription is what makes a panel write
+             * visible without reopening the page: `getState()` reads the same form the
+             * action just wrote, and the subscription fires when the Host echoes it back.
+             *
+             * @returns the Theme Studio element.
+             */
+            const Panel = () => {
+                const [, force] = React.useState(0);
+                React.useEffect(() => {
+                    // Re-render when the Host publishes a new section for this namespace.
+                    let tick = 0;
+                    const dispose = settingsForm.subscribe(() => {
+                        tick += 1;
+                        force(tick);
+                    });
+                    return dispose;
+                }, []);
+                return ThemeStudio(React, { state: getState(), actions, presets: PRESETS });
+            };
+            ctx.effect(() => {
+                slots.inject('settings.section', () => slots.register({ name: 'settings.section', id: 'ui-custom', order: 11, label: () => 'Theme Studio' }, Panel));
+                return () => { };
+            });
+        }
+        /**
+         * Read the stored customization document.
+         * @param form - the settings form for this plugin's namespace.
+         * @returns the document the panel edits.
+         */
+        function readDocument(form) {
+            return asDocument(form.getSnapshot().value);
+        }
+        /**
+         * The document the panel last rendered, so its actions can merge one field
+         * without restating the whole section from a possibly stale snapshot.
+         */
+        let currentDocument;
+        /**
+         * Supply the current document for the panel's reads.
+         * @param form - the settings form.
+         * @returns the document.
+         */
+        function getDocument(form) {
+            currentDocument = readDocument(form);
+            return currentDocument;
+        }
+        /**
+         * Build the panel's state from the stored document.
+         * @param form - the settings form.
+         * @returns the state the panel renders.
+         */
+        function panelState(form) {
+            const document = getDocument(form);
+            const resolved = resolveCustomization(document);
+            const overrides = document.tokens;
+            return {
+                basePreset: document.basePreset,
+                tokens: TOKEN_SPECS.map((spec) => ({
+                    name: spec.name,
+                    label: spec.label,
+                    description: spec.description,
+                    override: overrides[spec.name],
+                })),
+                typography: resolved.typography,
+                geometry: document.geometry,
+                warnings: resolved.warnings,
+                writable: form.getSnapshot().writable,
+            };
+        }
+        /**
+         * Build the panel's write actions.
+         *
+         * Every action writes a whole field through the settings form, which serializes
+         * the mutation against the namespace revision. Tokens are written as one field
+         * (`tokens`) rather than per-name, because the schema models them as a dict and
+         * a partial write would drop the others.
+         *
+         * @param form - the settings form.
+         * @param document - reads the document the action should start from.
+         * @returns the actions the panel invokes.
+         */
+        function panelActions(form, document) {
+            const write = (field, value) => {
+                void form.set(field, value);
+            };
+            const withTokens = (mutate) => {
+                const base = document(form);
+                write('tokens', mutate({ ...base.tokens }));
+            };
+            return {
+                setPreset: (id) => write('basePreset', id),
+                setToken: (name, light, dark) => withTokens((tokens) => ({ ...tokens, [name]: { light, dark } })),
+                clearToken: (name) => withTokens((tokens) => {
+                    const next = { ...tokens };
+                    delete next[name];
+                    return next;
+                }),
+                setFont: (role, value) => {
+                    const base = document(form);
+                    const key = role === 'text' ? 'textFontFamily' : role === 'code' ? 'codeFontFamily' : 'terminalFontFamily';
+                    write('typography', { ...base.typography, [key]: value });
+                },
+                setFontSize: (role, px) => {
+                    const base = document(form);
+                    const key = role === 'text' ? 'fontSize' : role === 'code' ? 'codeFontSize' : 'terminalFontSize';
+                    write('typography', { ...base.typography, [key]: px });
+                },
+                setRadius: (px) => {
+                    const base = document(form);
+                    write('geometry', { ...base.geometry, radius: px });
+                },
+                setDensity: (density) => {
+                    const base = document(form);
+                    write('geometry', { ...base.geometry, density: density });
+                },
+                resetAll: () => write('tokens', {}),
+            };
+        }
+        //# sourceMappingURL=index.js.map
+        Object.assign(exports, { useReact: useReact, apply: apply, registerPanel: registerPanel, OVERRIDE_SOURCE: OVERRIDE_SOURCE, inject: inject });
+        
+      },
+      "./spec.js": (module, exports, __require) => {
+        /**
+         * The token catalog and the shipped presets.
+         *
+         * Every override must supply **both** palette modes. The theme runtime requires
+         * it (`ThemeTokenModes`), because a token defined for only one scheme goes
+         * illegible when the user flips to the other — so this module represents that
+         * requirement in the type rather than trusting each caller to remember it.
+         *
+         * @module @d0nj/dsh-ui-custom/spec
+         */
+        /** Groups in display order, with their headings. */
+        const TOKEN_GROUPS = [
+            { id: 'surface', label: 'Surfaces' },
+            { id: 'border', label: 'Borders' },
+            { id: 'text', label: 'Text' },
+            { id: 'accent', label: 'Accent' },
+            { id: 'state', label: 'State colours' },
+        ];
+        /**
+         * The documented alias tokens.
+         *
+         * These are the tokens the theme Inspect provider reports for this build, so the
+         * editor never offers a row that would silently do nothing.
+         */
+        const TOKEN_SPECS = [
+            {
+                name: '--dsw-alias-bg-base',
+                label: 'Base background',
+                group: 'surface',
+                kind: 'color',
+                description: 'Application base background.',
+            },
+            {
+                name: '--dsw-alias-bg-layer-1',
+                label: 'Raised surface',
+                group: 'surface',
+                kind: 'color',
+                description: 'Primary raised surface background.',
+            },
+            {
+                name: '--dsw-alias-bg-layer-2',
+                label: 'Nested surface',
+                group: 'surface',
+                kind: 'color',
+                description: 'Secondary nested surface background.',
+            },
+            {
+                name: '--dsw-alias-bg-overlay',
+                label: 'Overlay',
+                group: 'surface',
+                kind: 'color',
+                description: 'Overlay and popover background.',
+            },
+            {
+                name: '--dsw-specific-sidebar-fill',
+                label: 'Sidebar',
+                group: 'surface',
+                kind: 'color',
+                description: 'Sidebar column and title-row background.',
+            },
+            {
+                name: '--dsw-alias-border-l1',
+                label: 'Border, subtle',
+                group: 'border',
+                kind: 'color',
+                description: 'Primary subtle border.',
+            },
+            {
+                name: '--dsw-alias-border-l2',
+                label: 'Border, strong',
+                group: 'border',
+                kind: 'color',
+                description: 'Secondary stronger border.',
+            },
+            {
+                name: '--dsw-alias-label-primary',
+                label: 'Primary text',
+                group: 'text',
+                kind: 'color',
+                description: 'Primary text colour.',
+            },
+            {
+                name: '--dsw-alias-label-secondary',
+                label: 'Secondary text',
+                group: 'text',
+                kind: 'color',
+                description: 'Secondary text colour.',
+            },
+            {
+                name: '--dsw-alias-brand-primary',
+                label: 'Brand accent',
+                group: 'accent',
+                kind: 'color',
+                description: 'Primary brand accent.',
+            },
+            {
+                name: '--dsw-alias-state-error-primary',
+                label: 'Error',
+                group: 'state',
+                kind: 'color',
+                description: 'Primary error state colour.',
+            },
+            {
+                name: '--dsw-alias-state-success-primary',
+                label: 'Success',
+                group: 'state',
+                kind: 'color',
+                description: 'Primary success state colour.',
+            },
+            {
+                name: '--dsw-alias-state-warn-primary',
+                label: 'Warning',
+                group: 'state',
+                kind: 'color',
+                description: 'Primary warning state colour.',
+            },
+            {
+                name: '--dsw-alias-state-idle-primary',
+                label: 'Idle',
+                group: 'state',
+                kind: 'color',
+                description: 'Primary inactive state colour.',
+            },
+        ];
+        /** Every documented token name, for validation. */
+        const TOKEN_NAMES = TOKEN_SPECS.map((spec) => spec.name);
+        /**
+         * Look up one token's specification.
+         * @param name - CSS custom property name.
+         * @returns the specification, or `undefined` when the token is not documented.
+         */
+        function tokenSpec(name) {
+            return TOKEN_SPECS.find((spec) => spec.name === name);
+        }
+        /**
+         * Shipped presets.
+         *
+         * Each is a complete token set rather than a partial overlay, so selecting one
+         * gives a predictable result no matter what the generated base palette does.
+         * The colours are chosen to keep body text at or above WCAG AA contrast against
+         * their own surfaces, which the tests check.
+         */
+        const PRESETS = [
+            {
+                id: 'midnight',
+                label: 'Midnight',
+                description: 'Deep blue-black surfaces with a cool accent.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#f4f6fb', dark: '#0b1020' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#141a2e' },
+                    '--dsw-alias-bg-layer-2': { light: '#eef1f8', dark: '#1c2440' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#1f2745' },
+                    '--dsw-specific-sidebar-fill': { light: '#e9edf6', dark: '#080d1a' },
+                    '--dsw-alias-border-l1': { light: '#d9dfec', dark: '#232c48' },
+                    '--dsw-alias-border-l2': { light: '#c2cade', dark: '#33405f' },
+                    '--dsw-alias-label-primary': { light: '#111827', dark: '#e8ecf7' },
+                    '--dsw-alias-label-secondary': { light: '#4b5563', dark: '#9aa5bf' },
+                    '--dsw-alias-brand-primary': { light: '#2563eb', dark: '#7aa2ff' },
+                    '--dsw-alias-state-error-primary': { light: '#b91c1c', dark: '#ff8f8f' },
+                    '--dsw-alias-state-success-primary': { light: '#047857', dark: '#5fd4a0' },
+                    '--dsw-alias-state-warn-primary': { light: '#a16207', dark: '#f5c26b' },
+                    '--dsw-alias-state-idle-primary': { light: '#6b7280', dark: '#8792ab' },
+                },
+            },
+            {
+                id: 'paper',
+                label: 'Paper',
+                description: 'Warm off-white surfaces with ink-black text.',
+                colorScheme: 'light',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#faf7f0', dark: '#17150f' },
+                    '--dsw-alias-bg-layer-1': { light: '#fffdf8', dark: '#221f16' },
+                    '--dsw-alias-bg-layer-2': { light: '#f3efe4', dark: '#2b2619' },
+                    '--dsw-alias-bg-overlay': { light: '#fffdf8', dark: '#2f2a1c' },
+                    '--dsw-specific-sidebar-fill': { light: '#f2ecdf', dark: '#12100a' },
+                    '--dsw-alias-border-l1': { light: '#e2dcc9', dark: '#3a3323' },
+                    '--dsw-alias-border-l2': { light: '#cfc7ad', dark: '#4d442e' },
+                    '--dsw-alias-label-primary': { light: '#1c1a14', dark: '#f0ebdd' },
+                    '--dsw-alias-label-secondary': { light: '#5c5545', dark: '#b3aa92' },
+                    '--dsw-alias-brand-primary': { light: '#8a4b12', dark: '#e0a061' },
+                    '--dsw-alias-state-error-primary': { light: '#9b1c1c', dark: '#f08a8a' },
+                    '--dsw-alias-state-success-primary': { light: '#3f6212', dark: '#9fcb63' },
+                    '--dsw-alias-state-warn-primary': { light: '#8a5a00', dark: '#e8c063' },
+                    '--dsw-alias-state-idle-primary': { light: '#6f6757', dark: '#8e856f' },
+                },
+            },
+            {
+                id: 'high-contrast',
+                label: 'High contrast',
+                description: 'Maximum separation for low-vision use.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#ffffff', dark: '#000000' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#0a0a0a' },
+                    '--dsw-alias-bg-layer-2': { light: '#f2f2f2', dark: '#141414' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#141414' },
+                    '--dsw-specific-sidebar-fill': { light: '#ebebeb', dark: '#000000' },
+                    '--dsw-alias-border-l1': { light: '#767676', dark: '#8a8a8a' },
+                    '--dsw-alias-border-l2': { light: '#000000', dark: '#ffffff' },
+                    '--dsw-alias-label-primary': { light: '#000000', dark: '#ffffff' },
+                    '--dsw-alias-label-secondary': { light: '#3d3d3d', dark: '#d6d6d6' },
+                    '--dsw-alias-brand-primary': { light: '#0033cc', dark: '#8fb0ff' },
+                    '--dsw-alias-state-error-primary': { light: '#a10000', dark: '#ff9b9b' },
+                    '--dsw-alias-state-success-primary': { light: '#005c2b', dark: '#7dffb0' },
+                    '--dsw-alias-state-warn-primary': { light: '#6b4500', dark: '#ffd479' },
+                    '--dsw-alias-state-idle-primary': { light: '#4a4a4a', dark: '#b8b8b8' },
+                },
+            },
+            {
+                // Palette: https://draculatheme.com — bg #282a36, fg #f8f8f2, comment #6272a4.
+                id: 'dracula',
+                label: 'Dracula',
+                description: 'The classic purple-on-charcoal editor theme.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fffbeb', dark: '#282a36' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#21222c' },
+                    '--dsw-alias-bg-layer-2': { light: '#f2ecd9', dark: '#343746' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#44475a' },
+                    '--dsw-specific-sidebar-fill': { light: '#f2ecd9', dark: '#21222c' },
+                    '--dsw-alias-border-l1': { light: '#dcd6c3', dark: '#44475a' },
+                    '--dsw-alias-border-l2': { light: '#c4bda6', dark: '#6272a4' },
+                    '--dsw-alias-label-primary': { light: '#1f1f1f', dark: '#f8f8f2' },
+                    '--dsw-alias-label-secondary': { light: '#6c664b', dark: '#8693bd' },
+                    '--dsw-alias-brand-primary': { light: '#644ac9', dark: '#bd93f9' },
+                    '--dsw-alias-state-error-primary': { light: '#cb3a2a', dark: '#ff5555' },
+                    '--dsw-alias-state-success-primary': { light: '#14710a', dark: '#50fa7b' },
+                    '--dsw-alias-state-warn-primary': { light: '#846e15', dark: '#f1fa8c' },
+                    '--dsw-alias-state-idle-primary': { light: '#6c664b', dark: '#6272a4' },
+                },
+            },
+            {
+                // Palette: https://www.nordtheme.com — nord0 #2e3440, nord4 #d8dee9, nord8 #88c0d0.
+                id: 'nord',
+                label: 'Nord',
+                description: 'Arctic, north-bluish, with muted frost accents.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#eceff4', dark: '#2e3440' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#3b4252' },
+                    '--dsw-alias-bg-layer-2': { light: '#e5e9f0', dark: '#434c5e' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#4c566a' },
+                    '--dsw-specific-sidebar-fill': { light: '#e5e9f0', dark: '#292e39' },
+                    '--dsw-alias-border-l1': { light: '#d8dee9', dark: '#434c5e' },
+                    '--dsw-alias-border-l2': { light: '#b8c2d1', dark: '#4c566a' },
+                    '--dsw-alias-label-primary': { light: '#2e3440', dark: '#eceff4' },
+                    '--dsw-alias-label-secondary': { light: '#4c566a', dark: '#a3adc0' },
+                    '--dsw-alias-brand-primary': { light: '#5e81ac', dark: '#88c0d0' },
+                    '--dsw-alias-state-error-primary': { light: '#a33f4a', dark: '#bf616a' },
+                    '--dsw-alias-state-success-primary': { light: '#5a7d52', dark: '#a3be8c' },
+                    '--dsw-alias-state-warn-primary': { light: '#8a6a2f', dark: '#ebcb8b' },
+                    '--dsw-alias-state-idle-primary': { light: '#6d7b8c', dark: '#7b88a1' },
+                },
+            },
+            {
+                // Palette: https://github.com/catppuccin/palette — Mocha base #1e1e2e, text #cdd6f4, mauve #cba6f7.
+                id: 'catppuccin-mocha',
+                label: 'Catppuccin Mocha',
+                description: 'Soothing pastels on the darkest Catppuccin flavour.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#eff1f5', dark: '#1e1e2e' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#181825' },
+                    '--dsw-alias-bg-layer-2': { light: '#e6e9ef', dark: '#313244' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#45475a' },
+                    '--dsw-specific-sidebar-fill': { light: '#e6e9ef', dark: '#11111b' },
+                    '--dsw-alias-border-l1': { light: '#ccd0da', dark: '#313244' },
+                    '--dsw-alias-border-l2': { light: '#acb0be', dark: '#45475a' },
+                    '--dsw-alias-label-primary': { light: '#4c4f69', dark: '#cdd6f4' },
+                    '--dsw-alias-label-secondary': { light: '#6c6f85', dark: '#a6adc8' },
+                    '--dsw-alias-brand-primary': { light: '#8839ef', dark: '#cba6f7' },
+                    '--dsw-alias-state-error-primary': { light: '#d20f39', dark: '#f38ba8' },
+                    '--dsw-alias-state-success-primary': { light: '#40a02b', dark: '#a6e3a1' },
+                    '--dsw-alias-state-warn-primary': { light: '#df8e1d', dark: '#f9e2af' },
+                    '--dsw-alias-state-idle-primary': { light: '#8c8fa1', dark: '#6c7086' },
+                },
+            },
+            {
+                // Palette: https://github.com/morhetz/gruvbox — dark0 #282828, fg1 #ebdbb2, orange #fe8019.
+                id: 'gruvbox',
+                label: 'Gruvbox',
+                description: 'Retro groove warmth with earthy amber accents.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fbf1c7', dark: '#282828' },
+                    '--dsw-alias-bg-layer-1': { light: '#f9f5d7', dark: '#1d2021' },
+                    '--dsw-alias-bg-layer-2': { light: '#f2e5bc', dark: '#3c3836' },
+                    '--dsw-alias-bg-overlay': { light: '#f9f5d7', dark: '#504945' },
+                    '--dsw-specific-sidebar-fill': { light: '#f2e5bc', dark: '#1d2021' },
+                    '--dsw-alias-border-l1': { light: '#ebdbb2', dark: '#3c3836' },
+                    '--dsw-alias-border-l2': { light: '#d5c4a1', dark: '#504945' },
+                    '--dsw-alias-label-primary': { light: '#3c3836', dark: '#ebdbb2' },
+                    '--dsw-alias-label-secondary': { light: '#665c54', dark: '#a89984' },
+                    '--dsw-alias-brand-primary': { light: '#af3a03', dark: '#fe8019' },
+                    '--dsw-alias-state-error-primary': { light: '#9d0006', dark: '#fb4934' },
+                    '--dsw-alias-state-success-primary': { light: '#79740e', dark: '#b8bb26' },
+                    '--dsw-alias-state-warn-primary': { light: '#b57614', dark: '#fabd2f' },
+                    '--dsw-alias-state-idle-primary': { light: '#928374', dark: '#928374' },
+                },
+            },
+            {
+                // Palette: https://github.com/atom/one-dark-syntax — bg #282c34, fg #abb2bf, blue #61afef.
+                id: 'one-dark',
+                label: 'One Dark',
+                description: "Atom's iconic blue-on-graphite editor theme.",
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fafafa', dark: '#282c34' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#21252b' },
+                    '--dsw-alias-bg-layer-2': { light: '#eaeaeb', dark: '#3e4451' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#3e4451' },
+                    '--dsw-specific-sidebar-fill': { light: '#eaeaeb', dark: '#21252b' },
+                    '--dsw-alias-border-l1': { light: '#dbdbdc', dark: '#3e4451' },
+                    '--dsw-alias-border-l2': { light: '#c0c0c2', dark: '#5c6370' },
+                    '--dsw-alias-label-primary': { light: '#383a42', dark: '#abb2bf' },
+                    '--dsw-alias-label-secondary': { light: '#696c77', dark: '#8b93a1' },
+                    '--dsw-alias-brand-primary': { light: '#4078f2', dark: '#61afef' },
+                    '--dsw-alias-state-error-primary': { light: '#e45649', dark: '#e06c75' },
+                    '--dsw-alias-state-success-primary': { light: '#50a14f', dark: '#98c379' },
+                    '--dsw-alias-state-warn-primary': { light: '#986801', dark: '#e5c07b' },
+                    '--dsw-alias-state-idle-primary': { light: '#a0a1a7', dark: '#5c6370' },
+                },
+            },
+            {
+                // Palette: https://ethanschoonover.com/solarized — base03 #002b36, base0 #839496, blue #268bd2.
+                id: 'solarized',
+                label: 'Solarized Dark',
+                description: 'Precision low-contrast colours from Ethan Schoonover.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fdf6e3', dark: '#002b36' },
+                    '--dsw-alias-bg-layer-1': { light: '#fffbf0', dark: '#073642' },
+                    '--dsw-alias-bg-layer-2': { light: '#eee8d5', dark: '#0d4756' },
+                    '--dsw-alias-bg-overlay': { light: '#fffbf0', dark: '#0d4756' },
+                    '--dsw-specific-sidebar-fill': { light: '#eee8d5', dark: '#00252e' },
+                    '--dsw-alias-border-l1': { light: '#ddd6c1', dark: '#0d4756' },
+                    '--dsw-alias-border-l2': { light: '#c9c2ac', dark: '#586e75' },
+                    '--dsw-alias-label-primary': { light: '#073642', dark: '#93a1a1' },
+                    '--dsw-alias-label-secondary': { light: '#586e75', dark: '#839496' },
+                    '--dsw-alias-brand-primary': { light: '#268bd2', dark: '#268bd2' },
+                    '--dsw-alias-state-error-primary': { light: '#dc322f', dark: '#dc322f' },
+                    '--dsw-alias-state-success-primary': { light: '#859900', dark: '#859900' },
+                    '--dsw-alias-state-warn-primary': { light: '#b58900', dark: '#b58900' },
+                    '--dsw-alias-state-idle-primary': { light: '#93a1a1', dark: '#586e75' },
+                },
+            },
+            {
+                // Palette: https://rosepinetheme.com — base #191724, text #e0def4, rose #ebbcba.
+                id: 'rose-pine',
+                label: 'Rosé Pine',
+                description: 'All natural pine, faux fur and a bit of Soho.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#faf4ed', dark: '#191724' },
+                    '--dsw-alias-bg-layer-1': { light: '#fffaf3', dark: '#1f1d2e' },
+                    '--dsw-alias-bg-layer-2': { light: '#f2e9e1', dark: '#26233a' },
+                    '--dsw-alias-bg-overlay': { light: '#fffaf3', dark: '#26233a' },
+                    '--dsw-specific-sidebar-fill': { light: '#f2e9e1', dark: '#1f1d2e' },
+                    '--dsw-alias-border-l1': { light: '#e5ded5', dark: '#26233a' },
+                    '--dsw-alias-border-l2': { light: '#d3cbc2', dark: '#403d52' },
+                    '--dsw-alias-label-primary': { light: '#575279', dark: '#e0def4' },
+                    '--dsw-alias-label-secondary': { light: '#797593', dark: '#908caa' },
+                    '--dsw-alias-brand-primary': { light: '#b4637a', dark: '#ebbcba' },
+                    '--dsw-alias-state-error-primary': { light: '#b4637a', dark: '#eb6f92' },
+                    '--dsw-alias-state-success-primary': { light: '#286983', dark: '#9ccfd8' },
+                    '--dsw-alias-state-warn-primary': { light: '#ea9d34', dark: '#f6c177' },
+                    '--dsw-alias-state-idle-primary': { light: '#9893a5', dark: '#6e6a86' },
+                },
+            },
+            {
+                // Palette: https://github.com/enkia/tokyo-night-vscode-theme — bg #1a1b26, fg #a9b1d6, blue #7aa2f7.
+                id: 'tokyo-night',
+                label: 'Tokyo Night',
+                description: 'A clean dark theme that celebrates downtown Tokyo at night.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#e9e9ed', dark: '#1a1b26' },
+                    '--dsw-alias-bg-layer-1': { light: '#f5f5f7', dark: '#16161e' },
+                    '--dsw-alias-bg-layer-2': { light: '#dcdce3', dark: '#292e42' },
+                    '--dsw-alias-bg-overlay': { light: '#f5f5f7', dark: '#292e42' },
+                    '--dsw-specific-sidebar-fill': { light: '#dcdce3', dark: '#16161e' },
+                    '--dsw-alias-border-l1': { light: '#d0d0d9', dark: '#292e42' },
+                    '--dsw-alias-border-l2': { light: '#b6b8c4', dark: '#3b4261' },
+                    '--dsw-alias-label-primary': { light: '#343b58', dark: '#a9b1d6' },
+                    '--dsw-alias-label-secondary': { light: '#565f89', dark: '#7d86a4' },
+                    '--dsw-alias-brand-primary': { light: '#34548a', dark: '#7aa2f7' },
+                    '--dsw-alias-state-error-primary': { light: '#8c4351', dark: '#f7768e' },
+                    '--dsw-alias-state-success-primary': { light: '#485e30', dark: '#9ece6a' },
+                    '--dsw-alias-state-warn-primary': { light: '#8f5e15', dark: '#e0af68' },
+                    '--dsw-alias-state-idle-primary': { light: '#9699a3', dark: '#565f89' },
+                },
+            },
+            {
+                // Palette: https://github.com/ayu-theme — ayu dark bg #0d1017, fg #bfbdb6, orange #ff8f40.
+                id: 'ayu-dark',
+                label: 'Ayu Dark',
+                description: 'Minimal dark theme with a bright amber accent.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fafafa', dark: '#0d1017' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#131721' },
+                    '--dsw-alias-bg-layer-2': { light: '#f0f0ee', dark: '#1f2430' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#1f2430' },
+                    '--dsw-specific-sidebar-fill': { light: '#f0f0ee', dark: '#0b0e14' },
+                    '--dsw-alias-border-l1': { light: '#e2e2de', dark: '#1f2430' },
+                    '--dsw-alias-border-l2': { light: '#c9c9c4', dark: '#2d3343' },
+                    '--dsw-alias-label-primary': { light: '#242936', dark: '#bfbdb6' },
+                    '--dsw-alias-label-secondary': { light: '#5c6773', dark: '#8a95a1' },
+                    '--dsw-alias-brand-primary': { light: '#e0882e', dark: '#ff8f40' },
+                    '--dsw-alias-state-error-primary': { light: '#d95757', dark: '#f26d78' },
+                    '--dsw-alias-state-success-primary': { light: '#6c9e4a', dark: '#aad94c' },
+                    '--dsw-alias-state-warn-primary': { light: '#c28c1f', dark: '#e6b450' },
+                    '--dsw-alias-state-idle-primary': { light: '#8a9199', dark: '#5c6773' },
+                },
+            },
+            {
+                // Palette: https://github.com/microsoft/vscode — GitHub Dark bg #0d1117, fg #c9d1d9, blue #58a6ff.
+                id: 'github-dark',
+                label: 'GitHub Dark',
+                description: 'The familiar GitHub interface palette.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#ffffff', dark: '#0d1117' },
+                    '--dsw-alias-bg-layer-1': { light: '#f6f8fa', dark: '#161b22' },
+                    '--dsw-alias-bg-layer-2': { light: '#eaeef2', dark: '#21262d' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#21262d' },
+                    '--dsw-specific-sidebar-fill': { light: '#f6f8fa', dark: '#010409' },
+                    '--dsw-alias-border-l1': { light: '#d0d7de', dark: '#30363d' },
+                    '--dsw-alias-border-l2': { light: '#afb8c1', dark: '#484f58' },
+                    '--dsw-alias-label-primary': { light: '#1f2328', dark: '#c9d1d9' },
+                    '--dsw-alias-label-secondary': { light: '#656d76', dark: '#8b949e' },
+                    '--dsw-alias-brand-primary': { light: '#0969da', dark: '#58a6ff' },
+                    '--dsw-alias-state-error-primary': { light: '#cf222e', dark: '#f85149' },
+                    '--dsw-alias-state-success-primary': { light: '#1a7f37', dark: '#3fb950' },
+                    '--dsw-alias-state-warn-primary': { light: '#9a6700', dark: '#d29922' },
+                    '--dsw-alias-state-idle-primary': { light: '#6e7781', dark: '#484f58' },
+                },
+            },
+            {
+                // Palette: https://github.com/Monokai/monokai — bg #272822, fg #f8f8f2, pink #f92672.
+                id: 'monokai',
+                label: 'Monokai',
+                description: 'The Sublime Text original, with its hot-pink accent.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#fafaf5', dark: '#272822' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#1e1f1c' },
+                    '--dsw-alias-bg-layer-2': { light: '#f0efe5', dark: '#3e3d32' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#3e3d32' },
+                    '--dsw-specific-sidebar-fill': { light: '#f0efe5', dark: '#1e1f1c' },
+                    '--dsw-alias-border-l1': { light: '#e0dfd1', dark: '#3e3d32' },
+                    '--dsw-alias-border-l2': { light: '#c6c5b3', dark: '#575744' },
+                    '--dsw-alias-label-primary': { light: '#272822', dark: '#f8f8f2' },
+                    '--dsw-alias-label-secondary': { light: '#75715e', dark: '#8a9199' },
+                    '--dsw-alias-brand-primary': { light: '#c2185b', dark: '#f92672' },
+                    '--dsw-alias-state-error-primary': { light: '#d13b2f', dark: '#f92672' },
+                    '--dsw-alias-state-success-primary': { light: '#567f0e', dark: '#a6e22e' },
+                    '--dsw-alias-state-warn-primary': { light: '#b07d1a', dark: '#e6db74' },
+                    '--dsw-alias-state-idle-primary': { light: '#8d8b7c', dark: '#75715e' },
+                },
+            }, {
+                id: 'mono',
+                label: 'Mono',
+                description: 'Grayscale everywhere except state colours.',
+                colorScheme: 'dark',
+                tokens: {
+                    '--dsw-alias-bg-base': { light: '#f5f5f5', dark: '#101010' },
+                    '--dsw-alias-bg-layer-1': { light: '#ffffff', dark: '#1a1a1a' },
+                    '--dsw-alias-bg-layer-2': { light: '#ececec', dark: '#242424' },
+                    '--dsw-alias-bg-overlay': { light: '#ffffff', dark: '#282828' },
+                    '--dsw-specific-sidebar-fill': { light: '#e8e8e8', dark: '#0a0a0a' },
+                    '--dsw-alias-border-l1': { light: '#d4d4d4', dark: '#2e2e2e' },
+                    '--dsw-alias-border-l2': { light: '#b0b0b0', dark: '#454545' },
+                    '--dsw-alias-label-primary': { light: '#0a0a0a', dark: '#ededed' },
+                    '--dsw-alias-label-secondary': { light: '#525252', dark: '#a3a3a3' },
+                    '--dsw-alias-brand-primary': { light: '#262626', dark: '#d4d4d4' },
+                    '--dsw-alias-state-error-primary': { light: '#b42318', dark: '#ff9184' },
+                    '--dsw-alias-state-success-primary': { light: '#0a6b45', dark: '#6fd9a8' },
+                    '--dsw-alias-state-warn-primary': { light: '#8a5c00', dark: '#e8bf6a' },
+                    '--dsw-alias-state-idle-primary': { light: '#6b6b6b', dark: '#8f8f8f' },
+                },
+            },
+        ];
+        /** Every preset id, for validation. */
+        const PRESET_IDS = PRESETS.map((preset) => preset.id);
+        /**
+         * Look up one preset by id.
+         * @param id - preset id.
+         * @returns the preset, or `undefined` for an unknown or `none` id.
+         */
+        function findPreset(id) {
+            return PRESETS.find((preset) => preset.id === id);
+        }
+        /** The role names the theme runtime accepts for typography. */
+        const FONT_ROLES = ['text', 'code', 'terminal'];
+        /** Accepted font-size range per role, mirroring the shipped Appearance rows. */
+        const FONT_SIZE_RANGES = {
+            text: { min: 10, max: 22, fallback: 14 },
+            code: { min: 10, max: 16, fallback: 11 },
+            terminal: { min: 10, max: 20, fallback: 13 },
+        };
+        /** Density presets, expressed as a spacing multiplier applied to derived tokens. */
+        const DENSITIES = ['compact', 'comfortable', 'spacious'];
+        /** Radius bounds in pixels. */
+        const RADIUS_MIN = 0;
+        /** Upper radius bound in pixels. */
+        const RADIUS_MAX = 24;
+        //# sourceMappingURL=spec.js.map
+        Object.assign(exports, { tokenSpec: tokenSpec, findPreset: findPreset, TOKEN_GROUPS: TOKEN_GROUPS, TOKEN_SPECS: TOKEN_SPECS, TOKEN_NAMES: TOKEN_NAMES, PRESETS: PRESETS, PRESET_IDS: PRESET_IDS, FONT_ROLES: FONT_ROLES, FONT_SIZE_RANGES: FONT_SIZE_RANGES, DENSITIES: DENSITIES, RADIUS_MIN: RADIUS_MIN, RADIUS_MAX: RADIUS_MAX });
+        
+      },
+      "./resolve.js": (module, exports, __require) => {
+        /**
+         * Resolving a customization document into theme tokens.
+         *
+         * Three inputs combine, in this order:
+         *
+         * 1. A **preset**, which is a complete token set.
+         * 2. **Per-token overrides**, applied on top of the preset.
+         * 3. **Geometry**, expanded into whichever tokens it can express.
+         *
+         * The result is one `ThemeTokenOverrides` object — token name to `{light, dark}` —
+         * which is exactly what `ctx.theme.overrideTokens` accepts. Keeping the merge
+         * here, as a pure function, is what lets the panel preview a change and the Host
+         * validate one from the same code.
+         *
+         * @module @d0nj/dsh-ui-custom/resolve
+         */
+        const { DENSITIES, FONT_SIZE_RANGES, RADIUS_MAX, RADIUS_MIN, TOKEN_NAMES, findPreset, tokenSpec } = __require('./spec.js');
+        /** A colour in one of the forms the theme service and browsers accept. */
+        const COLOR_PATTERN = /^(#(?:[0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})|(?:rgb|hsl|oklch|lab|lch|color)\([^)]*\)|[a-z]+)$/iu;
+        /** CSS generic families, which always resolve and so never need a local match. */
+        const GENERIC_FAMILIES = new Set([
+            'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+            'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'emoji', 'math',
+            'fangsong', '-apple-system', 'blinkmacsystemfont',
+            'inherit', 'initial', 'unset',
+        ]);
+        /**
+         * Whether a value is a plausible CSS colour.
+         *
+         * Colour tokens are rendered straight into CSS custom properties, so an
+         * arbitrary string would not be a security hole but would silently produce an
+         * unstyled surface. Rejecting it here turns that into a visible warning.
+         * @param value - candidate colour value.
+         * @returns true when the value looks like a CSS colour.
+         */
+        function isColor(value) {
+            return COLOR_PATTERN.test(value.trim());
+        }
+        /**
+         * Clamp a number into a closed range.
+         * @param value - candidate value.
+         * @param min - lower bound.
+         * @param max - upper bound.
+         * @returns the clamped integer.
+         */
+        function clamp(value, min, max) {
+            if (!Number.isFinite(value))
+                return min;
+            return Math.min(max, Math.max(min, Math.round(value)));
+        }
+        /**
+         * Expand geometry into token values.
+         *
+         * The documented token set has no radius or spacing tokens, so geometry is
+         * expressed as a *shadow layer* of `--d0nj-*` variables the panel's own styles
+         * consume, plus any `--dsw-*` tokens that exist. Emitting our own names keeps
+         * this additive: a token the harness does not define cannot break a surface,
+         * and the panel styles read ours.
+         *
+         * @param geometry - the requested geometry.
+         * @returns derived custom properties with identical light and dark values.
+         */
+        function geometryTokens(geometry) {
+            const radius = clamp(geometry.radius, RADIUS_MIN, RADIUS_MAX);
+            const scale = geometry.density === 'compact' ? 0.8 : geometry.density === 'spacious' ? 1.25 : 1;
+            const value = (px) => ({ light: px, dark: px });
+            return {
+                '--d0nj-radius-sm': value(`${String(Math.round(radius * 0.5))}px`),
+                '--d0nj-radius-md': value(`${String(radius)}px`),
+                '--d0nj-radius-lg': value(`${String(Math.round(radius * 1.5))}px`),
+                '--d0nj-space-1': value(`${String(Math.round(4 * scale))}px`),
+                '--d0nj-space-2': value(`${String(Math.round(8 * scale))}px`),
+                '--d0nj-space-3': value(`${String(Math.round(12 * scale))}px`),
+                '--d0nj-space-4': value(`${String(Math.round(16 * scale))}px`),
+            };
+        }
+        /**
+         * Correct one role's font size into its accepted range.
+         * @param role - font role.
+         * @param px - requested size.
+         * @returns the in-range size.
+         */
+        function correctFontSize(role, px) {
+            const range = FONT_SIZE_RANGES[role];
+            return clamp(px, range.min, range.max);
+        }
+        /**
+         * Whether a string names a known density.
+         * @param value - candidate density.
+         * @returns true for a known density.
+         */
+        function isDensity(value) {
+            return DENSITIES.includes(value);
+        }
+        /**
+         * @param stack - comma-separated font stack.
+         * @returns the concrete family names, in order, without generics.
+         */
+        function familyNames(stack) {
+            return stack
+                .split(',')
+                .map((part) => part.trim().replace(/^["']|["']$/gu, '').trim())
+                .filter((name) => name !== '' && !GENERIC_FAMILIES.has(name.toLowerCase()));
+        }
+        /**
+         * Resolve a customization document into theme tokens and typography.
+         *
+         * Merge order is preset, then explicit overrides, then geometry, so a user who
+         * picks a preset and then tweaks one token keeps the tweak, and geometry always
+         * wins over a token of the same name (it is the more specific control).
+         *
+         * @param document - the customization document.
+         * @returns the token overrides, corrected typography, and any warnings.
+         */
+        function resolveCustomization(document) {
+            const warnings = [];
+            const tokens = {};
+            if (document.basePreset !== 'none') {
+                const preset = findPreset(document.basePreset);
+                if (preset === undefined) {
+                    warnings.push(`unknown preset "${document.basePreset}"; no base tokens applied`);
+                }
+                else {
+                    for (const [name, modes] of Object.entries(preset.tokens))
+                        tokens[name] = modes;
+                }
+            }
+            for (const [name, modes] of Object.entries(document.tokens)) {
+                const spec = tokenSpec(name);
+                if (spec === undefined) {
+                    // A hand-edited document can name a token this build does not document.
+                    // Skipping it with a warning beats applying a property nothing reads.
+                    warnings.push(`ignoring undocumented token "${name}"`);
+                    continue;
+                }
+                const light = modes.light.trim();
+                const dark = modes.dark.trim();
+                if (light.length === 0 || dark.length === 0) {
+                    warnings.push(`token "${name}" needs both a light and a dark value`);
+                    continue;
+                }
+                if (spec.kind === 'color' && (!isColor(light) || !isColor(dark))) {
+                    warnings.push(`token "${name}" is not a valid CSS colour`);
+                    continue;
+                }
+                tokens[name] = { light, dark };
+            }
+            for (const [name, modes] of Object.entries(geometryTokens(document.geometry))) {
+                tokens[name] = modes;
+            }
+            const typography = {
+                textFontFamily: document.typography.textFontFamily,
+                codeFontFamily: document.typography.codeFontFamily,
+                terminalFontFamily: document.typography.terminalFontFamily,
+                fontSize: correctFontSize('text', document.typography.fontSize),
+                codeFontSize: correctFontSize('code', document.typography.codeFontSize),
+                terminalFontSize: correctFontSize('terminal', document.typography.terminalFontSize),
+            };
+            if (typography.fontSize !== document.typography.fontSize) {
+                warnings.push(`text font size corrected to ${String(typography.fontSize)}px (allowed ${String(FONT_SIZE_RANGES.text.min)}–${String(FONT_SIZE_RANGES.text.max)})`);
+            }
+            return { tokens, typography, warnings };
+        }
+        /** Every documented token name, re-exported for the panel's reset action. */
+        Object.assign(exports, { TOKEN_NAMES: TOKEN_NAMES });
+        //# sourceMappingURL=resolve.js.map
+        Object.assign(exports, { isColor: isColor, clamp: clamp, geometryTokens: geometryTokens, correctFontSize: correctFontSize, isDensity: isDensity, familyNames: familyNames, resolveCustomization: resolveCustomization });
+        
+      },
+      "./client/panel.js": (module, exports, __require) => {
+        /**
+         * Theme Studio: the settings page.
+         *
+         * Live preview is computed from the same resolver the stored document goes
+         * through, so what the panel shows and what the plugin applies cannot drift.
+         * Writes go through `configForms.get('ui-custom').set/unset`, which means the
+         * panel never touches YAML, never races a revision, and is reversible field by
+         * field.
+         *
+         * Styling follows the plugin rules: theme tokens only (`--dsw-alias-*`, plus the
+         * `--d0nj-*` geometry tokens this plugin derives), no literal colours for
+         * chrome. The swatches themselves are the one place a literal colour is correct,
+         * because they *are* the colour being chosen.
+         *
+         * @module @d0nj/dsh-ui-custom/panel
+         */
+        const { findHostedFont, hostedFamilies, loadHostedFont } = __require('./client/hosted-fonts.js');
+        /** Shared inline styles, computed from theme tokens. */
+        function styles() {
+            return {
+                root: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 24,
+                    padding: '4px 0 32px',
+                    color: 'var(--dsw-alias-label-primary)',
+                    fontFamily: 'inherit',
+                },
+                section: { display: 'flex', flexDirection: 'column', gap: 10 },
+                heading: { fontSize: 13, fontWeight: 600, color: 'var(--dsw-alias-label-primary)' },
+                hint: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)', lineHeight: 1.5 },
+                grid: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
+                    gap: 10,
+                },
+                card: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                    padding: 10,
+                    borderRadius: 'var(--d0nj-radius-md, 8px)',
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                    // No background and no colour token here: a card represents a theme, so it
+                    // paints that theme's own surface (set per card, below). Using a token made
+                    // every card show the live theme instead, which read as banding.
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    textAlign: 'left',
+                    color: 'var(--dsw-alias-label-primary)',
+                    font: 'inherit',
+                    // The UA focus ring lingers on whichever card was last clicked; a
+                    // focus-visible ring keeps keyboard affordance without that trail.
+                    outline: 'none',
+                },
+                cardActive: {
+                    borderColor: 'var(--dsw-alias-brand-primary)',
+                    borderWidth: 2,
+                    padding: 9,
+                },
+                swatches: { display: 'flex', gap: 4 },
+                swatch: {
+                    width: 22,
+                    height: 22,
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                },
+                row: {
+                    display: 'grid',
+                    gridTemplateColumns: 'minmax(120px, 1fr) auto auto',
+                    gap: 8,
+                    alignItems: 'center',
+                    padding: '6px 0',
+                    borderBottom: '1px solid var(--dsw-alias-border-l1)',
+                },
+                rowLabel: { display: 'flex', flexDirection: 'column', gap: 2 },
+                input: {
+                    width: 92,
+                    padding: '4px 6px',
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                    background: 'var(--dsw-alias-bg-base)',
+                    color: 'var(--dsw-alias-label-primary)',
+                    font: 'inherit',
+                    fontSize: 12,
+                },
+                select: {
+                    width: 260,
+                    padding: '4px 6px',
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                    background: 'var(--dsw-alias-bg-base)',
+                    color: 'var(--dsw-alias-label-primary)',
+                    font: 'inherit',
+                    fontSize: 12,
+                },
+                fontStack: { display: 'flex', flexDirection: 'column', gap: 4, width: 260 },
+                fontRow: { gap: 18 },
+                combo: { position: 'relative', width: 260 },
+                listbox: {
+                    position: 'absolute',
+                    zIndex: 10,
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: 4,
+                    maxHeight: 240,
+                    overflowY: 'auto',
+                    padding: 4,
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    border: '1px solid var(--dsw-alias-border-l2)',
+                    // A popup over arbitrary content cannot inherit the surface behind it, so
+                    // it paints the module fill; only the element's own list uses this literal.
+                    background: 'var(--dsw-alias-bg-module-platform, var(--dsw-alias-bg-layer-1))',
+                    boxShadow: 'var(--dsw-elevation-lv2, 0 4px 12px rgba(0, 0, 0, 0.2))',
+                },
+                option: {
+                    padding: '4px 6px',
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    fontSize: 12,
+                    color: 'var(--dsw-alias-label-primary)',
+                    cursor: 'pointer',
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                },
+                optionActive: { background: 'var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-layer-2))' },
+                colorInput: {
+                    width: 34,
+                    height: 26,
+                    padding: 0,
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                    borderRadius: 'var(--d0nj-radius-sm, 4px)',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                },
+                button: {
+                    padding: '5px 10px',
+                    borderRadius: 'var(--d0nj-radius-md, 8px)',
+                    border: '1px solid var(--dsw-alias-border-l2)',
+                    background: 'var(--dsw-alias-bg-layer-2)',
+                    color: 'var(--dsw-alias-label-primary)',
+                    font: 'inherit',
+                    fontSize: 12,
+                    cursor: 'pointer',
+                },
+                warning: {
+                    padding: '8px 10px',
+                    borderRadius: 'var(--d0nj-radius-md, 8px)',
+                    border: '1px solid var(--dsw-alias-state-warn-primary)',
+                    color: 'var(--dsw-alias-state-warn-primary)',
+                    fontSize: 12,
+                },
+                preview: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8,
+                    padding: 14,
+                    borderRadius: 'var(--d0nj-radius-lg, 12px)',
+                    border: '1px solid var(--dsw-alias-border-l1)',
+                    background: 'var(--dsw-alias-bg-base)',
+                },
+                row2: { display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' },
+            };
+        }
+        /**
+         * Combobox state per role.
+         *
+         * Kept at module scope because the panel re-renders on every settings echo, and
+         * state created inside the render would reset to closed each pass.
+         */
+        const combos = new Map();
+        /** Exported so tests do not inherit an open list between cases. */
+        function resetCombos() {
+            combos.clear();
+        }
+        /**
+         * @param key - the role's accessible label.
+         * @returns the state for that role, created on first use.
+         */
+        function comboState(key) {
+            const existing = combos.get(key);
+            if (existing !== undefined)
+                return existing;
+            const created = { open: false, query: '', active: 0 };
+            combos.set(key, created);
+            return created;
+        }
+        /**
+         * Fonts offered by the picker.
+         *
+         * Hosted rather than local: a browser cannot enumerate installed fonts without a
+         * permission-gated API most lack, and a local family looks different elsewhere.
+         */
+        let fontChoiceCache;
+        /** @returns the families the picker offers. */
+        function fontChoices() {
+            fontChoiceCache ??= hostedFamilies();
+            return fontChoiceCache;
+        }
+        /**
+         * Render the Theme Studio page.
+         *
+         * Written against a minimal `React.createElement` shim rather than JSX so the
+         * module needs no transform at build time; the client bundle supplies React.
+         *
+         * @param React - the React namespace from the module table.
+         * @param props - current state and the actions to invoke.
+         * @returns the section element.
+         */
+        function ThemeStudio(React, props) {
+            const h = React.createElement;
+            const s = styles();
+            const { state, actions, presets } = props;
+            // Local mirrors. The panel must react to a click immediately: a settings write
+            // is a round-trip through the Host, and waiting for the echo makes every
+            // control feel dead when the write is slow, refused, or not mirrored at all.
+            // Local state is the source of truth for rendering; the action is the command.
+            const [localPreset, setLocalPreset] = React.useState(state.basePreset);
+            const [localTokens, setLocalTokens] = React.useState({});
+            const [localGeometry, setLocalGeometry] = React.useState(state.geometry);
+            const [localTypography, setLocalTypography] = React.useState(state.typography);
+            // The counter must keep changing: writing the same number makes React bail out.
+            const [renderTick, setRender] = React.useState(0);
+            const choices = fontChoices();
+            const rerender = () => setRender(renderTick + 1);
+            /**
+             * @param role - font role being changed.
+             * @param value - CSS stack to apply.
+             */
+            const applyFont = (role, value) => {
+                const hosted = findHostedFont(value);
+                if (hosted === undefined) {
+                    actions.setFont(role, value);
+                    return;
+                }
+                void loadHostedFont(hosted).then(() => actions.setFont(role, value));
+            };
+            /**
+             * @param ariaLabel - accessible name for the input.
+             * @param family - current stack.
+             * @param onChange - writes the chosen stack.
+             * @returns the combobox element.
+             */
+            const fontCombo = (ariaLabel, family, onChange) => {
+                const combo = comboState(ariaLabel);
+                // Not the word "Default", which could collide with a family of that name.
+                const DEFAULT_CHOICE = '\u0000default';
+                const isDefault = (choice) => choice === DEFAULT_CHOICE;
+                const matches = () => {
+                    const query = combo.query.trim().toLowerCase();
+                    if (query === '')
+                        return [DEFAULT_CHOICE, ...choices.slice(0, 39)];
+                    const filtered = choices.filter((choice) => choice.toLowerCase().includes(query));
+                    const keepDefault = 'default (built-in)'.includes(query) || 'built-in'.includes(query);
+                    return (keepDefault ? [DEFAULT_CHOICE, ...filtered] : filtered).slice(0, 40);
+                };
+                const commit = (value) => {
+                    combo.open = false;
+                    combo.query = '';
+                    combo.active = 0;
+                    const next = isDefault(value) ? '' : value;
+                    if (next !== combo.written)
+                        onChange(next);
+                    combo.written = undefined;
+                    rerender();
+                };
+                const visible = combo.open ? matches() : [];
+                return h('div', { style: s.combo }, h('input', {
+                    type: 'text',
+                    role: 'combobox',
+                    style: s.select,
+                    'aria-label': ariaLabel,
+                    'aria-expanded': combo.open,
+                    'aria-autocomplete': 'list',
+                    placeholder: 'Default (built-in stack)',
+                    value: family,
+                    onFocus: (event) => {
+                        combo.open = true;
+                        combo.query = '';
+                        combo.active = 0;
+                        event.target.select?.();
+                        rerender();
+                    },
+                    onInput: (event) => {
+                        combo.open = true;
+                        combo.query = event.target.value;
+                        combo.active = 0;
+                        combo.written = event.target.value;
+                        onChange(event.target.value);
+                        rerender();
+                    },
+                    onKeyDown: (event) => {
+                        const list = visible;
+                        if (event.key === 'Escape') {
+                            combo.open = false;
+                            combo.query = '';
+                            rerender();
+                            return;
+                        }
+                        if (event.key === 'ArrowDown' && list.length > 0) {
+                            event.preventDefault();
+                            combo.active = (combo.active + 1) % list.length;
+                            rerender();
+                            return;
+                        }
+                        if (event.key === 'ArrowUp' && list.length > 0) {
+                            event.preventDefault();
+                            combo.active = (combo.active - 1 + list.length) % list.length;
+                            rerender();
+                            return;
+                        }
+                        if (event.key === 'Enter') {
+                            const picked = list[combo.active];
+                            if (combo.open && picked !== undefined)
+                                commit(picked);
+                            else if (combo.open && combo.query.trim() !== '')
+                                commit(combo.query.trim());
+                        }
+                    },
+                    onBlur: () => {
+                        combo.open = false;
+                        combo.query = '';
+                        rerender();
+                    },
+                }), combo.open && visible.length > 0
+                    ? h('div', { style: s.listbox, role: 'listbox' }, ...visible.map((choice, index) => h('div', {
+                        key: choice,
+                        role: 'option',
+                        'aria-selected': index === combo.active,
+                        style: {
+                            ...s.option,
+                            ...(isDefault(choice) ? {} : { fontFamily: `"${choice}"` }),
+                            ...(index === combo.active ? s.optionActive : {}),
+                        },
+                        // Fires before the input's blur, which would close the list first.
+                        onMouseDown: (event) => {
+                            event.preventDefault();
+                            commit(choice);
+                        },
+                    }, isDefault(choice) ? 'Default (built-in stack)' : choice)))
+                    : null);
+            };
+            /** The preset currently selected, for filling a missing mode from its colours. */
+            const basePreset = presets.find((preset) => preset.id === (localPreset ?? state.basePreset));
+            /**
+             * The effective value of one token: the local edit, else the stored override,
+             * else the base preset's own value for that mode.
+             */
+            const effective = (name) => {
+                const local = localTokens[name];
+                if (local !== undefined)
+                    return local;
+                const stored = state.tokens.find((row) => row.name === name)?.override;
+                if (stored !== undefined)
+                    return stored;
+                const presetValue = basePreset === undefined ? undefined : basePreset.tokens[name];
+                return presetValue ?? { light: '', dark: '' };
+            };
+            const presetCards = [
+                { id: 'none', label: 'No preset', description: 'Start from the built-in palette.', colorScheme: 'dark', tokens: {} },
+                ...presets,
+            ].map((preset) => {
+                const base = preset.tokens['--dsw-alias-bg-base'];
+                const accent = preset.tokens['--dsw-alias-brand-primary'];
+                const label = preset.tokens['--dsw-alias-label-primary'];
+                const active = (localPreset ?? state.basePreset) === preset.id;
+                return h('button', {
+                    key: preset.id,
+                    type: 'button',
+                    style: {
+                        ...s.card,
+                        // Paint the preset's own surface and text colour, so the grid shows what
+                        // each theme looks like rather than the one currently applied.
+                        background: base?.light ?? 'transparent',
+                        color: label?.light ?? 'var(--dsw-alias-label-primary)',
+                        ...(active ? s.cardActive : {}),
+                    },
+                    'aria-pressed': active,
+                    onClick: () => {
+                        setLocalPreset(preset.id);
+                        setLocalTokens({});
+                        actions.setPreset(preset.id);
+                    },
+                }, h('div', { style: s.swatches }, h('span', { style: { ...s.swatch, background: base?.light ?? 'transparent' } }), h('span', { style: { ...s.swatch, background: base?.dark ?? 'transparent' } }), h('span', { style: { ...s.swatch, background: accent?.dark ?? 'transparent' } }), h('span', { style: { ...s.swatch, background: label?.dark ?? 'transparent' } })), h('span', { style: { fontSize: 13, fontWeight: 600 } }, preset.label), h('span', { style: s.hint }, preset.description));
+            });
+            const tokenRows = state.tokens.map((row) => {
+                const current = effective(row.name);
+                /**
+                 * Apply one mode's edit and write both modes.
+                 *
+                 * The theme runtime needs a value for each scheme, so a half-typed row is
+                 * completed from the preset rather than withheld: withholding was why typing
+                 * appeared to do nothing until both fields happened to be filled.
+                 */
+                const edit = (mode, value) => {
+                    const next = { ...current, [mode]: value };
+                    setLocalTokens({ ...localTokens, [row.name]: next });
+                    if (next.light.length > 0 && next.dark.length > 0)
+                        actions.setToken(row.name, next.light, next.dark);
+                };
+                return h('div', { key: row.name, style: s.row }, h('div', { style: s.rowLabel }, h('span', { style: { fontSize: 12, fontWeight: 600 } }, row.label), h('span', { style: s.hint }, row.description)), h('div', { style: s.row2 }, h('input', {
+                    style: s.colorInput,
+                    type: 'color',
+                    'aria-label': `${row.label} light`,
+                    value: /^#[0-9a-f]{6}$/iu.test(current.light) ? current.light : '#000000',
+                    onChange: (event) => edit('light', event.target.value),
+                }), h('input', {
+                    style: s.input,
+                    type: 'text',
+                    'aria-label': `${row.label} light value`,
+                    placeholder: 'light',
+                    value: current.light,
+                    onChange: (event) => edit('light', event.target.value),
+                })), h('div', { style: s.row2 }, h('input', {
+                    style: s.colorInput,
+                    type: 'color',
+                    'aria-label': `${row.label} dark`,
+                    value: /^#[0-9a-f]{6}$/iu.test(current.dark) ? current.dark : '#000000',
+                    onChange: (event) => edit('dark', event.target.value),
+                }), h('input', {
+                    style: s.input,
+                    type: 'text',
+                    'aria-label': `${row.label} dark value`,
+                    placeholder: 'dark',
+                    value: current.dark,
+                    onChange: (event) => edit('dark', event.target.value),
+                }), h('button', {
+                    type: 'button',
+                    style: s.button,
+                    onClick: () => {
+                        const next = { ...localTokens };
+                        delete next[row.name];
+                        setLocalTokens(next);
+                        actions.clearToken(row.name);
+                    },
+                }, 'Reset')));
+            });
+            const fontRow = (role, label, family, size) => {
+                const edit = (value) => {
+                    const key = role === 'text' ? 'textFontFamily' : role === 'code' ? 'codeFontFamily' : 'terminalFontFamily';
+                    setLocalTypography({ ...(localTypography ?? state.typography), [key]: value });
+                    applyFont(role, value);
+                };
+                return h('div', { style: { ...s.row, ...s.fontRow } }, h('div', { style: s.rowLabel }, h('span', { style: { fontSize: 12, fontWeight: 600 } }, label)), fontCombo(`${label} font family`, family, edit), h('div', { style: s.row2 }, h('input', {
+                    style: s.input,
+                    type: 'number',
+                    min: 8,
+                    max: 24,
+                    'aria-label': `${label} size`,
+                    value: size,
+                    onChange: (event) => {
+                        const px = Number(event.target.value);
+                        const key = role === 'text' ? 'fontSize' : role === 'code' ? 'codeFontSize' : 'terminalFontSize';
+                        setLocalTypography({ ...(localTypography ?? state.typography), [key]: px });
+                        actions.setFontSize(role, px);
+                    },
+                }), h('span', { style: s.hint }, 'px')));
+            };
+            return h('div', { style: s.root }, state.writable
+                ? null
+                : h('div', { style: s.warning }, 'This profile does not accept settings writes; changes will not persist.'), h('section', { style: s.section }, h('h3', { style: s.heading }, 'Base theme'), h('p', { style: s.hint }, 'A preset supplies a complete token set. Tune individual values below it.'), h('div', { style: s.grid }, presetCards)), h('section', { style: s.section }, h('h3', { style: s.heading }, 'Live preview'), h('div', { style: s.preview }, h('span', { style: { fontSize: 15, fontWeight: 600 } }, 'The quick brown fox'), h('span', { style: { fontSize: 12, color: 'var(--dsw-alias-label-secondary)' } }, 'Secondary text sits one step down.'), h('div', { style: s.row2 }, h('span', { style: { ...s.button, background: 'var(--dsw-alias-brand-primary)', color: 'var(--dsw-alias-bg-base)' } }, 'Accent'), h('span', { style: { ...s.button, borderColor: 'var(--dsw-alias-state-error-primary)' } }, 'Error'), h('span', { style: { ...s.button, borderColor: 'var(--dsw-alias-state-success-primary)' } }, 'Success'), h('span', { style: { ...s.button, borderColor: 'var(--dsw-alias-state-warn-primary)' } }, 'Warning')))), h('section', { style: s.section }, h('h3', { style: s.heading }, 'Typography'), fontRow('text', 'Interface text', (localTypography ?? state.typography).textFontFamily, (localTypography ?? state.typography).fontSize), fontRow('code', 'Code', (localTypography ?? state.typography).codeFontFamily, (localTypography ?? state.typography).codeFontSize), fontRow('terminal', 'Terminal', (localTypography ?? state.typography).terminalFontFamily, (localTypography ?? state.typography).terminalFontSize)), h('section', { style: s.section }, h('h3', { style: s.heading }, 'Geometry'), h('div', { style: s.row }, h('div', { style: s.rowLabel }, h('span', { style: { fontSize: 12, fontWeight: 600 } }, 'Corner radius')), h('input', {
+                type: 'range',
+                min: 0,
+                max: 24,
+                value: (localGeometry ?? state.geometry).radius,
+                'aria-label': 'Corner radius',
+                onChange: (event) => {
+                    const radius = Number(event.target.value);
+                    setLocalGeometry({ ...(localGeometry ?? state.geometry), radius });
+                    actions.setRadius(radius);
+                },
+            }), h('span', { style: s.hint }, `${String((localGeometry ?? state.geometry).radius)}px`)), h('div', { style: s.row }, h('div', { style: s.rowLabel }, h('span', { style: { fontSize: 12, fontWeight: 600 } }, 'Density')), h('div', { style: s.row2 }, ...['compact', 'comfortable', 'spacious'].map((density) => h('button', {
+                key: density,
+                type: 'button',
+                style: (localGeometry ?? state.geometry).density === density
+                    ? { ...s.button, borderColor: 'var(--dsw-alias-brand-primary)' }
+                    : s.button,
+                'aria-pressed': (localGeometry ?? state.geometry).density === density,
+                onClick: () => {
+                    setLocalGeometry({ ...(localGeometry ?? state.geometry), density });
+                    actions.setDensity(density);
+                },
+            }, density))), h('span', {}))), h('section', { style: s.section }, h('h3', { style: s.heading }, 'Colour tokens'), h('p', { style: s.hint }, 'Both values are required: one per palette mode, so switching scheme stays legible.'), ...tokenRows), state.warnings.length > 0
+                ? h('section', { style: s.section }, ...state.warnings.map((warning, index) => h('div', { key: String(index), style: s.warning }, warning)))
+                : null, h('section', { style: s.section }, h('button', { type: 'button', style: s.button, onClick: () => actions.resetAll() }, 'Reset all customization')));
+        }
+        //# sourceMappingURL=panel.js.map
+        Object.assign(exports, { resetCombos: resetCombos, ThemeStudio: ThemeStudio });
+        
+      },
+      "./client/hosted-fonts.js": (module, exports, __require) => {
+        /**
+         * Families fetched from a font CDN on demand.
+         *
+         * @module @d0nj/dsh-ui-custom/hosted-fonts
+         */
+        const HOSTED_FONTS = [
+            { family: 'Inter', category: 'sans' },
+            { family: 'IBM Plex Sans', category: 'sans' },
+            { family: 'Source Sans 3', category: 'sans' },
+            { family: 'Public Sans', category: 'sans' },
+            { family: 'Work Sans', category: 'sans' },
+            { family: 'DM Sans', category: 'sans' },
+            { family: 'Manrope', category: 'sans' },
+            { family: 'Figtree', category: 'sans' },
+            { family: 'Nunito Sans', category: 'sans' },
+            { family: 'Open Sans', category: 'sans' },
+            { family: 'Roboto', category: 'sans' },
+            { family: 'Lato', category: 'sans' },
+            { family: 'Montserrat', category: 'sans' },
+            { family: 'Poppins', category: 'sans' },
+            { family: 'Lexend', category: 'sans' },
+            { family: 'Outfit', category: 'sans' },
+            { family: 'Sora', category: 'sans' },
+            { family: 'Space Grotesk', category: 'sans' },
+            { family: 'JetBrains Mono', category: 'mono' },
+            { family: 'Fira Code', category: 'mono' },
+            { family: 'Source Code Pro', category: 'mono' },
+            { family: 'IBM Plex Mono', category: 'mono' },
+            { family: 'Roboto Mono', category: 'mono' },
+            { family: 'Space Mono', category: 'mono' },
+            { family: 'Inconsolata', category: 'mono' },
+            { family: 'Ubuntu Mono', category: 'mono' },
+            { family: 'Anonymous Pro', category: 'mono' },
+            { family: 'Source Serif 4', category: 'serif' },
+            { family: 'IBM Plex Serif', category: 'serif' },
+            { family: 'Lora', category: 'serif' },
+            { family: 'Merriweather', category: 'serif' },
+            { family: 'Newsreader', category: 'serif' },
+            { family: 'Crimson Pro', category: 'serif' },
+            { family: 'Bitter', category: 'serif' },
+            { family: 'Bricolage Grotesque', category: 'display' },
+            { family: 'Instrument Serif', category: 'display' },
+        ];
+        const CDN_BASE = 'https://fonts.googleapis.com/css2';
+        /** Stylesheets outlive any one render, and a repeat request is a wasted round-trip. */
+        const requested = new Set();
+        /**
+         * @param font - the family to request.
+         * @returns an absolute stylesheet URL.
+         */
+        function hostedFontUrl(font) {
+            const name = font.family.trim().replace(/\s+/gu, '+');
+            const weights = (font.weights ?? [400]).join(';');
+            return `${CDN_BASE}?family=${name}:wght@${weights}&display=swap`;
+        }
+        /**
+         * Load one family into the page; resolves on failure too, because a font that
+         * cannot be fetched must not break the panel.
+         *
+         * @param font - the family to load.
+         * @param doc - document to load into; defaults to the global one.
+         */
+        async function loadHostedFont(font, doc = typeof document === 'undefined' ? undefined : document) {
+            if (doc === undefined)
+                return;
+            const key = font.family.toLowerCase();
+            if (requested.has(key))
+                return;
+            requested.add(key);
+            const stylesheet = doc.createElement('link');
+            stylesheet.rel = 'stylesheet';
+            stylesheet.href = hostedFontUrl(font);
+            stylesheet.dataset.d0njHostedFont = font.family;
+            await new Promise((resolve) => {
+                stylesheet.addEventListener('load', () => resolve(), { once: true });
+                stylesheet.addEventListener('error', () => resolve(), { once: true });
+                doc.head.append(stylesheet);
+            });
+            // Without this the first render after a pick can still measure the fallback.
+            await doc.fonts?.ready.catch(() => { });
+        }
+        /**
+         * @param fonts - catalog to read.
+         * @returns family names, sorted.
+         */
+        function hostedFamilies(fonts = HOSTED_FONTS) {
+            return fonts.map((font) => font.family).sort((left, right) => left.localeCompare(right));
+        }
+        /**
+         * @param family - family name to find.
+         * @param fonts - catalog to search.
+         * @returns the entry, or `undefined` when the name is not hosted here.
+         */
+        function findHostedFont(family, fonts = HOSTED_FONTS) {
+            const key = family.trim().replace(/^["']|["']$/gu, '').toLowerCase();
+            return fonts.find((font) => font.family.toLowerCase() === key);
+        }
+        //# sourceMappingURL=hosted-fonts.js.map
+        Object.assign(exports, { hostedFontUrl: hostedFontUrl, loadHostedFont: loadHostedFont, hostedFamilies: hostedFamilies, findHostedFont: findHostedFont, HOSTED_FONTS: HOSTED_FONTS });
+        
+      },
+    }
+    const entry = __require("./client/index.js")
+    if (typeof entry.useReact === 'function') entry.useReact(require('react'))
+    return entry
+  },
+});