@hyperframes/studio 0.8.104 → 0.8.105

package/src/components/editor/propertyPanelFill.tsx

@@ -131,7 +131,7 @@ export function ImageFillField({
             className={`inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors ${
               disabled || uploading
                 ? "cursor-not-allowed text-neutral-600"
-                : "cursor-pointer hover:border-neutral-600 hover:text-white"
+                : "cursor-pointer hover:border-neutral-600 hover:text-text-0"
             }`}
           >
             <Plus size={12} className="shrink-0" />
@@ -151,7 +151,7 @@ export function ImageFillField({
           />
         </div>
         {uploadError && (
-          <div className="text-[10px] text-red-400" role="alert">
+          <div className="text-[10px] text-danger-ink" role="alert">
             {uploadError}
           </div>
         )}
@@ -340,7 +340,7 @@ export function GradientField({
                 track("toggle", "Repeat gradient");
                 patch({ repeating: e.target.checked });
               }}
-              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-panel-accent focus:ring-panel-accent"
+              className="h-4 w-4 rounded-sm border-neutral-700 bg-neutral-950 text-accent-ink focus:ring-panel-accent"
             />
             Repeat
           </label>
@@ -357,7 +357,7 @@ export function GradientField({
                 })),
               });
             }}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <ReverseGradientIcon size={16} />
             Reverse
