@hyperframes/studio 0.8.50 → 0.8.51

package/src/player/components/useTimelineClipDrag.resize.test.tsx

@@ -31,10 +31,14 @@ afterEach(() => {
 function renderResizeHarness(
   elements: TimelineElement[],
   selected: string[],
-  options: { wireGroupResize?: boolean } = {},
+  options: {
+    wireGroupResize?: boolean;
+    snap?: boolean;
+    onSeek?: (time: number, seekOptions?: { keepPlaying?: boolean }) => void;
+  } = {},
 ) {
   usePlayerStore.getState().setElements(elements);
-  usePlayerStore.setState({ timelineSnapEnabled: false });
+  usePlayerStore.setState({ timelineSnapEnabled: options.snap === true });
   usePlayerStore.getState().setSelectedElementIds(new Set(selected));
 
   const scroll = document.createElement("div");
@@ -61,6 +65,7 @@ function renderResizeHarness(
       onMoveElement,
       onBlockedEditAttempt,
       onResizeElements: options.wireGroupResize === false ? undefined : onResizeElements,
+      onSeek: options.onSeek,
       setShowPopover: vi.fn(),
       setRangeSelectionRef: { current: vi.fn() },
       sessionEpoch,
@@ -92,6 +97,9 @@ function renderResizeHarness(
     getResizeProjection() {
       return resizingClip?.groupPreview ?? [];
     },
+    getResizingClip() {
+      return resizingClip;
+    },
     getBlockedClip() {
       return blockedClipRef?.current ?? null;
     },
@@ -441,3 +449,129 @@ describe("useTimelineClipDrag — multi-select group resize (restored)", () => {
     h.unmount();
   });
 });
+
+describe("useTimelineClipDrag — trim guide and preview frame", () => {
+  /** Playhead at 1.25s that follows preview seeks; clip a's end edge grabbed and dragged once. */
+  function trimEndWithSeekingPlayhead(state: { isPlaying?: boolean } = {}) {
+    usePlayerStore.setState({ currentTime: 1.25, ...state });
+    const onSeek = vi.fn((t: number) => usePlayerStore.setState({ currentTime: t }));
+    const a = el("a", { start: 1, duration: 2 });
+    const h = renderResizeHarness([a], [], { onSeek });
+    h.startResize(a, "end");
+    h.movePointer(50);
+    return { onSeek, h };
+  }
+
+  /** Clip a (0-2s) with neighbour b starting at 5s, snapping on, a's end edge grabbed. */
+  function trimAEndBesideB() {
+    const a = el("a", { start: 0, duration: 2 });
+    const b = el("b", { start: 5, duration: 2 });
+    const h = renderResizeHarness([a, b], [], { snap: true });
+    h.startResize(a, "end");
+    return h;
+  }
+
+  it("publishes the snap target while a trimmed edge is on a neighbour edge", () => {
+    const h = trimAEndBesideB();
+    h.movePointer(296); // a's end lands at 4.96s, 4px from b's start
+    expect(h.getResizingClip()).toMatchObject({ snapTime: 5, snapType: "clip-edge" });
+    h.unmount();
+  });
+
+  it("keeps the guide when the trimmed edge sits exactly on the neighbour edge", () => {
+    const h = trimAEndBesideB();
+    h.movePointer(300);
+    expect(h.getResizingClip()).toMatchObject({ snapTime: 5, previewDuration: 5 });
+    h.unmount();
+  });
+
+  it("publishes no snap target when the trimmed edge is free", () => {
+    const h = trimAEndBesideB();
+    h.movePointer(150);
+    expect(h.getResizingClip()).toMatchObject({ snapTime: null, snapType: null });
+    h.unmount();
+  });
+
+  it("never snaps a trimmed edge to the playhead — the edge drives its own seek", () => {
+    usePlayerStore.setState({ currentTime: 5 }); // no clip edge or beat nearby, only the playhead
+    const a = el("a", { start: 0, duration: 2 });
+    const h = renderResizeHarness([a], [], { snap: true });
+    h.startResize(a, "end");
+    h.movePointer(296); // a's end lands at 4.96s, 4px from the playhead
+    expect(h.getResizingClip()).toMatchObject({
+      snapTime: null,
+      snapType: null,
+      previewDuration: 4.96,
+    });
+    h.unmount();
+  });
+
+  it("shows the frame at the dragged edge, then puts the playhead back on release", async () => {
+    usePlayerStore.setState({ currentTime: 1.25 });
+    const onSeek = vi.fn();
+    const a = el("a", { start: 1, duration: 2 });
+    const h = renderResizeHarness([a], [], { onSeek });
+    h.startResize(a, "end");
+    h.movePointer(50);
+    expect(onSeek).toHaveBeenLastCalledWith(3.5 - 1 / 30, { keepPlaying: true });
+    await h.dropPointer();
+    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true });
+    h.unmount();
+  });
+
+  it("previews the new in-point when the start edge is trimmed", () => {
+    const onSeek = vi.fn();
+    const a = el("a", { start: 1, duration: 2 });
+    const h = renderResizeHarness([a], [], { onSeek });
+    h.startResize(a, "start");
+    h.movePointer(50);
+    expect(onSeek).toHaveBeenLastCalledWith(1.5, { keepPlaying: true });
+    h.unmount();
+  });
+
+  it("publishes the guide when the start edge snaps to a neighbour's end", () => {
+    // playbackStart leaves source to reveal when the in-point moves left.
+    const a = el("a", { start: 3, duration: 2, playbackStart: 5 });
+    const b = el("b", { start: 0, duration: 2 });
+    const h = renderResizeHarness([a, b], [], { snap: true });
+    h.startResize(a, "start");
+    h.movePointer(-96); // a's start lands at 2.04s, 4px from b's end
+    expect(h.getResizingClip()).toMatchObject({ snapTime: 2, previewStart: 2 });
+    h.unmount();
+  });
+
+  it("restores the playhead it had before the first preview seek, not a seeked time", async () => {
+    const { onSeek, h } = trimEndWithSeekingPlayhead();
+    h.movePointer(80);
+    h.movePointer(120);
+    await h.dropPointer();
+    expect(onSeek).toHaveBeenLastCalledWith(1.25, { keepPlaying: true });
+    h.unmount();
+  });
+
+  it("leaves the playhead where playback is when a trim is released while playing", async () => {
+    const { onSeek, h } = trimEndWithSeekingPlayhead({ isPlaying: true });
+    h.movePointer(120);
+    const callsBeforeRelease = onSeek.mock.calls.length;
+    await h.dropPointer();
+    expect(onSeek).toHaveBeenCalledTimes(callsBeforeRelease);
+    expect(onSeek).not.toHaveBeenCalledWith(1.25, expect.anything());
+    usePlayerStore.setState({ isPlaying: false });
+    h.unmount();
+  });
+
+  it("draws no guide and seeks to the rendered edge when a group member clamps the trim", () => {
+    const onSeek = vi.fn();
+    const a = el("a", { start: 0, duration: 4 });
+    const b = el("b", { start: 0, duration: 1 });
+    const c = el("c", { start: 2, duration: 1 });
+    const h = renderResizeHarness([a, b, c], ["a", "b"], { snap: true, onSeek });
+    h.startResize(a, "end");
+    h.movePointer(-198); // a's raw end 2.02s snaps to c at 2s; b clamps the shared delta
+    const clip = h.getResizingClip()!;
+    expect(clip.previewStart + clip.previewDuration).toBeCloseTo(3.1, 3);
+    expect(clip).toMatchObject({ snapTime: null, snapType: null });
+    expect(onSeek).toHaveBeenLastCalledWith(expect.closeTo(3.1 - 1 / 30, 3), { keepPlaying: true });
+    h.unmount();
+  });
+});

package/src/player/components/useTimelineClipDrag.ts

@@ -17,6 +17,7 @@ import type { TimelineEditCallbacks } from "./timelineCallbacks";
 import {
   computeDragPreview,
   computeResizePreview,
+  trimPreviewTime,
   previewGroupResize,
   type ResizePreviewResult,
 } from "./timelineClipDragPreview";
@@ -64,6 +65,8 @@ interface UseTimelineClipDragInput {
   ) => Promise<void> | void;
   onResizeElements?: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedClipState["intent"]) => void;
