@heyramzi/ui 1.53.1 → 1.54.0

package/src/tokens/palette.css

@@ -0,0 +1,410 @@
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Font families */
+@theme {
+  --font-sans: var(--font-satoshi), system-ui, sans-serif;
+  --font-heading: var(--font-manrope), system-ui, sans-serif;
+  --font-mono: var(--font-space-grotesk), ui-monospace, monospace;
+  --font-quote: var(--font-space-grotesk), ui-monospace, monospace;
+}
+
+/* OKLCH Color Variables - Single source of truth for all colors */
+/* Palette: indigo, sand and terra, with a neutral gray scale. */
+:root {
+  color-scheme: light;
+  /* === Font Variables === */
+  /* Each consuming app defines @font-face and sets these to the actual font family names */
+  --font-satoshi: "Satoshi", system-ui, sans-serif;
+  --font-manrope: "Manrope", system-ui, sans-serif;
+  --font-space-grotesk: "Space Grotesk", ui-monospace, monospace;
+
+  /* === Core Gray Scale (7 shades, zero-chroma neutral) === */
+  --gray-50: oklch(0.98 0 0); /* Almost white — backgrounds */
+  --gray-100: oklch(0.94 0 0); /* Very light gray — subtle backgrounds */
+  --gray-200: oklch(0.92 0 0); /* Light gray — borders */
+  --gray-300: oklch(0.84 0 0); /* Muted — disabled, placeholder text */
+  --gray-500: oklch(0.65 0 0); /* Medium gray — secondary text */
+  --gray-700: oklch(0.45 0 0); /* Dark gray — body text */
+  --gray-900: oklch(0.15 0 0); /* Near-black — headings, primary text */
+
+  /* === Accent Colors (3 chromatic) — 60/30/10 split === */
+  --brand-indigo: oklch(0.5 0.2 272); /* Primary 60% — CTAs, links, active states, brand mark */
+  --brand-indigo-light: oklch(0.68 0.16 272); /* Dark mode variant */
+  --brand-sand: oklch(0.78 0.08 40); /* Warmth 30% — highlights, badges, soft accents */
+  --brand-terra: oklch(0.65 0.2 30); /* Signal 10% — warnings, attention, energy */
+
+  /* === Surface System (6 named colors) === */
+  /* Dark surfaces (indigo-tinted, h258-264)        Light pendants (warm-tinted, h55)       */
+  --brand-ink: oklch(0.12 0.04 258); /* Base — page background                      */
+  --brand-night: oklch(0.18 0.05 262); /* Surface — cards, panels     ↔ Linen          */
+  --brand-veil: oklch(0.28 0.06 264); /* Borders, dividers          ↔ Mist            */
+  --brand-dusk: oklch(0.22 0.05 262); /* Between night/veil — hover surfaces, inputs  */
+  --brand-cream: oklch(0.97 0.01 55); /* On-dark text, light backgrounds              */
+  --brand-linen: oklch(0.985 0.003 55); /* Light surface — cards      ↔ Night           */
+  --brand-mist: oklch(0.9 0.006 55); /* Light borders, dividers    ↔ Veil            */
+
+  /* === Indigo Tint Scale (5-step, core = 600) === */
+  --indigo-100: oklch(0.92 0.04 272);
+  --indigo-200: oklch(0.82 0.08 272);
+  --indigo-400: oklch(0.68 0.16 272);
+  --indigo-600: oklch(0.5 0.2 272); /* = --brand-indigo */
+  --indigo-800: oklch(0.34 0.18 272);
+
+  /* === Sand Tint Scale (5-step, core = 400) === */
+  --sand-100: oklch(0.94 0.02 40);
+  --sand-200: oklch(0.88 0.04 40);
+  --sand-400: oklch(0.78 0.08 40); /* = --brand-sand */
+  --sand-600: oklch(0.64 0.1 40);
+  --sand-800: oklch(0.5 0.08 40);
+
+  /* === Terra Tint Scale (5-step, core = 400) === */
+  --terra-100: oklch(0.92 0.05 30);
+  --terra-200: oklch(0.82 0.1 30);
+  --terra-400: oklch(0.65 0.2 30); /* = --brand-terra */
+  --terra-600: oklch(0.52 0.2 30);
+  --terra-800: oklch(0.38 0.15 30);
+
+  /* === Status Tint Scales (5-step, mirror indigo/sand/terra) === */
+  /* WHY: status badges use bg-X-100 text-X-600 dark:bg-X-800/30 dark:text-X-400 */
+  /* Success (green) — positive states */
+  --success-100: oklch(0.94 0.05 150);
+  --success-200: oklch(0.88 0.09 148);
+  --success-400: oklch(0.75 0.15 146);
+  --success-600: oklch(0.62 0.17 145); /* = --success */
+  --success-800: oklch(0.45 0.13 148);
+  /* Warning (amber) — attention, caution */
+  --warning-100: oklch(0.95 0.05 85);
+  --warning-200: oklch(0.9 0.09 82);
+  --warning-400: oklch(0.82 0.13 78);
+  --warning-600: oklch(0.68 0.14 70);
+  --warning-800: oklch(0.5 0.11 65);
+  /* Info (blue) — informational */
+  --info-100: oklch(0.93 0.04 250);
+  --info-200: oklch(0.85 0.08 250);
+  --info-400: oklch(0.72 0.14 250);
+  --info-600: oklch(0.6 0.16 252);
+  --info-800: oklch(0.45 0.15 255);
+
+  /* === Categorical Palette (diagram groups, tags, chart series) === */
+  /* WHY: identity colors for grouping/visual distinction, not semantic state. */
+  --cat-blue: oklch(0.62 0.18 250);
+  --cat-green: oklch(0.65 0.17 150);
+  --cat-amber: oklch(0.75 0.14 75);
+  --cat-pink: oklch(0.65 0.21 350);
+  --cat-teal: oklch(0.68 0.12 195);
+  --cat-orange: oklch(0.7 0.19 45);
+  --cat-rose: oklch(0.64 0.22 15);
+  --cat-cyan: oklch(0.7 0.12 220);
+  --cat-yellow: oklch(0.85 0.16 95);
+  --cat-indigo: oklch(0.58 0.2 272);
+  --cat-purple: oklch(0.58 0.22 305);
+
+  /* === Semantic Colors === */
+  --success: oklch(0.62 0.17 145); /* Green — positive states */
+  --error: oklch(0.6 0.2 25); /* Terra-dark — destructive actions */
+  --warning: oklch(0.78 0.14 75); /* Amber — warnings, attention */
+  --info: oklch(0.68 0.16 250); /* Blue — informational */
+
+  /* === Pure Colors === */
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
+
+  /* === Sidebar Colors === */
+  /* Sidebar is one shade darker than content — Linear-style depth */
+  --sidebar: oklch(0.96 0 0);
+  --sidebar-foreground: oklch(0.45 0 0);
+  --sidebar-primary: oklch(0.15 0 0);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.92 0 0);
+  --sidebar-accent-foreground: oklch(0.15 0 0);
+  --sidebar-border: oklch(0.91 0 0);
+  --sidebar-ring: var(--brand-indigo);
+
+  /* === Shadow tint ===
+     The one knob the design layer exposes. Pure black greys out warm surfaces,
+     so the shadow takes the darkest surface's hue. Radius, focus and motion live there. */
+  --elev-tint: oklch(0.12 0.04 258); /* = --brand-ink */
+}
+
+@theme {
+  /* Gray scale utilities (bg-gray-100, border-gray-200, text-gray-300, etc.) */
+  --color-gray-50: var(--gray-50);
+  --color-gray-100: var(--gray-100);
+  --color-gray-200: var(--gray-200);
+  --color-gray-300: var(--gray-300);
+  --color-gray-500: var(--gray-500);
+  --color-gray-700: var(--gray-700);
+  --color-gray-900: var(--gray-900);
+
+  /* Brand colors (V6 names) */
+  --color-brand-indigo: var(--brand-indigo);
+  --color-brand-indigo-light: var(--brand-indigo-light);
+  --color-brand-sand: var(--brand-sand);
+  --color-brand-terra: var(--brand-terra);
+  /* Surface system */
+  --color-brand-ink: var(--brand-ink);
+  --color-brand-night: var(--brand-night);
+  --color-brand-veil: var(--brand-veil);
+  --color-brand-dusk: var(--brand-dusk);
+  --color-brand-cream: var(--brand-cream);
+  --color-brand-linen: var(--brand-linen);
+  --color-brand-mist: var(--brand-mist);
+
+  /* Tint scales */
+  --color-indigo-100: var(--indigo-100);
+  --color-indigo-200: var(--indigo-200);
+  --color-indigo-400: var(--indigo-400);
+  --color-indigo-600: var(--indigo-600);
+  --color-indigo-800: var(--indigo-800);
+  --color-sand-100: var(--sand-100);
+  --color-sand-200: var(--sand-200);
+  --color-sand-400: var(--sand-400);
+  --color-sand-600: var(--sand-600);
+  --color-sand-800: var(--sand-800);
+  --color-terra-100: var(--terra-100);
+  --color-terra-200: var(--terra-200);
+  --color-terra-400: var(--terra-400);
+  --color-terra-600: var(--terra-600);
+  --color-terra-800: var(--terra-800);
+
+  /* Semantic colors */
+  --color-success: var(--success);
+  --color-error: var(--error);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+
+  /* Status tint scales (bg-success-100, text-warning-600, etc.) */
+  --color-success-100: var(--success-100);
+  --color-success-200: var(--success-200);
+  --color-success-400: var(--success-400);
+  --color-success-600: var(--success-600);
+  --color-success-800: var(--success-800);
+  --color-warning-100: var(--warning-100);
+  --color-warning-200: var(--warning-200);
+  --color-warning-400: var(--warning-400);
+  --color-warning-600: var(--warning-600);
+  --color-warning-800: var(--warning-800);
+  --color-info-100: var(--info-100);
+  --color-info-200: var(--info-200);
+  --color-info-400: var(--info-400);
+  --color-info-600: var(--info-600);
+  --color-info-800: var(--info-800);
+
+  /* Categorical palette (diagram groups, tags, chart series) */
+  --color-cat-blue: var(--cat-blue);
+  --color-cat-green: var(--cat-green);
+  --color-cat-amber: var(--cat-amber);
+  --color-cat-pink: var(--cat-pink);
+  --color-cat-teal: var(--cat-teal);
+  --color-cat-orange: var(--cat-orange);
+  --color-cat-rose: var(--cat-rose);
+  --color-cat-cyan: var(--cat-cyan);
+  --color-cat-yellow: var(--cat-yellow);
+  --color-cat-indigo: var(--cat-indigo);
+  --color-cat-purple: var(--cat-purple);
+
+  /* A hue as text or icon on its own tint: 40% toward the foreground clears AA in both themes.
+     A tone's 10% tint under plain destructive text is 3.6:1; the ink mix is not. */
+  --color-cat-cyan-ink: color-mix(in oklab, var(--color-cat-cyan) 60%, var(--color-foreground));
+  --color-cat-teal-ink: color-mix(in oklab, var(--color-cat-teal) 60%, var(--color-foreground));
+  --color-cat-purple-ink: color-mix(in oklab, var(--color-cat-purple) 60%, var(--color-foreground));
+  --color-cat-amber-ink: color-mix(in oklab, var(--color-cat-amber) 60%, var(--color-foreground));
+  --color-success-ink: color-mix(in oklab, var(--color-success) 60%, var(--color-foreground));
+  --color-destructive-ink: color-mix(in oklab, var(--color-destructive) 60%, var(--color-foreground));
+
+  /* Light theme color system — uses named surface colors (linen/mist pendants of night/veil) */
+  --color-background: var(--gray-50);
+  --color-foreground: var(--gray-900);
+  --color-foreground-muted: var(--gray-700);
+
+  --color-card: var(--brand-linen); /* Surface — pendant of night */
+  --color-card-foreground: var(--gray-900);
+
+  --color-popover: var(--brand-linen);
+  --color-popover-foreground: var(--gray-900);
+
+  --color-primary: var(--gray-900);
+  --color-primary-foreground: var(--gray-50);
+
+  --color-secondary: var(--gray-100);
+  --color-secondary-foreground: var(--gray-900);
+
+  --color-muted: var(--gray-100);
+  --color-muted-foreground: var(--gray-700);
+
+  --color-accent: var(--gray-100);
+  --color-accent-foreground: var(--gray-900);
+
+  --color-destructive: var(--error);
+  --color-destructive-foreground: var(--gray-50);
+
+  --color-border: var(--brand-mist); /* Borders — pendant of veil */
+  --color-input: var(--brand-mist);
+  /* WHY the accent, not gray-900: a near-black halo reads as an error first.
+     Focus is the one moment the brand speaks in chrome. */
+  --color-ring: var(--brand-indigo);
+
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* A spinner reads as a speed. Tailwind's 1s looks like thinking, not working,
+     and `animate-spin` is on every loading glyph, so this is a cheap win. */
+  --animate-spin: spin 700ms linear infinite;
+
+  /* Every bare `transition-colors` / `transition-all` reads these two. Tailwind's
+     150ms is the right beat on the wrong ease, and ~200 call sites used it. */
+  --default-transition-duration: var(--duration-quick);
+  --default-transition-timing-function: var(--ease-smooth-out);
+
+  /* Collapsible animations, on the craft layer's scale and asymmetric: an open
+     invites, a close gets out of the way. The old `0.2s ease-out` was off-scale. */
+  --animate-collapsible-down: collapsible-down var(--duration-fast) var(--ease-smooth-out);
+  --animate-collapsible-up: collapsible-up var(--duration-quick) var(--ease-smooth-out);
+
+  @keyframes collapsible-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--bits-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--bits-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  /* Accordion animations, on the same scale and the same asymmetry. */
+  --animate-accordion-down: accordion-down var(--duration-fast) var(--ease-smooth-out);
+  --animate-accordion-up: accordion-up var(--duration-quick) var(--ease-smooth-out);
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--bits-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--bits-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+.dark {
+  /* WHY: LayerChart halos axis labels with light-dark(), which reads color-scheme, not the .dark class. */
+  color-scheme: dark;
+  /* Dark theme — named surface system (ink/night/veil) */
+  --color-background: var(--brand-ink); /* Base — page background */
+  --color-foreground: var(--brand-cream);
+  --color-foreground-muted: var(--gray-300);
+
+  --color-card: var(--brand-night); /* Surface — cards, panels */
+  --color-card-foreground: var(--brand-cream);
+
+  --color-popover: var(--brand-night);
+  --color-popover-foreground: var(--brand-cream);
+
+  --color-primary: var(--brand-cream);
+  --color-primary-foreground: var(--gray-900);
+
+  --color-secondary: var(--brand-dusk); /* Between night (0.18) and veil (0.28) */
+  --color-secondary-foreground: var(--brand-cream);
+
+  --color-muted: var(--brand-dusk); /* Between night and veil — hover surfaces */
+  --color-muted-foreground: var(--gray-300);
+
+  --color-accent: var(--brand-dusk); /* Between night and veil — accent surfaces */
+  --color-accent-foreground: var(--brand-cream);
+
+  --color-destructive: var(--terra-400); /* Lighter terra for dark bg */
+  --color-destructive-foreground: var(--brand-cream);
+
+  --color-border: var(--brand-veil); /* Named border color */
+  --color-input: var(--brand-dusk); /* Between night and veil — input surfaces */
+  --color-ring: var(--brand-indigo-light);
+
+  /* Brand colors for dark theme — lighter variants for contrast on ink bg */
+  --color-brand-indigo: var(--brand-indigo-light); /* L=0.68 on ink L=0.12 = ΔL 0.56 ✓ */
+
+  /* Dark sidebar — uses named surface system */
+  --sidebar: var(--brand-night);
+  --sidebar-foreground: var(--brand-cream);
+  --sidebar-primary: var(--brand-indigo-light);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.24 0.05 262); /* Between night and veil */
+  --sidebar-accent-foreground: var(--brand-cream);
+  --sidebar-border: var(--brand-veil);
+  --sidebar-ring: var(--brand-indigo-light);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* === shadcn bare-name bridge ===
+   WHY: shared packages with raw CSS read `var(--card)` and friends with a light
+   fallback. We name them `--color-*`, so they painted white cards on ink. */
+
+/* One `:root` block covers both themes, since `.dark` sits on html too. Set a
+   `--color-*` on a subtree and you must override the bare name there as well. */
+:root {
+  --background: var(--color-background);
+  --foreground: var(--color-foreground);
+
+  --card: var(--color-card);
+  --card-foreground: var(--color-card-foreground);
+
+  --popover: var(--color-popover);
+  --popover-foreground: var(--color-popover-foreground);
+
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-secondary-foreground);
+
+  --muted: var(--color-muted);
+  --muted-foreground: var(--color-muted-foreground);
+
+  --accent: var(--color-accent);
+  --accent-foreground: var(--color-accent-foreground);
+
+  --destructive: var(--color-destructive);
+  --destructive-foreground: var(--color-destructive-foreground);
+
+  --border: var(--color-border);
+  --input: var(--color-input);
+  --ring: var(--color-ring);
+
+  /* Chart series. Indigo leads, green second. Terra sits at 4 since a rate gauge
+     reads as caution, not identity. Every value has a dark variant. */
+  --chart-1: var(--color-brand-indigo);
+  --chart-2: var(--cat-green);
+  --chart-3: var(--brand-sand);
+  --chart-4: var(--brand-terra);
+  --chart-5: var(--cat-cyan);
+}

