@hyperframes/studio 0.8.51 → 0.8.53-desktop.0

package/src/components/{StudioRightPanel.tsx → StudioRightPanels.tsx}

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
-import type { StudioRightPanelProps } from "./StudioRightPanel.types";
+import type { StudioRightPanelsProps } from "./StudioRightPanels.types";
 
-export type { StudioRightPanelProps };
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
@@ -9,14 +8,18 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
-import { PanelTabButton } from "./PanelTabButton";
+import { Dock } from "./dock/Dock";
+import { useDockLayoutStore } from "./dock/dockLayoutStore";
 import type { RenderJob } from "./renders/useRenderQueue";
-import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
 import { useSlideshowTabState } from "../hooks/useSlideshowTabState";
+import {
+  useBlockParamsDismissal,
+  useCaptionDesignFocus,
+  useSlideshowDockPanel,
+} from "../hooks/useRightPanelIntents";
 import { DesignPanelPromoteProvider } from "./DesignPanelPromoteProvider";
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
-import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import { usePlayerStore } from "../player";
@@ -27,14 +30,13 @@ import {
 } from "./studioColorGradingScope";
 import { timelineKeysForSelections } from "../utils/studioHelpers";
 import { canHideSelections } from "../utils/timelineInspector";
-import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 import { useRemoveBackground } from "../hooks/useRemoveBackground";
 
 // fallow-ignore-next-line complexity
