@hyperframes/studio 0.8.50 → 0.8.51

package/src/components/ExternalFileConflictBanner.tsx

@@ -32,7 +32,7 @@ function ConflictReview({
 
   return (
     <div
-      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/70 px-5 backdrop-blur-sm"
+      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
       onClick={onClose}
     >
       <div
@@ -41,7 +41,7 @@ function ConflictReview({
         aria-modal="true"
         aria-labelledby="external-conflict-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-5xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-none"
+        className="max-h-[88vh] w-full max-w-5xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-4">
@@ -53,7 +53,7 @@ function ConflictReview({
               Reviewing or exporting does not change either version.
             </p>
           </div>
-          <button type="button" onClick={onClose} className="rounded px-2 py-1 text-neutral-400">
+          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
             Close
           </button>
         </div>
@@ -68,14 +68,14 @@ function ConflictReview({
                 <div className="flex gap-2">
                   <button
                     type="button"
-                    className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
                     onClick={() => void navigator.clipboard.writeText(side.content)}
                   >
                     Copy
                   </button>
                   <button
                     type="button"
-                    className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+                    className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
                     onClick={() =>
                       downloadText(`${conflict.error.filePath}.${side.suffix}.html`, side.content)
                     }
@@ -87,7 +87,7 @@ function ConflictReview({
               <textarea
                 readOnly
                 value={side.content}
-                className="h-80 w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+                className="h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
               />
             </section>
           ))}
@@ -110,7 +110,7 @@ function FailedDraftReview({
   useDialogBehavior({ open: true, onClose, containerRef });
   return (
     <div
-      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/70 px-5 backdrop-blur-sm"
+      className="fixed inset-0 z-110 flex items-center justify-center bg-black/70 px-5 backdrop-blur-xs"
       onClick={onClose}
     >
       <div
@@ -119,7 +119,7 @@ function FailedDraftReview({
         aria-modal="true"
         aria-labelledby="failed-draft-title"
         tabIndex={-1}
-        className="max-h-[88vh] w-full max-w-3xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-none"
+        className="max-h-[88vh] w-full max-w-3xl overflow-auto rounded-xl border border-amber-400/30 bg-neutral-950 p-5 text-neutral-100 shadow-2xl outline-hidden"
         onClick={(event) => event.stopPropagation()}
       >
         <div className="flex items-start justify-between gap-4">
@@ -131,21 +131,21 @@ function FailedDraftReview({
               Copy or download this draft before choosing to discard it.
             </p>
           </div>
-          <button type="button" onClick={onClose} className="rounded px-2 py-1 text-neutral-400">
+          <button type="button" onClick={onClose} className="rounded-sm px-2 py-1 text-neutral-400">
             Close
           </button>
         </div>
         <div className="mt-4 flex justify-end gap-2">
           <button
             type="button"
-            className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
             onClick={() => void navigator.clipboard.writeText(content)}
           >
             Copy
           </button>
           <button
             type="button"
-            className="rounded border border-neutral-700 px-2 py-1 text-[11px]"
+            className="rounded-sm border border-neutral-700 px-2 py-1 text-[11px]"
             onClick={() => downloadText(`${path}.studio.html`, content)}
           >
             Download
@@ -154,7 +154,7 @@ function FailedDraftReview({
         <textarea
           readOnly
           value={content}
-          className="mt-2 h-80 w-full resize-y rounded border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
+          className="mt-2 h-80 w-full resize-y rounded-sm border border-neutral-800 bg-neutral-900 p-3 font-mono text-[11px] leading-relaxed text-neutral-300"
         />
       </div>
     </div>
@@ -176,7 +176,7 @@ export function ExternalFileConflictBanner({
     <>
       <div
         role="alert"
-        className="absolute left-1/2 top-14 z-[94] flex max-w-[calc(100vw-32px)] -translate-x-1/2 flex-wrap items-center gap-3 rounded-md border border-amber-400/30 bg-amber-950/95 px-4 py-2 text-[12px] font-medium text-amber-50 shadow-lg"
+        className="absolute left-1/2 top-14 z-94 flex max-w-[calc(100vw-32px)] -translate-x-1/2 flex-wrap items-center gap-3 rounded-md border border-amber-400/30 bg-amber-950/95 px-4 py-2 text-[12px] font-medium text-amber-50 shadow-lg"
       >
         <span>
           {conflict
@@ -201,7 +201,7 @@ export function ExternalFileConflictBanner({
         <button
           type="button"
           onClick={() => void coordinator.useExternalFile()}
-          className="rounded border border-amber-200/30 px-2 py-1"
+          className="rounded-sm border border-amber-200/30 px-2 py-1"
         >
           Discard Studio edits and reload file
         </button>
@@ -217,7 +217,7 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded border border-red-300/40 px-2 py-1 text-red-100"
+            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with Studio version
           </button>
@@ -234,7 +234,7 @@ export function ExternalFileConflictBanner({
                 void coordinator.keepStudioFile();
               }
             }}
-            className="rounded border border-red-300/40 px-2 py-1 text-red-100"
+            className="rounded-sm border border-red-300/40 px-2 py-1 text-red-100"
           >
             Overwrite file with recovered Studio draft
           </button>

package/src/components/LintModal.tsx

@@ -58,7 +58,7 @@ export function LintModal({
 
   return (
     <div
-      className="hf-backdrop-in fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm"
+      className="hf-backdrop-in fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs"
       onClick={requestClose}
     >
       <div
@@ -67,7 +67,7 @@ export function LintModal({
         aria-modal="true"
         aria-label={title}
         tabIndex={-1}
-        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden outline-none"
+        className="bg-neutral-950 border border-neutral-800 rounded-xl shadow-2xl w-full max-w-xl max-h-[80vh] flex flex-col overflow-hidden outline-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Header */}
@@ -130,20 +130,13 @@ export function LintModal({
           {errors.map((f, i) => (
             <div key={`e-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
               <div className="flex items-start gap-2">
-                <WarningIcon
-                  size={14}
-                  className="text-red-400 flex-shrink-0 mt-0.5"
-                  weight="fill"
-                />
+                <WarningIcon size={14} className="text-red-400 shrink-0 mt-0.5" weight="fill" />
                 <div className="min-w-0">
                   <p className="text-sm text-neutral-200">{f.message}</p>
                   {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
                   {f.fixHint && (
                     <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon
-                        size={10}
-                        className="text-studio-accent flex-shrink-0 mt-0.5"
-                      />
+                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
                       <p className="text-xs text-studio-accent">{f.fixHint}</p>
                     </div>
                   )}
@@ -154,16 +147,13 @@ export function LintModal({
           {warnings.map((f, i) => (
             <div key={`w-${i}`} className="py-3 border-b border-neutral-800/50 last:border-0">
               <div className="flex items-start gap-2">
-                <WarningIcon size={14} className="text-amber-400 flex-shrink-0 mt-0.5" />
+                <WarningIcon size={14} className="text-amber-400 shrink-0 mt-0.5" />
                 <div className="min-w-0">
                   <p className="text-sm text-neutral-300">{f.message}</p>
                   {f.file && <p className="text-xs text-neutral-600 font-mono mt-0.5">{f.file}</p>}
                   {f.fixHint && (
                     <div className="flex items-start gap-1 mt-1.5">
-                      <CaretRightIcon
-                        size={10}
-                        className="text-studio-accent flex-shrink-0 mt-0.5"
-                      />
+                      <CaretRightIcon size={10} className="text-studio-accent shrink-0 mt-0.5" />
                       <p className="text-xs text-studio-accent">{f.fixHint}</p>
                     </div>
                   )}

package/src/components/MediaPreview.tsx

@@ -45,7 +45,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
           src={serveUrl}
           alt={name}
           onError={setFailed}
-          className="max-w-full max-h-[70%] object-contain rounded border border-neutral-800"
+          className="max-w-full max-h-[70%] object-contain rounded-sm border border-neutral-800"
         />
         <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
       </div>
@@ -59,7 +59,7 @@ export function MediaPreview({ projectId, filePath }: { projectId: string; fileP
           src={serveUrl}
           controls
           onError={setFailed}
-          className="max-w-full max-h-[70%] rounded border border-neutral-800"
+          className="max-w-full max-h-[70%] rounded-sm border border-neutral-800"
         />
         <span className="mt-3 text-[11px] text-neutral-500 font-mono">{filePath}</span>
       </div>

package/src/components/SaveQueuePausedBanner.tsx

@@ -8,14 +8,14 @@ interface SaveQueuePausedBannerProps {
 export function SaveQueuePausedBanner({ message, onRetry }: SaveQueuePausedBannerProps) {
   return (
     <div
-      className="hf-backdrop-in absolute left-1/2 top-14 z-[92] flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-red-500/30 bg-red-950/85 px-4 py-2 text-[12px] font-medium text-red-100 shadow-lg shadow-black/30"
+      className="hf-backdrop-in absolute left-1/2 top-14 z-92 flex max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-3 rounded-md border border-red-500/30 bg-red-950/85 px-4 py-2 text-[12px] font-medium text-red-100 shadow-lg shadow-black/30"
       role="alert"
     >
       <span>{message}</span>
       <button
         type="button"
         onClick={onRetry}
-        className="rounded border border-red-300/20 px-2 py-1 text-[11px] text-red-100 transition-colors hover:bg-red-400/10 active:scale-[0.98]"
+        className="rounded-sm border border-red-300/20 px-2 py-1 text-[11px] text-red-100 transition-colors hover:bg-red-400/10 active:scale-[0.98]"
       >
         Retry saving
       </button>

package/src/components/StudioHeader.tsx

@@ -1,9 +1,8 @@
-import { useRef, type MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
 import { getHistoryShortcutLabel } from "../utils/studioHelpers";
 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";
 
@@ -139,63 +138,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?
  *
@@ -232,7 +174,7 @@ 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-neutral-900 border-b border-neutral-800 shrink-0">
       {/* Left: logo + project name */}
       <div className="flex items-center gap-3">
         <HyperframesLogo />
@@ -241,8 +183,6 @@ export function StudioHeader({
         </span>
         <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
       </div>
-      {/* Center: storyboard / preview toggle */}
-      <ViewModeToggle />
       {/* Right: toolbar buttons */}
       <div className="flex items-center gap-1.5">
         <Tooltip

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}

package/src/components/StudioRightPanel.tsx

@@ -347,7 +347,7 @@ export function StudioRightPanel({
         aria-label="Resize inspector panel"
         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("right", e)}
         onPointerMove={handlePanelResizeMove}
@@ -364,12 +364,12 @@ export function StudioRightPanel({
         {/* Asymmetric hit zone: 8px into the preview's p-2 gutter (the only dead
             space), the 3px seam, 2px into the card. Stops short of the 24px WCAG
             2.5.8 target because the next pixel each way is live. */}
-        <div className="absolute inset-y-0 -left-[8px] w-[13px]" />
+        <div className="absolute inset-y-0 left-[-8px] 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>
       <div
-        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
+        className="flex min-w-0 shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (
@@ -444,7 +444,7 @@ export function StudioRightPanel({
                     role="separator"
                     aria-label="Resize Layers and Design panes"
                     aria-orientation="horizontal"
-                    className="group flex h-2 flex-shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
+                    className="group flex h-2 shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
                     style={{ touchAction: "none" }}
                     onPointerDown={handleInspectorSplitResizeStart}
                     onPointerMove={handleInspectorSplitResizeMove}

package/src/components/StudioToast.tsx

@@ -30,7 +30,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
         }}
       >
         <span
-          className={`min-w-0 break-words leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
+          className={`min-w-0 wrap-break-word leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
         >
           {message}
         </span>
@@ -38,7 +38,7 @@ export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastPr
           <button
             type="button"
             onClick={onDismiss}
-            className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
+            className="flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
             aria-label="Dismiss"
           >
             <svg

package/src/components/TimelineToolbar.tsx

@@ -189,8 +189,8 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
   // CapCut-flat icon buttons: no per-button border/box chrome — a transparent
   // 28px hit area with a subtle rounded hover wash, consistent 16px glyphs.
   const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
-  const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200 active:scale-[0.98]`;
-  const flatActive = `${flatBtn} bg-white/[0.08] text-neutral-100 active:scale-[0.98]`;
+  const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
+  const flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
   const flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;
 
   return (
@@ -297,7 +297,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={
                 !onToggleKeyframe
                   ? flatDisabled
-                  : `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
+                  : `${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
                       keyframeState === "active"
                         ? "text-studio-accent"
                         : keyframeState === "inactive"
@@ -332,7 +332,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
               aria-label="Auto-record manual edits as keyframes"
               aria-pressed={autoKeyframeEnabled}
-              className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
+              className={`${flatBtn} active:scale-[0.98] hover:bg-white/6 ${
                 autoKeyframeEnabled
                   ? "text-red-400 hover:text-red-300"
                   : "text-neutral-600 hover:text-neutral-400"
@@ -429,7 +429,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
                   }}
                   className={
                     canAdd
-                      ? `${flatBtn} text-neutral-400 hover:bg-white/[0.06] hover:text-[#22c55e] active:scale-[0.98]`
+                      ? `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-[#22c55e] active:scale-[0.98]`
                       : flatDisabled
                   }
                 >
@@ -467,7 +467,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 thumbnailsVisible
                   ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
               }`}
             >
               <Image size={16} aria-hidden="true" />
@@ -480,7 +480,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
                 zoomMode === "fit"
                   ? "bg-studio-accent/10 text-studio-accent"
-                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+                  : "text-neutral-400 hover:bg-white/6 hover:text-neutral-200"
               }`}
             >
               Fit