@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/styles/studio.css

@@ -1,6 +1,19 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss" source(none);
+@import "./palette-reset.css";
+@import "./theme.css";
+
+/* Explicit sources: Studio's own TypeScript and its shell HTML. Automatic
+ * detection would walk up to the repo root and scan `data/projects`, gitignored user content. */
+@source "../**/*.{ts,tsx}";
+@source "../../index.html";
+
+/* Tailwind v4 preflight no longer gives enabled buttons a pointer cursor. */
+@layer base {
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
 
 /*
  * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
@@ -14,9 +27,9 @@
 body {
   margin: 0;
   padding: 0;
-  background: #0a0a0a;
-  color: #e5e5e5;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--color-bg-0);
+  color: var(--color-text-body);
+  font-family: var(--font-sans);
   overflow: hidden;
 }
 
@@ -290,7 +303,7 @@ body {
   left: 12px;
   overflow: hidden;
   color: rgba(255, 255, 255, 0.34);
-  font-family: "SF Mono", "Fira Code", monospace;
+  font-family: var(--font-mono);
   font-size: 9px;
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -328,7 +341,7 @@ body {
 }
 
 .cm-editor .cm-scroller {
-  font-family: "JetBrains Mono", "Fira Code", "SF Mono", monospace;
+  font-family: var(--font-mono);
 }
 
 .cm-editor.cm-focused {
@@ -385,12 +398,7 @@ body {
 }
 
 .hf-loader-title {
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: 0;
@@ -406,12 +414,7 @@ body {
   min-height: 2.5rem;
   overflow: hidden;
   color: var(--hf-text-secondary, rgba(244, 244, 245, 0.68));
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    sans-serif;
+  font-family: var(--font-sans);
   font-size: 0.82rem;
   line-height: 1.6;
 }
@@ -423,7 +426,7 @@ body {
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--hf-text-tertiary, rgba(244, 244, 245, 0.46));
-  font-family: "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
   letter-spacing: 0;
   font-variant-numeric: tabular-nums;

package/src/styles/styleSources.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { listSourceFiles, toPosixPath } from "./styleSources";
+
+describe("style source paths", () => {
+  it("turns a Windows-style relative path into the forward-slash form the baseline uses", () => {
+    expect(toPosixPath("packages\\studio\\src\\App.tsx")).toBe("packages/studio/src/App.tsx");
+  });
+
+  it("leaves a forward-slash path alone", () => {
+    expect(toPosixPath("packages/studio/src/App.tsx")).toBe("packages/studio/src/App.tsx");
+  });
+
+  it("hands the keep filter and the map key the same forward-slash path", () => {
+    const seen: string[] = [];
+    const files = listSourceFiles((file) => (seen.push(file), file.endsWith("styleSources.ts")));
+
+    expect([...files.keys()]).toEqual(["styles/styleSources.ts"]);
+    expect(seen.every((file) => !file.includes("\\"))).toBe(true);
+  });
+});

package/src/styles/styleSources.ts

@@ -0,0 +1,47 @@
+// Where the style tests read from: Tailwind's entry resolved from `node_modules`, and the file list
+// that `@source` in `studio.css` describes, shared so the gate, ratchet and theme test agree.
+
+import { createRequire } from "node:module";
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const STYLES_DIR = path.dirname(fileURLToPath(import.meta.url));
+const SRC_DIR = path.dirname(STYLES_DIR);
+export const REPO_ROOT = path.resolve(SRC_DIR, "../../..");
+
+const require = createRequire(import.meta.url);
+export const TAILWIND_DIR = path.dirname(require.resolve("tailwindcss/package.json"));
+
+/** Resolves `@import` for Tailwind's compiler: bare `tailwindcss`, or a path. */
+export function loadStylesheet(id: string, base: string) {
+  const file = id === "tailwindcss" ? path.join(TAILWIND_DIR, "index.css") : path.resolve(base, id);
+  return { path: file, base: path.dirname(file), content: readFileSync(file, "utf8") };
+}
+
+/** Forward slashes on every platform, so keys match the baseline file and the gate's messages. */
+export const toPosixPath = (relativePath: string): string => relativePath.replace(/\\/g, "/");
+
+/**
+ * Studio's own sources, keyed by path relative to `from`, for every file the
+ * caller keeps. Build output and dependencies are never walked.
+ */
+export function listSourceFiles(
+  keep: (relativePath: string) => boolean,
+  from: string = SRC_DIR,
+): Map<string, string> {
+  const files = new Map<string, string>();
+  const walk = (dir: string) => {
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name !== "node_modules" && entry.name !== "dist") walk(full);
+      } else {
+        const relative = toPosixPath(path.relative(from, full));
+        if (keep(relative)) files.set(relative, readFileSync(full, "utf8"));
+      }
+    }
+  };
+  walk(SRC_DIR);
+  return files;
+}

