@hyperframes/studio 0.8.104 → 0.8.106

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.104",
+  "version": "0.8.106",
   "description": "",
   "repository": {
     "type": "git",
@@ -50,8 +50,8 @@
     "@codemirror/language": "^6.12.2",
     "@codemirror/search": "^6.6.0",
     "@codemirror/state": "^6.6.0",
-    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "6.40.0",
+    "@lezer/highlight": "^1.2.3",
     "@mcp-b/global": "^5.0.1",
     "@phosphor-icons/react": "^2.1.10",
     "@tanstack/react-virtual": "^3.14.13",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.104",
-    "@hyperframes/parsers": "0.8.104",
-    "@hyperframes/player": "0.8.104",
-    "@hyperframes/sdk": "0.8.104",
-    "@hyperframes/shader-transitions": "0.8.104",
-    "@hyperframes/studio-server": "0.8.104"
+    "@hyperframes/core": "0.8.106",
+    "@hyperframes/parsers": "0.8.106",
+    "@hyperframes/sdk": "0.8.106",
+    "@hyperframes/player": "0.8.106",
+    "@hyperframes/shader-transitions": "0.8.106",
+    "@hyperframes/studio-server": "0.8.106"
   },
   "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.104"
+    "@hyperframes/producer": "0.8.106"
   },
   "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/captions/keyboard.test.ts

@@ -38,6 +38,12 @@ describe("shouldHandleCaptionNudgeKey", () => {
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("KeyL"))).toBe(false);
   });
 
