@weasel-js/theme 1.9.3 → 1.10.0

package/dist/index.d.ts

@@ -1,6 +1,20 @@
-import { n as TokenName, o as ResolvedTheme, a as Theme, S as Selection, p as TokenValue } from './definition-DACR1H4A.js';
-export { q as AxisDef, A as AxisDefs, r as AxisValue, s as BAKED_THEMES, B as BakedTheme, t as ByAxis, u as ColorContext, v as ColorList, F as FlatTokens, G as GeneratedColors, w as GeneratedTheme, P as PinObject, e as PinValue, x as RampColors, R as RawToken, y as SerializableColorList, z as THEMES, D as THEME_SOURCES, T as ThemeDefinition, E as ThemeInput, V as Varying, H as colorAt, I as colorCount, J as colorCssAt, K as defineTheme, M as enumerateSelections, Q as fullSelection, U as isByAxis, W as rampSteps, X as resolveTheme, Y as selectionKey, Z as themeAxes, _ as themeTones, $ as weaselTheme } from './definition-DACR1H4A.js';
+import { o as ColorList, p as ColorSourceContext, q as TokenName, r as ResolvedTheme, a as Theme, S as Selection, s as TokenValue } from './definition-CSeERbSL.js';
+export { t as AxisDef, A as AxisDefs, u as AxisValue, v as BAKED_THEMES, B as BakedTheme, w as ByAxis, x as ColorContext, y as ColorListItem, F as FlatTokens, G as GeneratedColors, z as GeneratedTheme, P as PinObject, e as PinValue, D as RampColors, R as RawToken, E as SerializableColorList, H as THEMES, I as THEME_SOURCES, T as ThemeDefinition, J as ThemeInput, V as Varying, K as colorCount, M as defineTheme, Q as enumerateSelections, U as fullSelection, W as isByAxis, X as rampSteps, Y as resolveTheme, Z as selectionKey, _ as themeAxes, $ as themeTones, a0 as weaselTheme } from './definition-CSeERbSL.js';
 export { C as ColorMode, a as ColorModePreference, i as isColorModePreference } from './colorMode-CoklZomJ.js';
+import { ColorSource, ColorLiteral } from '@weasel-js/paint';
+
+/**
+ * The `i`th color of `list`, wrapping. A ramp list reads the resolved theme, so
+ * the answer follows its mode; a `ColorSource` item resolves against the
+ * context's palette, then its theme. Throws on an item nothing answers.
+ */
+declare function colorAt(list: ColorList, i: number, ctx?: ColorSourceContext): string;
+/**
+ * As `colorAt`, but a ramp list, and an item that names the theme, answers
+ * with its custom property (`var(--wzl-swatch-sky)`), so a color written into
+ * CSS follows a mode change without re-rendering, provider or not.
+ */
+declare function colorCssAt(list: ColorList, i: number, ctx?: ColorSourceContext): string;
 
 /** One row of `TOKEN_MANIFEST`: a token, its DTCG type, the name-prefix
  *  group it belongs to, its value in the default theme and selection, and
@@ -35,15 +49,25 @@ declare const TOKEN_MANIFEST: readonly TokenManifestEntry[];
 declare function tokenPx(name: TokenName, resolved?: ResolvedTheme): number;
 
 /**
- * Apply `theme` at `selection` to `el`'s subtree.
+ * Apply `theme` at `selection` to `el`'s subtree, and return the release.
+ *
+ * Stamps `data-wzl-theme` and one `data-wzl-<axis>` per axis, and holds a
+ * matching rule block in the stylesheet of the document or shadow root `el`
+ * lives in. Deliberately not inline properties: the cascade then does the
+ * work, per-subtree overrides are just a different theme name, and no
+ * `!important` is ever needed. No-op outside a DOM.
+ *
+ * An element holds one application: applying again replaces what it held, so
+ * a caller restyling one root never has to release. The release is for a
+ * subtree that goes away. It takes the attributes back off and lets go of the
+ * rule, which leaves the sheet once no element holds it; a release whose
+ * element has since been given something else does nothing.
  *
- * Stamps `data-wzl-theme` and one `data-wzl-<axis>` per axis, and ensures a
- * matching rule block exists in a module-owned stylesheet. Deliberately not
- * inline properties: the cascade then does the work, per-subtree overrides are
- * just a different theme name, and no `!important` is ever needed. No-op
- * outside a DOM.
+ * Two different themes may share a name. The second held at once has its rule
+ * kept to its own elements by a `data-wzl-variant` attribute, matched inside
+ * `:where()` so the rule's specificity is the first's.
  */