@@ -442,7 +442,7 @@ export function GradientField({
             disabled={disabled || parsed.stops.length >= 6}
             onClick={() => addStop()}
             title={parsed.stops.length >= 6 ? "Maximum 6 stops" : "Add a gradient stop"}
-            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
+            className="inline-flex h-7 items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0 active:scale-[0.98] disabled:cursor-not-allowed disabled:text-neutral-600"
           >
             <Plus size={12} />
             Add stop
@@ -474,7 +474,7 @@ export function GradientField({
                 type="button"
                 disabled={disabled || parsed.stops.length <= 2}
                 onClick={() => removeStop(index)}
-                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-white disabled:cursor-not-allowed disabled:text-neutral-700"
+                className="mt-[22px] flex h-10 items-center justify-center rounded-lg border border-neutral-700 bg-neutral-950 text-neutral-400 transition-colors hover:border-neutral-600 hover:text-text-0 disabled:cursor-not-allowed disabled:text-text-off"
                 aria-label={`Remove stop ${index + 1}`}
               >
                 <X size={12} />

package/src/components/editor/propertyPanelFlatColorGradingAccessory.tsx

@@ -5,9 +5,9 @@ import { Compare, RotateCcw } from "../../icons/SystemIcons";
 import type { ColorGradingControllerState } from "./useColorGradingController";
 
 const STATUS_DOT_CLASS: Record<ColorGradingControllerState["runtimeStatus"]["state"], string> = {
-  active: "bg-emerald-400",
-  pending: "bg-amber-300",
-  unavailable: "bg-red-400",
+  active: "bg-accent",
+  pending: "bg-warning-ink",
+  unavailable: "bg-danger-ink",
   missing: "bg-panel-text-5",
   inactive: "bg-panel-text-5",
 };

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

@@ -81,7 +81,7 @@ describe("FlatColorGradingAccessory", () => {
     const dot = host.querySelector('[data-flat-grade-status-dot="true"]');
     expect(dot).not.toBeNull();
     expect(dot?.getAttribute("title")).toBe("Shader active");
-    expect(dot?.className).toContain("bg-emerald-400");
+    expect(dot?.className).toContain("bg-accent");
     act(() => root.unmount());
   });
 

package/src/components/editor/propertyPanelFlatColorGradingSection.tsx

@@ -70,23 +70,20 @@ function HdrBanner({ metadata }: { metadata: MediaMetadata | null }) {
   return (
     <div
       data-flat-grade-hdr-banner="true"
-      className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-amber-100"
+      className="rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1.5 text-[10px] leading-4 text-warning-ink"
     >
       <div className="mb-0.5 flex items-center justify-between gap-2">
         <span className="font-semibold">{metadata.color.label} source</span>
-        <span className="rounded-sm bg-amber-400/20 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-amber-100">
+        <span className="rounded-sm bg-amber-500/15 px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wide text-warning-ink">
           SDR preview
         </span>
       </div>
-      <p className="text-amber-100/80">
+      <p className="text-text-2">
         These controls use the current SDR shader preview path. Render may stay HDR-tagged, but this
         is not true HDR color grading yet.
       </p>
       {details && (
-        <p
-          data-flat-grade-hdr-detail="true"
-          className="mt-0.5 truncate text-[9px] text-amber-100/55"
-        >
+        <p data-flat-grade-hdr-detail="true" className="mt-0.5 truncate text-[9px] text-text-muted">
           {details}
         </p>
       )}
@@ -214,7 +211,7 @@ export function FlatColorGradingSection({
           <button
             type="button"
             onClick={onRequestPresetPreviews}
-            className="text-[10px] font-medium text-panel-accent hover:text-panel-accent/80"
+            className="text-[10px] font-medium text-accent-ink hover:text-accent-ink/80"
           >
             Retry look previews
           </button>
@@ -519,7 +516,7 @@ export function FlatColorGradingSection({
               track("button", "Apply grade to scope");
               onApplyToScope();
             }}
-            className="text-[11px] font-medium text-panel-accent hover:text-panel-accent/80 disabled:cursor-not-allowed disabled:opacity-50"
+            className="text-[11px] font-medium text-accent-ink hover:text-accent-ink/80 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {applyBusy ? "Applying" : "Apply"}
           </button>

package/src/components/editor/propertyPanelFlatEffectsSection.tsx

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

package/src/components/editor/propertyPanelFlatMediaSection.tsx

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

package/src/components/editor/propertyPanelFlatMotionSection.tsx

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

package/src/components/editor/propertyPanelFlatOverlaysSection.tsx

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

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

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

package/src/components/editor/propertyPanelFlatPrimitives.tsx

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

package/src/components/editor/propertyPanelFlatSliderReadout.tsx

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

package/src/components/editor/propertyPanelFont.tsx

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

package/src/components/editor/propertyPanelFxCarveModule.tsx

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

package/src/components/editor/propertyPanelFxControls.tsx

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

package/src/components/editor/propertyPanelFxEqModule.tsx

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

package/src/components/editor/propertyPanelFxNodeRow.tsx

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

package/src/components/editor/propertyPanelFxPresetRun.tsx

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

package/src/components/editor/propertyPanelMediaSection.tsx

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

package/src/components/editor/propertyPanelPrimitives.tsx

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

package/src/components/editor/propertyPanelSections.tsx

@@ -323,7 +323,7 @@ function TextFieldEditor({
               track("button", "Remove text field");
               onRemoveTextField(field.key);
             }}
-            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+            className="inline-flex h-7 shrink-0 items-center rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0"
           >
             Remove
           </button>
@@ -474,7 +474,7 @@ export function TextSection({
                 if (nextKey) setActiveTextFieldKey(nextKey);
               });
             }}
-            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
+            className="inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-950 px-2.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-text-0"
           >
             <Plus size={12} className="shrink-0" />
             <span className="truncate">Add text</span>

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

@@ -27,6 +27,6 @@ describe("value tier class maps", () => {
       expect(VALUE_TIER_LABEL_CLASS[tier]).toBeTruthy();
       expect(VALUE_TIER_VALUE_CLASS[tier]).toBeTruthy();
     }
-    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-panel-accent");
+    expect(VALUE_TIER_VALUE_CLASS.explicitCustom).toBe("text-accent-ink");
   });
 });

package/src/components/editor/propertyPanelValueTier.ts

@@ -24,5 +24,5 @@ export const VALUE_TIER_LABEL_CLASS: Record<PropertyValueTier, string> = {
 export const VALUE_TIER_VALUE_CLASS: Record<PropertyValueTier, string> = {
   default: "text-panel-text-3",
   explicitDefault: "text-panel-text-0",
-  explicitCustom: "text-panel-accent",
+  explicitCustom: "text-accent-ink",
 };

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=""
     >