@hyperframes/studio 0.8.104 → 0.8.105

package/src/components/editor/PropertyPanelFlatHeader.tsx

@@ -4,7 +4,7 @@ import { ClipboardList, Film, Square, Type, X } from "../../icons/SystemIcons";
 
 const ICON_BY_KIND = { text: Type, media: Film, other: Square } as const;
 const ICON_COLOR_BY_KIND = {
-  text: "text-panel-accent",
+  text: "text-accent-ink",
   media: "text-panel-media",
   other: "text-panel-container",
 } as const;
@@ -92,7 +92,7 @@ export function PropertyPanelFlatHeader({
             track("button", "Copy element info");
             onCopy();
           }}
-          className={copied ? "text-panel-accent" : undefined}
+          className={copied ? "text-accent-ink" : undefined}
         >
           <ClipboardList size={13} />
         </button>

package/src/components/editor/SnapToolbar.tsx

@@ -73,7 +73,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             motionPathArmed
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={() => setMotionPathArmed(!motionPathArmed)}
@@ -99,7 +99,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
             type="button"
             className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
               visible
-                ? "bg-studio-accent/20 text-studio-accent"
+                ? "bg-studio-accent/20 text-accent-ink"
                 : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
             }`}
             onClick={toggle}
@@ -115,7 +115,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         type="button"
         className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
           prefs.snapEnabled
-            ? "bg-studio-accent/20 text-studio-accent"
+            ? "bg-studio-accent/20 text-accent-ink"
             : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
         }`}
         onClick={toggleSnap}
