npm - @wildo-ai/saas-frontend-lib - Versions diffs - 1.1.5 → 1.1.6 - Mend

@wildo-ai/saas-frontend-lib 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (777) hide show

package/dist/esm/core/ui/color-conversion.utils.d.ts CHANGED Viewed

@@ -66,6 +66,26 @@ export declare function parseCssColorToRgb(value: string): RgbColor | null;
  * {@link parseCssColorToRgb} returns `null`, so the common notations never pay for a layout read.
  */
 export declare function resolveCssColorViaDom(value: string): RgbColor | null;
+/**
+ * The browser's COMPUTED form of a CSS colour, as a string — `var()` references resolved against the
+ * document's custom properties and `color-mix()` evaluated — or `null` for a value the browser rejects.
+ *
+ * {@link resolveCssColorViaDom} narrows this to straight sRGB channels, which drops anything the browser
+ * serialises in another space: a computed `oklch(...)`, an `oklab(...)` from `color-mix(in oklab, …)`,
+ * a `color(srgb …)`. A caller that can read those spaces (the optional 3D frame's token resolver, which
+ * parses them with `culori`) takes the string instead, so there is one DOM probe rather than two.
+ *
+ * Browser-only by construction, like the function above: it reads a computed style, against whatever
+ * custom properties the document holds at the moment of the call.
+ *
+ * A `var()` naming a custom property the document does not define is accepted when it is SET (a `var()` is
+ * only checked at computed-value time) and then makes `color` fall back to the INHERITED colour — so a naive
+ * read would answer the parent's text colour for a reference that resolves to nothing. The probe is therefore
+ * read under two different parent colours: a value that resolves reads the same under both, a value that
+ * inherited does not, and the second answers `null`. The same holds for `currentcolor`, which names no colour
+ * of its own.
+ */
+export declare function readComputedCssColorViaDom(value: string): string | null;
 /**
  * Convert sRGB channels to the HSV model the picking surface is drawn in.
  *

package/dist/esm/core/ui/color-conversion.utils.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-conversion.utils.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/color-conversion.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;;;;;;;;GAWG;AACH,oBAAY,aAAa;IACvB,iGAAiG;IACjG,GAAG,QAAQ;IACX,wEAAwE;IACxE,GAAG,QAAQ;IACX,2FAA2F;IAC3F,GAAG,QAAQ;CACZ;AAED,0CAA0C;AAC1C,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;;;;GAMG;AACH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAWD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAyCjE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,~~CAiBpE~~;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAoBxD;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAED,+CAA+C;AAC/C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,CAsBlE;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAItD;AAED,0DAA0D;AAC1D,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CA2BlF;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CAElF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAM/D"}
1	+ {"version":3,"file":"color-conversion.utils.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/color-conversion.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;;;;;;;;GAWG;AACH,oBAAY,aAAa;IACvB,iGAAiG;IACjG,GAAG,QAAQ;IACX,wEAAwE;IACxE,GAAG,QAAQ;IACX,2FAA2F;IAC3F,GAAG,QAAQ;CACZ;AAED,0CAA0C;AAC1C,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED;;;;;;GAMG;AACH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAWD;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAyCjE;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,CAGpE;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAyBvE;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAoBxD;AAED,oEAAoE;AACpE,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAsBxD;AAED,+CAA+C;AAC/C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,CAsBlE;AAED,oDAAoD;AACpD,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAItD;AAED,0DAA0D;AAC1D,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CA2BlF;AAED,oFAAoF;AACpF,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CAElF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,CAM/D"}

package/dist/esm/core/ui/color-conversion.utils.js CHANGED Viewed

@@ -95,6 +95,29 @@ export function parseCssColorToRgb(value) {
  * {@link parseCssColorToRgb} returns `null`, so the common notations never pay for a layout read.
  */
 export function resolveCssColorViaDom(value) {
+    const computed = readComputedCssColorViaDom(value);
+    return computed === null ? null : parseCssColorToRgb(computed);
+}
+/**
+ * The browser's COMPUTED form of a CSS colour, as a string — `var()` references resolved against the
+ * document's custom properties and `color-mix()` evaluated — or `null` for a value the browser rejects.
+ *
+ * {@link resolveCssColorViaDom} narrows this to straight sRGB channels, which drops anything the browser
+ * serialises in another space: a computed `oklch(...)`, an `oklab(...)` from `color-mix(in oklab, …)`,
+ * a `color(srgb …)`. A caller that can read those spaces (the optional 3D frame's token resolver, which
+ * parses them with `culori`) takes the string instead, so there is one DOM probe rather than two.
+ *
+ * Browser-only by construction, like the function above: it reads a computed style, against whatever
+ * custom properties the document holds at the moment of the call.
+ *
+ * A `var()` naming a custom property the document does not define is accepted when it is SET (a `var()` is
+ * only checked at computed-value time) and then makes `color` fall back to the INHERITED colour — so a naive
+ * read would answer the parent's text colour for a reference that resolves to nothing. The probe is therefore
+ * read under two different parent colours: a value that resolves reads the same under both, a value that
+ * inherited does not, and the second answers `null`. The same holds for `currentcolor`, which names no colour
+ * of its own.
+ */
+export function readComputedCssColorViaDom(value) {
     const trimmed = value.trim();
     if (trimmed.length === 0)
         return null;
@@ -105,11 +128,22 @@ export function resolveCssColorViaDom(value) {
     probe.style.color = trimmed;
     if (probe.style.color === '')
         return null;
-    probe.style.display = 'none';
-    document.body.appendChild(probe);
-    const computed = window.getComputedStyle(probe).color;
-    document.body.removeChild(probe);
-    return parseCssColorToRgb(computed);
+    const parent = document.createElement('span');
+    parent.style.display = 'none';
+    parent.appendChild(probe);
+    document.body.appendChild(parent);
+    try {
+        parent.style.color = 'rgb(1, 2, 3)';
+        const underFirst = window.getComputedStyle(probe).color;
+        parent.style.color = 'rgb(4, 5, 6)';
+        const underSecond = window.getComputedStyle(probe).color;
+        if (underFirst !== underSecond)
+            return null;
+        return underFirst || null;
+    }
+    finally {
+        document.body.removeChild(parent);
+    }
 }
 /**
  * Convert sRGB channels to the HSV model the picking surface is drawn in.

package/dist/esm/core/ui/color-conversion.utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color-conversion.utils.js","sourceRoot":"","sources":["../../../../../src/core/ui/color-conversion.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n Color conversion utilities for the framework's color controls.\n \n These exist because the browser's own colour surfaces (`<input type=\"color\">`, the OS colour\n * dialog) cannot participate in the design system — they carry platform appearance no theme,\n * recipe or surface policy can reach. The framework therefore renders its own picking surface,\n * and a picking surface needs the colour maths the native element was hiding.\n \n Everything here except {@link resolveCssColorViaDom} is pure and side-effect free.\n /\n\n/\n The CSS notation a control emits when the USER PICKS a colour from a picking surface.\n \n This is a closed vocabulary rather than a literal union so each member can carry its meaning,\n * and so schemas, props and comparisons all derive from one runtime source.\n \n NOTE the deliberate absence of alpha-bearing members (`rgba`/`hsla`). The framework's colour\n * field (`ZodTypeForColors`) accepts those notations as authored TEXT, but its hex branch only\n * admits 3- and 6-digit hex — so an 8-digit (alpha) hex would be REJECTED by the very schema the\n * control is bound to. A picking surface that could emit alpha would therefore be able to produce\n * schema-invalid values under the default notation. Adding alpha means widening the schema first.\n /\nexport enum ColorNotation {\n /* `#rrggbb` — the default, and the only notation the field's hex branch round-trips exactly. /\n HEX = 'hex',\n /* `rgb(r, g, b)` — channel-oriented, for authors who reason in RGB. /\n RGB = 'rgb',\n /* `hsl(h, s%, l%)` — the notation whose components a designer can read off the picker. /\n HSL = 'hsl',\n}\n\n/* Straight sRGB channels, each 0–255. /\nexport interface RgbColor {\n r: number\n g: number\n b: number\n}\n\n/\n Hue 0–360, saturation 0–100, value (brightness) 0–100.\n \n HSV — not HSL — is the picking-surface model: its saturation/value plane maps to the familiar\n * rectangle where left→right adds colour and top→bottom removes light, which is what every\n * two-dimensional colour area in the industry draws.\n /\nexport interface HsvColor {\n h: number\n s: number\n v: number\n}\n\nconst HEX_SIX = /^#([0-9a-f]{6})$/i\nconst HEX_THREE = /^#([0-9a-f]{3})$/i\nconst RGB_FUNCTION = /^rgba?\$\\s(\\d{1,3})\\s,\\s(\\d{1,3})\\s,\\s(\\d{1,3})\\s(?:,\\s[\\d.]+\\s)?\$$/i\nconst HSL_FUNCTION = /^hsla?\$\\s(\\d{1,3}(?:\\.\\d+)?)\\s,\\s(\\d{1,3}(?:\\.\\d+)?)%\\s,\\s(\\d{1,3}(?:\\.\\d+)?)%\\s(?:,\\s[\\d.]+\\s)?\$$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\n/\n Parse a CSS colour string into RGB channels, WITHOUT touching the DOM.\n \n Handles the notations the framework's colour schema defines analytically: 3- and 6-digit hex,\n * `rgb()`/`rgba()`, `hsl()`/`hsla()`. Alpha is parsed-and-discarded rather than rejected, so an\n * authored translucent value still positions the picker instead of resetting it.\n \n Returns `null` for anything it cannot read — including CSS named colours, which need the DOM.\n * See {@link resolveCssColorViaDom} for that half.\n /\nexport function parseCssColorToRgb(value: string): RgbColor \| null {\n const trimmed = value.trim()\n if (trimmed.length === 0) return null\n\n const sixDigit = HEX_SIX.exec(trimmed)\n if (sixDigit) {\n const hex = sixDigit[1]\n return {\n r: parseInt(hex.slice(0, 2), 16),\n g: parseInt(hex.slice(2, 4), 16),\n b: parseInt(hex.slice(4, 6), 16),\n }\n }\n\n const threeDigit = HEX_THREE.exec(trimmed)\n if (threeDigit) {\n const [r, g, b] = threeDigit[1].split('')\n return {\n r: parseInt(`${r}${r}`, 16),\n g: parseInt(`${g}${g}`, 16),\n b: parseInt(`${b}${b}`, 16),\n }\n }\n\n const rgbMatch = RGB_FUNCTION.exec(trimmed)\n if (rgbMatch) {\n const channels = [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((channel) => parseInt(channel, 10))\n if (channels.some((channel) => channel > 255)) return null\n return { r: channels[0], g: channels[1], b: channels[2] }\n }\n\n const hslMatch = HSL_FUNCTION.exec(trimmed)\n if (hslMatch) {\n const h = parseFloat(hslMatch[1])\n const s = parseFloat(hslMatch[2])\n const l = parseFloat(hslMatch[3])\n if (h > 360 \|\| s > 100 \|\| l > 100) return null\n return hslToRgb(h, s, l)\n }\n\n return null\n}\n\n/\n Resolve ANY CSS colour the browser understands — notably the named colours (`rebeccapurple`,\n * `tomato`) the framework's schema accepts but no regex should enumerate — by asking the browser\n * to compute it.\n \n Browser-only by construction: it reads a computed style. Call it as a FALLBACK after\n * {@link parseCssColorToRgb} returns `null`, so the common notations never pay for a layout read.\n /\nexport function resolveCssColorViaDom(value: string): RgbColor \| null {\n const trimmed = value.trim()\n if (trimmed.length === 0) return null\n\n const probe = document.createElement('span')\n // A rejected value leaves the property untouched, which is how an invalid colour is detected\n // without maintaining a list of what the browser considers valid.\n probe.style.color = ''\n probe.style.color = trimmed\n if (probe.style.color === '') return null\n\n probe.style.display = 'none'\n document.body.appendChild(probe)\n const computed = window.getComputedStyle(probe).color\n document.body.removeChild(probe)\n\n return parseCssColorToRgb(computed)\n}\n\n/\n Convert sRGB channels to the HSV model the picking surface is drawn in.\n \n Components are returned UNROUNDED on purpose. Rounding here looks harmless — a picker thumb\n * cannot be placed to a hundredth of a percent — but it makes `hsvToRgb(rgbToHsv(x)) !== x`, so\n * every trip through the surface shifts an authored colour by a unit per channel. Rounding is a\n * PRESENTATION concern: round at the point a component is displayed or announced, not here.\n /\nexport function rgbToHsv({ r, g, b }: RgbColor): HsvColor {\n const rn = r / 255\n const gn = g / 255\n const bn = b / 255\n const max = Math.max(rn, gn, bn)\n const min = Math.min(rn, gn, bn)\n const delta = max - min\n\n let h = 0\n if (delta !== 0) {\n if (max === rn) h = ((gn - bn) / delta + (gn < bn ? 6 : 0)) 60\n else if (max === gn) h = ((bn - rn) / delta + 2) * 60\n else h = ((rn - gn) / delta + 4) * 60\n }\n\n return {\n h,\n s: max === 0 ? 0 : (delta / max) * 100,\n v: max * 100,\n }\n}\n\n/** Convert a point on the picking surface back to sRGB channels. /\nexport function hsvToRgb({ h, s, v }: HsvColor): RgbColor {\n const hn = ((h % 360) + 360) % 360\n const sn = clamp(s, 0, 100) / 100\n const vn = clamp(v, 0, 100) / 100\n\n const chroma = vn sn\n const secondary = chroma * (1 - Math.abs(((hn / 60) % 2) - 1))\n const offset = vn - chroma\n\n let rgb: [number, number, number]\n if (hn < 60) rgb = [chroma, secondary, 0]\n else if (hn < 120) rgb = [secondary, chroma, 0]\n else if (hn < 180) rgb = [0, chroma, secondary]\n else if (hn < 240) rgb = [0, secondary, chroma]\n else if (hn < 300) rgb = [secondary, 0, chroma]\n else rgb = [chroma, 0, secondary]\n\n return {\n r: Math.round((rgb[0] + offset) * 255),\n g: Math.round((rgb[1] + offset) * 255),\n b: Math.round((rgb[2] + offset) * 255),\n }\n}\n\n/** Convert HSL components to sRGB channels. /\nexport function hslToRgb(h: number, s: number, l: number): RgbColor {\n const hn = ((h % 360) + 360) % 360\n const sn = clamp(s, 0, 100) / 100\n const ln = clamp(l, 0, 100) / 100\n\n const chroma = (1 - Math.abs(2 ln - 1)) * sn\n const secondary = chroma * (1 - Math.abs(((hn / 60) % 2) - 1))\n const offset = ln - chroma / 2\n\n let rgb: [number, number, number]\n if (hn < 60) rgb = [chroma, secondary, 0]\n else if (hn < 120) rgb = [secondary, chroma, 0]\n else if (hn < 180) rgb = [0, chroma, secondary]\n else if (hn < 240) rgb = [0, secondary, chroma]\n else if (hn < 300) rgb = [secondary, 0, chroma]\n else rgb = [chroma, 0, secondary]\n\n return {\n r: Math.round((rgb[0] + offset) * 255),\n g: Math.round((rgb[1] + offset) * 255),\n b: Math.round((rgb[2] + offset) * 255),\n }\n}\n\n/** Render sRGB channels as `#rrggbb`, lowercase. /\nexport function rgbToHex({ r, g, b }: RgbColor): string {\n const channel = (component: number): string =>\n clamp(Math.round(component), 0, 255).toString(16).padStart(2, '0')\n return `#${channel(r)}${channel(g)}${channel(b)}`\n}\n\n/* Render sRGB channels in the requested CSS notation. /\nexport function formatRgbAsCssColor(rgb: RgbColor, notation: ColorNotation): string {\n if (notation === ColorNotation.RGB) {\n return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`\n }\n\n if (notation === ColorNotation.HSL) {\n const rn = rgb.r / 255\n const gn = rgb.g / 255\n const bn = rgb.b / 255\n const max = Math.max(rn, gn, bn)\n const min = Math.min(rn, gn, bn)\n const delta = max - min\n const l = (max + min) / 2\n\n let h = 0\n let s = 0\n if (delta !== 0) {\n s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min)\n if (max === rn) h = ((gn - bn) / delta + (gn < bn ? 6 : 0)) 60\n else if (max === gn) h = ((bn - rn) / delta + 2) * 60\n else h = ((rn - gn) / delta + 4) * 60\n }\n\n return `hsl(${Math.round(h)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`\n }\n\n return rgbToHex(rgb)\n}\n\n/** Render a point on the picking surface directly in the requested CSS notation. /\nexport function formatHsvAsCssColor(hsv: HsvColor, notation: ColorNotation): string {\n return formatRgbAsCssColor(hsvToRgb(hsv), notation)\n}\n\n/\n Relative luminance per WCAG 2.x, used to decide whether chrome drawn ON a colour (the picking\n * surface thumb, a swatch's selected indicator) should be dark or light. A fixed white indicator\n * disappears against pale yellows; this is what keeps it visible across the whole gamut.\n /\nexport function relativeLuminance({ r, g, b }: RgbColor): number {\n const channel = (component: number): number => {\n const normalized = clamp(component, 0, 255) / 255\n return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4)\n }\n return 0.2126 channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)\n}\n"]}
1	+ {"version":3,"file":"color-conversion.utils.js","sourceRoot":"","sources":["../../../../../src/core/ui/color-conversion.utils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH;;;;;;;;;;;GAWG;AACH,MAAM,CAAN,IAAY,aAOX;AAPD,WAAY,aAAa;IACvB,iGAAiG;IACjG,4BAAW,CAAA;IACX,wEAAwE;IACxE,4BAAW,CAAA;IACX,2FAA2F;IAC3F,4BAAW,CAAA;AACb,CAAC,EAPW,aAAa,KAAb,aAAa,QAOxB;AAsBD,MAAM,OAAO,GAAG,mBAAmB,CAAA;AACnC,MAAM,SAAS,GAAG,mBAAmB,CAAA;AACrC,MAAM,YAAY,GAAG,+EAA+E,CAAA;AACpG,MAAM,YAAY,GAAG,+GAA+G,CAAA;AAEpI,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAA;AAC5C,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAErC,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACtC,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACvB,OAAO;YACL,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;YAChC,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;YAChC,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;SACjC,CAAA;IACH,CAAC;IAED,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC1C,IAAI,UAAU,EAAE,CAAC;QACf,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAA;QACzC,OAAO;YACL,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC;YAC3B,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC;YAC3B,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC;SAC5B,CAAA;IACH,CAAC;IAED,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,QAAQ,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAA;QAChG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,GAAG,GAAG,CAAC;YAAE,OAAO,IAAI,CAAA;QAC1D,OAAO,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3D,CAAC;IAED,MAAM,QAAQ,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC3C,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,MAAM,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,MAAM,CAAC,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG;YAAE,OAAO,IAAI,CAAA;QAC9C,OAAO,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAC1B,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa;IACjD,MAAM,QAAQ,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAA;IAClD,OAAO,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAA;AAChE,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,0BAA0B,CAAC,KAAa;IACtD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAA;IAC5B,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAErC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC5C,6FAA6F;IAC7F,kEAAkE;IAClE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;IACtB,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAA;IAC3B,IAAI,KAAK,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE;QAAE,OAAO,IAAI,CAAA;IAEzC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAC7C,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;IAC7B,MAAM,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IACzB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,IAAI,CAAC;QACH,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAA;QACnC,MAAM,UAAU,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;QACvD,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,cAAc,CAAA;QACnC,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,KAAK,CAAA;QACxD,IAAI,UAAU,KAAK,WAAW;YAAE,OAAO,IAAI,CAAA;QAC3C,OAAO,UAAU,IAAI,IAAI,CAAA;IAC3B,CAAC;YAAS,CAAC;QACT,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;IACnC,CAAC;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAY;IAC5C,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IAClB,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IAClB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAChC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;IAChC,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAA;IAEvB,IAAI,CAAC,GAAG,CAAC,CAAA;IACT,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,IAAI,GAAG,KAAK,EAAE;YAAE,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA;aAC3D,IAAI,GAAG,KAAK,EAAE;YAAE,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;;YAChD,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;IACvC,CAAC;IAED,OAAO;QACL,CAAC;QACD,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG;QACtC,CAAC,EAAE,GAAG,GAAG,GAAG;KACb,CAAA;AACH,CAAC;AAED,oEAAoE;AACpE,MAAM,UAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAY;IAC5C,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IACjC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IAEjC,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,CAAA;IACtB,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IAC9D,MAAM,MAAM,GAAG,EAAE,GAAG,MAAM,CAAA;IAE1B,IAAI,GAA6B,CAAA;IACjC,IAAI,EAAE,GAAG,EAAE;QAAE,GAAG,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;SACpC,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;;QAC1C,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IAEjC,OAAO;QACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;KACvC,CAAA;AACH,CAAC;AAED,+CAA+C;AAC/C,MAAM,UAAU,QAAQ,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS;IACtD,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,GAAG,CAAA;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IACjC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;IAEjC,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA;IAC9C,MAAM,SAAS,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IAC9D,MAAM,MAAM,GAAG,EAAE,GAAG,MAAM,GAAG,CAAC,CAAA;IAE9B,IAAI,GAA6B,CAAA;IACjC,IAAI,EAAE,GAAG,EAAE;QAAE,GAAG,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAA;SACpC,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,CAAA;SAC1C,IAAI,EAAE,GAAG,GAAG;QAAE,GAAG,GAAG,CAAC,SAAS,EAAE,CAAC,EAAE,MAAM,CAAC,CAAA;;QAC1C,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,CAAA;IAEjC,OAAO;QACL,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;QACtC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,GAAG,GAAG,CAAC;KACvC,CAAA;AACH,CAAC;AAED,oDAAoD;AACpD,MAAM,UAAU,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAY;IAC5C,MAAM,OAAO,GAAG,CAAC,SAAiB,EAAU,EAAE,CAC5C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;IACpE,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAA;AACnD,CAAC;AAED,0DAA0D;AAC1D,MAAM,UAAU,mBAAmB,CAAC,GAAa,EAAE,QAAuB;IACxE,IAAI,QAAQ,KAAK,aAAa,CAAC,GAAG,EAAE,CAAC;QACnC,OAAO,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAA;IAChF,CAAC;IAED,IAAI,QAAQ,KAAK,aAAa,CAAC,GAAG,EAAE,CAAC;QACnC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;QACtB,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;QACtB,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAA;QACtB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;QAChC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;QAChC,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,CAAA;QACvB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;QAEzB,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAA;YAC3D,IAAI,GAAG,KAAK,EAAE;gBAAE,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAA;iBAC3D,IAAI,GAAG,KAAK,EAAE;gBAAE,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;;gBAChD,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;QACvC,CAAC;QAED,OAAO,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,CAAC,IAAI,CAAA;IAClF,CAAC;IAED,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAA;AACtB,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,mBAAmB,CAAC,GAAa,EAAE,QAAuB;IACxE,OAAO,mBAAmB,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAA;AACrD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAY;IACrD,MAAM,OAAO,GAAG,CAAC,SAAiB,EAAU,EAAE;QAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,CAAA;QACjD,OAAO,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,UAAU,GAAG,KAAK,CAAC,GAAG,KAAK,EAAE,GAAG,CAAC,CAAA;IACjG,CAAC,CAAA;IACD,OAAO,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;AACxE,CAAC","sourcesContent":["/*\n Color conversion utilities for the framework's color controls.\n \n These exist because the browser's own colour surfaces (`<input type=\"color\">`, the OS colour\n * dialog) cannot participate in the design system — they carry platform appearance no theme,\n * recipe or surface policy can reach. The framework therefore renders its own picking surface,\n * and a picking surface needs the colour maths the native element was hiding.\n \n Everything here except {@link resolveCssColorViaDom} is pure and side-effect free.\n /\n\n/\n The CSS notation a control emits when the USER PICKS a colour from a picking surface.\n \n This is a closed vocabulary rather than a literal union so each member can carry its meaning,\n * and so schemas, props and comparisons all derive from one runtime source.\n \n NOTE the deliberate absence of alpha-bearing members (`rgba`/`hsla`). The framework's colour\n * field (`ZodTypeForColors`) accepts those notations as authored TEXT, but its hex branch only\n * admits 3- and 6-digit hex — so an 8-digit (alpha) hex would be REJECTED by the very schema the\n * control is bound to. A picking surface that could emit alpha would therefore be able to produce\n * schema-invalid values under the default notation. Adding alpha means widening the schema first.\n /\nexport enum ColorNotation {\n /* `#rrggbb` — the default, and the only notation the field's hex branch round-trips exactly. /\n HEX = 'hex',\n /* `rgb(r, g, b)` — channel-oriented, for authors who reason in RGB. /\n RGB = 'rgb',\n /* `hsl(h, s%, l%)` — the notation whose components a designer can read off the picker. /\n HSL = 'hsl',\n}\n\n/* Straight sRGB channels, each 0–255. /\nexport interface RgbColor {\n r: number\n g: number\n b: number\n}\n\n/\n Hue 0–360, saturation 0–100, value (brightness) 0–100.\n \n HSV — not HSL — is the picking-surface model: its saturation/value plane maps to the familiar\n * rectangle where left→right adds colour and top→bottom removes light, which is what every\n * two-dimensional colour area in the industry draws.\n /\nexport interface HsvColor {\n h: number\n s: number\n v: number\n}\n\nconst HEX_SIX = /^#([0-9a-f]{6})$/i\nconst HEX_THREE = /^#([0-9a-f]{3})$/i\nconst RGB_FUNCTION = /^rgba?\$\\s(\\d{1,3})\\s,\\s(\\d{1,3})\\s,\\s(\\d{1,3})\\s(?:,\\s[\\d.]+\\s)?\$$/i\nconst HSL_FUNCTION = /^hsla?\$\\s(\\d{1,3}(?:\\.\\d+)?)\\s,\\s(\\d{1,3}(?:\\.\\d+)?)%\\s,\\s(\\d{1,3}(?:\\.\\d+)?)%\\s(?:,\\s[\\d.]+\\s)?\$$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(max, Math.max(min, value))\n}\n\n/\n Parse a CSS colour string into RGB channels, WITHOUT touching the DOM.\n \n Handles the notations the framework's colour schema defines analytically: 3- and 6-digit hex,\n * `rgb()`/`rgba()`, `hsl()`/`hsla()`. Alpha is parsed-and-discarded rather than rejected, so an\n * authored translucent value still positions the picker instead of resetting it.\n \n Returns `null` for anything it cannot read — including CSS named colours, which need the DOM.\n * See {@link resolveCssColorViaDom} for that half.\n /\nexport function parseCssColorToRgb(value: string): RgbColor \| null {\n const trimmed = value.trim()\n if (trimmed.length === 0) return null\n\n const sixDigit = HEX_SIX.exec(trimmed)\n if (sixDigit) {\n const hex = sixDigit[1]\n return {\n r: parseInt(hex.slice(0, 2), 16),\n g: parseInt(hex.slice(2, 4), 16),\n b: parseInt(hex.slice(4, 6), 16),\n }\n }\n\n const threeDigit = HEX_THREE.exec(trimmed)\n if (threeDigit) {\n const [r, g, b] = threeDigit[1].split('')\n return {\n r: parseInt(`${r}${r}`, 16),\n g: parseInt(`${g}${g}`, 16),\n b: parseInt(`${b}${b}`, 16),\n }\n }\n\n const rgbMatch = RGB_FUNCTION.exec(trimmed)\n if (rgbMatch) {\n const channels = [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((channel) => parseInt(channel, 10))\n if (channels.some((channel) => channel > 255)) return null\n return { r: channels[0], g: channels[1], b: channels[2] }\n }\n\n const hslMatch = HSL_FUNCTION.exec(trimmed)\n if (hslMatch) {\n const h = parseFloat(hslMatch[1])\n const s = parseFloat(hslMatch[2])\n const l = parseFloat(hslMatch[3])\n if (h > 360 \|\| s > 100 \|\| l > 100) return null\n return hslToRgb(h, s, l)\n }\n\n return null\n}\n\n/\n Resolve ANY CSS colour the browser understands — notably the named colours (`rebeccapurple`,\n * `tomato`) the framework's schema accepts but no regex should enumerate — by asking the browser\n * to compute it.\n \n Browser-only by construction: it reads a computed style. Call it as a FALLBACK after\n * {@link parseCssColorToRgb} returns `null`, so the common notations never pay for a layout read.\n /\nexport function resolveCssColorViaDom(value: string): RgbColor \| null {\n const computed = readComputedCssColorViaDom(value)\n return computed === null ? null : parseCssColorToRgb(computed)\n}\n\n/\n The browser's COMPUTED form of a CSS colour, as a string — `var()` references resolved against the\n * document's custom properties and `color-mix()` evaluated — or `null` for a value the browser rejects.\n \n {@link resolveCssColorViaDom} narrows this to straight sRGB channels, which drops anything the browser\n * serialises in another space: a computed `oklch(...)`, an `oklab(...)` from `color-mix(in oklab, …)`,\n * a `color(srgb …)`. A caller that can read those spaces (the optional 3D frame's token resolver, which\n * parses them with `culori`) takes the string instead, so there is one DOM probe rather than two.\n \n Browser-only by construction, like the function above: it reads a computed style, against whatever\n * custom properties the document holds at the moment of the call.\n \n A `var()` naming a custom property the document does not define is accepted when it is SET (a `var()` is\n * only checked at computed-value time) and then makes `color` fall back to the INHERITED colour — so a naive\n * read would answer the parent's text colour for a reference that resolves to nothing. The probe is therefore\n * read under two different parent colours: a value that resolves reads the same under both, a value that\n * inherited does not, and the second answers `null`. The same holds for `currentcolor`, which names no colour\n * of its own.\n /\nexport function readComputedCssColorViaDom(value: string): string \| null {\n const trimmed = value.trim()\n if (trimmed.length === 0) return null\n\n const probe = document.createElement('span')\n // A rejected value leaves the property untouched, which is how an invalid colour is detected\n // without maintaining a list of what the browser considers valid.\n probe.style.color = ''\n probe.style.color = trimmed\n if (probe.style.color === '') return null\n\n const parent = document.createElement('span')\n parent.style.display = 'none'\n parent.appendChild(probe)\n document.body.appendChild(parent)\n try {\n parent.style.color = 'rgb(1, 2, 3)'\n const underFirst = window.getComputedStyle(probe).color\n parent.style.color = 'rgb(4, 5, 6)'\n const underSecond = window.getComputedStyle(probe).color\n if (underFirst !== underSecond) return null\n return underFirst \|\| null\n } finally {\n document.body.removeChild(parent)\n }\n}\n\n/\n Convert sRGB channels to the HSV model the picking surface is drawn in.\n \n Components are returned UNROUNDED on purpose. Rounding here looks harmless — a picker thumb\n * cannot be placed to a hundredth of a percent — but it makes `hsvToRgb(rgbToHsv(x)) !== x`, so\n * every trip through the surface shifts an authored colour by a unit per channel. Rounding is a\n * PRESENTATION concern: round at the point a component is displayed or announced, not here.\n /\nexport function rgbToHsv({ r, g, b }: RgbColor): HsvColor {\n const rn = r / 255\n const gn = g / 255\n const bn = b / 255\n const max = Math.max(rn, gn, bn)\n const min = Math.min(rn, gn, bn)\n const delta = max - min\n\n let h = 0\n if (delta !== 0) {\n if (max === rn) h = ((gn - bn) / delta + (gn < bn ? 6 : 0)) 60\n else if (max === gn) h = ((bn - rn) / delta + 2) * 60\n else h = ((rn - gn) / delta + 4) * 60\n }\n\n return {\n h,\n s: max === 0 ? 0 : (delta / max) * 100,\n v: max * 100,\n }\n}\n\n/** Convert a point on the picking surface back to sRGB channels. /\nexport function hsvToRgb({ h, s, v }: HsvColor): RgbColor {\n const hn = ((h % 360) + 360) % 360\n const sn = clamp(s, 0, 100) / 100\n const vn = clamp(v, 0, 100) / 100\n\n const chroma = vn sn\n const secondary = chroma * (1 - Math.abs(((hn / 60) % 2) - 1))\n const offset = vn - chroma\n\n let rgb: [number, number, number]\n if (hn < 60) rgb = [chroma, secondary, 0]\n else if (hn < 120) rgb = [secondary, chroma, 0]\n else if (hn < 180) rgb = [0, chroma, secondary]\n else if (hn < 240) rgb = [0, secondary, chroma]\n else if (hn < 300) rgb = [secondary, 0, chroma]\n else rgb = [chroma, 0, secondary]\n\n return {\n r: Math.round((rgb[0] + offset) * 255),\n g: Math.round((rgb[1] + offset) * 255),\n b: Math.round((rgb[2] + offset) * 255),\n }\n}\n\n/** Convert HSL components to sRGB channels. /\nexport function hslToRgb(h: number, s: number, l: number): RgbColor {\n const hn = ((h % 360) + 360) % 360\n const sn = clamp(s, 0, 100) / 100\n const ln = clamp(l, 0, 100) / 100\n\n const chroma = (1 - Math.abs(2 ln - 1)) * sn\n const secondary = chroma * (1 - Math.abs(((hn / 60) % 2) - 1))\n const offset = ln - chroma / 2\n\n let rgb: [number, number, number]\n if (hn < 60) rgb = [chroma, secondary, 0]\n else if (hn < 120) rgb = [secondary, chroma, 0]\n else if (hn < 180) rgb = [0, chroma, secondary]\n else if (hn < 240) rgb = [0, secondary, chroma]\n else if (hn < 300) rgb = [secondary, 0, chroma]\n else rgb = [chroma, 0, secondary]\n\n return {\n r: Math.round((rgb[0] + offset) * 255),\n g: Math.round((rgb[1] + offset) * 255),\n b: Math.round((rgb[2] + offset) * 255),\n }\n}\n\n/** Render sRGB channels as `#rrggbb`, lowercase. /\nexport function rgbToHex({ r, g, b }: RgbColor): string {\n const channel = (component: number): string =>\n clamp(Math.round(component), 0, 255).toString(16).padStart(2, '0')\n return `#${channel(r)}${channel(g)}${channel(b)}`\n}\n\n/* Render sRGB channels in the requested CSS notation. /\nexport function formatRgbAsCssColor(rgb: RgbColor, notation: ColorNotation): string {\n if (notation === ColorNotation.RGB) {\n return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`\n }\n\n if (notation === ColorNotation.HSL) {\n const rn = rgb.r / 255\n const gn = rgb.g / 255\n const bn = rgb.b / 255\n const max = Math.max(rn, gn, bn)\n const min = Math.min(rn, gn, bn)\n const delta = max - min\n const l = (max + min) / 2\n\n let h = 0\n let s = 0\n if (delta !== 0) {\n s = l > 0.5 ? delta / (2 - max - min) : delta / (max + min)\n if (max === rn) h = ((gn - bn) / delta + (gn < bn ? 6 : 0)) 60\n else if (max === gn) h = ((bn - rn) / delta + 2) * 60\n else h = ((rn - gn) / delta + 4) * 60\n }\n\n return `hsl(${Math.round(h)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`\n }\n\n return rgbToHex(rgb)\n}\n\n/** Render a point on the picking surface directly in the requested CSS notation. /\nexport function formatHsvAsCssColor(hsv: HsvColor, notation: ColorNotation): string {\n return formatRgbAsCssColor(hsvToRgb(hsv), notation)\n}\n\n/\n Relative luminance per WCAG 2.x, used to decide whether chrome drawn ON a colour (the picking\n * surface thumb, a swatch's selected indicator) should be dark or light. A fixed white indicator\n * disappears against pale yellows; this is what keeps it visible across the whole gamut.\n /\nexport function relativeLuminance({ r, g, b }: RgbColor): number {\n const channel = (component: number): number => {\n const normalized = clamp(component, 0, 255) / 255\n return normalized <= 0.03928 ? normalized / 12.92 : Math.pow((normalized + 0.055) / 1.055, 2.4)\n }\n return 0.2126 channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b)\n}\n"]}

package/dist/esm/core/ui/themes/default.theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default.theme.d.ts","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/default.theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;~~AAstB~~/E,eAAO,MAAM,YAAY,EAAE,mBAqB1B,CAAC"}
1	+ {"version":3,"file":"default.theme.d.ts","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/default.theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AA0uB/E,eAAO,MAAM,YAAY,EAAE,mBAqB1B,CAAC"}

package/dist/esm/core/ui/themes/default.theme.js CHANGED Viewed

@@ -189,8 +189,18 @@ const interactive = {
              * inset RING is `Card`'s reasoning for a selected card: "the ring is what still reads when
              * the card's own fill is close to" its surroundings, which is precisely a segment whose
              * fill is the hover fill.
+             *
+             * Both the fill and the ring are NEUTRAL — an ink wash of `foreground`, never `accent` and
+             * never `ring` (2026-09-25). `ring` is the FOCUS/brand colour, so a chosen toggle wore a
+             * primary outline that read as "focused" or "error-adjacent" rather than "on", on every pill
+             * and segment at once. And `accent` is the HOVER tint: in a theme whose accent sits one
+             * lightness step off the page (Wonder Todos: L 0.929 on 0.984) the chosen state barely
+             * separated from the background it sat on. A translucent `foreground` wash is darker than
+             * the hover tint in every theme by construction, tracks light and dark without a second
+             * token, and keeps `SelectableVariant.FILLED`'s promise that weight — not a brand colour —
+             * carries "you are here".
              */
-            selected: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring",
+            selected: "data-[state=on]:bg-foreground/10 data-[state=on]:text-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-foreground/25 dark:data-[state=on]:bg-foreground/15",
             disabled: interactiveDisabled,
             invalid: interactiveInvalid,
         },
