@hyperframes/studio 0.8.103 → 0.8.105

package/src/components/editor/plainTranslate.ts

@@ -1,7 +1,14 @@
 import { roundTo3 } from "../../utils/rounding";
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
-import { readStudioPathOffset } from "./manualEditsDom";
+import { gsapWritesPosition, gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { readCssRotation } from "../../hooks/draggedGsapPosition";
+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 };
@@ -101,15 +108,44 @@ 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));
 }
 
 /** The position the panel shows and edits: the translate a move writes, unless GSAP positions it. */
-export function readMoveOffset(el: HTMLElement): Point {
-  return gsapWritesPosition(el) ? readStudioPathOffset(el) : readTranslatePx(el);
+export function readMoveOffset(el: HTMLElement, plainTranslate = !gsapWritesPosition(el)): Point {
+  return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
+}
+
+export function readShownRotation(el: HTMLElement): { angle: number } {
+  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
 }

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());
   });
 

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -70,23 +70,20 @@ function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
   return (
     <div
       data-flat-grade-hdr-banner="true"
-      className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-amber-100"
+      className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-warning-ink"
     >
       <div className="mb-0.5 flex 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
-          data-flat-grade-hdr-detail="true"
-          className="mt-0.5 truncate text-[9px] text-amber-100/55"
-        >
+        <p data-flat-grade-hdr-detail="true" className="mt-0.5 truncate text-[9px] text-text-muted">
           {details}
         </p>
       )}
