@hyperframes/studio 0.8.65 → 0.8.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.65",
+  "version": "0.8.67",
   "description": "",
   "repository": {
     "type": "git",
@@ -51,11 +51,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.65",
-    "@hyperframes/sdk": "0.8.65",
-    "@hyperframes/parsers": "0.8.65",
-    "@hyperframes/core": "0.8.65",
-    "@hyperframes/studio-server": "0.8.65"
+    "@hyperframes/player": "0.8.67",
+    "@hyperframes/core": "0.8.67",
+    "@hyperframes/sdk": "0.8.67",
+    "@hyperframes/studio-server": "0.8.67",
+    "@hyperframes/parsers": "0.8.67"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -71,7 +71,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.65"
+    "@hyperframes/producer": "0.8.67"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/EditorShell.tsx

@@ -286,9 +286,7 @@ function EditorShellBody({
   return (
     <div
       ref={containerRef}
-      // Shell canvas is a step LIGHTER than the near-black panel cards so the
-      // gaps between panels read as visible seams (CapCut-style).
-      className="flex flex-col flex-1 min-h-0 bg-panel-surface"
+      className="flex flex-col flex-1 min-h-0"
       onKeyDown={handleKeyDown}
       tabIndex={-1}
     >

package/src/components/StudioLeftPanels.tsx

@@ -28,7 +28,7 @@ interface StudioLeftPanelsProps {
 
 function PanelColumn({ footer, children }: { footer: ReactNode; children: ReactNode }) {
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
       <div className="flex min-h-0 flex-1 flex-col">{children}</div>
       {footer}
     </div>

package/src/components/dock/Dock.tsx

@@ -16,6 +16,9 @@ import {
 } from "dockview-react";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 import { installDockAccessibility } from "./dockAccessibility";
+import { DockStripActions } from "./DockStripActions";
+import { DockTab } from "./DockTab";
+import { installTabFill } from "./dockTabFill";
 import { addRegisteredPanel, applySideMinimums, buildEditLayout } from "./dockLayout";
 import { DOCK_PANEL_COMPONENT } from "./dockLayoutSchema";
 import { useDockLayoutStore, type DockController, type DockSnapshot } from "./dockLayoutStore";
@@ -150,6 +153,7 @@ function Root({ projectId, children }: { projectId: string | null; children: Rea
       applySideMinimums(api);
       const root = api.groups[0]?.element.closest<HTMLElement>(".hf-dock");
       const disposeAccessibility = root ? installDockAccessibility(api, root) : () => {};
+      const disposeTabFill = root ? installTabFill(api, root) : () => {};
       // The dock spans the window (buildEditLayout sizes against it too); its own box lags a resize.
       const resizeObserver = new ResizeObserver(() => applySideMinimums(api, window.innerWidth));
       if (root) resizeObserver.observe(root);
@@ -189,6 +193,7 @@ function Root({ projectId, children }: { projectId: string | null; children: Rea
         clearTimeout(timer);
         for (const subscription of subscriptions) subscription.dispose();
         disposeAccessibility();
+        disposeTabFill();
         resizeObserver.disconnect();
         useDockLayoutStore.getState().detach();
       };
@@ -202,8 +207,11 @@ function Root({ projectId, children }: { projectId: string | null; children: Rea
         key={projectId ?? ""}
         className="hf-dock flex-1 min-h-0"
         components={COMPONENTS}
+        defaultTabComponent={DockTab}
+        rightHeaderActionsComponent={DockStripActions}
         defaultRenderer="always"
         disableFloatingGroups
+        disableTabsOverflowList
         onReady={onReady}
       />
       {children}

package/src/components/dock/DockStripActions.tsx

@@ -0,0 +1,63 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { CornersIn, CornersOut, DotsThree, X } from "@phosphor-icons/react";
+import type { IDockviewHeaderActionsProps } from "dockview-react";
+import { IconButton, Menu, MenuCheckboxItem, MenuItem, MenuSeparator } from "../ui";
+import { useDockLayoutStore } from "./dockLayoutStore";
+import { PANEL_DEFINITIONS, isPanelId, panelsInZone } from "./panelRegistry";
+
+/** Panel menu, maximise and close group, drawn on the active group's strip only. */
+export function DockStripActions({
+  api,
+  containerApi,
+  panels,
+  isGroupActive,
+}: IDockviewHeaderActionsProps) {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const subscription = containerApi.onDidMaximizedGroupChange(onChange);
+      return () => subscription.dispose();
+    },
+    [containerApi],
+  );
+  const maximized = useSyncExternalStore(subscribe, () => api.isMaximized());
+  const openPanels = useDockLayoutStore((state) => state.openPanels);
+  const togglePanel = useDockLayoutStore((state) => state.togglePanel);
+  const resetLayout = useDockLayoutStore((state) => state.resetLayout);
+  if (!isGroupActive) return null;
+
+  const first = panels.find((panel) => isPanelId(panel.id))?.id;
+  const menuPanels = isPanelId(first) ? panelsInZone(PANEL_DEFINITIONS[first].zone) : [];
+  return (
+    <div className="hf-dock-strip-actions">
+      <Menu
+        align="end"
+        aria-label="Panel menu"
+        trigger={<IconButton size="sm" aria-label="Panel menu" icon={<DotsThree size={16} />} />}
+      >
+        {menuPanels.map((id) => (
+          <MenuCheckboxItem
+            key={id}
+            checked={openPanels.has(id)}
+            onCheckedChange={() => togglePanel(id)}
+          >
+            {PANEL_DEFINITIONS[id].title}
+          </MenuCheckboxItem>
+        ))}
+        <MenuSeparator />
+        <MenuItem onClick={resetLayout}>Reset layout</MenuItem>
+      </Menu>
+      <IconButton
+        size="sm"
+        aria-label={maximized ? "Restore panel" : "Maximize panel"}
+        icon={maximized ? <CornersIn size={16} /> : <CornersOut size={16} />}
+        onClick={() => (maximized ? api.exitMaximized() : api.maximize())}
+      />
+      <IconButton
+        size="sm"
+        aria-label="Close group"
+        icon={<X size={16} />}
+        onClick={() => api.close()}
+      />
+    </div>
+  );
+}

package/src/components/dock/DockTab.tsx

@@ -0,0 +1,68 @@
+import { useCallback, useSyncExternalStore } from "react";
+import {
+  BracketsCurly,
+  ChartBarHorizontal,
+  Code,
+  FilmSlate,
+  Image,
+  Layout,
+  Monitor,
+  Presentation,
+  SlidersHorizontal,
+  SquaresFour,
+  Stack,
+  X,
+  type Icon,
+} from "@phosphor-icons/react";
+import type { IDockviewPanelHeaderProps } from "dockview-react";
+import { isPanelId, type PanelId } from "./panelRegistry";
+
+const TAB_ICONS: Record<PanelId, Icon> = {
+  preview: Monitor,
+  timeline: ChartBarHorizontal,
+  compositions: Layout,
+  assets: Image,
+  code: Code,
+  catalog: SquaresFour,
+  design: SlidersHorizontal,
+  layers: Stack,
+  renders: FilmSlate,
+  variables: BracketsCurly,
+  slideshow: Presentation,
+};
+
+/**
+ * A dock tab. dock.css shows the type icon and close glyph on the shown tab only, keyed on
+ * dockview's own tab class, so they swap in the frame the tab changes rather than a render later.
+ */
+export function DockTab({ api }: IDockviewPanelHeaderProps) {
+  const subscribe = useCallback(
+    (onChange: () => void) => {
+      const subscription = api.onDidTitleChange(onChange);
+      return () => subscription.dispose();
+    },
+    [api],
+  );
+  const title = useSyncExternalStore(subscribe, () => api.title ?? "");
+  const TypeIcon = isPanelId(api.id) ? TAB_ICONS[api.id] : null;
+  return (
+    <div className="hf-dock-tab">
+      {TypeIcon ? <TypeIcon className="hf-dock-tab-icon" size={14} aria-hidden /> : null}
+      <span className="hf-dock-tab-label">{title}</span>
+      {/* Same shape as dockview's own close control: a tab cannot hold a focusable button. */}
+      <div
+        role="button"
+        tabIndex={-1}
+        aria-label={`Close ${title}`}
+        className="hf-dock-tab-close"
+        onPointerDown={(event) => event.stopPropagation()}
+        onClick={(event) => {
+          event.stopPropagation();
+          api.close();
+        }}
+      >
+        <X size={12} aria-hidden />
+      </div>
+    </div>
+  );
+}

package/src/components/dock/DockTabs.test.tsx

@@ -0,0 +1,255 @@
+// @vitest-environment happy-dom
+
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { Dock } from "./Dock";
+import { useDockLayoutStore } from "./dockLayoutStore";
+import { PANEL_IDS, type PanelId } from "./panelRegistry";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom never resizes anything; a test calls `resizeAll` to stand in for a real resize.
+const liveObservers = new Set<ResizeObserverStub>();
+class ResizeObserverStub {
+  readonly callback: () => void;
+  constructor(callback: () => void) {
+    this.callback = callback;
+    liveObservers.add(this);
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {
+    liveObservers.delete(this);
+  }
+}
+const resizeAll = () => {
+  for (const observer of liveObservers) observer.callback();
+};
+(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = ResizeObserverStub;
+
+// happy-dom has no layout: a tab sits at 100px per position and is 90px wide.
+const TAB_STEP = 100;
+const TAB_WIDTH = 90;
+const tabIndex = (element: HTMLElement) =>
+  element.classList.contains("dv-tab")
+    ? [...(element.parentElement?.querySelectorAll(":scope > .dv-tab") ?? [])].indexOf(element)
+    : -1;
+const layout = {
+  offsetLeft: {
+    get(this: HTMLElement) {
+      return Math.max(tabIndex(this), 0) * TAB_STEP;
+    },
+  },
+  offsetWidth: {
+    get(this: HTMLElement) {
+      return tabIndex(this) >= 0 ? TAB_WIDTH : 0;
+    },
+  },
+};
+const original = {
+  offsetLeft: Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetLeft"),
+  offsetWidth: Object.getOwnPropertyDescriptor(HTMLElement.prototype, "offsetWidth"),
+};
+beforeAll(() => {
+  // The shown-tab-only rule lives in dock.css; apply it so computed display is what a user sees.
+  const style = document.createElement("style");
+  style.textContent = readFileSync(path.join(import.meta.dirname, "dock.css"), "utf8").replace(
+    /@import[^;]*;/,
+    "",
+  );
+  document.head.append(style);
+  Object.defineProperties(HTMLElement.prototype, {
+    offsetLeft: { ...layout.offsetLeft, configurable: true },
+    offsetWidth: { ...layout.offsetWidth, configurable: true },
+  });
+});
+afterAll(() => {
+  for (const [key, descriptor] of Object.entries(original)) {
+    if (descriptor) Object.defineProperty(HTMLElement.prototype, key, descriptor);
+  }
+});
+
+let root: Root | null = null;
+let host: HTMLElement;
+
+beforeEach(() => {
+  localStorage.clear();
+  vi.useFakeTimers();
+  host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => {
+    root?.render(
+      <Dock.Root projectId="p1">
+        {PANEL_IDS.map((id) => (
+          <Dock.Panel key={id} id={id}>
+            <div>{id}</div>
+          </Dock.Panel>
+        ))}
+      </Dock.Root>,
+    );
+  });
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  vi.useRealTimers();
+});
+
+const tab = (id: PanelId) => host.querySelector<HTMLElement>(`[data-tab-panel-id="${id}"]`);
+const stripOf = (id: PanelId) => tab(id)?.closest<HTMLElement>(".dv-tabs-container");
+const groupOf = (id: PanelId) => tab(id)?.closest<HTMLElement>(".dv-groupview");
+const shows = (id: PanelId, part: "icon" | "close") => {
+  const element = tab(id)?.querySelector(`.hf-dock-tab-${part}`);
+  return element ? getComputedStyle(element).display !== "none" : false;
+};
+
+async function activate(id: PanelId) {
+  // dockview settles the active panel on a microtask; `act(async)` waits for it.
+  await act(async () => useDockLayoutStore.getState().activatePanel(id));
+}
+
+describe("dock tabs", () => {
+  it("draw the type icon and close glyph on the shown tab only", () => {
+    for (const id of ["design", "compositions"] as const) {
+      expect(shows(id, "icon")).toBe(true);
+      expect(shows(id, "close")).toBe(true);
+    }
+    for (const id of ["layers", "renders", "variables", "assets", "code", "catalog"] as const) {
+      expect(shows(id, "icon")).toBe(false);
+      expect(shows(id, "close")).toBe(false);
+    }
+  });
+
+  it("move the icon to the newly shown tab and drop it from the old one", async () => {
+    await activate("layers");
+    expect(shows("layers", "icon")).toBe(true);
+    expect(shows("design", "icon")).toBe(false);
+    expect(shows("design", "close")).toBe(false);
+  });
+
+  it("name the close control after the panel, and close only that panel", async () => {
+    const close = tab("design")?.querySelector<HTMLElement>(".hf-dock-tab-close");
+    expect(close?.getAttribute("aria-label")).toBe("Close Design");
+    await act(async () => close?.click());
+    expect(useDockLayoutStore.getState().openPanels.has("design")).toBe(false);
+    expect(useDockLayoutStore.getState().openPanels.has("layers")).toBe(true);
+  });
+});
+
+describe("dock strip actions", () => {
+  const groupsWithActions = () =>
+    [...host.querySelectorAll(".hf-dock-strip-actions")].map((actions) =>
+      actions.closest(".dv-groupview"),
+    );
+
+  it("sit on the active group's strip only, and follow the active group", async () => {
+    await activate("design");
+    expect(groupsWithActions()).toEqual([groupOf("design")]);
+    const labels = [...host.querySelectorAll(".hf-dock-strip-actions button")].map((button) =>
+      button.getAttribute("aria-label"),
+    );
+    expect(labels).toEqual(["Panel menu", "Maximize panel", "Close group"]);
+    await activate("assets");
+    expect(groupsWithActions()).toEqual([groupOf("assets")]);
+  });
+});
+
+describe("dock tab fill", () => {
+  it("is one element per strip, under the shown tab, and follows a switch", async () => {
+    for (const strip of host.querySelectorAll(".dv-tabs-container")) {
+      expect(strip.querySelectorAll(".hf-dock-tab-fill")).toHaveLength(1);
+    }
+    const fill = () => stripOf("design")?.querySelector<HTMLElement>(".hf-dock-tab-fill");
+    expect(fill()?.style.transform).toBe("translateX(0px)");
+    expect(fill()?.style.width).toBe(`${TAB_WIDTH}px`);
+    await activate("renders");
+    expect(stripOf("design")?.querySelectorAll(".hf-dock-tab-fill")).toHaveLength(1);
+    expect(fill()?.style.transform).toBe(`translateX(${2 * TAB_STEP}px)`);
+  });
+
+  it("keeps the shown tab whole when its strip narrows, as when the strip's actions appear", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    // The four tabs fit, so the strip is unscrolled; then it narrows to two and a half tabs.
+    strip.scrollLeft = 0;
+    Object.defineProperty(strip, "clientWidth", { value: 1000, configurable: true });
+    act(() => resizeAll());
+    Object.defineProperty(strip, "clientWidth", { value: 250, configurable: true });
+    act(() => resizeAll());
+    expect(strip.scrollLeft).toBe(3 * TAB_STEP + TAB_WIDTH + 1 - 250);
+  });
+
+  it("leaves a strip the user scrolled alone when something else in the dock changes", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    Object.defineProperty(strip, "clientWidth", { value: 250, configurable: true });
+    act(() => resizeAll());
+    // Scrolled back by hand to look at the first tabs, then another group takes focus.
+    strip.scrollLeft = 0;
+    await activate("assets");
+    act(() => resizeAll());
+    expect(strip.scrollLeft).toBe(0);
+  });
+
+  it("keeps a hand scroll through another group being maximised and restored", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    Object.defineProperty(strip, "clientWidth", { value: 250, configurable: true });
+    act(() => resizeAll());
+    strip.scrollLeft = 0;
+    // Hidden while another group is maximised; the browser keeps a hidden strip's scroll.
+    Object.defineProperty(strip, "clientWidth", { value: 0, configurable: true });
+    act(() => resizeAll());
+    Object.defineProperty(strip, "clientWidth", { value: 250, configurable: true });
+    act(() => resizeAll());
+    expect(strip.scrollLeft).toBe(0);
+  });
+
+  it("leaves a hand scroll alone when its strip widens", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    Object.defineProperty(strip, "clientWidth", { value: 150, configurable: true });
+    act(() => resizeAll());
+    strip.scrollLeft = 0;
+    // Wider, but the shown tab is still out of view where the user left the strip.
+    Object.defineProperty(strip, "clientWidth", { value: 200, configurable: true });
+    act(() => resizeAll());
+    expect(strip.scrollLeft).toBe(0);
+  });
+
+  it("reveals the shown tab when its strip comes back narrower than it left", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    strip.scrollLeft = 0;
+    Object.defineProperty(strip, "clientWidth", { value: 1000, configurable: true });
+    act(() => resizeAll());
+    Object.defineProperty(strip, "clientWidth", { value: 0, configurable: true });
+    act(() => resizeAll());
+    Object.defineProperty(strip, "clientWidth", { value: 250, configurable: true });
+    act(() => resizeAll());
+    expect(strip.scrollLeft).toBe(3 * TAB_STEP + TAB_WIDTH + 1 - 250);
+  });
+
+  it("reveals the shown tab when a panel beside it closes and it moves", async () => {
+    const strip = stripOf("design");
+    if (!strip) throw new Error("no design strip");
+    await activate("variables");
+    Object.defineProperty(strip, "clientWidth", { value: 150, configurable: true });
+    act(() => resizeAll());
+    strip.scrollLeft = 0;
+    await act(async () => useDockLayoutStore.getState().togglePanel("design"));
+    // Variables moved from the fourth place to the third; its right edge is at 290.
+    expect(strip.scrollLeft).toBe(2 * TAB_STEP + TAB_WIDTH + 1 - 150);
+  });
+});