@kitlangton/knobs 0.4.0-next.0 → 0.4.0-next.1

package/dist/types/tokens/schema.d.ts

@@ -0,0 +1,1100 @@
+/**
+ * Every knobs design token, in one typed list: the source the CSS, the README table, the
+ * TypeScript name unions and the theme generator are all produced from.
+ *
+ * Tiers:
+ * - `input`: a theme dial that is also a live CSS variable (set it anywhere; derivations follow).
+ * - `semantic`: the public contract (`--k-{role}-{variant}`).
+ * - `hook`: a documented per-component override, defaulting to a semantic token.
+ * - `private`: an implementation detail (`--_k-*`); not part of the public API.
+ *
+ * Sources:
+ * - `{ from: "theme" }`: the theme generator supplies it (per appearance for colours); declared
+ *   on `:where(:root,:host)`.
+ * - `{ value }`: a fixed literal default; declared on `:where(:root,:host)`.
+ * - `{ css }`: derived from other tokens; declared on `:where(.knobs-root)`, so an override on any
+ *   ancestor of a knobs element (or on the element) flows through.
+ */
+export type Tier = "input" | "semantic" | "hook" | "private";
+export type TokenType = "color" | "length" | "number" | "font" | "shadow" | "spring" | "integer";
+export type TokenSource = {
+    readonly from: "theme";
+} | {
+    readonly value: string;
+} | {
+    readonly css: string;
+};
+export interface TokenDef {
+    /** The name without its prefix: `bg-page` is `--k-bg-page`, private `tray-pad` is `--_k-tray-pad`. */
+    readonly name: string;
+    readonly tier: Tier;
+    readonly type: TokenType;
+    readonly group: string;
+    readonly source: TokenSource;
+    readonly doc: string;
+    /** Today's names (`--k-*`, `--ku-*`) that now read this token. Removed after one release. */
+    readonly deprecated?: readonly string[];
+    /**
+     * How the knobs root resolves the token from its value (`$`), when that isn't the value itself:
+     * the control radius scales with density.
+     */
+    readonly resolve?: string;
+}
+export declare const TOKENS: readonly [{
+    readonly name: "accent";
+    readonly tier: "input";
+    readonly type: "color";
+    readonly group: "Accent";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "The one accent: primary actions, handles, focus. Hover, soft and selection derive from it in CSS.";
+    readonly deprecated: readonly ["--ku-accent"];
+}, {
+    readonly name: "contrast";
+    readonly tier: "input";
+    readonly type: "number";
+    readonly group: "Inputs";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Contrast multiplier for fills and alpha borders (1 = default; the theme's 0–100 dial maps 50 → 1).";
+}, {
+    readonly name: "radius";
+    readonly tier: "input";
+    readonly type: "length";
+    readonly group: "Shape";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Control corner radius. 0 squares everything, including capsules. Scales with density.";
+    readonly deprecated: readonly ["--ku-radius"];
+    readonly resolve: "round(calc($ * (1 + (var(--_k-density) - 1) * 1.5)),2px)";
+}, {
+    readonly name: "density";
+    readonly tier: "input";
+    readonly type: "number";
+    readonly group: "Size";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Size multiplier: compact .875, default 1, comfortable 1.1875.";
+}, {
+    readonly name: "font";
+    readonly tier: "input";
+    readonly type: "font";
+    readonly group: "Type";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "UI font stack.";
+    readonly deprecated: readonly ["--ku-font"];
+}, {
+    readonly name: "mono";
+    readonly tier: "input";
+    readonly type: "font";
+    readonly group: "Type";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Monospace font stack.";
+    readonly deprecated: readonly ["--ku-mono"];
+}, {
+    readonly name: "bg-page";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Surfaces";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "The page behind panels; workspace backdrops.";
+    readonly deprecated: readonly ["--k-page", "--ku-page"];
+}, {
+    readonly name: "bg-inset";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Surfaces";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Wells sunk into a panel: tracks, inputs, segmented backgrounds.";
+}, {
+    readonly name: "bg";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Surfaces";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "The panel surface.";
+    readonly deprecated: readonly ["--ku-bg"];
+}, {
+    readonly name: "bg-raised";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Surfaces";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Raised within a panel: the active segment, cards on a panel.";
+}, {
+    readonly name: "bg-overlay";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Surfaces";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Floating surfaces: menus, popovers, tooltips.";
+}, {
+    readonly name: "fill";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Fills";
+    readonly source: {
+        readonly css: `color-mix(in oklch,${string} calc(${number}% * var(--k-contrast)),transparent)`;
+    };
+    readonly doc: "Resting fill for controls.";
+    readonly deprecated: readonly ["--k-surface", "--ku-surface"];
+}, {
+    readonly name: "fill-hover";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Fills";
+    readonly source: {
+        readonly css: `color-mix(in oklch,${string} calc(${number}% * var(--k-contrast)),transparent)`;
+    };
+    readonly doc: "Hovered fill.";
+}, {
+    readonly name: "fill-selected";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Fills";
+    readonly source: {
+        readonly css: `color-mix(in oklch,${string} calc(${number}% * var(--k-contrast)),transparent)`;
+    };
+    readonly doc: "Pressed or selected fill.";
+    readonly deprecated: readonly ["--k-surface-hi", "--ku-surface-hi"];
+}, {
+    readonly name: "fg";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Foreground";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Primary text and icons (≥ Lc 90 on bg).";
+    readonly deprecated: readonly ["--k-text", "--ku-text"];
+}, {
+    readonly name: "fg-2";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Foreground";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Secondary text: labels (≥ Lc 75).";
+    readonly deprecated: readonly ["--k-label", "--ku-label"];
+}, {
+    readonly name: "fg-3";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Foreground";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Tertiary text: metadata, units, captions (≥ Lc 45).";
+    readonly deprecated: readonly ["--k-dim", "--ku-dim"];
+}, {
+    readonly name: "fg-4";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Foreground";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Placeholder and disabled text (≥ Lc 30).";
+}, {
+    readonly name: "border-subtle";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Borders";
+    readonly source: {
+        readonly css: `color-mix(in oklch,${string} calc(${number}% * var(--k-contrast)),transparent)`;
+    };
+    readonly doc: "Hairline edges and dividers (below Lc 15 by design).";
+    readonly deprecated: readonly ["--k-edge"];
+}, {
+    readonly name: "border";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Borders";
+    readonly source: {
+        readonly css: `color-mix(in oklch,${string} calc(${number}% * var(--k-contrast)),transparent)`;
+    };
+    readonly doc: "Default borders.";
+    readonly deprecated: readonly ["--k-line", "--ku-line"];
+}, {
+    readonly name: "border-strong";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Borders";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Interactive edges (≥ Lc 15; solid).";
+    readonly deprecated: readonly ["--k-line-hi", "--ku-line-hi"];
+}, {
+    readonly name: "accent-hover";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Accent";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-accent) 90%,var(--k-bg))";
+    };
+    readonly doc: "Hovered accent.";
+}, {
+    readonly name: "accent-soft";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Accent";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-accent) 15%,transparent)";
+    };
+    readonly doc: "Accent tint behind accent content.";
+}, {
+    readonly name: "accent-fg";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Accent";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Accent as text on bg (≥ Lc 60).";
+}, {
+    readonly name: "on-accent";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Accent";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Content placed on a solid accent.";
+}, {
+    readonly name: "ok";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Success.";
+}, {
+    readonly name: "warn";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Warning.";
+    readonly deprecated: readonly ["--ku-warn"];
+}, {
+    readonly name: "danger";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Error, destructive. Put text on danger-soft rather than bare bg.";
+    readonly deprecated: readonly ["--k-critical", "--ku-critical"];
+}, {
+    readonly name: "info";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Informational.";
+}, {
+    readonly name: "ok-soft";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-ok) 15%,transparent)";
+    };
+    readonly doc: "Success tint.";
+}, {
+    readonly name: "warn-soft";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-warn) 15%,transparent)";
+    };
+    readonly doc: "Warning tint.";
+}, {
+    readonly name: "danger-soft";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-danger) 15%,transparent)";
+    };
+    readonly doc: "Danger tint.";
+}, {
+    readonly name: "info-soft";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Status";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-info) 15%,transparent)";
+    };
+    readonly doc: "Info tint.";
+}, {
+    readonly name: "focus";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Interaction";
+    readonly source: {
+        readonly css: "var(--k-accent)";
+    };
+    readonly doc: "Focus ring colour (drawn as a 2px bg gap, then 2px of focus).";
+}, {
+    readonly name: "selection";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Interaction";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-accent) 24%,transparent)";
+    };
+    readonly doc: "Selected rows and ranges.";
+    readonly deprecated: readonly ["--k-ui-select", "--ku-select"];
+}, {
+    readonly name: "scrim";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Interaction";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Dimming behind modal layers.";
+}, {
+    readonly name: "diff-add";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-ok)";
+    };
+    readonly doc: "Added lines; line and word tints derive privately (12% / 38%).";
+}, {
+    readonly name: "diff-del";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-danger)";
+    };
+    readonly doc: "Deleted lines.";
+}, {
+    readonly name: "diff-mod";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-warn)";
+    };
+    readonly doc: "Modified lines.";
+}, {
+    readonly name: "series-1";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 1.";
+}, {
+    readonly name: "series-2";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 2.";
+}, {
+    readonly name: "series-3";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 3.";
+}, {
+    readonly name: "series-4";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 4.";
+}, {
+    readonly name: "series-5";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 5.";
+}, {
+    readonly name: "series-6";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Chart series 6.";
+}, {
+    readonly name: "radius-panel";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Shape";
+    readonly source: {
+        readonly css: "calc(var(--k-radius) + var(--k-unit))";
+    };
+    readonly doc: "Panel and card radius, concentric with controls.";
+    readonly deprecated: readonly ["--k-panel-radius", "--ku-panel-radius"];
+}, {
+    readonly name: "round";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Shape";
+    readonly source: {
+        readonly css: "calc(var(--k-radius) * 999)";
+    };
+    readonly doc: "Capsule radius that squares when --k-radius is 0. Use instead of 999px.";
+}, {
+    readonly name: "unit";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Size";
+    readonly source: {
+        readonly value: "4px";
+    };
+    readonly doc: "The spacing unit.";
+}, {
+    readonly name: "row";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Size";
+    readonly source: {
+        readonly css: "round(calc(32px * var(--k-density)),2px)";
+    };
+    readonly doc: "Row height.";
+    readonly deprecated: readonly ["--ku-row"];
+}, {
+    readonly name: "width";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Size";
+    readonly source: {
+        readonly value: "288px";
+    };
+    readonly doc: "Panel width.";
+}, {
+    readonly name: "font-size";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly css: "round(calc(12px * (1 + (var(--k-density) - 1) * .5)),1px)";
+    };
+    readonly doc: "Body size; a 5-step scale derives privately.";
+    readonly deprecated: readonly ["--ku-font-size"];
+}, {
+    readonly name: "value-font";
+    readonly tier: "semantic";
+    readonly type: "font";
+    readonly group: "Type";
+    readonly source: {
+        readonly css: "var(--k-font)";
+    };
+    readonly doc: "Font for readouts and values (labPreset: mono).";
+    readonly deprecated: readonly ["--ku-value-font"];
+}, {
+    readonly name: "shadow-raised";
+    readonly tier: "semantic";
+    readonly type: "shadow";
+    readonly group: "Material";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Small lift for raised controls.";
+    readonly deprecated: readonly ["--k-lift-shadow"];
+}, {
+    readonly name: "shadow-overlay";
+    readonly tier: "semantic";
+    readonly type: "shadow";
+    readonly group: "Material";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Floating panels, menus, popovers.";
+    readonly deprecated: readonly ["--k-shadow", "--ku-shadow"];
+}, {
+    readonly name: "glass";
+    readonly tier: "semantic";
+    readonly type: "number";
+    readonly group: "Material";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Backdrop glass amount (0 = opaque).";
+}, {
+    readonly name: "glow";
+    readonly tier: "semantic";
+    readonly type: "number";
+    readonly group: "Material";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Specular glow amount.";
+}, {
+    readonly name: "rim";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Material";
+    readonly source: {
+        readonly from: "theme";
+    };
+    readonly doc: "Top-edge highlight hairline.";
+    readonly deprecated: readonly ["--ku-rim"];
+}, {
+    readonly name: "spring";
+    readonly tier: "semantic";
+    readonly type: "spring";
+    readonly group: "Motion";
+    readonly source: {
+        readonly value: "0.3 0";
+    };
+    readonly doc: "Default spring as `duration bounce` (the motion module's `default`).";
+}, {
+    readonly name: "hover-in";
+    readonly tier: "semantic";
+    readonly type: "number";
+    readonly group: "Motion";
+    readonly source: {
+        readonly value: "0";
+    };
+    readonly doc: "Hover wash fade-in, unitless milliseconds.";
+    readonly deprecated: readonly ["--ku-hover-in"];
+}, {
+    readonly name: "hover-out";
+    readonly tier: "semantic";
+    readonly type: "number";
+    readonly group: "Motion";
+    readonly source: {
+        readonly value: "120";
+    };
+    readonly doc: "Hover wash fade-out, unitless milliseconds.";
+    readonly deprecated: readonly ["--ku-hover-out"];
+}, {
+    readonly name: "z";
+    readonly tier: "semantic";
+    readonly type: "integer";
+    readonly group: "Motion";
+    readonly source: {
+        readonly value: "2147480000";
+    };
+    readonly doc: "Base of knobs' stacking ladder; layers add small offsets.";
+}, {
+    readonly name: "slider-track";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fill)";
+    };
+    readonly doc: "Slider track.";
+}, {
+    readonly name: "slider-fill";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-accent) 20%,var(--k-fill-selected))";
+    };
+    readonly doc: "Slider value fill.";
+    readonly deprecated: readonly ["--k-fill-rest"];
+}, {
+    readonly name: "slider-handle";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-accent)";
+    };
+    readonly doc: "Slider handle and range thumbs.";
+    readonly deprecated: readonly ["--k-handle"];
+}, {
+    readonly name: "toggle-thumb-off";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "#ffffff";
+    };
+    readonly doc: "A switch's thumb while off, and the ring around colour and gradient thumbs.";
+    readonly deprecated: readonly ["--k-thumb"];
+}, {
+    readonly name: "toggle-track";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fill-selected)";
+    };
+    readonly doc: "Toggle track, off.";
+}, {
+    readonly name: "toggle-track-on";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-accent)";
+    };
+    readonly doc: "Toggle track, on.";
+}, {
+    readonly name: "toggle-thumb";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-on-accent)";
+    };
+    readonly doc: "Toggle thumb.";
+}, {
+    readonly name: "segmented-track";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-bg-inset)";
+    };
+    readonly doc: "Segmented control background.";
+    readonly deprecated: readonly ["--k-seg-bg", "--ku-seg-bg"];
+}, {
+    readonly name: "segmented-active";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-bg-raised)";
+    };
+    readonly doc: "Active segment.";
+    readonly deprecated: readonly ["--k-seg-active"];
+}, {
+    readonly name: "timeline-playhead";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-accent)";
+    };
+    readonly doc: "Timeline playhead.";
+}, {
+    readonly name: "split-gutter";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-border-subtle)";
+    };
+    readonly doc: "Split pane divider.";
+    readonly deprecated: readonly ["--k-ui-divider", "--ku-divider"];
+}, {
+    readonly name: "compare-divider";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fg)";
+    };
+    readonly doc: "Before/after divider line.";
+    readonly deprecated: readonly ["--k-compare-line"];
+}, {
+    readonly name: "compare-stage";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fill)";
+    };
+    readonly doc: "Compare stage background.";
+}, {
+    readonly name: "activity-rail";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-border-strong)";
+    };
+    readonly doc: "Activity rail line.";
+    readonly deprecated: readonly ["--k-activity-line"];
+}, {
+    readonly name: "picker-card";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fill)";
+    };
+    readonly doc: "Picker card.";
+}, {
+    readonly name: "pane-bg";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-bg)";
+    };
+    readonly doc: "knobs/ui pane card.";
+    readonly deprecated: readonly ["--k-ui-pane", "--ku-pane-bg"];
+}, {
+    readonly name: "button-bg";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fill)";
+    };
+    readonly doc: "Button fill.";
+}, {
+    readonly name: "button-border";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "transparent";
+    };
+    readonly doc: "Button border.";
+    readonly deprecated: readonly ["--k-button-line"];
+}, {
+    readonly name: "button-fg";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fg)";
+    };
+    readonly doc: "Button text.";
+    readonly deprecated: readonly ["--k-button-color"];
+}, {
+    readonly name: "row-hover";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-fill) 50%,transparent)";
+    };
+    readonly doc: "Row hover wash.";
+}, {
+    readonly name: "group-label";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fg-3)";
+    };
+    readonly doc: "Folder and group headings.";
+    readonly deprecated: readonly ["--k-group-ink", "--k-group-color"];
+}, {
+    readonly name: "modified";
+    readonly tier: "hook";
+    readonly type: "color";
+    readonly group: "Hooks";
+    readonly source: {
+        readonly css: "var(--k-fg-3)";
+    };
+    readonly doc: "Marker for values changed from their default.";
+}, {
+    readonly name: "tray-pad";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * .5)";
+    };
+    readonly doc: "Padding inside a tray around its controls.";
+    readonly deprecated: readonly ["--k-tray-pad"];
+}, {
+    readonly name: "pad";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "round(calc(10px * var(--k-density)),2px)";
+    };
+    readonly doc: "Panel padding.";
+    readonly deprecated: readonly ["--k-pad"];
+}, {
+    readonly name: "inset";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "var(--_k-pad)";
+    };
+    readonly doc: "Row content inset.";
+    readonly deprecated: readonly ["--k-inset", "--ku-inset"];
+}, {
+    readonly name: "gap";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "round(calc(var(--k-unit) * (1 + (var(--k-density) - 1) * 2.5)),1px)";
+    };
+    readonly doc: "Gap between rows.";
+    readonly deprecated: readonly ["--k-gap"];
+}, {
+    readonly name: "radius-md";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "max(0px,calc(var(--k-radius) - var(--_k-tray-pad)))";
+    };
+    readonly doc: "Concentric radius one tray in.";
+    readonly deprecated: readonly ["--k-radius-md"];
+}, {
+    readonly name: "radius-sm";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "max(0px,calc(var(--k-radius) - var(--_k-tray-pad) * 2))";
+    };
+    readonly doc: "Concentric radius two trays in.";
+    readonly deprecated: readonly ["--k-radius-sm"];
+}, {
+    readonly name: "control-h";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-row) - var(--k-unit) * 2)";
+    };
+    readonly doc: "Control height inside a row.";
+    readonly deprecated: readonly ["--k-control-h", "--ku-control-h"];
+}, {
+    readonly name: "value-size";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-font-size) - .5px)";
+    };
+    readonly doc: "Readout size.";
+    readonly deprecated: readonly ["--k-value-size", "--ku-value-size"];
+}, {
+    readonly name: "text-title";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-font-size) + 1px)";
+    };
+    readonly doc: "Type scale: titles.";
+    readonly deprecated: readonly ["--k-text-title"];
+}, {
+    readonly name: "text-body";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "var(--k-font-size)";
+    };
+    readonly doc: "Type scale: body.";
+    readonly deprecated: readonly ["--k-text-body"];
+}, {
+    readonly name: "text-control";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-font-size) - .5px)";
+    };
+    readonly doc: "Type scale: controls.";
+    readonly deprecated: readonly ["--k-text-control"];
+}, {
+    readonly name: "text-meta";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-font-size) - 1px)";
+    };
+    readonly doc: "Type scale: metadata.";
+    readonly deprecated: readonly ["--k-text-meta", "--ku-text-meta"];
+}, {
+    readonly name: "text-cap";
+    readonly tier: "private";
+    readonly type: "length";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "calc(var(--k-font-size) - 2px)";
+    };
+    readonly doc: "Type scale: caps and captions.";
+    readonly deprecated: readonly ["--k-text-cap"];
+}, {
+    readonly name: "weight";
+    readonly tier: "private";
+    readonly type: "number";
+    readonly group: "Private";
+    readonly source: {
+        readonly value: "400";
+    };
+    readonly doc: "Body weight.";
+    readonly deprecated: readonly ["--k-font-weight", "--ku-font-weight"];
+}, {
+    readonly name: "weight-label";
+    readonly tier: "private";
+    readonly type: "number";
+    readonly group: "Private";
+    readonly source: {
+        readonly value: "500";
+    };
+    readonly doc: "Label weight.";
+    readonly deprecated: readonly ["--k-label-weight", "--ku-label-weight"];
+}, {
+    readonly name: "weight-title";
+    readonly tier: "private";
+    readonly type: "number";
+    readonly group: "Private";
+    readonly source: {
+        readonly value: "600";
+    };
+    readonly doc: "Title weight.";
+    readonly deprecated: readonly ["--k-title-weight", "--ku-title-weight"];
+}, {
+    readonly name: "focus-ring";
+    readonly tier: "private";
+    readonly type: "shadow";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "0 0 0 2px var(--k-bg),0 0 0 4px var(--k-focus)";
+    };
+    readonly doc: "Two-layer focus ring: a bg gap, then the focus colour.";
+}, {
+    readonly name: "diff-add-line";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-add) 12%,transparent)";
+    };
+    readonly doc: "Added line tint.";
+}, {
+    readonly name: "diff-add-word";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-add) 38%,transparent)";
+    };
+    readonly doc: "Added word tint.";
+}, {
+    readonly name: "diff-del-line";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-del) 12%,transparent)";
+    };
+    readonly doc: "Deleted line tint.";
+}, {
+    readonly name: "diff-del-word";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-del) 38%,transparent)";
+    };
+    readonly doc: "Deleted word tint.";
+}, {
+    readonly name: "diff-mod-line";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-mod) 12%,transparent)";
+    };
+    readonly doc: "Modified line tint.";
+}, {
+    readonly name: "diff-mod-word";
+    readonly tier: "private";
+    readonly type: "color";
+    readonly group: "Private";
+    readonly source: {
+        readonly css: "color-mix(in oklch,var(--k-diff-mod) 38%,transparent)";
+    };
+    readonly doc: "Modified word tint.";
+}];
+type Defs = (typeof TOKENS)[number];
+/** Every token's short name. */
+export type TokenName = Defs["name"];
+/** Public tokens: inputs, semantic tokens and hooks. */
+export type PublicTokenName = Exclude<Defs, {
+    tier: "private";
+}>["name"];
+export type SemanticTokenName = Extract<Defs, {
+    tier: "semantic" | "input";
+}>["name"];
+export type HookName = Extract<Defs, {
+    tier: "hook";
+}>["name"];
+export type ColorTokenName = Extract<Defs, {
+    type: "color";
+}>["name"];
+/** Tokens a theme generates (per appearance where they're colours). */
+export type ThemeTokenName = Extract<Defs, {
+    source: {
+        from: "theme";
+    };
+}>["name"];
+/** Public CSS custom property names. */
+export type TokenProperty = `--k-${PublicTokenName}`;
+export declare const TOKEN_BY_NAME: ReadonlyMap<TokenName, Defs>;
+/** The custom property for a token: `--k-bg`, or `--_k-tray-pad` for a private one. */
+export declare const cssName: (t: Pick<TokenDef, "name" | "tier">) => string;
+/** The token a custom property names, if any. */
+export declare const tokenForProperty: (property: string) => TokenName | undefined;
+/** Deprecated property → the property it now reads. */
+export declare const DEPRECATED: ReadonlyMap<string, string>;
+/**
+ * Names knobs used internally that now belong to a public token of a different kind, and so must
+ * never be registered or set as anything else: the slider's position was `--k-fill`.
+ */
+export declare const RETIRED_INTERNAL: readonly ["--k-fill"];
+/** The theme dials that are not CSS variables (they shape the generated values). */
+export declare const THEME_DIALS: {
+    readonly appearance: "dark | light | system | inherit: sets color-scheme; colours are light-dark() pairs.";
+    readonly gray: "{ hue, chroma }: tint of the neutral ladder (chroma 0–0.02).";
+    readonly accent: "Accent colour; one value (dark) or { dark, light }.";
+    readonly contrast: "0–100; 50 is default. Spreads the ladder and scales fills and borders.";
+    readonly radius: "Control radius in px.";
+    readonly density: "compact | default | comfortable.";
+    readonly material: "glass | solid | flat: shadows, glass, glow, rim; flat makes borders solid.";
+    readonly font: "{ sans, mono } stacks.";
+};
+export {};