@hyperframes/studio 0.8.103 → 0.8.105

package/src/player/components/EditModal.tsx

@@ -147,7 +147,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
           <div className="px-4 py-2 border-b border-neutral-800/40 max-h-24 overflow-y-auto">
             {elementsInRange.map((el) => (
               <div key={el.id} className="flex items-center justify-between py-0.5">
-                <span className="text-[10px] font-mono text-studio-accent/80">#{el.id}</span>
+                <span className="text-[10px] font-mono text-accent-ink/80">#{el.id}</span>
                 <span className="text-[10px] text-neutral-600">{el.tag}</span>
               </div>
             ))}
@@ -174,7 +174,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
 
         {/* Action */}
         {copyError && (
-          <p className="px-3 pb-2 text-[10px] text-red-400" role="alert">
+          <p className="px-3 pb-2 text-[10px] text-danger-ink" role="alert">
             Copy failed — check clipboard permissions and try again.
           </p>
         )}
@@ -184,7 +184,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             disabled={!buildPromptCopyText(prompt)}
             className={`py-1.5 text-[11px] font-medium rounded-lg transition-all border ${
               copiedPromptOnly
-                ? "bg-green-500/20 text-green-400 border-green-500/30"
+                ? "bg-accent/15 text-accent-ink border-accent/30"
                 : "bg-neutral-800/70 text-neutral-200 border-neutral-700/50 hover:bg-neutral-800"
             } disabled:opacity-50 disabled:cursor-not-allowed`}
           >