-export function StudioRightPanel({
-  designPanelActive,
+export function StudioRightPanels({
   activeBlockParams,
   onCloseBlockParams,
+  onDismissBlockParams,
   recordingState,
   recordingDuration,
   onToggleRecording,
@@ -46,20 +48,7 @@ export function StudioRightPanel({
   onToggleElementHidden,
   onAutoGroupCarveSources,
   onAddMediaOverlay,
-}: StudioRightPanelProps) {
-  const {
-    rightWidth,
-    adjustPanelWidth,
-    rightPanelTab,
-    setRightPanelTab,
-    rightInspectorPanes,
-    toggleRightInspectorPane,
-    setExclusiveRightInspectorPane,
-    handlePanelResizeStart,
-    handlePanelResizeMove,
-    handlePanelResizeEnd,
-  } = usePanelLayoutContext();
-
+}: StudioRightPanelsProps) {
   const {
     previewIframeRef,
     projectId,
@@ -154,41 +143,20 @@ export function StudioRightPanel({
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes",
   });
 
-  const {
-    layersPanePercent,
-    splitContainerRef,
-    handleInspectorSplitResizeStart,
-    handleInspectorSplitResizeMove,
-    handleInspectorSplitResizeEnd,
-  } = useInspectorSplitResize();
-
   const renderJobs = renderQueue.jobs as RenderJob[];
-  const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-
+  const slideshowVisible = useDockLayoutStore((state) => state.visiblePanels.has("slideshow"));
   const { isSlideshowComposition, slideshowScenes } = useSlideshowTabState({
     editingFileContent: editingFile?.content,
     previewIframeRef,
     refreshKey,
-    rightPanelTab,
-    setRightPanelTab,
+    slideshowVisible,
   });
-  const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
-  const layersPaneOpen = inspectorTabActive && rightInspectorPanes.layers;
-
-  const handleInspectorPaneButtonClick = (pane: "design" | "layers") => {
-    if (!inspectorTabActive) {
-      setRightPanelTab(pane);
-      return;
-    }
-    // Flat inspector: Layers always renders full-height by itself (see the
-    // render branch below), so the two panes are mutually exclusive here —
-    // otherwise both tabs could show "active" while only one actually shows.
-    if (STUDIO_FLAT_INSPECTOR_ENABLED) {
-      setExclusiveRightInspectorPane(pane);
-      return;
-    }
-    toggleRightInspectorPane(pane);
-  };
+  useSlideshowDockPanel(isSlideshowComposition);
+  useBlockParamsDismissal({
+    hasBlockParams: activeBlockParams != null,
+    onDismiss: onDismissBlockParams,
+  });
+  useCaptionDesignFocus(captionEditMode);
 
   const handleApplyColorGradingScope = useCallback(
     async (scope: ColorGradingScope, value: string | null) =>
@@ -337,153 +305,48 @@ export function StudioRightPanel({
     </DesignPanelPromoteProvider>
   );
 
-  const renderQueuePanel = <RenderQueuePanel />;
+  let designBody = propertyPanel;
+  if (captionEditMode) {
+    designBody = <CaptionPropertyPanel iframeRef={previewIframeRef} />;
+  } else if (activeBlockParams) {
+    designBody = (
+      <BlockParamsPanel
+        blockName={activeBlockParams.blockName}
+        blockTitle={activeBlockParams.blockTitle}
+        params={activeBlockParams.params}
+        compositionPath={activeBlockParams.compositionPath}
+        onClose={onCloseBlockParams ?? (() => {})}
+      />
+    );
+  }
 
   return (
     <>
-      {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
-      <div
-        role="separator"
-        aria-label="Resize inspector panel"
-        aria-orientation="vertical"
-        tabIndex={0}
-        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}
-        onPointerUp={handlePanelResizeEnd}
-        onPointerCancel={handlePanelResizeEnd}
-        onKeyDown={(e) => {
-          if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-          e.preventDefault();
-          // Panel is right-anchored: ArrowLeft grows it, ArrowRight shrinks it.
-          const delta = e.key === "ArrowLeft" ? 16 : -16;
-          adjustPanelWidth("right", delta);
-        }}
-      >
-        {/* 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]" />
-        {/* 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 shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
-        style={{ width: rightWidth }}
+      <Dock.Panel id="design">{designBody}</Dock.Panel>
+      <Dock.Panel id="layers">
+        <LayersPanel />
+      </Dock.Panel>
+      <Dock.Panel
+        id="renders"
+        title={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : undefined}
       >
-        {captionEditMode ? (
-          <CaptionPropertyPanel iframeRef={previewIframeRef} />
-        ) : (
-          <>
-            <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
-              <PanelTabButton
-                label="Design"
-                tooltip="Element styles and properties"
-                active={designPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("design")}
-              />
-              <PanelTabButton
-                label="Layers"
-                tooltip="Composition layer stack"
-                active={layersPaneOpen}
-                onClick={() => handleInspectorPaneButtonClick("layers")}
-              />
-              <PanelTabButton
-                label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
-                tooltip="Render queue and exports"
-                active={rightPanelTab === "renders"}
-                onClick={() => setRightPanelTab("renders")}
-              />
-              {isSlideshowComposition && (
-                <PanelTabButton
-                  label="Slideshow"
-                  tooltip="Slideshow branching editor"
-                  active={rightPanelTab === "slideshow"}
-                  onClick={() => setRightPanelTab("slideshow")}
-                />
-              )}
-              <PanelTabButton
-                label="Variables"
-                tooltip="Template variables — declare, preview with values"
-                active={rightPanelTab === "variables"}
-                onClick={() => setRightPanelTab("variables")}
-              />
-            </div>
-            <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
-              {rightPanelTab === "block-params" && activeBlockParams ? (
-                <BlockParamsPanel
-                  blockName={activeBlockParams.blockName}
-                  blockTitle={activeBlockParams.blockTitle}
-                  params={activeBlockParams.params}
-                  compositionPath={activeBlockParams.compositionPath}
-                  onClose={onCloseBlockParams ?? (() => {})}
-                />
-              ) : rightPanelTab === "slideshow" && isSlideshowComposition ? (
-                <SlideshowPanel
-                  scenes={slideshowScenes}
-                  onPersist={onPersistSlideshow}
-                  onPersistNotes={onPersistSlideshowNotes}
-                />
-              ) : rightPanelTab === "variables" ? (
-                <VariablesPanel
-                  sdkSession={sdkSession}
-                  publishSdkSession={publishSdkSession}
-                  reloadPreview={reloadPreview}
-                  recordEdit={recordEdit}
-                />
-              ) : layersPaneOpen && designPaneOpen && !STUDIO_FLAT_INSPECTOR_ENABLED ? (
-                <div ref={splitContainerRef} className="flex h-full min-h-0 min-w-0 flex-col">
-                  <div
-                    className="min-h-[120px] overflow-hidden"
-                    style={{ flexBasis: `${layersPanePercent}%`, flexShrink: 0 }}
-                  >
-                    <LayersPanel />
-                  </div>
-                  <div
-                    role="separator"
-                    aria-label="Resize Layers and Design panes"
-                    aria-orientation="horizontal"
-                    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}
-                    onPointerUp={handleInspectorSplitResizeEnd}
-                    onPointerCancel={handleInspectorSplitResizeEnd}
-                  >
-                    <div className="h-px w-10 rounded-full bg-white/12 transition-colors group-hover:bg-white/24 group-active:bg-studio-accent/70" />
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-hidden">{propertyPanel}</div>
-                </div>
-              ) : layersPaneOpen ? (
-                <LayersPanel />
-              ) : designPaneOpen ? (
-                propertyPanel
-              ) : inspectorTabActive ? (
-                // Inspector tab selected but no pane can render (panes toggled
-                // off, or inspector inactive during playback/recording): show an
-                // explanation instead of silently rendering the render queue
-                // under a highlighted inspector tab.
-                <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
-                  <p className="text-xs text-neutral-500">
-                    Inspector is unavailable right now — select the Design or Layers pane above, or
-                    pause playback/recording to inspect elements.
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() => setRightPanelTab("renders")}
-                    className="h-7 rounded-md border border-neutral-800 px-3 text-[11px] font-medium text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200 active:scale-[0.98]"
-                  >
-                    Show Renders
-                  </button>
-                </div>
-              ) : (
-                renderQueuePanel
-              )}
-            </div>
-          </>
-        )}
-      </div>
+        <RenderQueuePanel />
+      </Dock.Panel>
+      <Dock.Panel id="variables">
+        <VariablesPanel
+          sdkSession={sdkSession}
+          publishSdkSession={publishSdkSession}
+          reloadPreview={reloadPreview}
+          recordEdit={recordEdit}
+        />
+      </Dock.Panel>
+      <Dock.Panel id="slideshow">
+        <SlideshowPanel
+          scenes={slideshowScenes}
+          onPersist={onPersistSlideshow}
+          onPersistNotes={onPersistSlideshowNotes}
+        />
+      </Dock.Panel>
     </>
   );
 }

package/src/components/{StudioRightPanel.types.ts → StudioRightPanels.types.ts}

@@ -1,5 +1,5 @@
 /**
- * Props for StudioRightPanel.
+ * Props for StudioRightPanels.
  *
  * Kept beside the component rather than inside it: the panel is at the file-size
  * cap, and this block is the part that changes least, so moving it keeps the
@@ -14,8 +14,7 @@ import type { UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
 import type { AddMediaOverlayHandler } from "./editor/propertyPanelTypes";
 import type { ToggleHiddenHandler } from "../utils/studioHelpers";
 
-export interface StudioRightPanelProps extends StudioEditPersistenceProps {
-  designPanelActive: boolean;
+export interface StudioRightPanelsProps extends StudioEditPersistenceProps {
   activeBlockParams?: {
     blockName: string;
     blockTitle: string;
@@ -23,6 +22,8 @@ export interface StudioRightPanelProps extends StudioEditPersistenceProps {
     compositionPath: string;
   } | null;
   onCloseBlockParams?: () => void;
+  /** Drops the block-params view without touching the dock (selection or leaving Design). */
+  onDismissBlockParams: () => void;
   recordingState?: "idle" | "recording" | "preview";
   recordingDuration?: number;
   onToggleRecording?: () => void;

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

@@ -0,0 +1,117 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { cleanupMounted, mountHost } from "./ui/mountHost.testHelpers";
+import { isTypingTarget } from "../utils/typingTarget";
+import { shouldIgnorePlaybackShortcutTarget } from "../player/lib/playbackShortcuts";
+
+const editHistory = {
+  canUndo: false,
+  canRedo: false,
+  undoLabel: undefined as string | undefined,
+  redoLabel: undefined as string | undefined,
+};
+const handleUndo = vi.fn();
+const handleRedo = vi.fn();
+const trackStudioEvent = vi.fn();
+
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ editHistory, handleUndo, handleRedo }),
+}));
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent }));
+
+const { TimelineHistoryButtons } = await import("./TimelineHistoryButtons");
+const { TimelineToolbar } = await import("./TimelineToolbar");
+
+beforeEach(() => {
+  Object.assign(editHistory, {
+    canUndo: false,
+    canRedo: false,
+    undoLabel: undefined,
+    redoLabel: undefined,
+  });
+  vi.clearAllMocks();
+});
+
+afterEach(cleanupMounted);
+
+const mount = mountHost;
+
+function button(host: HTMLElement, label: string): HTMLButtonElement {
+  const el = host.querySelector<HTMLButtonElement>(`button[aria-label="${label}"]`);
+  if (!el) throw new Error(`not rendered: ${label}`);
+  return el;
+}
+
+function click(el: HTMLElement): void {
+  act(() => {
+    el.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+}
+
+it("calls handleUndo once and tracks the event when Undo is enabled", () => {
+  editHistory.canUndo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Undo"));
+
+  expect(handleUndo).toHaveBeenCalledTimes(1);
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "undo" });
+});
+
+it("calls handleRedo once and tracks the event when Redo is enabled", () => {
+  editHistory.canRedo = true;
+  const host = mount(<TimelineHistoryButtons />);
+
+  click(button(host, "Redo"));
+
+  expect(handleRedo).toHaveBeenCalledTimes(1);
+  expect(trackStudioEvent).toHaveBeenCalledWith("toolbar_action", { action: "redo" });
+});
+
+it("disables both buttons and ignores clicks on an empty history", () => {
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(el.disabled).toBe(true);
+    expect(el.className).toContain("cursor-not-allowed");
+    click(el);
+  }
+  expect(handleUndo).not.toHaveBeenCalled();
+  expect(handleRedo).not.toHaveBeenCalled();
+  expect(trackStudioEvent).not.toHaveBeenCalled();
+});
+
+it("leaves enabled buttons without the disabled attribute", () => {
+  editHistory.canUndo = true;
+  const el = button(mount(<TimelineHistoryButtons />), "Undo");
+
+  expect(el.disabled).toBe(false);
+  expect(el.className).not.toContain("cursor-not-allowed");
+});
+
+it("orders the toolbar Undo, Redo, Select, Razor", () => {
+  const host = mount(<TimelineToolbar />);
+  const labels = Array.from(host.querySelectorAll("button"))
+    .map((b) => b.getAttribute("aria-label"))
+    .filter((l) => l !== null)
+    .slice(0, 4);
+
+  expect(labels).toEqual(["Undo", "Redo", "Selection tool", "Razor tool"]);
+});
+
+it("classifies Undo and Redo for the hotkey filters at their new location (KTD13)", () => {
+  // The header's own version of this check dropped Undo/Redo when they moved
+  // here; a <button> is never a typing target and is always claimed by the
+  // playback filter, same as every other toolbar tool.
+  const host = mount(<TimelineHistoryButtons />);
+
+  for (const label of ["Undo", "Redo"]) {
+    const el = button(host, label);
+    expect(isTypingTarget(el), label).toBe(false);
+    expect(shouldIgnorePlaybackShortcutTarget(el), label).toBe(true);
+  }
+});