@@ -226,8 +236,18 @@ const interactive = {
              * inset RING is `Card`'s reasoning for a selected card: "the ring is what still reads when
              * the card's own fill is close to" its surroundings, which is precisely a segment whose
              * fill is the hover fill.
+             *
+             * Both the fill and the ring are NEUTRAL — an ink wash of `foreground`, never `accent` and
+             * never `ring` (2026-09-25). `ring` is the FOCUS/brand colour, so a chosen toggle wore a
+             * primary outline that read as "focused" or "error-adjacent" rather than "on", on every pill
+             * and segment at once. And `accent` is the HOVER tint: in a theme whose accent sits one
+             * lightness step off the page (Wonder Todos: L 0.929 on 0.984) the chosen state barely
+             * separated from the background it sat on. A translucent `foreground` wash is darker than
+             * the hover tint in every theme by construction, tracks light and dark without a second
+             * token, and keeps `SelectableVariant.FILLED`'s promise that weight — not a brand colour —
+             * carries "you are here".
              */
-            selected: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring",
+            selected: "data-[state=on]:bg-foreground/10 data-[state=on]:text-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-foreground/25 dark:data-[state=on]:bg-foreground/15",
             highlighted: "focus:bg-accent focus:text-accent-foreground",
             open: "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
             disabled: interactiveDisabled,

package/dist/esm/core/ui/themes/default.theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"default.theme.js","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/default.theme.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentStyleTheme } from '@wildo-ai/presets-components-models';\nimport {\n DividerVariant,\n InteractiveVariant,\n SurfaceVariant,\n FormControlVariant,\n IndicatorVariant,\n SelectableVariant,\n TypographyVariant,\n SKELETON_NEUTRAL_TINT,\n} from '@wildo-ai/presets-components-models';\nimport type { UIBehaviorRecipe } from '@wildo-ai/presets-components-models';\nimport { DEFAULT_CHART_STYLE_PRESET } from '../chart-style-defaults';\n\n// ============================================================\n// Helper\n// ============================================================\n\nfunction recipe(r: Partial<UIBehaviorRecipe> & { base: string }): UIBehaviorRecipe {\n return {\n base: r.base,\n states: r.states ?? {},\n sizes: r.sizes,\n motion: r.motion ?? {},\n gesture: r.gesture,\n policy: r.policy,\n };\n}\n\n// ============================================================\n// Motion constants — reference Level 1 tokens via CSS variables\n//\n// Each behavior targets SPECIFIC properties (no transition-all).\n// Durations and easings come from Level 1 --motion-* tokens.\n// All include motion-reduce for accessibility.\n// ============================================================\n//\n// MOTION PERSONALITY — Default (shadcn / Material-inspired SaaS)\n// Hover/focus : FAST (150ms) + DEFAULT → Material Standard curve.\n// Bidirectional state changes,\n// subtle but present.\n// Overlay enter: NORMAL (250ms) + ENTER → fade + zoom-95 + 2px slide.\n// Pure decelerate.\n// Overlay exit : FAST (150ms) + EXIT → quicker than enter.\n// Backdrop : NORMAL/FAST + ENTER/EXIT → matches overlays.\n// Gestures : NONE — neutral SaaS baseline. CSS-only motion is the\n// contract; theme can be swapped without removing\n// motion.dev wrappers from app code (which any theme\n// may activate via the recipe `gesture` slot).\n//\n// This theme is the reference baseline for the framework. All other\n// themes deviate FROM it intentionally — Glass adds gestures, Editorial\n// stretches durations, Terminal/Trading collapse them, Neo-Brutalist\n// strips easing, Cozy adds gentle springs.\n// ============================================================\n\nconst MOTION = {\n /** Interactive elements: bg, color, border, shadow, transform changes /\n interactive: \"transition-[background-color,color,border-color,box-shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Form controls: border, shadow, color changes on focus/validation /\n formControl: \"transition-[color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Selectable items: bg, color, border on state change /\n selectable: \"transition-[background-color,color,border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Sidebar: width/height collapse /\n sidebarCollapse: \"transition-[width,height,padding] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Enter animation for overlays/surfaces (fade + zoom) /\n enterFadeZoom: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none\",\n\n /* Exit animation for overlays/surfaces /\n exitFadeZoom: \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--motion-duration-fast)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none\",\n\n /* Enter for directional popovers (fade + zoom + slide per side) /\n enterDirectional: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:data-[state=open]:animate-none\",\n\n /* Enter/exit for backdrop overlay (fade only).\n \n Uses explicit ENTER/EXIT easing tokens. Without\n * `ease-[...]`, browsers fall back to the CSS default `ease` curve,\n * silently inheriting a generic curve instead of the theme's ENTER\n * (decelerate) / EXIT (accelerate) personality. Backdrops fade only\n * so the perceptual difference is small, but consistency matters\n * for the \"every motion uses an explicit theme token\" rule. /\n backdropEnter: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none\",\n backdropExit: \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-[var(--motion-duration-fast)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none\",\n};\n\n// ============================================================\n// INTERACTIVE — Buttons, menu items, clickable surfaces\n// ============================================================\n\n// T5 radius ladder: interactive controls sit one clean step under cards —\n// control `rounded-lg` (8) · popover `rounded-lg` (RAISED) · card `rounded-xl` (12).\n// `md`/`icon` inherit the base recipe's `rounded-lg`; the explicit size overrides\n// (xs/sm/lg) mirror it so every size is of-a-piece.\nconst interactiveSizes: Record<string, string> = {\n xs: \"h-7 px-2.5 text-xs gap-1 rounded-lg has-[>svg]:px-2 pointer-coarse:min-h-9\",\n sm: \"h-8 px-3 gap-1.5 rounded-lg has-[>svg]:px-2.5 pointer-coarse:min-h-11\",\n md: \"h-9 px-4 py-2 has-[>svg]:px-3 pointer-coarse:min-h-11\",\n lg: \"h-10 px-6 rounded-lg has-[>svg]:px-4 pointer-coarse:min-h-11\",\n icon: \"size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11\",\n \"icon-sm\": \"size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9\",\n};\n\nconst interactiveDisabled: string = \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:cursor-not-allowed aria-disabled:opacity-[var(--opacity-disabled)]\";\nconst interactiveInvalid: string = \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\";\n\n// ============================================================\n// Focus-ring constants — single source of truth\n// for the keyboard-focus indicators used by INTERACTIVE, FORM_CONTROL,\n// SELECTABLE, and INDICATOR recipes. Shape mirrors the global\n// `.focus-ring-offset` / `.focus-ring-inset` Tailwind utilities exposed\n// in `index.css`; the recipes use raw classes (rather than the @apply\n// utility) because some variants pair the ring with a coloured border.\n// ============================================================\n/* Standard 2px offset ring + matching border-ring (most controls). /\nconst FOCUS_RING_OFFSET_WITH_BORDER: string =\n \"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n/* Standard 2px offset ring with NO border-ring change (filled / accent). /\nconst FOCUS_RING_OFFSET: string =\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n/* Compact 2px ring used by indicator badges and selectable items. /\nconst FOCUS_RING_COMPACT: string =\n \"focus-visible:ring-2 focus-visible:ring-ring\";\n\nconst interactive: Record<InteractiveVariant, UIBehaviorRecipe> = {\n [InteractiveVariant.PRIMARY]: recipe({\n // T2 tactile: a hairline edge (`border-primary/50`) + `shadow-sm` give the\n // button real elevation, and the press (`active:translate-y-px active:shadow-none`)\n // reads as a physical push. `MOTION.interactive` already transitions transform,\n // so the press animates for free.\n base: \"bg-primary text-primary-foreground rounded-lg border border-primary/50 shadow-sm font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-primary/90\",\n active: \"active:bg-primary/80 active:shadow-none active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n /\n * Danger is carried by the EDGE and the GLYPH, never by a fill.\n \n This was `bg-destructive text-destructive-foreground` — a solid red slab — until 2026-09-20, and\n * the fill is what made it wrong for the only places it is used. Every consumer of this variant in\n * the product is an OFFER rather than a commitment: the risky entries of a resource action bar\n * (`riskLevelToVariant` returns DESTRUCTIVE for HIGH/CRITICAL), a file card's remove control, an\n * error display's recovery action, a decision option. A filled button is the loudest thing a page\n * can contain, so an action bar with one or two risky verbs in it read as a page ABOUT deleting,\n * and the surrounding actions — its real content — read as secondary to it.\n \n The distinction this keeps is the one `AppPage_SecuritySettings` already states for its factor\n * rows: a fill asserts \"this is the one thing to do next\", and asserting that of every dangerous\n * verb on a page asserts it of none of them while spending all the emphasis. What a dangerous verb\n * needs is to be TELLABLE APART from its neighbours, which a coloured edge and a coloured glyph do\n * pre-attentively and at two channels rather than one — and it stays legible beside the GHOST\n * siblings that share an action bar with it, which a slab does not.\n \n The LABEL stays `text-foreground`. Red on the border and the icon is the whole signal; tinting\n * the words as well pushes it back toward the emphasis just removed, and a red word next to a red\n * glyph adds no information.\n \n SCOPE — this is the DEFAULT theme's dressing of the semantic role, not a redefinition of the\n * role. `theme.interactive[DESTRUCTIVE]` is \"what this theme does with a dangerous action\", and\n * the alternative themes keep their own answers deliberately: neo-brutalist's slab is its whole\n * idiom, and trading remaps the variant to the SELL button, where a fill is the point. Changing\n * those would impose one theme's taste on design languages chosen for being different.\n \n Menus are unaffected: `DropdownMenuItem` / `ContextMenuItem` read `states.highlighted` only and\n * never `base`, so a destructive menu row keeps its borderless tinted-row treatment.\n /\n [InteractiveVariant.DESTRUCTIVE]: recipe({\n // `:not([class='text-'])` mirrors the menus' convention — an icon that declares its own colour\n // keeps it, so a call site can still override without fighting the recipe.\n base: \"border border-destructive/60 bg-transparent text-foreground rounded-lg font-medium text-sm cursor-pointer [&_svg:not([class='text-'])]:text-destructive\",\n states: {\n hover: \"hover:border-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20\",\n active: \"active:bg-destructive/15 dark:active:bg-destructive/25 active:translate-y-px\",\n // FOCUS_RING_OFFSET, not ..._WITH_BORDER: that constant repaints the border to `ring`, which\n // for every other bordered variant is harmless because their border is decorative. Here the\n // border IS the danger cue, so swapping it out would strip the warning from a keyboard user at\n // the exact moment they are about to press the thing.\n focus: FOCUS_RING_OFFSET,\n highlighted: \"focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.OUTLINE]: recipe({\n /\n * The edge is `border-strong`, in both themes (#1322) — a DESIGN decision, taken from the accepted\n * creation-board proposal: a control's edge is drawn one strength above the hairline that divides\n * content, so a row of buttons reads as controls rather than as boxed text. It is not an\n * accessibility obligation: a button's label already identifies it, and the guidance for\n * non-text contrast says so. The obligation is on the FORM CONTROL recipes below, where the edge\n * is the only cue. `dark:border-input` went with it; it resolved to the hairline's lightness.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"border border-border-strong bg-background shadow-xs rounded-lg font-medium text-sm cursor-pointer dark:bg-input/30\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50 dark:hover:text-foreground\",\n active: \"active:bg-accent/80 active:shadow-none active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n /\n * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented\n * control could not say which segment was chosen while the pointer was anywhere on it —\n * the chosen one and the one under the cursor were the same pixels.\n \n The two additions are both decisions this design system has already taken elsewhere.\n * WEIGHT carries the choice, per `SelectableVariant.FILLED`: \"the selected item is the\n * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint\". And the\n * inset RING is `Card`'s reasoning for a selected card: \"the ring is what still reads when\n * the card's own fill is close to\" its surroundings, which is precisely a segment whose\n * fill is the hover fill.\n /\n selected: \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.SECONDARY]: recipe({\n base: \"bg-secondary text-secondary-foreground rounded-lg font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-secondary/80\",\n active: \"active:bg-secondary/70 active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.GHOST]: recipe({\n base: \"rounded-lg font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n active: \"active:bg-accent/80\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n /\n * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented\n * control could not say which segment was chosen while the pointer was anywhere on it —\n * the chosen one and the one under the cursor were the same pixels.\n \n The two additions are both decisions this design system has already taken elsewhere.\n * WEIGHT carries the choice, per `SelectableVariant.FILLED`: \"the selected item is the\n * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint\". And the\n * inset RING is `Card`'s reasoning for a selected card: \"the ring is what still reads when\n * the card's own fill is close to\" its surroundings, which is precisely a segment whose\n * fill is the hover fill.\n /\n selected: \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-ring\",\n highlighted: \"focus:bg-accent focus:text-accent-foreground\",\n open: \"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.LINK]: recipe({\n base: \"text-primary underline-offset-4 font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:underline\",\n active: \"active:text-primary/80\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: {\n xs: \"h-7 px-2.5 text-xs gap-1 pointer-coarse:min-h-9\",\n sm: \"h-8 px-3 gap-1.5 pointer-coarse:min-h-11\",\n md: \"h-9 px-4 py-2 pointer-coarse:min-h-11\",\n lg: \"h-10 px-6 pointer-coarse:min-h-11\",\n icon: \"size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11\",\n \"icon-sm\": \"size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9\",\n },\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.ACCENT]: recipe({\n // TT-1: Gradient stops resolved from theme tokens\n // (`--accent-gradient-{from,via,to}`) so tenants can rebrand the ACCENT\n // recipe without forking a theme. Defaults preserve the historical\n // violet/blue/pink visual.\n base: 'relative bg-primary text-primary-foreground font-semibold rounded-lg shadow-xs before:absolute before:inset-0 before:rounded-[inherit] before:p-[1px] before:bg-[length:200%_200%] before:bg-gradient-to-r before:from-accent-gradient-from before:via-accent-gradient-via before:to-accent-gradient-to before:animate-[gradient-rotate_3s_ease_infinite] motion-reduce:before:animate-none before:-z-10 before:blur-[2px] shadow-[0_0_15px_color-mix(in_oklch,var(--primary)_20%,transparent)] text-sm cursor-pointer',\n states: {\n hover: 'hover:shadow-[0_0_25px_color-mix(in_oklch,var(--primary)_35%,transparent)]',\n active: 'active:scale-[0.98]',\n focus: FOCUS_RING_OFFSET,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: {\n transition: 'transition-[shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',\n },\n }),\n};\n\n// ============================================================\n// SURFACE — Cards, dialogs, popovers, dropdowns\n// SURFACE PERSONALITY — clean SaaS material hierarchy: cards are bordered\n// elevated panels, tab panels are attached but quiet, shell is chromaless,\n// transient notifications reuse overlay chrome at a smaller scale.\n// ============================================================\n\nconst surface: ComponentStyleTheme['surface'] = {\n [SurfaceVariant.BASE]: recipe({\n // Card / panel — anchor of the surface scale at `rounded-xl`.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-xl border shadow-sm\",\n }),\n\n [SurfaceVariant.CARD]: recipe({\n // Content card — the elevated `surface-raised` fill + border + soft shadow,\n // ALWAYS painted so an explicitly-authored CARD section reads as a card in\n // every context (including inside a dialog/page). Mirrors BASE, the anchor\n // card surface; the section preset adds container padding.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-xl border shadow-sm\",\n }),\n\n [SurfaceVariant.RAISED]: recipe({\n // Popover / dropdown — floats above the page, gets a slightly tighter\n // radius than BASE to feel \"cut from\" the larger card surface (one tier\n // smaller, never two; previously `rounded-md` was visibly inconsistent\n // when popovers stacked next to cards).\n // `fill-surface-overlay` mirrors the background so SVG children that paint\n // via `fill` — notably the Tooltip's Radix arrow — inherit the body colour\n // (CSS `fill` inherits across Radix's arrow wrapper span; `background` does\n // not). Keep `fill-` in lockstep with `bg-` here.\n base: \"bg-surface-overlay fill-surface-overlay text-surface-overlay-foreground rounded-lg border shadow-md\",\n motion: {\n enter: MOTION.enterDirectional,\n exit: MOTION.exitFadeZoom,\n },\n }),\n\n [SurfaceVariant.OVERLAY]: recipe({\n // Dialog / sheet — the heaviest, most modal surface; matches BASE radius\n // so a dialog reads as a \"card the user can act inside\" rather than a\n // smaller-cornered floating panel. Required to restore monotonicity\n // (BASE ≤ OVERLAY) — `rounded-lg` here was visually demoting dialogs.\n // The edge is `border-strong` (#1322): in the dark theme `shadow-lg` is invisible against a dark\n // page, so the border is what separates a modal from what it covers. Popovers and toasts keep\n // `--border` — they are anchored to a trigger, and a heavy edge on every menu reads as noise.\n base: \"bg-surface-overlay text-surface-overlay-foreground rounded-xl border border-border-strong shadow-lg\",\n motion: {\n enter: MOTION.enterFadeZoom,\n exit: MOTION.exitFadeZoom,\n },\n }),\n\n [SurfaceVariant.INSET]: recipe({\n base: \"bg-surface-inset text-surface-inset-foreground\",\n }),\n\n [SurfaceVariant.SUNKEN]: recipe({\n base: \"bg-surface-sunken text-surface-sunken-foreground\",\n }),\n\n [SurfaceVariant.TAB_PANEL]: recipe({\n // Tab panel joins to the tab strip: same visual language as BASE, but no\n // border/shadow so the surface policy can own the join.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-b-xl\",\n }),\n\n [SurfaceVariant.SHELL]: recipe({\n // App/page shell: chromaless raised background. Landmark semantics remain\n // opt-in via policy config.\n base: \"bg-surface-raised text-surface-raised-foreground\",\n }),\n\n [SurfaceVariant.TRANSIENT]: recipe({\n // Toast/snackbar: compact floating card, visually between RAISED and OVERLAY.\n base: \"bg-surface-overlay text-surface-overlay-foreground rounded-lg border shadow-md\",\n motion: {\n enter: MOTION.enterDirectional,\n exit: MOTION.exitFadeZoom,\n },\n }),\n};\n\n// ============================================================\n// FORM_CONTROL — Inputs, textareas, select triggers\n// ============================================================\n\nconst formControl: Record<FormControlVariant, UIBehaviorRecipe> = {\n [FormControlVariant.DEFAULT]: recipe({\n /\n * The edge is `border-strong` (#1322). An empty text input has no content to identify it — its\n * border IS the control — so that border owes 3:1 against the page, and the hairline `--border`\n * gives about 1.5:1 in both themes. The same holds for UNDERLINED's rule and for an unchecked\n * CHECKBOX below. FILLED carries the same edge as its bottom indicator line; see its own recipe.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — \"Where a text-input has a visual indicator to show\n * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio.\"\n * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"border-border-strong dark:bg-surface-inset/30 rounded-lg border bg-transparent shadow-xs text-base md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-3 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-2 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-4 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: MOTION.formControl },\n }),\n\n [FormControlVariant.FILLED]: recipe({\n /\n * A FILL is not an input's indicator: `bg-muted` sits at about 1.3:1 against the page on the\n * default palette, so a filled field with `border-0` was an input nothing marked as one — and\n * its `invalid` state sets a BORDER colour, which a borderless field could not show at all.\n * The filled-field convention answers both: the fill, plus an indicator line along the bottom at\n * the strong edge, with the top corners rounded and the bottom square so the line runs straight.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — \"Where a text-input has a visual indicator to show\n * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio.\"\n * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"bg-muted rounded-t-lg rounded-b-none border-0 border-b border-border-strong text-base md:text-sm placeholder:text-muted-foreground\",\n states: {\n focus: FOCUS_RING_OFFSET,\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-3 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-2 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-4 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: MOTION.formControl },\n }),\n\n [FormControlVariant.UNDERLINED]: recipe({\n base: \"bg-transparent border-0 border-b border-border-strong rounded-none text-base md:text-sm placeholder:text-muted-foreground\",\n states: {\n focus: \"focus-visible:border-ring focus-visible:border-b-2\",\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-0 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-0 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-0 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: \"transition-[border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n\n [FormControlVariant.CHECKBOX]: recipe({\n base: \"border-border-strong dark:bg-input/30 border shadow-xs\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n selected: \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary dark:data-[state=checked]:bg-primary\",\n disabled: \"disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n motion: { transition: \"transition-[color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n\n [FormControlVariant.SWITCH]: recipe({\n base: \"data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 border border-transparent shadow-xs\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n selected: \"data-[state=checked]:bg-primary\",\n disabled: \"disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n motion: { transition: \"transition-[background-color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n};\n\n// ============================================================\n// INDICATOR — Badges, alerts, toast severity\n// ============================================================\n\nconst indicatorShared = {\n states: {\n hover: \"[a&]:hover:opacity-[var(--opacity-hover)]\",\n focus: `focus-visible:border-ring ${FOCUS_RING_COMPACT}`,\n invalid: interactiveInvalid,\n },\n // `attention` = the theme-owned notification pulse (applied by NotificationIndicator\n // when a badge definition declares a pulse trigger). Reduced-motion safe.\n motion: { transition: MOTION.interactive, attention: \"animate-pulse motion-reduce:animate-none\" },\n};\n\n// TONAL badges (T1 + T1b) — tinted background + AA-contrast text + hairline\n// border, in place of the previous solid full-saturation fills. Reads calmer\n// and modern (Linear/Stripe/shadcn) and lets many status chips coexist on one\n// row without the \"wall of solid colour\" effect.\n//\n// The tint (`bg-{status}-subtle`) and text (`text-{status}-subtle-foreground`)\n// come from dedicated SUBTLE STATUS TOKENS (T1b), not per-recipe `/10` mixes.\n// Those tokens are palette-adaptive `color-mix()` formulas emitted by the design\n// -token CSS generator (`design-tokens-css.shared.ts` → `buildSubtleStatusColors`),\n// tuned so 12px badge text clears WCAG-AA (≥4.5) against its tint in BOTH light\n// and dark — including the amber WARNING case that fails contrast with a naive\n// same-hue text. Because the tokens reference the base `--{status}` vars, a\n// palette retune (or a light/dark switch) retunes the chip automatically, and a\n// tenant can override any pair via `DesignSystemToken._SUBTLE(_FOREGROUND)`.\n// The border stays on the palette base (`border-{status}/25`, `/30` for warning\n// where the base is lighter) so it tracks the same hue.\nconst indicator: Record<IndicatorVariant, UIBehaviorRecipe> = {\n [IndicatorVariant.NEUTRAL]: recipe({\n // Tonal like the other four: `bg-neutral-subtle` mirrors the muted tint, but\n // `text-neutral-subtle-foreground` is a foreground-biased mix tuned to clear\n // WCAG-AA on that tint. Previously `text-muted-foreground` (tuned for the page\n // background, not the raised muted tint) rendered a washed-out, sub-AA grey\n // chip for every `default`/`secondary`/`outline` enum value.\n base: \"bg-neutral-subtle text-neutral-subtle-foreground border-border rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.INFO]: recipe({\n base: \"bg-info-subtle text-info-subtle-foreground border-info/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.SUCCESS]: recipe({\n base: \"bg-success-subtle text-success-subtle-foreground border-success/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.WARNING]: recipe({\n base: \"bg-warning-subtle text-warning-subtle-foreground border-warning/30 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.ERROR]: recipe({\n base: \"bg-destructive-subtle text-destructive-subtle-foreground border-destructive/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n};\n\n// ============================================================\n// SELECTABLE — Tabs, sidebar active items, toggles\n// ============================================================\n\nconst selectable: Record<SelectableVariant, UIBehaviorRecipe> = {\n [SelectableVariant.FILLED]: recipe({\n base: \"rounded-md text-sm outline-hidden ring-surface-sunken-border\",\n states: {\n hover: \"hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground\",\n focus: \"focus-visible:ring-2\",\n active: \"active:bg-surface-sunken-accent active:text-surface-sunken-foreground\",\n // `font-semibold` (not medium): the selected item is the \"you are here\"\n // anchor — WEIGHT carries the emphasis instead of a primary tint, and\n // medium is too close to the regular weight to read at sidebar sizes.\n selected: \"data-[active=true]:bg-surface-sunken-accent data-[active=true]:font-semibold data-[active=true]:text-surface-sunken-foreground data-[state=active]:bg-surface-sunken-accent data-[state=active]:text-surface-sunken-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs\",\n md: \"h-8 text-sm\",\n lg: \"h-12 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.UNDERLINE]: recipe({\n base: \"rounded-none border-b-2 border-transparent text-sm outline-hidden\",\n states: {\n hover: \"hover:text-foreground\",\n focus: FOCUS_RING_COMPACT,\n selected: \"data-[state=active]:border-primary data-[state=active]:text-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs pb-1\",\n md: \"h-8 text-sm pb-2\",\n lg: \"h-10 text-sm pb-3\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.PILL]: recipe({\n base: \"rounded-full text-sm outline-hidden\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground\",\n focus: FOCUS_RING_COMPACT,\n selected: \"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 px-3 text-xs\",\n md: \"h-8 px-4 text-sm\",\n lg: \"h-10 px-5 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.INDICATOR]: recipe({\n base: \"rounded-md text-sm outline-hidden\",\n states: {\n hover: \"hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground\",\n focus: FOCUS_RING_COMPACT,\n // Same weight semantics as FILLED: selected = semibold (see note there).\n selected: \"data-[active=true]:border-s-2 data-[active=true]:border-surface-sunken-primary data-[active=true]:font-semibold data-[active=true]:text-surface-sunken-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs\",\n md: \"h-8 text-sm\",\n lg: \"h-12 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n};\n\n// ============================================================\n// OVERLAY_BACKDROP — Dialog/Sheet background overlay\n// ============================================================\n\nconst overlayBackdrop: UIBehaviorRecipe = recipe({\n // Tailwind v4's `bg-color/[var()]` opacity modifier uses color-mix() which\n // doesn't resolve CSS custom property decimals correctly.\n // Use arbitrary bg value with rgb() alpha channel instead.\n base: \"bg-[rgb(0_0_0_/_var(--opacity-overlay))] backdrop-blur-sm\",\n motion: {\n enter: MOTION.backdropEnter,\n exit: MOTION.backdropExit,\n },\n});\n\n// ============================================================\n// DIVIDER — Separator\n// ============================================================\n\nconst divider: Record<DividerVariant, UIBehaviorRecipe> = {\n [DividerVariant.DEFAULT]: recipe({\n base: \"bg-border shrink-0\",\n }),\n [DividerVariant.NESTING_GUIDE]: recipe({\n // Nested-disclosure guide: a hairline left edge in the standard border color. LOOK only —\n // the indent beside it is structure and belongs to the component that nests (the accordion\n // preset adds `pl-field`). A theme wanting a heavier, tinted or dashed depth cue changes it here.\n base: \"border-s border-border\",\n }),\n};\n\n// ============================================================\n// SKELETON — Loading placeholders\n// ============================================================\n\nconst skeleton: UIBehaviorRecipe = recipe({\n base: `${SKELETON_NEUTRAL_TINT} animate-pulse rounded-md motion-reduce:animate-none`,\n});\n\nconst loadingSpinner: UIBehaviorRecipe = recipe({\n base: \"text-muted-foreground animate-spin motion-reduce:animate-none\",\n});\n\nconst loadingOverlay: UIBehaviorRecipe = recipe({\n base: \"bg-background/80\",\n motion: {\n enter: \"animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-enter)] motion-reduce:animate-none\",\n exit: \"animate-out fade-out-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-exit)] motion-reduce:animate-none\",\n },\n});\n\n// ============================================================\n// TYPOGRAPHY — Text hierarchy\n// ============================================================\n\nconst typography: Record<TypographyVariant, UIBehaviorRecipe> = {\n [TypographyVariant.HEADING]: recipe({\n base: \"font-semibold leading-none tracking-tight\",\n // Heading scale rebalance — gaps were 12/4/2px (h1→h2→h3→h4); h1 at\n // text-4xl (36px) jumped 1.5× to h2 (text-2xl, 24px), which felt\n // disproportionate for in-app SaaS UI (text-4xl is a hero size).\n // Compressing h1 to text-3xl yields a smooth 6/4/2px ladder\n // (1.25× → 1.2× → 1.11×, classic Major Third base). Pages that want a\n // hero h1 can opt in with `className=\"text-4xl sm:text-5xl\"` since the\n // size class is the LAST `text-` to win in `cn()`.\n sizes: {\n h1: \"text-3xl\",\n h2: \"text-2xl\",\n h3: \"text-xl\",\n h4: \"text-lg\",\n h5: \"text-base\",\n md: \"text-lg\",\n },\n }),\n [TypographyVariant.BODY]: recipe({\n base: \"text-foreground text-sm\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n [TypographyVariant.LABEL]: recipe({\n base: \"font-medium text-sm leading-none\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n [TypographyVariant.DESCRIPTION]: recipe({\n base: \"text-muted-foreground text-sm\",\n sizes: { sm: \"text-xs\", md: \"text-sm\" },\n }),\n [TypographyVariant.EYEBROW]: recipe({\n base: \"text-foreground-subtle text-2xs font-medium uppercase tracking-wide\",\n sizes: { sm: \"text-2xs\", md: \"text-xs\" },\n }),\n [TypographyVariant.CODE]: recipe({\n base: \"font-mono text-sm bg-muted rounded px-1 py-0.5\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n};\n\n// ============================================================\n// DEFAULT THEME — assembled\n//\n// Spacing: the default theme intentionally omits `spacing` overrides.\n// It uses the application-level defaults from DesignSystemConfiguration:\n// element: 0.5rem \| item: 0.25rem \| group: 0.75rem \| field: 1rem\n// section: 1.5rem \| region: 2rem \| card: 1rem \| container: 1.5rem\n// ============================================================\n\nexport const defaultTheme: ComponentStyleTheme = {\n id: 'default',\n name: 'Default',\n description: 'Clean modern SaaS, derived from shadcn/ui (NOT Material Design 3). Soft shadow ladder (xs/sm/md/lg); radius ladder control lg(8) · popover lg · card/dialog xl(12); accessible focus rings; fast/default motion tokens. Tonal status badges (tinted bg + AA-contrast text + hairline, light & dark) instead of solid fills. Tactile buttons (hairline edge + shadow-sm + active press) on the elevated variants.',\n\n // spacing: omitted — uses application-level defaults (see DesignSystemToken.SPACING_)\n\n interactive,\n surface,\n formControl,\n indicator,\n selectable,\n overlayBackdrop,\n divider,\n skeleton,\n loadingSpinner,\n loadingOverlay,\n typography,\n radius: undefined,\n backgroundLayer: undefined,\n chartStyle: DEFAULT_CHART_STYLE_PRESET,\n};\n"]}
1	+ {"version":3,"file":"default.theme.js","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/default.theme.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentStyleTheme } from '@wildo-ai/presets-components-models';\nimport {\n DividerVariant,\n InteractiveVariant,\n SurfaceVariant,\n FormControlVariant,\n IndicatorVariant,\n SelectableVariant,\n TypographyVariant,\n SKELETON_NEUTRAL_TINT,\n} from '@wildo-ai/presets-components-models';\nimport type { UIBehaviorRecipe } from '@wildo-ai/presets-components-models';\nimport { DEFAULT_CHART_STYLE_PRESET } from '../chart-style-defaults';\n\n// ============================================================\n// Helper\n// ============================================================\n\nfunction recipe(r: Partial<UIBehaviorRecipe> & { base: string }): UIBehaviorRecipe {\n return {\n base: r.base,\n states: r.states ?? {},\n sizes: r.sizes,\n motion: r.motion ?? {},\n gesture: r.gesture,\n policy: r.policy,\n };\n}\n\n// ============================================================\n// Motion constants — reference Level 1 tokens via CSS variables\n//\n// Each behavior targets SPECIFIC properties (no transition-all).\n// Durations and easings come from Level 1 --motion-* tokens.\n// All include motion-reduce for accessibility.\n// ============================================================\n//\n// MOTION PERSONALITY — Default (shadcn / Material-inspired SaaS)\n// Hover/focus : FAST (150ms) + DEFAULT → Material Standard curve.\n// Bidirectional state changes,\n// subtle but present.\n// Overlay enter: NORMAL (250ms) + ENTER → fade + zoom-95 + 2px slide.\n// Pure decelerate.\n// Overlay exit : FAST (150ms) + EXIT → quicker than enter.\n// Backdrop : NORMAL/FAST + ENTER/EXIT → matches overlays.\n// Gestures : NONE — neutral SaaS baseline. CSS-only motion is the\n// contract; theme can be swapped without removing\n// motion.dev wrappers from app code (which any theme\n// may activate via the recipe `gesture` slot).\n//\n// This theme is the reference baseline for the framework. All other\n// themes deviate FROM it intentionally — Glass adds gestures, Editorial\n// stretches durations, Terminal/Trading collapse them, Neo-Brutalist\n// strips easing, Cozy adds gentle springs.\n// ============================================================\n\nconst MOTION = {\n /** Interactive elements: bg, color, border, shadow, transform changes /\n interactive: \"transition-[background-color,color,border-color,box-shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Form controls: border, shadow, color changes on focus/validation /\n formControl: \"transition-[color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Selectable items: bg, color, border on state change /\n selectable: \"transition-[background-color,color,border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Sidebar: width/height collapse /\n sidebarCollapse: \"transition-[width,height,padding] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\",\n\n /* Enter animation for overlays/surfaces (fade + zoom) /\n enterFadeZoom: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none\",\n\n /* Exit animation for overlays/surfaces /\n exitFadeZoom: \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-[var(--motion-duration-fast)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none\",\n\n /* Enter for directional popovers (fade + zoom + slide per side) /\n enterDirectional: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 motion-reduce:data-[state=open]:animate-none\",\n\n /* Enter/exit for backdrop overlay (fade only).\n \n Uses explicit ENTER/EXIT easing tokens. Without\n * `ease-[...]`, browsers fall back to the CSS default `ease` curve,\n * silently inheriting a generic curve instead of the theme's ENTER\n * (decelerate) / EXIT (accelerate) personality. Backdrops fade only\n * so the perceptual difference is small, but consistency matters\n * for the \"every motion uses an explicit theme token\" rule. /\n backdropEnter: \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-normal)] data-[state=open]:ease-[var(--motion-easing-enter)] motion-reduce:data-[state=open]:animate-none\",\n backdropExit: \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-[var(--motion-duration-fast)] data-[state=closed]:ease-[var(--motion-easing-exit)] motion-reduce:data-[state=closed]:animate-none\",\n};\n\n// ============================================================\n// INTERACTIVE — Buttons, menu items, clickable surfaces\n// ============================================================\n\n// T5 radius ladder: interactive controls sit one clean step under cards —\n// control `rounded-lg` (8) · popover `rounded-lg` (RAISED) · card `rounded-xl` (12).\n// `md`/`icon` inherit the base recipe's `rounded-lg`; the explicit size overrides\n// (xs/sm/lg) mirror it so every size is of-a-piece.\nconst interactiveSizes: Record<string, string> = {\n xs: \"h-7 px-2.5 text-xs gap-1 rounded-lg has-[>svg]:px-2 pointer-coarse:min-h-9\",\n sm: \"h-8 px-3 gap-1.5 rounded-lg has-[>svg]:px-2.5 pointer-coarse:min-h-11\",\n md: \"h-9 px-4 py-2 has-[>svg]:px-3 pointer-coarse:min-h-11\",\n lg: \"h-10 px-6 rounded-lg has-[>svg]:px-4 pointer-coarse:min-h-11\",\n icon: \"size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11\",\n \"icon-sm\": \"size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9\",\n};\n\nconst interactiveDisabled: string = \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:cursor-not-allowed aria-disabled:opacity-[var(--opacity-disabled)]\";\nconst interactiveInvalid: string = \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\";\n\n// ============================================================\n// Focus-ring constants — single source of truth\n// for the keyboard-focus indicators used by INTERACTIVE, FORM_CONTROL,\n// SELECTABLE, and INDICATOR recipes. Shape mirrors the global\n// `.focus-ring-offset` / `.focus-ring-inset` Tailwind utilities exposed\n// in `index.css`; the recipes use raw classes (rather than the @apply\n// utility) because some variants pair the ring with a coloured border.\n// ============================================================\n/* Standard 2px offset ring + matching border-ring (most controls). /\nconst FOCUS_RING_OFFSET_WITH_BORDER: string =\n \"focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n/* Standard 2px offset ring with NO border-ring change (filled / accent). /\nconst FOCUS_RING_OFFSET: string =\n \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\";\n/* Compact 2px ring used by indicator badges and selectable items. /\nconst FOCUS_RING_COMPACT: string =\n \"focus-visible:ring-2 focus-visible:ring-ring\";\n\nconst interactive: Record<InteractiveVariant, UIBehaviorRecipe> = {\n [InteractiveVariant.PRIMARY]: recipe({\n // T2 tactile: a hairline edge (`border-primary/50`) + `shadow-sm` give the\n // button real elevation, and the press (`active:translate-y-px active:shadow-none`)\n // reads as a physical push. `MOTION.interactive` already transitions transform,\n // so the press animates for free.\n base: \"bg-primary text-primary-foreground rounded-lg border border-primary/50 shadow-sm font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-primary/90\",\n active: \"active:bg-primary/80 active:shadow-none active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n /\n * Danger is carried by the EDGE and the GLYPH, never by a fill.\n \n This was `bg-destructive text-destructive-foreground` — a solid red slab — until 2026-09-20, and\n * the fill is what made it wrong for the only places it is used. Every consumer of this variant in\n * the product is an OFFER rather than a commitment: the risky entries of a resource action bar\n * (`riskLevelToVariant` returns DESTRUCTIVE for HIGH/CRITICAL), a file card's remove control, an\n * error display's recovery action, a decision option. A filled button is the loudest thing a page\n * can contain, so an action bar with one or two risky verbs in it read as a page ABOUT deleting,\n * and the surrounding actions — its real content — read as secondary to it.\n \n The distinction this keeps is the one `AppPage_SecuritySettings` already states for its factor\n * rows: a fill asserts \"this is the one thing to do next\", and asserting that of every dangerous\n * verb on a page asserts it of none of them while spending all the emphasis. What a dangerous verb\n * needs is to be TELLABLE APART from its neighbours, which a coloured edge and a coloured glyph do\n * pre-attentively and at two channels rather than one — and it stays legible beside the GHOST\n * siblings that share an action bar with it, which a slab does not.\n \n The LABEL stays `text-foreground`. Red on the border and the icon is the whole signal; tinting\n * the words as well pushes it back toward the emphasis just removed, and a red word next to a red\n * glyph adds no information.\n \n SCOPE — this is the DEFAULT theme's dressing of the semantic role, not a redefinition of the\n * role. `theme.interactive[DESTRUCTIVE]` is \"what this theme does with a dangerous action\", and\n * the alternative themes keep their own answers deliberately: neo-brutalist's slab is its whole\n * idiom, and trading remaps the variant to the SELL button, where a fill is the point. Changing\n * those would impose one theme's taste on design languages chosen for being different.\n \n Menus are unaffected: `DropdownMenuItem` / `ContextMenuItem` read `states.highlighted` only and\n * never `base`, so a destructive menu row keeps its borderless tinted-row treatment.\n /\n [InteractiveVariant.DESTRUCTIVE]: recipe({\n // `:not([class='text-'])` mirrors the menus' convention — an icon that declares its own colour\n // keeps it, so a call site can still override without fighting the recipe.\n base: \"border border-destructive/60 bg-transparent text-foreground rounded-lg font-medium text-sm cursor-pointer [&_svg:not([class='text-'])]:text-destructive\",\n states: {\n hover: \"hover:border-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20\",\n active: \"active:bg-destructive/15 dark:active:bg-destructive/25 active:translate-y-px\",\n // FOCUS_RING_OFFSET, not ..._WITH_BORDER: that constant repaints the border to `ring`, which\n // for every other bordered variant is harmless because their border is decorative. Here the\n // border IS the danger cue, so swapping it out would strip the warning from a keyboard user at\n // the exact moment they are about to press the thing.\n focus: FOCUS_RING_OFFSET,\n highlighted: \"focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.OUTLINE]: recipe({\n /\n * The edge is `border-strong`, in both themes (#1322) — a DESIGN decision, taken from the accepted\n * creation-board proposal: a control's edge is drawn one strength above the hairline that divides\n * content, so a row of buttons reads as controls rather than as boxed text. It is not an\n * accessibility obligation: a button's label already identifies it, and the guidance for\n * non-text contrast says so. The obligation is on the FORM CONTROL recipes below, where the edge\n * is the only cue. `dark:border-input` went with it; it resolved to the hairline's lightness.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"border border-border-strong bg-background shadow-xs rounded-lg font-medium text-sm cursor-pointer dark:bg-input/30\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50 dark:hover:text-foreground\",\n active: \"active:bg-accent/80 active:shadow-none active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n /\n * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented\n * control could not say which segment was chosen while the pointer was anywhere on it —\n * the chosen one and the one under the cursor were the same pixels.\n \n The two additions are both decisions this design system has already taken elsewhere.\n * WEIGHT carries the choice, per `SelectableVariant.FILLED`: \"the selected item is the\n * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint\". And the\n * inset RING is `Card`'s reasoning for a selected card: \"the ring is what still reads when\n * the card's own fill is close to\" its surroundings, which is precisely a segment whose\n * fill is the hover fill.\n \n Both the fill and the ring are NEUTRAL — an ink wash of `foreground`, never `accent` and\n * never `ring` (2026-09-25). `ring` is the FOCUS/brand colour, so a chosen toggle wore a\n * primary outline that read as \"focused\" or \"error-adjacent\" rather than \"on\", on every pill\n * and segment at once. And `accent` is the HOVER tint: in a theme whose accent sits one\n * lightness step off the page (Wonder Todos: L 0.929 on 0.984) the chosen state barely\n * separated from the background it sat on. A translucent `foreground` wash is darker than\n * the hover tint in every theme by construction, tracks light and dark without a second\n * token, and keeps `SelectableVariant.FILLED`'s promise that weight — not a brand colour —\n * carries \"you are here\".\n /\n selected: \"data-[state=on]:bg-foreground/10 data-[state=on]:text-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-foreground/25 dark:data-[state=on]:bg-foreground/15\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.SECONDARY]: recipe({\n base: \"bg-secondary text-secondary-foreground rounded-lg font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-secondary/80\",\n active: \"active:bg-secondary/70 active:translate-y-px\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.GHOST]: recipe({\n base: \"rounded-lg font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n active: \"active:bg-accent/80\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n /\n * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented\n * control could not say which segment was chosen while the pointer was anywhere on it —\n * the chosen one and the one under the cursor were the same pixels.\n \n The two additions are both decisions this design system has already taken elsewhere.\n * WEIGHT carries the choice, per `SelectableVariant.FILLED`: \"the selected item is the\n * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint\". And the\n * inset RING is `Card`'s reasoning for a selected card: \"the ring is what still reads when\n * the card's own fill is close to\" its surroundings, which is precisely a segment whose\n * fill is the hover fill.\n \n Both the fill and the ring are NEUTRAL — an ink wash of `foreground`, never `accent` and\n * never `ring` (2026-09-25). `ring` is the FOCUS/brand colour, so a chosen toggle wore a\n * primary outline that read as \"focused\" or \"error-adjacent\" rather than \"on\", on every pill\n * and segment at once. And `accent` is the HOVER tint: in a theme whose accent sits one\n * lightness step off the page (Wonder Todos: L 0.929 on 0.984) the chosen state barely\n * separated from the background it sat on. A translucent `foreground` wash is darker than\n * the hover tint in every theme by construction, tracks light and dark without a second\n * token, and keeps `SelectableVariant.FILLED`'s promise that weight — not a brand colour —\n * carries \"you are here\".\n /\n selected: \"data-[state=on]:bg-foreground/10 data-[state=on]:text-foreground data-[state=on]:font-semibold data-[state=on]:ring-1 data-[state=on]:ring-inset data-[state=on]:ring-foreground/25 dark:data-[state=on]:bg-foreground/15\",\n highlighted: \"focus:bg-accent focus:text-accent-foreground\",\n open: \"data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.LINK]: recipe({\n base: \"text-primary underline-offset-4 font-medium text-sm cursor-pointer\",\n states: {\n hover: \"hover:underline\",\n active: \"active:text-primary/80\",\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: {\n xs: \"h-7 px-2.5 text-xs gap-1 pointer-coarse:min-h-9\",\n sm: \"h-8 px-3 gap-1.5 pointer-coarse:min-h-11\",\n md: \"h-9 px-4 py-2 pointer-coarse:min-h-11\",\n lg: \"h-10 px-6 pointer-coarse:min-h-11\",\n icon: \"size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11\",\n \"icon-sm\": \"size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9\",\n },\n motion: { transition: MOTION.interactive },\n }),\n\n [InteractiveVariant.ACCENT]: recipe({\n // TT-1: Gradient stops resolved from theme tokens\n // (`--accent-gradient-{from,via,to}`) so tenants can rebrand the ACCENT\n // recipe without forking a theme. Defaults preserve the historical\n // violet/blue/pink visual.\n base: 'relative bg-primary text-primary-foreground font-semibold rounded-lg shadow-xs before:absolute before:inset-0 before:rounded-[inherit] before:p-[1px] before:bg-[length:200%_200%] before:bg-gradient-to-r before:from-accent-gradient-from before:via-accent-gradient-via before:to-accent-gradient-to before:animate-[gradient-rotate_3s_ease_infinite] motion-reduce:before:animate-none before:-z-10 before:blur-[2px] shadow-[0_0_15px_color-mix(in_oklch,var(--primary)_20%,transparent)] text-sm cursor-pointer',\n states: {\n hover: 'hover:shadow-[0_0_25px_color-mix(in_oklch,var(--primary)_35%,transparent)]',\n active: 'active:scale-[0.98]',\n focus: FOCUS_RING_OFFSET,\n disabled: interactiveDisabled,\n invalid: interactiveInvalid,\n },\n sizes: interactiveSizes,\n motion: {\n transition: 'transition-[shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',\n },\n }),\n};\n\n// ============================================================\n// SURFACE — Cards, dialogs, popovers, dropdowns\n// SURFACE PERSONALITY — clean SaaS material hierarchy: cards are bordered\n// elevated panels, tab panels are attached but quiet, shell is chromaless,\n// transient notifications reuse overlay chrome at a smaller scale.\n// ============================================================\n\nconst surface: ComponentStyleTheme['surface'] = {\n [SurfaceVariant.BASE]: recipe({\n // Card / panel — anchor of the surface scale at `rounded-xl`.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-xl border shadow-sm\",\n }),\n\n [SurfaceVariant.CARD]: recipe({\n // Content card — the elevated `surface-raised` fill + border + soft shadow,\n // ALWAYS painted so an explicitly-authored CARD section reads as a card in\n // every context (including inside a dialog/page). Mirrors BASE, the anchor\n // card surface; the section preset adds container padding.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-xl border shadow-sm\",\n }),\n\n [SurfaceVariant.RAISED]: recipe({\n // Popover / dropdown — floats above the page, gets a slightly tighter\n // radius than BASE to feel \"cut from\" the larger card surface (one tier\n // smaller, never two; previously `rounded-md` was visibly inconsistent\n // when popovers stacked next to cards).\n // `fill-surface-overlay` mirrors the background so SVG children that paint\n // via `fill` — notably the Tooltip's Radix arrow — inherit the body colour\n // (CSS `fill` inherits across Radix's arrow wrapper span; `background` does\n // not). Keep `fill-` in lockstep with `bg-` here.\n base: \"bg-surface-overlay fill-surface-overlay text-surface-overlay-foreground rounded-lg border shadow-md\",\n motion: {\n enter: MOTION.enterDirectional,\n exit: MOTION.exitFadeZoom,\n },\n }),\n\n [SurfaceVariant.OVERLAY]: recipe({\n // Dialog / sheet — the heaviest, most modal surface; matches BASE radius\n // so a dialog reads as a \"card the user can act inside\" rather than a\n // smaller-cornered floating panel. Required to restore monotonicity\n // (BASE ≤ OVERLAY) — `rounded-lg` here was visually demoting dialogs.\n // The edge is `border-strong` (#1322): in the dark theme `shadow-lg` is invisible against a dark\n // page, so the border is what separates a modal from what it covers. Popovers and toasts keep\n // `--border` — they are anchored to a trigger, and a heavy edge on every menu reads as noise.\n base: \"bg-surface-overlay text-surface-overlay-foreground rounded-xl border border-border-strong shadow-lg\",\n motion: {\n enter: MOTION.enterFadeZoom,\n exit: MOTION.exitFadeZoom,\n },\n }),\n\n [SurfaceVariant.INSET]: recipe({\n base: \"bg-surface-inset text-surface-inset-foreground\",\n }),\n\n [SurfaceVariant.SUNKEN]: recipe({\n base: \"bg-surface-sunken text-surface-sunken-foreground\",\n }),\n\n [SurfaceVariant.TAB_PANEL]: recipe({\n // Tab panel joins to the tab strip: same visual language as BASE, but no\n // border/shadow so the surface policy can own the join.\n base: \"bg-surface-raised text-surface-raised-foreground rounded-b-xl\",\n }),\n\n [SurfaceVariant.SHELL]: recipe({\n // App/page shell: chromaless raised background. Landmark semantics remain\n // opt-in via policy config.\n base: \"bg-surface-raised text-surface-raised-foreground\",\n }),\n\n [SurfaceVariant.TRANSIENT]: recipe({\n // Toast/snackbar: compact floating card, visually between RAISED and OVERLAY.\n base: \"bg-surface-overlay text-surface-overlay-foreground rounded-lg border shadow-md\",\n motion: {\n enter: MOTION.enterDirectional,\n exit: MOTION.exitFadeZoom,\n },\n }),\n};\n\n// ============================================================\n// FORM_CONTROL — Inputs, textareas, select triggers\n// ============================================================\n\nconst formControl: Record<FormControlVariant, UIBehaviorRecipe> = {\n [FormControlVariant.DEFAULT]: recipe({\n /\n * The edge is `border-strong` (#1322). An empty text input has no content to identify it — its\n * border IS the control — so that border owes 3:1 against the page, and the hairline `--border`\n * gives about 1.5:1 in both themes. The same holds for UNDERLINED's rule and for an unchecked\n * CHECKBOX below. FILLED carries the same edge as its bottom indicator line; see its own recipe.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — \"Where a text-input has a visual indicator to show\n * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio.\"\n * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"border-border-strong dark:bg-surface-inset/30 rounded-lg border bg-transparent shadow-xs text-base md:text-sm placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-3 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-2 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-4 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: MOTION.formControl },\n }),\n\n [FormControlVariant.FILLED]: recipe({\n /\n * A FILL is not an input's indicator: `bg-muted` sits at about 1.3:1 against the page on the\n * default palette, so a filled field with `border-0` was an input nothing marked as one — and\n * its `invalid` state sets a BORDER colour, which a borderless field could not show at all.\n * The filled-field convention answers both: the fill, plus an indicator line along the bottom at\n * the strong edge, with the top corners rounded and the bottom square so the line runs straight.\n * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — \"Where a text-input has a visual indicator to show\n * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio.\"\n * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html\n /\n base: \"bg-muted rounded-t-lg rounded-b-none border-0 border-b border-border-strong text-base md:text-sm placeholder:text-muted-foreground\",\n states: {\n focus: FOCUS_RING_OFFSET,\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-3 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-2 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-4 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: MOTION.formControl },\n }),\n\n [FormControlVariant.UNDERLINED]: recipe({\n base: \"bg-transparent border-0 border-b border-border-strong rounded-none text-base md:text-sm placeholder:text-muted-foreground\",\n states: {\n focus: \"focus-visible:border-ring focus-visible:border-b-2\",\n disabled: \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:border-destructive\",\n },\n sizes: {\n md: \"h-9 px-0 py-1 pointer-coarse:min-h-11\",\n sm: \"h-8 px-0 py-1 text-sm pointer-coarse:min-h-11\",\n lg: \"h-10 px-0 py-2 pointer-coarse:min-h-11\",\n },\n motion: { transition: \"transition-[border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n\n [FormControlVariant.CHECKBOX]: recipe({\n base: \"border-border-strong dark:bg-input/30 border shadow-xs\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n selected: \"data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary dark:data-[state=checked]:bg-primary\",\n disabled: \"disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n motion: { transition: \"transition-[color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n\n [FormControlVariant.SWITCH]: recipe({\n base: \"data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 border border-transparent shadow-xs\",\n states: {\n focus: FOCUS_RING_OFFSET_WITH_BORDER,\n selected: \"data-[state=checked]:bg-primary\",\n disabled: \"disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]\",\n invalid: \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n },\n motion: { transition: \"transition-[background-color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none\" },\n }),\n};\n\n// ============================================================\n// INDICATOR — Badges, alerts, toast severity\n// ============================================================\n\nconst indicatorShared = {\n states: {\n hover: \"[a&]:hover:opacity-[var(--opacity-hover)]\",\n focus: `focus-visible:border-ring ${FOCUS_RING_COMPACT}`,\n invalid: interactiveInvalid,\n },\n // `attention` = the theme-owned notification pulse (applied by NotificationIndicator\n // when a badge definition declares a pulse trigger). Reduced-motion safe.\n motion: { transition: MOTION.interactive, attention: \"animate-pulse motion-reduce:animate-none\" },\n};\n\n// TONAL badges (T1 + T1b) — tinted background + AA-contrast text + hairline\n// border, in place of the previous solid full-saturation fills. Reads calmer\n// and modern (Linear/Stripe/shadcn) and lets many status chips coexist on one\n// row without the \"wall of solid colour\" effect.\n//\n// The tint (`bg-{status}-subtle`) and text (`text-{status}-subtle-foreground`)\n// come from dedicated SUBTLE STATUS TOKENS (T1b), not per-recipe `/10` mixes.\n// Those tokens are palette-adaptive `color-mix()` formulas emitted by the design\n// -token CSS generator (`design-tokens-css.shared.ts` → `buildSubtleStatusColors`),\n// tuned so 12px badge text clears WCAG-AA (≥4.5) against its tint in BOTH light\n// and dark — including the amber WARNING case that fails contrast with a naive\n// same-hue text. Because the tokens reference the base `--{status}` vars, a\n// palette retune (or a light/dark switch) retunes the chip automatically, and a\n// tenant can override any pair via `DesignSystemToken._SUBTLE(_FOREGROUND)`.\n// The border stays on the palette base (`border-{status}/25`, `/30` for warning\n// where the base is lighter) so it tracks the same hue.\nconst indicator: Record<IndicatorVariant, UIBehaviorRecipe> = {\n [IndicatorVariant.NEUTRAL]: recipe({\n // Tonal like the other four: `bg-neutral-subtle` mirrors the muted tint, but\n // `text-neutral-subtle-foreground` is a foreground-biased mix tuned to clear\n // WCAG-AA on that tint. Previously `text-muted-foreground` (tuned for the page\n // background, not the raised muted tint) rendered a washed-out, sub-AA grey\n // chip for every `default`/`secondary`/`outline` enum value.\n base: \"bg-neutral-subtle text-neutral-subtle-foreground border-border rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.INFO]: recipe({\n base: \"bg-info-subtle text-info-subtle-foreground border-info/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.SUCCESS]: recipe({\n base: \"bg-success-subtle text-success-subtle-foreground border-success/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.WARNING]: recipe({\n base: \"bg-warning-subtle text-warning-subtle-foreground border-warning/30 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n [IndicatorVariant.ERROR]: recipe({\n base: \"bg-destructive-subtle text-destructive-subtle-foreground border-destructive/25 rounded-md border px-2 py-0.5 text-xs font-medium\",\n ...indicatorShared,\n }),\n};\n\n// ============================================================\n// SELECTABLE — Tabs, sidebar active items, toggles\n// ============================================================\n\nconst selectable: Record<SelectableVariant, UIBehaviorRecipe> = {\n [SelectableVariant.FILLED]: recipe({\n base: \"rounded-md text-sm outline-hidden ring-surface-sunken-border\",\n states: {\n hover: \"hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground\",\n focus: \"focus-visible:ring-2\",\n active: \"active:bg-surface-sunken-accent active:text-surface-sunken-foreground\",\n // `font-semibold` (not medium): the selected item is the \"you are here\"\n // anchor — WEIGHT carries the emphasis instead of a primary tint, and\n // medium is too close to the regular weight to read at sidebar sizes.\n selected: \"data-[active=true]:bg-surface-sunken-accent data-[active=true]:font-semibold data-[active=true]:text-surface-sunken-foreground data-[state=active]:bg-surface-sunken-accent data-[state=active]:text-surface-sunken-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs\",\n md: \"h-8 text-sm\",\n lg: \"h-12 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.UNDERLINE]: recipe({\n base: \"rounded-none border-b-2 border-transparent text-sm outline-hidden\",\n states: {\n hover: \"hover:text-foreground\",\n focus: FOCUS_RING_COMPACT,\n selected: \"data-[state=active]:border-primary data-[state=active]:text-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs pb-1\",\n md: \"h-8 text-sm pb-2\",\n lg: \"h-10 text-sm pb-3\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.PILL]: recipe({\n base: \"rounded-full text-sm outline-hidden\",\n states: {\n hover: \"hover:bg-accent hover:text-accent-foreground\",\n focus: FOCUS_RING_COMPACT,\n selected: \"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 px-3 text-xs\",\n md: \"h-8 px-4 text-sm\",\n lg: \"h-10 px-5 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n\n [SelectableVariant.INDICATOR]: recipe({\n base: \"rounded-md text-sm outline-hidden\",\n states: {\n hover: \"hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground\",\n focus: FOCUS_RING_COMPACT,\n // Same weight semantics as FILLED: selected = semibold (see note there).\n selected: \"data-[active=true]:border-s-2 data-[active=true]:border-surface-sunken-primary data-[active=true]:font-semibold data-[active=true]:text-surface-sunken-foreground\",\n disabled: \"disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]\",\n },\n sizes: {\n sm: \"h-7 text-xs\",\n md: \"h-8 text-sm\",\n lg: \"h-12 text-sm\",\n },\n motion: { transition: MOTION.selectable },\n }),\n};\n\n// ============================================================\n// OVERLAY_BACKDROP — Dialog/Sheet background overlay\n// ============================================================\n\nconst overlayBackdrop: UIBehaviorRecipe = recipe({\n // Tailwind v4's `bg-color/[var()]` opacity modifier uses color-mix() which\n // doesn't resolve CSS custom property decimals correctly.\n // Use arbitrary bg value with rgb() alpha channel instead.\n base: \"bg-[rgb(0_0_0_/_var(--opacity-overlay))] backdrop-blur-sm\",\n motion: {\n enter: MOTION.backdropEnter,\n exit: MOTION.backdropExit,\n },\n});\n\n// ============================================================\n// DIVIDER — Separator\n// ============================================================\n\nconst divider: Record<DividerVariant, UIBehaviorRecipe> = {\n [DividerVariant.DEFAULT]: recipe({\n base: \"bg-border shrink-0\",\n }),\n [DividerVariant.NESTING_GUIDE]: recipe({\n // Nested-disclosure guide: a hairline left edge in the standard border color. LOOK only —\n // the indent beside it is structure and belongs to the component that nests (the accordion\n // preset adds `pl-field`). A theme wanting a heavier, tinted or dashed depth cue changes it here.\n base: \"border-s border-border\",\n }),\n};\n\n// ============================================================\n// SKELETON — Loading placeholders\n// ============================================================\n\nconst skeleton: UIBehaviorRecipe = recipe({\n base: `${SKELETON_NEUTRAL_TINT} animate-pulse rounded-md motion-reduce:animate-none`,\n});\n\nconst loadingSpinner: UIBehaviorRecipe = recipe({\n base: \"text-muted-foreground animate-spin motion-reduce:animate-none\",\n});\n\nconst loadingOverlay: UIBehaviorRecipe = recipe({\n base: \"bg-background/80\",\n motion: {\n enter: \"animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-enter)] motion-reduce:animate-none\",\n exit: \"animate-out fade-out-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-exit)] motion-reduce:animate-none\",\n },\n});\n\n// ============================================================\n// TYPOGRAPHY — Text hierarchy\n// ============================================================\n\nconst typography: Record<TypographyVariant, UIBehaviorRecipe> = {\n [TypographyVariant.HEADING]: recipe({\n base: \"font-semibold leading-none tracking-tight\",\n // Heading scale rebalance — gaps were 12/4/2px (h1→h2→h3→h4); h1 at\n // text-4xl (36px) jumped 1.5× to h2 (text-2xl, 24px), which felt\n // disproportionate for in-app SaaS UI (text-4xl is a hero size).\n // Compressing h1 to text-3xl yields a smooth 6/4/2px ladder\n // (1.25× → 1.2× → 1.11×, classic Major Third base). Pages that want a\n // hero h1 can opt in with `className=\"text-4xl sm:text-5xl\"` since the\n // size class is the LAST `text-` to win in `cn()`.\n sizes: {\n h1: \"text-3xl\",\n h2: \"text-2xl\",\n h3: \"text-xl\",\n h4: \"text-lg\",\n h5: \"text-base\",\n md: \"text-lg\",\n },\n }),\n [TypographyVariant.BODY]: recipe({\n base: \"text-foreground text-sm\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n [TypographyVariant.LABEL]: recipe({\n base: \"font-medium text-sm leading-none\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n [TypographyVariant.DESCRIPTION]: recipe({\n base: \"text-muted-foreground text-sm\",\n sizes: { sm: \"text-xs\", md: \"text-sm\" },\n }),\n [TypographyVariant.EYEBROW]: recipe({\n base: \"text-foreground-subtle text-2xs font-medium uppercase tracking-wide\",\n sizes: { sm: \"text-2xs\", md: \"text-xs\" },\n }),\n [TypographyVariant.CODE]: recipe({\n base: \"font-mono text-sm bg-muted rounded px-1 py-0.5\",\n sizes: { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" },\n }),\n};\n\n// ============================================================\n// DEFAULT THEME — assembled\n//\n// Spacing: the default theme intentionally omits `spacing` overrides.\n// It uses the application-level defaults from DesignSystemConfiguration:\n// element: 0.5rem \| item: 0.25rem \| group: 0.75rem \| field: 1rem\n// section: 1.5rem \| region: 2rem \| card: 1rem \| container: 1.5rem\n// ============================================================\n\nexport const defaultTheme: ComponentStyleTheme = {\n id: 'default',\n name: 'Default',\n description: 'Clean modern SaaS, derived from shadcn/ui (NOT Material Design 3). Soft shadow ladder (xs/sm/md/lg); radius ladder control lg(8) · popover lg · card/dialog xl(12); accessible focus rings; fast/default motion tokens. Tonal status badges (tinted bg + AA-contrast text + hairline, light & dark) instead of solid fills. Tactile buttons (hairline edge + shadow-sm + active press) on the elevated variants.',\n\n // spacing: omitted — uses application-level defaults (see DesignSystemToken.SPACING_)\n\n interactive,\n surface,\n formControl,\n indicator,\n selectable,\n overlayBackdrop,\n divider,\n skeleton,\n loadingSpinner,\n loadingOverlay,\n typography,\n radius: undefined,\n backgroundLayer: undefined,\n chartStyle: DEFAULT_CHART_STYLE_PRESET,\n};\n"]}

package/dist/esm/core/ui/ui.frontend.schemas.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { z } from 'zod';
 import { ViewportBreakpoint } from '@wildo-ai/zod-decorators';
 import { SidebarResponsivePolicy } from '../../core/config/launcher-items.frontend.schemas';
-import { HorizontalPlacement, VerticalPlacement } from '@wildo-ai/presets-components-models';
+import { HorizontalPlacement } from '@wildo-ai/presets-components-models';
 export declare const UIConfigurationSchema: z.ZodObject<{
     currentBreakpoint: z.ZodEnum<typeof ViewportBreakpoint>;
     navigationLayout: z.ZodObject<{
@@ -18,7 +18,6 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                     ephemeral?: boolean;
                 }>>, unknown>>;
                 appearance: z.ZodOptional<z.ZodObject<{
-                    split: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>>]>>;
                     overlay: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>>]>>;
                 }, z.core.$strip>>;
                 minWidth: z.ZodOptional<z.ZodNumber>;
@@ -38,7 +37,6 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                     ephemeral?: boolean;
                 }>>, unknown>>;
                 appearance: z.ZodOptional<z.ZodObject<{
-                    split: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>>]>>;
                     overlay: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>>]>>;
                 }, z.core.$strip>>;
                 minWidth: z.ZodOptional<z.ZodNumber>;