+  it("ignores arrows a focused slider owns", () => {
+    const slider = document.createElement("div");
+    slider.setAttribute("role", "slider");
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), slider)).toBe(false);
+  });
+
   it("ignores arrows when the event target is an editable element", () => {
     const input = document.createElement("input");
     const textarea = document.createElement("textarea");

package/src/captions/keyboard.ts

@@ -1,4 +1,5 @@
 import { isEditableTarget } from "../utils/timelineDiscovery";
+import { ownsPlainKeys } from "../utils/typingTarget";
 
 const CAPTION_NUDGE_KEYS = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
 
@@ -9,7 +10,7 @@ export function shouldHandleCaptionNudgeKey(
   target?: EventTarget | null,
 ): boolean {
   if (event.metaKey || event.ctrlKey || event.altKey) return false;
-  if (target != null && isEditableTarget(target)) return false;
+  if (target != null && ownsPlainKeys(target)) return false;
   return CAPTION_NUDGE_KEYS.has(event.key);
 }
 

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

@@ -42,6 +42,7 @@ vi.mock("../contexts/PanelLayoutContext", () => ({
 vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
 const { StudioHeader } = await import("./StudioHeader");
+const { ShowThemeToggle } = await import("./ThemeToggle");
 
 let mounted: { root: Root; host: HTMLElement } | null = null;
 
@@ -54,6 +55,7 @@ beforeEach(() => {
 });
 
 afterEach(() => {
+  delete document.documentElement.dataset.theme;
   if (!mounted) return;
   const { root, host } = mounted;
   mounted = null;
@@ -61,21 +63,30 @@ afterEach(() => {
   host.remove();
 });
 
-function mount(props: { inspectorButtonActive?: boolean } = {}): HTMLElement {
+function mount(
+  props: { inspectorButtonActive?: boolean; themeToggle?: boolean } = {},
+): HTMLElement {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   mounted = { root, host };
+  const header = (
+    <StudioHeader
+      captureFrameHref="blob:frame"
+      captureFrameFilename="frame.png"
+      handleCaptureFrameClick={vi.fn()}
+      refreshCaptureFrameTime={vi.fn()}
+      inspectorButtonActive={props.inspectorButtonActive ?? false}
+      inspectorPanelActive={false}
+    />
+  );
   act(() =>
     root.render(
-      <StudioHeader
-        captureFrameHref="blob:frame"
-        captureFrameFilename="frame.png"
-        handleCaptureFrameClick={vi.fn()}
-        refreshCaptureFrameTime={vi.fn()}
-        inspectorButtonActive={props.inspectorButtonActive ?? false}
-        inspectorPanelActive={false}
-      />,
+      props.themeToggle ? (
+        <ShowThemeToggle.Provider value>{header}</ShowThemeToggle.Provider>
+      ) : (
+        header
+      ),
     ),
   );
   return host;
@@ -139,16 +150,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", () => {
@@ -179,3 +190,14 @@ it("classifies the new header controls for the hotkey filters as the old ones we
     expect(shouldIgnorePlaybackShortcutTarget(el), el.tagName).toBe(true);
   }
 });
+
+it("shows no theme toggle and leaves the host's data-theme alone when embedded", () => {
+  document.documentElement.dataset.theme = "host";
+  const host = mount();
+  expect(host.querySelector('[aria-label^="Switch to"]')).toBeNull();
+  expect(document.documentElement.dataset.theme).toBe("host");
+});
+
+it("shows the theme toggle in Studio's own app", () => {
+  expect(mount({ themeToggle: true }).querySelector('[aria-label^="Switch to"]')).not.toBeNull();
+});

package/src/components/StudioHeader.tsx

@@ -1,4 +1,4 @@
-import type { MouseEvent } from "react";
+import { useContext, type MouseEvent } from "react";
 import { Camera } from "../icons/SystemIcons";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
@@ -7,6 +7,7 @@ import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./
 import { Dock } from "./dock/Dock";
 import { InspectorIcon } from "./icons/InspectorIcon";
 import { HyperframesLogo } from "./ui/HyperframesLogo";
+import { ShowThemeToggle, ThemeToggle } from "./ThemeToggle";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -44,6 +45,7 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
+  const showThemeToggle = useContext(ShowThemeToggle);
   const { projectId, renderQueue } = useStudioShellContext();
   const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
@@ -126,7 +128,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={() => {
@@ -146,6 +149,7 @@ export function StudioHeader({
             </Button>
           </Tooltip>
         </div>
+        {showThemeToggle && <ThemeToggle />}
         <Dock.WindowMenu />
         <Tooltip
           label={

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/ThemeToggle.tsx

@@ -0,0 +1,99 @@
+import { createContext } from "react";
+import { setStudioTheme, useShownStudioTheme } from "../utils/studioTheme";
+import { IconButton, Tooltip } from "./ui";
+
+// hyperframes.dev's theme toggle: the same sun and moon, revealing the new theme in a circle from
+// the button. A page that paints no frame aborts the transition; the theme is applied by then.
+let latest: ViewTransition | null = null;
+
+function reveal(transition: ViewTransition, at: string, radiusPct: number) {
+  latest = transition;
+  const done = () => {
+    if (latest === transition) delete document.documentElement.dataset.themeReveal;
+  };
+  void transition.finished.then(done, done);
+  void transition.ready.then(
+    () => {
+      document.documentElement.animate(
+        { clipPath: [`circle(0% ${at})`, `circle(${radiusPct}% ${at})`] },
+        { duration: 500, easing: "ease-in-out", pseudoElement: "::view-transition-new(root)" },
+      );
+    },
+    () => {},
+  );
+}
+
+function origin(e: React.MouseEvent<HTMLButtonElement>): [number, number] {
+  if (e.detail > 0) return [e.clientX, e.clientY];
+  const box = e.currentTarget.getBoundingClientRect();
+  return [box.left + box.width / 2, box.top + box.height / 2];
+}
+
+/** On only in Studio's own app; a host that embeds Studio owns its theme. */
+export const ShowThemeToggle = createContext(false);
+
+function cannotReveal(): boolean {
+  return (
+    !document.startViewTransition ||
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true
+  );
+}
+
+const iconProps = {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true,
+} as const;
+
+export function ThemeToggle() {
+  const isDark = useShownStudioTheme() === "dark";
+  const label = `Switch to ${isDark ? "light" : "dark"} theme`;
+
+  function toggle(e: React.MouseEvent<HTMLButtonElement>) {
+    const apply = () => setStudioTheme(isDark ? "light" : "dark");
+    if (cannotReveal()) return apply();
+    const [x, y] = origin(e);
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const maxRadius = Math.hypot(Math.max(x, w - x), Math.max(y, h - y));
+    const at = `at ${(x / w) * 100}% ${(y / h) * 100}%`;
+    const radiusPct = (maxRadius / (Math.hypot(w, h) / Math.SQRT2)) * 100;
+    // The switch stays synchronous inside the callback: rendering is paused during it.
+    document.documentElement.dataset.themeReveal = "";
+    reveal(document.startViewTransition(apply), at, radiusPct);
+  }
+
+  return (
+    <Tooltip label={label} side="bottom">
+      <IconButton
+        onClick={toggle}
+        aria-label={label}
+        icon={
+          isDark ? (
+            <svg {...iconProps}>
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </svg>
+          ) : (
+            <svg {...iconProps}>
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            </svg>
+          )
+        }
+      />
+    </Tooltip>
+  );
+}

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