@wildo-ai/presets-components 1.0.1 → 1.1.0

package/dist/esm/themes/dense.theme.js

@@ -0,0 +1,574 @@
+import { InteractiveVariant, SurfaceVariant, FormControlVariant, IndicatorVariant, SelectableVariant, TypographyVariant, } from '@wildo-ai/presets-components-models';
+// Dense derives from the known-good default theme (full recipe coverage +
+// correct types) and compacts it. The chart preset is shared with the default
+// theme — imported from the package rather than re-authored.
+import { DEFAULT_CHART_STYLE_PRESET } from '@wildo-ai/saas-frontend-lib';
+import { UI_SPACING_COMPACT } from '../config/preset-design-system.js';
+// ============================================================
+// Helper
+// ============================================================
+function recipe(r) {
+    return {
+        base: r.base,
+        states: r.states ?? {},
+        sizes: r.sizes,
+        motion: r.motion ?? {},
+        gesture: r.gesture,
+        policy: r.policy,
+    };
+}
+// ============================================================
+// Motion constants — reference Level 1 tokens via CSS variables
+//
+// Each behavior targets SPECIFIC properties (no transition-all).
+// Durations and easings come from Level 1 --motion-* tokens.
+// All include motion-reduce for accessibility.
+// ============================================================
+//
+// MOTION PERSONALITY — Default (shadcn / Material-inspired SaaS)
+//   Hover/focus  : FAST   (150ms) + DEFAULT  → Material Standard curve.
+//                                              Bidirectional state changes,
+//                                              subtle but present.
+//   Overlay enter: NORMAL (250ms) + ENTER   → fade + zoom-95 + 2px slide.
+//                                              Pure decelerate.
+//   Overlay exit : FAST   (150ms) + EXIT    → quicker than enter.
+//   Backdrop     : NORMAL/FAST    + ENTER/EXIT  → matches overlays.
+//   Gestures     : NONE — neutral SaaS baseline. CSS-only motion is the
+//                  contract; theme can be swapped without removing
+//                  motion.dev wrappers from app code (which any theme
+//                  may activate via the recipe `gesture` slot).
+//
+// This theme is the reference baseline for the framework. All other
+// themes deviate FROM it intentionally — Glass adds gestures, Editorial
+// stretches durations, Terminal/Trading collapse them, Neo-Brutalist
+// strips easing, Cozy adds gentle springs.
+// ============================================================
+const MOTION = {
+    /** Interactive elements: bg, color, border, shadow, transform changes */
+    interactive: "transition-[background-color,color,border-color,box-shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none",
+    /** Form controls: border, shadow, color changes on focus/validation */
+    formControl: "transition-[color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none",
+    /** Selectable items: bg, color, border on state change */
+    selectable: "transition-[background-color,color,border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none",
+    /** Sidebar: width/height collapse */
+    sidebarCollapse: "transition-[width,height,padding] duration-[var(--motion-duration-normal)] ease-[var(--motion-easing-default)] motion-reduce:transition-none",
+    /** Enter animation for overlays/surfaces (fade + zoom) */
+    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",
+    /** Exit animation for overlays/surfaces */
+    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",
+    /** Enter for directional popovers (fade + zoom + slide per side) */
+    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",
+    /** Enter/exit for backdrop overlay (fade only).
+     *
+     * Uses explicit ENTER/EXIT easing tokens. Without
+     * `ease-[...]`, browsers fall back to the CSS default `ease` curve,
+     * silently inheriting a generic curve instead of the theme's ENTER
+     * (decelerate) / EXIT (accelerate) personality. Backdrops fade only
+     * so the perceptual difference is small, but consistency matters
+     * for the "every motion uses an explicit theme token" rule. */
+    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",
+    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",
+};
+// ============================================================
+// INTERACTIVE — Buttons, menu items, clickable surfaces
+// ============================================================
+// DENSE sizes — one step shorter than default (md h-8 / sm h-7 / lg h-9) with
+// trimmed inline padding, and one radius tier tighter (control `rounded-md`).
+// `pointer-coarse:` touch floors are preserved so dense stays tap-safe.
+const interactiveSizes = {
+    xs: "h-6 px-2 text-xs gap-1 rounded-md has-[>svg]:px-1.5 pointer-coarse:min-h-9",
+    sm: "h-7 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2 pointer-coarse:min-h-11",
+    md: "h-8 px-3 has-[>svg]:px-2.5 rounded-md pointer-coarse:min-h-11",
+    lg: "h-9 px-4 rounded-md has-[>svg]:px-3 pointer-coarse:min-h-11",
+    icon: "size-8 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+    "icon-sm": "size-6 pointer-coarse:min-h-9 pointer-coarse:min-w-9",
+};
+const interactiveDisabled = "disabled:pointer-events-none 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
+// for the keyboard-focus indicators used by INTERACTIVE, FORM_CONTROL,
+// SELECTABLE, and INDICATOR recipes. Shape mirrors the global
+// `.focus-ring-offset` / `.focus-ring-inset` Tailwind utilities exposed
+// in `index.css`; the recipes use raw classes (rather than the @apply
+// utility) because some variants pair the ring with a coloured border.
+// ============================================================
+/** Standard 2px offset ring + matching border-ring (most controls). */
+const FOCUS_RING_OFFSET_WITH_BORDER = "focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** Standard 2px offset ring with NO border-ring change (filled / accent). */
+const FOCUS_RING_OFFSET = "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** Compact 2px ring used by indicator badges and selectable items. */
+const FOCUS_RING_COMPACT = "focus-visible:ring-2 focus-visible:ring-ring";
+const interactive = {
+    [InteractiveVariant.PRIMARY]: recipe({
+        // T2 tactile: a hairline edge (`border-primary/50`) + `shadow-sm` give the
+        // button real elevation, and the press (`active:translate-y-px active:shadow-none`)
+        // reads as a physical push. `MOTION.interactive` already transitions transform,
+        // so the press animates for free.
+        base: "bg-primary text-primary-foreground rounded-md border border-primary/50 shadow-sm font-medium text-sm cursor-pointer",
+        states: {
+            hover: "hover:bg-primary/90",
+            active: "active:bg-primary/80 active:shadow-none active:translate-y-px",
+            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.DESTRUCTIVE]: recipe({
+        base: "bg-destructive text-destructive-foreground rounded-md font-medium text-sm cursor-pointer dark:bg-destructive/60",
+        states: {
+            hover: "hover:bg-destructive/90",
+            active: "active:bg-destructive/80 active:translate-y-px",
+            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            highlighted: "focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive",
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.OUTLINE]: recipe({
+        base: "border bg-background shadow-xs rounded-md font-medium text-sm cursor-pointer dark:bg-input/30 dark:border-input",
+        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",
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.SECONDARY]: recipe({
+        base: "bg-secondary text-secondary-foreground rounded-md font-medium text-sm cursor-pointer",
+        states: {
+            hover: "hover:bg-secondary/80",
+            active: "active:bg-secondary/70 active:translate-y-px",
+            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.GHOST]: recipe({
+        base: "rounded-md font-medium text-sm cursor-pointer",
+        states: {
+            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",
+            highlighted: "focus:bg-accent focus:text-accent-foreground",
+            open: "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.LINK]: recipe({
+        base: "text-primary underline-offset-4 font-medium text-sm cursor-pointer",
+        states: {
+            hover: "hover:underline",
+            active: "active:text-primary/80",
+            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: {
+            xs: "h-7 px-2.5 text-xs gap-1 pointer-coarse:min-h-9",
+            sm: "h-8 px-3 gap-1.5 pointer-coarse:min-h-11",
+            md: "h-9 px-4 py-2 pointer-coarse:min-h-11",
+            lg: "h-10 px-6 pointer-coarse:min-h-11",
+            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",
+        },
+        motion: { transition: MOTION.interactive },
+    }),
+    [InteractiveVariant.ACCENT]: recipe({
+        // TT-1: Gradient stops resolved from theme tokens
+        // (`--accent-gradient-{from,via,to}`) so tenants can rebrand the ACCENT
+        // recipe without forking a theme. Defaults preserve the historical
+        // violet/blue/pink visual.
+        base: 'relative bg-primary text-primary-foreground font-semibold rounded-md 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',
+        states: {
+            hover: 'hover:shadow-[0_0_25px_color-mix(in_oklch,var(--primary)_35%,transparent)]',
+            active: 'active:scale-[0.98]',
+            focus: FOCUS_RING_OFFSET,
+            disabled: interactiveDisabled,
+            invalid: interactiveInvalid,
+        },
+        sizes: interactiveSizes,
+        motion: {
+            transition: 'transition-[shadow,transform] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// SURFACE — Cards, dialogs, popovers, dropdowns
+// SURFACE PERSONALITY — clean SaaS material hierarchy: cards are bordered
+// elevated panels, tab panels are attached but quiet, shell is chromaless,
+// transient notifications reuse overlay chrome at a smaller scale.
+// ============================================================
+const surface = {
+    [SurfaceVariant.BASE]: recipe({
+        // Card / panel — anchor of the surface scale at `rounded-lg`.
+        base: "bg-surface-raised text-surface-raised-foreground rounded-lg border",
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Content card — the elevated `surface-raised` fill + border + soft shadow,
+        // ALWAYS painted so an explicitly-authored CARD section reads as a card in
+        // every context (including inside a dialog/page). Mirrors BASE, the anchor
+        // card surface; the section preset adds container padding.
+        base: "bg-surface-raised text-surface-raised-foreground rounded-lg border",
+    }),
+    [SurfaceVariant.RAISED]: recipe({
+        // Popover / dropdown — floats above the page, gets a slightly tighter
+        // radius than BASE to feel "cut from" the larger card surface (one tier
+        // smaller, never two; previously `rounded-md` was visibly inconsistent
+        // when popovers stacked next to cards).
+        // `fill-surface-overlay` mirrors the background so SVG children that paint
+        // via `fill` — notably the Tooltip's Radix arrow — inherit the body colour
+        // (CSS `fill` inherits across Radix's arrow wrapper span; `background` does
+        // not). Keep `fill-*` in lockstep with `bg-*` here.
+        base: "bg-surface-overlay fill-surface-overlay text-surface-overlay-foreground rounded-md border shadow-md",
+        motion: {
+            enter: MOTION.enterDirectional,
+            exit: MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.OVERLAY]: recipe({
+        // Dialog / sheet — the heaviest, most modal surface; matches BASE radius
+        // 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-md` here was visually demoting dialogs.
+        base: "bg-surface-overlay text-surface-overlay-foreground rounded-lg border shadow-lg",
+        motion: {
+            enter: MOTION.enterFadeZoom,
+            exit: MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.INSET]: recipe({
+        base: "bg-surface-inset text-surface-inset-foreground",
+    }),
+    [SurfaceVariant.SUNKEN]: recipe({
+        base: "bg-surface-sunken text-surface-sunken-foreground",
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // Tab panel joins to the tab strip: same visual language as BASE, but no
+        // border/shadow so the surface policy can own the join.
+        base: "bg-surface-raised text-surface-raised-foreground rounded-b-lg",
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // App/page shell: chromaless raised background. Landmark semantics remain
+        // opt-in via policy config.
+        base: "bg-surface-raised text-surface-raised-foreground",
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        // Toast/snackbar: compact floating card, visually between RAISED and OVERLAY.
+        base: "bg-surface-overlay text-surface-overlay-foreground rounded-md border shadow-md",
+        motion: {
+            enter: MOTION.enterDirectional,
+            exit: MOTION.exitFadeZoom,
+        },
+    }),
+};
+// ============================================================
+// FORM_CONTROL — Inputs, textareas, select triggers
+// ============================================================
+const formControl = {
+    [FormControlVariant.DEFAULT]: recipe({
+        base: "border-border dark:bg-surface-inset/30 rounded-md 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)]",
+            invalid: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        },
+        sizes: {
+            md: "h-8 px-2.5 py-1 pointer-coarse:min-h-11",
+            sm: "h-7 px-2 py-1 text-sm pointer-coarse:min-h-11",
+            lg: "h-9 px-3 py-1.5 pointer-coarse:min-h-11",
+        },
+        motion: { transition: MOTION.formControl },
+    }),
+    [FormControlVariant.FILLED]: recipe({
+        base: "bg-muted rounded-md border-0 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)]",
+            invalid: "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        },
+        sizes: {
+            md: "h-8 px-2.5 py-1 pointer-coarse:min-h-11",
+            sm: "h-7 px-2 py-1 text-sm pointer-coarse:min-h-11",
+            lg: "h-9 px-3 py-1.5 pointer-coarse:min-h-11",
+        },
+        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",
+        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)]",
+            invalid: "aria-invalid:border-destructive",
+        },
+        sizes: {
+            md: "h-9 px-0 py-1 pointer-coarse:min-h-11",
+            sm: "h-8 px-0 py-1 text-sm pointer-coarse:min-h-11",
+            lg: "h-10 px-0 py-2 pointer-coarse:min-h-11",
+        },
+        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",
+        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",
+            disabled: "disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
+            invalid: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        },
+        motion: { transition: "transition-[color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none" },
+    }),
+    [FormControlVariant.SWITCH]: recipe({
+        base: "data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 border border-transparent shadow-xs",
+        states: {
+            focus: FOCUS_RING_OFFSET_WITH_BORDER,
+            selected: "data-[state=checked]:bg-primary",
+            disabled: "disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]",
+            invalid: "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        },
+        motion: { transition: "transition-[background-color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-default)] motion-reduce:transition-none" },
+    }),
+};
+// ============================================================
+// INDICATOR — Badges, alerts, toast severity
+// ============================================================
+const indicatorShared = {
+    states: {
+        hover: "[a&]:hover:opacity-[var(--opacity-hover)]",
+        focus: `focus-visible:border-ring ${FOCUS_RING_COMPACT}`,
+        invalid: interactiveInvalid,
+    },
+    // DENSE keeps the pulse subtle to match its compact chrome. Reduced-motion safe.
+    motion: { transition: MOTION.interactive, attention: "animate-pulse motion-reduce:animate-none" },
+};
+// TONAL badges (T1 + T1b) — tinted background + AA-contrast text + hairline
+// border, in place of the previous solid full-saturation fills. Reads calmer
+// and modern (Linear/Stripe/shadcn) and lets many status chips coexist on one
+// row without the "wall of solid colour" effect.
+//
+// The tint (`bg-{status}-subtle`) and text (`text-{status}-subtle-foreground`)
+// come from dedicated SUBTLE STATUS TOKENS (T1b), not per-recipe `/10` mixes.
+// Those tokens are palette-adaptive `color-mix()` formulas emitted by the design
+// -token CSS generator (`design-tokens-css.shared.ts` → `buildSubtleStatusColors`),
+// tuned so 12px badge text clears WCAG-AA (≥4.5) against its tint in BOTH light
+// and dark — including the amber WARNING case that fails contrast with a naive
+// same-hue text. Because the tokens reference the base `--{status}` vars, a
+// palette retune (or a light/dark switch) retunes the chip automatically, and a
+// tenant can override any pair via `DesignSystemToken.*_SUBTLE(_FOREGROUND)`.
+// The border stays on the palette base (`border-{status}/25`, `/30` for warning
+// where the base is lighter) so it tracks the same hue.
+//
+// DENSE delta: badges keep the AA-safe subtle tokens (using the raw `text-{status}`
+// here would reintroduce the light-mode contrast failure T1b fixed) but tighten to
+// `px-1.5 py-0` for a compact chip. A further "quiet tint + neutral text + colored
+// status dot" pass needs a badge-component-level dot, so it is intentionally NOT a
+// recipe change — deferred as a component-layer refinement.
+const indicator = {
+    [IndicatorVariant.NEUTRAL]: recipe({
+        // Tonal like the other four — see default.theme.ts for the rationale. Fixes the
+        // sub-AA washed-out grey chip that raw `text-muted-foreground` on `bg-muted`
+        // produced for `default`/`secondary`/`outline` enum values.
+        base: "bg-neutral-subtle text-neutral-subtle-foreground border-border rounded-md border px-1.5 py-0 text-xs font-medium",
+        ...indicatorShared,
+    }),
+    [IndicatorVariant.INFO]: recipe({
+        base: "bg-info-subtle text-info-subtle-foreground border-info/25 rounded-md border px-1.5 py-0 text-xs font-medium",
+        ...indicatorShared,
+    }),
+    [IndicatorVariant.SUCCESS]: recipe({
+        base: "bg-success-subtle text-success-subtle-foreground border-success/25 rounded-md border px-1.5 py-0 text-xs font-medium",
+        ...indicatorShared,
+    }),
+    [IndicatorVariant.WARNING]: recipe({
+        base: "bg-warning-subtle text-warning-subtle-foreground border-warning/30 rounded-md border px-1.5 py-0 text-xs font-medium",
+        ...indicatorShared,
+    }),
+    [IndicatorVariant.ERROR]: recipe({
+        base: "bg-destructive-subtle text-destructive-subtle-foreground border-destructive/25 rounded-md border px-1.5 py-0 text-xs font-medium",
+        ...indicatorShared,
+    }),
+};
+// ============================================================
+// SELECTABLE — Tabs, sidebar active items, toggles
+// ============================================================
+const selectable = {
+    [SelectableVariant.FILLED]: recipe({
+        base: "rounded-md text-sm outline-hidden ring-surface-sunken-border",
+        states: {
+            hover: "hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground",
+            focus: "focus-visible:ring-2",
+            active: "active:bg-surface-sunken-accent active:text-surface-sunken-foreground",
+            selected: "data-[active=true]:bg-surface-sunken-accent data-[active=true]:font-medium data-[active=true]:text-surface-sunken-foreground data-[state=active]:bg-surface-sunken-accent data-[state=active]:text-surface-sunken-foreground",
+            disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)] aria-disabled:pointer-events-none aria-disabled:opacity-[var(--opacity-disabled)]",
+        },
+        sizes: {
+            sm: "h-7 text-xs",
+            md: "h-8 text-sm",
+            lg: "h-12 text-sm",
+        },
+        motion: { transition: MOTION.selectable },
+    }),
+    [SelectableVariant.UNDERLINE]: recipe({
+        base: "rounded-none border-b-2 border-transparent text-sm outline-hidden",
+        states: {
+            hover: "hover:text-foreground",
+            focus: FOCUS_RING_COMPACT,
+            selected: "data-[state=active]:border-primary data-[state=active]:text-foreground",
+            disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
+        },
+        sizes: {
+            sm: "h-7 text-xs pb-1",
+            md: "h-8 text-sm pb-2",
+            lg: "h-10 text-sm pb-3",
+        },
+        motion: { transition: MOTION.selectable },
+    }),
+    [SelectableVariant.PILL]: recipe({
+        base: "rounded-full text-sm outline-hidden",
+        states: {
+            hover: "hover:bg-accent hover:text-accent-foreground",
+            focus: FOCUS_RING_COMPACT,
+            selected: "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+            disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
+        },
+        sizes: {
+            sm: "h-7 px-3 text-xs",
+            md: "h-8 px-4 text-sm",
+            lg: "h-10 px-5 text-sm",
+        },
+        motion: { transition: MOTION.selectable },
+    }),
+    [SelectableVariant.INDICATOR]: recipe({
+        base: "rounded-md text-sm outline-hidden",
+        states: {
+            hover: "hover:bg-surface-sunken-accent hover:text-surface-sunken-foreground",
+            focus: FOCUS_RING_COMPACT,
+            selected: "data-[active=true]:border-s-2 data-[active=true]:border-surface-sunken-primary data-[active=true]:font-medium data-[active=true]:text-surface-sunken-foreground",
+            disabled: "disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]",
+        },
+        sizes: {
+            sm: "h-7 text-xs",
+            md: "h-8 text-sm",
+            lg: "h-12 text-sm",
+        },
+        motion: { transition: MOTION.selectable },
+    }),
+};
+// ============================================================
+// OVERLAY_BACKDROP — Dialog/Sheet background overlay
+// ============================================================
+const overlayBackdrop = recipe({
+    // Tailwind v4's `bg-color/[var()]` opacity modifier uses color-mix() which
+    // doesn't resolve CSS custom property decimals correctly.
+    // Use arbitrary bg value with rgb() alpha channel instead.
+    base: "bg-[rgb(0_0_0_/_var(--opacity-overlay))] backdrop-blur-sm",
+    motion: {
+        enter: MOTION.backdropEnter,
+        exit: MOTION.backdropExit,
+    },
+});
+// ============================================================
+// DIVIDER — Separator
+// ============================================================
+const divider = recipe({
+    base: "bg-border shrink-0",
+});
+// ============================================================
+// SKELETON — Loading placeholders
+// ============================================================
+const skeleton = recipe({
+    base: "bg-accent animate-pulse rounded-md motion-reduce:animate-none",
+});
+const loadingSpinner = recipe({
+    base: "text-muted-foreground animate-spin motion-reduce:animate-none",
+});
+const loadingOverlay = recipe({
+    base: "bg-background/80",
+    motion: {
+        enter: "animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-enter)] motion-reduce:animate-none",
+        exit: "animate-out fade-out-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-exit)] motion-reduce:animate-none",
+    },
+});
+// ============================================================
+// TYPOGRAPHY — Text hierarchy
+// ============================================================
+const typography = {
+    [TypographyVariant.HEADING]: recipe({
+        base: "font-semibold leading-none tracking-tight",
+        // Heading scale rebalance — gaps were 12/4/2px (h1→h2→h3→h4); h1 at
+        // text-4xl (36px) jumped 1.5× to h2 (text-2xl, 24px), which felt
+        // disproportionate for in-app SaaS UI (text-4xl is a hero size).
+        // Compressing h1 to text-3xl yields a smooth 6/4/2px ladder
+        // (1.25× → 1.2× → 1.11×, classic Major Third base). Pages that want a
+        // hero h1 can opt in with `className="text-4xl sm:text-5xl"` since the
+        // size class is the LAST `text-*` to win in `cn()`.
+        sizes: {
+            h1: "text-3xl",
+            h2: "text-2xl",
+            h3: "text-xl",
+            h4: "text-lg",
+            md: "text-lg",
+        },
+    }),
+    [TypographyVariant.BODY]: recipe({
+        base: "text-foreground text-sm",
+        sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },
+    }),
+    [TypographyVariant.LABEL]: recipe({
+        base: "font-medium text-sm leading-none",
+        sizes: { sm: "text-xs", md: "text-sm", lg: "text-base" },
+    }),
+    [TypographyVariant.DESCRIPTION]: recipe({
+        base: "text-muted-foreground text-sm",
+        sizes: { sm: "text-xs", md: "text-sm" },
+    }),
+    [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" },
+    }),
+};
+// ============================================================
+// DENSE THEME — assembled (opt-in, Linear-grade)
+//
+// Derived from the default theme and compacted: shorter control/input sizes
+// (md h-8 · sm h-7 · lg h-9), one radius tier tighter (control `rounded-md`,
+// card `rounded-lg`), flat + hairline surfaces (no `shadow-sm` on cards).
+// Opt in per app: `theme: denseTheme` in `design-system.config.ts`.
+// Spacing uses the compact token set (`UI_SPACING_COMPACT`) so rows/gaps also
+// tighten, not just control heights.
+// ============================================================
+export const denseTheme = {
+    id: 'dense',
+    name: 'Dense',
+    description: 'Compact, Linear-grade opt-in variant of the default theme. Shorter controls/inputs (md h-8 · sm h-7 · lg h-9), one radius tier tighter (control rounded-md · card rounded-lg), flat + hairline surfaces (no card shadow). Same tonal badges, focus rings, and motion as default.',
+    spacing: UI_SPACING_COMPACT,
+    interactive,
+    surface,
+    formControl,
+    indicator,
+    selectable,
+    overlayBackdrop,
+    divider,
+    skeleton,
+    loadingSpinner,
+    loadingOverlay,
+    typography,
+    radius: undefined,
+    backgroundLayer: undefined,
+    chartStyle: DEFAULT_CHART_STYLE_PRESET,
+};
+//# sourceMappingURL=dense.theme.js.map