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

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

@@ -80,7 +80,7 @@ const interactiveSizes = {
     icon: "size-9 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
     "icon-sm": "size-7 pointer-coarse:min-h-9 pointer-coarse:min-w-9",
 };
-const interactiveDisabled = "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]";
+const interactiveDisabled = "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:cursor-not-allowed aria-disabled:opacity-[var(--opacity-disabled)]";
 const interactiveInvalid = "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive";
 // ============================================================
 // Focus-ring constants — single source of truth
@@ -113,12 +113,49 @@ const interactive = {
         sizes: interactiveSizes,
         motion: { transition: MOTION.interactive },
     }),
+    /*
+     * Danger is carried by the EDGE and the GLYPH, never by a fill.
+     *
+     * This was `bg-destructive text-destructive-foreground` — a solid red slab — until 2026-09-20, and
+     * the fill is what made it wrong for the only places it is used. Every consumer of this variant in
+     * the product is an OFFER rather than a commitment: the risky entries of a resource action bar
+     * (`riskLevelToVariant` returns DESTRUCTIVE for HIGH/CRITICAL), a file card's remove control, an
+     * error display's recovery action, a decision option. A filled button is the loudest thing a page
+     * can contain, so an action bar with one or two risky verbs in it read as a page ABOUT deleting,
+     * and the surrounding actions — its real content — read as secondary to it.
+     *
+     * The distinction this keeps is the one `AppPage_SecuritySettings` already states for its factor
+     * rows: a fill asserts "this is the one thing to do next", and asserting that of every dangerous
+     * verb on a page asserts it of none of them while spending all the emphasis. What a dangerous verb
+     * needs is to be TELLABLE APART from its neighbours, which a coloured edge and a coloured glyph do
+     * pre-attentively and at two channels rather than one — and it stays legible beside the GHOST
+     * siblings that share an action bar with it, which a slab does not.
+     *
+     * The LABEL stays `text-foreground`. Red on the border and the icon is the whole signal; tinting
+     * the words as well pushes it back toward the emphasis just removed, and a red word next to a red
+     * glyph adds no information.
+     *
+     * SCOPE — this is the DEFAULT theme's dressing of the semantic role, not a redefinition of the
+     * role. `theme.interactive[DESTRUCTIVE]` is "what this theme does with a dangerous action", and
+     * the alternative themes keep their own answers deliberately: neo-brutalist's slab is its whole
+     * idiom, and trading remaps the variant to the SELL button, where a fill is the point. Changing
+     * those would impose one theme's taste on design languages chosen for being different.
+     *
+     * Menus are unaffected: `DropdownMenuItem` / `ContextMenuItem` read `states.highlighted` only and
+     * never `base`, so a destructive menu row keeps its borderless tinted-row treatment.
+     */
     [InteractiveVariant.DESTRUCTIVE]: recipe({
-        base: "bg-destructive text-destructive-foreground rounded-lg font-medium text-sm cursor-pointer dark:bg-destructive/60",
+        // `:not([class*='text-'])` mirrors the menus' convention — an icon that declares its own colour
+        // keeps it, so a call site can still override without fighting the recipe.
+        base: "border border-destructive/60 bg-transparent text-foreground rounded-lg font-medium text-sm cursor-pointer [&_svg:not([class*='text-'])]:text-destructive",
         states: {
-            hover: "hover:bg-destructive/90",
-            active: "active:bg-destructive/80 active:translate-y-px",
-            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            hover: "hover:border-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20",
+            active: "active:bg-destructive/15 dark:active:bg-destructive/25 active:translate-y-px",
+            // FOCUS_RING_OFFSET, not ..._WITH_BORDER: that constant repaints the border to `ring`, which
+            // for every other bordered variant is harmless because their border is decorative. Here the
+            // border IS the danger cue, so swapping it out would strip the warning from a keyboard user at
+            // the exact moment they are about to press the thing.
+            focus: FOCUS_RING_OFFSET,
             highlighted: "focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive",
             disabled: interactiveDisabled,
             invalid: interactiveInvalid,
@@ -127,12 +164,43 @@ const interactive = {
         motion: { transition: MOTION.interactive },
     }),
     [InteractiveVariant.OUTLINE]: recipe({
-        base: "border bg-background shadow-xs rounded-lg font-medium text-sm cursor-pointer dark:bg-input/30 dark:border-input",
+        /*
+         * The edge is `border-strong`, in both themes (#1322) — a DESIGN decision, taken from the accepted
+         * creation-board proposal: a control's edge is drawn one strength above the hairline that divides
+         * content, so a row of buttons reads as controls rather than as boxed text. It is not an
+         * accessibility obligation: a button's label already identifies it, and the guidance for
+         * non-text contrast says so. The obligation is on the FORM CONTROL recipes below, where the edge
+         * is the only cue. `dark:border-input` went with it; it resolved to the hairline's lightness.
+         * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
+         */
+        base: "border border-border-strong bg-background shadow-xs rounded-lg font-medium text-sm cursor-pointer dark:bg-input/30",
         states: {
             hover: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-input/50 dark:hover:text-foreground",
             active: "active:bg-accent/80 active:shadow-none active:translate-y-px",
             focus: FOCUS_RING_OFFSET_WITH_BORDER,
-            selected: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+            /*
+             * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented
+             * control could not say which segment was chosen while the pointer was anywhere on it —
+             * the chosen one and the one under the cursor were the same pixels.
+             *
+             * The two additions are both decisions this design system has already taken elsewhere.
+             * WEIGHT carries the choice, per `SelectableVariant.FILLED`: "the selected item is the
+             * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint". And the
+             * 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-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,
         },
@@ -157,7 +225,29 @@ const interactive = {
             hover: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
             active: "active:bg-accent/80",
             focus: FOCUS_RING_OFFSET_WITH_BORDER,
-            selected: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+            /*
+             * SELECTED IS NOT HOVER. It used to be the same two classes as `hover`, so a segmented
+             * control could not say which segment was chosen while the pointer was anywhere on it —
+             * the chosen one and the one under the cursor were the same pixels.
+             *
+             * The two additions are both decisions this design system has already taken elsewhere.
+             * WEIGHT carries the choice, per `SelectableVariant.FILLED`: "the selected item is the
+             * 'you are here' anchor — WEIGHT carries the emphasis instead of a primary tint". And the
+             * 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-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,
@@ -242,7 +332,10 @@ const surface = {
         // so a dialog reads as a "card the user can act inside" rather than a
         // smaller-cornered floating panel. Required to restore monotonicity
         // (BASE ≤ OVERLAY) — `rounded-lg` here was visually demoting dialogs.
-        base: "bg-surface-overlay text-surface-overlay-foreground rounded-xl border shadow-lg",
+        // The edge is `border-strong` (#1322): in the dark theme `shadow-lg` is invisible against a dark
+        // page, so the border is what separates a modal from what it covers. Popovers and toasts keep
+        // `--border` — they are anchored to a trigger, and a heavy edge on every menu reads as noise.
+        base: "bg-surface-overlay text-surface-overlay-foreground rounded-xl border border-border-strong shadow-lg",
         motion: {
             enter: MOTION.enterFadeZoom,
             exit: MOTION.exitFadeZoom,
@@ -278,7 +371,16 @@ const surface = {
 // ============================================================
 const formControl = {
     [FormControlVariant.DEFAULT]: recipe({
-        base: "border-border 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",
+        /*
+         * The edge is `border-strong` (#1322). An empty text input has no content to identify it — its
+         * border IS the control — so that border owes 3:1 against the page, and the hairline `--border`
+         * gives about 1.5:1 in both themes. The same holds for UNDERLINED's rule and for an unchecked
+         * CHECKBOX below. FILLED carries the same edge as its bottom indicator line; see its own recipe.
+         * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — "Where a text-input has a visual indicator to show
+         * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio."
+         * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
+         */
+        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",
         states: {
             focus: FOCUS_RING_OFFSET_WITH_BORDER,
             disabled: "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
@@ -292,7 +394,17 @@ const formControl = {
         motion: { transition: MOTION.formControl },
     }),
     [FormControlVariant.FILLED]: recipe({
-        base: "bg-muted rounded-lg border-0 text-base md:text-sm placeholder:text-muted-foreground",
+        /*
+         * A FILL is not an input's indicator: `bg-muted` sits at about 1.3:1 against the page on the
+         * default palette, so a filled field with `border-0` was an input nothing marked as one — and
+         * its `invalid` state sets a BORDER colour, which a borderless field could not show at all.
+         * The filled-field convention answers both: the fill, plus an indicator line along the bottom at
+         * the strong edge, with the top corners rounded and the bottom square so the line runs straight.
+         * spec-cite: Understanding WCAG 2.1 SC 1.4.11 — "Where a text-input has a visual indicator to show
+         * it is an input, such as a bottom border (#767676), that indicator must meet 3:1 contrast ratio."
+         * https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
+         */
+        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",
         states: {
             focus: FOCUS_RING_OFFSET,
             disabled: "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
@@ -306,7 +418,7 @@ const formControl = {
         motion: { transition: MOTION.formControl },
     }),
     [FormControlVariant.UNDERLINED]: recipe({
-        base: "bg-transparent border-0 border-b border-border rounded-none text-base md:text-sm placeholder:text-muted-foreground",
+        base: "bg-transparent border-0 border-b border-border-strong rounded-none text-base md:text-sm placeholder:text-muted-foreground",
         states: {
             focus: "focus-visible:border-ring focus-visible:border-b-2",
             disabled: "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
@@ -320,7 +432,7 @@ const formControl = {
         motion: { transition: "transition-[border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none" },
     }),
     [FormControlVariant.CHECKBOX]: recipe({
-        base: "border-border dark:bg-input/30 border shadow-xs",
+        base: "border-border-strong dark:bg-input/30 border shadow-xs",
         states: {
             focus: FOCUS_RING_OFFSET_WITH_BORDER,
             selected: "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary dark:data-[state=checked]:bg-primary",
@@ -543,6 +655,10 @@ const typography = {
         base: "text-muted-foreground text-sm",
         sizes: { sm: "text-xs", md: "text-sm" },
     }),
+    [TypographyVariant.EYEBROW]: recipe({
+        base: "text-foreground-subtle text-2xs font-medium uppercase tracking-wide",
+        sizes: { sm: "text-2xs", md: "text-xs" },
+    }),
     [TypographyVariant.CODE]: recipe({
         base: "font-mono text-sm bg-muted rounded px-1 py-0.5",
         sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },

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

@@ -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)]\";\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  [InteractiveVariant.DESTRUCTIVE]: recipe({\n    base: \"bg-destructive text-destructive-foreground rounded-lg font-medium text-sm cursor-pointer dark:bg-destructive/60\",\n    states: {\n      hover: \"hover:bg-destructive/90\",\n      active: \"active:bg-destructive/80 active:translate-y-px\",\n      focus: FOCUS_RING_OFFSET_WITH_BORDER,\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    base: \"border bg-background shadow-xs rounded-lg font-medium text-sm cursor-pointer dark:bg-input/30 dark:border-input\",\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      selected: \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\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      selected: \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\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    base: \"bg-surface-overlay text-surface-overlay-foreground rounded-xl border 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    base: \"border-border 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    base: \"bg-muted rounded-lg border-0 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 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 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.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"]}
+{"version":3,"file":"default.theme.js","sourceRoot":"","sources":["../../../../../../src/core/ui/themes/default.theme.ts"],"names":[],"mappings":"AACA,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,+DAA+D;AAC/D,SAAS;AACT,+DAA+D;AAE/D,SAAS,MAAM,CAAC,CAA+C;IAC7D,OAAO;QACL,IAAI,EAAE,CAAC,CAAC,IAAI;QACZ,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,EAAE;QACtB,KAAK,EAAE,CAAC,CAAC,KAAK;QACd,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,EAAE;QACtB,OAAO,EAAE,CAAC,CAAC,OAAO;QAClB,MAAM,EAAE,CAAC,CAAC,MAAM;KACjB,CAAC;AACJ,CAAC;AAED,+DAA+D;AAC/D,gEAAgE;AAChE,EAAE;AACF,iEAAiE;AACjE,6DAA6D;AAC7D,+CAA+C;AAC/C,+DAA+D;AAC/D,EAAE;AACF,iEAAiE;AACjE,wEAAwE;AACxE,4EAA4E;AAC5E,mEAAmE;AACnE,0EAA0E;AAC1E,gEAAgE;AAChE,kEAAkE;AAClE,oEAAoE;AACpE,wEAAwE;AACxE,mEAAmE;AACnE,sEAAsE;AACtE,gEAAgE;AAChE,EAAE;AACF,oEAAoE;AACpE,wEAAwE;AACxE,qEAAqE;AACrE,2CAA2C;AAC3C,+DAA+D;AAE/D,MAAM,MAAM,GAAG;IACb,yEAAyE;IACzE,WAAW,EAAE,gLAAgL;IAE7L,uEAAuE;IACvE,WAAW,EAAE,qJAAqJ;IAElK,0DAA0D;IAC1D,UAAU,EAAE,2JAA2J;IAEvK,qCAAqC;IACrC,eAAe,EAAE,8IAA8I;IAE/J,0DAA0D;IAC1D,aAAa,EAAE,mPAAmP;IAElQ,2CAA2C;IAC3C,YAAY,EAAE,+PAA+P;IAE7Q,oEAAoE;IACpE,gBAAgB,EAAE,+YAA+Y;IAEja;;;;;;;mEAO+D;IAC/D,aAAa,EAAE,sNAAsN;IACrO,YAAY,EAAE,+NAA+N;CAC9O,CAAC;AAEF,+DAA+D;AAC/D,wDAAwD;AACxD,+DAA+D;AAE/D,0EAA0E;AAC1E,qFAAqF;AACrF,kFAAkF;AAClF,oDAAoD;AACpD,MAAM,gBAAgB,GAA2B;IAC/C,EAAE,EAAE,4EAA4E;IAChF,EAAE,EAAE,uEAAuE;IAC3E,EAAE,EAAE,uDAAuD;IAC3D,EAAE,EAAE,8DAA8D;IAClE,IAAI,EAAE,wDAAwD;IAC9D,SAAS,EAAE,sDAAsD;CAClE,CAAC;AAEF,MAAM,mBAAmB,GAAW,0JAA0J,CAAC;AAC/L,MAAM,kBAAkB,GAAW,wGAAwG,CAAC;AAE5I,+DAA+D;AAC/D,gDAAgD;AAChD,uEAAuE;AACvE,8DAA8D;AAC9D,wEAAwE;AACxE,sEAAsE;AACtE,uEAAuE;AACvE,+DAA+D;AAC/D,uEAAuE;AACvE,MAAM,6BAA6B,GACjC,yIAAyI,CAAC;AAC5I,6EAA6E;AAC7E,MAAM,iBAAiB,GACrB,+GAA+G,CAAC;AAClH,sEAAsE;AACtE,MAAM,kBAAkB,GACtB,8CAA8C,CAAC;AAEjD,MAAM,WAAW,GAAiD;IAChE,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACnC,2EAA2E;QAC3E,oFAAoF;QACpF,gFAAgF;QAChF,kCAAkC;QAClC,IAAI,EAAE,qHAAqH;QAC3H,MAAM,EAAE;YACN,KAAK,EAAE,qBAAqB;YAC5B,MAAM,EAAE,+DAA+D;YACvE,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,CAAC,kBAAkB,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QACvC,gGAAgG;QAChG,2EAA2E;QAC3E,IAAI,EAAE,0JAA0J;QAChK,MAAM,EAAE;YACN,KAAK,EAAE,+EAA+E;YACtF,MAAM,EAAE,8EAA8E;YACtF,6FAA6F;YAC7F,4FAA4F;YAC5F,+FAA+F;YAC/F,sDAAsD;YACtD,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,6EAA6E;YAC1F,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACnC;;;;;;;;WAQG;QACH,IAAI,EAAE,oHAAoH;QAC1H,MAAM,EAAE;YACN,KAAK,EAAE,gGAAgG;YACvG,MAAM,EAAE,8DAA8D;YACtE,KAAK,EAAE,6BAA6B;YACpC;;;;;;;;;;;;;;;;;;;;;eAqBG;YACH,QAAQ,EAAE,2NAA2N;YACrO,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QACrC,IAAI,EAAE,sFAAsF;QAC5F,MAAM,EAAE;YACN,KAAK,EAAE,uBAAuB;YAC9B,MAAM,EAAE,8CAA8C;YACtD,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QACjC,IAAI,EAAE,+CAA+C;QACrD,MAAM,EAAE;YACN,KAAK,EAAE,sEAAsE;YAC7E,MAAM,EAAE,qBAAqB;YAC7B,KAAK,EAAE,6BAA6B;YACpC;;;;;;;;;;;;;;;;;;;;;eAqBG;YACH,QAAQ,EAAE,2NAA2N;YACrO,WAAW,EAAE,8CAA8C;YAC3D,IAAI,EAAE,sEAAsE;YAC5E,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAChC,IAAI,EAAE,oEAAoE;QAC1E,MAAM,EAAE;YACN,KAAK,EAAE,iBAAiB;YACxB,MAAM,EAAE,wBAAwB;YAChC,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE;YACL,EAAE,EAAE,iDAAiD;YACrD,EAAE,EAAE,0CAA0C;YAC9C,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,mCAAmC;YACvC,IAAI,EAAE,wDAAwD;YAC9D,SAAS,EAAE,sDAAsD;SAClE;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAClC,kDAAkD;QAClD,wEAAwE;QACxE,mEAAmE;QACnE,2BAA2B;QAC3B,IAAI,EAAE,wfAAwf;QAC9f,MAAM,EAAE;YACN,KAAK,EAAE,4EAA4E;YACnF,MAAM,EAAE,qBAAqB;YAC7B,KAAK,EAAE,iBAAiB;YACxB,QAAQ,EAAE,mBAAmB;YAC7B,OAAO,EAAE,kBAAkB;SAC5B;QACD,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE;YACN,UAAU,EAAE,wIAAwI;SACrJ;KACF,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,gDAAgD;AAChD,0EAA0E;AAC1E,2EAA2E;AAC3E,mEAAmE;AACnE,+DAA+D;AAE/D,MAAM,OAAO,GAAmC;IAC9C,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC5B,8DAA8D;QAC9D,IAAI,EAAE,8EAA8E;KACrF,CAAC;IAEF,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC5B,4EAA4E;QAC5E,2EAA2E;QAC3E,2EAA2E;QAC3E,2DAA2D;QAC3D,IAAI,EAAE,8EAA8E;KACrF,CAAC;IAEF,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAC9B,sEAAsE;QACtE,wEAAwE;QACxE,uEAAuE;QACvE,wCAAwC;QACxC,2EAA2E;QAC3E,2EAA2E;QAC3E,4EAA4E;QAC5E,oDAAoD;QACpD,IAAI,EAAE,qGAAqG;QAC3G,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC,gBAAgB;YAC9B,IAAI,EAAE,MAAM,CAAC,YAAY;SAC1B;KACF,CAAC;IAEF,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAC/B,yEAAyE;QACzE,sEAAsE;QACtE,oEAAoE;QACpE,sEAAsE;QACtE,iGAAiG;QACjG,8FAA8F;QAC9F,8FAA8F;QAC9F,IAAI,EAAE,qGAAqG;QAC3G,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC,aAAa;YAC3B,IAAI,EAAE,MAAM,CAAC,YAAY;SAC1B;KACF,CAAC;IAEF,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAC7B,IAAI,EAAE,gDAAgD;KACvD,CAAC;IAEF,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAC9B,IAAI,EAAE,kDAAkD;KACzD,CAAC;IAEF,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QACjC,yEAAyE;QACzE,wDAAwD;QACxD,IAAI,EAAE,+DAA+D;KACtE,CAAC;IAEF,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAC7B,0EAA0E;QAC1E,4BAA4B;QAC5B,IAAI,EAAE,kDAAkD;KACzD,CAAC;IAEF,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QACjC,8EAA8E;QAC9E,IAAI,EAAE,gFAAgF;QACtF,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC,gBAAgB;YAC9B,IAAI,EAAE,MAAM,CAAC,YAAY;SAC1B;KACF,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,oDAAoD;AACpD,+DAA+D;AAE/D,MAAM,WAAW,GAAiD;IAChE,CAAC,kBAAkB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACnC;;;;;;;;WAQG;QACH,IAAI,EAAE,wMAAwM;QAC9M,MAAM,EAAE;YACN,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,qGAAqG;YAC/G,OAAO,EAAE,wGAAwG;SAClH;QACD,KAAK,EAAE;YACL,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,+CAA+C;YACnD,EAAE,EAAE,wCAAwC;SAC7C;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAClC;;;;;;;;;WASG;QACH,IAAI,EAAE,oIAAoI;QAC1I,MAAM,EAAE;YACN,KAAK,EAAE,iBAAiB;YACxB,QAAQ,EAAE,qGAAqG;YAC/G,OAAO,EAAE,kEAAkE;SAC5E;QACD,KAAK,EAAE;YACL,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,+CAA+C;YACnD,EAAE,EAAE,wCAAwC;SAC7C;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE;KAC3C,CAAC;IAEF,CAAC,kBAAkB,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;QACtC,IAAI,EAAE,2HAA2H;QACjI,MAAM,EAAE;YACN,KAAK,EAAE,oDAAoD;YAC3D,QAAQ,EAAE,qGAAqG;YAC/G,OAAO,EAAE,iCAAiC;SAC3C;QACD,KAAK,EAAE;YACL,EAAE,EAAE,uCAAuC;YAC3C,EAAE,EAAE,+CAA+C;YACnD,EAAE,EAAE,wCAAwC;SAC7C;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,oIAAoI,EAAE;KAC7J,CAAC;IAEF,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QACpC,IAAI,EAAE,wDAAwD;QAC9D,MAAM,EAAE;YACN,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,uJAAuJ;YACjK,QAAQ,EAAE,wEAAwE;YAClF,OAAO,EAAE,wGAAwG;SAClH;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,wIAAwI,EAAE;KACjK,CAAC;IAEF,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAClC,IAAI,EAAE,6GAA6G;QACnH,MAAM,EAAE;YACN,KAAK,EAAE,6BAA6B;YACpC,QAAQ,EAAE,iCAAiC;YAC3C,QAAQ,EAAE,wEAAwE;YAClF,OAAO,EAAE,wGAAwG;SAClH;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,gKAAgK,EAAE;KACzL,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,6CAA6C;AAC7C,+DAA+D;AAE/D,MAAM,eAAe,GAAG;IACtB,MAAM,EAAE;QACN,KAAK,EAAE,2CAA2C;QAClD,KAAK,EAAE,6BAA6B,kBAAkB,EAAE;QACxD,OAAO,EAAE,kBAAkB;KAC5B;IACD,qFAAqF;IACrF,0EAA0E;IAC1E,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,EAAE,0CAA0C,EAAE;CAClG,CAAC;AAEF,4EAA4E;AAC5E,6EAA6E;AAC7E,8EAA8E;AAC9E,iDAAiD;AACjD,EAAE;AACF,+EAA+E;AAC/E,8EAA8E;AAC9E,iFAAiF;AACjF,oFAAoF;AACpF,gFAAgF;AAChF,+EAA+E;AAC/E,4EAA4E;AAC5E,gFAAgF;AAChF,8EAA8E;AAC9E,gFAAgF;AAChF,wDAAwD;AACxD,MAAM,SAAS,GAA+C;IAC5D,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjC,6EAA6E;QAC7E,6EAA6E;QAC7E,+EAA+E;QAC/E,4EAA4E;QAC5E,6DAA6D;QAC7D,IAAI,EAAE,kHAAkH;QACxH,GAAG,eAAe;KACnB,CAAC;IACF,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC9B,IAAI,EAAE,6GAA6G;QACnH,GAAG,eAAe;KACnB,CAAC;IACF,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjC,IAAI,EAAE,sHAAsH;QAC5H,GAAG,eAAe;KACnB,CAAC;IACF,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QACjC,IAAI,EAAE,sHAAsH;QAC5H,GAAG,eAAe;KACnB,CAAC;IACF,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,kIAAkI;QACxI,GAAG,eAAe;KACnB,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,mDAAmD;AACnD,+DAA+D;AAE/D,MAAM,UAAU,GAAgD;IAC9D,CAAC,iBAAiB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QACjC,IAAI,EAAE,8DAA8D;QACpE,MAAM,EAAE;YACN,KAAK,EAAE,qEAAqE;YAC5E,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,uEAAuE;YAC/E,wEAAwE;YACxE,sEAAsE;YACtE,sEAAsE;YACtE,QAAQ,EAAE,gOAAgO;YAC1O,QAAQ,EAAE,2JAA2J;SACtK;QACD,KAAK,EAAE;YACL,EAAE,EAAE,aAAa;YACjB,EAAE,EAAE,aAAa;YACjB,EAAE,EAAE,cAAc;SACnB;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE;KAC1C,CAAC;IAEF,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QACpC,IAAI,EAAE,mEAAmE;QACzE,MAAM,EAAE;YACN,KAAK,EAAE,uBAAuB;YAC9B,KAAK,EAAE,kBAAkB;YACzB,QAAQ,EAAE,wEAAwE;YAClF,QAAQ,EAAE,yEAAyE;SACpF;QACD,KAAK,EAAE;YACL,EAAE,EAAE,kBAAkB;YACtB,EAAE,EAAE,kBAAkB;YACtB,EAAE,EAAE,mBAAmB;SACxB;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE;KAC1C,CAAC;IAEF,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,qCAAqC;QAC3C,MAAM,EAAE;YACN,KAAK,EAAE,8CAA8C;YACrD,KAAK,EAAE,kBAAkB;YACzB,QAAQ,EAAE,4EAA4E;YACtF,QAAQ,EAAE,yEAAyE;SACpF;QACD,KAAK,EAAE;YACL,EAAE,EAAE,kBAAkB;YACtB,EAAE,EAAE,kBAAkB;YACtB,EAAE,EAAE,mBAAmB;SACxB;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE;KAC1C,CAAC;IAEF,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QACpC,IAAI,EAAE,mCAAmC;QACzC,MAAM,EAAE;YACN,KAAK,EAAE,qEAAqE;YAC5E,KAAK,EAAE,kBAAkB;YACzB,yEAAyE;YACzE,QAAQ,EAAE,mKAAmK;YAC7K,QAAQ,EAAE,yEAAyE;SACpF;QACD,KAAK,EAAE;YACL,EAAE,EAAE,aAAa;YACjB,EAAE,EAAE,aAAa;YACjB,EAAE,EAAE,cAAc;SACnB;QACD,MAAM,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE;KAC1C,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,qDAAqD;AACrD,+DAA+D;AAE/D,MAAM,eAAe,GAAqB,MAAM,CAAC;IAC/C,2EAA2E;IAC3E,0DAA0D;IAC1D,2DAA2D;IAC3D,IAAI,EAAE,2DAA2D;IACjE,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC,aAAa;QAC3B,IAAI,EAAE,MAAM,CAAC,YAAY;KAC1B;CACF,CAAC,CAAC;AAEH,+DAA+D;AAC/D,sBAAsB;AACtB,+DAA+D;AAE/D,MAAM,OAAO,GAA6C;IACxD,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,oBAAoB;KAC3B,CAAC;IACF,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;QACrC,0FAA0F;QAC1F,2FAA2F;QAC3F,kGAAkG;QAClG,IAAI,EAAE,wBAAwB;KAC/B,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,kCAAkC;AAClC,+DAA+D;AAE/D,MAAM,QAAQ,GAAqB,MAAM,CAAC;IACxC,IAAI,EAAE,GAAG,qBAAqB,sDAAsD;CACrF,CAAC,CAAC;AAEH,MAAM,cAAc,GAAqB,MAAM,CAAC;IAC9C,IAAI,EAAE,+DAA+D;CACtE,CAAC,CAAC;AAEH,MAAM,cAAc,GAAqB,MAAM,CAAC;IAC9C,IAAI,EAAE,kBAAkB;IACxB,MAAM,EAAE;QACN,KAAK,EAAE,0HAA0H;QACjI,IAAI,EAAE,2HAA2H;KAClI;CACF,CAAC,CAAC;AAEH,+DAA+D;AAC/D,8BAA8B;AAC9B,+DAA+D;AAE/D,MAAM,UAAU,GAAgD;IAC9D,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAClC,IAAI,EAAE,2CAA2C;QACjD,oEAAoE;QACpE,iEAAiE;QACjE,iEAAiE;QACjE,4DAA4D;QAC5D,sEAAsE;QACtE,uEAAuE;QACvE,oDAAoD;QACpD,KAAK,EAAE;YACL,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,UAAU;YACd,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,WAAW;YACf,EAAE,EAAE,SAAS;SACd;KACF,CAAC;IACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,yBAAyB;QAC/B,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE;KACzD,CAAC;IACF,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAChC,IAAI,EAAE,kCAAkC;QACxC,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE;KACzD,CAAC;IACF,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;QACtC,IAAI,EAAE,+BAA+B;QACrC,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE;KACxC,CAAC;IACF,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;QAClC,IAAI,EAAE,qEAAqE;QAC3E,KAAK,EAAE,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE;KACzC,CAAC;IACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,EAAE,gDAAgD;QACtD,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE;KACzD,CAAC;CACH,CAAC;AAEF,+DAA+D;AAC/D,4BAA4B;AAC5B,EAAE;AACF,sEAAsE;AACtE,yEAAyE;AACzE,oEAAoE;AACpE,0EAA0E;AAC1E,+DAA+D;AAE/D,MAAM,CAAC,MAAM,YAAY,GAAwB;IAC/C,EAAE,EAAE,SAAS;IACb,IAAI,EAAE,SAAS;IACf,WAAW,EAAE,kZAAkZ;IAE/Z,uFAAuF;IAEvF,WAAW;IACX,OAAO;IACP,WAAW;IACX,SAAS;IACT,UAAU;IACV,eAAe;IACf,OAAO;IACP,QAAQ;IACR,cAAc;IACd,cAAc;IACd,UAAU;IACV,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,SAAS;IAC1B,UAAU,EAAE,0BAA0B;CACvC,CAAC","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

@@ -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,12 +18,10 @@ 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>;
                 maxWidth: z.ZodOptional<z.ZodNumber>;
-                defaultVisible: z.ZodOptional<z.ZodBoolean>;
                 onEmpty: z.ZodOptional<z.ZodEnum<typeof import("@wildo-ai/saas-models").ZoneEmptyBehavior>>;
                 responsiveCollapse: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>>]>>;
             }, z.core.$strip>;
@@ -39,12 +37,10 @@ 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>;
                 maxWidth: z.ZodOptional<z.ZodNumber>;
-                defaultVisible: z.ZodOptional<z.ZodBoolean>;
                 onEmpty: z.ZodOptional<z.ZodEnum<typeof import("@wildo-ai/saas-models").ZoneEmptyBehavior>>;
                 responsiveCollapse: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>>]>>;
             }, z.core.$strip>>;
@@ -60,12 +56,10 @@ 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>;
                 maxWidth: z.ZodOptional<z.ZodNumber>;
-                defaultVisible: z.ZodOptional<z.ZodBoolean>;
                 onEmpty: z.ZodOptional<z.ZodEnum<typeof import("@wildo-ai/saas-models").ZoneEmptyBehavior>>;
                 responsiveCollapse: z.ZodOptional<z.ZodUnion<readonly [z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>, z.ZodRecord<z.ZodEnum<typeof ViewportBreakpoint> & z.core.$partial, z.ZodEnum<typeof import("@wildo-ai/saas-models").ResponsiveCollapseMode>>]>>;
             }, z.core.$strip>>;
@@ -81,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>>;
@@ -97,13 +90,11 @@ export declare const UIConfigurationSchema: z.ZodObject<{
             }>>, unknown>>;
         }, z.core.$strip>>;
         split: z.ZodOptional<z.ZodObject<{
-            autoSplit: z.ZodDefault<z.ZodBoolean>;
             ratio: z.ZodDefault<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>;
             orientation: z.ZodDefault<z.ZodEnum<typeof import("@wildo-ai/zod-decorators").DisplayDirection>>;
             resizable: z.ZodDefault<z.ZodBoolean>;
             companion: z.ZodOptional<z.ZodObject<{
                 ratio: z.ZodDefault<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>;
-                orientation: z.ZodDefault<z.ZodEnum<typeof import("@wildo-ai/zod-decorators").DisplayDirection>>;
                 resizable: z.ZodDefault<z.ZodBoolean>;
             }, z.core.$strip>>;
         }, z.core.$strip>>;
@@ -172,7 +163,10 @@ 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>>;
         }, z.core.$strip>]>>;
         toolbar: z.ZodDefault<z.ZodUnion<readonly [z.ZodBoolean, z.ZodObject<{
             placement: z.ZodDefault<z.ZodUnion<readonly [z.ZodLiteral<"top">, z.ZodLiteral<"bottom">]>>;
@@ -348,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

@@ -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;;;;;;;;8BAa+x4B,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;;;8BAAoyC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;;;8BAAqyC,CAAC;6BAAoC,CAAC;;;8BAAyM,CAAC;6BAAoC,CAAC;;;;;;;;;;;;;;;;0BAAqtC,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;0BAAouB,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;0BAA49B,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;0BAAmR,CAAC;yBAAgC,CAAC;;;0BAA6L,CAAC;yBAAgC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAJn3nC,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"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"}

package/dist/esm/core/ui/ui.frontend.schemas.js

@@ -1,9 +1,9 @@
 import { z } from 'zod';
 import { ViewportBreakpoint } from '@wildo-ai/zod-decorators';
 import { NavigationLayoutSchema } from '@wildo-ai/saas-models';
-import { ApplicationLevelComponentType } from '../../core/config/app-level-components.frontend.schemas.js';
+import { ApplicationLevelComponentType, StatusBarPlacementSchema } from '../../core/config/app-level-components.frontend.schemas.js';
 import { SidebarResponsivePolicy } from '../../core/config/launcher-items.frontend.schemas.js';
-import { HorizontalPlacement, VerticalPlacement } from '@wildo-ai/presets-components-models';
+import { HorizontalPlacement } from '@wildo-ai/presets-components-models';
 import { AppLevelComponentConfigurationSchema } from '../../core/config/app-configuration-frontend.schemas.js';
 import { DesignSystemConfigurationSchema } from '@wildo-ai/presets-components-models';
 /**
@@ -33,7 +33,7 @@ const viewportAwareAppLevelComponentConfigurationSchema = AppLevelComponentConfi
     [ApplicationLevelComponentType.CONTROL_PANEL]: AppLevelComponentConfigurationSchema.shape[ApplicationLevelComponentType.CONTROL_PANEL],
     [ApplicationLevelComponentType.STATUS_BAR]: z.union([
         z.boolean(),
-        z.enum(VerticalPlacement),
+        StatusBarPlacementSchema,
     ]),
     [ApplicationLevelComponentType.USER_DROPDOWN]: AppLevelComponentConfigurationSchema.shape[ApplicationLevelComponentType.USER_DROPDOWN],
     [ApplicationLevelComponentType.NAVIGATION_CONTROL]: z.boolean(),