@hyperframes/studio 0.8.104 → 0.8.106

package/src/components/editor/manualEditsDomPatches.test.ts

@@ -42,7 +42,6 @@ import {
   STUDIO_MOTION_ORIGINAL_VISIBILITY_ATTR,
 } from "./studioMotionTypes";
 import {
-  buildPathOffsetPatches,
   buildClearPathOffsetPatches,
   buildBoxSizePatches,
   buildClearBoxSizePatches,
@@ -50,7 +49,7 @@ import {
   buildMotionPatches,
   buildClearMotionPatches,
 } from "./manualEditsDomPatches";
-import { applyStudioBoxSize, applyStudioPathOffset } from "./manualEditsDom";
+import { applyStudioBoxSize } from "./manualEditsDom";
 
 /* ── helpers ── */
 
@@ -71,39 +70,7 @@ function assertClearCoversKeys(buildOps: PatchOperation[], clearOps: PatchOperat
 
 /* ── Path offset ─────────────────────────────────────────────────────────── */
 
-describe("buildPathOffsetPatches / buildClearPathOffsetPatches", () => {
-  function populatedPathEl(): HTMLElement {
-    const e = div();
-    e.style.setProperty(STUDIO_OFFSET_X_PROP, "10px");
-    e.style.setProperty(STUDIO_OFFSET_Y_PROP, "20px");
-    e.style.setProperty("translate", "10px 20px");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSLATE_ATTR, "5px 10px");
-    e.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, "3px");
-    e.style.setProperty("display", "flex");
-    e.setAttribute(STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, "block");
-    return e;
-  }
-
-  it("populated: captures offset styles, attrs, display, and transform-display marker in declaration order", () => {
-    const ops = buildPathOffsetPatches(populatedPathEl());
-    expect(ops).toEqual([
-      { type: "inline-style", property: STUDIO_OFFSET_X_PROP, value: "10px" },
-      { type: "inline-style", property: STUDIO_OFFSET_Y_PROP, value: "20px" },
-      { type: "inline-style", property: "translate", value: "10px 20px" },
-      { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSLATE_ATTR, value: "5px 10px" },
-      { type: "attribute", property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, value: "3px" },
-      { type: "inline-style", property: "display", value: "flex" },
-      { type: "attribute", property: STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR, value: "block" },
-    ]);
-  });
-
-  it("empty: bare element yields only the path-offset marker", () => {
-    expect(buildPathOffsetPatches(div())).toEqual([
-      { type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" },
-    ]);
-  });
-
+describe("buildClearPathOffsetPatches", () => {
   it("clear: restores translate from STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR and display from STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR", () => {
     const e = div();
     e.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, "5px");
@@ -127,11 +94,6 @@ describe("buildPathOffsetPatches / buildClearPathOffsetPatches", () => {
     const ops = buildClearPathOffsetPatches(e);
     expect(ops.find((o) => o.property === "translate")?.value).toBeNull();
   });
-
-  it("build/clear symmetry: clear addresses every {type,property} key that build emits", () => {
-    const e = populatedPathEl();
-    assertClearCoversKeys(buildPathOffsetPatches(e), buildClearPathOffsetPatches(e));
-  });
 });
 
 /* ── Box size ────────────────────────────────────────────────────────────── */
@@ -286,52 +248,6 @@ describe("buildBoxSizePatches / buildClearBoxSizePatches", () => {
   });
 });
 
-/* ── Combined box-size + path-offset (anchored-corner resize) ──────────────── */
-
-describe("anchored-corner combined patch: [...buildBoxSizePatches, ...buildPathOffsetPatches]", () => {
-  // NW/NE/SW resize commits size AND anchor offset in ONE persist. The two
-  // builders read the same already-mutated element and are concatenated; this
-  // is only safe if their {type,property} keys are disjoint (no builder
-  // overwrites the other's op when the source patcher applies them in order).
-  it("concatenation of both builders emits disjoint {type,property} keys (no collision)", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const keys = combined.map(opKey);
-    expect(new Set(keys).size, `duplicate {type,property} key in combined patch: ${keys}`).toBe(
-      keys.length,
-    );
-  });
-
-  it("combined patch carries BOTH markers so a soft-reload re-hydrates size and offset together", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const has = (property: string) =>
-      combined.some((op) => op.type === "attribute" && op.property === property);
-    expect(has(STUDIO_BOX_SIZE_ATTR)).toBe(true);
-    expect(has(STUDIO_PATH_OFFSET_ATTR)).toBe(true);
-  });
-
-  it("order is size-first: every box-size op precedes every path-offset op", () => {
-    const e = div();
-    applyStudioBoxSize(e, { width: 300, height: 200 });
-    applyStudioPathOffset(e, { x: 10, y: 20 });
-
-    const boxKeys = new Set(buildBoxSizePatches(e).map(opKey));
-    const combined = [...buildBoxSizePatches(e), ...buildPathOffsetPatches(e)];
-    const lastBoxIdx = combined.reduce((acc, op, i) => (boxKeys.has(opKey(op)) ? i : acc), -1);
-    const firstOffsetIdx = combined.findIndex(
-      (op) => op.type === "attribute" && op.property === STUDIO_PATH_OFFSET_ATTR,
-    );
-    expect(firstOffsetIdx).toBeGreaterThan(lastBoxIdx);
-  });
-});
-
 /* ── Rotation ────────────────────────────────────────────────────────────── */
 
 describe("buildClearRotationPatches", () => {

package/src/components/editor/manualEditsDomPatches.ts

@@ -72,36 +72,6 @@ function appendTransformDisplayOps(element: HTMLElement, ops: PatchOperation[]):
 
 /* ── Path offset patches ─────────────────────────────────────────── */
 
-export function buildPathOffsetPatches(element: HTMLElement): PatchOperation[] {
-  const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
-  // When GSAP owns the element's transform, the live inline translate is kept
-  // at "none" (the offset lives in GSAP's cache — see applyStudioPathOffset).
-  // Persist the var() expression in that case, so a reload re-folds the offset.
-  const inlineTranslate = element.style.getPropertyValue("translate");
-  const hasOffsetVars =
-    element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) ||
-    element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-  const translateValue =
-    inlineTranslate && inlineTranslate !== "none"
-      ? inlineTranslate
-      : hasOffsetVars
-        ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`
-        : null;
-  if (translateValue) {
-    ops.push({ type: "inline-style", property: "translate", value: translateValue });
-  }
-  ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
-  collectAttributeOps(
-    element,
-    [STUDIO_ORIGINAL_TRANSLATE_ATTR, STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR],
-    ops,
-  );
-  collectInlineStyleOps(element, ["display"], ops);
-  collectAttributeOps(element, [STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR], ops);
-  return ops;
-}
-
 export function buildClearPathOffsetPatches(element: HTMLElement): PatchOperation[] {
   const originalInlineTranslate = element.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR);
   const ops: PatchOperation[] = [

package/src/components/editor/manualEditsSnapshot.ts

@@ -265,6 +265,7 @@ function restoreOriginalTranslateProperty(element: HTMLElement): void {
 export function clearStudioPathOffset(element: HTMLElement): void {
   if (
     element.hasAttribute(STUDIO_PATH_OFFSET_ATTR) ||
+    element.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR) ||
     styleUsesStudioOffset(element.style.getPropertyValue("translate"))
   ) {
     restoreOriginalTranslateProperty(element);

package/src/components/editor/marqueeCommit.test.tsx

@@ -1,10 +1,20 @@
 // @vitest-environment happy-dom
 import { act, useRef } from "react";
 import type { Root } from "react-dom/client";
-import { afterEach, beforeEach, expect, it } from "vitest";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
 import { useMarqueeGestures } from "./marqueeCommit";
 
+// Layout stands in for a real preview: every element is visible and sits at the band's start.
+vi.mock("./domEditingElement", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditingElement")>()),
+  isElementComputedVisible: () => true,
+}));
+vi.mock("./domEditOverlayGeometry", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./domEditOverlayGeometry")>()),
+  toVisibleOverlayRect: () => ({ left: 10, top: 10, width: 40, height: 40 }),
+}));
+
 installReactActEnvironment();
 HTMLElement.prototype.setPointerCapture ??= () => {};
 HTMLElement.prototype.releasePointerCapture ??= () => {};
@@ -82,3 +92,61 @@ it("an escape with no band in flight still reaches the host", () => {
   expect(event.defaultPrevented).toBe(false);
   expect(hostEscapes).toHaveLength(1);
 });
+
+it("a reload promoted mid-band selects from the preview on screen, not the retired one", async () => {
+  const preview = () => {
+    const iframe = document.createElement("iframe");
+    const doc = document.implementation.createHTMLDocument("preview");
+    doc.body.innerHTML = '<div data-composition-id="main"><h1 id="title">Title</h1></div>';
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    return iframe;
+  };
+  const [retired, live] = [preview(), preview()];
+  const picked: HTMLElement[][] = [];
+  const iframeRef = { current: retired as HTMLIFrameElement | null };
+  function Band() {
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const marquee = useMarqueeGestures({
+      iframeRef,
+      overlayRef,
+      activeCompositionPathRef: useRef<string | null>("index.html"),
+      onMarqueeSelectRef: useRef(() => undefined),
+      resolveHits: async (elements: HTMLElement[]) => {
+        picked.push(elements);
+        return [];
+      },
+    });
+    return (
+      <div
+        ref={overlayRef}
+        data-band-overlay
+        onPointerDown={marquee.begin}
+        onPointerMove={marquee.onPointerMove}
+        onPointerUp={marquee.onPointerUp}
+      />
+    );
+  }
+  const band = mountReactHarness(<Band />);
+  const fire = (type: string, x: number, y: number) =>
+    act(() => {
+      document.querySelector("[data-band-overlay]")!.dispatchEvent(
+        new PointerEvent(type, {
+          bubbles: true,
+          button: 0,
+          pointerId: 1,
+          clientX: x,
+          clientY: y,
+        }),
+      );
+    });
+  try {
+    fire("pointerdown", 0, 0);
+    fire("pointermove", 120, 90);
+    iframeRef.current = live;
+    await act(async () => fire("pointerup", 120, 90));
+    expect(picked.at(-1)?.length).toBeGreaterThan(0);
+    for (const element of picked.at(-1)!) expect(element.ownerDocument).toBe(live.contentDocument);
+  } finally {
+    act(() => band.unmount());
+  }
+});

package/src/components/editor/marqueeCommit.ts

@@ -159,7 +159,12 @@ export function useMarqueeGestures<T>(deps: MarqueeGesturesDeps<T>): MarqueeGest
       const overlay = deps.overlayRef.current;
       if (!iframe || !overlay || !deps.onMarqueeSelectRef.current) return;
       const acp = deps.activeCompositionPathRef.current ?? "index.html";
-      const candidates = candidatesRef.current ?? collectMarqueeCandidates(iframe, overlay, acp);
+      const cached = candidatesRef.current;
+      const measuredOnScreen = cached?.every(
+        (hit) => hit.element.ownerDocument === iframe.contentDocument,
+      );
+      const candidates =
+        cached && measuredOnScreen ? cached : collectMarqueeCandidates(iframe, overlay, acp);
       const elements = hitsWithin(rect, candidates).map((hit) => hit.element);
       const resolveHits = deps.resolveHits;
       const picks = resolveHits

package/src/components/editor/overlayFrameLoop.test.ts

@@ -3,8 +3,10 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   IDLE_POLL_MS,
+  IDLE_SLICE_MS,
   requestOverlayFrames,
   resetOverlayFrameLoopForTests,
+  runWhenInputIdle,
   subscribeOverlayFrame,
 } from "./overlayFrameLoop";
 import { usePlayerStore } from "../../player/store/playerStore";
@@ -71,6 +73,31 @@ describe("overlay frame loop", () => {
     expect(runs).toBeGreaterThan(0);
   });
 
+  it("runs idle work in capped slices, only while no input arrives", () => {
+    const budgets: number[] = [];
+    requestOverlayFrames();
+    runWhenInputIdle((timeLeft) => {
+      budgets.push(timeLeft());
+      return budgets.length === 3;
+    });
+    vi.advanceTimersByTime(300);
+    expect(budgets).toEqual([]);
+    vi.advanceTimersByTime(200);
+    expect(budgets).toHaveLength(3);
+    expect(Math.max(...budgets)).toBeLessThanOrEqual(IDLE_SLICE_MS);
+
+    // Input during a slice holds the next one until the loop has been idle again.
+    const slices: number[] = [];
+    runWhenInputIdle(() => {
+      slices.push(performance.now());
+      if (slices.length === 1) requestOverlayFrames();
+      return slices.length === 2;
+    });
+    vi.advanceTimersByTime(1000);
+    expect(slices).toHaveLength(2);
+    expect(slices[1] - slices[0]).toBeGreaterThanOrEqual(400);
+  });
+
   it("runs every subscriber on one frame, not one frame each", () => {
     const calls: string[] = [];
     subscribeOverlayFrame(() => calls.push("a"));

package/src/components/editor/overlayFrameLoop.ts

@@ -143,6 +143,27 @@ function schedule(): void {
   }, IDLE_POLL_MS);
 }
 
+/** Longest idle slice, so input that arrives during one waits at most this long for its frame. */
+export const IDLE_SLICE_MS = 3;
+
+/**
+ * Runs `step` in idle slices once no input has woken the loop for AWAKE_MS, so it never shares a gesture's
+ * frames. `step` works while `timeLeft()` is positive and returns true when it has finished.
+ */
+export function runWhenInputIdle(step: (timeLeft: () => number) => boolean): void {
+  const wait = awakeUntil - performance.now();
+  if (wait > 0) {
+    setTimeout(() => runWhenInputIdle(step), wait);
+    return;
+  }
+  const idle = window.requestIdleCallback ?? ((callback: () => void) => setTimeout(callback, 0));
+  idle(() => {
+    const end = performance.now() + IDLE_SLICE_MS;
+    if (performance.now() < awakeUntil || !step(() => end - performance.now()))
+      runWhenInputIdle(step);
+  });
+}
+
 /** Something moved, or might have. Run frames at full rate for a moment. */
 export function requestOverlayFrames(): void {
   awakeUntil = performance.now() + AWAKE_MS;

package/src/components/editor/persistSeam.integration.test.ts

@@ -14,8 +14,6 @@ import {
   buildDomEditStylePatchOperation,
   buildDomEditTextPatchOperation,
 } from "./domEditingLayers";
-import { buildPathOffsetPatches } from "./manualEditsDomPatches";
-import { STUDIO_OFFSET_X_PROP, STUDIO_PATH_OFFSET_ATTR } from "./manualEditsTypes";
 import { makeSelection } from "../../hooks/domSelectionTestHarness";
 import { buildTextFieldChildOperations } from "../../hooks/domEditTextFieldCommitOps";
 
@@ -126,22 +124,6 @@ describe("persist seam source mutation", () => {
     expect(findByHfId(html, "qa-image").getAttribute("style")).toContain("opacity: 0.4");
   });
 
-  it("persists detached jsdom path offset operations", () => {
-    const element = document.createElement("div");
-    element.style.setProperty(STUDIO_OFFSET_X_PROP, "24px");
-
-    const html = patchAndExpectChange(
-      indexHtml,
-      clientTarget({ id: "qa-shape", hfId: "qa-shape", tagName: "div" }),
-      buildPathOffsetPatches(element),
-    );
-    const shape = findByHfId(html, "qa-shape");
-
-    expect(shape.getAttribute("style")).toContain(`${STUDIO_OFFSET_X_PROP}: 24px`);
-    expect(shape.getAttribute("style")).toContain("translate: var(--hf-studio-offset-x, 0px)");
-    expect(shape.getAttribute(STUDIO_PATH_OFFSET_ATTR)).toBe("true");
-  });
-
   it("persists timeline data-start attribute operation", () => {
     const html = patchAndExpectChange(
       indexHtml,

package/src/components/editor/plainTranslate.ts

@@ -1,8 +1,14 @@
 import { roundTo3 } from "../../utils/rounding";
 import { gsapWritesPosition, gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
 import { readCssRotation } from "../../hooks/draggedGsapPosition";
-import { readStudioPathOffset, readStudioRotation } from "./manualEditsDom";
+import { readStudioPathOffset, readStudioRotation, styleUsesStudioOffset } from "./manualEditsDom";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+import {
+  STUDIO_OFFSET_X_PROP,
+  STUDIO_OFFSET_Y_PROP,
+  STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+  STUDIO_PATH_OFFSET_ATTR,
+} from "./manualEditsTypes";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 
 type Point = { x: number; y: number };
@@ -102,11 +108,36 @@ function formatTranslatePx(p: Point): string {
   return `${roundTo3(p.x)}px ${roundTo3(p.y)}px`;
 }
 
-export function translatePatch(p: Point): PatchOperation & { value: string } {
-  return { type: "inline-style", property: "translate", value: formatTranslatePx(p) };
+const LEGACY_OFFSET_VARS = [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP];
+
+/** Writes a move as the element's own translate; ends a legacy offset's vars and mark. */
+export function writePlainMove(el: HTMLElement, p: Point): PatchOperation[] {
+  writeTranslatePx(el, p);
+  const patches: PatchOperation[] = [
+    { type: "inline-style", property: "translate", value: formatTranslatePx(p) },
+    {
+      type: "attribute",
+      property: STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
+      value: el.getAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR),
+    },
+  ];
+  for (const prop of LEGACY_OFFSET_VARS.filter((v) => el.style.getPropertyValue(v))) {
+    el.style.removeProperty(prop);
+    patches.push({ type: "inline-style", property: prop, value: null });
+  }
+  if (el.hasAttribute(STUDIO_PATH_OFFSET_ATTR)) {
+    el.removeAttribute(STUDIO_PATH_OFFSET_ATTR);
+    patches.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: null });
+  }
+  return patches;
 }
 
+/** The first write records the author's own translate ("" for none), which Reset puts back. */
 export function writeTranslatePx(el: HTMLElement, p: Point): void {
+  if (!el.hasAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR)) {
+    const own = el.style.getPropertyValue("translate");
+    el.setAttribute(STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR, styleUsesStudioOffset(own) ? "" : own);
+  }
   el.style.setProperty("translate", formatTranslatePx(p));
 }
 

package/src/components/editor/propertyPanelColorCurveGraph.tsx

@@ -477,7 +477,7 @@ export function CurveGraph({
           onSettle();
         }
       }}
-      className="mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm border border-panel-border-input bg-black/20 outline-hidden focus:ring-1 focus:ring-panel-accent"
+      className="mx-auto aspect-square w-full max-w-[200px] touch-none rounded-sm scheme-dark border border-panel-border-input bg-bg-0 outline-hidden focus:ring-1 focus:ring-inset focus:ring-panel-accent"
     >
       <defs>
         <linearGradient id={`hf-hue-axis-${tab.key}`}>
@@ -491,7 +491,7 @@ export function CurveGraph({
         </linearGradient>
       </defs>
       {[0.25, 0.5, 0.75].map((ratio) => (
-        <g key={ratio} stroke="rgba(255,255,255,0.08)" strokeWidth="0.5">
+        <g key={ratio} className="stroke-text-0/10" strokeWidth="0.5">
           <line
             x1={GRAPH_PADDING}
             y1={GRAPH_PADDING + ratio * (GRAPH_SIZE - GRAPH_PADDING * 2)}

package/src/components/editor/propertyPanelColorGradingControls.tsx

@@ -431,7 +431,7 @@ export function ColorGradingControls({
               />
             </div>
             {lutImportError && (
-              <div className="text-[10px] text-red-400" role="alert">
+              <div className="text-[10px] text-danger-ink" role="alert">
                 {lutImportError}
               </div>
             )}

package/src/components/editor/propertyPanelColorGradingSection.tsx

@@ -14,11 +14,11 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 function StatusPill({ status }: { status: RuntimeColorGradingStatus }) {
   const dotClass =
     status.state === "active"
-      ? "bg-emerald-400"
+      ? "bg-accent"
       : status.state === "pending"
-        ? "bg-amber-300"
+        ? "bg-warning-ink"
         : status.state === "unavailable"
-          ? "bg-red-400"
+          ? "bg-danger-ink"
           : "bg-panel-text-5";
   return (
     <div
@@ -44,18 +44,18 @@ function HdrMediaWarning({ metadata }: { metadata: MediaMetadata | null }) {
     .join(" · ");
 
   return (
-    <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-amber-100">
+    <div className="mb-3 rounded-md border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-[11px] leading-4 text-warning-ink">
       <div className="mb-1 flex min-w-0 items-center justify-between gap-2">
         <span className="font-semibold">{metadata.color.label} source</span>
-        <span className="rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
+        <span className="rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink">
           SDR preview
         </span>
       </div>
-      <p className="text-amber-100/80">
+      <p className="text-text-2">
         These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this
         is not true HDR color grading yet.
       </p>
-      {details && <p className="mt-1 truncate text-[10px] text-amber-100/55">{details}</p>}
+      {details && <p className="mt-1 truncate text-[10px] text-text-muted">{details}</p>}
     </div>
   );
 }
@@ -120,7 +120,7 @@ function HoldBeforeButton({
       }}
       className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${
         active
-          ? "bg-studio-accent text-black"
+          ? "bg-studio-accent text-on-accent"
           : "text-panel-text-4 hover:bg-panel-hover hover:text-panel-text-1"
       } disabled:cursor-not-allowed disabled:opacity-40`}
       title="Hold to show original"

package/src/components/editor/propertyPanelColorGradingSlider.tsx

@@ -158,7 +158,7 @@ export function ColorGradingSliderControl({
               settings.onClick();
             }}
             className={`relative flex h-5 w-5 shrink-0 items-center justify-center rounded transition-colors hover:bg-panel-hover hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40 ${
-              settings.active ? "text-studio-accent" : "text-panel-text-5"
+              settings.active ? "text-accent-ink" : "text-panel-text-5"
             }`}
             title={settings.label}
           >

package/src/components/editor/propertyPanelColorSecondary.tsx

@@ -204,13 +204,13 @@ export function PropertyPanelColorSecondary({
                 setSampling(false);
               }
             }}
