@hilum/ui 3.4.0 → 3.5.1

package/src/lib/interaction.ts

@@ -0,0 +1,102 @@
+import * as React from "react";
+
+export const motionClasses =
+  "transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-150 ease-out motion-reduce:transition-none";
+
+export const springMotionClasses =
+  "transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-200 ease-[cubic-bezier(0.2,0.9,0.2,1.15)] motion-reduce:transition-none";
+
+export const pressClasses = "active:scale-[0.97] motion-reduce:active:scale-100";
+
+export const focusRingClasses =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1";
+
+export const iconStrokeClasses =
+  "[&_svg]:transition-[stroke-width,transform,color] [&_svg]:duration-150 [&_svg]:ease-out group-hover:[&_svg]:stroke-[2]";
+
+export const controlSurfaceClasses =
+  "border border-border bg-card shadow-natural hover:border-ground-200 hover:shadow-elevated";
+
+export const surfaceElevationClasses = {
+  flat: "border border-border bg-card",
+  raised: "border border-border bg-card shadow-natural",
+  floating: "border border-border bg-card shadow-elevated",
+} as const;
+
+export const radiusClasses = {
+  control: "rounded-md",
+  panel: "rounded-xl",
+  pill: "rounded-full",
+} as const;
+
+export const menuItemClasses =
+  "relative flex min-h-10 cursor-default select-none items-center gap-2 rounded-md px-2.5 py-2 body outline-none transition-[background-color,color,box-shadow] duration-150 ease-out";
+
+export const menuItemActiveClasses =
+  "focus:bg-muted focus:text-foreground data-[highlighted]:bg-muted";
+
+export function useProximityIndex<T extends HTMLElement>(axis: "x" | "y" = "y") {
+  const containerRef = React.useRef<T | null>(null);
+  const itemRefs = React.useRef(new Map<number, HTMLElement>());
+  const frameRef = React.useRef<number | null>(null);
+  const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+
+  const registerItem = React.useCallback((index: number, node: HTMLElement | null) => {
+    if (node) itemRefs.current.set(index, node);
+    else itemRefs.current.delete(index);
+  }, []);
+
+  const onPointerMove = React.useCallback(
+    (event: React.PointerEvent<T>) => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+      const pointer = axis === "x" ? event.clientX : event.clientY;
+
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        let closestIndex: number | null = null;
+        let closestDistance = Number.POSITIVE_INFINITY;
+
+        itemRefs.current.forEach((node, index) => {
+          const rect = node.getBoundingClientRect();
+          const start = axis === "x" ? rect.left : rect.top;
+          const size = axis === "x" ? rect.width : rect.height;
+          const center = start + size / 2;
+          const distance = Math.abs(pointer - center);
+
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestIndex = index;
+          }
+        });
+
+        setActiveIndex(closestIndex);
+      });
+    },
+    [axis],
+  );
+
+  const clearActiveIndex = React.useCallback(() => {
+    if (frameRef.current !== null) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+    }
+    setActiveIndex(null);
+  }, []);
+
+  React.useEffect(
+    () => () => {
+      if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+    },
+    [],
+  );
+
+  return {
+    activeIndex,
+    containerRef,
+    registerItem,
+    handlers: {
+      onPointerMove,
+      onPointerLeave: clearActiveIndex,
+    },
+  };
+}

package/src/lib/scroll-fade.tsx

