@hyperframes/studio 0.8.104 → 0.8.106

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

@@ -0,0 +1,20 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+
+const read = (file: string) => readFileSync(new URL(file, import.meta.url), "utf8");
+const source = read("./studioCodeTheme.ts");
+const themeCss = read("../../styles/theme.css");
+
+describe("the code editor theme", () => {
+  it("takes every colour from a token theme.css declares", () => {
+    const used = [...source.matchAll(/var\((--color-[\w-]+)\)/g)].map((match) => match[1]!);
+    expect(used.length).toBeGreaterThan(20);
+    for (const token of new Set(used)) expect(themeCss, token).toContain(`${token}:`);
+  });
+
+  it("paints no literal colour of its own", () => {
+    expect(source).not.toMatch(
+      /#[\da-f]{3,8}\b|\b(rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(|"(white|black|red|orange|yellow|green|blue|purple|pink|gray|grey|silver|lime|cyan|magenta)"/i,
+    );
+  });
+});

package/src/components/editor/studioCodeTheme.ts

@@ -0,0 +1,99 @@
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+// One Dark's layout on Studio's tokens: every colour is a theme.css variable, so the editor
+// follows the light or dark theme the page paints with no editor reconfiguration.
+const editorTheme = EditorView.theme({
+  "&": { height: "100%", color: "var(--color-text-0)", backgroundColor: "var(--color-surface)" },
+  ".cm-scroller": { overflow: "auto" },
+  ".cm-content": { caretColor: "var(--color-text-0)" },
+  ".cm-cursor, .cm-dropCursor": { borderLeftColor: "var(--color-text-0)" },
+  "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection":
+    { backgroundColor: "var(--color-on)" },
+  ".cm-activeLine": { backgroundColor: "var(--color-hover)" },
+  ".cm-selectionMatch": {
+    backgroundColor: "transparent",
+    outline: "1px solid var(--color-text-muted)",
+  },
+  ".cm-searchMatch": {
+    backgroundColor: "transparent",
+    outline: "1px solid var(--color-text-muted)",
+  },
+  ".cm-searchMatch.cm-searchMatch-selected": {
+    backgroundColor: "transparent",
+    outline: "2px solid var(--color-accent-ink)",
+  },
+  "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
+    backgroundColor: "var(--color-on)",
+  },
+  ".cm-gutters": {
+    backgroundColor: "var(--color-surface)",
+    color: "var(--color-text-muted)",
+    border: "none",
+  },
+  ".cm-activeLineGutter": { backgroundColor: "var(--color-hover)", color: "var(--color-text-2)" },
+  ".cm-foldPlaceholder": {
+    backgroundColor: "transparent",
+    border: "none",
+    color: "var(--color-text-2)",
+  },
+  ".cm-panels": { backgroundColor: "var(--color-raised)", color: "var(--color-text-0)" },
+  ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--color-border)" },
+  ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--color-border)" },
+  ".cm-textfield": {
+    backgroundColor: "var(--color-input)",
+    color: "var(--color-text-0)",
+    border: "1px solid var(--color-border-input)",
+  },
+  ".cm-button": {
+    backgroundImage: "none",
+    backgroundColor: "var(--color-hover)",
+    color: "var(--color-text-0)",
+    border: "1px solid var(--color-border)",
+  },
+  "&.cm-editor .cm-button:active": {
+    backgroundImage: "none",
+    backgroundColor: "var(--color-press)",
+  },
+  ".cm-specialChar": { color: "var(--color-danger-ink)" },
+});
+
+const highlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: "var(--color-code-keyword)" },
+  {
+    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+    color: "var(--color-code-name)",
+  },
+  { tag: [t.function(t.variableName), t.labelName], color: "var(--color-code-function)" },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: "var(--color-code-constant)" },
+  { tag: [t.definition(t.name), t.separator], color: "var(--color-text-0)" },
+  {
+    tag: [
+      t.typeName,
+      t.className,
+      t.number,
+      t.changed,
+      t.annotation,
+      t.modifier,
+      t.self,
+      t.namespace,
+    ],
+    color: "var(--color-code-type)",
+  },
+  {
+    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.special(t.string)],
+    color: "var(--color-code-operator)",
+  },
+  { tag: [t.meta, t.comment], color: "var(--color-code-comment)" },
+  { tag: t.strong, fontWeight: "bold" },
+  { tag: t.emphasis, fontStyle: "italic" },
+  { tag: t.strikethrough, textDecoration: "line-through" },
+  { tag: t.link, color: "var(--color-code-comment)", textDecoration: "underline" },
+  { tag: t.heading, fontWeight: "bold", color: "var(--color-code-name)" },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: "var(--color-code-constant)" },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: "var(--color-code-string)" },
+  { tag: t.invalid, color: "var(--color-danger-ink)" },
+]);
+
+export const studioCodeTheme = [editorTheme, syntaxHighlighting(highlightStyle)];

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