package/src/styles/tailwind-preset.shared.js

@@ -1,3 +1,6 @@
+/** @deprecated Superseded by `src/styles/theme.css` (published as
+ * `@hyperframes/studio/theme.css`); kept one more major for Tailwind v3
+ * consumers. Values are byte-identical; theme.test.ts fails if they drift. */
 const studioPreset = {
   theme: {
     extend: {

package/src/styles/theme.css

@@ -0,0 +1,270 @@
+/* Studio's design tokens, the one place a design value is decided. Tailwind emits
+ * each as a utility and a CSS custom property; `@theme static` keeps unused
+ * tokens in `:root` so plain CSS and canvas code can still read them. */
+
+@theme static {
+  /* ---------------------------------------------------------------- colour */
+
+  /* Background levels, darkest (app shell) to lightest (inset panel body). */
+  --color-bg-0: #0a0a0a;
+  --color-bg-1: #0c0c0e;
+  --color-bg-2: #121214;
+
+  /* Raised surfaces. */
+  --color-surface: #18181b;
+  --color-surface-alt: #141414;
+  --color-input: #161618;
+  --color-hover: #27272a;
+
+  /* Separators, weakest to strongest. */
+  --color-hairline: #1a1a1c;
+  --color-border: #1e1e1e;
+  --color-border-input: #27272a;
+  --color-border-strong: #262626;
+
+  /* Text, brightest (0) to dimmest (5). */
+  --color-text-0: #fafafa;
+  --color-text-1: #e4e4e7;
+  --color-text-2: #a1a1aa;
+  --color-text-3: #71717a;
+  --color-text-4: #52525b;
+  --color-text-5: #3f3f46;
+  --color-text-body: #e5e5e5;
+  --color-text-muted: #737373;
+
+  /* Roles. Selection and playhead are reserved and differ from the accent so a
+   * selected clip, the playhead and an accented control stay tellable apart. */
+  --color-accent: #3ce6ac;
+  --color-selection: #4ba3d2;
+  --color-playhead: #ffffff;
+  --color-danger: #ef4444;
+  --color-media: #00e3ff;
+  --color-container: #f5a623;
+
+  /* The two stops of the HeyGen brand gradient, worn by the header logo. Fixed brand values
+   * rather than roles, so they are not reachable as a background or text colour by mistake. */
+  --color-brand-gradient-from: #06e3fa;
+  --color-brand-gradient-to: #4fdb5e;
+
+  /* The timeline's own surfaces: darker and bluer than the shared scale, so they
+   * get their own names instead of snapping to the nearest --color-bg/-surface
+   * step (AD147: a host themes the timeline by overriding these). */
+  --timeline-shell-bg: #0a0a0b;
+  --timeline-shell-border: rgba(255, 255, 255, 0.05);
+  --timeline-ruler-border: rgba(255, 255, 255, 0.16);
+  --timeline-row-bg: #101014;
+  --timeline-row-border: rgba(255, 255, 255, 0.06);
+  --timeline-gutter-bg: #0e0f12;
+  --timeline-gutter-border: rgba(255, 255, 255, 0.1);
+  --timeline-text-primary: rgba(255, 255, 255, 0.92);
+  --timeline-text-secondary: rgba(255, 255, 255, 0.62);
+  --timeline-tick-text: rgba(255, 255, 255, 0.34);
+  --timeline-tick-major: rgba(255, 255, 255, 0.1);
+  --timeline-tick-minor: rgba(255, 255, 255, 0.06);
+  --timeline-clip-bg: #141922;
+  --timeline-clip-bg-active: #181e28;
+  --timeline-clip-border: rgba(255, 255, 255, 0.1);
+  --timeline-clip-border-hover: rgba(255, 255, 255, 0.18);
+  --timeline-clip-border-active: rgba(255, 255, 255, 0.24);
+  --timeline-handle: rgba(255, 255, 255, 0.2);
+  --timeline-resize-seam: rgba(255, 255, 255, 0.12);
+  --timeline-resize-active: rgba(255, 255, 255, 0.24);
+  --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
+  --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
+  --timeline-track-label: rgba(255, 255, 255, 0.5);
+
+  /* -------------------------------------------------------------- geometry */
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+
+  /* The one radius every push-button wears, named by its role so a button does
+   * not have to know which step of the scale it sits on. */
+  --radius-button: var(--radius-md);
+
+  /* Control heights: 24, 28 and 32 px. `--spacing-*` gives `h-ctl`, `min-h-ctl`
+   * and friends. */
+  --spacing-ctl-sm: 24px;
+  --spacing-ctl: 28px;
+  --spacing-ctl-lg: 32px;
+
+  /* ------------------------------------------------------------------ type */
+
+  /* Dense UI type sizes named by pixel value. `step` avoids a clash with
+   * Tailwind's own `--text-*` scale, whose `xs`, `sm` and `lg` are unchanged. */
+  --text-step-7: 7px;
+  --text-step-8: 8px;
+  --text-step-9: 9px;
+  --text-step-10: 10px;
+  --text-step-11: 11px;
+  --text-step-12: 12px;
+  --text-step-13: 13px;
+  --text-step-14: 14px;
+  --text-step-15: 15px;
+  --text-step-16: 16px;
+  --text-step-17: 17px;
+  --text-step-18: 18px;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", "Fira Code", monospace;
+
+  /* ---------------------------------------------------------------- shadow */
+
+  /* Floating chrome over a near-black canvas: the hairline ring does the edge
+   * definition that a light-mode drop shadow cannot. */
+  --shadow-menu: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(0 0 0 / 0.4);
+  --shadow-popover: 0 16px 40px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(0 0 0 / 0.45);
+
+  /* The primary button is the one light surface in a dark UI, so it reads as a
+   * raised key rather than a floating panel: a tight contact shadow, a soft
+   * ambient one, and an inner top highlight. */
+  --shadow-btn-primary:
+    0 1px 2px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.35), inset 0 1px 0 rgb(255 255 255 / 0.65);
+
+  /* ---------------------------------------------------------------- motion */
+
+  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-out-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out-circ: cubic-bezier(0.77, 0, 0.175, 1);
+
+  /* The curve for a small state change (hover, press, focus), named by role so
+   * a control does not have to pick one. The other two stay for motion that is
+   * meant to be noticed. */
+  --ease-standard: var(--ease-out-quint);
+
+  /* Durations have no Tailwind namespace, so these are plain variables paired
+   * with the `@utility` rules at the bottom of this file. All are at or under
+   * 200 ms. */
+  --duration-focus: 100ms;
+  --duration-press: 120ms;
+  --duration-hover: 150ms;
+  --duration-expand: 160ms;
+  --duration-open: 180ms;
+
+  /* ------------------------------------------------------------------ icon */
+
+  /* Read by `readIconTokens` and handed to Phosphor's `IconContext`. */
+  --icon-size: 16px;
+  --icon-weight: regular;
+
+  /* ------------------------------------------------- deprecated: old names */
+
+  /* The `studio.*` and `panel.*` scales, aliases of the tokens above so existing
+   * markup keeps working during the sweep. U12 removes them from Studio's
+   * source; the published JS preset keeps them one more major. */
+  --color-studio-bg: var(--color-bg-0);
+  --color-studio-surface: var(--color-surface-alt);
+  --color-studio-border: var(--color-border-strong);
+  --color-studio-text: var(--color-text-body);
+  --color-studio-muted: var(--color-text-muted);
+  --color-studio-accent: var(--color-accent);
+  --color-panel-bg: var(--color-bg-1);
+  --color-panel-bg-inset: var(--color-bg-2);
+  --color-panel-input: var(--color-input);
+  --color-panel-surface: var(--color-surface);
+  --color-panel-hover: var(--color-hover);
+  --color-panel-border: var(--color-border);
+  --color-panel-border-input: var(--color-border-input);
+  --color-panel-hairline: var(--color-hairline);
+  --color-panel-text-0: var(--color-text-0);
+  --color-panel-text-1: var(--color-text-1);
+  --color-panel-text-2: var(--color-text-2);
+  --color-panel-text-3: var(--color-text-3);
+  --color-panel-text-4: var(--color-text-4);
+  --color-panel-text-5: var(--color-text-5);
+  --color-panel-bg-soft: var(--color-bg-2);
+  --color-panel-bg-2: var(--color-bg-2);
+  --color-panel-accent: var(--color-accent);
+  --color-panel-danger: var(--color-danger);
+  --color-panel-media: var(--color-media);
+  --color-panel-container: var(--color-container);
+
+  /* Names Studio's markup invented that no config ever defined, so the classes
+   * compiled to nothing. Aliased to the token that was meant, rather than
+   * given values of their own, so there is still one source per decision.
+   * U12 rewrites the call sites and deletes these. */
+  --color-surface-hover: var(--color-hover);
+  --color-accent-red: var(--color-danger);
+  --text-2xs: var(--text-step-10);
+
+  /* ------------------------------------------- deprecated: Tailwind palette */
+
+  /* Verbatim Tailwind 4.3.3 defaults for stock colours markup still names, so
+   * `--color-*: initial` does not blank them. U12 deletes this block;
+   * `theme.test.ts` fails if a value drifts from upstream. */
+  --color-amber-50: oklch(98.7% 0.022 95.277);
+  --color-amber-100: oklch(96.2% 0.059 95.617);
+  --color-amber-200: oklch(92.4% 0.12 95.746);
+  --color-amber-300: oklch(87.9% 0.169 91.605);
+  --color-amber-400: oklch(82.8% 0.189 84.429);
+  --color-amber-500: oklch(76.9% 0.188 70.08);
+  --color-amber-900: oklch(41.4% 0.112 45.904);
+  --color-amber-950: oklch(27.9% 0.077 45.635);
+  --color-black: #000;
+  --color-blue-400: oklch(70.7% 0.165 254.624);
+  --color-blue-500: oklch(62.3% 0.214 259.815);
+  --color-cyan-400: oklch(78.9% 0.154 211.53);
+  --color-cyan-500: oklch(71.5% 0.143 215.221);
+  --color-emerald-300: oklch(84.5% 0.143 164.978);
+  --color-emerald-400: oklch(76.5% 0.177 163.223);
+  --color-emerald-500: oklch(69.6% 0.17 162.48);
+  --color-emerald-600: oklch(59.6% 0.145 163.225);
+  --color-emerald-700: oklch(50.8% 0.118 165.612);
+  --color-green-400: oklch(79.2% 0.209 151.711);
+  --color-green-500: oklch(72.3% 0.219 149.579);
+  --color-green-600: oklch(62.7% 0.194 149.214);
+  --color-neutral-50: oklch(98.5% 0 none);
+  --color-neutral-100: oklch(97% 0 none);
+  --color-neutral-200: oklch(92.2% 0 none);
+  --color-neutral-300: oklch(87% 0 none);
+  --color-neutral-400: oklch(70.8% 0 none);
+  --color-neutral-500: oklch(55.6% 0 none);
+  --color-neutral-600: oklch(43.9% 0 none);
+  --color-neutral-700: oklch(37.1% 0 none);
+  --color-neutral-800: oklch(26.9% 0 none);
+  --color-neutral-900: oklch(20.5% 0 none);
+  --color-neutral-950: oklch(14.5% 0 none);
+  --color-orange-300: oklch(83.7% 0.128 66.29);
+  --color-orange-400: oklch(75% 0.183 55.934);
+  --color-pink-400: oklch(71.8% 0.202 349.761);
+  --color-pink-500: oklch(65.6% 0.241 354.308);
+  --color-purple-200: oklch(90.2% 0.063 306.703);
+  --color-purple-300: oklch(82.7% 0.119 306.383);
+  --color-purple-400: oklch(71.4% 0.203 305.504);
+  --color-purple-500: oklch(62.7% 0.265 303.9);
+  --color-purple-900: oklch(38.1% 0.176 304.987);
+  --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-200: oklch(88.5% 0.062 18.334);
+  --color-red-300: oklch(80.8% 0.114 19.571);
+  --color-red-400: oklch(70.4% 0.191 22.216);
+  --color-red-500: oklch(63.7% 0.237 25.331);
+  --color-red-600: oklch(57.7% 0.245 27.325);
+  --color-red-700: oklch(50.5% 0.213 27.518);
+  --color-red-800: oklch(44.4% 0.177 26.899);
+  --color-red-900: oklch(39.6% 0.141 25.723);
+  --color-red-950: oklch(25.8% 0.092 26.042);
+  --color-rose-400: oklch(71.2% 0.194 13.428);
+  --color-rose-500: oklch(64.5% 0.246 16.439);
+  --color-sky-200: oklch(90.1% 0.058 230.902);
+  --color-sky-300: oklch(82.8% 0.111 230.318);
+  --color-sky-400: oklch(74.6% 0.16 232.661);
+  --color-sky-500: oklch(68.5% 0.169 237.323);
+  --color-sky-700: oklch(50% 0.134 242.749);
+  --color-sky-900: oklch(39.1% 0.09 240.876);
+  --color-sky-950: oklch(29.3% 0.066 243.157);
+  --color-violet-400: oklch(70.2% 0.183 293.541);
+  --color-violet-500: oklch(60.6% 0.25 292.717);
+  --color-white: #fff;
+}
+
+/* Motion durations as utilities, since Tailwind has no `--duration-*`
+ * namespace. Each one zeroes itself under `prefers-reduced-motion`, so a
+ * caller cannot forget the reduced-motion case. */
+
+@utility duration-* {
+  transition-duration: --value(--duration-*);
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0ms;
+  }
+}

package/src/styles/theme.test.ts

@@ -0,0 +1,183 @@
+// @vitest-environment happy-dom
+
+/** Guards the ways `theme.css` can silently break: a dropped CSS custom
+ * property, a utility that stops compiling, the stock Tailwind palette
+ * leaking back in, or the JS preset / legacy colours drifting from it. */
+
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { Gear, IconContext } from "@phosphor-icons/react";
+import { compile } from "tailwindcss";
+import { afterEach, describe, expect, it } from "vitest";
+import studioPreset from "./tailwind-preset.shared.js";
+import { readIconTokens } from "./iconTokens";
+import { loadStylesheet, STYLES_DIR, TAILWIND_DIR } from "./styleSources";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function buildSource(source: string, candidates: string[]): Promise<string> {
+  const compiled = await compile(source, { base: STYLES_DIR, loadStylesheet });
+  return compiled.build(candidates);
+}
+
+const build = (entry: string, candidates: string[]) =>
+  buildSource(readFileSync(path.join(STYLES_DIR, entry), "utf8"), candidates);
+
+function rootVariables(css: string): Map<string, string> {
+  const block = css.match(/:root, :host \{([\s\S]*?)\n {2}\}/);
+  const vars = new Map<string, string>();
+  for (const line of (block?.[1] ?? "").split(";")) {
+    const match = line.match(/(--[a-z0-9-]+):([\s\S]+)/i);
+    if (match) vars.set(match[1], match[2].trim().replace(/\s+/g, " "));
+  }
+  return vars;
+}
+
+const themeSource = readFileSync(path.join(STYLES_DIR, "theme.css"), "utf8");
+
+function declaredValue(name: string): string {
+  const match = themeSource.match(new RegExp(`\\n\\s*${name}:\\s*([^;]+);`));
+  if (!match) throw new Error(`theme.css does not declare ${name}`);
+  return match[1].trim();
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  document.documentElement.removeAttribute("style");
+});
+
+describe("studio theme", () => {
+  it("emits the semantic palette as custom properties and as utilities", async () => {
+    const css = await build("studio.css", ["bg-accent", "text-text-2", "border-border"]);
+
+    expect(rootVariables(css).get("--color-accent")).toBe("#3ce6ac");
+    expect(css).toContain(".bg-accent {");
+    expect(css).toContain("background-color: var(--color-accent)");
+  });
+
+  it("resolves an alpha modifier on a plain hex token through color-mix", async () => {
+    const css = await build("studio.css", ["bg-accent/30"]);
+
+    expect(css).toMatch(/\.bg-accent\\\/30 \{[\s\S]*?color-mix\(/);
+  });
+
+  it("drops every Tailwind default color Studio does not use", async () => {
+    // `palette-reset.css` clears the stock palette. The entries Studio's
+    // markup still references are re-declared as deprecated aliases (U12
+    // removes them); anything outside that set must no longer resolve.
+    const css = await build("studio.css", ["bg-neutral-750", "text-teal-500", "bg-neutral-800"]);
+
+    expect(css).not.toContain("bg-neutral-750");
+    expect(css).not.toContain("text-teal-500");
+    expect(css).toContain(".bg-neutral-800 {");
+  });
+
+  it("leaves a host's stock Tailwind colors alone when only theme.css is imported", async () => {
+    const css = await buildSource('@import "tailwindcss";\n@import "./theme.css";', [
+      "bg-teal-500",
+      "text-accent",
+    ]);
+
+    expect(css).toContain(".bg-teal-500 {");
+    expect(css).toContain(".text-accent {");
+  });
+
+  it("keeps selection, playhead and accent as three distinct colors", () => {
+    const accent = declaredValue("--color-accent");
+    const selection = declaredValue("--color-selection");
+    const playhead = declaredValue("--color-playhead");
+
+    expect(new Set([accent, selection, playhead]).size).toBe(3);
+  });
+
+  it("names every micro type step in use and leaves the Tailwind sizes alone", async () => {
+    const steps = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
+    const css = await build(
+      "studio.css",
+      steps.map((step) => `text-step-${step}`).concat(["text-xs", "text-sm", "text-lg"]),
+    );
+    const vars = rootVariables(css);
+
+    for (const step of steps) {
+      expect(vars.get(`--text-step-${step}`)).toBe(`${step}px`);
+      expect(css).toContain(`.text-step-${step} {`);
+    }
+    expect(vars.get("--text-xs")).toBe("0.75rem");
+    expect(vars.get("--text-sm")).toBe("0.875rem");
+    expect(vars.get("--text-lg")).toBe("1.125rem");
+  });
+
+  it("compiles a motion-duration utility with a reduced-motion variant", async () => {
+    const css = await build("studio.css", ["duration-press", "duration-open"]);
+
+    expect(css).toMatch(
+      /\.duration-press \{[\s\S]*?transition-duration: var\(--duration-press\)[\s\S]*?prefers-reduced-motion: reduce[\s\S]*?transition-duration: 0ms/,
+    );
+    expect(css).toContain(".duration-open {");
+  });
+
+  it("keeps every legacy Tailwind palette entry at its upstream default value", async () => {
+    // These are copies of Tailwind's own values, kept only so existing markup
+    // renders unchanged. A Tailwind upgrade that moves one of them would
+    // otherwise silently change Studio's colors.
+    const upstream = new Map(
+      [
+        ...readFileSync(path.join(TAILWIND_DIR, "theme.css"), "utf8").matchAll(
+          /\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g,
+        ),
+      ].map(([, name, value]) => [name, value.trim()]),
+    );
+    const legacy = [...themeSource.matchAll(/\n\s*(--color-[a-z]+-(?:50|\d00|950)):\s*([^;]+);/g)];
+
+    expect(legacy.length).toBeGreaterThan(0);
+    for (const [, name, value] of legacy) {
+      expect(upstream.has(name), `${name} is not a Tailwind default`).toBe(true);
+      expect(`${name}: ${value.trim()}`).toBe(`${name}: ${upstream.get(name)}`);
+    }
+  });
+
+  it("keeps the deprecated JS preset in step with the CSS it shadows", () => {
+    const colors = studioPreset.theme.extend.colors;
+
+    expect(colors.studio.accent.toLowerCase()).toBe(declaredValue("--color-accent"));
+    expect(colors.panel.surface.toLowerCase()).toBe(declaredValue("--color-surface"));
+  });
+
+  it("reads the icon defaults off the theme rather than hard-coding them", () => {
+    document.documentElement.style.setProperty("--icon-size", "14px");
+    document.documentElement.style.setProperty("--icon-weight", "bold");
+
+    expect(readIconTokens()).toEqual({ size: "14px", weight: "bold" });
+  });
+
+  it("gives a child icon the token size and weight when it sets neither", () => {
+    document.documentElement.style.setProperty("--icon-size", "14px");
+    document.documentElement.style.setProperty("--icon-weight", "bold");
+
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        React.createElement(
+          IconContext.Provider,
+          { value: readIconTokens() },
+          React.createElement(Gear, null),
+        ),
+      );
+    });
+    const inherited = host.querySelector("svg");
+    const inheritedShape = inherited?.innerHTML;
+    act(() => {
+      root.render(React.createElement(Gear, { size: 14, weight: "bold" }));
+    });
+    const explicitShape = host.querySelector("svg")?.innerHTML;
+    act(() => root.unmount());
+
+    expect(inherited?.getAttribute("width")).toBe("14px");
+    expect(inherited?.getAttribute("height")).toBe("14px");
+    expect(inheritedShape).toBe(explicitShape);
+  });
+});