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

package/dist/client/panel.js

@@ -0,0 +1,294 @@
+/**
+ * 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
+ */
+/** 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,
+        },
+        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' },
+    };
+}
+/**
+ * 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.
+ */
+export 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 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) => h('div', { style: s.row }, h('div', { style: s.rowLabel }, h('span', { style: { fontSize: 12, fontWeight: 600 } }, label)), h('input', {
+        style: { ...s.input, width: 260 },
+        type: 'text',
+        'aria-label': `${label} font stack`,
+        placeholder: 'Font family, fallback, sans-serif',
+        value: family,
+        onChange: (event) => {
+            const key = role === 'text' ? 'textFontFamily' : role === 'code' ? 'codeFontFamily' : 'terminalFontFamily';
+            setLocalTypography({ ...(localTypography ?? state.typography), [key]: event.target.value });
+            actions.setFont(role, event.target.value);
+        },
+    }), 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

package/dist/index.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Host half: the customization document and its validation.
+ *
+ * The plugin does no rendering and holds no state of its own on the Host. It
+ * contributes one Config schema, which the profile stores and the browser half
+ * reads through its settings namespace, so a choice made in the panel survives a
+ * reload and a machine switch without this process tracking anything.
+ *
+ * `Config` is the contract; `resolve.ts` is the meaning. Keeping them apart means
+ * the panel can preview a change with the same resolver the stored document
+ * goes through, instead of reimplementing the merge rules in the browser.
+ *
+ * @module @d0nj/dsh-ui-custom
+ */
+import z from '@deepseek-ai/schemastery';
+import type { CustomizationDocument } from './resolve.js';
+/** Cordis plugin name used by Loader diagnostics. */
+export declare const name = "ui-custom";
+/** No services are required: this plugin only contributes configuration. */
+export declare const inject: readonly [];
+/**
+ * The plugin's config: one customization document.
+ *
+ * `basePreset` accepts any preset id or `none`. The resolver reports an unknown
+ * id as a warning rather than failing validation, because a stored document
+ * naming a preset from a newer version must not stop the plugin mounting.
+ */
+export declare const Config: ReturnType<typeof z.object>;
+/**
+ * The resolved config value.
+ *
+ * Fields are mutable and optional where the schema supplies defaults, matching
+ * what `z.object` produces; nothing in this package mutates them.
+ */
+/**
+ * The parsed shape of this plugin's config.
+ *
+ * Each field is olatile in the schema, so the Host hands pply a
+ * Volatile reference for it rather than a plain value; {@link toDocument}
+ * unwraps either form.
+ */
+export interface PluginConfig {
+    basePreset?: string;
+    tokens?: Record<string, {
+        light: string;
+        dark: string;
+    }>;
+    typography?: {
+        textFontFamily?: string;
+        codeFontFamily?: string;
+        terminalFontFamily?: string;
+        fontSize?: number;
+        codeFontSize?: number;
+        terminalFontSize?: number;
+    };
+    geometry?: {
+        radius?: number;
+        density?: 'compact' | 'comfortable' | 'spacious';
+    };
+}
+/**
+ * Project a stored config into a complete customization document.
+ *
+ * The schema defaults every field, but a config read back from a partially
+ * written document may still be missing sections, so this fills them once here
+ * rather than at each use site.
+ * @param config - the config handed to `apply`.
+ * @returns a complete document.
+ */
+export declare function toDocument(input: unknown): CustomizationDocument;
+/**
+ * Host plugin body.
+ *
+ * The Host contributes no runtime behavior: the browser half owns the theme
+ * override layer, and the settings service owns persistence. Returning nothing
+ * keeps the mount a pure configuration declaration, so a profile can hold this
+ * row without this process doing any work per session.
+ */
+export declare function apply(): void;
+export { PRESETS, TOKEN_SPECS, TOKEN_GROUPS, PRESET_IDS } from './spec.js';
+export { resolveCustomization } from './resolve.js';
+export type { CustomizationDocument, ResolvedCustomization } from './resolve.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,143 @@
+/**
+ * Host half: the customization document and its validation.
+ *
+ * The plugin does no rendering and holds no state of its own on the Host. It
+ * contributes one Config schema, which the profile stores and the browser half
+ * reads through its settings namespace, so a choice made in the panel survives a
+ * reload and a machine switch without this process tracking anything.
+ *
+ * `Config` is the contract; `resolve.ts` is the meaning. Keeping them apart means
+ * the panel can preview a change with the same resolver the stored document
+ * goes through, instead of reimplementing the merge rules in the browser.
+ *
+ * @module @d0nj/dsh-ui-custom
+ */
+import z from '@deepseek-ai/schemastery';
+import { DENSITIES, FONT_SIZE_RANGES, PRESET_IDS, RADIUS_MAX, RADIUS_MIN } from './spec.js';
+/** Cordis plugin name used by Loader diagnostics. */
+export const name = 'ui-custom';
+/** No services are required: this plugin only contributes configuration. */
+export const inject = [];
+/** One token override, with both palette modes required. */
+const TokenModesConfig = z.object({
+    light: z.string().description('Value used while the light palette is active.'),
+    dark: z.string().description('Value used while the dark palette is active.'),
+});
+/** Font stacks and sizes. */
+const TypographyConfig = z.object({
+    textFontFamily: z
+        .string()
+        .description('Interface and body font stack. Empty keeps the built-in stack.'),
+    codeFontFamily: z.string().description('Code font stack. Empty keeps the built-in stack.'),
+    terminalFontFamily: z
+        .string()
+        .description('Sidebar terminal font stack. Empty keeps the built-in stack.'),
+    fontSize: z
+        .number()
+        .step(1)
+        .min(FONT_SIZE_RANGES.text.min)
+        .max(FONT_SIZE_RANGES.text.max)
+        .default(FONT_SIZE_RANGES.text.fallback)
+        .description('Conversation text size in px.'),
+    codeFontSize: z
+        .number()
+        .step(1)
+        .min(FONT_SIZE_RANGES.code.min)
+        .max(FONT_SIZE_RANGES.code.max)
+        .default(FONT_SIZE_RANGES.code.fallback)
+        .description('Code block size in px.'),
+    terminalFontSize: z
+        .number()
+        .step(1)
+        .min(FONT_SIZE_RANGES.terminal.min)
+        .max(FONT_SIZE_RANGES.terminal.max)
+        .default(FONT_SIZE_RANGES.terminal.fallback)
+        .description('Sidebar terminal size in px.'),
+});
+/** Corner radius and spacing density. */
+const GeometryConfig = z.object({
+    radius: z
+        .number()
+        .step(1)
+        .min(RADIUS_MIN)
+        .max(RADIUS_MAX)
+        .default(8)
+        .description('Corner radius in px.'),
+    density: z
+        .union([z.const('compact'), z.const('comfortable'), z.const('spacious')])
+        .default('comfortable')
+        .description('Spacing density.'),
+});
+/**
+ * The plugin's config: one customization document.
+ *
+ * `basePreset` accepts any preset id or `none`. The resolver reports an unknown
+ * id as a warning rather than failing validation, because a stored document
+ * naming a preset from a newer version must not stop the plugin mounting.
+ */
+// Typed as the schema base so the emitted declaration stays portable: the fully
+// inferred type of a z.object chain names cosmokit through a pnpm store path.
+export const Config = z.object({
+    basePreset: z
+        .union([z.const('none'), ...PRESET_IDS.map((id) => z.const(id))])
+        .default('none')
+        .volatile()
+        .description(`Preset to build on: one of ${PRESET_IDS.join(', ')}, or none.`),
+    tokens: z
+        .dict(TokenModesConfig)
+        .volatile()
+        .description('Per-token overrides applied over the preset, keyed by CSS custom property name.'),
+    typography: TypographyConfig.volatile(),
+    geometry: GeometryConfig.volatile(),
+});
+/**
+ * Project a stored config into a complete customization document.
+ *
+ * The schema defaults every field, but a config read back from a partially
+ * written document may still be missing sections, so this fills them once here
+ * rather than at each use site.
+ * @param config - the config handed to `apply`.
+ * @returns a complete document.
+ */
+export function toDocument(input) {
+    const config = (input ?? {});
+    const read = (value) => {
+        if (value !== null && typeof value === 'object' && 'get' in value) {
+            return value.get();
+        }
+        return value;
+    };
+    const geometry = read(config.geometry);
+    const typography = read(config.typography);
+    const density = geometry?.density;
+    return {
+        basePreset: read(config.basePreset) ?? 'none',
+        tokens: read(config.tokens) ?? {},
+        typography: {
+            textFontFamily: typography?.textFontFamily ?? '',
+            codeFontFamily: typography?.codeFontFamily ?? '',
+            terminalFontFamily: typography?.terminalFontFamily ?? '',
+            fontSize: typography?.fontSize ?? FONT_SIZE_RANGES.text.fallback,
+            codeFontSize: typography?.codeFontSize ?? FONT_SIZE_RANGES.code.fallback,
+            terminalFontSize: typography?.terminalFontSize ?? FONT_SIZE_RANGES.terminal.fallback,
+        },
+        geometry: {
+            radius: geometry?.radius ?? 8,
+            density: density !== undefined && DENSITIES.includes(density)
+                ? density
+                : 'comfortable',
+        },
+    };
+}
+/**
+ * Host plugin body.
+ *
+ * The Host contributes no runtime behavior: the browser half owns the theme
+ * override layer, and the settings service owns persistence. Returning nothing
+ * keeps the mount a pure configuration declaration, so a profile can hold this
+ * row without this process doing any work per session.
+ */
+export function apply() { }
+export { PRESETS, TOKEN_SPECS, TOKEN_GROUPS, PRESET_IDS } from './spec.js';
+export { resolveCustomization } from './resolve.js';
+//# sourceMappingURL=index.js.map

package/dist/resolve.d.ts

@@ -0,0 +1,116 @@
+/**
+ * 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
+ */
+import { TOKEN_NAMES } from './spec.js';
+import type { Density, FontRole, TokenModes } from './spec.js';
+/** Geometry knobs the panel exposes. */
+export interface Geometry {
+    /** Corner radius in CSS pixels, 0–24. */
+    readonly radius: number;
+    /** Spacing density. */
+    readonly density: Density;
+}
+/** Typography settings the plugin applies through the theme service. */
+export interface Typography {
+    /** Interface and body font stack; empty keeps the built-in stack. */
+    readonly textFontFamily: string;
+    /** Code font stack; empty keeps the built-in stack. */
+    readonly codeFontFamily: string;
+    /** Sidebar terminal font stack; empty keeps the built-in stack. */
+    readonly terminalFontFamily: string;
+    /** Font sizes per role, each within its own range. */
+    readonly fontSize: number;
+    readonly codeFontSize: number;
+    readonly terminalFontSize: number;
+}
+/** The customization document, as the Host config carries it. */
+export interface CustomizationDocument {
+    /** Preset id, or `none` for no base. */
+    readonly basePreset: string;
+    /** Per-token overrides applied over the preset. */
+    readonly tokens: Readonly<Record<string, TokenModes>>;
+    /** Typography applied through the theme service. */
+    readonly typography: Typography;
+    /** Geometry applied as derived tokens. */
+    readonly geometry: Geometry;
+}
+/** Result of resolving a document. */
+export interface ResolvedCustomization {
+    /** Complete token overrides for `ctx.theme.overrideTokens`. */
+    readonly tokens: Readonly<Record<string, TokenModes>>;
+    /** Typography to apply, with out-of-range sizes corrected. */
+    readonly typography: Typography;
+    /** Problems found while resolving, for the panel to show. */
+    readonly warnings: readonly string[];
+}
+/**
+ * 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.
+ */
+export declare function isColor(value: string): boolean;
+/**
+ * Clamp a number into a closed range.
+ * @param value - candidate value.
+ * @param min - lower bound.
+ * @param max - upper bound.
+ * @returns the clamped integer.
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+/**
+ * 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.
+ */
+export declare function geometryTokens(geometry: Geometry): Record<string, TokenModes>;
+/**
+ * Correct one role's font size into its accepted range.
+ * @param role - font role.
+ * @param px - requested size.
+ * @returns the in-range size.
+ */
+export declare function correctFontSize(role: FontRole, px: number): number;
+/**
+ * Whether a string names a known density.
+ * @param value - candidate density.
+ * @returns true for a known density.
+ */
+export declare function isDensity(value: string): value is Density;
+/**
+ * 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.
+ */
+export declare function resolveCustomization(document: CustomizationDocument): ResolvedCustomization;
+/** Every documented token name, re-exported for the panel's reset action. */
+export { TOKEN_NAMES };
+//# sourceMappingURL=resolve.d.ts.map