@@ -0,0 +1,241 @@
+"use client";
+
+import { useEffect, useState, type CSSProperties, type RefObject } from "react";
+import { useSurface } from "./surface-context";
+
+// ---------------------------------------------------------------------------
+// Scroll-edge primitives
+//
+// useScrollEdges tracks which edges of a scroll container have more content
+// beyond them; ScrollEdgeCue renders the affordance for one edge — a
+// surface-colour gradient fading the content out toward the edge, with a
+// small chevron hinting at the scroll direction. Together they give any
+// scrolling surface the same "there's more" cue the Select menu uses.
+// ---------------------------------------------------------------------------
+
+export interface ScrollEdges {
+  top: boolean;
+  bottom: boolean;
+  left: boolean;
+  right: boolean;
+}
+
+const NO_EDGES: ScrollEdges = {
+  top: false,
+  bottom: false,
+  left: false,
+  right: false,
+};
+
+export interface UseScrollEdgesOptions {
+  /** Attach/detach tracking. While false all edges read false. Callers whose
+   *  scroller mounts late (portals) must fold that into `enabled` so the
+   *  hook re-attaches once the element exists. Defaults to `true`. */
+  enabled?: boolean;
+  /** Which axes to measure. Defaults to `"vertical"`. */
+  axis?: "vertical" | "horizontal" | "both";
+}
+
+export function useScrollEdges(
+  ref: RefObject<HTMLElement | null>,
+  { enabled = true, axis = "vertical" }: UseScrollEdgesOptions = {},
+): ScrollEdges {
+  const [edges, setEdges] = useState<ScrollEdges>(NO_EDGES);
+
+  useEffect(() => {
+    if (!enabled) {
+      setEdges(NO_EDGES);
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+
+    const update = () => {
+      const next = { ...NO_EDGES };
+      if (axis !== "horizontal") {
+        const { scrollTop, scrollHeight, clientHeight } = el;
+        const overflowing = scrollHeight - clientHeight > 1;
+        next.top = overflowing && scrollTop > 1;
+        next.bottom = overflowing && scrollTop + clientHeight < scrollHeight - 1;
+      }
+      if (axis !== "vertical") {
+        const { scrollLeft, scrollWidth, clientWidth } = el;
+        const overflowing = scrollWidth - clientWidth > 1;
+        next.left = overflowing && scrollLeft > 1;
+        next.right = overflowing && scrollLeft + clientWidth < scrollWidth - 1;
+      }
+      // Bail out on no-op updates so observer churn doesn't re-render.
+      setEdges((prev) =>
+        prev.top === next.top &&
+        prev.bottom === next.bottom &&
+        prev.left === next.left &&
+        prev.right === next.right
+          ? prev
+          : next,
+      );
+    };
+
+    update();
+    // Recompute once layout settles after enter animations.
+    const raf = requestAnimationFrame(update);
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    // Async content (items loading in, streamed text) changes scrollHeight
+    // without resizing the container itself. Coalesce to one update per
+    // frame: update() reads layout, and doing that synchronously after
+    // every mutation forces a reflow per insertion in streaming content.
+    let moRaf = 0;
+    const scheduleUpdate = () => {
+      if (moRaf) return;
+      moRaf = requestAnimationFrame(() => {
+        moRaf = 0;
+        update();
+      });
+    };
+    const mo = new MutationObserver(scheduleUpdate);
+    mo.observe(el, { childList: true, subtree: true, characterData: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      if (moRaf) cancelAnimationFrame(moRaf);
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+      mo.disconnect();
+    };
+  }, [ref, enabled, axis]);
+
+  return edges;
+}
+
+// ---------------------------------------------------------------------------
+// ScrollEdgeCue
+// ---------------------------------------------------------------------------
+
+const CHEVRON_PATHS: Record<string, string> = {
+  top: "M6 15l6-6 6 6",
+  bottom: "M6 9l6 6 6-6",
+  left: "M15 6l-6 6 6 6",
+  right: "M9 6l6 6-6 6",
+};
+
+// Band size presets along the scroll axis. The chevron stays 16px in both.
+const CUE_SIZES = { tight: 32, comfortable: 60 } as const;
+
+export type ScrollEdgeCueSize = keyof typeof CUE_SIZES;
+
+export interface ScrollEdgeCueProps {
+  edge: "top" | "bottom" | "left" | "right";
+  visible: boolean;
+  /** `"sticky"` renders a zero-size sticky element placed inside the scroller
+   *  itself (before/after the scrolling content); `"absolute"` renders a plain
+   *  positioned band for an `absolute inset-0 pointer-events-none` overlay
+   *  sitting over the viewport. Defaults to `"sticky"`. */
+  mode?: "sticky" | "absolute";
+  /** Surface ladder level the gradient fades toward. Defaults to the level
+   *  provided by the nearest SurfaceProvider/Elevated — override only when
+   *  the scroller sits on a background outside the ladder. */
+  surfaceLevel?: number;
+  /** Band size along the scroll axis: `"tight"` (32px) or `"comfortable"`
+   *  (60px). The chevron is 16px in either. Defaults to `"comfortable"`. */
+  size?: ScrollEdgeCueSize;
+  /** Sticky-mode bleed in px so the band covers the scroller's padding
+   *  (e.g. 4 for `p-1`, 16 for `p-4`). Defaults to 4. */
+  inset?: number;
+  /** Show the directional chevron in the band. The gradient fade always
+   *  renders; set to `false` for a fade-only cue. Defaults to `true`. */
+  chevron?: boolean;
+}
+
+export function ScrollEdgeCue({
+  edge,
+  visible,
+  mode = "sticky",
+  surfaceLevel,
+  size = "comfortable",
+  inset = 4,
+  chevron = true,
+}: ScrollEdgeCueProps) {
+  const contextLevel = useSurface();
+  // Clamp to the ladder (1–8), mirroring SurfaceProvider — an out-of-range
+  // override would interpolate an invalid var and silently kill the gradient.
+  const level = Math.max(1, Math.min(8, surfaceLevel ?? contextLevel));
+  const surface = `var(--surface-${level})`;
+  const vertical = edge === "top" || edge === "bottom";
+  const sizePx = CUE_SIZES[size];
+  // Gradient direction where 100% == the hard outer edge.
+  const dir = `to ${edge}`;
+
+  const band = (
+    <div
+      style={
+        {
+          position: "absolute",
+          opacity: visible ? 1 : 0,
+          // Exit slightly faster than enter, per the animation guidelines.
+          transition: `opacity ${visible ? 160 : 120}ms ease`,
+          ...(mode === "sticky"
+            ? vertical
+              ? { left: -inset, right: -inset, [edge]: -inset, height: sizePx }
+              : { top: -inset, bottom: -inset, [edge]: -inset, width: sizePx }
+            : vertical
+              ? { left: 0, right: 0, [edge]: 0, height: sizePx }
+              : { top: 0, bottom: 0, [edge]: 0, width: sizePx }),
+        } as CSSProperties
+      }
+    >
+      <div
+        style={{
+          position: "absolute",
+          inset: 0,
+          background: `linear-gradient(${dir}, transparent 0%, color-mix(in srgb, ${surface} 75%, transparent) 65%, ${surface} 100%)`,
+        }}
+      />
+      {chevron && (
+        <svg
+          width={16}
+          height={16}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted-foreground"
+          style={
+            {
+              position: "absolute",
+              ...(vertical
+                ? { left: "50%", transform: "translateX(-50%)" }
+                : { top: "50%", transform: "translateY(-50%)" }),
+              [edge]: 8,
+            } as CSSProperties
+          }
+        >
+          <path d={CHEVRON_PATHS[edge]} />
+        </svg>
+      )}
+    </div>
+  );
+
+  if (mode === "absolute") {
+    return <div aria-hidden>{band}</div>;
+  }
+
+  // Sticky: a zero-size sticky anchor so the cue adds no layout extent.
+  return (
+    <div
+      aria-hidden
+      style={
+        {
+          position: "sticky",
+          [edge]: 0,
+          ...(vertical ? { height: 0 } : { width: 0 }),
+          zIndex: 30,
+          pointerEvents: "none",
+        } as CSSProperties
+      }
+    >
+      {band}
+    </div>
+  );
+}

package/src/lib/shape-context.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useCallback, type ReactNode } from "react";
+
+type ShapeVariant = "pill" | "rounded";
+
+const shapeOrder: ShapeVariant[] = ["rounded", "pill"];
+
+interface ShapeClasses {
+  item: string;
+  bg: string;
+  focusRing: string;
+  mergedBg: string;
+  container: string;
+  button: string;
+  input: string;
+  // Numeric counterparts of `bg` / `mergedBg`, in px. Needed where individual
+  // corners are animated (e.g. the selected-background merge/split animation),
+  // which requires per-corner numeric border-radii rather than a class.
+  bgRadius: number;
+  mergedRadius: number;
+}
+
+const shapeMap: Record<ShapeVariant, ShapeClasses> = {
+  pill: {
+    item: "rounded-[20px]",
+    bg: "rounded-[20px]",
+    // +2px over `item` because the focus ring sits 2px outside the element
+    // (top/left -2, width/height +4); this keeps the corners concentric so a
+    // pill element gets a pill ring (matches the rounded-mode 8px→10px bump).
+    focusRing: "rounded-[22px]",
+    mergedBg: "rounded-2xl",
+    container: "rounded-3xl",
+    button: "rounded-[20px]",
+    input: "rounded-[20px]",
+    bgRadius: 20,
+    mergedRadius: 16,
+  },
+  rounded: {
+    item: "rounded-lg",
+    bg: "rounded-lg",
+    focusRing: "rounded-[10px]",
+    mergedBg: "rounded-lg",
+    container: "rounded-xl",
+    button: "rounded-lg",
+    input: "rounded-lg",
+    bgRadius: 8,
+    mergedRadius: 8,
+  },
+};
+
+interface ShapeContextValue {
+  shape: ShapeVariant;
+  setShape: (shape: ShapeVariant) => void;
+  classes: ShapeClasses;
+}
+
+const ShapeContext = createContext<ShapeContextValue | null>(null);
+
+function useShape(): ShapeClasses {
+  const ctx = useContext(ShapeContext);
+  if (!ctx) return shapeMap.pill;
+  return ctx.classes;
+}
+
+function useShapeContext() {
+  const ctx = useContext(ShapeContext);
+  if (!ctx) throw new Error("useShapeContext must be used within a ShapeProvider");
+  return ctx;
+}
+
+function transitionShape(callback: () => void) {
+  const root = document.documentElement;
+  root.classList.add("transitioning");
+  void root.offsetHeight;
+  callback();
+  setTimeout(() => root.classList.remove("transitioning"), 200);
+}
+
+function ShapeProvider({
+  children,
+  defaultShape = "pill",
+}: {
+  children: ReactNode;
+  defaultShape?: ShapeVariant;
+}) {
+  const [shape, setShapeState] = useState<ShapeVariant>(defaultShape);
+
+  const setShape = useCallback((next: ShapeVariant) => {
+    transitionShape(() => setShapeState(next));
+  }, []);
+
+  // Global keyboard shortcut: R to cycle radius
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== "r" && e.key !== "R") return;
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === "INPUT" || tag === "TEXTAREA" || (e.target as HTMLElement)?.isContentEditable)
+        return;
+      e.preventDefault();
+      transitionShape(() => {
+        setShapeState((prev) => {
+          const idx = shapeOrder.indexOf(prev);
+          return shapeOrder[(idx + 1) % shapeOrder.length];
+        });
+      });
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  return (
+    <ShapeContext.Provider value={{ shape, setShape, classes: shapeMap[shape] }}>
+      {children}
+    </ShapeContext.Provider>
+  );
+}
+
+export { ShapeProvider, useShape, useShapeContext, shapeMap };
+export type { ShapeVariant, ShapeClasses };