@@ -131,7 +131,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             prefs.gridVisible
-              ? "bg-studio-accent/20 text-studio-accent"
+              ? "bg-studio-accent/20 text-accent-ink"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
           }`}
           onClick={toggleGrid}
@@ -164,7 +164,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         {gridPopoverOpen && (
           <div
             ref={popoverRef}
-            className="absolute right-0 top-full mt-1 rounded-lg bg-neutral-800 border border-neutral-700 p-3 shadow-xl min-w-[180px]"
+            className="absolute right-0 top-full mt-1 rounded-lg bg-raised border border-border p-3 shadow-xl min-w-[180px]"
           >
             <label className="flex items-center justify-between text-xs text-white/80 mb-2">
               <span>Grid spacing</span>

package/src/components/editor/TimelineFxPopover.tsx

@@ -139,7 +139,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-200 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-200 flex flex-col overflow-hidden rounded-md border border-border bg-raised p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}
@@ -165,10 +165,10 @@ export function TimelineFxPopover({
           onAuditionTracked={(id) => trackPresetAuditioned(id, { trackKind })}
         />
       </div>
-      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55">
+      <div className="mt-2 flex shrink-0 items-center justify-between border-t border-border pt-2 text-[10px] text-text-muted">
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();
@@ -178,7 +178,7 @@ export function TimelineFxPopover({
         </button>
         <button
           type="button"
-          className="hover:text-white"
+          className="hover:text-text-0"
           onClick={() => {
             onClose();
             onOpenRack();

package/src/components/editor/Transform3DCube.tsx

@@ -314,7 +314,7 @@ export function Transform3DCube({
           aria-label="Keyframe 3D transform"
           aria-pressed={keyframed}
           className={`absolute left-1.5 top-1.5 rounded p-0.5 hover:bg-neutral-800 ${
-            keyframed ? "text-[#5ff0bf]" : "text-neutral-500 hover:text-neutral-200"
+            keyframed ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >
           <svg

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

@@ -1,12 +1,6 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import { applyStudioBoxSize, applyStudioPathOffset, readStudioBoxSize } from "./manualEditsDom";
-import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
-import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
-import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
 import { computeNextResizeAnchor } from "./domEditResizeLocal";
-import type { PatchOperation } from "../../utils/sourcePatcher";
-import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
 /**
  * Center-anchored corner resize (CapCut model): the element scales about its
@@ -38,40 +32,6 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-/** Apply a built PatchOperation[] to a live element, mirroring sourcePatcher's
- * inline-style / attribute application — i.e. what the persisted source carries
- * when it is re-parsed into the DOM on the next preview load. */
-function applyPatchesToElement(el: HTMLElement, ops: PatchOperation[]): void {
-  for (const op of ops) {
-    if (op.type === "inline-style") {
-      if (op.value === null) el.style.removeProperty(op.property);
-      else el.style.setProperty(op.property, op.value);
-    } else if (op.type === "attribute") {
-      if (op.value === null) el.removeAttribute(op.property);
-      else el.setAttribute(op.property, op.value);
-    }
-  }
-}
-
-/** Net translate applied to an element, resolving the studio offset var()
- * expression to its px value so we compare the actually-rendered translation. */
-function resolvedTranslatePx(el: HTMLElement): { x: number; y: number } {
-  const raw = el.style.getPropertyValue("translate").trim();
-  if (!raw || raw === "none") return { x: 0, y: 0 };
-  const vx = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-x")) || 0;
-  const vy = Number.parseFloat(el.style.getPropertyValue("--hf-studio-offset-y")) || 0;
-  const parts = splitTopLevelWhitespace(raw);
-  const parseAxis = (part: string, varVal: number): number => {
-    if (part && part.includes("--hf-studio-offset")) return varVal;
-    const n = Number.parseFloat(part);
-    return Number.isFinite(n) ? n : 0;
-  };
-  return {
-    x: parseAxis(parts[0] ?? "", vx),
-    y: parseAxis(parts[1] ?? "", vy),
-  };
-}
-
 describe("center-anchored corner resize — no shift after release", () => {
   it("the per-frame center anchor converges (does NOT oscillate) — the release-shift root cause", () => {
     // Model the pointermove anchor loop that pins the element's CENTER. The physical
@@ -157,48 +117,4 @@ describe("center-anchored corner resize — no shift after release", () => {
       }
     }
   });
-
-  it("net translate after persist+reload equals the committed anchor offset (non-GSAP)", () => {
-    // The committed offset flows through the real apply → persist → reload chain
-    // unchanged (this hop was proved clean; the shift is upstream in the anchor
-    // loop above, not in persistence).
-    const el = document.createElement("div");
-    el.style.setProperty("width", "200px");
-    el.style.setProperty("height", "100px");
-    document.body.appendChild(el);
-
-    const anchorDx = -30;
-    const anchorDy = -18;
-    const finalSize = { width: 240, height: 130 };
-
-    applyStudioBoxSize(el, finalSize);
-    const memberResult = createManualOffsetDragMember({
-      key: "k",
-      selection: { element: el } as never,
-      element: el,
-      rect: { left: 0, top: 0, width: 240, height: 130, editScaleX: 1, editScaleY: 1 },
-    });
-    expect(memberResult.ok).toBe(true);
-    if (!memberResult.ok) return;
-
-    const finalOffset = applyManualOffsetDragCommit(memberResult.member, anchorDx, anchorDy);
-
-    applyStudioBoxSize(el, finalSize);
-    const patches = buildBoxSizePatches(el);
-    applyStudioPathOffset(el, finalOffset);
-    patches.push(...buildPathOffsetPatches(el));
-
-    expect(resolvedTranslatePx(el)).toEqual({ x: anchorDx, y: anchorDy });
-
-    // Persist → fresh element re-parsed from source → reload re-stamp.
-    const reloaded = document.createElement("div");
-    reloaded.style.setProperty("width", "200px");
-    reloaded.style.setProperty("height", "100px");
-    document.body.appendChild(reloaded);
-    applyPatchesToElement(reloaded, patches);
-    reapplyPositionEditsAfterSeek(reloaded.ownerDocument);
-
-    expect(resolvedTranslatePx(reloaded)).toEqual({ x: anchorDx, y: anchorDy });
-    expect(readStudioBoxSize(reloaded)).toEqual(finalSize);
-  });
 });

package/src/components/editor/easeCurveSvg.tsx

@@ -56,7 +56,7 @@ export function MiniCurveSvg({
       <path
         d={d}
         fill="none"
-        stroke={active ? "#3CE6AC" : "#737373"}
+        className={active ? "stroke-accent-ink" : "stroke-text-muted"}
         strokeWidth="1.5"
         strokeLinecap="round"
       />

package/src/components/editor/manualEditsDom.ts

@@ -253,9 +253,9 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
 // — as the non-GSAP path does — composes ON TOP of GSAP's transform, and the
 // subsequent strip/reapply math compounds into a runaway matrix that flings the
 // element off-canvas. So for GSAP-animated elements we keep `translate: none`
-// and push the offset straight into GSAP's x/y via gsap.set; the var() offset is
-// still persisted (buildPathOffsetPatches), and GSAP re-reads it at init on
-// reload. Returns true when handled as GSAP (caller must skip the CSS path).
+// and push the offset straight into GSAP's x/y via gsap.set; the var() offset an
+// older Studio saved stays in the file, and GSAP re-reads it at init on reload.
+// Returns true when handled as GSAP (caller must skip the CSS path).
 // fallow-ignore-next-line complexity
 function applyStudioPathOffsetViaGsap(
   element: HTMLElement,

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/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>