@hyperframes/studio 0.8.50 → 0.8.52

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/timelineToolbarStyles.ts

@@ -0,0 +1,5 @@
+// CapCut-flat icon buttons: a transparent 28px hit area with a subtle hover wash.
+export const flatBtn = "flex h-7 w-7 items-center justify-center rounded-md transition-colors";
+export const flatIdle = `${flatBtn} text-neutral-400 hover:bg-white/6 hover:text-neutral-200 active:scale-[0.98]`;
+export const flatActive = `${flatBtn} bg-white/8 text-neutral-100 active:scale-[0.98]`;
+export const flatDisabled = `${flatBtn} text-neutral-700 cursor-not-allowed`;

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

@@ -0,0 +1,252 @@
+// @vitest-environment happy-dom
+
+/**
+ * Button/IconButton: renders every variant and size, then compiles Studio's
+ * real stylesheet against the emitted classes so an unstyled class fails.
+ */
+import { createRequire } from "node:module";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import React, { act } from "react";
+import { compile } from "tailwindcss";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { Button, type ButtonSize, type ButtonVariant } from "./Button";
+import { IconButton } from "./IconButton";
+import { Tab, Tabs, TabsList } from "./Tabs";
+import { cleanupMounted, mountHost } from "./mountHost.testHelpers";
+import { isTypingTarget } from "../../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../../player/lib/playbackShortcuts";
+
+const VARIANTS: ButtonVariant[] = ["primary", "secondary", "danger", "ghost"];
+const SIZES: ButtonSize[] = ["sm", "md", "lg"];
+
+afterEach(cleanupMounted);
+
+function classesOf(host: HTMLElement, selector = "button"): string[] {
+  const el = host.querySelector(selector);
+  if (!el) throw new Error(`nothing matched ${selector}`);
+  return [...el.classList];
+}
+
+// -- the compiled stylesheet, built once for the whole file --
+
+const STYLES_DIR = path.resolve(__dirname, "../../styles");
+const require = createRequire(import.meta.url);
+const TAILWIND_DIR = path.dirname(require.resolve("tailwindcss/package.json"));
+
+async function loadStylesheet(id: string, base: string) {
+  const file = id === "tailwindcss" ? path.join(TAILWIND_DIR, "index.css") : path.resolve(base, id);
+  return { path: file, base: path.dirname(file), content: readFileSync(file, "utf8") };
+}
+
+let compileStudioCss: (candidates: string[]) => string;
+
+beforeAll(async () => {
+  const compiled = await compile(readFileSync(path.join(STYLES_DIR, "studio.css"), "utf8"), {
+    base: STYLES_DIR,
+    loadStylesheet,
+  });
+  compileStudioCss = (candidates) => compiled.build(candidates);
+});
+
+function unresolved(candidates: string[]): string[] {
+  const css = compileStudioCss(candidates);
+  return candidates.filter((candidate) => !css.includes(CSS.escape(candidate)));
+}
+
+describe("Button classes", () => {
+  it("emits only classes Studio's stylesheet defines", () => {
+    const emitted = new Set<string>();
+    for (const variant of VARIANTS) {
+      for (const size of SIZES) {
+        const host = mountHost(
+          <>
+            <Button variant={variant} size={size}>
+              Export
+            </Button>
+            <IconButton variant={variant} size={size} icon={null} aria-label="Zoom out" />
+          </>,
+        );
+        for (const el of host.querySelectorAll("button")) {
+          for (const cls of el.classList) emitted.add(cls);
+        }
+        cleanupMounted();
+      }
+    }
+
+    expect(emitted.size).toBeGreaterThan(20);
+    expect(unresolved([...emitted])).toEqual([]);
+  });
+
+  it("fails an undefined class, so the check above is not vacuous", () => {
+    // Names in a real namespace with no token behind them; the theme file now defines the
+    // `rounded-button` pair this used to name.
+    expect(unresolved(["bg-not-a-token", "text-step-999"])).toEqual([
+      "bg-not-a-token",
+      "text-step-999",
+    ]);
+  });
+
+  it("lets a caller's type size beat the size's own", () => {
+    // The Renders Export case: `size="md"` brings `text-step-12`, the caller
+    // wants 11px, and with plain concatenation both survived into the class
+    // list and the stylesheet's order decided the winner.
+    const classes = classesOf(mountHost(<Button size="md" className="text-step-11" />));
+
+    expect(classes).toContain("text-step-11");
+    expect(classes).not.toContain("text-step-12");
+  });
+
+  it("keeps every interactive look reachable without a pointer", () => {
+    // `data-preview-state` exists so a gallery can show the hover, active and
+    // focus looks. It is worth nothing if it drifts from the real state, so
+    // each pair is matched here in both directions.
+    const realPrefix = {
+      hover: ["enabled:hover:", "hover:"],
+      active: ["enabled:active:", "active:"],
+      focus: ["focus-visible:"],
+    };
+
+    for (const variant of VARIANTS) {
+      const classes = classesOf(mountHost(<Button variant={variant}>Export</Button>));
+      cleanupMounted();
+
+      for (const [state, prefixes] of Object.entries(realPrefix)) {
+        const previewPrefix = `data-[preview-state=${state}]:`;
+        const preview = classes
+          .filter((cls) => cls.startsWith(previewPrefix))
+          .map((cls) => cls.slice(previewPrefix.length));
+        const real = classes
+          .filter((cls) => prefixes.some((prefix) => cls.startsWith(prefix)))
+          .map((cls) => cls.slice(cls.lastIndexOf(":") + 1));
+
+        expect([...preview].sort(), `${variant} ${state}`).toEqual([...real].sort());
+        expect(preview.length, `${variant} ${state}`).toBeGreaterThan(0);
+      }
+    }
+  });
+
+  it("uses a motion token that zeroes itself under reduced motion", () => {
+    // AE4. The zero-duration case lives in the `duration-press` utility itself
+    // (theme.css), not in a `motion-reduce:` class beside it, so a caller
+    // cannot use the token and forget the reduced-motion half. The button's
+    // job is to name the token; the stylesheet's job is the media query.
+    expect(classesOf(mountHost(<Button>Export</Button>))).toContain("duration-press");
+
+    expect(compileStudioCss(["duration-press"])).toMatch(
+      /\.duration-press \{[\s\S]*?prefers-reduced-motion: reduce[\s\S]*?transition-duration: 0ms/,
+    );
+  });
+});
+
+describe("Button behaviour", () => {
+  it("does not fire a disabled click, and says it is disabled", () => {
+    let clicks = 0;
+    const host = mountHost(
+      <Button disabled onClick={() => (clicks += 1)}>
+        Export
+      </Button>,
+    );
+    const button = host.querySelector("button")!;
+
+    act(() => button.click());
+
+    expect(clicks).toBe(0);
+    expect(button.getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("still fires a click while a preview state is forced", () => {
+    let clicks = 0;
+    const host = mountHost(
+      <Button data-preview-state="hover" onClick={() => (clicks += 1)}>
+        Export
+      </Button>,
+    );
+    const button = host.querySelector("button")!;
+
+    act(() => button.click());
+
+    expect(clicks).toBe(1);
+    expect(button.getAttribute("data-preview-state")).toBe("hover");
+  });
+
+  it("is classified by the hotkey selectors the way a plain button is", () => {
+    // KTD13. Both selector lists gate on roles and element names. A primitive
+    // that landed on a different role would leak or swallow global hotkeys with
+    // nothing to notice it.
+    const host = mountHost(
+      <>
+        <button type="button" data-testid="plain">
+          Export
+        </button>
+        <Button data-testid="primitive">Export</Button>
+        <Tabs defaultValue="code">
+          <TabsList aria-label="Sidebar panels">
+            <Tab value="code">Code</Tab>
+          </TabsList>
+        </Tabs>
+      </>,
+    );
+    const plain = host.querySelector('[data-testid="plain"]')!;
+    const button = host.querySelector('[data-testid="primitive"]')!;
+    const tab = host.querySelector('[role="tab"]')!;
+
+    for (const el of [plain, button, tab]) {
+      expect(isTypingTarget(el)).toBe(false);
+      expect(shouldIgnorePlaybackShortcutTarget(el)).toBe(true);
+    }
+  });
+});
+
+describe("disabled states", () => {
+  it("disables a loading Button", () => {
+    const host = mountHost(<Button loading>Save</Button>);
+    const button = host.querySelector("button");
+
+    expect(button?.disabled).toBe(true);
+    expect(button?.getAttribute("aria-disabled")).toBe("true");
+  });
+
+  it("marks a disabled IconButton for assistive tech", () => {
+    const host = mountHost(<IconButton aria-label="Undo" icon={<svg />} disabled />);
+    const button = host.querySelector("button");
+
+    expect(button?.disabled).toBe(true);
+    expect(button?.getAttribute("aria-disabled")).toBe("true");
+  });
+});
+
+describe("children layout", () => {
+  it("keeps label and shortcut direct flex items of the gap-bearing button without an icon", () => {
+    const host = mountHost(
+      <Button size="md">
+        <span>Export</span>
+        <kbd>⌘E</kbd>
+      </Button>,
+    );
+    const button = host.querySelector("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("makes label and shortcut direct flex items so the button gap applies between them", () => {
+    const host = mountHost(
+      <Button icon={<svg />}>
+        <span>Export</span>
+        <kbd>⌘E</kbd>
+      </Button>,
+    );
+    const button = host.querySelector("button");
+
+    expect(Array.from(button?.children ?? []).map((child) => child.tagName)).toEqual([
+      "SPAN",
+      "SPAN",
+      "KBD",
+    ]);
+  });
+});