@@ -194,13 +194,13 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
             onClick={handleCopy}
             className={`py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               copiedAgentPrompt
-                ? "bg-green-500/20 text-green-400 border border-green-500/30"
-                : "bg-studio-accent/15 text-studio-accent border border-studio-accent/25 hover:bg-studio-accent/25"
+                ? "bg-accent/15 text-accent-ink border border-accent/30"
+                : "bg-studio-accent/15 text-accent-ink border border-studio-accent/25 hover:bg-studio-accent/25"
             }`}
           >
             {copiedAgentPrompt ? "Copied!" : "Copy to Agent"}
             {!copiedAgentPrompt && (
-              <span className="text-[9px] text-studio-accent/50 ml-1.5">Cmd+Enter</span>
+              <span className="text-[9px] text-text-muted ml-1.5">Cmd+Enter</span>
             )}
           </button>
         </div>

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -42,7 +42,7 @@ interface KeyframeDiamondContextMenuProps {
 const ITEM_CLS =
   "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 const DESTRUCTIVE_ITEM_CLS =
-  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
+  "w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left";
 
 export function KeyframeDiamondContextMenu({
   state,
@@ -172,7 +172,7 @@ export function KeyframeDiamondContextMenu({
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-red-950/40 focus-visible:bg-red-950/40 outline-hidden cursor-pointer text-left"
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDeleteAll(state.element, state.animationId);
           onClose();

package/src/player/components/PlayerControls.tsx

@@ -76,7 +76,7 @@ const LoopButton = memo(function LoopButton({
         }}
         disabled={disabled}
         className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${
-          loopEnabled ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
+          loopEnabled ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
         aria-pressed={loopEnabled}
@@ -118,7 +118,7 @@ const FullscreenButton = memo(function FullscreenButton({
           onToggleFullscreen();
         }}
         className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors ${
-          isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
+          isFullscreen ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
@@ -241,7 +241,7 @@ export const PlayerControls = memo(function PlayerControls({
             <span ref={timeDisplayRef}>{formatTime(0)}</span>
             {timeDisplayMode === "time" ? (
               <>
-                <span className="mx-0.5 text-neutral-700">/</span>
+                <span className="mx-0.5 text-text-off">/</span>
                 <span className="text-neutral-600">{formatTime(duration)}</span>
               </>
             ) : null}

package/src/player/components/ShortcutsPanel.tsx

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useId, useRef, memo } from "react";
 import { formatTime, frameToSeconds } from "../lib/time";
 import { Tooltip } from "../../components/ui";
+import { flatActive, flatIdle } from "../../components/timelineToolbarStyles";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { usePlayerStore } from "../store/playerStore";
 import { DEFAULT_SHORTCUT_SECTIONS, type ShortcutSection } from "./studioShortcuts";
@@ -77,9 +78,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           ref={triggerRef}
           type="button"
           onClick={() => setShowShortcuts((v) => !v)}
-          className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors ${
-            showShortcuts ? "text-neutral-200" : "text-neutral-600 hover:text-neutral-300"
-          }`}
+          className={showShortcuts ? flatActive : flatIdle}
           aria-label="Shortcuts and tools"
           aria-expanded={showShortcuts}
           aria-controls={shortcutsPanelId}
@@ -110,10 +109,8 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
           // Deliberately NOT aria-modal. This is a non-modal disclosure: focus is
           // not trapped and the rest of the editor stays operable, so claiming
           // modality would make assistive tech treat the whole app as inert.
-          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg shadow-xl min-w-[220px] overflow-y-auto outline-hidden"
+          className="absolute bottom-full right-0 mb-2 z-50 rounded-lg border border-border bg-raised shadow-popover min-w-[220px] overflow-y-auto outline-hidden"
           style={{
-            background: "#161618",
-            border: "1px solid rgba(255,255,255,0.08)",
             maxHeight: "min(280px, calc(100vh - 80px))",
           }}
         >
@@ -145,7 +142,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </Tooltip>
             </form>
           </div>
-          <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
+          <div className="border-t border-border" />
           <div className="px-3 pt-2.5 pb-2">
             <p className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider mb-1.5">
               Work area
@@ -153,10 +150,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
             <div className="flex flex-col gap-1">
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span
-                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                    style={{ background: "rgba(255,255,255,0.05)" }}
-                  >
+                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
                     I
                   </span>
                   <span className="text-[10px] text-neutral-400">In-point</span>
@@ -194,10 +188,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </div>
               <div className="flex items-center justify-between gap-2">
                 <div className="flex items-center gap-2">
-                  <span
-                    className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center"
-                    style={{ background: "rgba(255,255,255,0.05)" }}
-                  >
+                  <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[20px] text-center bg-hover">
                     O
                   </span>
                   <span className="text-[10px] text-neutral-400">Out-point</span>
@@ -235,7 +226,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
               </div>
             </div>
           </div>
-          <div style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }} />
+          <div className="border-t border-border" />
           <div className="px-3 pt-2.5 pb-3 flex flex-col gap-3">
             {sections.map((section, sectionIndex) => (
               <div key={sectionIndex}>
@@ -245,10 +236,7 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
                 <div className="flex flex-col gap-1">
                   {section.hints.map((hint, hintIndex) => (
                     <div key={hintIndex} className="flex items-center gap-3">
-                      <span
-                        className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center"
-                        style={{ background: "rgba(255,255,255,0.05)" }}
-                      >
+                      <span className="font-mono text-[10px] rounded-sm border border-neutral-700 px-1.5 py-0.5 text-neutral-300 min-w-[36px] text-center bg-hover">
                         {hint.key}
                       </span>
                       <span className="text-[10px] text-neutral-400">{hint.label}</span>

package/src/player/components/TimelineCanvas.tsx

@@ -83,7 +83,7 @@ export const TimelineCanvas = memo(function TimelineCanvas() {
           data-active={ghostLaneActive || undefined}
           className={`pointer-events-none absolute flex items-center justify-center rounded-lg border border-dashed text-[11px] transition-colors duration-150 ${
             ghostLaneActive
-              ? "border-studio-accent/60 bg-studio-accent/6 text-studio-accent"
+              ? "border-studio-accent/60 bg-studio-accent/6 text-accent-ink"
               : "border-neutral-700/50 text-neutral-500"
           }`}
           style={{

package/src/player/components/TimelineClip.tsx

@@ -165,7 +165,7 @@ export const TimelineClip = memo(function TimelineClip({
               width: 2,
               borderRadius: 1,
               background: "var(--clip-handle)",
-              opacity: handleOpacity * 0.6,
+              opacity: handleOpacity,
             }}
           />
         </div>
@@ -195,7 +195,7 @@ export const TimelineClip = memo(function TimelineClip({
               width: 2,
               borderRadius: 1,
               background: "var(--clip-handle)",
-              opacity: handleOpacity * 0.6,
+              opacity: handleOpacity,
             }}
           />
         </div>

package/src/player/components/TimelineEmptyState.tsx

@@ -63,13 +63,13 @@ export function TimelineEmptyState({
                 strokeWidth="1.5"
                 strokeLinecap="round"
                 strokeLinejoin="round"
-                className="text-studio-accent shrink-0"
+                className="text-accent-ink shrink-0"
               >
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                 <polyline points="7 10 12 15 17 10" />
                 <line x1="12" y1="15" x2="12" y2="3" />
               </svg>
-              <span className="text-[13px] text-studio-accent">Drop media files to import</span>
+              <span className="text-[13px] text-accent-ink">Drop media files to import</span>
             </>
           ) : (
             <>

package/src/player/components/TimelineLanes.tsx

@@ -353,7 +353,6 @@ export function TimelineLanes({
                       fontSize: 11,
                       letterSpacing: "0.06em",
                       textTransform: "uppercase",
-                      opacity: 0.5,
                     }}
                   >
                     New track

package/src/player/components/TrackClipCount.tsx

@@ -9,7 +9,7 @@ export function TrackClipCount({ clipCount }: { clipCount: number }) {
     <span
       aria-label={`${clipCount} clips`}
       title={`${clipCount} clips`}
-      className="shrink-0 rounded-full bg-white/10 px-1 text-[9px] leading-[14px] tabular-nums text-white/55"
+      className="shrink-0 rounded-full bg-hover px-1 text-[9px] leading-[14px] tabular-nums text-text-muted"
     >
       {clipCount}
     </span>

package/src/player/components/VolumeControl.tsx

@@ -93,7 +93,7 @@ export const VolumeControl = memo(function VolumeControl({
           aria-label={muteLabel}
           aria-pressed={silent}
           className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
-            silent ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
+            silent ? "text-accent-ink" : "text-neutral-500 hover:text-neutral-200"
           }`}
         >
           <VolumeIcon muted={audioMuted} volume={audioVolume} />

package/src/player/components/timelineClipChildren.tsx

@@ -22,7 +22,7 @@ function ClipLintDot({ element }: { element: TimelineElement }) {
   if (!lint || lint.count === 0) return null;
   return (
     <span
-      className="absolute w-1.5 h-1.5 rounded-full bg-amber-400"
+      className="absolute w-1.5 h-1.5 rounded-full bg-warning-ink"
       style={{ top: 7, right: 7 }}
       title={lint.messages.join("\n")}
     />

package/src/player/components/timelineMotionStyles.test.ts

@@ -39,18 +39,15 @@ function themeTokenValue(token: string): string {
 
 describe("timeline motion styles", () => {
   it.each([
-    ["--timeline-track-label", "rgba(255, 255, 255, 0.5)"],
-    ["--timeline-tick-text", "rgba(255, 255, 255, 0.34)"],
-    ["--timeline-border-strong", "rgba(255, 255, 255, 0.2)"],
-    ["--timeline-group-member-tint", "rgba(255, 255, 255, 0.035)"],
-    ["--timeline-overlay-text", "rgba(255, 255, 255, 0.8)"],
-    ["--timeline-clip-shadow-dragging", "rgba(0, 0, 0, 0.4)"],
-    ["--timeline-playhead-glow", "rgba(60, 230, 172, 0.14)"],
-    ["--timeline-playhead-shadow", "rgba(0, 0, 0, 0.55)"],
+    ["--timeline-track-label", "var(--color-text-muted)"],
+    ["--timeline-tick-text", "var(--color-text-2)"],
+    ["--timeline-border-strong", "color-mix(in oklab, var(--color-text-0) 20%, transparent)"],
+    ["--timeline-group-member-tint", "color-mix(in oklab, var(--color-text-0) 3.5%, transparent)"],
+    ["--timeline-overlay-text", "var(--color-text-2)"],
+    ["--timeline-playhead-glow", "color-mix(in oklab, var(--color-accent) 14%, transparent)"],
   ])("keeps the migrated default for %s", (token, expected) => {
     expect(themeTokenValue(token)).toBe(expected);
   });
-
   it("keeps clip motion reduced-motion gated and layout safe", () => {
     const mediaStart = studioCss.indexOf("@media (prefers-reduced-motion: no-preference)");
     expect(mediaStart).toBeGreaterThanOrEqual(0);
@@ -93,13 +90,7 @@ describe("timeline motion styles", () => {
     expect(timelineClipLabelRule).toContain("text-overflow: ellipsis");
     expect(timelineClipLabelRule).toContain("max-width: calc(100% - 22px)");
     expect(timelineClipTimecodeRule).toContain("color: var(--timeline-tick-text)");
-    expect(themeCss).toContain("--timeline-clip-bg: rgba(255, 255, 255, 0.12)");
-    expect(themeCss).toContain("--timeline-clip-border: rgba(255, 255, 255, 0.22)");
-    expect(themeCss).toContain("--timeline-track-label: rgba(255, 255, 255, 0.5)");
-    expect(themeCss).toContain("--timeline-tick-text: rgba(255, 255, 255, 0.34)");
-    expect(themeCss).toContain("--timeline-clip-label-active: rgba(232, 255, 247, 0.95)");
     expect(themeCss).toContain("--timeline-clip-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.85)");
-    expect(themeCss).toContain("--timeline-clip-selection: rgba(255, 255, 255, 0.85)");
     expect(themeCss).toContain("--timeline-clip-selection-highlight: rgb(255 255 255 / 0.55)");
     expect(themeCss).toContain("--timeline-clip-radius: 8px");
     expect(themeCss).toContain("--timeline-clip-audio-radius: 21px");
@@ -108,18 +99,11 @@ describe("timeline motion styles", () => {
     expect(themeCss).toContain("--timeline-clip-chip-bg: rgba(15, 22, 18, 0.73)");
     expect(themeCss).toContain("--timeline-clip-chip-audio-bg: rgba(25, 16, 38, 0.7)");
     expect(themeCss).toContain("--timeline-clip-chip-text: #ffffff");
-    expect(themeCss).toContain("--timeline-row-bg: #edf0ed");
     expect(themeCss).toContain("--timeline-clip-shadow: 0 2px 6px rgb(0 0 0 / 0.12)");
-    expect(themeCss).toContain("--timeline-clip-selection: #0f766e");
-    expect(themeCss).toContain("--timeline-clip-audio-bg: rgba(167, 139, 250, 0.16)");
-    expect(themeCss).toContain("--timeline-clip-audio-border: rgba(167, 139, 250, 0.4)");
-    expect(themeCss).toContain("--timeline-clip-audio-bg-hover: rgba(167, 139, 250, 0.24)");
-    expect(themeCss).toContain("--timeline-clip-audio-bg-dragging: rgba(60, 52, 84, 0.96)");
     expect(audioClipRule).toContain("background-color: var(--timeline-clip-audio-bg)");
     expect(audioClipRule).toContain("border-color: var(--timeline-clip-audio-border)");
     expect(audioClipHoverRule).toContain("background-color: var(--timeline-clip-audio-bg-hover)");
     expect(audioClipDraggingRule).toContain("var(--timeline-clip-audio-bg-dragging)");
-    expect(themeCss).toContain("--timeline-clip-selection: rgba(255, 255, 255, 0.85)");
     expect(selectedTimelineClipRule).toContain(
       "outline: 1.5px solid var(--timeline-clip-selection)",
     );

package/src/player/components/trackHeaderLabelRows.tsx

@@ -38,8 +38,8 @@ function PropertyGroupNavigation({
   // target is met with a centered transparent ::before overlay instead of a
   // bigger box; focus-visible matches every other control in this header.
   const CHEVRON_BUTTON_CLASS =
-    "relative h-5 w-3 border-0 bg-transparent p-0 text-white/55 hover:text-white disabled:text-white/15 " +
-    "focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC] " +
+    "relative h-5 w-3 border-0 bg-transparent p-0 text-text-2 hover:text-text-0 disabled:text-text-off " +
+    "focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring " +
     "before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 " +
     "before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']";
   const seekTo = (keyframe: { percentage: number } | null) => {
@@ -120,7 +120,7 @@ export function PropertyGroupHeaderRow({
       tabIndex={rovingTargetId === timelinePropertyRowId(elementId, lane.group) ? 0 : -1}
       data-property-group={lane.group}
       data-timeline-lane-top={getTimelineLaneTop(laneIndex)}
-      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2"
       style={{
         top: getTimelineLaneTop(laneIndex),
         // The header column narrows to contentOrigin whenever that is under
@@ -134,12 +134,12 @@ export function PropertyGroupHeaderRow({
       {/* Tree connector: vertical spine (top-half on the last lane) + branch tick. */}
       <span className="relative h-full w-3 shrink-0" aria-hidden="true">
         <span
-          className="absolute left-1.5 top-0 w-px bg-white/15"
+          className="absolute left-1.5 top-0 w-px bg-text-0/15"
           style={{ height: isLastLane ? "50%" : "100%" }}
         />
-        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" />
       </span>
-      <span className="w-[46px] shrink-0 truncate text-white" title={label}>
+      <span className="w-[46px] shrink-0 truncate text-text-0" title={label}>
         {label}
       </span>
       <PropertyGroupNavigation
@@ -154,7 +154,7 @@ export function PropertyGroupHeaderRow({
           aria-label={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           title={`${navigation.currentKeyframe ? "Remove" : "Add"} ${label} keyframe`}
           // h-6 w-6 = the 24x24 WCAG 2.2 minimum target; the ◆ glyph stays 11px.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-[#3CE6AC] focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
           onClick={(event) => {
             // Same as the disclosure caret and the eye: a control in the label
             // column owns its click, it does not also hit the track row behind it.
@@ -168,7 +168,7 @@ export function PropertyGroupHeaderRow({
         </button>
       </PropertyGroupNavigation>
       <span
-        className="min-w-0 flex-1 truncate text-right tabular-nums text-white/45"
+        className="min-w-0 flex-1 truncate text-right tabular-nums text-text-muted"
         title={valueReadout(lane.group, values)}
       >
         {valueReadout(lane.group, values)}
@@ -231,7 +231,7 @@ export function AutomationLaneHeaderRow({
     <div
       data-automation-lane-label={label}
       data-timeline-lane-top={top}
-      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-white/65"
+      className="absolute left-0 flex items-center gap-1 overflow-hidden px-1.5 text-[10px] text-text-2"
       style={{
         top,
         width: columnWidth,
@@ -243,10 +243,10 @@ export function AutomationLaneHeaderRow({
           tick at the name's own height. */}
       <span className="relative h-full w-3 shrink-0" aria-hidden="true">
         <span
-          className="absolute left-1.5 top-0 w-px bg-white/15"
+          className="absolute left-1.5 top-0 w-px bg-text-0/15"
           style={{ height: isLastLane ? "50%" : "100%" }}
         />
-        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-white/15" />
+        <span className="absolute left-1.5 top-1/2 h-px w-1.5 bg-text-0/15" />
       </span>
       {/* Two lines: what the effect is, then which knob the envelope drives. On
           one line a band's own name was the first thing truncated in a column this
@@ -262,7 +262,7 @@ export function AutomationLaneHeaderRow({
         aria-label={onReveal ? `Show ${label} in the effect rack` : undefined}
         title={onReveal ? `Show ${label} in the effect rack` : label}
         disabled={!onReveal}
-        className="flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+        className="flex min-w-0 flex-1 flex-col justify-center rounded-sm border-0 bg-transparent p-0 text-left leading-tight enabled:hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
         onPointerDown={(event) => event.stopPropagation()}
         onClick={(event) => {
           // The label column owns its click; it does not also fall through to
@@ -271,13 +271,13 @@ export function AutomationLaneHeaderRow({
           onReveal?.();
         }}
       >
-        <span data-automation-lane-name="" className="truncate font-mono text-[9px] text-white/70">
+        <span data-automation-lane-name="" className="truncate font-mono text-[9px] text-text-2">
           {name}
         </span>
         {param ? (
           <span
             data-automation-lane-param=""
-            className="truncate font-mono text-[9px] text-white/40"
+            className="truncate font-mono text-[9px] text-text-muted"
           >
             {param}
           </span>
@@ -285,7 +285,7 @@ export function AutomationLaneHeaderRow({
         {alsoAutomatedBy ? (
           <span
             data-automation-lane-also=""
-            className="truncate text-[9px] text-[#F5C542]/80"
+            className="truncate text-[9px] text-warning-ink"
             title={`${alsoAutomatedBy} is also fading this — the two multiply.`}
           >
             {alsoAutomatedBy} is also fading this.
@@ -311,7 +311,7 @@ export function AutomationLaneHeaderRow({
           aria-label={`Remove ${label} automation`}
           title={`Remove ${label} automation`}
           // h-6 w-6 is the 24x24 WCAG 2.2 target; the glyph stays small.
-          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-white/35 hover:text-white focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-[#3CE6AC]"
+          className="flex h-6 w-6 shrink-0 items-center justify-center border-0 bg-transparent p-0 text-[11px] text-text-muted hover:text-text-0 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-ring"
           onPointerDown={(event) => event.stopPropagation()}
           onClick={(event) => {
             // A control in the label column owns its click; it does not also hit

package/src/player/lib/thumbnailScheduler.ts

@@ -23,6 +23,8 @@ export interface ThumbnailRequest {
   priority: ThumbnailPriority;
   /** Rich work is paused while the timeline is fast-scrolling. */
   rich?: boolean;
+  /** For work whose result nobody reads: it is dropped, not cached, once its last lease ends. */
+  discardWhenReleased?: boolean;
   load: (signal: AbortSignal) => Promise<ThumbnailLoadedResult>;
 }
 
@@ -214,10 +216,7 @@ export class ThumbnailScheduler {
     if (!scrolling) this.pump();
   }
 
-  /**
-   * Hold server-rendered composition thumbnails while the preview loads a new document: both
-   * are served by the same Studio server, and the preview is what the person is waiting for.
-   */
+  /** Holds composition renders while the preview loads: same server, and the preview is what the person awaits. */
   setPreviewReloading(reloading: boolean): void {
     if (this.previewReloading === reloading) return;
     this.previewReloading = reloading;
@@ -362,7 +361,7 @@ export class ThumbnailScheduler {
     const byteBudget = isWaveform
       ? this.budgets.waveformCacheBytes
       : this.budgets.thumbnailCacheBytes;
-    entry.cached = entry.weight <= byteBudget;
+    entry.cached = !entry.request.discardWhenReleased && entry.weight <= byteBudget;
     if (!entry.cached) return;
     if (isWaveform) this.waveformCacheBytes += entry.weight;
     else this.cacheBytes += entry.weight;

package/src/player/lib/timelineViewportBudgets.test.ts

@@ -23,7 +23,7 @@ describe("timeline viewport budgets", () => {
       constrainedLongTaskLimitMs: 300,
       posterCoverageRatio: 0.9,
       supportedFixtureFallbackRatio: 0.02,
-      scrollSamplesPerRun: 21,
+      scrollSamplesPerRun: 63,
       warmupRuns: 3,
       measuredRuns: 5,
       requiredPassingRuns: 4,

package/src/player/lib/timelineViewportBudgets.ts

@@ -99,7 +99,7 @@ export const TIMELINE_VIEWPORT_BUDGETS: Readonly<TimelineViewportBudgets> = Obje
   richPreviewP95Ms: 750,
   constrainedRichPreviewP95Ms: 1_200,
   supportedFixtureFallbackRatio: 0.02,
-  scrollSamplesPerRun: 21,
+  scrollSamplesPerRun: 63,
   warmupRuns: 3,
   measuredRuns: 5,
   requiredPassingRuns: 4,

package/src/styles/hex-baseline.json

@@ -1,41 +1,32 @@
 {
-  "total": 297,
+  "total": 226,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
     "packages/studio/src/captions/generator.ts": 1,
     "packages/studio/src/captions/parser.ts": 1,
     "packages/studio/src/captions/types.ts": 4,
-    "packages/studio/src/components/StudioToast.tsx": 10,
-    "packages/studio/src/components/TimelineToolbar.tsx": 2,
+    "packages/studio/src/components/TimelineToolbar.tsx": 1,
     "packages/studio/src/components/editor/ArcPathControls.tsx": 1,
-    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 10,
+    "packages/studio/src/components/editor/BorderRadiusEditor.tsx": 2,
     "packages/studio/src/components/editor/DomEditCropHandles.tsx": 1,
-    "packages/studio/src/components/editor/EaseCurveSection.tsx": 2,
-    "packages/studio/src/components/editor/FileTree.tsx": 2,
-    "packages/studio/src/components/editor/FileTreeIcons.tsx": 17,
-    "packages/studio/src/components/editor/FileTreeNodes.tsx": 4,
+    "packages/studio/src/components/editor/FileTreeIcons.tsx": 7,
     "packages/studio/src/components/editor/GestureTrailOverlay.tsx": 1,
     "packages/studio/src/components/editor/GridOverlay.tsx": 4,
-    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeDiamond.tsx": 2,
-    "packages/studio/src/components/editor/KeyframeNavigation.tsx": 2,
+    "packages/studio/src/components/editor/InlineTextToolbar.tsx": 1,
     "packages/studio/src/components/editor/MotionPathNode.tsx": 5,
     "packages/studio/src/components/editor/SnapGuideOverlay.tsx": 3,
-    "packages/studio/src/components/editor/TimelineFxPopover.tsx": 1,
-    "packages/studio/src/components/editor/Transform3DCube.tsx": 6,
+    "packages/studio/src/components/editor/Transform3DCube.tsx": 5,
     "packages/studio/src/components/editor/colorValue.ts": 3,
     "packages/studio/src/components/editor/domEditingElement.ts": 1,
-    "packages/studio/src/components/editor/easeCurveSvg.tsx": 2,
     "packages/studio/src/components/editor/gradientValue.ts": 6,
     "packages/studio/src/components/editor/panelTokens.ts": 4,
     "packages/studio/src/components/editor/propertyPanelColor.tsx": 7,
-    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 17,
+    "packages/studio/src/components/editor/propertyPanelColorCurveGraph.tsx": 16,
     "packages/studio/src/components/editor/propertyPanelColorScopes.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelColorWheels.tsx": 8,
     "packages/studio/src/components/editor/propertyPanelFlatEffectsSection.tsx": 5,
     "packages/studio/src/components/editor/propertyPanelFlatStyleSections.tsx": 2,
-    "packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelFxFamily.ts": 1,
     "packages/studio/src/components/editor/propertyPanelFxPresetStyle.ts": 24,
     "packages/studio/src/components/editor/propertyPanelHelpers.ts": 4,
@@ -43,7 +34,6 @@
     "packages/studio/src/components/editor/propertyPanelSections.tsx": 1,
     "packages/studio/src/components/editor/propertyPanelStyleSections.tsx": 3,
     "packages/studio/src/components/editor/transform3dProjection.ts": 3,
-    "packages/studio/src/components/feedback/StudioFeedbackCard.tsx": 10,
     "packages/studio/src/components/panels/VariablesBindElement.tsx": 2,
     "packages/studio/src/components/panels/VariablesValueControls.tsx": 2,
     "packages/studio/src/components/sidebar/AudioRow.tsx": 2,
@@ -54,9 +44,7 @@
     "packages/studio/src/player/components/CompositionThumbnail.tsx": 2,
     "packages/studio/src/player/components/Player.tsx": 2,
     "packages/studio/src/player/components/PlayerControls.tsx": 1,
-    "packages/studio/src/player/components/ShortcutsPanel.tsx": 7,
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
-    "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
     "packages/studio/src/styles/components.css": 48,
     "packages/studio/src/telemetry/client.ts": 1,
     "packages/studio/src/webmcp/webmcpTestUtils.ts": 1

package/src/styles/studio.css

@@ -16,15 +16,6 @@
   }
 }
 
-/*
- * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
- * browser-native chrome (scrollbars, form controls, focus rings) picks the
- * matching palette instead of defaulting to light against our #0a0a0a body.
- */
-:root {
-  color-scheme: dark;
-}
-
 body {
   margin: 0;
   padding: 0;

package/src/styles/tailwind-preset.shared.js

@@ -1,6 +1,7 @@
 /** @deprecated Superseded by `src/styles/theme.css` (published as
  * `@hyperframes/studio/theme.css`); kept one more major for Tailwind v3
- * consumers. Values are byte-identical; theme.test.ts fails if they drift. */
+ * consumers, frozen at the colours before Graphite (theme.css is light-dark() and colour-mix
+ * now, which v3 cannot read). */
 const studioPreset = {
   theme: {
     extend: {