package/src/lib/springs.ts

@@ -0,0 +1,30 @@
+// Motion tokens. Each tier's value is the ENTER transition — a spring, with a
+// little bounce on the larger tiers. Its `.exit` is the matching EXIT transition
+// — a plain tween, no bounce, one tier quicker — so a dismissal reads as crisp
+// and final rather than replaying the entrance in reverse.
+//
+//   transition={spring.fast}                              // enter
+//   exit={{ opacity: 0, transition: spring.fast.exit }}   // leave
+//
+// The bigger the thing that moves, the slower the spring. Never hand-write a
+// duration — always reach for a tier.
+export const spring = {
+  fast: {
+    type: "spring" as const,
+    duration: 0.08,
+    bounce: 0,
+    exit: { duration: 0.06 },
+  },
+  moderate: {
+    type: "spring" as const,
+    duration: 0.16,
+    bounce: 0.08,
+    exit: { duration: 0.12 },
+  },
+  slow: {
+    type: "spring" as const,
+    duration: 0.24,
+    bounce: 0.12,
+    exit: { duration: 0.16 },
+  },
+} as const;

package/src/lib/surface-classes.ts

@@ -0,0 +1,43 @@
+/**
+ * Static lookup tables for surface tokens.
+ *
+ * Tailwind v4's static scanner only generates utility classes for literal
+ * strings it sees in source. Template-literal class names like
+ * `bg-surface-${level}` are invisible to the scanner, so the matching
+ * utility never gets generated and the background renders transparent.
+ *
+ * Use these maps when picking a surface level at runtime:
+ *
+ *   <div className={surfaceClasses(level)} />
+ *
+ * Each entry below contains the literal class name, which is enough for
+ * Tailwind to detect and emit the utility.
+ */
+
+export const SURFACE_BG: Record<number, string> = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8",
+};
+
+export const SURFACE_SHADOW: Record<number, string> = {
+  1: "shadow-surface-1",
+  2: "shadow-surface-2",
+  3: "shadow-surface-3",
+  4: "shadow-surface-4",
+  5: "shadow-surface-5",
+  6: "shadow-surface-6",
+  7: "shadow-surface-7",
+  8: "shadow-surface-8",
+};
+
+export function surfaceClasses(bgLevel: number, shadowLevel: number = bgLevel): string {
+  const bg = Math.max(1, Math.min(8, bgLevel));
+  const shadow = Math.max(1, Math.min(8, shadowLevel));
+  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`;
+}

package/src/lib/surface-context.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { createContext, useContext, type ReactNode } from "react";
+
+const SurfaceContext = createContext<number>(1);
+
+export function useSurface(): number {
+  return useContext(SurfaceContext);
+}
+
+export function SurfaceProvider({ value, children }: { value: number; children: ReactNode }) {
+  return (
+    <SurfaceContext.Provider value={Math.max(1, Math.min(8, value))}>
+      {children}
+    </SurfaceContext.Provider>
+  );
+}

package/src/tokens/tokens.ts

@@ -323,6 +323,9 @@ export const tokens = {
     "accordion-down": "accordion-down 0.2s ease-out",
     "accordion-up": "accordion-up 0.2s ease-out",
     "caret-blink": "caret-blink 1.25s ease-out infinite",
+    "hilum-orbit": "hilum-orbit 1.4s ease-in-out infinite",
+    "hilum-spring-in": "hilum-spring-in 180ms cubic-bezier(0.2, 0.9, 0.2, 1.15)",
+    "hilum-thinking": "hilum-thinking 1.1s ease-in-out infinite",
   },
 } as const;
 

package/dist/chunk-MAHPAP65.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/tokens.ts"],"names":[],"mappings":"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","file":"chunk-MAHPAP65.js","sourcesContent":["// @hilum/ui/tokens — JS-first design tokens (D6).\n//\n// This module is the single source of truth for the Hilum visual identity.\n// A build step (scripts/build-tokens.mjs) reads the compiled output of this\n// file and emits dist/tokens.css for consumers to `@import`.\n//\n// Brand model: D8 — base palette is fixed here. Per-product overrides are\n//               applied at runtime via createTheme() in @hilum/ui/create-theme.\n// Color modes:  D7 — light + dark, both auto (`prefers-color-scheme`) and\n//                    explicit via `[data-theme]`.\n//\n// Core brand colors:\n//   brand.primary   #C100F1 — vivid purple — purple-500 on the scale below\n//   brand.secondary #FFF5BF — pale lemon   — butter-200 on the scale below\n//\n// ground — neutral spine for text, borders, and structure (values: Tailwind neutral)\n\nexport const tokens = {\n  /* ============================================================== *\n   *  PALETTE — concrete colors                                      *\n   * ============================================================== */\n\n  ground: {\n    50: \"#fafafa\",\n    100: \"#f5f5f5\",\n    200: \"#e5e5e5\",\n    300: \"#d4d4d4\",\n    400: \"#a3a3a3\",\n    500: \"#737373\",\n    600: \"#525252\",\n    700: \"#404040\",\n    800: \"#262626\",\n    900: \"#171717\",\n    950: \"#0a0a0a\",\n  },\n\n  // Pale lemon — anchor: butter-200 = #FFF5BF\n  butter: {\n    50: \"#ffffe8\",\n    100: \"#fffad0\",\n    200: \"#fff5bf\",\n    300: \"#fde870\",\n    400: \"#f6d42a\",\n    500: \"#dab010\",\n    600: \"#a88008\",\n    700: \"#7c5c04\",\n    800: \"#543e02\",\n    900: \"#382801\",\n    950: \"#221600\",\n  },\n\n  // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)\n  purple: {\n    50: \"#fdf0ff\",\n    100: \"#f5d6ff\",\n    200: \"#e8a8ff\",\n    300: \"#d870f9\",\n    400: \"#c840f6\",\n    500: \"#c100f1\",\n    600: \"#9c00c0\",\n    700: \"#740092\",\n    800: \"#4e0062\",\n    900: \"#330040\",\n    950: \"#200028\",\n  },\n\n  // Legacy functional colors — used by components not yet migrated to the new palette.\n  brand: {\n    primary: \"#C100F1\", // purple-500\n    secondary: \"#FFF5BF\", // butter-200\n  },\n\n  destructive: \"#dc2626\", // red-600\n\n  /* ============================================================== *\n   *  SEMANTIC — what components reference                           *\n   * ============================================================== */\n\n  semantic: {\n    light: {\n      background: \"#ffffff\",\n      foreground: \"#171717\", // ground-900\n      card: \"#ffffff\",\n      cardForeground: \"#171717\",\n      surface: \"#fafafa\", // ground-50\n      surfaceForeground: \"#262626\", // ground-800\n      border: \"#f5f5f5\", // ground-100\n      input: \"#f5f5f5\",\n      muted: \"#fafafa\",\n      mutedForeground: \"#737373\", // ground-500\n      accent: \"#fdf0ff\", // purple-50\n      accentForeground: \"#740092\", // purple-700\n      primary: \"#c100f1\", // purple-500 = brand.primary\n      primaryForeground: \"#ffffff\",\n      secondary: \"#fafafa\", // ground-50\n      secondaryForeground: \"#404040\", // ground-700\n      destructive: \"#dc2626\",\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200 = brand.secondary\n      warningForeground: \"#171717\", // ground-900\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n    // Mid — a neutral medium-gray theme (from the Pappery designer \"mid\" palette,\n    // mapped onto the ground scale). Sits between light and dark.\n    mid: {\n      background: \"#737373\", // ground-500 — main surface (designer panel)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#525252\", // ground-600 — elevated items (designer item-bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#525252\", // ground-600 (designer canvas/pane)\n      surfaceForeground: \"#fafafa\",\n      border: \"#a3a3a3\", // ground-400 (designer border — lighter so it reads on the gray)\n      input: \"#404040\", // ground-700 (designer input-bg)\n      muted: \"#525252\", // ground-600\n      mutedForeground: \"#e5e5e5\", // ground-200 (designer text-secondary)\n      accent: \"#404040\", // ground-700 (designer item-hover-bg)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // brand stays consistent across themes\n      primaryForeground: \"#ffffff\",\n      secondary: \"#525252\", // ground-600\n      secondaryForeground: \"#fafafa\",\n      destructive: \"#ef4444\", // red-500\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200\n      warningForeground: \"#171717\",\n      ring: \"#c100f1\",\n    },\n    dark: {\n      background: \"#171717\", // ground-900 — designer canvas (deepest)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#262626\", // ground-800 — designer panel-bg (elevated over bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#1a1a1a\", // designer item-hover depth\n      surfaceForeground: \"#f5f5f5\",\n      border: \"#404040\", // ground-700 — designer border (reads on the dark)\n      input: \"#262626\", // ground-800\n      muted: \"#262626\", // ground-800\n      mutedForeground: \"#a3a3a3\", // ground-400\n      accent: \"#404040\", // ground-700 — neutral elevated/hover (designer item-hover)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // purple-500 — brand stays consistent (D8)\n      primaryForeground: \"#ffffff\",\n      secondary: \"#262626\", // ground-800\n      secondaryForeground: \"#f5f5f5\",\n      destructive: \"#ef4444\", // red-500 (slightly lighter for dark)\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#0a0a0a\",\n      warning: \"#221600\", // butter-950 surface\n      warningForeground: \"#fffad0\", // butter-100\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n  },\n\n  /* ============================================================== *\n   *  TYPOGRAPHY                                                      *\n   * ============================================================== */\n\n  fontFamily: {\n    sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    display:\n      'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: 'ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace',\n  },\n\n  /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */\n  typeScale: {\n    \"display-xl\": {\n      family: \"display\",\n      size: \"3rem\",\n      weight: 400,\n      lineHeight: \"1.15\",\n      textWrap: \"balance\",\n    },\n    display: {\n      family: \"display\",\n      size: \"2.25rem\",\n      weight: 400,\n      lineHeight: \"1.15\",\n      textWrap: \"balance\",\n    },\n    \"heading-xl\": {\n      family: \"display\",\n      size: \"1.875rem\",\n      weight: 400,\n      lineHeight: \"1.2\",\n      textWrap: \"balance\",\n    },\n    heading: {\n      family: \"display\",\n      size: \"1.5rem\",\n      weight: 400,\n      lineHeight: \"1.2\",\n      textWrap: \"balance\",\n    },\n    subheading: {\n      family: \"display\",\n      size: \"1.25rem\",\n      weight: 400,\n      lineHeight: \"1.4\",\n      textWrap: \"balance\",\n    },\n    \"body-lg\": {\n      family: \"sans\",\n      size: \"1rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    body: {\n      family: \"sans\",\n      size: \"0.875rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    \"body-sm\": {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 500,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    caption: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 400,\n      lineHeight: \"1.625\",\n      textWrap: \"pretty\",\n    },\n    \"caption-xs\": { family: \"sans\", size: \"0.625rem\", weight: 400, lineHeight: \"1.625\" },\n\n    /* --- \"Eyebrow\" family — uppercase tracked label used above headlines, --- *\n     *   on badges, and on section markers. `eyebrow` is the canonical name;   *\n     *   `overline` (Material parlance), `kicker` (editorial parlance) and     *\n     *   `label` (legacy) are aliases of the same scale so consumers can pick  *\n     *   whichever vocabulary reads best in their context. `eyebrow-sm` is    *\n     *   the compact variant for badge-sized chips and tiny status pills.      */\n    eyebrow: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    \"eyebrow-sm\": {\n      family: \"sans\",\n      size: \"0.625rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    overline: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    kicker: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    label: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n  },\n\n  /* ============================================================== *\n   *  GEOMETRY                                                        *\n   * ============================================================== */\n\n  radius: {\n    base: \"0.5rem\",\n    sm: \"calc(0.5rem - 4px)\",\n    md: \"calc(0.5rem - 2px)\",\n    lg: \"calc(0.5rem + 2px)\",\n    xl: \"calc(0.5rem + 4px)\",\n    full: \"9999px\",\n  },\n\n  /* ============================================================== *\n   *  Z-INDEX — semantic layering scale                              *\n   * ============================================================== */\n\n  zIndex: {\n    dropdown: 40,\n    sticky: 50,\n    fixed: 60,\n    modal: 100,\n    popover: 110,\n    tooltip: 120,\n  },\n\n  shadow: {\n    natural:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)\",\n    elevated:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)\",\n  },\n\n  /* ============================================================== *\n   *  ANIMATION                                                       *\n   * ============================================================== */\n\n  animation: {\n    \"accordion-down\": \"accordion-down 0.2s ease-out\",\n    \"accordion-up\": \"accordion-up 0.2s ease-out\",\n    \"caret-blink\": \"caret-blink 1.25s ease-out infinite\",\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\nexport type SemanticTokens = typeof tokens.semantic.light;\n"]}