@hyperframes/studio 0.8.50 → 0.8.52

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

@@ -0,0 +1,76 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useColorGradingPreviews } from "./useColorGradingPreviews";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePreviewIframeStore.setState({ iframe: null });
+  document.body.innerHTML = "";
+});
+
+function createFrame() {
+  return document.body.appendChild(document.createElement("iframe"));
+}
+
+function installRenderer(iframe: HTMLIFrameElement) {
+  const renderPreviews = vi.fn().mockResolvedValue({
+    width: 160,
+    height: 90,
+    images: [{ id: "bright-pop", dataUrl: "data:image/png;base64,x" }],
+  });
+  (iframe.contentWindow as unknown as { __hf: unknown }).__hf = {
+    colorGrading: { renderPreviews },
+  };
+  return renderPreviews;
+}
+
+describe("useColorGradingPreviews after the preview iframe is replaced", () => {
+  it("requests preset previews from the new iframe's runtime", async () => {
+    vi.useFakeTimers();
+    const a = createFrame();
+    const b = createFrame();
+    const renderOnB = installRenderer(b);
+    const ref = { current: a as HTMLIFrameElement | null };
+    usePreviewIframeStore.getState().setIframe(a);
+    const grading = normalizeHfColorGrading({ preset: "neutral" });
+    if (!grading) throw new Error("expected neutral grading");
+    const gradingRef = { current: grading };
+    const target = { selector: "#v" } as never;
+    const postColorGrading = vi.fn();
+    let requestPresetPreviews: () => void = () => {};
+    function Host() {
+      requestPresetPreviews = useColorGradingPreviews({
+        grading,
+        gradingRef,
+        identityKey: "k",
+        target,
+        previewIframeRef: ref,
+        postColorGrading,
+      }).requestPresetPreviews;
+      return null;
+    }
+    const root = createRoot(document.body.appendChild(document.createElement("div")));
+    act(() => root.render(React.createElement(Host)));
+    act(() => requestPresetPreviews());
+    act(() => vi.advanceTimersByTime(0));
+
+    act(() => {
+      ref.current = b;
+      usePreviewIframeStore.getState().setIframe(b);
+    });
+    act(() => vi.advanceTimersByTime(0));
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(renderOnB).toHaveBeenCalled();
+    act(() => root.unmount());
+    vi.useRealTimers();
+  });
+});

package/src/components/editor/useColorGradingPreviews.ts