+  /** Seeks the preview; a trim shows the frame at its dragged edge. */
+  onSeek?: (time: number, options?: { keepPlaying?: boolean }) => void;
   setShowPopover: (show: boolean) => void;
   /** Stable ref to the range selection setter — wired after mount to break circular dependency. */
   setRangeSelectionRef: React.RefObject<((sel: null) => void) | null>;
@@ -92,6 +95,7 @@ export function useTimelineClipDrag({
   onResizeElement,
   onResizeElements,
   onBlockedEditAttempt,
+  onSeek,
   setShowPopover,
   setRangeSelectionRef,
   readZIndex,
@@ -149,11 +153,15 @@ export function useTimelineClipDrag({
   const dragAudioTracksRef = useRef<ReadonlySet<number> | null>(null);
 
   const buildSnapTargets = useCallback(
-    (excludeElementKey: string | null, includeBeats: boolean): TimelineSnapTarget[] => {
+    (
+      excludeElementKey: string | null,
+      includeBeats: boolean,
+      includePlayhead = true,
+    ): TimelineSnapTarget[] => {
       // Magnet off ⇒ no targets and no scan; do NOT cache so a mid-gesture toggle
       // back on starts scanning immediately (preserves the existing skip).
       if (!snapContextRef.current.enabled) return [];
-      const cacheKey = `${excludeElementKey ?? ""}|${includeBeats ? 1 : 0}`;
+      const cacheKey = `${excludeElementKey ?? ""}|${includeBeats ? 1 : 0}|${includePlayhead ? 1 : 0}`;
       const cached = snapTargetsCacheRef.current.get(cacheKey);
       if (cached) return cached;
       const targets = collectTimelineSnapTargets({
@@ -161,6 +169,7 @@ export function useTimelineClipDrag({
         playheadTime: usePlayerStore.getState().currentTime,
         beatTimes: includeBeats ? snapContextRef.current.beatTimes : [],
         excludeElementKey,
+        includePlayhead,
       });
       snapTargetsCacheRef.current.set(cacheKey, targets);
       return targets;
@@ -244,6 +253,10 @@ export function useTimelineClipDrag({
   onResizeElementRef.current = onResizeElement;
   const onResizeElementsRef = useRef(onResizeElements);
   onResizeElementsRef.current = onResizeElements;
+  const onSeekRef = useRef(onSeek);
+  onSeekRef.current = onSeek;
+  // Playhead time before the first trim preview seek; restored when the gesture ends.
+  const trimSeekOriginRef = useRef<number | null>(null);
   const readZIndexRef = useRef(readZIndex);
   readZIndexRef.current = readZIndex;
   const onStackingPatchesRef = useRef(onStackingPatches);
@@ -292,10 +305,17 @@ export function useTimelineClipDrag({
         pps: ppsRef.current,
         buildSnapTargets,
       });
-      const setResizeState = (v: ResizePreviewResult) =>
+      trimSeekOriginRef.current ??= usePlayerStore.getState().currentTime;
+      const setResizeState = (v: ResizePreviewResult) => {
+        // A trim never changes the play state: keepPlaying lets seek() decide,
+        // and it only resumes playback if it was already playing.
+        onSeekRef.current?.(trimPreviewTime(resize.edge, v.previewStart, v.previewDuration), {
+          keepPlaying: true,
+        });
         publishResizingClip(
           resizingClipRef.current ? { ...resizingClipRef.current, started: true, ...v } : null,
         );
+      };
 
       // Group resize: a capability-clean multi-selection resizes rigidly by one
       // shared, member-clamped delta (legacy main 36413da7f). The grabbed clip
@@ -338,6 +358,13 @@ export function useTimelineClipDrag({
       cancelAnimationFrame(clipDragScrollRaf.current);
       clipDragScrollRaf.current = 0;
     }
+    if (trimSeekOriginRef.current != null) {
+      // Paused: put the playhead back. Playing: leave it, a backward jump would rewind live playback.
+      if (!usePlayerStore.getState().isPlaying) {
+        onSeekRef.current?.(trimSeekOriginRef.current, { keepPlaying: true });
+      }
+      trimSeekOriginRef.current = null;
+    }
     // Gesture teardown: drop frozen caches so the next gesture reads fresh state.
     snapTargetsCacheRef.current.clear();
     dragAudioTracksRef.current = null;

package/src/player/lib/describeClips.ts

@@ -1,34 +1,9 @@
 /** Plain-field clip facts from the player store; feeds the Ask-agent prompt and `studio_look`. */
 import type { TimelineElement } from "../store/playerStore";
 import { elementAutomationLanes } from "../components/automationLaneData";
-import { roundTo3 } from "../../utils/rounding";
-
-export interface ClipLane {
-  /** `volume`, or `fx.<nodeId>.<param>`. */
-  target: string;
-  /** `t` is seconds from the start of the clip, not the composition. */
-  points: { t: number; v: number }[];
-}
-
-export interface ClipFact {
-  id: string;
-  label: string | null;
-  kind: string;
-  start: number;
-  duration: number;
-  end: number;
-  /** The `data-track-index` as written in the source file. */
-  trackIndex: number;
-  src: string | null;
-  sourceFile: string | null;
-  /** `null` when `data-volume` is not authored (the clip plays at 1). */
-  volume: number | null;
-  lanes: ClipLane[];
-  /** `null` at normal speed: not authored, or 1 (the manifest defaults it to 1). */
-  playbackRate: number | null;
-  audioGroup: string | null;
-  role: string | null;
-}
+import { byStart, formatClipLine, type ClipFact } from "@hyperframes/core/clip-facts";
+export { byStart } from "@hyperframes/core/clip-facts";
+export type { ClipFact } from "@hyperframes/core/clip-facts";
 
 /** The store holds preview URLs; the agent edits project files, so drop the origin and preview prefix. */
 function projectRelativeSrc(src: string): string {
@@ -57,36 +32,10 @@ export function describeClip(element: TimelineElement): ClipFact {
   };
 }
 
-export const byStart = (a: ClipFact, b: ClipFact) =>
-  a.start - b.start || a.trackIndex - b.trackIndex;
-
 export function describeClips(elements: readonly TimelineElement[]): ClipFact[] {
   return elements.map(describeClip).sort(byStart);
 }
 
-const num = (n: number) => String(roundTo3(n));
-
-function formatClipLine(clip: ClipFact): string {
-  const parts = [
-    `${clip.kind} "${clip.id}"`,
-    clip.src && `src=${clip.src}`,
-    `start=${num(clip.start)}`,
-    `duration=${num(clip.duration)}`,
-    `end=${num(clip.end)}`,
-    `track=${clip.trackIndex}`,
-    clip.volume !== null && `volume=${num(clip.volume)}`,
-    clip.playbackRate !== null && `rate=${num(clip.playbackRate)}`,
-    clip.audioGroup && `group=${clip.audioGroup}`,
-    clip.role && `role=${clip.role}`,
-    clip.sourceFile && `file=${clip.sourceFile}`,
-    ...clip.lanes.map(
-      (lane) =>
-        `${lane.target}-lane=[${lane.points.map((p) => `${num(p.t)}:${num(p.v)}`).join(", ")}]`,
-    ),
-  ];
-  return `- ${parts.filter(Boolean).join(" ")}`;
-}
-
 const PROMPT_CLIP_CAP = 200;
 
 /** The Ask-agent prompt's Timeline block; empty when the timeline has no clips. */

package/src/styles/iconTokens.ts

@@ -0,0 +1,20 @@
+import type { IconWeight } from "@phosphor-icons/react";
+
+const WEIGHTS = ["thin", "light", "regular", "bold", "fill", "duotone"] as const;
+
+function asWeight(value: string): IconWeight | null {
+  return (WEIGHTS as readonly string[]).includes(value) ? (value as IconWeight) : null;
+}
+
+/** Studio's Phosphor defaults, read off `theme.css` so size and weight have one
+ * owner instead of a CSS variable and a JS constant that drift. A missing or
+ * unrecognized value falls back to Phosphor's own default. */
+export function readIconTokens(root: Element = document.documentElement): {
+  size: string;
+  weight: IconWeight;
+} {
+  const styles = getComputedStyle(root);
+  const size = styles.getPropertyValue("--icon-size").trim();
+  const weight = asWeight(styles.getPropertyValue("--icon-weight").trim());
+  return { size: size || "1em", weight: weight ?? "regular" };
+}

package/src/styles/palette-reset.css

@@ -0,0 +1,6 @@
+/* Studio's own app clears Tailwind's stock palette so only Studio tokens are
+ * reachable from markup. Kept out of theme.css so a host importing the tokens
+ * keeps its own colours. Must be imported before theme.css. */
+@theme static {
+  --color-*: initial;
+}

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/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,213 @@
+/* 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;
+
+  /* -------------------------------------------------------------- geometry */
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+
+  /* 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);
+
+  /* ---------------------------------------------------------------- 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);
+
+  /* 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-accent: var(--color-accent);
+  --color-panel-danger: var(--color-danger);
+  --color-panel-media: var(--color-media);
+  --color-panel-container: var(--color-container);
+
+  /* ------------------------------------------- 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;
+  }
+}