-            className="flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:opacity-50"
+            className="flex min-h-7 items-center gap-1.5 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:opacity-50"
           >
             <Eyedropper size={12} />
             {sampling ? "Capturing frame" : "Sample color from frame"}
           </button>
           {captureError && (
-            <p role="alert" className="text-[9px] leading-4 text-red-300">
+            <p role="alert" className="text-[9px] leading-4 text-danger-ink">
               {captureError}
             </p>
           )}
@@ -221,7 +221,7 @@ export function PropertyPanelColorSecondary({
                   type="button"
                   aria-pressed={!showMatte}
                   onClick={() => setShowMatte(false)}
-                  className={!showMatte ? "text-panel-accent" : "text-panel-text-4"}
+                  className={!showMatte ? "text-accent-ink" : "text-panel-text-4"}
                 >
                   Source
                 </button>
@@ -229,7 +229,7 @@ export function PropertyPanelColorSecondary({
                   type="button"
                   aria-pressed={showMatte}
                   onClick={() => setShowMatte(true)}
-                  className={showMatte ? "text-panel-accent" : "text-panel-text-4"}
+                  className={showMatte ? "text-accent-ink" : "text-panel-text-4"}
                 >
                   Selection matte
                 </button>

package/src/components/editor/propertyPanelFill.tsx

@@ -131,7 +131,7 @@ export function ImageFillField({
             className={`inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${
               disabled || uploading
                 ? "cursor-not-allowed text-neutral-600"
-                : "cursor-pointer hover:border-neutral-600 hover:text-white"
+                : "cursor-pointer hover:border-neutral-600 hover:text-text-0"
             }`}
           >
             <Plus size={12} className="shrink-0" />
@@ -151,7 +151,7 @@ export function ImageFillField({
           />
         </div>
         {uploadError && (
-          <div className="text-[10px] text-red-400" role="alert">
+          <div className="text-[10px] text-danger-ink" role="alert">
             {uploadError}
           </div>
         )}
@@ -340,7 +340,7 @@ export function GradientField({
                 track("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               }}
-              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
+              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-accent-ink focus:ring-panel-accent"
             />
             Repeat
           </label>
@@ -357,7 +357,7 @@ export function GradientField({
                 })),
               });
             }}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <ReverseGradientIcon size={16} />
             Reverse
@@ -442,7 +442,7 @@ export function GradientField({
             disabled={disabled || parsed.stops.length >= 6}
             onClick={() => addStop()}
             title={parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop"}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <Plus size={12} />
             Add stop
@@ -474,7 +474,7 @@ export function GradientField({
                 type="button"
                 disabled={disabled || parsed.stops.length <= 2}
                 onClick={() => removeStop(index)}
-                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-700"
+                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off"
                 aria-label={`Remove stop ${index + 1}`}
               >
                 <X size={12} />

package/src/components/editor/propertyPanelFlatColorGradingAccessory.tsx

@@ -5,9 +5,9 @@ import { Compare, RotateCcw } from "../../icons/SystemIcons";
 import type { ColorGradingControllerState } from "./useColorGradingController";
 
 const STATUS_DOT_CLASS: Record<ColorGradingControllerState["runtimeStatus"]["state"], string> = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
+  active: "bg-accent",
+  pending: "bg-warning-ink",
+  unavailable: "bg-danger-ink",
   missing: "bg-panel-text-5",
   inactive: "bg-panel-text-5",
 };

package/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx

@@ -81,7 +81,7 @@ describe("FlatColorGradingAccessory", () => {
     const dot = host.querySelector('[data-flat-grade-status-dot="true"]');
     expect(dot).not.toBeNull();
     expect(dot?.getAttribute("title")).toBe("Shader active");
-    expect(dot?.className).toContain("bg-emerald-400");
+    expect(dot?.className).toContain("bg-accent");
     act(() => root.unmount());
   });