@hyperframes/studio 0.8.49 → 0.8.51

package/src/components/sidebar/AssetCard.tsx

@@ -30,7 +30,7 @@ function CopyChip({ feedback, asset }: { feedback: CopyFeedback; asset: string }
   return (
     <span
       role="status"
-      className={`flex-shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+      className={`shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
         feedback.ok ? "text-panel-accent bg-panel-accent/10" : "text-red-400 bg-red-500/10"
       }`}
     >
@@ -223,12 +223,12 @@ export function AssetCard({
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
         onPointerEnter={() => setHovered(true)}
         onPointerLeave={() => setHovered(false)}
-        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors outline-none focus-visible:bg-neutral-800/60 ${
+        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${
           isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
         }`}
       >
         {/* Thumbnail */}
-        <div className="w-full aspect-video rounded overflow-hidden bg-neutral-900 relative">
+        <div className="w-full aspect-video rounded-sm overflow-hidden bg-neutral-900 relative">
           {isImage && !imgError && (
             <img
               src={serveUrl}
@@ -261,14 +261,14 @@ export function AssetCard({
 
           {/* "Added" badge — top-left */}
           {used && (
-            <span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-1">
+            <span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-1">
               Added
             </span>
           )}
 
           {/* Duration badge — top-right, media only */}
           {durationLabel && (
-            <span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-2 tabular-nums">
+            <span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded-sm bg-neutral-950/80 text-panel-text-2 tabular-nums">
               {durationLabel}
             </span>
           )}
@@ -348,13 +348,13 @@ export function FontRow({
         }}
         onDragStart={(e) => writeAssetDragData(e, asset)}
         onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
-        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-none focus-visible:bg-neutral-800/60 ${
+        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors outline-hidden focus-visible:bg-neutral-800/60 ${
           isCopied
             ? "bg-studio-accent/10 border-l-2 border-studio-accent"
             : "border-l-2 border-transparent hover:bg-neutral-800/50"
         }`}
       >
-        <div className="w-[50px] h-[32px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 flex items-center justify-center">
+        <div className="w-[50px] h-[32px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 flex items-center justify-center">
           <span className="text-[9px] font-medium text-neutral-700">{extension}</span>
         </div>
         <div className="min-w-0 flex-1">
@@ -366,7 +366,7 @@ export function FontRow({
           <div className="flex items-center gap-1.5">
             <span className="text-[10px] text-neutral-600 truncate">{extension}</span>
             {used && (
-              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm">
                 in use
               </span>
             )}

package/src/components/sidebar/AssetContextMenu.tsx

@@ -95,11 +95,11 @@ export function ContextMenu({
   }, [renameDraft, asset, onRename, onClose]);
 
   const itemCls =
-    "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-none active:bg-neutral-700/70 transition-colors";
+    "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden active:bg-neutral-700/70 transition-colors";
 
   return (
     <div
-      className="fixed inset-0 z-[200]"
+      className="fixed inset-0 z-200"
       onClick={onClose}
       onContextMenu={(e) => {
         e.preventDefault();
@@ -181,19 +181,19 @@ export function ContextMenu({
                 }
               }}
               aria-label={`Rename ${filename(asset)}`}
-              className="w-full bg-neutral-800 border border-neutral-600 rounded px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-none"
+              className="w-full bg-neutral-800 border border-neutral-600 rounded-sm px-1.5 py-1 text-[11px] text-white focus:border-studio-accent/60 focus:outline-hidden"
             />
             {renameError && <span className="text-[10px] text-red-400">{renameError}</span>}
             <div className="flex items-center justify-end gap-1">
               <button
                 onClick={() => setMode("menu")}
-                className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+                className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
               >
                 Cancel
               </button>
               <button
                 onClick={commitRename}
-                className="px-2 py-0.5 text-[10px] rounded bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors"
+                className="px-2 py-0.5 text-[10px] rounded-sm bg-studio-accent/80 hover:bg-studio-accent text-white transition-colors"
               >
                 Rename
               </button>
@@ -217,16 +217,16 @@ function DeleteConfirm({
   return (
     <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
       <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
-      <div className="flex items-center gap-1 flex-shrink-0">
+      <div className="flex items-center gap-1 shrink-0">
         <button
           onClick={onConfirm}
-          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
+          className="px-2 py-0.5 text-[10px] rounded-sm bg-red-600 text-white hover:bg-red-500 active:bg-red-700 transition-colors"
         >
           Delete
         </button>
         <button
           onClick={onCancel}
-          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
+          className="px-2 py-0.5 text-[10px] rounded-sm text-neutral-400 hover:text-neutral-200 transition-colors"
         >
           Cancel
         </button>

package/src/components/sidebar/AssetsTab.tsx

@@ -331,7 +331,7 @@ export const AssetsTab = memo(function AssetsTab({
       : [activeFilter as MediaCategory].filter((c) => categorized[c].length > 0);
   return (
     <div
-      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/[0.05]" : ""}`}
+      className={`flex-1 flex flex-col min-h-0 transition-colors ${dragOver ? "bg-studio-accent/5" : ""}`}
       onDragOver={(e) => {
         e.preventDefault();
         setDragOver(true);
@@ -340,7 +340,7 @@ export const AssetsTab = memo(function AssetsTab({
       onDrop={handleDrop}
     >
       {/* Header — matches design panel Section pattern */}
-      <div className="px-4 pt-2.5 pb-1.5 flex-shrink-0">
+      <div className="px-4 pt-2.5 pb-1.5 shrink-0">
         {/* Scope toggle */}
         <div className="flex gap-1 mb-2.5 p-0.5 rounded-md bg-panel-input">
           {(["local", "global"] as const).map((m) => (

package/src/components/sidebar/AudioRow.tsx

@@ -227,9 +227,9 @@ export function AudioRow({
           e.preventDefault();
           setContextMenu({ x: e.clientX, y: e.clientY });
         }}
-        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-none focus-visible:bg-neutral-800/60 ${
+        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-colors cursor-pointer outline-hidden focus-visible:bg-neutral-800/60 ${
           playing
-            ? "bg-panel-accent/[0.06]"
+            ? "bg-panel-accent/6"
             : isCopied
               ? "bg-panel-accent/10"
               : "hover:bg-panel-surface-hover"
@@ -238,7 +238,7 @@ export function AudioRow({
         <button
           aria-label={playing ? `Pause preview of ${name}` : `Play preview of ${name}`}
           aria-pressed={playing}
-          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
+          className={`w-7 h-7 rounded-md shrink-0 flex items-center justify-center transition-colors active:scale-[0.95] ${
             playing
               ? "bg-panel-accent/15 text-panel-accent"
               : "text-panel-text-5 group-hover:text-panel-text-3"
@@ -267,20 +267,20 @@ export function AudioRow({
               {name}
             </span>
             {!playing && (
-              <span className="text-[11px] text-panel-text-5 flex-shrink-0">
+              <span className="text-[11px] text-panel-text-5 shrink-0">
                 {meta?.duration ? `${meta.duration}s · ` : ""}
                 {subtype}
               </span>
             )}
             {used && (
-              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded flex-shrink-0">
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded-sm shrink-0">
                 in use
               </span>
             )}
             {(isCopied || copyFailed) && (
               <span
                 role="status"
-                className={`flex-shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
+                className={`shrink-0 text-[9px] font-medium px-1.5 py-px rounded ${
                   copyFailed ? "text-red-400 bg-red-500/10" : "text-panel-accent bg-panel-accent/10"
                 }`}
               >

package/src/components/sidebar/BlocksTab.tsx

@@ -49,7 +49,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
   return (
     <div className="flex flex-col flex-1 min-h-0">
       {/* Search */}
-      <div className="px-3 pt-2 pb-1 flex-shrink-0">
+      <div className="px-3 pt-2 pb-1 shrink-0">
         <SearchInput
           value={search}
           onChange={(e) => setSearch(e.target.value)}
@@ -59,7 +59,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
       </div>
 
       {/* Category pills */}
-      <div className="px-3 pt-1 pb-2 flex-shrink-0 overflow-x-auto">
+      <div className="px-3 pt-1 pb-2 shrink-0 overflow-x-auto">
         <div className="flex gap-1">
           <CategoryPill label="All" active={category === null} onClick={() => setCategory(null)} />
           {BLOCK_CATEGORIES.map((cat) => (
@@ -151,7 +151,7 @@ function CategoryPill({
       type="button"
       onClick={onClick}
       aria-pressed={active}
-      className={`flex-shrink-0 px-2 py-1 rounded-full text-[10px] font-medium transition-colors active:scale-[0.98] ${
+      className={`shrink-0 px-2 py-1 rounded-full text-[10px] font-medium transition-colors active:scale-[0.98] ${
         active
           ? colors
             ? `${colors.bg} ${colors.text}`
@@ -474,12 +474,12 @@ function BlockCard({
         {/* Badges */}
         <div className="absolute top-1 right-1 flex items-center gap-0.5 pointer-events-none">
           {needsWebGL && (
-            <span className="px-1 py-px rounded text-[7px] font-semibold text-purple-300 bg-purple-900/70">
+            <span className="px-1 py-px rounded-sm text-[7px] font-semibold text-purple-300 bg-purple-900/70">
               WebGL
             </span>
           )}
           {duration != null && (
-            <span className="px-1 py-px rounded text-[8px] font-medium text-white/80 bg-black/50">
+            <span className="px-1 py-px rounded-sm text-[8px] font-medium text-white/80 bg-black/50">
               {duration}s
             </span>
           )}
@@ -492,7 +492,7 @@ function BlockCard({
           {title}
         </div>
         <div className="flex items-center gap-1 mt-0.5">
-          <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${colors.dot}`} />
+          <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${colors.dot}`} />
           <span className={`text-[8px] ${colors.text}`}>
             {BLOCK_CATEGORIES.find((c) => c.id === category)?.label}
           </span>

package/src/components/sidebar/CompositionsTab.tsx

@@ -238,13 +238,13 @@ function CompCard({
       }}
       onPointerEnter={handleEnter}
       onPointerLeave={handleLeave}
-      className={`group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-none focus-visible:bg-neutral-800/60 ${
+      className={`group/card w-full select-none text-left px-2 py-1.5 flex items-center gap-2.5 transition-colors cursor-grab active:cursor-grabbing outline-hidden focus-visible:bg-neutral-800/60 ${
         isActive
           ? "bg-studio-accent/10 border-l-2 border-studio-accent"
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+      <div className="w-20 h-[45px] rounded-sm overflow-hidden bg-neutral-900 shrink-0 relative">
         {thumbnailFailed ? (
           <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600">
             Preview unavailable
@@ -314,7 +314,7 @@ function CompCard({
           {lintInfo && lintInfo.count > 0 && (
             <span
               aria-label={`${lintInfo.count} lint finding${lintInfo.count === 1 ? "" : "s"}`}
-              className="flex-shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400"
+              className="shrink-0 min-w-[16px] text-center rounded-full bg-amber-500/20 px-1 text-[8px] font-bold text-amber-400"
             >
               {lintInfo.count}
             </span>
@@ -331,7 +331,7 @@ function CompCard({
             event.stopPropagation();
             onAddToTimeline();
           }}
-          className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
+          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-sm text-neutral-600 opacity-0 transition-[color,background-color,opacity] hover:bg-neutral-800 hover:text-studio-accent group-hover/card:opacity-100 group-focus-within/card:opacity-100 focus:opacity-100"
         >
           <span aria-hidden="true">+</span>
         </button>
@@ -349,7 +349,7 @@ function CompCard({
             // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
             // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
             // so the card row already has the room.
-            className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
+            className={`flex h-6 w-6 shrink-0 items-center justify-center rounded transition-colors ${
               isRendering
                 ? "text-neutral-600 cursor-not-allowed"
                 : "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"

package/src/components/sidebar/GlobalAssetsView.tsx

@@ -80,7 +80,7 @@ export function GlobalAssetsView({ searchQuery }: { searchQuery: string }) {
           className="px-4 py-1.5 flex items-center gap-2.5 border-l-2 border-transparent hover:bg-neutral-800/50"
           title={`${row.id} · ${row.type}`}
         >
-          <span className="text-[9px] font-medium text-neutral-600 uppercase w-10 flex-shrink-0">
+          <span className="text-[9px] font-medium text-neutral-600 uppercase w-10 shrink-0">
             {row.type}
           </span>
           <span className="text-xs text-panel-text-1 truncate">{row.label}</span>

package/src/components/sidebar/LeftSidebar.lintBadge.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { LeftSidebar } from "./LeftSidebar";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+(
+  window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
+).happyDOM.settings.disableIframePageLoading = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function renderBadge(lintHasError: boolean): HTMLElement | null {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <LeftSidebar
+        projectId="demo"
+        compositions={["index.html"]}
+        assets={[]}
+        fileTree={["index.html"]}
+        activeComposition={null}
+        onSelectComposition={vi.fn()}
+        onLint={vi.fn()}
+        lintFindingCount={2}
+        lintHasError={lintHasError}
+      />,
+    );
+  });
+  return host.querySelector<HTMLElement>("[data-lint-badge]");
+}
+
+describe("LeftSidebar lint badge", () => {
+  it("pulses, and stops for reduced motion, while an error finding exists", () => {
+    const badge = renderBadge(true);
+    expect(badge?.dataset.lintBadge).toBe("error");
+    expect(badge?.className).toContain("animate-pulse");
+    expect(badge?.className).toContain("motion-reduce:animate-none");
+    expect(badge?.textContent).toContain("including errors");
+  });
+
+  it("stays still when the findings are warnings only", () => {
+    const badge = renderBadge(false);
+    expect(badge?.dataset.lintBadge).toBe("warning");
+    expect(badge?.className).not.toContain("animate-pulse");
+    expect(badge?.textContent).toContain("warnings only");
+  });
+});

package/src/components/sidebar/LeftSidebar.tsx

@@ -74,6 +74,7 @@ interface LeftSidebarProps {
   onLint?: () => void;
   linting?: boolean;
   lintFindingCount?: number;
+  lintHasError?: boolean;
   lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
   onToggleCollapse?: () => void;
   onAddBlock?: (blockName: string) => void | Promise<void>;
@@ -108,6 +109,7 @@ export const LeftSidebar = memo(
       onLint,
       linting,
       lintFindingCount,
+      lintHasError,
       lintFindingsByFile,
       onToggleCollapse,
       onAddBlock,
@@ -165,7 +167,7 @@ export const LeftSidebar = memo(
         ) : (
           <>
             {/* Tabs — Code first */}
-            <div className="border-b border-neutral-800/50 px-3 py-3 flex-shrink-0">
+            <div className="border-b border-neutral-800/50 px-3 py-3 shrink-0">
               <div className="flex items-center gap-2">
                 <div
                   ref={tablistRef}
@@ -200,7 +202,7 @@ export const LeftSidebar = memo(
                   <button
                     type="button"
                     onClick={onToggleCollapse}
-                    className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
+                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent text-neutral-500 transition-colors hover:border-neutral-800 hover:bg-neutral-900 hover:text-neutral-300"
                     title="Hide sidebar"
                     aria-label="Hide sidebar"
                   >
@@ -262,7 +264,7 @@ export const LeftSidebar = memo(
             {tab === "code" && (
               <div id="sidebar-panel-code" role="tabpanel" className="flex flex-1 min-h-0">
                 {(fileProp?.length ?? 0) > 0 && (
-                  <div className="w-[160px] flex-shrink-0 border-r border-neutral-800 overflow-y-auto">
+                  <div className="w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto">
                     <FileTree
                       files={fileProp ?? []}
                       activeFile={editingFile?.path ?? null}
@@ -300,7 +302,7 @@ export const LeftSidebar = memo(
 
             {/* Lint button pinned at the bottom */}
             {onLint && (
-              <div className="border-t border-neutral-800 p-2 flex-shrink-0">
+              <div className="border-t border-neutral-800 p-2 shrink-0">
                 <button
                   onClick={onLint}
                   disabled={linting}
@@ -319,8 +321,20 @@ export const LeftSidebar = memo(
                   </svg>
                   {linting ? "Linting…" : "Lint"}
                   {!linting && lintFindingCount != null && lintFindingCount > 0 && (
-                    <span className="ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400">
+                    <span
+                      data-lint-badge={lintHasError ? "error" : "warning"}
+                      className={
+                        lintHasError
+                          ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none"
+                          : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400"
+                      }
+                    >
                       {lintFindingCount}
+                      <span className="sr-only">
+                        {lintHasError
+                          ? " lint findings, including errors"
+                          : " lint findings, warnings only"}
+                      </span>
                     </span>
                   )}
                 </button>

package/src/components/sidebar/PromptPreviewModal.tsx

@@ -46,7 +46,7 @@ export function PromptPreviewModal({
 
   return (
     <div
-      className={`fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm transition-opacity duration-150 ease-out ${
+      className={`fixed inset-0 z-100 flex items-center justify-center bg-black/60 backdrop-blur-xs transition-opacity duration-150 ease-out ${
         entered ? "opacity-100" : "opacity-0"
       }`}
       onClick={requestClose}
@@ -57,7 +57,7 @@ export function PromptPreviewModal({
         aria-modal="true"
         aria-label={`Ask agent — ${title}`}
         tabIndex={-1}
-        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-none"
+        className="w-[560px] max-h-[80vh] flex flex-col rounded-2xl border border-neutral-800 bg-neutral-950 shadow-2xl outline-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between px-5 py-4 border-b border-neutral-800/60">
@@ -96,7 +96,7 @@ export function PromptPreviewModal({
             onKeyDown={(e) => {
               if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) void handleCopy();
             }}
-            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-none focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
+            className="w-full min-h-[240px] text-[11px] text-neutral-200 leading-relaxed font-mono bg-neutral-900/60 rounded-lg p-3 border border-neutral-800 resize-y focus:outline-hidden focus:border-studio-accent/60 focus:ring-1 focus:ring-studio-accent/30"
           />
         </div>
         <div className="flex items-center justify-between px-5 py-3 border-t border-neutral-800/60">

package/src/components/ui/Button.test.tsx

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+
+// happy-dom has no CSS engine, so this pins the structure that makes the gap
+// work (children are direct flex items of the gap-bearing button), not the
+// computed pixels. The measured gap is verified in a real browser.
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button } from "./Button";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+function mount(element: React.ReactNode): HTMLButtonElement {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => root?.render(element));
+  const button = host.querySelector("button");
+  if (!button) throw new Error("button did not render");
+  return button;
+}
+
+describe("Button children layout", () => {
+  it("lays label and kbd out as sibling flex items of the gap-bearing button", () => {
+    const button = mount(
+      <Button size="md">
+        <span>Export</span>
+        <kbd>⌘E</kbd>
+      </Button>,
+    );
+
+    expect(button.classList.contains("inline-flex")).toBe(true);
+    expect(button.classList.contains("gap-1.5")).toBe(true);
+    expect(Array.from(button.children).map((child) => child.tagName)).toEqual(["SPAN", "KBD"]);
+  });
+
+  it("puts children next to the icon as direct flex items too", () => {
+    const button = mount(
+      <Button icon={<svg />}>
+        <span>Export</span>
+        <kbd>⌘E</kbd>
+      </Button>,
+    );
+
+    expect(Array.from(button.children).map((child) => child.tagName)).toEqual([
+      "SPAN",
+      "SPAN",
+      "KBD",
+    ]);
+  });
+});

package/src/components/ui/Button.tsx

@@ -84,7 +84,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           // so a wrapping Tooltip can explain WHY they're disabled (A5).
           "disabled:opacity-40 disabled:cursor-not-allowed",
           "select-none cursor-pointer",
-          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
+          "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
           variantStyles[variant],
           sizeStyles[size],
           className,
@@ -108,9 +108,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             />
           </svg>
         ) : icon ? (
-          <span className="flex-shrink-0">{icon}</span>
+          <span className="shrink-0">{icon}</span>
         ) : null}
-        {children && <span>{children}</span>}
+        {children}
       </button>
     );
   },
@@ -144,7 +144,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
           "transition-all duration-press ease-standard",
           "disabled:opacity-40 disabled:cursor-not-allowed",
           "select-none cursor-pointer",
-          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
+          "outline-hidden focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
           variantStyles[variant],
           iconSizeStyles[size],
           className,

package/src/components/ui/SearchInput.tsx

@@ -21,7 +21,7 @@ export function SearchInput({ className = "", ...props }: SearchInputProps) {
         height="12"
         viewBox="0 0 256 256"
         fill="none"
-        className="flex-shrink-0"
+        className="shrink-0"
         aria-hidden="true"
       >
         <circle
@@ -45,7 +45,7 @@ export function SearchInput({ className = "", ...props }: SearchInputProps) {
       </svg>
       <input
         type="text"
-        className="min-w-0 w-full bg-transparent text-[11px] text-panel-text-1 outline-none placeholder:text-panel-text-5"
+        className="min-w-0 w-full bg-transparent text-[11px] text-panel-text-1 outline-hidden placeholder:text-panel-text-5"
         {...props}
       />
     </div>

package/src/components/ui/Tooltip.tsx

@@ -104,7 +104,7 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
       {visible &&
         createPortal(
           <div
-            className="fixed z-[200] pointer-events-none"
+            className="fixed z-200 pointer-events-none"
             style={{
               left: clampedX,
               top: pos.y,

package/src/hooks/appHotkeysDispatch.ts

@@ -46,6 +46,7 @@ export interface HotkeyCallbacks {
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
+  handleDuplicate: () => Promise<boolean>;
   onResetKeyframes: () => boolean;
   onDeleteSelectedKeyframes: () => void;
   onToggleRecording?: () => void;
@@ -127,6 +128,16 @@ export function dispatchModifierKey(
       }
       return true;
     }
+    if (key === "d") {
+      // Always own this key here, even with nothing selected — otherwise the
+      // browser's own Cmd+D (bookmark this page) fires over the editor.
+      event.preventDefault();
+      if (usePlayerStore.getState().selectedElementId) {
+        trackStudioEvent("keyboard_shortcut", { action: "duplicate" });
+        void cb.handleDuplicate();
+      }
+      return true;
+    }
   }
   return false;
 }

package/src/hooks/timelineAudioGroupCreate.ts

@@ -8,7 +8,7 @@
 
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
-import { useExpandedTimelineElements } from "../player/hooks/useExpandedTimelineElements";
+import { useTimelineRowElements } from "../player/hooks/useTimelineRowElements";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { runtimeAudioId } from "../player/lib/timelineElementHelpers";
@@ -272,7 +272,7 @@ export function useAudioGroupCarveAssignment({
   groupId: string,
   groupLabel?: string,
 ) => Promise<void> {
-  const expandedElements = useExpandedTimelineElements();
+  const expandedElements = useTimelineRowElements();
   return useCallback(
     async (clipIds: readonly string[], groupId: string, groupLabel?: string) => {
       if (isRecordingRef?.current) {