@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/StudioHeader.dom.test.tsx

@@ -0,0 +1,181 @@
+// @vitest-environment happy-dom
+
+/**
+ * The header on the shared primitives: Capture and Inspector grouped, Export separate,
+ * hotkey filters unchanged (KTD13). Contexts are mocked, not provided.
+ */
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { buttonSizes, buttonVariants } from "./ui";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const editHistory = {
+  canUndo: false,
+  canRedo: false,
+  undoLabel: undefined as string | undefined,
+  redoLabel: undefined as string | undefined,
+};
+const renderQueue = { isRendering: false, ffmpegMissing: false };
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    projectId: "demo",
+    editHistory,
+    handleUndo: vi.fn(),
+    handleRedo: vi.fn(),
+    renderQueue,
+  }),
+}));
+
+vi.mock("../contexts/PanelLayoutContext", () => ({
+  usePanelLayoutContext: () => ({
+    effectiveRightCollapsed: false,
+    setRightCollapsed: vi.fn(),
+    setRightPanelTab: vi.fn(),
+  }),
+}));
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const { StudioHeader } = await import("./StudioHeader");
+
+let mounted: { root: Root; host: HTMLElement } | null = null;
+
+beforeEach(() => {
+  editHistory.canUndo = false;
+  editHistory.canRedo = false;
+  editHistory.undoLabel = undefined;
+  editHistory.redoLabel = undefined;
+  renderQueue.isRendering = false;
+});
+
+afterEach(() => {
+  if (!mounted) return;
+  const { root, host } = mounted;
+  mounted = null;
+  act(() => root.unmount());
+  host.remove();
+});
+
+function mount(props: { inspectorButtonActive?: boolean } = {}): HTMLElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  mounted = { root, host };
+  act(() =>
+    root.render(
+      <StudioHeader
+        captureFrameHref="blob:frame"
+        captureFrameFilename="frame.png"
+        handleCaptureFrameClick={vi.fn()}
+        refreshCaptureFrameTime={vi.fn()}
+        inspectorButtonActive={props.inspectorButtonActive ?? false}
+        inspectorPanelActive={false}
+      />,
+    ),
+  );
+  return host;
+}
+
+function query(host: HTMLElement, selector: string): HTMLElement {
+  const el = host.querySelector<HTMLElement>(selector);
+  if (!el) throw new Error(`not rendered: ${selector}`);
+  return el;
+}
+
+/** Every class the recipe asks for, on the element the header rendered. */
+function expectRecipe(el: HTMLElement, ...recipes: string[]): void {
+  const applied = new Set(el.className.split(/\s+/));
+  for (const recipe of recipes) {
+    for (const token of recipe.split(/\s+/)) {
+      expect(applied, `${token} missing from: ${el.className}`).toContain(token);
+    }
+  }
+}
+
+it("renders Export as the shared primary Button at the medium size", () => {
+  const host = mount();
+
+  expectRecipe(
+    query(host, '[data-testid="header-export"]'),
+    buttonVariants.primary,
+    buttonSizes.md,
+  );
+});
+
+it("no longer renders Undo or Redo in the header", () => {
+  const host = mount();
+
+  expect(host.querySelector('[aria-label="Undo"]')).toBeNull();
+  expect(host.querySelector('[aria-label="Redo"]')).toBeNull();
+});
+
+it("groups Capture and Inspector in one bordered segment, Export outside it", () => {
+  const host = mount();
+  const group = query(host, '[aria-label="Capture current frame"]').closest(".divide-x");
+
+  expect(group?.contains(query(host, '[aria-label="Inspector"]'))).toBe(true);
+  expect(group?.contains(query(host, '[data-testid="header-export"]'))).toBe(false);
+  expect(group).not.toBeNull();
+});
+
+it("drops the Capture label below 1000px but keeps its accessible name", () => {
+  const host = mount();
+  const capture = query(host, '[aria-label="Capture current frame"]');
+
+  expect(query(capture, "span").className).toContain("max-[1000px]:hidden");
+});
+
+/** The bare token, not a `hover:`/`data-[…]:`-prefixed variant of it. */
+function hasToken(className: string, token: string): boolean {
+  return className.split(/\s+/).includes(token);
+}
+
+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);
+  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);
+});
+
+it("keeps Capture a real download link rather than a button", () => {
+  // `download` is what saves the frame. A Button here would render a <button>
+  // and the control would quietly stop downloading anything.
+  const host = mount();
+  const capture = query(host, '[aria-label="Capture current frame"]');
+
+  expect(capture.tagName).toBe("A");
+  expect(capture.getAttribute("download")).toBe("frame.png");
+  // h-full replaces the md height: the group's own h-ctl sets the shared control height.
+  expectRecipe(capture, "px-3", "text-step-12");
+});
+
+it("classifies the new header controls for the hotkey filters as the old ones were (KTD13)", () => {
+  // Every one of these was a <button> or an <a href> before the sweep: never a
+  // typing target, always claimed by the playback filter. A primitive that
+  // rendered a different element would leak or swallow hotkeys in silence.
+  const host = mount();
+  const controls = [
+    query(host, '[data-testid="header-export"]'),
+    query(host, '[aria-label="Inspector"]'),
+    query(host, '[aria-label="Capture current frame"]'),
+  ];
+
+  for (const el of controls) {
+    expect(isTypingTarget(el), el.getAttribute("aria-label") ?? el.tagName).toBe(false);
+    expect(shouldIgnorePlaybackShortcutTarget(el), el.tagName).toBe(true);
+  }
+});