-declare function applyTheme(el: HTMLElement, theme: Theme, selection?: Selection): void;
+declare function applyTheme(el: HTMLElement, theme: Theme, selection?: Selection): () => void;
 
 /**
  * A resolved token value with `currentColor` taken to be `current`, for a surface drawn without the
@@ -56,6 +80,7 @@ declare function applyTheme(el: HTMLElement, theme: Theme, selection?: Selection
  */
 declare function resolveCurrentColor(value: string, current: string): string;
 
+/** What `loadDTCG` reads: a `toDTCG` export, or a document shaped like one. */
 interface DtcgDocument {
     name?: unknown;
     defaultMode?: unknown;
@@ -86,6 +111,26 @@ declare function serializeTokenValue(type: string, value: TokenValue): string;
  */
 declare function parseTokenValue(type: string, text: string): TokenValue;
 
+/** The name the tone list answers to: `{ ref: 'tone', index: 2 }` is the third tone, wrapping. */
+declare const TONE_REF = "tone";
+
+/**
+ * Resolve `source` to a literal, for a surface drawn without the cascade. A ref
+ * names an entry of the context's palette first, then the theme: `tone` with an
+ * index into the tone list, a token by its name without the `--wzl-` prefix, a
+ * ramp by its name with the index of a step, or a custom property spelled out.
+ * `null` for a name nothing answers, a token that is not a color, and a custom
+ * property the theme does not define.
+ */
+declare function colorSourceLiteral(source: ColorSource, ctx?: ColorSourceContext): ColorLiteral | null;
+/**
+ * `source` as a CSS color, naming what `colorSourceLiteral` resolves. A ref the
+ * theme answers is written as its custom property, so it follows the cascade
+ * with no re-render and a property spelled out need not be the theme's;
+ * everything else is written as the literal it resolves to.
+ */
+declare function colorSourceCss(source: ColorSource, ctx?: ColorSourceContext): string | null;
+
 /**
  * The vocabulary of stances, and the slots a theme styles a stanced surface with.
  *
@@ -130,4 +175,4 @@ interface StanceLookup<S extends string> {
  */
 declare function resolveStanceSlots<S extends string>(tokens: Readonly<Record<string, string>>, base: Readonly<Record<S, string>>, { stance, nested, stanced }?: StanceLookup<S>): Record<S, string>;
 
-export { ResolvedTheme, STANCES, STANCE_SLOTS, Selection, type Stance, type StanceLookup, type StanceSlot, TOKEN_MANIFEST, Theme, type TokenManifestEntry, TokenName, TokenValue, applyTheme, loadDTCG, parseTokenValue, resolveCurrentColor, resolveStanceSlots, serializeTokenValue, stanceSlotNames, tokenPx };
+export { ColorList, ColorSourceContext, type DtcgDocument, ResolvedTheme, STANCES, STANCE_SLOTS, Selection, type Stance, type StanceLookup, type StanceSlot, TOKEN_MANIFEST, TONE_REF, Theme, type TokenManifestEntry, TokenName, TokenValue, applyTheme, colorAt, colorCssAt, colorSourceCss, colorSourceLiteral, loadDTCG, parseTokenValue, resolveCurrentColor, resolveStanceSlots, serializeTokenValue, stanceSlotNames, tokenPx };

package/dist/index.js

@@ -1,8 +1,12 @@
-import { weaselTheme } from './chunk-7FYXA7TA.js';
-export { BAKED_THEMES, THEMES, THEME_SOURCES, applyTheme, colorAt, colorCount, colorCssAt, defineTheme, isColorModePreference, rampSteps, themeTones, weaselTheme } from './chunk-7FYXA7TA.js';
+export { TONE_REF, applyTheme, colorAt, colorCount, colorCssAt, colorSourceCss, colorSourceLiteral, isColorModePreference, rampSteps, resolveCurrentColor, themeTones } from './chunk-3NIEJ77B.js';
 import { AXES_EXT, overrideKey, ALPHA_EXT } from './chunk-Z675UQ26.js';
-import { atAlpha, withAlpha, themeAxes, mergeAxes } from './chunk-NUILKH2Z.js';
-export { enumerateSelections, fullSelection, isByAxis, parseTokenValue, resolveTheme, selectionKey, serializeTokenValue, themeAxes } from './chunk-NUILKH2Z.js';
+import { themeAxes } from './chunk-2PY2YTDY.js';
+export { parseTokenValue, resolveTheme, serializeTokenValue, themeAxes } from './chunk-2PY2YTDY.js';
+import { weaselTheme } from './chunk-JX2OC444.js';
+export { BAKED_THEMES, THEMES, THEME_SOURCES, defineTheme, weaselTheme } from './chunk-JX2OC444.js';
+import { mergeAxes } from './chunk-P5F3GZV6.js';
+export { enumerateSelections, fullSelection, isByAxis, selectionKey } from './chunk-P5F3GZV6.js';
+import { isPlainObject } from '@weasel-js/registry';
 
 // src/generated/manifest.ts
 var TOKEN_MANIFEST = [
@@ -61,6 +65,7 @@ var TOKEN_MANIFEST = [
   { name: "--wzl-secondary-fg", type: "color", group: "secondary", defaultValue: "#dc9d15", description: "Secondary accent for foreground use: a second voice beside the accent, such as a value the panel derived rather than one the user set. Picked from the ramp so it clears 4.5:1 on the surface in both modes.", hook: false },
   { name: "--wzl-fg-inverse", type: "color", group: "fg", defaultValue: "#0e0f12", description: "Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive.", hook: false },
   { name: "--wzl-shadow", type: "color", group: "shadow", defaultValue: "rgba(0, 0, 0, 0.6)", description: "Elevation. Always darker than any surface \u2014 never derived from fg, which is near-white on dark.", hook: false },
+  { name: "--wzl-scrim", type: "color", group: "scrim", defaultValue: "rgba(0, 0, 0, 0.4)", description: "What a modal dims the page behind it with.", hook: false },
   { name: "--wzl-code-keyword", type: "color", group: "code", defaultValue: "#955cf9", description: "Keywords in highlighted code.", hook: false },
   { name: "--wzl-code-string", type: "color", group: "code", defaultValue: "#48e628", description: "String literals in highlighted code.", hook: false },
   { name: "--wzl-code-number", type: "color", group: "code", defaultValue: "#e69628", description: "Numbers in highlighted code.", hook: false },
@@ -113,6 +118,7 @@ var TOKEN_MANIFEST = [
   { name: "--wzl-line-subtle", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Barely-there separators (table rows).", hook: false },
   { name: "--wzl-line", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.2)", description: "Primary gridlines on sunken surfaces.", hook: false },
   { name: "--wzl-line-strong", type: "color", group: "line", defaultValue: "rgba(230, 231, 233, 0.4)", description: "Axes and emphasized dividers.", hook: false },
+  { name: "--wzl-border-on-sunken", type: "color", group: "border", defaultValue: "rgba(230, 231, 233, 0.12)", description: "The edge of a box filled with surface-sunken. Stepped from the text color, because light mode's border is the sunken fill's own gray.", hook: false },
   { name: "--wzl-curve-color", type: "color", group: "curve", defaultValue: "#8c94ee", description: "Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces.", hook: false },
   { name: "--wzl-accent", type: "color", group: "accent", defaultValue: "#5b63c9", description: "", hook: false },
   { name: "--wzl-accent-hover", type: "color", group: "accent", defaultValue: "#8c94ee", description: "", hook: false },
@@ -140,25 +146,32 @@ var TOKEN_MANIFEST = [
   { name: "--wzl-slider-thumb-size", type: "dimension", group: "slider", defaultValue: "8px", description: "Diameter of a linear range thumb.", hook: false },
   { name: "--wzl-slider-track-slop", type: "dimension", group: "slider", defaultValue: "6px", description: "How far past a range track's edge a press still lands on it. Invisible, and overlaps whatever sits beside the track rather than taking layout space.", hook: false },
   { name: "--wzl-slider-thumb-slop", type: "dimension", group: "slider", defaultValue: "6px", description: "How far past a range thumb's edge a press still grabs the thumb rather than landing on the track. Sits over the track's own slop.", hook: false },
-  { name: "--wzl-slider-track-mix", type: "dimension", group: "slider", defaultValue: "18%", description: "Accent proportion in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property.", hook: false },
-  { name: "--wzl-slider-thumb-mix", type: "dimension", group: "slider", defaultValue: "70%", description: "Accent proportion in a range thumb, as a color-mix percentage \u2014 not a color.", hook: false },
+  { name: "--wzl-slider-track-mix", type: "dimension", group: "slider", defaultValue: "40%", description: "Proportion of accent-fg in a range track, as a color-mix percentage \u2014 not a color. Mixed into a real property, never into another custom property. Higher in dark mode, where a light tint of the accent sinks into the surface.", hook: false },
+  { name: "--wzl-slider-thumb-mix", type: "dimension", group: "slider", defaultValue: "100%", description: "Proportion of accent-fg in a range thumb, as a color-mix percentage \u2014 not a color. Solid in dark mode.", hook: false },
   { name: "--wzl-handle-size", type: "dimension", group: "handle", defaultValue: "9px", description: "Edge of a draggable handle on a plot or timeline \u2014 a keyframe diamond, a timeline key, an event mark. The default rank; -sm and -lg are the two deliberate departures from it.", hook: false },
   { name: "--wzl-handle-size-sm", type: "dimension", group: "handle", defaultValue: "7px", description: "A handle that is drawn but not draggable \u2014 a locked or pinned point. Smaller so it reads as inert next to a live one.", hook: false },
   { name: "--wzl-handle-size-lg", type: "dimension", group: "handle", defaultValue: "10px", description: "A handle that is a category of its own rather than one of a row \u2014 a curve's endpoint. Larger so it separates from the handles it sits in line with.", hook: false },
+  { name: "--wzl-handle-dot-size", type: "dimension", group: "handle", defaultValue: "8px", description: "Diameter of a round handle \u2014 a plain anchor on a curve. Its own rank beside handle-size, because a circle and a diamond of one edge do not read as one size.", hook: false },
+  { name: "--wzl-handle-dot-size-sm", type: "dimension", group: "handle", defaultValue: "7px", description: "A round handle that belongs to another point \u2014 a bezier control handle at the end of its stem.", hook: false },
   { name: "--wzl-checker-a", type: "color", group: "checker", defaultValue: "#25272c", description: "One square of the transparency checker drawn under a paint that is empty, mixed or translucent. Paint it as repeating-conic-gradient(var(--wzl-checker-a) 0% 25%, var(--wzl-checker-b) 0% 50%) 50% / var(--wzl-checker-size) var(--wzl-checker-size).", hook: false },
   { name: "--wzl-checker-b", type: "color", group: "checker", defaultValue: "#181a1e", description: "The other square of the transparency checker.", hook: false },
   { name: "--wzl-checker-size", type: "dimension", group: "checker", defaultValue: "8px", description: "Edge of one repeat of the transparency checker: two squares by two.", hook: false },
   { name: "--wzl-workspace-surface", type: "color", group: "workspace", defaultValue: "#0e0f12", description: "Ground of a canvas app's workspace \u2014 the area around the document page.", hook: false },
   { name: "--wzl-workspace-line", type: "color", group: "workspace", defaultValue: "rgba(230, 231, 233, 0.1)", description: "Marks drawn over workspace-surface, such as its diagonal stripes, so the page reads as the thing on top.", hook: false },
   { name: "--wzl-field-pad-x", type: "dimension", group: "field", defaultValue: "8px", description: "Horizontal padding inside a boxed field. Pairs with --wzl-field-h, which is a container override and has no :root default.", hook: false },
+  { name: "--wzl-gloss", type: "number", group: "gloss", defaultValue: "0", description: "How much glass a boxed button and a selected segment wear, from 0 to 1: at 0 a flat fill, at 1 the full ramp, specular gloss, rim, and drop shadow.", hook: false },
   { name: "--wzl-glass-blur", type: "dimension", group: "glass", defaultValue: "3px", description: "Backdrop blur radius for frosted surfaces. Pairs with glass-tint.", hook: false },
   { name: "--wzl-font-size", type: "dimension", group: "font", defaultValue: "15px", description: "Controls and body text.", hook: false },
   { name: "--wzl-tracking-none", type: "dimension", group: "tracking", defaultValue: "0", description: "", hook: false },
   { name: "--wzl-tracking-wide", type: "dimension", group: "tracking", defaultValue: "0.06em", description: "Uppercase section headings.", hook: false },
   { name: "--wzl-tracking-wider", type: "dimension", group: "tracking", defaultValue: "0.08em", description: "Uppercase at 11px and below.", hook: false },
-  { name: "--wzl-z-toolbar", type: "number", group: "z", defaultValue: "10", description: "", hook: false },
-  { name: "--wzl-z-overlay", type: "number", group: "z", defaultValue: "20", description: "", hook: false },
-  { name: "--wzl-z-modal", type: "number", group: "z", defaultValue: "30", description: "", hook: false },
+  { name: "--wzl-z-toolbar", type: "number", group: "z", defaultValue: "10", description: "Chrome pinned over a workspace.", hook: false },
+  { name: "--wzl-z-overlay", type: "number", group: "z", defaultValue: "20", description: "A panel or readout floating over the chrome.", hook: false },
+  { name: "--wzl-z-hud", type: "number", group: "z", defaultValue: "900", description: "Debug readouts, over the app and under anything modal.", hook: false },
+  { name: "--wzl-z-modal", type: "number", group: "z", defaultValue: "1000", description: "A dialog or lightbox and its scrim.", hook: false },
+  { name: "--wzl-z-toast", type: "number", group: "z", defaultValue: "1100", description: "Toasts, which stay readable over a dialog.", hook: false },
+  { name: "--wzl-z-popover", type: "number", group: "z", defaultValue: "1200", description: "Tooltips and callouts, which a dialog or a toast can open.", hook: false },
+  { name: "--wzl-z-drag", type: "number", group: "z", defaultValue: "10000", description: "A drag ghost, over everything it can be dragged across.", hook: false },
   { name: "--wzl-leading-tight", type: "number", group: "leading", defaultValue: "1", description: "Single-line controls; the box sets the height.", hook: false },
   { name: "--wzl-leading-snug", type: "number", group: "leading", defaultValue: "1.2", description: "Headings and two-line labels.", hook: false },
   { name: "--wzl-leading", type: "number", group: "leading", defaultValue: "1.4", description: "Body and anything that wraps.", hook: false },
@@ -182,19 +195,39 @@ var TOKEN_MANIFEST = [
   { name: "--wzl-space-sm", type: "dimension", group: "space", defaultValue: "8px", description: "Alias for space-4. The t-shirt names name every other rung of the ladder.", hook: false },
   { name: "--wzl-space-md", type: "dimension", group: "space", defaultValue: "12px", description: "Alias for space-6. The t-shirt names name every other rung of the ladder.", hook: false },
   { name: "--wzl-space-lg", type: "dimension", group: "space", defaultValue: "16px", description: "Alias for space-8. The t-shirt names name every other rung of the ladder.", hook: false },
+  { name: "--wzl-bevel-pressed", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a Button held down, or of a Button or a toolbar\u2019s button that stays down. Unset, a Button draws its own inset (--btn-relief-pressed) and a toolbar\u2019s button none.", hook: true },
+  { name: "--wzl-bevel-raised", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a raised face: a Button, a PropertyPanel, a menu, popover, tooltip, or Dialog, a thumb, the chosen segment of a segmented control, a toolbar\u2019s strip, and every edge of a tab but the one its panel is on. A theme that draws its edges in relief declares it; unset, each keeps the shadow it draws for itself, which for most is none.", hook: true },
+  { name: "--wzl-bevel-sunken", type: "shadow", group: "bevel", defaultValue: "none", description: "Box shadow of a well: the frame a field draws its value in, a checkbox, a radio, the track of a switch, a slider, or a segmented control, and a cell of a flat one.", hook: true },
+  { name: "--wzl-button-gloss", type: "number", group: "button", defaultValue: "1", description: "Opacity of the specular sheen over a Button\u2019s upper half. 0 for a flat face.", hook: true },
+  { name: "--wzl-button-pressed-surface", type: "color", group: "button", defaultValue: "var(--btn-glass-pressed)", description: "Background of a secondary Button while it is held down.", hook: true },
+  { name: "--wzl-button-primary-bevel", type: "shadow", group: "button", defaultValue: "var(--wzl-bevel-raised)", description: "Box shadow of a primary Button, where it differs from --wzl-bevel-raised: the heavier frame of a default button.", hook: true },
+  { name: "--wzl-button-primary-fg", type: "color", group: "button", defaultValue: "var(--wzl-fg-on-accent)", description: "Text color of a primary Button, for a theme whose --wzl-button-primary-surface is not an accent fill.", hook: true },
+  { name: "--wzl-button-primary-pressed-surface", type: "color", group: "button", defaultValue: "var(--btn-glass-pressed)", description: "Background of a primary Button while it is held down.", hook: true },
+  { name: "--wzl-button-primary-surface", type: "color", group: "button", defaultValue: "var(--btn-glass)", description: "Background of a primary Button. Unset, glass tinted with --wzl-accent.", hook: true },
+  { name: "--wzl-button-radius", type: "dimension", group: "button", defaultValue: "calc(var(--btn-height) * 0.1)", description: "Corner radius of a Button. Unset, a tenth of its height.", hook: true },
+  { name: "--wzl-button-surface", type: "color", group: "button", defaultValue: "var(--btn-glass)", description: "Background of a secondary Button. Unset, neutral glass mixed from the surfaces.", hook: true },
+  { name: "--wzl-button-text-shadow", type: "shadow", group: "button", defaultValue: "var(--btn-engraving)", description: "Text shadow of a primary or secondary Button\u2019s label. Unset, an engraving stamp under the glyphs in dark mode.", hook: true },
   { name: "--wzl-detail-figure-min-width", type: "dimension", group: "detail", defaultValue: "8ch", description: 'Least width of a value cell in a `values="figures"` DetailList.', hook: true },
+  { name: "--wzl-dialog-max-width", type: "dimension", group: "dialog", defaultValue: "900px", description: "Widest a Dialog grows, modal or inline, before its contents wrap or scroll.", hook: true },
   { name: "--wzl-disclosure-fill", type: "color", group: "disclosure", defaultValue: "var(--wzl-accent-fg)", description: "Fill of a Disclosure\u2019s fold mark.", hook: true },
   { name: "--wzl-disclosure-gap", type: "dimension", group: "disclosure", defaultValue: "4px", description: "Gap between a Disclosure\u2019s twisty and its label.", hook: true },
   { name: "--wzl-disclosure-target", type: "dimension", group: "disclosure", defaultValue: "20px", description: "Hit-target square of a Disclosure twisty, and the twisty column of a LayerList row.", hook: true },
+  { name: "--wzl-field-border", type: "border", group: "field", defaultValue: "1px solid var(--wzl-border)", description: "Border of a field\u2019s frame. A theme whose --wzl-bevel-sunken draws the edge sets it to a border of no width.", hook: true },
+  { name: "--wzl-field-focus-shadow", type: "shadow", group: "field", defaultValue: "0 0 0 1px var(--wzl-focus-ring)", description: "Box shadow of a field\u2019s frame while it holds focus. It replaces --wzl-bevel-sunken there, so a beveled theme restates the bevel in it.", hook: true },
   { name: "--wzl-input-surface", type: "color", group: "input", defaultValue: "var(--wzl-surface-sunken)", description: "Surface a field\u2019s frame sits on \u2014 Input, NumberField, ComboBox, Select, MenuButton, ListEditor and the property rows. Set it on any container whose own background is the default \u2014 a sunken rail or panel \u2014 where an unset field is the same color as what is behind it.", hook: true },
   { name: "--wzl-number-field-width", type: "dimension", group: "number", defaultValue: "9ch", description: "Width of a NumberField\u2019s input.", hook: true },
   { name: "--wzl-params-label-align", type: "string", group: "params", defaultValue: "start", description: "Text alignment of row labels in PropertyPanel, Prefs and labkit\u2019s ControlPanel.", hook: true },
   { name: "--wzl-params-label-case", type: "string", group: "params", defaultValue: "uppercase", description: "text-transform of every label and title in PropertyPanel, Prefs and labkit\u2019s ControlPanel.", hook: true },
   { name: "--wzl-params-label-tracking", type: "dimension", group: "params", defaultValue: "var(--wzl-tracking-wide)", description: "Letter spacing of every label and title in PropertyPanel, Prefs and labkit\u2019s ControlPanel. Unset, rows take --wzl-tracking-wide and titles --wzl-tracking-wider.", hook: true },
   { name: "--wzl-params-label-width", type: "dimension", group: "params", defaultValue: "auto", description: "Inline size of row labels in PropertyPanel, Prefs and labkit\u2019s ControlPanel.", hook: true },
+  { name: "--wzl-prefs-across-gap", type: "dimension", group: "prefs", defaultValue: "28px", description: "Gap between the two columns of rows a PrefsForm pane sets side by side.", hook: true },
   { name: "--wzl-prefs-column-width", type: "dimension", group: "prefs", defaultValue: "300px", description: "Width of the Prefs category column.", hook: true },
+  { name: "--wzl-prefs-control-min", type: "dimension", group: "prefs", defaultValue: "80px", description: "Narrowest a PrefsForm row\u2019s control gets in a two-across pane before the row wraps it under its label.", hook: true },
   { name: "--wzl-prefs-rail-width", type: "dimension", group: "prefs", defaultValue: "216px", description: "Width of the Prefs navigation rail.", hook: true },
+  { name: "--wzl-prop-columns", type: "string", group: "prop", defaultValue: "1fr 1fr", description: "Column tracks of a Properties list, group body, and subpanel. A container too narrow for two columns sets `minmax(0, 1fr)` to stack every row.", hook: true },
   { name: "--wzl-prop-number-width", type: "dimension", group: "prop", defaultValue: "9ch", description: "Width of a numeric field in the Properties panel.", hook: true },
+  { name: "--wzl-prop-panel-actions-align", type: "string", group: "prop", defaultValue: "center", description: "How a PropertyPanel\u2019s title row lines its actions up with the title: center, or baseline for actions that are text.", hook: true },
+  { name: "--wzl-prop-panel-actions-basis", type: "dimension", group: "prop", defaultValue: "auto", description: "Width a PropertyPanel\u2019s title row gives its actions. Set, it holds that width whatever the actions are.", hook: true },
   { name: "--wzl-prop-row-h", type: "dimension", group: "prop", defaultValue: "20px", description: "Floor under every Properties row, whatever control it holds. Unset, it is the panel\u2019s own field height, so it follows density \u2014 20px at the default one.", hook: true },
   { name: "--wzl-prop-text-width", type: "dimension", group: "prop", defaultValue: "16ch", description: "Width of a text field in the Properties panel.", hook: true },
   { name: "--wzl-property-readout-w", type: "dimension", group: "property", defaultValue: "calc(4.5ch + 2px)", description: "Width of a Properties row\u2019s value readout \u2014 four digits, so the controls beside a column of readouts end on one line. A range whose widest value needs more widens its own readout.", hook: true },
@@ -203,7 +236,19 @@ var TOKEN_MANIFEST = [
   { name: "--wzl-swatch-size", type: "dimension", group: "swatch", defaultValue: "28px", description: "Minimum cell of a swatch grid \u2014 PatternPicker, and any panel laying swatches out the same way.", hook: true },
   { name: "--wzl-timeline-label-w", type: "dimension", group: "timeline", defaultValue: "120px", description: "Width of the Timeline\u2019s track-label gutter.", hook: true },
   { name: "--wzl-timeline-value-axis-w", type: "dimension", group: "timeline", defaultValue: "32px", description: "Width reserved for the Timeline\u2019s value axis.", hook: true },
-  { name: "--wzl-tree-indent", type: "dimension", group: "tree", defaultValue: "calc(var(--wzl-control-h-xs) + var(--wzl-space-2))", description: "Indent of each Tree level. Unset, it is one twisty and one gap, so a child\u2019s twisty sits under its parent\u2019s label.", hook: true }
+  { name: "--wzl-titlebar-align", type: "string", group: "titlebar", defaultValue: "start", description: "Text alignment of a `titlebar` frame\u2019s title along its strip.", hook: true },
+  { name: "--wzl-titlebar-border", type: "border", group: "titlebar", defaultValue: "1px solid var(--_edge)", description: "Border of a `titlebar` frame. A theme whose --wzl-bevel-raised draws the edge sets it to a border of no width.", hook: true },
+  { name: "--wzl-titlebar-fg", type: "color", group: "titlebar", defaultValue: "var(--_edge-ink)", description: "Text color on a `titlebar` frame\u2019s strip. Unset, black or white, whichever reads on the edge color.", hook: true },
+  { name: "--wzl-titlebar-inset", type: "dimension", group: "titlebar", defaultValue: "0", description: "Padding between a `titlebar` frame\u2019s edge and its strip and body: the width of the bevel a theme draws there.", hook: true },
+  { name: "--wzl-titlebar-label-pad", type: "dimension", group: "titlebar", defaultValue: "0", description: "Inline padding of the patch --wzl-titlebar-label-surface paints behind a `titlebar` frame\u2019s title.", hook: true },
+  { name: "--wzl-titlebar-label-surface", type: "color", group: "titlebar", defaultValue: "transparent", description: "Background behind a `titlebar` frame\u2019s title alone, for a strip drawn in stripes that must not run through the letters.", hook: true },
+  { name: "--wzl-titlebar-surface", type: "color", group: "titlebar", defaultValue: "var(--_edge)", description: "Background of the strip a `titlebar` frame carries its title in: a color, a gradient, or stripes. Unset, the frame\u2019s edge color. A frame that names a tone paints the tone instead.", hook: true },
+  { name: "--wzl-titlebar-weight", type: "fontWeight", group: "titlebar", defaultValue: "var(--wzl-font-weight-bold)", description: "Font weight of a `titlebar` frame\u2019s title.", hook: true },
+  { name: "--wzl-tree-fold-size", type: "dimension", group: "tree", defaultValue: "16px", description: "Size of the leading glyph a Tree folds a branch by, where its branches fold by their glyphs.", hook: true },
+  { name: "--wzl-tree-font-size", type: "dimension", group: "tree", defaultValue: "var(--wzl-font-size-sm)", description: "Size of a Tree row\u2019s text.", hook: true },
+  { name: "--wzl-tree-guide", type: "color", group: "tree", defaultValue: "var(--wzl-fg-subtle)", description: "Color of the bracket a Tree draws down a branch.", hook: true },
+  { name: "--wzl-tree-indent", type: "dimension", group: "tree", defaultValue: "calc(var(--wzl-control-h-xs) + var(--wzl-space-2))", description: "Indent of each Tree level. Unset, it is one twisty and one gap, so a child\u2019s twisty sits under its parent\u2019s label.", hook: true },
+  { name: "--wzl-tree-leaf-indent", type: "dimension", group: "tree", defaultValue: "0", description: "How far in from its branches' glyphs a Tree with guides sets a row that folds nothing.", hook: true }
 ];
 
 // src/tokenPx.ts
@@ -215,22 +260,6 @@ function tokenPx(name, resolved) {
   return Number(m[1]);
 }
 
-// src/currentColor.ts
-var NUMBER = String.raw`(\d*\.?\d+)(%?)`;
-var RELATIVE = new RegExp(String.raw`^rgb\(\s*from\s+currentcolor\s+r\s+g\s+b\s*/\s*${NUMBER}\s*\)$`, "i");
-var MIX = new RegExp(String.raw`^color-mix\(\s*in\s+[\w-]+\s*,\s*currentcolor\s+${NUMBER}\s*,\s*transparent\s*\)$`, "i");
-var fraction = (n, pct) => Number(n) / (pct ? 100 : 1);
-function resolveCurrentColor(value, current) {
-  const v = value.trim();
-  if (!/currentcolor/i.test(v)) return value;
-  if (/^currentcolor$/i.test(v)) return current;
-  const rel = RELATIVE.exec(v);
-  if (rel) return atAlpha(current, fraction(rel[1], rel[2]));
-  const mix = MIX.exec(v);
-  if (mix && mix[2] === "%") return withAlpha(current, fraction(mix[1], mix[2]));
-  throw new Error(`resolveCurrentColor: cannot flatten "${value}"`);
-}
-
 // src/dtcg/flatten.ts
 var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
 function flattenTokens(doc) {
@@ -264,7 +293,7 @@ function flattenTokens(doc) {
 }
 
 // src/loadDTCG.ts
-var isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isRecord = isPlainObject;
 function readLayer(src) {
   const modes = isRecord(src.modes) ? src.modes : {};
   return {
@@ -380,6 +409,6 @@ function resolveStanceSlots(tokens, base, { stance, nested, stanced } = {}) {
   return out;
 }
 
-export { STANCES, STANCE_SLOTS, TOKEN_MANIFEST, loadDTCG, resolveCurrentColor, resolveStanceSlots, stanceSlotNames, tokenPx };
+export { STANCES, STANCE_SLOTS, TOKEN_MANIFEST, loadDTCG, resolveStanceSlots, stanceSlotNames, tokenPx };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map