@@ -214,7 +211,7 @@ export function FlatColorGradingSection({
           <button
             type="button"
             onClick={onRequestPresetPreviews}
-            className="text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+            className="text-[10px] font-medium text-accent-ink hover:text-accent-ink/80"
           >
             Retry look previews
           </button>
@@ -519,7 +516,7 @@ export function FlatColorGradingSection({
               track("button", "Apply grade to scope");
               onApplyToScope();
             }}
-            className="text-[11px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:cursor-not-allowed disabled:opacity-50"
+            className="text-[11px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {applyBusy ? "Applying" : "Apply"}
           </button>

package/src/components/editor/propertyPanelFlatEffectsSection.tsx

@@ -186,7 +186,7 @@ export function FlatEffectsSection({
               track("button", "Customize effect palette");
               onCommitColorGrading({ ...grading, palette: fallback });
             }}
-            className="flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+            className="flex min-h-[28px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80"
           >
             <Plus size={11} /> Custom palette
           </button>
@@ -307,7 +307,7 @@ export function FlatEffectsSection({
                 type="button"
                 title={`Remove ${selectedEffect.label}`}
                 onClick={() => removeEffect(selectedEffect)}
-                className="text-panel-text-4 hover:text-red-300"
+                className="text-panel-text-4 hover:text-danger-ink"
               >
                 <X size={11} />
               </button>
@@ -352,7 +352,7 @@ export function FlatEffectsSection({
         data-flat-effects-add-toggle="true"
         aria-expanded={catalogOpen}
         onClick={() => setCatalogOpen((open) => !open)}
-        className="flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+        className="flex min-h-[30px] items-center gap-1 text-[10px] font-medium text-accent-ink hover:text-accent-ink/80"
       >
         <Plus size={11} /> Add effect
       </button>
@@ -374,7 +374,7 @@ export function FlatEffectsSection({
                 onClick={() => setCatalogGroup(group.label)}
                 className={`min-h-[25px] min-w-0 truncate bg-panel-bg px-2 text-[9px] ${
                   catalogGroup === group.label
-                    ? "font-medium text-panel-accent"
+                    ? "font-medium text-accent-ink"
                     : "text-panel-text-4 hover:text-panel-text-1"
                 }`}
               >

package/src/components/editor/propertyPanelFlatMediaSection.tsx

@@ -200,7 +200,7 @@ export function FlatMediaSection({
               data-flat-media-remove-bg="true"
               disabled={!canRemoveBackground || removeBusy}
               onClick={() => void runBackgroundRemoval()}
-              className="flex items-center gap-1 text-[10px] font-medium text-panel-accent disabled:cursor-not-allowed disabled:opacity-50"
+              className="flex items-center gap-1 text-[10px] font-medium text-accent-ink disabled:cursor-not-allowed disabled:opacity-50"
               title={
                 canRemoveBackground
                   ? "Remove background and save a transparent asset"
@@ -231,7 +231,7 @@ export function FlatMediaSection({
               <div className="h-1 overflow-hidden rounded-full bg-panel-hover">
                 <div
                   className={`h-full rounded-full ${
-                    removeProgress.status === "failed" ? "bg-red-400" : "bg-panel-accent"
+                    removeProgress.status === "failed" ? "bg-danger-ink" : "bg-panel-accent"
                   }`}
                   style={{ width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }}
                 />

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -148,13 +148,13 @@ export function FlatMotionSection({
       {showEffects && (
         <>
           {multipleTimelines && (
-            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
               This file has multiple GSAP timelines. Animation editing is disabled to prevent data
               loss — consolidate into a single timeline to enable editing.
             </p>
           )}
           {unsupportedTimelinePattern && (
-            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-amber-400">
+            <p className="rounded-lg bg-amber-500/10 px-3 py-2 text-[11px] leading-relaxed text-warning-ink">
               This timeline uses a computed key the editor can&apos;t resolve statically.
             </p>
           )}

package/src/components/editor/propertyPanelFlatOverlaysSection.tsx

@@ -45,7 +45,7 @@ export function FlatOverlaysSection({
     return <div className="py-4 text-center text-[10px] text-panel-text-4">Loading overlays…</div>;
   }
   if (error) {
-    return <div className="py-4 text-center text-[10px] text-red-300">{error}</div>;
+    return <div className="py-4 text-center text-[10px] text-danger-ink">{error}</div>;
   }
 
   const busy = adding !== null;
@@ -95,7 +95,7 @@ export function FlatOverlaysSection({
             )}
             <Plus
               size={12}
-              className="absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-panel-accent group-hover:opacity-100"
+              className="absolute right-1.5 top-1.5 text-white opacity-70 drop-shadow-sm group-hover:text-accent-ink group-hover:opacity-100"
             />
           </span>
           <span className="block truncate px-2 py-1.5 text-[10px] text-panel-text-2">

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

@@ -60,7 +60,7 @@ describe("FlatRow", () => {
       />,
     );
     const value = host.querySelector('[data-flat-row-value="true"]');
-    expect(value?.className).toContain("text-panel-accent");
+    expect(value?.className).toContain("text-accent-ink");
     const reset = host.querySelector<HTMLButtonElement>('[data-flat-row-reset="true"]');
     expect(reset).not.toBeNull();
     act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
@@ -356,7 +356,7 @@ describe("FlatSlider", () => {
     const fill = host.querySelector<HTMLElement>('[data-flat-slider-fill="true"]');
     expect(fill?.style.width).toBe("100%");
     const knob = host.querySelector<HTMLElement>('[data-flat-slider-knob="true"]');
-    expect(knob?.className).toContain("bg-white");
+    expect(knob?.className).toContain("bg-text-0");
     act(() => root.unmount());
   });
 
@@ -1172,7 +1172,7 @@ describe("FlatSelectRow", () => {
       />,
     );
     const select = host.querySelector<HTMLSelectElement>("select");
-    expect(select?.className).toContain("text-panel-accent");
+    expect(select?.className).toContain("text-accent-ink");
     const reset = host.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
     act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onReset).toHaveBeenCalledTimes(1);
@@ -1364,6 +1364,7 @@ describe("FlatSlider — typed value", () => {
     const still = host.querySelector<HTMLInputElement>('[data-flat-slider-input="true"]');
     expect(still).not.toBeNull();
     expect(still?.getAttribute("aria-invalid")).toBe("true");
+    expect(still?.className).toContain("border-dashed");
     act(() => still?.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
     expect(host.querySelector('[data-flat-slider-input="true"]')).toBeNull();
     expect(host.querySelector('[data-flat-slider-value="true"]')?.textContent).toBe("1x");

package/src/components/editor/propertyPanelFlatPrimitives.tsx

@@ -537,7 +537,7 @@ export function FlatSlider({
         <div
           data-flat-slider-knob="true"
           className={`absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${
-            tier === "explicitCustom" ? "h-2 w-2 bg-white" : "h-[7px] w-[7px] bg-panel-text-4"
+            tier === "explicitCustom" ? "h-2 w-2 bg-text-0" : "h-[7px] w-[7px] bg-panel-text-4"
           }`}
           style={{ left: `${clampedPct}%` }}
         />

package/src/components/editor/propertyPanelFlatSliderReadout.tsx

@@ -76,7 +76,7 @@ export function FlatSliderReadout({
         }}
         onBlur={() => commit(false)}
         className={`w-11 shrink-0 rounded-[3px] border bg-panel-surface px-1 text-right font-mono text-[10px] text-panel-text-0 outline-none ${
-          invalid ? "border-red-400" : "border-panel-accent"
+          invalid ? "border-dashed border-danger-ink" : "border-panel-accent"
         }`}
       />
     );

package/src/components/editor/propertyPanelFont.tsx

@@ -433,7 +433,7 @@ export function FontFamilyField({
             type="button"
             disabled={disabled || loadingLocalFonts}
             onClick={loadBrowserLocalFonts}
-            className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+            className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off"
           >
             {loadingLocalFonts ? "..." : "Local"}
           </button>
@@ -442,7 +442,7 @@ export function FontFamilyField({
           type="button"
           disabled={disabled || importingFonts || !onImportFonts}
           onClick={() => fontInputRef.current?.click()}
-          className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-neutral-700"
+          className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 text-[10px] font-medium text-neutral-400 transition-colors hover:border-neutral-600 hover:text-neutral-100 disabled:cursor-not-allowed disabled:text-text-off"
         >
           {importingFonts ? "..." : "Import"}
         </button>

package/src/components/editor/propertyPanelFxCarveModule.tsx

@@ -111,7 +111,7 @@ function FxCarveMember({
               {/* The lane is where an automated value comes from, and where it is
                   edited — saying so is the difference between a stale readout and
                   a pointer to the thing that owns it. */}
-              {automated ? <span className="text-[#3CE6AC]">A</span> : null}
+              {automated ? <span className="text-accent-ink">A</span> : null}
             </span>
           );
         })}

package/src/components/editor/propertyPanelFxControls.tsx

@@ -90,7 +90,7 @@ export function AutomationToggle({
         type="button"
         className={`hf-fx-automate w-[16px] shrink-0 rounded-[3px] border font-mono text-[9px] leading-none ${
           automated
-            ? "border-panel-accent text-panel-accent"
+            ? "border-panel-accent text-accent-ink"
             : "border-panel-border-input text-panel-text-2 hover:text-panel-text-0"
         }`}
         aria-pressed={automated}
@@ -237,7 +237,7 @@ export function FxParamRow({
       {/* See the enum row above for why the name wraps instead of truncating. */}
       <span
         className={`hf-fx-label w-[86px] shrink-0 wrap-break-word text-[10px] leading-tight ${
-          automated ? "text-panel-accent" : "text-panel-text-2"
+          automated ? "text-accent-ink" : "text-panel-text-2"
         }`}
       >
         {param.label}

package/src/components/editor/propertyPanelFxEqModule.tsx

@@ -115,7 +115,7 @@ function Fader({
       </span>
       <span
         className={`hf-fx-eq-value font-mono text-[9px] tabular-nums ${
-          moved ? "text-panel-accent" : "text-panel-text-2"
+          moved ? "text-accent-ink" : "text-panel-text-2"
         }`}
       >
         {moved ? shown(value) : "0"}
@@ -160,7 +160,7 @@ export function FxEqModule({
         <span className="font-mono text-[9px] text-panel-text-2">{bands.length}-band</span>
         <button
           type="button"
-          className="hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-panel-danger"
+          className="hf-fx-remove px-1 text-[11px] text-panel-text-2 hover:text-danger-ink"
           aria-label="Remove Tone"
           disabled={disabled}
           onClick={onRemove}

package/src/components/editor/propertyPanelFxNodeRow.tsx

@@ -216,7 +216,7 @@ function FxNodeHeader({
       />
       <button
         type="button"
-        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40"
+        className="hf-fx-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
         title="Remove"
         disabled={disabled}
         onClick={onRemove}

package/src/components/editor/propertyPanelFxPresetRun.tsx

@@ -189,7 +189,7 @@ export function FxPresetRun({
         </button>
         <button
           type="button"
-          className="hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-red-400 disabled:opacity-40"
+          className="hf-fx-preset-run-remove px-1 font-mono text-[11px] text-panel-text-2 hover:text-danger-ink disabled:opacity-40"
           title={`Remove ${preset.label}`}
           disabled={disabled}
           onClick={onRemoveRun}

package/src/components/editor/propertyPanelMediaSection.tsx

@@ -231,7 +231,7 @@ export function MediaSection({
                 <div className="h-1 overflow-hidden rounded-full bg-panel-border">
                   <div
                     className={`h-full rounded-full ${
-                      removeProgress.status === "failed" ? "bg-red-400" : "bg-studio-accent"
+                      removeProgress.status === "failed" ? "bg-danger-ink" : "bg-studio-accent"
                     }`}
                     style={{ width: `${Math.max(0, Math.min(100, removeProgress.progress))}%` }}
                   />

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -234,7 +234,7 @@ export function SegmentedControl({
           aria-pressed={option.value === value}
           className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
-              ? "bg-panel-hover text-white"
+              ? "bg-panel-hover text-text-0"
               : "text-panel-text-4 hover:text-panel-text-2"
           }`}
         >

package/src/components/editor/propertyPanelSections.tsx

@@ -323,7 +323,7 @@ function TextFieldEditor({
               track("button", "Remove text field");
               onRemoveTextField(field.key);
             }}
-            className="inline-flex h-7 shrink-0 items-center 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"
+            className="inline-flex h-7 shrink-0 items-center 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"
           >
             Remove
           </button>
@@ -474,7 +474,7 @@ export function TextSection({
                 if (nextKey) setActiveTextFieldKey(nextKey);
               });
             }}
-            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 hover:border-neutral-600 hover:text-white"
+            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 hover:border-neutral-600 hover:text-text-0"
           >
             <Plus size={12} className="shrink-0" />
             <span className="truncate">Add text</span>

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

@@ -106,3 +106,32 @@ describe("the panel's position fields on a translate Studio can't read", () => {
     expect(showToast).toHaveBeenCalledWith(UNREADABLE_TRANSLATE);
   });
 });
+
+describe("the panel's position fields", () => {
+  it("read and move an element without GSAP by its CSS translate, on the route they chose", async () => {
+    const onSetManualOffset = vi.fn();
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "40px 30px");
+    const element = { id: "box", selector: "#box", element: box } as unknown as DomEditSelection;
+    const handlers = createTransformCommitHandlers({
+      element,
+      styles: {},
+      hasGsapAnimation: false,
+      gsapAnimId: null,
+      gsapKeyframes: null,
+      currentPct: 0,
+      onCommitAnimatedProperty: undefined,
+      onAddKeyframe: undefined,
+      onSetManualOffset,
+      onSetManualSize: vi.fn(),
+      onSetManualRotation: vi.fn(),
+      showToast: vi.fn(),
+    });
+    await handlers.commitManualOffset("x", "100px");
+    expect(onSetManualOffset).toHaveBeenCalledWith(
+      element,
+      { x: 100, y: 30 },
+      { plainTranslate: true },
+    );
+  });
+});