@@ -1,3 +1,4 @@
+import { useLivePreviewIframe } from "../../player/store/previewIframeStore";
 import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import {
   HF_COLOR_GRADING_ACTIVE_EFFECT_KEYS,
@@ -155,6 +156,7 @@ export function useColorGradingPreviews({
   }
   const previews = state.identityKey === identityKey ? state.previews : emptyPreviews();
 
+  const livePreviewIframe = useLivePreviewIframe();
   useEffect(() => {
     if (!request) return;
     const { kind } = request;
@@ -245,7 +247,15 @@ export function useColorGradingPreviews({
       iframe.removeEventListener("load", attempt);
       window.removeEventListener("message", onMessage);
     };
-  }, [grading.effects, grading.lut, grading.palette, previewIframeRef, request, target]);
+  }, [
+    grading.effects,
+    grading.lut,
+    grading.palette,
+    previewIframeRef,
+    livePreviewIframe,
+    request,
+    target,
+  ]);
 
   const stopAnimatedPreview = useCallback(() => {
     const session = animatedRef.current;

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

@@ -0,0 +1,95 @@
+// @vitest-environment happy-dom
+
+import { act, useRef } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import {
+  usePreviewCompositionRect,
+  type PreviewCompositionRect,
+} from "./usePreviewCompositionRect";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  usePreviewIframeStore.getState().setIframe(null);
+  document.body.innerHTML = "";
+});
+
+function boxed<T extends HTMLElement>(el: T, box: [number, number, number, number]): T {
+  const [left, top, width, height] = box;
+  el.getBoundingClientRect = () => new DOMRect(left, top, width, height);
+  return el;
+}
+
+function mountProbe() {
+  let rect: PreviewCompositionRect | undefined;
+  function Probe() {
+    const ref = useRef<HTMLDivElement>(null);
+    rect = usePreviewCompositionRect(ref);
+    return (
+      <div
+        ref={(el) => {
+          ref.current = el;
+          if (el) boxed(el, [10, 20, 1000, 600]);
+        }}
+      />
+    );
+  }
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => createRoot(host).render(<Probe />));
+  return () => rect;
+}
+
+function compositionFrame(box: [number, number, number, number], width: number, height: number) {
+  const iframe = boxed(document.createElement("iframe"), box);
+  document.body.append(iframe);
+  const root = iframe.contentDocument?.createElement("div");
+  root?.setAttribute("data-composition-id", "main");
+  root?.setAttribute("data-width", String(width));
+  root?.setAttribute("data-height", String(height));
+  if (root) iframe.contentDocument?.body.append(root);
+  return iframe;
+}
+
+const settle = () => new Promise((r) => setTimeout(r, 400));
+
+describe("usePreviewCompositionRect", () => {
+  it("reports the live preview iframe's box relative to the overlay, scaled to the composition", async () => {
+    const read = mountProbe();
+    const iframe = compositionFrame([110, 70, 960, 540], 1920, 1080);
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(iframe);
+      await settle();
+    });
+    expect(read()).toEqual({
+      left: 100,
+      top: 50,
+      width: 960,
+      height: 540,
+      scaleX: 0.5,
+      scaleY: 0.5,
+    });
+  });
+
+  it("follows the iframe when a reload replaces it", async () => {
+    const read = mountProbe();
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(compositionFrame([110, 70, 960, 540], 1920, 1080));
+      await settle();
+    });
+    await act(async () => {
+      usePreviewIframeStore.getState().setIframe(compositionFrame([60, 40, 500, 500], 1000, 1000));
+      await settle();
+    });
+    expect(read()).toEqual({
+      left: 50,
+      top: 20,
+      width: 500,
+      height: 500,
+      scaleX: 0.5,
+      scaleY: 0.5,
+    });
+  });
+});

package/src/components/editor/usePreviewCompositionRect.ts

@@ -0,0 +1,21 @@
+import { useMemo, type RefObject } from "react";
+import { usePreviewIframeStore } from "../../player/store/previewIframeStore";
+import { useDomEditCompositionRect } from "./useDomEditCompositionRect";
+
+export type { DomEditCompositionRect as PreviewCompositionRect } from "./useDomEditCompositionRect";
+
+/**
+ * Where the composition sits inside `overlayRef`, in overlay pixels, plus the scale from
+ * composition units to pixels. Follows the live preview iframe across reloads.
+ */
+export function usePreviewCompositionRect(overlayRef: RefObject<HTMLDivElement | null>) {
+  const iframeRef = useMemo<RefObject<HTMLIFrameElement | null>>(
+    () => ({
+      get current() {
+        return usePreviewIframeStore.getState().iframe;
+      },
+    }),
+    [],
+  );
+  return useDomEditCompositionRect({ iframeRef, overlayRef });
+}

package/src/components/feedback/StudioFeedbackCard.tsx

@@ -243,7 +243,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
                 if (req) trackStudioFeedbackInterviewClick({ reason: req.reason });
                 close("sent");
               }}
-              className="h-6 flex-shrink-0 whitespace-nowrap rounded-full border border-white/20 bg-white/[0.08] 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/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+              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"
             >
               Talk to us, 30 min
             </a>