package/src/tokens/primitives.css

@@ -0,0 +1,223 @@
+/* The bits-ui state variants every primitive in `./shadcn` is written against.
+ *
+ * bits-ui v2 writes `data-checked` / `data-open` and v1 wrote
+ * `data-state="checked"`, so each variant matches both and a component does not
+ * have to know which it is talking to. They live here rather than in a
+ * consumer's stylesheet because the classes that need them ship in this
+ * package: an app that defines only the palette would render a switch that
+ * never moves. */
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+@layer base {
+  /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
+     the layer, so a control that needs a different ring writes one and wins. */
+  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+    outline: none;
+    box-shadow: var(--ring-focus);
+  }
+
+  /* The accent at a low alpha, not the browser blue, because a selected word is
+     the one moment the palette shows up inside running text. */
+  ::selection {
+    background: color-mix(in oklab, var(--ring-color) 24%, transparent);
+  }
+
+  /* A default macOS overlay scrollbar paints a black bar on a dark panel. Track
+     transparent, thumb on the line token, so it belongs to whatever surface it
+     is over. The border is what insets the thumb without a second element. */
+  :where(html) {
+    scrollbar-color: var(--color-border, var(--border)) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-clip: padding-box;
+    border-radius: 999px;
+    background-color: var(--color-border, var(--border));
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-muted-foreground, var(--muted-foreground));
+    }
+  }
+}
+
+@layer components {
+  /* Three moves the kit repeats. They are classes rather than tokens because a
+     component wants one name, not four declarations, and because the reduced
+     motion guard then lives in one place instead of in every component.
+
+     Namespaced `t-` to match the transitions-dev snippets, which these sit
+     beside rather than duplicate. */
+
+  /* A control that reads as a key: it travels down a pixel under the finger.
+     The travel is what sells it, because a colour change alone reads as a hover
+     state, not as a press. */
+  .t-press {
+    transition:
+      background-color var(--duration-quick) var(--ease-smooth-out),
+      border-color var(--duration-quick) var(--ease-smooth-out),
+      color var(--duration-quick) var(--ease-smooth-out),
+      box-shadow var(--duration-quick) var(--ease-smooth-out),
+      transform var(--duration-micro) var(--ease-smooth-out);
+  }
+
+  .t-press:active:not(:disabled, [aria-disabled="true"]) {
+    transform: translateY(1px);
+  }
+
+  /* A card that answers the pointer. It rises by a pixel and gains the next
+     step of elevation, so the hover reads as the card coming forward rather
+     than as its border changing colour. */
+  .t-lift {
+    transition:
+      box-shadow var(--duration-fast) var(--ease-smooth-out),
+      transform var(--duration-fast) var(--ease-smooth-out);
+  }
+
+  /* Only where a pointer hovers: on a phone a tap would leave the card lifted. */
+  @media (hover: hover) and (pointer: fine) {
+    .t-lift:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--elev-raised);
+    }
+  }
+
+  /* A surface arriving. The open carries the distance, the scale and the blur;
+     the close drops all three and takes less time, per the open/close
+     asymmetry rule in transitions-dev. */
+  .t-enter {
+    animation: t-enter var(--duration-fast) var(--ease-smooth-out) both;
+  }
+
+  .t-exit {
+    animation: t-exit var(--duration-quick) var(--ease-smooth-out) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .t-press,
+    .t-lift {
+      transition: none;
+    }
+
+    .t-press:active {
+      transform: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .t-lift:hover {
+        transform: none;
+      }
+    }
+
+    .t-enter,
+    .t-exit {
+      animation-duration: 1ms;
+    }
+  }
+}
+
+@keyframes t-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--distance-micro)) scale(var(--scale-medium));
+    filter: blur(var(--blur-small));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}
+
+/* A mark confirming a state that has already changed: it arrives after the box
+   it sits in, so it grows into place instead of fading. */
+@keyframes t-check {
+  from {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes t-exit {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+  to {
+    opacity: 0;
+    transform: scale(var(--scale-tiny));
+  }
+}

package/scripts/relative-imports.mjs

@@ -1,39 +0,0 @@
-// Rewrites every `#src/` and `#scripts/` specifier to a relative path, in place, before publish.
-// WHY: Vite cannot resolve a package's own `#` imports inside node_modules (ai-doc/references/publishing-packages.md).
-// It edits the source tree, so only scripts/release.sh runs it, right before `pnpm publish`, and restores the tree after.
-// It is not a `build` script: `pnpm -r build` would rewrite the working tree.
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import { dirname, join, relative, resolve } from "node:path";
-
-const root = resolve(import.meta.dirname, "..");
-const targets = { src: join(root, "src"), scripts: join(root, "scripts") };
-const TEXT = /\.(ts|js|mjs|svelte|css)$/;
-const SPECIFIER = /(["'`])#(src|scripts)\/([^"'`]+)\1/g;
-
-async function* walk(dir) {
-  for (const entry of await readdir(dir, { withFileTypes: true })) {
-    if (entry.name === "node_modules") continue;
-    const full = join(dir, entry.name);
-    if (entry.isDirectory()) yield* walk(full);
-    else if (TEXT.test(entry.name)) yield full;
-  }
-}
-
-let files = 0;
-let specifiers = 0;
-for (const dir of Object.values(targets)) {
-  for await (const file of walk(dir)) {
-    const text = await readFile(file, "utf8");
-    const next = text.replace(SPECIFIER, (_, quote, base, rest) => {
-      specifiers++;
-      let rel = relative(dirname(file), join(targets[base], rest));
-      if (!rel.startsWith(".")) rel = `./${rel}`;
-      return `${quote}${rel}${quote}`;
-    });
-    if (next !== text) {
-      await writeFile(file, next);
-      files++;
-    }
-  }
-}
-console.log(`relative-imports: ${specifiers} specifiers in ${files} files`);