package/src/components/TimelineHistoryButtons.tsx

@@ -0,0 +1,54 @@
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { RotateCcw, RotateCw } from "../icons/SystemIcons";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import { historyTooltipLabel } from "../utils/studioHelpers";
+import { flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { Tooltip } from "./ui";
+
+interface HistoryButtonProps {
+  action: "undo" | "redo";
+  enabled: boolean;
+  label: string | undefined;
+  onClick: () => Promise<void> | void;
+}
+
+function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps) {
+  const Icon = action === "undo" ? RotateCcw : RotateCw;
+  return (
+    <Tooltip label={historyTooltipLabel(action, label)}>
+      <button
+        type="button"
+        aria-label={action === "undo" ? "Undo" : "Redo"}
+        disabled={!enabled}
+        className={enabled ? flatIdle : flatDisabled}
+        onClick={() => {
+          trackStudioEvent("toolbar_action", { action });
+          void onClick();
+        }}
+      >
+        <Icon size={16} />
+      </button>
+    </Tooltip>
+  );
+}
+
+/** Undo and Redo, on the one edit-history path the shell already owns. */
+export function TimelineHistoryButtons() {
+  const { editHistory, handleUndo, handleRedo } = useStudioShellContext();
+  return (
+    <>
+      <HistoryButton
+        action="undo"
+        enabled={editHistory.canUndo}
+        label={editHistory.undoLabel}
+        onClick={handleUndo}
+      />
+      <HistoryButton
+        action="redo"
+        enabled={editHistory.canRedo}
+        label={editHistory.redoLabel}
+        onClick={handleRedo}
+      />
+    </>
+  );
+}

package/src/components/TimelineToolbar.test.tsx

@@ -8,6 +8,14 @@ import { usePlayerStore } from "../player/store/playerStore";
 import { makeSelection } from "../hooks/domSelectionTestHarness";
 import { TimelineToolbar } from "./TimelineToolbar";
 
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    editHistory: { canUndo: false, canRedo: false },
+    handleUndo: vi.fn(),
+    handleRedo: vi.fn(),
+  }),
+}));
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {

package/src/components/TimelineToolbar.tsx

@@ -22,6 +22,8 @@ import {
 import { useTimelineZoom } from "../player/components/useTimelineZoom";
 import { usePlayerStore, type TimelineElement } from "../player";
 import { Tooltip } from "./ui";
+import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
+import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
@@ -186,19 +188,13 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
     return () => window.removeEventListener("keydown", onKeyDown);
   }, []);
 
-  // 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/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 (
     // The "TIMELINE" label is dropped for CapCut-like density — the pane's
     // position (tracks right below) makes it self-evident.
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
+          <TimelineHistoryButtons />
           <Tooltip label="Selection tool (V)">
             <button
               type="button"