@@ -124,6 +124,37 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
     element.remove();
   });
 
+  it("leaves arrows on a focused slider alone", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const element = document.createElement("div");
+    element.id = "dot-a";
+    const slider = document.createElement("div");
+    slider.setAttribute("role", "slider");
+    document.body.append(element, slider);
+    const commit = vi.fn();
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => {
+      slider.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true, cancelable: true }),
+      );
+      vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10);
+    });
+    expect(commit).not.toHaveBeenCalled();
+    act(() => root.unmount());
+    host.remove();
+    element.remove();
+    slider.remove();
+  });
+
   it("still flushes the burst when the selection actually changes to a different element", () => {
     const host = document.createElement("div");
     document.body.append(host);

package/src/components/editor/useDomEditNudge.ts

@@ -7,7 +7,7 @@
  */
 import { useCallback, useEffect, useRef, type RefObject } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import { isTypingTarget } from "../../utils/typingTarget";
+import { ownsPlainKeys } from "../../utils/typingTarget";
 import { acquireCanvasNudgeKeys } from "../../utils/canvasNudgeGate";
 import type { DomEditSelection } from "./domEditing";
 import {
@@ -132,7 +132,7 @@ function resolveSingleNudgeTarget(
 function shouldIgnoreNudgeKey(p: UseDomEditNudgeParams, event: KeyboardEvent): boolean {
   if (!p.allowCanvasMovement || event.defaultPrevented) return true;
   if (p.gestureRef.current || p.groupGestureRef.current || p.blockedMoveRef.current) return true;
-  return isTypingTarget(event.target);
+  return ownsPlainKeys(event.target);
 }
 
 export function useDomEditNudge(params: UseDomEditNudgeParams): { flushNudge: () => void } {

package/src/components/editor/useInlineTextEditing.tsx

@@ -44,7 +44,7 @@ export function useInlineTextEditing(
 } {
   const actions = useDomEditActionsContextOptional();
   const inlineText = useInlineTextEdit({
-    onCommit: (commit) => void actions?.handleDomRichTextCommit(commit),
+    onCommit: (commit) => actions?.handleDomRichTextCommit(commit),
     onPause: () => usePlayerStore.getState().setIsPlaying(false),
   });
   const lastPressRef = useRef<PressMark | null>(null);

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

@@ -0,0 +1,64 @@
+// @vitest-environment happy-dom
+import { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { useMotionPathData } from "./useMotionPathData";
+import { resetOverlayFrameLoopForTests } from "./overlayFrameLoop";
+import { usePlayerStore } from "../../player/store/playerStore";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+const originalRaf = window.requestAnimationFrame;
+let frames: Array<() => void> = [];
+const runFrames = (count: number) => {
+  for (let i = 0; i < count; i++) {
+    const batch = frames;
+    frames = [];
+    act(() => {
+      for (const frame of batch) frame();
+      vi.advanceTimersByTime(16);
+    });
+  }
+};
+
+beforeEach(() => {
+  vi.useFakeTimers({
+    toFake: ["setTimeout", "clearTimeout", "setInterval", "clearInterval", "performance"],
+  });
+  window.requestAnimationFrame = ((callback: FrameRequestCallback) =>
+    frames.push(() => callback(performance.now()))) as typeof window.requestAnimationFrame;
+  usePlayerStore.setState({ previewBooted: true, motionPathArmed: false });
+});
+
+afterEach(() => {
+  resetOverlayFrameLoopForTests();
+  window.requestAnimationFrame = originalRaf;
+  vi.useRealTimers();
+  usePlayerStore.setState({ previewBooted: false, motionPathArmed: false });
+  document.body.innerHTML = "";
+});
+
+it("reads no layout per frame until there is a path or a create ring to draw", () => {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const reads = vi.spyOn(iframe, "getBoundingClientRect");
+  function Probe() {
+    const ref = useRef(iframe);
+    useMotionPathData(ref, "#box");
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  try {
+    act(() => root.render(<Probe />));
+    runFrames(10);
+    expect(reads).not.toHaveBeenCalled();
+
+    act(() => usePlayerStore.setState({ motionPathArmed: true }));
+    runFrames(10);
+    expect(reads).toHaveBeenCalled();
+  } finally {
+    act(() => root.unmount());
+  }
+});

package/src/components/editor/useMotionPathData.ts

@@ -3,6 +3,7 @@ import { readRuntimeKeyframes } from "../../hooks/gsapRuntimeKeyframes";
 import { isElementVisibleForOverlay } from "./domEditOverlayGeometry";
 import { buildMotionPathGeometry, type MotionPathGeometry } from "./motionPathGeometry";
 import { subscribeOverlayFrame } from "./overlayFrameLoop";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 type Rect = { left: number; top: number; width: number; height: number };
 
@@ -114,6 +115,8 @@ export function useMotionPathData(
   // Perspective magnification (1/m44) of the selected element — applied to the
   // path's offset points so depth (translateZ) elements' paths track on screen.
   const [pScale, setPScale] = useState(1);
+  const armed = usePlayerStore((s) => s.motionPathArmed);
+  const drawn = geometry !== null || armed;
 
   useEffect(() => {
     if (!selector) {
@@ -122,6 +125,7 @@ export function useMotionPathData(
       return;
     }
     setHome(null);
+    if (!drawn) return;
     const tick = () => {
       const el = iframeRef.current;
       if (el) {
@@ -155,7 +159,7 @@ export function useMotionPathData(
       }
     };
     return subscribeOverlayFrame(tick);
-  }, [selector, iframeRef]);
+  }, [selector, iframeRef, drawn]);
 
   useEffect(() => {
     if (!selector) {

package/src/components/feedback/StudioFeedbackCard.tsx

@@ -1,4 +1,5 @@
 import { memo, useState, useCallback, useRef, useEffect } from "react";
+import { toastSurface } from "../StudioToast";
 import {
   trackStudioFeedback,
   trackStudioFeedbackShown,
@@ -212,24 +213,11 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
       }}
     >
       <div
-        className="flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3"
-        style={{
-          background: failed
-            ? "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 ${failed ? "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 ${failed ? "rgba(239,68,68,0.12)" : "rgba(255,255,255,0.06)"}`,
-            "inset 0 -1px 0 rgba(0,0,0,0.15)",
-          ].join(", "),
-        }}
+        className={`flex w-[min(340px,calc(100vw-48px))] flex-col gap-2.5 overflow-hidden rounded-2xl px-3.5 py-3 ${toastSurface(failed)}`}
       >
         <div className="flex items-start gap-3">
           <p
-            className={`min-w-0 flex-1 text-[12px] leading-5 ${failed ? "text-red-100" : "text-neutral-100"}`}
+            className={`min-w-0 flex-1 text-[12px] leading-5 ${failed ? "text-danger-ink" : "text-text-0"}`}
           >
             {step === "thanks" ? "Thanks, that helps." : title}
           </p>
@@ -243,7 +231,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                 close("sent");
               }}
-              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/8 px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-white/35 hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
+              className="h-6 shrink-0 whitespace-nowrap rounded-full border border-border-strong bg-hover px-2.5 text-[11px] leading-6 text-neutral-100 transition-[background-color,border-color,transform] duration-150 ease-out hover:border-text-muted hover:bg-press active:scale-[0.97] motion-reduce:transition-none"
             >
               Talk to us, 30 min
             </a>
@@ -251,7 +239,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
           <button
             type="button"
             onClick={() => close("close")}
-            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-white/10 hover:text-neutral-200"
+            className="-mr-1 -mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors duration-150 hover:bg-press hover:text-neutral-200"
             aria-label="Dismiss"
           >
             <svg
@@ -270,7 +258,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
         {/* The failure text the user already saw, quoted back so the report
             carries it without asking them to retype the error. */}
         {failed && request.detail && step !== "thanks" && (
-          <p className="line-clamp-2 text-[11px] leading-4 text-red-200/70">{request.detail}</p>
+          <p className="line-clamp-2 text-[11px] leading-4 text-danger-ink">{request.detail}</p>
         )}
 
         {step === "rating" && (
@@ -283,7 +271,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   key={n}
                   // A resting fill, so the row reads as eleven controls rather
                   // than as a line of text that happens to be clickable.
-                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-white/4 text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-white/[0.14] hover:text-neutral-100 active:scale-[0.97] has-checked:bg-white/90 has-checked:text-neutral-900 has-focus-visible:ring-1 has-focus-visible:ring-white/50 motion-reduce:transition-none"
+                  className="flex h-7 cursor-pointer items-center justify-center rounded-md bg-hover text-[11px] tabular-nums text-neutral-400 transition-[background-color,color,transform] duration-150 ease-out hover:bg-press hover:text-neutral-100 active:scale-[0.97] has-checked:bg-text-0 has-checked:text-bg-0 has-focus-visible:ring-1 has-focus-visible:ring-ring motion-reduce:transition-none"
                 >
                   <input
                     type="radio"
@@ -328,8 +316,8 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                   // attached to nothing.
                   className={`h-6 rounded-full border px-2.5 text-[11px] transition-[background-color,border-color,color,transform] duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none ${
                     failed
-                      ? "border-red-300/20 bg-red-100/6 text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
-                      : "border-white/10 bg-white/4 text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
+                      ? "border-danger/30 bg-danger/10 text-danger-ink hover:border-danger/60 hover:bg-danger/20"
+                      : "border-border bg-hover text-neutral-300 hover:border-text-muted hover:bg-press hover:text-text-0"
                   }`}
                 >
                   {preset.label}
@@ -355,12 +343,12 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 placeholder={followUp.placeholder}
                 aria-label={followUp.prompt}
                 maxLength={500}
-                className="h-7 min-w-0 flex-1 rounded-md border border-white/10 bg-black/20 px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                className="h-7 min-w-0 flex-1 rounded-md border border-border bg-input px-2 text-[11px] text-neutral-100 outline-hidden transition-colors duration-150 placeholder:text-neutral-500 focus:border-ring"
               />
               <button
                 type="button"
                 onClick={() => submit()}
-                className="h-7 shrink-0 rounded-md bg-white/10 px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-white/16 active:scale-[0.97] motion-reduce:transition-none"
+                className="h-7 shrink-0 rounded-md bg-press px-2.5 text-[11px] text-neutral-100 transition-[background-color,transform] duration-150 ease-out hover:bg-on active:scale-[0.97] motion-reduce:transition-none"
               >
                 Send
               </button>

package/src/components/nle/AssetPreviewOverlay.tsx

@@ -142,7 +142,7 @@ export function AssetPreviewOverlay() {
       >
         {/* Close button */}
         <button
-          className="absolute top-2 right-2 w-6 h-6 rounded-full bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white flex items-center justify-center transition-colors z-10"
+          className="absolute top-2 right-2 w-6 h-6 rounded-full bg-raised hover:bg-press text-text-2 hover:text-text-0 flex items-center justify-center transition-colors z-10"
           onClick={(e) => {
             e.stopPropagation();
             clearPreviewAsset();

package/src/components/nle/AudioMeterStrip.tsx

@@ -215,7 +215,7 @@ function useMeterLoop(
 
 function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
   return (
-    <div className="relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900">
+    <div className="scheme-dark relative h-full w-[18px] overflow-hidden rounded-[2px] bg-neutral-900">
       <div
         className="absolute inset-x-0 bottom-0 bg-green-500"
         style={{ height: `${AMBER_AT * 100}%` }}
@@ -237,7 +237,7 @@ function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<
       <div
         ref={peakRef}
         data-testid="meter-peak"
-        className="absolute inset-x-0 bottom-0 h-px bg-white"
+        className="absolute inset-x-0 bottom-0 h-px bg-text-0"
       />
     </div>
   );

package/src/components/nle/NLEPreview.test.ts

@@ -413,13 +413,14 @@ describe("NLEPreview", () => {
   describe("a missing poster", () => {
     const renderUrl =
       "/api/projects/timeline-edit-playground/thumbnail/index.html?t=0&output=source";
-    const fetchSpy = vi.fn(() => Promise.resolve(new Response()));
+    const fetchSpy = vi.fn((_url: string, _init?: RequestInit) => Promise.resolve(new Response()));
     beforeEach(() => {
       fetchSpy.mockClear();
       vi.stubGlobal("fetch", fetchSpy);
     });
     afterEach(() => vi.unstubAllGlobals());
 
+    const renders = () => fetchSpy.mock.calls.map(([url]) => url);
     const settle = (
       view: ReturnType<typeof renderPreview>,
       steps: Array<"ready" | "missing" | "loaded">,
@@ -437,7 +438,10 @@ describe("NLEPreview", () => {
     it("is rendered for the next open when the live frame is ready first", () => {
       const view = renderPreview();
       settle(view, ["ready", "missing"]);
-      expect(fetchSpy.mock.calls).toEqual([[renderUrl]]);
+      expect(renders()).toEqual([renderUrl]);
+      expect(fetchSpy.mock.calls[0]?.[1]?.signal, "rendered as scheduler work").toBeInstanceOf(
+        AbortSignal,
+      );
       expect(view.stage.querySelector('[data-testid="preview-poster"]')).toBeNull();
       view.cleanup();
     });
@@ -447,7 +451,7 @@ describe("NLEPreview", () => {
       settle(view, ["missing"]);
       expect(fetchSpy).not.toHaveBeenCalled();
       settle(view, ["ready", "ready"]);
-      expect(fetchSpy.mock.calls).toEqual([[renderUrl]]);
+      expect(renders()).toEqual([renderUrl]);
       view.cleanup();
     });
 
@@ -458,7 +462,7 @@ describe("NLEPreview", () => {
       settle(view, ["ready"]);
       view.render();
       settle(view, ["ready", "missing"]);
-      expect(fetchSpy.mock.calls).toEqual([[renderUrl]]);
+      expect(renders()).toEqual([renderUrl]);
       view.cleanup();
     });
   });

package/src/components/nle/PreviewOverlays.tsx

@@ -152,7 +152,7 @@ export function PreviewOverlays({
         <button
           type="button"
           onClick={enterCaptionMode}
-          className="pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
+          className="pointer-events-auto absolute top-2 left-1/2 -translate-x-1/2 z-60 rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-accent-ink focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
         >
           Edit captions
         </button>

package/src/components/nle/PreviewPane.tsx

@@ -116,9 +116,9 @@ export function PreviewPane({
     <div
       ref={containerRef}
       // A recessed well inset in its dock card; dropped in fullscreen so the
-      // preview fills the screen edge-to-edge.
-      className={`flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${
-        isFullscreen ? "" : "m-3 rounded-md border border-neutral-800/50"
+      // preview fills the screen edge-to-edge. The player stays dark in both themes.
+      className={`scheme-dark flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${
+        isFullscreen ? "" : "m-3 rounded-md border border-border"
       }`}
       data-studio-fullscreen-target=""
     >

package/src/components/nle/PreviewPoster.tsx

@@ -1,5 +1,10 @@
 import { useCallback, useRef, useState } from "react";
 import { buildProjectApiPath } from "../../utils/projectRouting";
+import {
+  createThumbnailKey,
+  thumbnailScheduler,
+  type ThumbnailRequest,
+} from "../../player/lib/thumbnailScheduler";
 import type { PreviewCompositionSize } from "../../utils/previewCompositionSize";
 
 /** Frame 0 as the thumbnail route last rendered it; `cachedOnly` never starts a render. */
@@ -65,7 +70,7 @@ export function usePreviewPoster(
   const renderMissingPoster = useCallback(() => {
     if (missingForRef.current !== visit || liveReadyForRef.current !== visit) return;
     missingForRef.current = null;
-    void fetch(previewPosterUrl(projectId, false)).catch(() => {});
+    renderPosterForNextOpen(projectId);
   }, [visit, projectId]);
   const onLiveReadyToShowChange = useCallback(
     (ready: boolean) => {
@@ -91,6 +96,29 @@ export function usePreviewPoster(
   };
 }
 
+/** Renders frame 0 under the thumbnail cap; the lease ends once the render settles. */
+export function renderPosterForNextOpen(projectId: string): void {
+  const url = previewPosterUrl(projectId, false);
+  const request: ThumbnailRequest = {
+    key: createThumbnailKey({ kind: "poster-render", url }),
+    projectId,
+    sessionEpoch: 0,
+    kind: "composition",
+    priority: "overscan",
+    discardWhenReleased: true,
+    load: async (signal) => {
+      await (await fetch(url, { signal })).arrayBuffer();
+      return { value: { kind: "image", url, aspect: 16 / 9 }, weight: 0 };
+    },
+  };
+  const settled = () => ["ready", "error"].includes(thumbnailScheduler.getSnapshot(request).status);
+  let lease: { release(): void } | null = null;
+  lease = thumbnailScheduler.acquire(request, () => {
+    if (settled()) lease?.release();
+  });
+  if (settled()) lease.release();
+}
+
 function useVisitNumber(key: string): number {
   const [seen, setSeen] = useState({ key, visit: 0 });
   if (seen.key === key) return seen.visit;

package/src/components/nle/PreviewZoomOverlay.tsx

@@ -85,7 +85,7 @@ export function PreviewZoomOverlay({
         </span>
         <button
           type="button"
-          className="rounded px-1.5 py-0.5 font-medium text-studio-accent hover:bg-white/10 transition-colors"
+          className="rounded px-1.5 py-0.5 font-medium text-accent-ink hover:bg-white/10 transition-colors"
           onClick={onFit}
           aria-label="Fit the whole frame in view"
           data-testid="preview-zoom-fit"

package/src/components/panels/SlideshowPanel.tsx

@@ -413,7 +413,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
 
   return (
     <div
-      className="flex flex-col h-full overflow-y-auto text-white"
+      className="flex flex-col h-full overflow-y-auto text-text-0"
       onKeyDown={(e) => {
         // In-panel undo — scoped so it never fights the app-level file undo.
         if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
@@ -428,14 +428,14 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
       {persistError && (
         <div
           role="alert"
-          className="flex items-center justify-between gap-2 px-3 py-2 bg-red-950/40 border-b border-red-500/40"
+          className="flex items-center justify-between gap-2 px-3 py-2 bg-danger/15 border-b border-red-500/40"
         >
-          <span className="text-[11px] text-red-300">Changes not saved</span>
+          <span className="text-[11px] text-danger-ink">Changes not saved</span>
           <button
             type="button"
             disabled={retrying}
             onClick={handleRetryPersist}
-            className="px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
+            className="px-2 py-0.5 text-[10px] rounded-sm bg-danger text-on-danger enabled:hover:brightness-95 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
           >
             {retrying ? "Retrying…" : "Retry"}
           </button>