package/src/components/StudioHeader.tsx

@@ -1,11 +1,9 @@
-import { useRef, type MouseEvent } from "react";
-import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
-import { getHistoryShortcutLabel } from "../utils/studioHelpers";
+import type { MouseEvent } from "react";
+import { Camera } from "../icons/SystemIcons";
 import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useViewMode, type StudioViewMode } from "../contexts/ViewModeContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { Tooltip } from "./ui";
+import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -41,8 +39,8 @@ function HyperframesLogo() {
           y2="37.482"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
         <linearGradient
           id="hf-g1"
@@ -52,8 +50,8 @@ function HyperframesLogo() {
           y2="6.303"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#06E3FA" />
-          <stop offset="1" stopColor="#4FDB5E" />
+          <stop stopColor="var(--color-brand-gradient-from)" />
+          <stop offset="1" stopColor="var(--color-brand-gradient-to)" />
         </linearGradient>
       </defs>
       {/* heygen label */}
@@ -139,63 +137,6 @@ function HyperframesLogo() {
   );
 }
 
-const VIEW_MODE_OPTIONS: Array<{ mode: StudioViewMode; label: string }> = [
-  { mode: "storyboard", label: "Storyboard" },
-  { mode: "timeline", label: "Preview" },
-];
-
-/** Segmented control switching the main stage between storyboard and preview. */
-export function ViewModeToggle() {
-  const { viewMode, setViewMode } = useViewMode();
-  const tabRefs = useRef<Array<HTMLButtonElement | null>>([]);
-
-  const selectMode = (mode: StudioViewMode) => {
-    if (mode === viewMode) return;
-    if (setViewMode(mode)) trackStudioEvent("view_mode_toggle", { mode });
-  };
-
-  // Complete APG tabs pattern: roving tabIndex + arrow-key navigation.
-  const handleKeyDown = (e: React.KeyboardEvent, index: number) => {
-    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-    e.preventDefault();
-    const dir = e.key === "ArrowLeft" ? -1 : 1;
-    const next = (index + dir + VIEW_MODE_OPTIONS.length) % VIEW_MODE_OPTIONS.length;
-    tabRefs.current[next]?.focus();
-    selectMode(VIEW_MODE_OPTIONS[next].mode);
-  };
-
-  return (
-    <div
-      className="flex items-center gap-0.5 rounded-md bg-neutral-800 p-0.5"
-      role="tablist"
-      aria-label="Studio view"
-    >
-      {VIEW_MODE_OPTIONS.map(({ mode, label }, index) => {
-        const active = viewMode === mode;
-        return (
-          <button
-            key={mode}
-            ref={(el) => {
-              tabRefs.current[index] = el;
-            }}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            tabIndex={active ? 0 : -1}
-            onClick={() => selectMode(mode)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-            className={`rounded px-3 py-1 text-[11px] font-medium transition-colors active:scale-[0.98] outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-studio-accent ${
-              active ? "bg-neutral-200 text-neutral-900" : "text-neutral-400 hover:text-neutral-200"
-            }`}
-          >
-            {label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}
-
 /**
  * Does the header's Inspector button open the panel, or close it?
  *
@@ -222,7 +163,7 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo, renderQueue } = useStudioShellContext();
+  const { projectId, renderQueue } = useStudioShellContext();
   // effectiveRightCollapsed, not the raw intent: in the auto-railed state the
   // intent is still "open" while the panel is hidden, so branching on intent
   // made this button write rightCollapsed=true — and that value is synced into
@@ -232,155 +173,114 @@ export function StudioHeader({
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
   return (
-    <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">
+    <div className="flex items-center justify-between h-10 px-3 bg-surface border-b border-border-strong shrink-0">
       {/* Left: logo + project name */}
       <div className="flex items-center gap-3">
         <HyperframesLogo />
-        <span className="text-neutral-700 select-none" aria-hidden="true">
+        <span className="text-text-5 select-none" aria-hidden="true">
           |
         </span>
-        <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
+        <span className="text-step-11 font-medium text-text-1">{projectId}</span>
       </div>
-      {/* Center: storyboard / preview toggle */}
-      <ViewModeToggle />
       {/* Right: toolbar buttons */}
-      <div className="flex items-center gap-1.5">
-        <Tooltip
-          label={
-            editHistory.undoLabel
-              ? `Undo ${editHistory.undoLabel} (${getHistoryShortcutLabel("undo")})`
-              : `Undo (${getHistoryShortcutLabel("undo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "undo" });
-              void handleUndo();
-            }}
-            disabled={!editHistory.canUndo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canUndo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Undo"
-          >
-            <RotateCcw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip
-          label={
-            editHistory.redoLabel
-              ? `Redo ${editHistory.redoLabel} (${getHistoryShortcutLabel("redo")})`
-              : `Redo (${getHistoryShortcutLabel("redo")})`
-          }
-          side="bottom"
-        >
-          <button
-            type="button"
-            onClick={() => {
-              trackStudioEvent("toolbar_action", { action: "redo" });
-              void handleRedo();
-            }}
-            disabled={!editHistory.canRedo}
-            className={`h-7 w-7 flex items-center justify-center rounded-md transition-colors active:scale-[0.98] ${
-              editHistory.canRedo
-                ? "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800"
-                : "text-neutral-700 cursor-default"
-            }`}
-            aria-label="Redo"
-          >
-            <RotateCw size={14} />
-          </button>
-        </Tooltip>
-        <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
-          <a
-            href={captureFrameHref}
-            download={captureFrameFilename}
-            onClick={(e) => {
-              if (capturing) {
-                e.preventDefault();
-                return;
-              }
-              trackStudioEvent("toolbar_action", { action: "capture_frame" });
-              handleCaptureFrameClick(e);
-            }}
-            onFocus={refreshCaptureFrameTime}
-            onPointerDown={refreshCaptureFrameTime}
-            aria-disabled={capturing || undefined}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium transition-colors ${
-              capturing
-                ? "text-neutral-600 cursor-default"
-                : "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.98]"
-            }`}
-            aria-label={capturing ? "Capturing frame" : "Capture current frame"}
-          >
-            {capturing ? (
-              <svg
-                className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
-                viewBox="0 0 24 24"
-                fill="none"
-                aria-hidden="true"
-              >
-                <circle
-                  className="opacity-25"
-                  cx="12"
-                  cy="12"
-                  r="10"
+      <div className="flex items-center gap-3">
+        <div className="flex h-ctl items-center divide-x divide-border-strong overflow-hidden rounded-md border border-border-strong bg-bg-2">
+          <Tooltip label={capturing ? "Capturing frame…" : "Capture current frame"} side="bottom">
+            {/* A real download link, so it wears Button's recipe rather than being
+              one: `download` on an <a> is what saves the frame, and no <button>
+              can do that. `enabled:` never matches a link, so the ghost
+              variant's hover look is repeated unprefixed here. */}
+            <a
+              href={captureFrameHref}
+              download={captureFrameFilename}
+              onClick={(e) => {
+                if (capturing) {
+                  e.preventDefault();
+                  return;
+                }
+                trackStudioEvent("toolbar_action", { action: "capture_frame" });
+                handleCaptureFrameClick(e);
+              }}
+              onFocus={refreshCaptureFrameTime}
+              onPointerDown={refreshCaptureFrameTime}
+              aria-disabled={capturing || undefined}
+              className={cn(
+                buttonBase,
+                buttonVariants.ghost,
+                buttonSizes.md,
+                "h-full rounded-none max-[1000px]:px-2",
+                capturing
+                  ? "text-text-4 cursor-default"
+                  : "hover:bg-hover hover:text-text-0 active:scale-[0.98]",
+              )}
+              aria-label={capturing ? "Capturing frame" : "Capture current frame"}
+            >
+              {capturing ? (
+                <svg
+                  className="animate-spin motion-reduce:animate-none h-3.5 w-3.5"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  />
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  />
+                </svg>
+              ) : (
+                <Camera size={14} />
+              )}
+              <span className="max-[1000px]:hidden">{capturing ? "Capturing…" : "Capture"}</span>
+            </a>
+          </Tooltip>
+          <Tooltip label="Inspector" side="bottom">
+            <Button
+              variant="ghost"
+              aria-label="Inspector"
+              aria-pressed={inspectorButtonActive}
+              className={cn(
+                "h-full rounded-none",
+                inspectorButtonActive && "bg-hover text-accent enabled:hover:text-accent",
+              )}
+              icon={
+                <svg
+                  width="12"
+                  height="12"
+                  viewBox="0 0 24 24"
+                  fill="none"
                   stroke="currentColor"
-                  strokeWidth="4"
-                />
-                <path
-                  className="opacity-75"
-                  fill="currentColor"
-                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-                />
-              </svg>
-            ) : (
-              <Camera size={14} />
-            )}
-            <span>{capturing ? "Capturing…" : "Capture"}</span>
-          </a>
-        </Tooltip>
-        <Tooltip label="Inspector" side="bottom">
-          <button
-            type="button"
-            onClick={() => {
-              if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
-                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
-                setRightPanelTab("design");
-                setRightCollapsed(false);
-                return;
+                  strokeWidth="2"
+                >
+                  <circle cx="12" cy="12" r="10" />
+                  <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
+                </svg>
               }
-              trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
-              // Keep the current selection when collapsing the Inspector — closing
-              // the panel shouldn't deselect the element.
-              setRightCollapsed(true);
-            }}
-            aria-pressed={inspectorButtonActive}
-            className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
-              inspectorButtonActive
-                ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-                : "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
-            }`}
-            aria-label="Inspector"
-          >
-            <svg
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
+              onClick={() => {
+                if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
+                  trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
+                  setRightPanelTab("design");
+                  setRightCollapsed(false);
+                  return;
+                }
+                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
+                // Keep the current selection when collapsing the Inspector — closing
+                // the panel shouldn't deselect the element.
+                setRightCollapsed(true);
+              }}
             >
-              <circle cx="12" cy="12" r="10" />
-              <polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none" />
-            </svg>
-            Inspector
-          </button>
-        </Tooltip>
+              Inspector
+            </Button>
+          </Tooltip>
+        </div>
         <Tooltip
           label={
             ffmpegMissing
@@ -391,8 +291,9 @@ export function StudioHeader({
           }
           side="bottom"
         >
-          <button
-            type="button"
+          <Button
+            variant="primary"
+            data-testid="header-export"
             disabled={isRendering}
             onClick={() => {
               if (isRendering) return;
@@ -406,10 +307,9 @@ export function StudioHeader({
               if (ffmpegMissing) return;
               onExport?.();
             }}
-            className="h-7 flex items-center gap-1.5 px-3 rounded-md text-[11px] font-semibold bg-studio-accent text-[#09090B] enabled:hover:brightness-110 transition-[filter,transform] enabled:active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isRendering ? "Rendering…" : "Export"}
-          </button>
+          </Button>
         </Tooltip>
       </div>
     </div>

package/src/components/StudioLeftSidebar.tsx

@@ -17,6 +17,7 @@ export interface StudioLeftSidebarProps {
   onLint: () => void;
   linting: boolean;
   lintFindingCount?: number;
+  lintHasError?: boolean;
   lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
   onAddAssetToTimeline?: (path: string) => void;
   onAddCompositionToTimeline?: (path: string) => void;
@@ -31,6 +32,7 @@ export function StudioLeftSidebar({
   onLint,
   linting,
   lintFindingCount,
+  lintHasError,
   lintFindingsByFile,
   onAddAssetToTimeline,
   onAddCompositionToTimeline,
@@ -86,7 +88,7 @@ export function StudioLeftSidebar({
 
   if (effectiveLeftCollapsed) {
     return (
-      <div className="mr-0.5 flex w-10 flex-shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1">
+      <div className="mr-0.5 flex w-10 shrink-0 flex-col items-center rounded-lg border border-neutral-800/50 bg-neutral-950 pt-1">
         <button
           type="button"
           onClick={toggleLeftSidebar}
@@ -160,6 +162,7 @@ export function StudioLeftSidebar({
         onLint={onLint}
         linting={linting}
         lintFindingCount={lintFindingCount}
+        lintHasError={lintHasError}
         lintFindingsByFile={lintFindingsByFile}
         onToggleCollapse={toggleLeftSidebar}
         onAddBlock={onAddBlock}
@@ -169,14 +172,14 @@ export function StudioLeftSidebar({
       />
       {/* Vertical resize divider: 3px visible seam, 13px pointer-capture zone via
           the absolutely-positioned inner hit area. The outer element is w-[3px] so
-          it contributes only 3px of gap in the flex row; the inner -left-[2px]
+          it contributes only 3px of gap in the flex row; the inner left-[-2px]
           element widens the hit area without affecting layout. */}
       <div
         role="separator"
         aria-label="Resize sidebar"
         aria-orientation="vertical"
         tabIndex={0}
-        className="group relative w-[3px] flex-shrink-0 cursor-col-resize outline-none focus-visible:bg-studio-accent/20"
+        className="group relative w-[3px] shrink-0 cursor-col-resize outline-hidden focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("left", e)}
         onPointerMove={handlePanelResizeMove}
@@ -195,7 +198,7 @@ export function StudioLeftSidebar({
             24px WCAG 2.2 (2.5.8) target because the next pixel on either side is
             live: the sidebar's scrolling tab content on the left, the preview
             stage on the right. Silently stealing their clicks is the worse bug. */}
-        <div className="absolute inset-y-0 -left-[2px] w-[13px]" />
+        <div className="absolute inset-y-0 left-[-2px] w-[13px]" />
         {/* Visible hairline */}
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>

package/src/components/StudioOverlays.tsx

@@ -77,7 +77,7 @@ export function StudioOverlays({
       )}
       {/* One bottom-right stack so the feedback card and toasts queue instead
           of covering each other. Empty when nothing is showing. */}
-      <div className="absolute bottom-6 right-6 z-[91] flex flex-col items-end gap-2">
+      <div className="absolute bottom-6 right-6 z-91 flex flex-col items-end gap-2">
         {toasts.map((toast) => (
           <StudioToast
             key={toast.id}