@wildo-ai/presets-components 1.0.1 → 1.1.0

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

@@ -0,0 +1,636 @@
+import { InteractiveVariant, SurfaceVariant, FormControlVariant, IndicatorVariant, SelectableVariant, TypographyVariant, SpacingSemantic, DesignTokenModeStrategy, DesignTokenValueType, } from '@wildo-ai/presets-components-models';
+function recipe(r) {
+    return { base: r.base, states: r.states ?? {}, sizes: r.sizes, motion: r.motion ?? {}, gesture: r.gesture, policy: r.policy };
+}
+// ============================================================
+// Terminal theme (Geist-inspired)
+//
+// Persona: developer tools, IDE-adjacent UIs, infra dashboards,
+// CLI companions, internal devops.
+// References: Vercel Geist, Linear, GitHub Primer, Raycast.
+//
+// Design DNA:
+//   - GEIST SANS for body + headings (precise, slightly condensed,
+//     designed for high-density UIs). Geist Mono for indicators,
+//     numerics, code, and keyboard hints — the "terminal" signal.
+//   - High density: smaller default control heights (h-7/h-8 ladder)
+//     and tighter spacing than default. The whole theme assumes a
+//     power user with a keyboard.
+//   - Crisp 1px borders using `border-foreground/15` — terminal apps
+//     are line-art, not box-shadow art.
+//   - 4–6px radius (`rounded-md` baseline) — IDE-like, not pill-y.
+//   - Near-monochrome palette + a single SIGNAL-GREEN accent
+//     (`oklch(0.72 0.20 145)`) — the unmistakable "active prompt /
+//     diff-add" color of every developer tool.
+//   - INSTANT motion (duration-fast, linear) — devs hate latency,
+//     real or perceived. No spring physics, no easing curves.
+//   - Square checkboxes (`rounded-sm`) — feels closer to a TTY.
+//   - Indicators are uppercase mono — small caps with kerning, like
+//     `[INFO]` / `[WARN]` log prefixes.
+// ============================================================
+// -- Shared constants --
+const TM = {
+    hairline: 'border border-foreground/15',
+    edge: 'border border-foreground/20',
+    radius: 'rounded-md',
+    radiusTight: 'rounded-sm',
+    focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+    disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+    invalid: 'aria-invalid:ring-destructive/30 dark:aria-invalid:ring-destructive/50 aria-invalid:border-destructive',
+};
+// ============================================================
+// MOTION PERSONALITY — Terminal
+// ============================================================
+//   Hover/focus  : FAST (150ms) + LINEAR  → snappy 1:1 input/output,
+//                                           no designerly choreography.
+//   Overlay enter: FAST (150ms) + LINEAR  → directional slide-1 (tight,
+//                                           matches compact density).
+//   Overlay exit : INSTANT (50ms) + LINEAR → close = vanish.
+//   Backdrop     : FAST/INSTANT + LINEAR  → consistent with overlays.
+//   Gestures     : NONE — devs expect direct manipulation; springs
+//                  read as "designed for marketing screenshots."
+//
+// Why LINEAR explicitly: the previous implementation set duration but
+// omitted ease- on overlay/backdrop animations. Browsers fell back to
+// the CSS default `ease` curve (cubic-bezier(0.25, 0.1, 0.25, 1)) — a
+// soft S-curve that contradicted the LINEAR personality. Every overlay
+// and backdrop now has explicit `ease-[var(--motion-easing-linear)]`
+// (TR-14 motion-coherence pass).
+// ============================================================
+const TM_MOTION = {
+    interactive: 'transition-[background-color,color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    formControl: 'transition-[color,border-color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    selectable: 'transition-[background-color,color,border-color] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+    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-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] motion-reduce:data-[state=open]:animate-none',
+    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-instant)] data-[state=closed]:ease-[var(--motion-easing-linear)] motion-reduce:data-[state=closed]:animate-none',
+    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-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 motion-reduce:data-[state=open]:animate-none',
+    backdropEnter: 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:duration-[var(--motion-duration-fast)] data-[state=open]:ease-[var(--motion-easing-linear)] 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-instant)] data-[state=closed]:ease-[var(--motion-easing-linear)] motion-reduce:data-[state=closed]:animate-none',
+};
+// ============================================================
+// INTERACTIVE
+// Compact ladder: h-7/h-8/h-9 by default (vs default theme's h-9/h-9/h-10).
+// This is the visual signal of a "power-user-density" theme.
+// ============================================================
+const interactiveSizes = {
+    xs: 'h-6 px-2 text-xs gap-1 pointer-coarse:min-h-9',
+    sm: 'h-7 px-2.5 gap-1 pointer-coarse:min-h-11',
+    md: 'h-8 px-3 gap-1.5 pointer-coarse:min-h-11',
+    lg: 'h-10 px-5 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 interactive = {
+    [InteractiveVariant.PRIMARY]: recipe({
+        base: `bg-primary text-primary-foreground ${TM.radius} font-medium text-sm cursor-pointer shadow-[inset_0_1px_0_0_rgba(255,255,255,0.08)]`,
+        states: {
+            hover: 'hover:bg-primary/90',
+            active: 'active:bg-primary/80',
+            focus: TM.focus,
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.SECONDARY]: recipe({
+        // Geist-style "secondary" = subtle bg with crisp border, the workhorse
+        // button on developer-tool pages. Distinguished from outline by having
+        // a fill at all (outline is fully transparent).
+        base: `bg-muted/40 text-foreground ${TM.hairline} ${TM.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/25',
+            active: 'active:bg-muted/80',
+            focus: TM.focus,
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.OUTLINE]: recipe({
+        base: `bg-transparent text-foreground ${TM.edge} ${TM.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/30',
+            active: 'active:bg-muted/80',
+            focus: TM.focus,
+            selected: 'data-[state=on]:bg-foreground data-[state=on]:text-background data-[state=on]:border-foreground',
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.DESTRUCTIVE]: recipe({
+        base: `bg-destructive text-destructive-foreground ${TM.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-destructive/90',
+            active: 'active:bg-destructive/80',
+            focus: TM.focus,
+            highlighted: 'focus:bg-destructive/15 focus:text-destructive',
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.GHOST]: recipe({
+        base: `text-foreground ${TM.radius} font-medium text-sm cursor-pointer`,
+        states: {
+            hover: 'hover:bg-muted',
+            active: 'active:bg-muted/80',
+            focus: TM.focus,
+            selected: 'data-[state=on]:bg-muted data-[state=on]:text-foreground',
+            highlighted: 'focus:bg-muted',
+            open: 'data-[state=open]:bg-muted',
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.LINK]: recipe({
+        // Mono-feel underline: `decoration-1` keeps it crisp, no thickening
+        // on hover (terminal links don't morph).
+        base: 'text-primary underline underline-offset-[3px] decoration-1 decoration-primary/60 font-medium text-sm cursor-pointer',
+        states: {
+            hover: 'hover:decoration-primary',
+            active: 'active:text-primary/80',
+            focus: TM.focus,
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: {
+            xs: 'h-6 px-1.5 text-xs gap-1 pointer-coarse:min-h-9',
+            sm: 'h-7 px-1.5 gap-1 pointer-coarse:min-h-11',
+            md: 'h-8 px-1.5 gap-1.5 pointer-coarse:min-h-11',
+            lg: 'h-10 px-1.5 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',
+        },
+        motion: { transition: TM_MOTION.interactive },
+    }),
+    [InteractiveVariant.ACCENT]: recipe({
+        // Terminal accent: a "scanline" sweep using mono font. Gradient stops
+        // resolve from theme tokens — the accent gradient defaults to
+        // green→cyan→blue (terminal phosphor → cyan IDE highlight → link blue).
+        base: 'relative bg-primary text-primary-foreground font-mono font-semibold tracking-tight rounded-md bg-[length:200%_100%] bg-gradient-to-r from-accent-gradient-from via-accent-gradient-via to-accent-gradient-to animate-[gradient-rotate_3s_linear_infinite] motion-reduce:animate-none text-sm cursor-pointer',
+        states: {
+            hover: 'hover:brightness-110',
+            active: 'active:brightness-95',
+            focus: TM.focus,
+            disabled: TM.disabled,
+            invalid: TM.invalid,
+        },
+        sizes: interactiveSizes,
+        motion: {
+            transition: 'transition-[background-position,filter] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// SURFACE
+// SURFACE PERSONALITY — crisp terminal panes: 1px line art, mono posture, low
+// elevation. New variants behave like attached panes and compact status blocks.
+// Cards/dialogs are line-art panels with crisp 1px borders and
+// minimal shadows. Popovers get a subtle drop because they need
+// to lift off the page — but never the heavy shadow of glass/cozy.
+// ============================================================
+const surface = {
+    [SurfaceVariant.BASE]: recipe({
+        base: `bg-background text-foreground ${TM.hairline} ${TM.radius}`,
+    }),
+    [SurfaceVariant.CARD]: recipe({
+        // Content card: distinct `surface-raised` fill + terminal edge + radius.
+        // Always painted.
+        base: `bg-surface-raised text-surface-raised-foreground ${TM.edge} ${TM.radius}`,
+    }),
+    [SurfaceVariant.RAISED]: recipe({
+        // `fill-*` mirrors `bg-*` so the Tooltip's Radix arrow (an SVG painted via
+        // `fill`, inherited across Radix's arrow-wrapper span) matches the body.
+        base: `bg-background fill-background text-foreground ${TM.edge} ${TM.radius} shadow-[0_2px_8px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_8px_rgba(0,0,0,0.5)]`,
+        motion: {
+            enter: TM_MOTION.enterDirectional,
+            exit: TM_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.OVERLAY]: recipe({
+        base: `bg-background text-foreground ${TM.edge} ${TM.radius} shadow-[0_8px_32px_rgba(0,0,0,0.10)] dark:shadow-[0_8px_32px_rgba(0,0,0,0.6)]`,
+        motion: {
+            enter: TM_MOTION.enterFadeZoom,
+            exit: TM_MOTION.exitFadeZoom,
+        },
+    }),
+    [SurfaceVariant.INSET]: recipe({
+        base: `bg-muted/50 text-foreground ${TM.radiusTight} font-mono`,
+    }),
+    [SurfaceVariant.SUNKEN]: recipe({
+        // Sidebar: terminal-app left rail — slightly darker bg, crisp right border.
+        base: 'bg-muted/30 text-foreground border-r border-foreground/15',
+    }),
+    [SurfaceVariant.TAB_PANEL]: recipe({
+        // Terminal tab panel: a crisp continuation, top rule omitted.
+        base: 'bg-background text-foreground border-x border-b border-foreground/15 rounded-b-md',
+    }),
+    [SurfaceVariant.SHELL]: recipe({
+        // Page shell: flat terminal canvas; nested panels draw the line art.
+        base: 'bg-background text-foreground font-mono',
+    }),
+    [SurfaceVariant.TRANSIENT]: recipe({
+        // Toast: compact terminal status panel.
+        base: `bg-background text-foreground ${TM.edge} ${TM.radius} font-mono shadow-[0_4px_16px_rgba(0,0,0,0.10)] dark:shadow-[0_4px_16px_rgba(0,0,0,0.6)]`,
+        motion: {
+            enter: TM_MOTION.enterDirectional,
+            exit: TM_MOTION.exitFadeZoom,
+        },
+    }),
+};
+// ============================================================
+// FORM_CONTROL
+// Tight, crisp, square-ish. Checkbox is `rounded-sm` (closer to TTY).
+// ============================================================
+const formControl = {
+    [FormControlVariant.DEFAULT]: recipe({
+        base: `bg-background ${TM.edge} ${TM.radius} text-base md:text-sm text-foreground placeholder:text-muted-foreground/60 selection:bg-primary/30 selection:text-foreground`,
+        states: {
+            focus: TM.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TM.invalid,
+        },
+        sizes: {
+            md: 'h-8 px-2.5 py-1 pointer-coarse:min-h-11',
+            sm: 'h-7 px-2 text-sm pointer-coarse:min-h-11',
+            lg: 'h-10 px-3 py-2 pointer-coarse:min-h-11',
+        },
+        motion: { transition: TM_MOTION.formControl },
+    }),
+    [FormControlVariant.FILLED]: recipe({
+        base: `bg-muted/60 ${TM.radius} border-0 text-base md:text-sm text-foreground placeholder:text-muted-foreground/60`,
+        states: {
+            focus: TM.focus,
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TM.invalid,
+        },
+        sizes: {
+            md: 'h-8 px-2.5 py-1 pointer-coarse:min-h-11',
+            sm: 'h-7 px-2 text-sm pointer-coarse:min-h-11',
+            lg: 'h-10 px-3 py-2 pointer-coarse:min-h-11',
+        },
+        motion: { transition: TM_MOTION.formControl },
+    }),
+    [FormControlVariant.UNDERLINED]: recipe({
+        base: 'bg-transparent border-0 border-b border-foreground/25 rounded-none text-base md:text-sm text-foreground placeholder:text-muted-foreground/60',
+        states: {
+            focus: 'focus-visible:outline-none focus-visible:border-primary focus-visible:border-b-2',
+            disabled: 'disabled:opacity-[var(--opacity-disabled)]',
+            invalid: 'aria-invalid:border-destructive',
+        },
+        sizes: {
+            md: 'h-8 px-0 py-1 pointer-coarse:min-h-11',
+            sm: 'h-7 px-0 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-linear)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.CHECKBOX]: recipe({
+        // `rounded-sm` (3px) — feels like a TTY checkbox `[x]`, not a pill.
+        base: `${TM.edge} ${TM.radiusTight}`,
+        states: {
+            focus: TM.focus,
+            selected: 'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TM.invalid,
+        },
+        motion: {
+            transition: 'transition-[color,box-shadow] duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+    [FormControlVariant.SWITCH]: recipe({
+        base: 'data-[state=unchecked]:bg-muted/60 border border-foreground/20',
+        states: {
+            focus: TM.focus,
+            selected: 'data-[state=checked]:bg-primary',
+            disabled: 'disabled:cursor-not-allowed disabled:opacity-[var(--opacity-disabled)]',
+            invalid: TM.invalid,
+        },
+        motion: {
+            transition: 'transition-all duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:transition-none',
+        },
+    }),
+};
+// ============================================================
+// INDICATOR
+// Mono uppercase + bracket-feel — `[INFO]` / `[WARN]` / `[ERROR]`,
+// without literally adding the brackets (those would clash with badge
+// rendering inside other components). Tight padding, crisp border.
+// ============================================================
+const tmIndicatorShared = {
+    states: { hover: '[a&]:hover:opacity-[var(--opacity-hover)]', focus: TM.focus, invalid: TM.invalid },
+    motion: { transition: TM_MOTION.interactive },
+};
+const indicator = {
+    [IndicatorVariant.NEUTRAL]: recipe({
+        base: `bg-muted/50 text-muted-foreground ${TM.radiusTight} ${TM.hairline} px-1.5 py-0.5 text-[0.625rem] font-mono font-semibold uppercase tracking-wider`,
+        ...tmIndicatorShared,
+    }),
+    [IndicatorVariant.INFO]: recipe({
+        base: `bg-info/15 text-info ${TM.radiusTight} border border-info/30 px-1.5 py-0.5 text-[0.625rem] font-mono font-semibold uppercase tracking-wider`,
+        ...tmIndicatorShared,
+    }),
+    [IndicatorVariant.SUCCESS]: recipe({
+        base: `bg-success/15 text-success ${TM.radiusTight} border border-success/30 px-1.5 py-0.5 text-[0.625rem] font-mono font-semibold uppercase tracking-wider`,
+        ...tmIndicatorShared,
+    }),
+    [IndicatorVariant.WARNING]: recipe({
+        base: `bg-warning/15 text-warning ${TM.radiusTight} border border-warning/30 px-1.5 py-0.5 text-[0.625rem] font-mono font-semibold uppercase tracking-wider`,
+        ...tmIndicatorShared,
+    }),
+    [IndicatorVariant.ERROR]: recipe({
+        base: `bg-destructive/15 text-destructive ${TM.radiusTight} border border-destructive/30 px-1.5 py-0.5 text-[0.625rem] font-mono font-semibold uppercase tracking-wider`,
+        ...tmIndicatorShared,
+    }),
+};
+// ============================================================
+// SELECTABLE
+// Compact, crisp. Underline tab uses 2px solid (vs editorial's
+// hairline-becomes-2px) — no animation curve, just on/off.
+// ============================================================
+const selectable = {
+    [SelectableVariant.FILLED]: recipe({
+        base: `${TM.radius} text-sm outline-hidden`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70',
+            selected: 'data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-medium data-[state=active]:bg-muted data-[state=active]:text-foreground',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-6 text-xs', md: 'h-7 text-sm', lg: 'h-10 text-sm' },
+        motion: { transition: TM_MOTION.selectable },
+    }),
+    [SelectableVariant.UNDERLINE]: recipe({
+        base: 'rounded-none border-b-2 border-transparent text-sm text-muted-foreground outline-hidden',
+        states: {
+            hover: 'hover:text-foreground',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70',
+            selected: 'data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:font-medium',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-7 text-xs pb-1', md: 'h-8 text-sm pb-1.5', lg: 'h-10 text-sm pb-2' },
+        motion: { transition: TM_MOTION.selectable },
+    }),
+    [SelectableVariant.PILL]: recipe({
+        base: `${TM.radius} text-sm outline-hidden ${TM.hairline} border-transparent`,
+        states: {
+            hover: 'hover:bg-muted hover:border-foreground/15',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70',
+            selected: 'data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-6 px-2 text-xs', md: 'h-7 px-3 text-sm', lg: 'h-9 px-4 text-sm' },
+        motion: { transition: TM_MOTION.selectable },
+    }),
+    [SelectableVariant.INDICATOR]: recipe({
+        base: `${TM.radius} text-sm outline-hidden border-s-2 border-transparent`,
+        states: {
+            hover: 'hover:bg-muted',
+            focus: 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70',
+            selected: 'data-[active=true]:border-primary data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-medium',
+            disabled: 'disabled:pointer-events-none disabled:opacity-[var(--opacity-disabled)]',
+        },
+        sizes: { sm: 'h-6 text-xs', md: 'h-7 text-sm', lg: 'h-10 text-sm' },
+        motion: { transition: TM_MOTION.selectable },
+    }),
+};
+// ============================================================
+// OVERLAY, DIVIDER, SKELETON
+// ============================================================
+const overlayBackdrop = recipe({
+    // Terminal scrim: dark, no blur (devs hate "blurry IDE" feel).
+    base: 'bg-foreground/50',
+    motion: {
+        enter: TM_MOTION.backdropEnter,
+        exit: TM_MOTION.backdropExit,
+    },
+});
+const divider = recipe({ base: 'bg-foreground/15 shrink-0' });
+const skeleton = recipe({
+    base: `bg-muted/60 animate-pulse ${TM.radiusTight} motion-reduce:animate-none`,
+});
+const loadingSpinner = recipe({
+    base: 'text-primary animate-spin motion-reduce:animate-none',
+});
+const loadingOverlay = recipe({
+    base: 'bg-background/85',
+    motion: {
+        enter: 'animate-in fade-in-0 duration-[var(--motion-duration-fast)] ease-[var(--motion-easing-linear)] motion-reduce:animate-none',
+        exit: 'animate-out fade-out-0 duration-[var(--motion-duration-instant)] ease-[var(--motion-easing-linear)] motion-reduce:animate-none',
+    },
+});
+// ============================================================
+// TYPOGRAPHY
+// Geist Sans for everything except CODE (Geist Mono). Heading scale
+// stays close to default (devs don't want hero-sized h1 on a settings
+// page) but BODY drops to text-[0.8125rem] for the dense feel.
+// LABEL is mono uppercase — small caps tracking, log-prefix vibe.
+// ============================================================
+const typography = {
+    [TypographyVariant.HEADING]: recipe({
+        base: 'font-heading font-semibold leading-tight tracking-tight text-foreground',
+        sizes: {
+            h1: 'text-3xl',
+            h2: 'text-2xl',
+            h3: 'text-lg',
+            h4: 'text-base',
+            md: 'text-base',
+        },
+    }),
+    [TypographyVariant.BODY]: recipe({
+        // 13px body — IDE-density, not article-density. Default uses 14px.
+        // `font-sans` (NOT `font-body`) — only `font-sans/serif/mono/heading/display`
+        // are exposed as Tailwind utilities via @theme; `font-sans` resolves to
+        // `var(--font-body)` which our requiredCustomTokens overrides to Geist.
+        // Using `font-body` here would silently no-op.
+        base: 'font-sans text-foreground text-[0.8125rem] leading-snug',
+        sizes: { sm: 'text-xs', md: 'text-[0.8125rem]', lg: 'text-sm' },
+    }),
+    [TypographyVariant.LABEL]: recipe({
+        // Mono uppercase: the "log prefix" / "CLI flag" idiom.
+        base: 'font-mono font-medium text-2xs leading-none uppercase tracking-[0.08em] text-muted-foreground',
+        sizes: { sm: 'text-[0.5625rem]', md: 'text-2xs', lg: 'text-xs' },
+    }),
+    [TypographyVariant.DESCRIPTION]: recipe({
+        base: 'font-sans text-muted-foreground text-xs leading-snug',
+        sizes: { sm: 'text-[0.6875rem]', md: 'text-xs' },
+    }),
+    [TypographyVariant.CODE]: recipe({
+        // Inline code: tighter padding, mono, sharp corners.
+        base: 'font-mono text-[0.85em] bg-muted/60 rounded-sm px-1 py-0.5 border border-foreground/10',
+        sizes: { sm: 'text-[0.75em]', md: 'text-[0.85em]', lg: 'text-[0.9em]' },
+    }),
+};
+// ============================================================
+// SPACING
+// Tightest in lineup. Devs want to see more on screen.
+// ============================================================
+const spacing = {
+    [SpacingSemantic.ELEMENT]: '0.375rem',
+    [SpacingSemantic.ITEM]: '0.1875rem',
+    [SpacingSemantic.GROUP]: '0.625rem',
+    [SpacingSemantic.FIELD]: '0.875rem',
+    [SpacingSemantic.SECTION]: '1.25rem',
+    [SpacingSemantic.REGION]: '1.75rem',
+    [SpacingSemantic.CARD]: '0.875rem',
+    [SpacingSemantic.CONTAINER]: '1.25rem',
+};
+// ============================================================
+// REQUIRED CUSTOM TOKENS — Geist palette + Geist font stacks
+//
+// Same `requiredCustomTokens` mechanism as neo-brutalist + editorial.
+// The Geist family is the visual signature of the theme — anything
+// else and you get "default theme but tighter".
+// ============================================================
+function colorOverride(lightOklch, darkOklch) {
+    return {
+        type: DesignTokenValueType.COLOR,
+        modeStrategy: DesignTokenModeStrategy.LIGHT_DARK,
+        lightValue: lightOklch,
+        darkValue: darkOklch,
+    };
+}
+function colorSingle(oklch) {
+    return { type: DesignTokenValueType.COLOR, modeStrategy: DesignTokenModeStrategy.SINGLE, value: oklch };
+}
+function stringSingle(value) {
+    return { type: DesignTokenValueType.STRING, modeStrategy: DesignTokenModeStrategy.SINGLE, value };
+}
+const requiredCustomTokens = {
+    // === Page palette: pure-ish whites/blacks. Slight cool tint (hue 240)
+    // matches Geist's documentation site exactly (`oklch(...)` derivations
+    // from Vercel's published design tokens).
+    background: colorOverride('1 0 0', '0.13 0.005 240'),
+    foreground: colorOverride('0.16 0.005 240', '0.97 0 0'),
+    // === Signal green primary: the "active prompt / diff-add / git-add"
+    // color of every developer tool.
+    //
+    // ⚠ Wave G follow-up TR-13 (contrast correction): a high-luminance hue
+    // (green at L=0.55 chroma 0.18 hue 145 → sRGB Y≈0.30) gives only ~3.0:1
+    // contrast against pure white text, well below WCAG AA 4.5:1. Earlier
+    // self-review claimed 5.1:1 — that was an OKLCH-L → sRGB-Y conversion
+    // mistake (OKLCH L is perceptual; for green hues sRGB Y rises faster
+    // than L would suggest). Fix: keep the signal-green hue/L (the visual
+    // signature of the theme) and flip the FOREGROUND to near-black in
+    // BOTH modes. This is also the canonical "matrix / phosphor terminal"
+    // aesthetic — dark text on neon green is THE iconic developer-tool
+    // look, never white-on-green. New contrast: L=0.55 vs L=0.10 ≈ 5.5:1
+    // (light), L=0.72 vs L=0.10 ≈ 7.5:1 (dark). Both AA, dark mode AAA.
+    primary: colorOverride('0.55 0.18 145', '0.72 0.20 145'),
+    'primary-foreground': colorSingle('0.10 0.005 240'),
+    // === Secondary surface: subtle off-white / off-black. Distinguishes
+    // from background but stays in the monochrome family.
+    secondary: colorOverride('0.965 0.002 240', '0.18 0.005 240'),
+    'secondary-foreground': colorOverride('0.16 0.005 240', '0.97 0 0'),
+    // === Muted: the "code block" / inset background.
+    muted: colorOverride('0.955 0.002 240', '0.20 0.005 240'),
+    'muted-foreground': colorOverride('0.45 0.005 240', '0.62 0.005 240'),
+    // === Borders: crisp but not loud — terminal apps live on grid lines.
+    border: colorOverride('0.90 0.003 240', '0.27 0.005 240'),
+    ring: colorOverride('0.55 0.18 145', '0.72 0.20 145'),
+    input: colorOverride('0.90 0.003 240', '0.27 0.005 240'),
+    // === Destructive: GitHub-style red.
+    destructive: colorOverride('0.58 0.22 27', '0.65 0.24 27'),
+    'destructive-foreground': colorSingle('1 0 0'),
+    // === Semantic info/success/warning — terminal-tool palette
+    // (matches `tput setaf` vibes: cyan/green/yellow). Override these so
+    // the theme doesn't depend on the host shipping reasonable defaults.
+    // TR-13: same OKLCH→sRGB luminance issue as primary. info-blue at
+    // L=0.62 hue 220 has sRGB Y≈0.27 → ~3.4:1 with white. success-green
+    // is the same signal-green as primary → same ~3.0:1 with white.
+    // Flip both foregrounds to near-black for AA in light mode (≥5:1).
+    // Dark mode still uses dark foreground for visual consistency
+    // (info/success indicators read as a coherent semantic family).
+    info: colorOverride('0.62 0.13 220', '0.72 0.15 220'),
+    'info-foreground': colorSingle('0.10 0.005 240'),
+    success: colorOverride('0.55 0.18 145', '0.72 0.20 145'),
+    'success-foreground': colorSingle('0.10 0.005 240'),
+    warning: colorOverride('0.72 0.16 70', '0.78 0.18 70'),
+    'warning-foreground': colorSingle('0.10 0.005 240'),
+    // === Accent gradient: green → cyan → blue (terminal phosphor sweep).
+    // Matches the LINK + PRIMARY colors so the ACCENT recipe feels in-family.
+    'accent-gradient-from': colorOverride('0.55 0.18 145', '0.72 0.20 145'),
+    'accent-gradient-via': colorOverride('0.62 0.13 220', '0.72 0.15 220'),
+    'accent-gradient-to': colorOverride('0.55 0.16 250', '0.65 0.18 250'),
+    // === Font stacks: Geist family. Geist is the visual signal of the
+    // theme. Hosts that @font-face Geist Sans + Geist Mono get the
+    // canonical look; fallback chain reaches Inter / SF Pro / Cascadia /
+    // JetBrains Mono — all "developer-friendly" sans+mono.
+    'font-heading': stringSingle("'Geist', 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif"),
+    'font-body': stringSingle("'Geist', 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif"),
+    'font-mono': stringSingle("'Geist Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'IBM Plex Mono', 'Menlo', 'Consolas', monospace"),
+};
+// ============================================================
+// ASSEMBLED THEME
+// ============================================================
+export const terminalTheme = {
+    id: 'terminal',
+    name: 'Terminal',
+    description: 'Geist-inspired theme for developer tools, IDE-adjacent UIs, infra dashboards. Geist Sans body + Geist Mono labels/indicators/code. High density (h-7/h-8 control ladder, tightest spacing in lineup), crisp 1px hairlines, 4–6px radius (3px on checkboxes for TTY feel). Near-monochrome palette + signal-green primary (the universal "active prompt / diff-add" color). Instant linear motion (no easing curves, no spring physics). Mono uppercase indicators with small-caps tracking — the "[INFO]/[WARN]/[ERROR]" log-prefix idiom. Ships its own Geist font stacks via requiredCustomTokens.',
+    requiredCustomTokens,
+    spacing,
+    interactive,
+    surface,
+    formControl,
+    indicator,
+    selectable,
+    overlayBackdrop,
+    divider,
+    skeleton,
+    loadingSpinner,
+    loadingOverlay,
+    typography,
+    radius: '6px',
+    backgroundLayer: undefined,
+    chartStyle: {
+        // Terminal charts: dense, instant, mono labels, thin lines.
+        colorShadeLight: 500,
+        colorShadeDark: 400,
+        gridPadding: { top: 24, right: 16, bottom: 24, left: 48 },
+        axis: {
+            showAxisLine: true,
+            showTicks: true,
+            splitLineType: 'dashed',
+            hideOverlap: true,
+            yAxisNameLocation: 'middle',
+            yAxisNameGap: 40,
+        },
+        tooltip: {
+            extraCss: 'font-family: "Geist Mono", "JetBrains Mono", monospace; border: 1px solid color-mix(in oklch, currentColor 25%, transparent); border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);',
+            borderWidth: 1,
+        },
+        animation: { enabled: true, durationMs: 150, easing: 'linear' },
+        series: { lineWidth: 1.5, pointSize: 3, areaOpacity: 0.12, barBorderRadius: 2, pieBorderWidth: 1 },
+        typography: {
+            titleFontSize: 14,
+            titleFontWeight: 600,
+            subtitleFontSize: 12,
+            legendFontSize: 11,
+            tooltipFontSize: 11,
+            axisLabelFontSize: 10,
+            axisNameFontSize: 11,
+        },
+        emphasis: { shadowBlur: 4, shadowColor: 'rgba(0, 0, 0, 0.15)', shadowOffsetX: 0 },
+        responsive: {
+            smallMaxWidth: 400,
+            mediumMaxWidth: 799,
+            smallGridPadding: { top: 16, right: 8, bottom: 16, left: 24 },
+            mediumGridPadding: { left: 40, right: 16, bottom: 32 },
+            hideLegendOnSmall: true,
+            smallAxisLabelRotate: 45,
+            smallFontSize: 9,
+            mediumFontSize: 10,
+        },
+        multiSeriesLegendBottomPadding: 40,
+    },
+};
+//# sourceMappingURL=terminal.theme.js.map