@hyperframes/studio 0.8.103 → 0.8.105

package/dist/ui.js

@@ -1,6 +1,6 @@
 import {
   HyperframesLogo
-} from "./chunk-62DDWOSH.js";
+} from "./chunk-EEXSYY5F.js";
 import {
   Button,
   ContextMenu,
@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-6GAO75IU.js";
+} from "./chunk-NCUBAVGK.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.103",
+  "version": "0.8.105",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.103",
-    "@hyperframes/shader-transitions": "0.8.103",
-    "@hyperframes/core": "0.8.103",
-    "@hyperframes/studio-server": "0.8.103",
-    "@hyperframes/parsers": "0.8.103",
-    "@hyperframes/sdk": "0.8.103"
+    "@hyperframes/core": "0.8.105",
+    "@hyperframes/player": "0.8.105",
+    "@hyperframes/parsers": "0.8.105",
+    "@hyperframes/shader-transitions": "0.8.105",
+    "@hyperframes/studio-server": "0.8.105",
+    "@hyperframes/sdk": "0.8.105"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.103"
+    "@hyperframes/producer": "0.8.105"
   },
   "peerDependencies": {
     "react": "19",

package/src/captions/components/CaptionAnimationPanel.tsx

@@ -250,7 +250,7 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
     <div className="flex flex-col h-full min-h-0">
       {gated && (
         <div className="shrink-0 mx-3 mt-2 px-2 py-1.5 rounded-sm border border-amber-500/30 bg-amber-500/10">
-          <p className="text-2xs text-amber-300/90 leading-snug">
+          <p className="text-2xs text-warning-ink leading-snug">
             Animation editing isn&apos;t applied to playback or saved yet, so these controls are
             disabled.
           </p>
@@ -292,7 +292,7 @@ export const CaptionAnimationPanel = memo(function CaptionAnimationPanel() {
           onClick={handleApplyToAll}
           disabled={gated}
           title={gated ? "Disabled until animation editing is applied to playback" : undefined}
-          className="w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-studio-accent transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300"
+          className="w-full py-1.5 rounded-sm border border-neutral-700 text-2xs text-neutral-300 hover:border-studio-accent/50 hover:text-accent-ink transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:border-neutral-700 disabled:hover:text-neutral-300"
         >
           Apply to all groups
         </button>

package/src/captions/components/CaptionPropertyPanel.tsx

@@ -227,7 +227,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
             className={[
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "style"
-                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50"
                 : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
             ].join(" ")}
           >
@@ -241,7 +241,7 @@ export const CaptionPropertyPanel = memo(function CaptionPropertyPanel({
             className={[
               "flex-1 py-0.5 rounded-sm text-2xs font-medium transition-colors",
               activeTab === "animation"
-                ? "bg-studio-accent/20 text-studio-accent border border-studio-accent/50"
+                ? "bg-studio-accent/20 text-accent-ink border border-studio-accent/50"
                 : "text-neutral-500 border border-neutral-800 hover:text-neutral-300 hover:border-neutral-600",
             ].join(" ")}
           >

package/src/captions/components/CaptionTimeline.tsx

@@ -109,8 +109,8 @@ export const CaptionTimeline = memo(function CaptionTimeline({
               tabIndex={0}
               aria-label={`Caption word "${seg.text}"`}
               aria-pressed={isSelected}
-              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-white outline-hidden${
-                isSelected ? " ring-1 ring-white/50 z-10" : ""
+              className={`absolute top-1 bottom-1 rounded flex items-center overflow-hidden cursor-pointer focus-visible:ring-1 focus-visible:ring-text-0 outline-hidden${
+                isSelected ? " ring-1 ring-text-0/50 z-10" : ""
               }`}
               style={{
                 left,
@@ -135,7 +135,7 @@ export const CaptionTimeline = memo(function CaptionTimeline({
 
       {/* Playhead — correlates blocks with the current frame */}
       <div
-        className="absolute top-0 bottom-0 w-px bg-white/70 pointer-events-none z-20"
+        className="absolute top-0 bottom-0 w-px bg-text-0/70 pointer-events-none z-20"
         style={{ left: playheadLeft }}
         aria-hidden="true"
       />

package/src/components/AskAgentModal.tsx

@@ -138,7 +138,7 @@ export function AskAgentModal({
             {navigator.platform.includes("Mac") ? "⌘" : "Ctrl"}+Enter to copy
           </span>
           <button
-            className="px-4 py-1.5 rounded-lg bg-studio-accent/90 text-xs font-medium text-neutral-950 hover:bg-studio-accent disabled:opacity-40 disabled:cursor-not-allowed"
+            className="px-4 py-1.5 rounded-lg bg-accent text-xs font-medium text-on-accent hover:bg-accent-hover disabled:opacity-40 disabled:cursor-not-allowed"
             disabled={!value.trim()}
             onClick={handleSubmit}
           >

package/src/components/LintModal.tsx

@@ -75,11 +75,11 @@ export function LintModal({
           <div className="flex items-center gap-3">
             {hasIssues ? (
               <div className="w-8 h-8 rounded-full bg-red-500/10 flex items-center justify-center">
-                <WarningIcon size={18} className="text-red-400" weight="fill" />
+                <WarningIcon size={18} className="text-danger-ink" weight="fill" />
               </div>
             ) : (
               <div className="w-8 h-8 rounded-full bg-studio-accent/10 flex items-center justify-center">
-                <CheckCircleIcon size={18} className="text-studio-accent" weight="fill" />
+                <CheckCircleIcon size={18} className="text-accent-ink" weight="fill" />
               </div>
             )}
             <div>
@@ -107,10 +107,10 @@ export function LintModal({
               onClick={handleCopyToAgent}
               className={`px-3 py-1 text-xs font-medium rounded-lg transition-colors active:scale-[0.98] ${
                 copied
-                  ? "bg-green-600 text-white"
+                  ? "bg-accent text-on-accent"
                   : copyFailed
-                    ? "bg-red-600 text-white"
-                    : "bg-studio-accent hover:bg-studio-accent/80 text-white"
+                    ? "bg-danger text-on-danger"
+                    : "bg-accent hover:bg-accent-hover text-on-accent"
               }`}
             >
               {copied
@@ -128,41 +128,41 @@ export function LintModal({
             </div>
           )}
           {errors.map((f, i) => (
-            <div key={`e-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
-              <div className="flex items-start gap-2">
-                <WarningIcon size={14} className="text-red-400 shrink-0 mt-0.5" weight="fill" />
-                <div className="min-w-0">
-                  <p className="text-sm text-neutral-200">{f.message}</p>
-                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
-                  {f.fixHint && (
-                    <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
-                      <p className="text-xs text-studio-accent">{f.fixHint}</p>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
+            <LintFindingRow key={`e-${i}`} finding={f} tone="error" />
           ))}
           {warnings.map((f, i) => (
-            <div key={`w-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
-              <div className="flex items-start gap-2">
-                <WarningIcon size={14} className="text-amber-400 shrink-0 mt-0.5" />
-                <div className="min-w-0">
-                  <p className="text-sm text-neutral-300">{f.message}</p>
-                  {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
-                  {f.fixHint && (
-                    <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
-                      <p className="text-xs text-studio-accent">{f.fixHint}</p>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
+            <LintFindingRow key={`w-${i}`} finding={f} tone="warning" />
           ))}
         </div>
       </div>
     </div>
   );
 }
+
+function LintFindingRow({ finding, tone }: { finding: LintFinding; tone: "error" | "warning" }) {
+  return (
+    <div className="py-3 border-b border-border last:border-0">
+      <div className="flex items-start gap-2">
+        <WarningIcon
+          size={14}
+          className={`${tone === "error" ? "text-danger-ink" : "text-warning-ink"} shrink-0 mt-0.5`}
+          weight={tone === "error" ? "fill" : undefined}
+        />
+        <div className="min-w-0">
+          <p className={`text-sm ${tone === "error" ? "text-text-0" : "text-text-2"}`}>
+            {finding.message}
+          </p>
+          {finding.file && (
+            <p className="text-xs text-text-muted font-mono mt-0.5">{finding.file}</p>
+          )}
+          {finding.fixHint && (
+            <div className="flex items-start gap-1 mt-1.5">
+              <CaretRightIcon size={10} className="text-accent-ink shrink-0 mt-0.5" />
+              <p className="text-xs text-accent-ink">{finding.fixHint}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/StudioErrorBoundary.tsx

@@ -39,7 +39,7 @@ export class StudioErrorBoundary extends Component<Props, State> {
         <div className="mt-2 flex items-center gap-2">
           <button
             onClick={() => this.setState({ error: null })}
-            className="rounded-md bg-studio-accent px-5 py-2 text-sm font-medium text-neutral-950 transition-[filter] hover:brightness-110 active:scale-[0.98]"
+            className="rounded-md bg-accent px-5 py-2 text-sm font-medium text-on-accent transition-colors hover:bg-accent-hover active:scale-[0.98]"
           >
             Try again
           </button>

package/src/components/StudioHeader.dom.test.tsx

@@ -139,16 +139,16 @@ it("shows Inspector pressed and filled only when on", () => {
   const host = mount({ inspectorButtonActive: true });
   const on = query(host, '[aria-label="Inspector"]');
   expect(on.getAttribute("aria-pressed")).toBe("true");
-  expect(hasToken(on.className, "text-accent")).toBe(true);
-  expect(hasToken(on.className, "bg-hover")).toBe(true);
+  expect(hasToken(on.className, "text-accent-ink")).toBe(true);
+  expect(hasToken(on.className, "bg-on")).toBe(true);
   act(() => mounted?.root.unmount());
   mounted?.host.remove();
   mounted = null;
 
   const off = query(mount(), '[aria-label="Inspector"]');
   expect(off.getAttribute("aria-pressed")).toBe("false");
-  expect(hasToken(off.className, "text-accent")).toBe(false);
-  expect(hasToken(off.className, "bg-hover")).toBe(false);
+  expect(hasToken(off.className, "text-accent-ink")).toBe(false);
+  expect(hasToken(off.className, "bg-on")).toBe(false);
 });
 
 it("keeps Capture a real download link rather than a button", () => {

package/src/components/StudioHeader.tsx

@@ -126,7 +126,8 @@ export function StudioHeader({
               aria-pressed={inspectorButtonActive}
               className={cn(
                 "h-full rounded-none",
-                inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent",
+                inspectorButtonActive &&
+                  "bg-on text-accent-ink enabled:hover:bg-on-hover enabled:hover:text-accent-ink",
               )}
               icon={<InspectorIcon size={16} />}
               onClick={() => {

package/src/components/StudioToast.tsx

@@ -14,23 +14,10 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
       className={`motion-reduce:animate-none ${leaving ? "hf-toast-exit" : "hf-toast-enter"}`}
     >
       <div
-        className="relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px]"
-        style={{
-          background: isError
-            ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))"
-            : "linear-gradient(135deg, rgba(38,38,38,0.55), rgba(23,23,23,0.45))",
-          backdropFilter: "blur(16px) saturate(1.6)",
-          WebkitBackdropFilter: "blur(16px) saturate(1.6)",
-          border: `1px solid ${isError ? "rgba(239,68,68,0.18)" : "rgba(255,255,255,0.08)"}`,
-          boxShadow: [
-            "0 8px 32px rgba(0,0,0,0.35)",
-            `inset 0 1px 0 ${isError ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-            `inset 0 -1px 0 rgba(0,0,0,0.15)`,
-          ].join(", "),
-        }}
+        className={`relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px] ${toastSurface(isError)}`}
       >
         <span
-          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
+          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-danger-ink" : "text-text-0"}`}
         >
           {message}
         </span>
@@ -38,7 +25,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
           <button
             type="button"
             onClick={onDismiss}
-            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
+            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-hover hover:text-neutral-300"
             aria-label="Dismiss"
           >
             <svg
@@ -57,3 +44,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
     </div>
   );
 }
+
+export function toastSurface(isError: boolean): string {
+  return `border shadow-popover backdrop-blur-md ${isError ? "border-danger/40 bg-raised" : "border-border bg-raised/95"}`;
+}

package/src/components/TimelineToolPicker.tsx

@@ -81,7 +81,7 @@ export function TimelineToolPicker({ showSelectAroundPlayhead = true }) {
           shortcut={row.shortcut}
           onClick={row.run}
           data-active={row.active || undefined}
-          className={row.active ? "bg-neutral-800 text-white" : undefined}
+          className={row.active ? "bg-press text-text-0" : undefined}
         >
           <span className="flex items-center gap-2">
             {row.icon}

package/src/components/TimelineToolbar.tsx

@@ -307,11 +307,11 @@ export function TimelineToolbar({
                   className={
                     !onToggleKeyframe
                       ? flatDisabled
-                      : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
+                      : `${flatBtn} active:scale-[0.98] hover:bg-hover ${
                           keyframeState === "active"
-                            ? "text-studio-accent"
+                            ? "text-accent-ink"
                             : keyframeState === "inactive"
-                              ? "text-neutral-400 hover:text-studio-accent"
+                              ? "text-neutral-400 hover:text-accent-ink"
                               : "text-neutral-600 hover:text-neutral-400"
                         }`
                   }
@@ -342,9 +342,9 @@ export function TimelineToolbar({
                   onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
                   aria-label="Auto-record manual edits as keyframes"
                   aria-pressed={autoKeyframeEnabled}
-                  className={`${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
+                  className={`${flatBtn} active:scale-[0.98] hover:bg-hover ${
                     autoKeyframeEnabled
-                      ? "text-red-400 hover:text-red-300"
+                      ? "text-danger-ink"
                       : "text-neutral-600 hover:text-neutral-400"
                   }`}
                 >
@@ -442,7 +442,7 @@ export function TimelineToolbar({
                   }}
                   className={
                     canAdd
-                      ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]`
+                      ? `${flatBtn} text-text-2 hover:bg-hover hover:text-accent-ink active:scale-[0.98]`
                       : flatDisabled
                   }
                 >
@@ -479,8 +479,8 @@ export function TimelineToolbar({
               onClick={() => setThumbnailMode(thumbnailsVisible ? "hidden" : "adaptive")}
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 thumbnailsVisible
-                  ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
+                  ? "bg-studio-accent/10 text-accent-ink"
+                  : "text-neutral-400 hover:bg-hover hover:text-neutral-200"
               }`}
             >
               <Image size={16} aria-hidden="true" />
@@ -494,8 +494,8 @@ export function TimelineToolbar({
               aria-pressed={zoomMode === "fit"}
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 zoomMode === "fit"
-                  ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
+                  ? "bg-studio-accent/10 text-accent-ink"
+                  : "text-neutral-400 hover:bg-hover hover:text-neutral-200"
               }`}
             >
               <ArrowsOutLineHorizontal size={16} aria-hidden="true" />
@@ -531,7 +531,7 @@ export function TimelineToolbar({
             }}
             // h-6 on the input is the 24x24 WCAG 2.2 (2.5.8) target: the visible
             // track stays 2px and the thumb 10px, only the pointer box grows.
-            className="mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
+            className="mx-1 h-6 w-[96px] cursor-pointer appearance-none bg-transparent [&::-webkit-slider-runnable-track]:h-[2px] [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-neutral-700 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-[10px] [&::-webkit-slider-thumb]:h-[10px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-text-0 [&::-webkit-slider-thumb]:-mt-1 [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_#0a0a0a,0_1px_3px_rgba(0,0,0,0.5)] [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb:active]:cursor-grabbing"
           />
           <Tooltip label="Zoom in">
             <button

package/src/components/dock/Dock.tsx

@@ -301,7 +301,7 @@ function WindowMenu() {
               onClick={() => togglePanel(id)}
               className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-neutral-300 hover:bg-neutral-800"
             >
-              <span className="w-3 text-panel-accent">{openPanels.has(id) ? "✓" : ""}</span>
+              <span className="w-3 text-accent-ink">{openPanels.has(id) ? "✓" : ""}</span>
               {PANEL_DEFINITIONS[id].title}
             </button>
           ))}

package/src/components/dock/dock.css

@@ -1,9 +1,17 @@
 @import "dockview-react/dist/styles/dockview.css";
 
+.dv-shell:has(.hf-dock) {
+  /* dockview's runtime stylesheet pins `color-scheme: dark` on its theme class, which sits on
+   * the shell around the dock. */
+  color-scheme: inherit;
+}
+
 .hf-dock {
   --dv-group-view-background-color: var(--panel-card-bg);
   --dv-tabs-and-actions-container-background-color: var(--panel-strip-bg);
   --dv-tabs-and-actions-container-height: 36px;
+  --dv-icon-hover-background-color: var(--color-hover);
+  --dv-tabs-container-scrollbar-color: var(--color-text-muted);
   /* The fill paints the shown tab, so every tab state is transparent. */
   --dv-activegroup-visiblepanel-tab-background-color: transparent;
   --dv-activegroup-hiddenpanel-tab-background-color: transparent;
@@ -178,7 +186,7 @@
 }
 
 .dv-groupview:hover .hf-dock-strip-actions {
-  opacity: 0.5;
+  opacity: 0.8;
 }
 
 .hf-dock-strip-actions:hover,

package/src/components/editor/AnimationCard.tsx

@@ -201,7 +201,7 @@ export const AnimationCard = memo(function AnimationCard({
         className="flex w-full items-center gap-2 py-1.5 active:scale-[0.99]"
       >
         <span
-          className="rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-panel-accent"
+          className="rounded-sm bg-panel-accent/10 px-1.5 py-0.5 text-[10px] font-semibold text-accent-ink"
           title={METHOD_TOOLTIPS[animation.method]}
         >
           {methodLabel}
@@ -354,7 +354,7 @@ export const AnimationCard = memo(function AnimationCard({
 
             {animation.method === "fromTo" && (
               <div className="space-y-1">
-                <p className="text-[9px] font-semibold uppercase tracking-wider text-orange-400/70">
+                <p className="text-[9px] font-semibold uppercase tracking-wider text-warning-ink">
                   From
                 </p>
                 <div className="space-y-1.5">
@@ -378,14 +378,14 @@ export const AnimationCard = memo(function AnimationCard({
                     onAdd={(prop) => onAddFromProperty?.(animation.id, prop)}
                     onOpen={() => setAddingFromProp(true)}
                     onClose={() => setAddingFromProp(false)}
-                    buttonClassName="text-[11px] font-medium text-orange-400/70 transition-colors hover:text-orange-300"
+                    buttonClassName="text-[11px] font-medium text-warning-ink transition-colors hover:text-text-0"
                   />
                 </div>
               </div>
             )}
 
             {animation.method === "fromTo" && Object.keys(animation.properties).length > 0 && (
-              <p className="text-[9px] font-semibold uppercase tracking-wider text-panel-accent/70">
+              <p className="text-[9px] font-semibold uppercase tracking-wider text-accent-ink">
                 To
               </p>
             )}
@@ -455,7 +455,7 @@ export const AnimationCard = memo(function AnimationCard({
               <button
                 type="button"
                 onClick={() => onDeleteAnimation(animation.id)}
-                className="ml-auto text-[11px] font-medium text-red-400 transition-colors hover:text-red-300"
+                className="ml-auto text-[11px] font-medium rounded-sm text-danger-ink transition-colors hover:bg-danger/15"
                 title="Remove this animation"
               >
                 Remove

package/src/components/editor/AnimationCardParts.tsx

@@ -46,7 +46,7 @@ function RemoveButton({ onClick, title }: { onClick: () => void; title: string }
     <button
       type="button"
       onClick={onClick}
-      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-red-400 active:scale-[0.95]"
+      className="relative shrink-0 rounded-sm p-1.5 text-neutral-600 transition-colors hover:bg-neutral-800 hover:text-danger-ink active:scale-[0.95]"
       title={title}
       aria-label={title}
     >

package/src/components/editor/BlockParamsPanel.tsx

@@ -170,7 +170,7 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           <div className="text-[10px] text-neutral-500">This block has no editable parameters.</div>
         )}
         {!fileManager && params.length > 0 && (
-          <div className="text-[10px] text-amber-400/90">
+          <div className="text-[10px] text-warning-ink">
             Block params can't be edited here — no project file access.
           </div>
         )}
@@ -189,12 +189,12 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           </div>
         )}
         {commitState.tone === "saved" && (
-          <div className="text-[10px] text-emerald-500/90" role="status">
+          <div className="text-[10px] text-accent-ink" role="status">
             Saved to {compositionPath}
           </div>
         )}
         {commitState.tone === "error" && (
-          <div className="text-[10px] text-red-400" role="alert">
+          <div className="text-[10px] text-danger-ink" role="alert">
             {commitState.message}
           </div>
         )}

package/src/components/editor/BorderRadiusEditor.tsx

@@ -63,6 +63,9 @@ export function BorderRadiusEditor({
   }, [linked, uniform, tl, onCommit]);
 
   const path = buildRoundedRectPath(PREVIEW_W, PREVIEW_H, sTL, sTR, sBR, sBL);
+  const dotFill = linked
+    ? "fill-[light-dark(oklch(0.5_0.2_260),#3b82f6)]"
+    : "fill-[light-dark(oklch(0.55_0.2_294),#a78bfa)]";
 
   return (
     <div className="space-y-3">
@@ -73,21 +76,11 @@ export function BorderRadiusEditor({
           viewBox={`0 0 ${PREVIEW_W} ${PREVIEW_H}`}
           className="shrink-0"
         >
-          <path
-            d={path}
-            fill="rgba(255,255,255,0.06)"
-            stroke="rgba(255,255,255,0.24)"
-            strokeWidth={1.5}
-          />
-          <circle cx={sTL} cy={sTL} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
-          <circle cx={PREVIEW_W - sTR} cy={sTR} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
-          <circle
-            cx={PREVIEW_W - sBR}
-            cy={PREVIEW_H - sBR}
-            r={3}
-            fill={linked ? "#3b82f6" : "#a78bfa"}
-          />
-          <circle cx={sBL} cy={PREVIEW_H - sBL} r={3} fill={linked ? "#3b82f6" : "#a78bfa"} />
+          <path d={path} className="fill-text-0/[0.06] stroke-text-0/25" strokeWidth={1.5} />
+          <circle cx={sTL} cy={sTL} r={3} className={dotFill} />
+          <circle cx={PREVIEW_W - sTR} cy={sTR} r={3} className={dotFill} />
+          <circle cx={PREVIEW_W - sBR} cy={PREVIEW_H - sBR} r={3} className={dotFill} />
+          <circle cx={sBL} cy={PREVIEW_H - sBL} r={3} className={dotFill} />
         </svg>
 
         <button

package/src/components/editor/CanvasContextMenu.tsx

@@ -257,7 +257,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
       {hasDelete && (
         <button
           type="button"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 cursor-pointer text-left"
           onPointerDown={(e) => {
             if (e.button !== 0) return;
             e.preventDefault();

package/src/components/editor/ComputedTweenNotice.tsx

@@ -29,7 +29,7 @@ export function ComputedTweenNotice({
         <button
           type="button"
           onClick={onUnroll}
-          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-panel-accent hover:bg-neutral-800"
+          className="shrink-0 rounded-sm px-1.5 py-0.5 text-[9px] font-medium text-accent-ink hover:bg-neutral-800"
           title="Rewrite the helper/loop into explicit tweens so this keyframe edits directly"
         >
           Unroll to edit

package/src/components/editor/DomEditOverlay.tsx

@@ -1,3 +1,4 @@
+import type { RotationCommit } from "./rotationDraft";
 import { memo, useEffect, useMemo, useRef, type RefObject } from "react";
 import { type DomEditSelection } from "./domEditing";
 import type { PreviewMouseDownOptions } from "../../hooks/usePreviewInteraction";
@@ -10,6 +11,7 @@ import {
   type BlockedMoveState,
   type DomEditGroupPathOffsetCommit,
   type FocusableDomEditOverlay,
+  type MoveCommitOptions,
   type GestureState,
   type GroupGestureState,
   focusDomEditOverlayElement,
@@ -45,7 +47,7 @@ export {
   hasDomEditRotationChanged,
   resolveDomEditRotationGesture,
 } from "./domEditOverlayGestures";
-export type { DomEditGroupPathOffsetCommit } from "./domEditOverlayGestures";
+export type { DomEditGroupPathOffsetCommit, MoveCommitOptions } from "./domEditOverlayGestures";
 
 export interface DomEditOverlayProps {
   iframeRef: RefObject<HTMLIFrameElement | null>;
@@ -81,7 +83,7 @@ export interface DomEditOverlayProps {
   onPathOffsetCommit: (
     selection: DomEditSelection,
     next: { x: number; y: number },
-    modifiers?: { altKey?: boolean },
+    modifiers?: MoveCommitOptions,
   ) => Promise<unknown> | void;
   onGroupPathOffsetCommit: (updates: DomEditGroupPathOffsetCommit[]) => Promise<unknown> | void;
   onBoxSizeCommit: (
@@ -90,10 +92,7 @@ export interface DomEditOverlayProps {
     offset?: { x: number; y: number },
     restore?: () => void,
   ) => Promise<unknown> | void;
-  onRotationCommit: (
-    selection: DomEditSelection,
-    next: { angle: number },
-  ) => Promise<unknown> | void;
+  onRotationCommit: (selection: DomEditSelection, next: RotationCommit) => Promise<unknown> | void;
   onStyleCommit?: (property: string, value: string) => Promise<unknown> | void;
   recordingState?: GestureRecordingState;
   onToggleRecording?: () => void;

package/src/components/editor/DomEditRotateHandle.tsx

@@ -38,7 +38,7 @@ export function DomEditRotateHandle({
       aria-label="Rotate selection"
       onPointerDown={onStartRotate}
     >
-      <span className="pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-studio-accent shadow-[0_0_3px_rgba(0,0,0,0.45)]">
+      <span className="pointer-events-none flex h-[18px] w-[18px] items-center justify-center rounded-full border border-studio-accent/70 bg-studio-surface text-accent-ink shadow-[0_0_3px_rgba(0,0,0,0.45)]">
         <svg
           width="11"
           height="11"