@@ -251,7 +251,7 @@ export const StudioFeedbackCard = memo(function StudioFeedbackCard() {
           <button
             type="button"
             onClick={() => close("close")}
-            className="-mr-1 -mt-0.5 flex h-5 w-5 flex-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-white/10 hover:text-neutral-200"
             aria-label="Dismiss"
           >
             <svg
@@ -283,7 +283,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/[0.04] 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-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"
                 >
                   <input
                     type="radio"
@@ -328,8 +328,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/[0.06] text-red-100/80 hover:border-red-200/70 hover:bg-red-100/25 hover:text-white"
-                      : "border-white/10 bg-white/[0.04] text-neutral-300 hover:border-white/60 hover:bg-white/25 hover:text-white"
+                      ? "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"
                   }`}
                 >
                   {preset.label}
@@ -355,12 +355,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-none transition-colors duration-150 placeholder:text-neutral-500 focus:border-white/25"
+                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"
               />
               <button
                 type="button"
                 onClick={() => submit()}
-                className="h-7 flex-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/[0.16] active:scale-[0.97] motion-reduce:transition-none"
+                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"
               >
                 Send
               </button>

package/src/components/feedback/feedbackTrigger.ts

@@ -76,7 +76,6 @@ const FOLLOW_UPS: readonly FollowUpQuestion[] = [
       { label: "Layers panel", hint: "The layer tree on the right" },
       { label: "Variables panel", hint: "Composition variables on the right" },
       { label: "Blocks browser", hint: "The block library in the sidebar" },
-      { label: "Storyboard mode", hint: "The storyboard view next to Preview" },
       { label: "Caption editing", hint: "Editing caption words and presets in Studio" },
       { label: "Render history", hint: "The list of past exports" },
       { label: "Nothing", hint: "It all earns its place" },

package/src/components/nle/AssetPreviewOverlay.tsx

@@ -42,7 +42,11 @@ function AssetPreviewMedia({
 }) {
   if (kind === "image") {
     return (
-      <img src={serveUrl} alt={name} className="max-w-full max-h-[40vh] rounded object-contain" />
+      <img
+        src={serveUrl}
+        alt={name}
+        className="max-w-full max-h-[40vh] rounded-sm object-contain"
+      />
     );
   }
   if (kind === "video") {
@@ -53,7 +57,7 @@ function AssetPreviewMedia({
         autoPlay
         muted
         playsInline
-        className="max-w-full max-h-[40vh] rounded"
+        className="max-w-full max-h-[40vh] rounded-sm"
       />
     );
   }

package/src/components/nle/CompositionBreadcrumb.tsx

@@ -21,7 +21,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
   return (
     <nav
       aria-label="Composition navigation"
-      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 flex-shrink-0"
+      className="flex items-center gap-1 px-2 h-8 border-b border-neutral-800/50 bg-neutral-900/50 shrink-0"
     >
       {/* Back button — always goes to parent */}
       <button
@@ -33,7 +33,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
           });
           onNavigate(stack.length - 2);
         }}
-        className="flex items-center gap-1 px-1.5 py-0.5 rounded text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
+        className="flex items-center gap-1 px-1.5 py-0.5 rounded-sm text-xs text-neutral-400 hover:text-white hover:bg-neutral-800 active:scale-[0.98] transition-colors"
         title="Back (Esc, or double-click empty timeline)"
         aria-label="Back to parent composition"
       >
@@ -45,7 +45,7 @@ export function CompositionBreadcrumb({ stack, onNavigate }: CompositionBreadcru
         const isLast = i === stack.length - 1;
         return (
           <span key={level.id} className="flex items-center gap-1">
-            {i > 0 && <CaretRight size={10} className="text-neutral-600 flex-shrink-0" />}
+            {i > 0 && <CaretRight size={10} className="text-neutral-600 shrink-0" />}
             {isLast ? (
               <span className="text-xs text-neutral-200 font-medium">{level.label}</span>
             ) : (

package/src/components/nle/NLEPreview.tsx

@@ -442,7 +442,7 @@ export const NLEPreview = memo(function NLEPreview({
     <div className="flex flex-col h-full min-h-0">
       <div
         ref={viewportRef}
-        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-none focus:ring-1 focus:ring-studio-accent/40 bg-neutral-950"
+        className="relative flex-1 flex items-center justify-center p-2 overflow-hidden min-h-0 outline-hidden focus:ring-1 focus:ring-studio-accent/40 bg-[var(--studio-preview-bg,var(--color-neutral-950))]"
         tabIndex={0}
         aria-label="Composition preview"
       >
@@ -492,14 +492,14 @@ export const NLEPreview = memo(function NLEPreview({
         </div>
         <div
           ref={hudRef}
-          className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 rounded-lg px-4 py-2 text-sm font-mono tabular-nums text-white/90 bg-black/60 backdrop-blur-sm shadow-lg"
+          className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 rounded-lg px-4 py-2 text-sm font-mono tabular-nums text-white/90 bg-black/60 backdrop-blur-xs shadow-lg"
           style={{ opacity: 0, transition: "opacity 200ms ease-in" }}
           aria-live="polite"
         />
         {!isPreviewAtFit(settledZoom) && (
           <button
             type="button"
-            className="absolute bottom-3 right-3 z-50 rounded-md px-2.5 py-1 text-xs font-medium text-white/80 bg-black/50 backdrop-blur-sm hover:bg-black/70 hover:text-white transition-colors"
+            className="absolute bottom-3 right-3 z-50 rounded-md px-2.5 py-1 text-xs font-medium text-white/80 bg-black/50 backdrop-blur-xs hover:bg-black/70 hover:text-white transition-colors"
             onClick={() => applyZoom(DEFAULT_PREVIEW_ZOOM)}
             aria-label="Reset zoom to fit"
             data-testid="preview-reset-zoom"

package/src/components/nle/PreviewOverlays.tsx

@@ -222,13 +222,13 @@ export function PreviewOverlays({
         <TopologyLens iframeRef={previewIframeRef} activeCompositionPath={activeCompPath} />
         <CaptionOverlay iframeRef={previewIframeRef} />
         {/* Mode indicator + explicit exit */}
-        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
+        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
           <span className="h-1.5 w-1.5 rounded-full bg-studio-accent" aria-hidden="true" />
           <span className="text-2xs text-neutral-200">Editing captions</span>
           <button
             type="button"
             onClick={exitCaptionMode}
-            className="rounded text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-studio-accent"
+            className="rounded-sm text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-studio-accent"
           >
             Exit
           </button>
@@ -236,13 +236,13 @@ export function PreviewOverlays({
         {captionSyncError && (
           <div
             role="alert"
-            className="absolute top-10 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1"
+            className="absolute top-10 left-1/2 -translate-x-1/2 z-60 flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1"
           >
             <span className="text-2xs text-red-200">{captionSyncError}</span>
             <button
               type="button"
               onClick={() => useCaptionStore.getState().retrySave?.()}
-              className="rounded text-2xs text-red-100 underline underline-offset-2 hover:text-white"
+              className="rounded-sm text-2xs text-red-100 underline underline-offset-2 hover:text-white"
             >
               Retry
             </button>
@@ -250,7 +250,7 @@ export function PreviewOverlays({
               type="button"
               onClick={() => useCaptionStore.getState().setSyncError(null)}
               aria-label="Dismiss"
-              className="rounded px-0.5 text-2xs text-red-300/70 hover:text-red-100"
+              className="rounded-sm px-0.5 text-2xs text-red-300/70 hover:text-red-100"
             >
               ✕
             </button>
@@ -338,7 +338,7 @@ export function PreviewOverlays({
         <button
           type="button"
           onClick={enterCaptionMode}
-          className="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 focus-visible:outline-1 focus-visible:outline-studio-accent"
+          className="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"
         >
           Edit captions
         </button>

package/src/components/nle/PreviewPane.tsx

@@ -110,7 +110,7 @@ export function PreviewPane({
       ref={containerRef}
       // Panel chrome (rounded border) is dropped in fullscreen so the preview
       // fills the screen edge-to-edge.
-      className={`flex-1 min-h-0 flex flex-col overflow-hidden bg-neutral-950 ${
+      className={`flex-1 min-h-0 flex flex-col overflow-hidden bg-[var(--studio-preview-bg,var(--color-neutral-950))] ${
         isFullscreen ? "" : "rounded-lg border border-neutral-800/50"
       }`}
       data-studio-fullscreen-target=""
@@ -139,7 +139,7 @@ export function PreviewPane({
             onCompositionSizeChange={setPreviewCompositionSize}
           />
           {previewDragOver && (
-            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/4 pointer-events-none" />
           )}
           <AssetPreviewOverlay />
         </div>
@@ -148,7 +148,7 @@ export function PreviewPane({
       </div>
       {/* Transport row: no own background or border — the controls sit flat on
           the preview panel's surface (CapCut-style). */}
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         {!isFullscreen && compositionStack.length > 1 && (
           <CompositionBreadcrumb stack={compositionStack} onNavigate={handleNavigateComposition} />
         )}

package/src/components/nle/TimelinePane.tsx

@@ -266,7 +266,7 @@ export function TimelinePane({
       {/* Timeline section — inner padding (not margin) keeps the divider's
           height math exact while giving the panel a gap from the shell edges. */}
       <div
-        className="relative flex flex-col flex-shrink-0 px-px pb-px"
+        className="relative flex flex-col shrink-0 px-px pb-px"
         style={{ height: timelineH }}
         aria-disabled={timelineDisabled || undefined}
       >
@@ -280,7 +280,7 @@ export function TimelinePane({
             }
           }}
         >
-          <div className="flex-shrink-0">{timelineToolbar}</div>
+          <div className="shrink-0">{timelineToolbar}</div>
           <Timeline
             sessionEpoch={timelineSessionEpoch}
             onSeek={seek}
@@ -304,7 +304,7 @@ export function TimelinePane({
             canPasteClip={canPasteClip}
           />
         </div>
-        {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}
+        {timelineFooter && <div className="shrink-0">{timelineFooter}</div>}
         {timelineDisabled && (
           <div
             className="absolute inset-0 z-30 cursor-not-allowed bg-black/18 flex items-center justify-center"

package/src/components/nle/TimelineResizeDivider.tsx

@@ -79,7 +79,7 @@ export function TimelineResizeDivider({
         (containerRef.current?.getBoundingClientRect().height ?? 600) - MIN_PREVIEW_H,
       )}
       tabIndex={0}
-      className="group relative h-[3px] flex-shrink-0 cursor-row-resize z-10 outline-none focus-visible:bg-studio-accent/20"
+      className="group relative h-[3px] shrink-0 cursor-row-resize z-10 outline-hidden focus-visible:bg-studio-accent/20"
       style={{ touchAction: "none" }}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
@@ -93,7 +93,7 @@ export function TimelineResizeDivider({
           the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
           there is: 28px transport buttons sit above and 28px toolbar buttons
           below, and silently stealing their clicks is the worse bug. */}
-      <div className="absolute inset-x-0 -top-[4px] h-[10px]" />
+      <div className="absolute inset-x-0 top-[-4px] h-[10px]" />
       {/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
       <div className="h-[3px] w-full bg-transparent transition-colors group-hover:bg-white/12 group-active:bg-white/18 group-focus-visible:bg-studio-accent/60" />
     </div>

package/src/components/panels/SlideshowPanel.tsx

@@ -435,7 +435,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
             type="button"
             disabled={retrying}
             onClick={handleRetryPersist}
-            className="px-2 py-0.5 text-[10px] rounded 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-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
           >
             {retrying ? "Retrying…" : "Retry"}
           </button>
@@ -447,7 +447,7 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
             type="button"
             onClick={handleUndo}
             title="Undo last slideshow edit (⌘Z)"
-            className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
+            className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
           >
             Undo ({undoDepth})
           </button>