@@ -58,7 +56,6 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                     ephemeral?: boolean;
                 }>>, unknown>>;
                 appearance: z.ZodOptional<z.ZodObject<{
-                    split: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>>]>>;
                     overlay: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>>]>>;
                 }, z.core.$strip>>;
                 minWidth: z.ZodOptional<z.ZodNumber>;
@@ -78,7 +75,6 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 ephemeral?: boolean;
             }>>, unknown>>;
             appearance: z.ZodOptional<z.ZodObject<{
-                split: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").SplitAppearance>>]>>;
                 overlay: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").OverlayAppearance>>]>>;
             }, z.core.$strip>>;
         }, z.core.$strip>>;
@@ -167,6 +163,7 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 runtimeAvailability: z.ZodOptional<z.ZodObject<{
                     requiredCapabilities: z.ZodOptional<z.ZodArray<z.ZodString>>;
                 }, z.core.$strip>>;
+                notificationBadgeRef: z.ZodOptional<z.ZodString>;
             }, z.core.$strip>>>>;
             brandHeader: z.ZodOptional<z.ZodBoolean>;
             brandMarkTheme: z.ZodOptional<z.ZodEnum<typeof import("@wildo-ai/saas-models").BrandAssetTheme>>;
@@ -345,7 +342,10 @@ export declare const UIConfigurationSchema: z.ZodObject<{
                 }, z.core.$strip>>;
             }, z.core.$strip>>>>;
         }, z.core.$strip>]>>;
-        status_bar: z.ZodUnion<readonly [z.ZodBoolean, z.ZodEnum<typeof VerticalPlacement>]>;
+        status_bar: z.ZodUnion<readonly [z.ZodBoolean, z.ZodEnum<{
+            top: import("@wildo-ai/presets-components-models").VerticalPlacement.TOP;
+            bottom: import("@wildo-ai/presets-components-models").VerticalPlacement.BOTTOM;
+        }>]>;
         user_dropdown: z.ZodDefault<z.ZodUnion<readonly [z.ZodDefault<z.ZodBoolean>, z.ZodObject<{
             avatarDisplay: z.ZodDefault<z.ZodEnum<typeof import("../../core/config/app-configuration-frontend.schemas").UserDropdownAvatarDisplay>>;
             sections: z.ZodOptional<z.ZodArray<z.ZodEnum<typeof import("../../core/config/app-configuration-frontend.schemas").UserDropdownSection>>>;

package/dist/esm/core/ui/ui.frontend.schemas.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ui.frontend.schemas.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/ui.frontend.schemas.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,~~iBAAiB,EAAE,~~MAAM,qCAAqC,CAAC;~~AAyC7F~~,eAAO,MAAM,qBAAqB;;;;;;;;~~8BAa005B~~,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC~~;;;;;;;;;;;;;;;8BAA2uC~~,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC~~;;;;;;;;;;;;;;;8BAA4uC~~,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC~~;;;;;;;;;;;;;;;0BAA4pC~~,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC~~;;;;;;;;;;0BAAouB~~,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;0BAAk2B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;0BAAmR,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAJznoC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
1	+ {"version":3,"file":"ui.frontend.schemas.d.ts","sourceRoot":"","sources":["../../../../../src/core/ui/ui.frontend.schemas.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAG9D,OAAO,EAAE,uBAAuB,EAAE,MAAM,iEAAiE,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAyC1E,eAAO,MAAM,qBAAqB;;;;;;;;8BAas/3B,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAmiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;8BAAoiC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;0BAAo9B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;0BAAgiB,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;0BAAk2B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;0BAAmR,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAJzglC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}