@hyperframes/studio 0.8.100 → 0.8.102

package/src/hooks/useEditHistoryActions.test.tsx

@@ -11,24 +11,36 @@ import { useEditHistoryActions, type EditHistoryHandle } from "./useEditHistoryA
 let root: Root | null = null;
 afterEach(() => act(() => root?.unmount()));
 
-function mount(result: {
-  ok: boolean;
-  reason?: string;
-  message?: string;
-  label?: string;
-  paths?: string[];
-}) {
+type RestoreFiles = Record<string, { previous: string; restored: string }>;
+type Prediction = { id: string; files: RestoreFiles };
+
+function mount(
+  result: {
+    ok: boolean;
+    reason?: string;
+    message?: string;
+    label?: string;
+    paths?: string[];
+    undoes?: string;
+    files?: RestoreFiles;
+  },
+  predicted?: Prediction,
+) {
   const editHistory = {
     undo: vi.fn<EditHistoryHandle["undo"]>(async () => result),
     redo: vi.fn<EditHistoryHandle["redo"]>(async () => result),
+    predict: () => predicted ?? null,
   };
+  const putBack = vi.fn();
   const deps = {
     editHistory,
     readOptionalProjectFile: vi.fn(async () => ""),
     readProjectFile: vi.fn(async () => ""),
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
-    syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
+    syncHistoryPreviewAfterApply: vi.fn(async (_restore: unknown) => undefined),
+    putBack,
+    showHistoryRestoreNow: vi.fn((_files: RestoreFiles) => putBack),
     waitForPendingDomEditSaves: vi.fn(async () => undefined),
     onAfterUndoRedo: vi.fn(),
     activeCompPath: "index.html",
@@ -44,7 +56,53 @@ function mount(result: {
   return { deps, actions };
 }
 
+const PREDICTED = { id: "e1", files: { "index.html": { previous: "B", restored: "A" } } };
+const SERVER_FILES = { "index.html": { previous: "B", restored: "A2" } };
+
 describe("useEditHistoryActions", () => {
+  it("corrects a shown step from the server's restore, diffed from what the preview shows", async () => {
+    const { deps, actions } = mount(
+      { ok: true, label: "Undid: Move", paths: ["index.html"], undoes: "e1", files: SERVER_FILES },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.showHistoryRestoreNow).toHaveBeenCalledWith(PREDICTED.files);
+    expect(deps.putBack).not.toHaveBeenCalled();
+    expect(deps.syncHistoryPreviewAfterApply).toHaveBeenCalledWith({
+      paths: ["index.html"],
+      files: { "index.html": { previous: "A", restored: "A2" } },
+    });
+  });
+
+  it("puts a shown step back and applies the server's own restore when it stepped another entry", async () => {
+    const { deps, actions } = mount(
+      {
+        ok: true,
+        label: "Undid: Outside",
+        paths: ["index.html"],
+        undoes: "e0",
+        files: SERVER_FILES,
+      },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.putBack).toHaveBeenCalledTimes(1);
+    expect(deps.syncHistoryPreviewAfterApply).toHaveBeenCalledWith({
+      paths: ["index.html"],
+      files: SERVER_FILES,
+    });
+  });
+
+  it("puts a shown step back when the server refuses it", async () => {
+    const { deps, actions } = mount(
+      { ok: false, reason: "failed", message: "disk full" },
+      PREDICTED,
+    );
+    await act(() => actions.undo());
+    expect(deps.putBack).toHaveBeenCalledTimes(1);
+    expect(deps.syncHistoryPreviewAfterApply).not.toHaveBeenCalled();
+  });
+
   it("undo resyncs the preview and toasts the step as the history names it", async () => {
     const { deps, actions } = mount({ ok: true, label: "Undid: Move clip", paths: ["index.html"] });
     await act(() => actions.undo());
@@ -80,7 +138,7 @@ describe("useEditHistoryActions", () => {
     expect(deps.syncHistoryPreviewAfterApply).not.toHaveBeenCalled();
   });
 
-  it("says why when the history could not take the step", async () => {
+  it("says why when the history could not take the step, with nothing shown to take back", async () => {
     const { deps, actions } = mount({ ok: false, reason: "failed", message: "disk full" });
     await act(() => actions.undo());
     expect(deps.showToast).toHaveBeenCalledWith("Undo failed: disk full", "error");

package/src/hooks/useEditHistoryActions.ts

@@ -2,6 +2,7 @@
 import { useCallback, useMemo } from "react";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import type { RestoreFiles } from "../utils/gsapUndoRestore";
 
 interface HistoryResult {
   ok: boolean;
@@ -9,8 +10,9 @@ interface HistoryResult {
   message?: string;
   label?: string;
   paths?: string[];
+  undoes?: string;
   /** Per-file restored/previous content, used to soft-apply the preview. */
-  files?: Record<string, { previous: string; restored: string }>;
+  files?: RestoreFiles;
 }
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
@@ -19,6 +21,7 @@ interface HistoryFileCallbacks {
 export interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
   redo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
+  predict?: (direction: "undo" | "redo") => { id: string; files: RestoreFiles } | null;
   state: {
     undo: ReadonlyArray<{ createdAt: number }>;
     redo: ReadonlyArray<{ createdAt: number }>;
@@ -26,12 +29,13 @@ export interface EditHistoryHandle {
 }
 
 export interface UseEditHistoryActionsOptions {
-  editHistory: Pick<EditHistoryHandle, "undo" | "redo">;
+  editHistory: Pick<EditHistoryHandle, "undo" | "redo" | "predict">;
   readOptionalProjectFile: (path: string) => Promise<string>;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: (restore: Pick<HistoryResult, "paths" | "files">) => Promise<void>;
+  showHistoryRestoreNow?: (files: RestoreFiles) => (() => void) | null;
   waitForPendingDomEditSaves: () => Promise<void>;
   onAfterUndoRedo?: (restore: Pick<HistoryResult, "paths" | "files">) => void;
   /** Active composition path — decides whether undo/redo must resync the SDK session. */
@@ -48,6 +52,7 @@ export function useEditHistoryActions({
   writeProjectFile,
   showToast,
   syncHistoryPreviewAfterApply,
+  showHistoryRestoreNow,
   waitForPendingDomEditSaves,
   onAfterUndoRedo,
   activeCompPath,
@@ -67,11 +72,22 @@ export function useEditHistoryActions({
   const apply = useCallback(
     async (direction: "undo" | "redo") => {
       const noun = direction === "undo" ? "Undo" : "Redo";
-      await waitForPendingDomEditSaves();
-      const result = await editHistory[direction]({
-        readFile: readHistoryFile,
-        serialize: serializeHistoryFiles,
-      });
+      // Paint the step in the key's own task when this tab knows it; the server's answer then confirms or corrects.
+      const predicted = editHistory.predict?.(direction) ?? null;
+      const putBack = predicted ? (showHistoryRestoreNow?.(predicted.files) ?? null) : null;
+      let result: HistoryResult = { ok: false, reason: "failed" };
+      let serverSteppedShown = false;
+      try {
+        await waitForPendingDomEditSaves();
+        result = await editHistory[direction]({
+          readFile: readHistoryFile,
+          serialize: serializeHistoryFiles,
+        });
+        serverSteppedShown =
+          Boolean(putBack && result.ok && result.label) && result.undoes === predicted?.id;
+      } finally {
+        if (putBack && !serverSteppedShown) putBack();
+      }
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
           `Can't ${direction}: ${result.paths?.join(", ")} changed since that edit.`,
@@ -84,7 +100,8 @@ export function useEditHistoryActions({
         return;
       }
       if (result.ok && result.label) {
-        const restore = { paths: result.paths, files: result.files };
+        const files = serverSteppedShown ? fromShown(result.files, predicted!.files) : result.files;
+        const restore = { paths: result.paths, files };
         onAfterUndoRedo?.(restore);
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
@@ -98,6 +115,7 @@ export function useEditHistoryActions({
       readHistoryFile,
       showToast,
       syncHistoryPreviewAfterApply,
+      showHistoryRestoreNow,
       waitForPendingDomEditSaves,
       serializeHistoryFiles,
       onAfterUndoRedo,
@@ -110,3 +128,13 @@ export function useEditHistoryActions({
   const redo = useCallback(() => apply("redo"), [apply]);
   return useMemo(() => ({ undo, redo }), [undo, redo]);
 }
+
+function fromShown(files: RestoreFiles | undefined, shown: RestoreFiles) {
+  if (!files) return files;
+  return Object.fromEntries(
+    Object.entries(files).map(([path, f]) => [
+      path,
+      { previous: shown[path]?.restored ?? f.previous, restored: f.restored },
+    ]),
+  );
+}

package/src/hooks/usePersistentEditHistory.test.ts

@@ -76,6 +76,7 @@ it("an edit Studio saved is undone and redone by the project's history, with the
   expect(undone).toEqual({
     ok: true,
     label: "Undid: Moved Title",
+    undoes: expect.any(String),
     paths: ["index.html"],
     files: { "index.html": { previous: "B", restored: "A" } },
   });
@@ -241,3 +242,48 @@ it("a step that cannot reach the server says so", async () => {
     message: "Studio could not reach its server.",
   });
 });
+
+it("predicts a step from what this tab wrote, and not while a claim or step may have moved the history", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  const claim = hook().recordEdit({
+    label: "Moved Title",
+    files: { "index.html": { before: "A", after: "B" } },
+  });
+  expect(hook().predict("undo")).toBeNull();
+  await act(() => claim);
+  const predicted = await vi.waitFor(() => {
+    const next = hook().predict("undo");
+    expect(next?.files).toEqual({ "index.html": { previous: "B", restored: "A" } });
+    return next!;
+  });
+
+  hook().noteOutsideChange();
+  expect(hook().predict("undo")).toBeNull();
+  await vi.waitFor(() => expect(hook().predict("undo")?.id).toBe(predicted.id));
+
+  const undone = hook().undo({ readFile });
+  expect(hook().predict("undo")).toBeNull();
+  expect((await act(() => undone)).undoes).toBe(predicted.id);
+  await vi.waitFor(() =>
+    expect(hook().predict("redo")?.files).toEqual({
+      "index.html": { previous: "A", restored: "B" },
+    }),
+  );
+});
+
+it("an undo taken before the view caught up with the edit still reports the preview's before and after", async () => {
+  const { hook, save, readFile } = await studio();
+  save("B");
+  const record = hook().recordEdit({
+    label: "Moved Title",
+    files: { "index.html": { before: "A", after: "B" } },
+  });
+  const undo = hook().undo;
+  await act(() => record);
+  const undone = await act(() => undo({ readFile }));
+  expect(undone).toMatchObject({
+    ok: true,
+    files: { "index.html": { previous: "B", restored: "A" } },
+  });
+});

package/src/hooks/usePersistentEditHistory.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { HistoryListItem, HistoryResult } from "@hyperframes/studio-server";
 import { studioFileContentVersion, studioWriteHeaders } from "../utils/studioFileVersion";
+import type { RestoreFiles } from "../utils/gsapUndoRestore";
 
 interface RecordEditInput {
   label: string;
@@ -18,11 +19,6 @@ export interface UsePersistentEditHistoryOptions {
   projectId: string | null;
 }
 
-interface ApplyRestoredFile {
-  previous: string;
-  restored: string;
-}
-
 interface ApplyResult {
   ok: boolean;
   /** content-mismatch: `paths` changed after the step's entry. failed: `message` says why. */
@@ -30,7 +26,8 @@ interface ApplyResult {
   message?: string;
   label?: string;
   paths?: string[];
-  files?: Record<string, ApplyRestoredFile>;
+  undoes?: string;
+  files?: RestoreFiles;
 }
 
 interface NextStep {
@@ -47,6 +44,69 @@ interface HistoryView {
 }
 
 const EMPTY: HistoryView = { entries: [], back: null, forward: null };
+/** ponytail: the newest entries' content is kept; older ones step through the server only. */
+const OWN_ENTRIES_KEPT = 100;
+
+type OwnFiles = Record<string, { before: string; after: string }>;
+
+function createOwnHistory() {
+  const own = new Map<string, OwnFiles>();
+  let next: Record<"undo" | "redo", NextStep | null> | null = null;
+  let changes = 0;
+  const remember = (id: string, files: OwnFiles) => {
+    const known = own.get(id) ?? {};
+    for (const [path, { before, after }] of Object.entries(files)) {
+      known[path] = { before: known[path]?.before ?? before, after };
+    }
+    own.delete(id);
+    own.set(id, known);
+    if (own.size > OWN_ENTRIES_KEPT) own.delete(own.keys().next().value!);
+  };
+  return {
+    remember,
+    overtake: () => {
+      changes += 1;
+      next = null;
+      return changes;
+    },
+    offered: (seen: number, view: HistoryView) => {
+      if (seen === changes) next = { undo: view.back, redo: view.forward };
+    },
+    changes: () => changes,
+    stepped: (entry: { id: string; undoes?: string }) => {
+      const undone = entry.undoes ? own.get(entry.undoes) : undefined;
+      if (!undone) return;
+      const swapped = Object.entries(undone).map(([path, f]) => [
+        path,
+        { before: f.after, after: f.before },
+      ]);
+      remember(entry.id, Object.fromEntries(swapped));
+    },
+    afterOf: (id: string | undefined): Record<string, string> =>
+      Object.fromEntries(Object.entries((id && own.get(id)) || {}).map(([p, f]) => [p, f.after])),
+    predict: (direction: "undo" | "redo"): { id: string; files: RestoreFiles } | null => {
+      const step = next?.[direction];
+      const files = step ? own.get(step.id) : undefined;
+      const paths = files ? Object.keys(files) : [];
+      if (
+        !files ||
+        paths.length !== step!.paths.length ||
+        !paths.every((p) => step!.paths.includes(p))
+      )
+        return null;
+      const restore = paths.map((path) => [
+        path,
+        { previous: files[path]!.after, restored: files[path]!.before },
+      ]);
+      return { id: step!.id, files: Object.fromEntries(restore) };
+    },
+    clear: () => {
+      own.clear();
+      next = null;
+      changes += 1;
+    },
+  };
+}
 const DEFAULT_COALESCE_MS = 300;
 
 function historyUrl(projectId: string, path = ""): string {
@@ -71,12 +131,13 @@ async function post(
   return { ok: false, status: response.status, error: reply?.error ?? `HTTP ${response.status}` };
 }
 
-/** Whether a drag's claim is held open; a failed one is logged (its write lands as an outside change; 404: none). */
-function claimHeld(reply: Awaited<ReturnType<typeof post>>, label: string): boolean {
-  if (reply.ok) return Boolean((reply.body as { claimed: { id: string } | null } | null)?.claimed);
+/** The entry id a claim took, or null; a failed one is logged (its write lands as an outside change; 404: none). */
+function claimHeld(reply: Awaited<ReturnType<typeof post>>, label: string): string | null {
+  if (reply.ok)
+    return (reply.body as { claimed: { id: string } | null } | null)?.claimed?.id ?? null;
   if (reply.status !== 404)
     console.error(`"${label}" was not recorded as your edit: ${reply.error}`);
-  return false;
+  return null;
 }
 
 async function overwroteVersions(files: RecordEditInput["files"]): Promise<Record<string, string>> {
@@ -106,7 +167,7 @@ async function restoredFiles(
   paths: readonly string[],
   previous: Record<string, string> | null,
   readFile: (path: string) => Promise<string>,
-): Promise<Record<string, ApplyRestoredFile> | undefined> {
+): Promise<RestoreFiles | undefined> {
   if (!previous || paths.some((path) => !(path in previous))) return undefined;
   const restored = await readAll(paths, readFile);
   if (!restored) return undefined;
@@ -128,36 +189,43 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
   const heldClaimRef = useRef<{ paths: string[]; at: number } | null>(null);
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
+  const [own] = useState(createOwnHistory);
 
   const refresh = useCallback(async () => {
     if (!projectId) return;
+    const seen = own.changes();
     const response = await fetch(historyUrl(projectId)).catch(() => null);
     const next = response?.ok ? ((await response.json()) as HistoryView) : EMPTY;
-    if (projectIdRef.current === projectId) setView(next);
-  }, [projectId]);
+    if (projectIdRef.current !== projectId) return;
+    setView(next);
+    own.offered(seen, next);
+  }, [projectId, own]);
 
   useEffect(() => {
     setView(EMPTY);
     setLoaded(false);
     heldClaimRef.current = null;
+    own.clear();
     void refresh().finally(() => setLoaded(true));
-  }, [refresh]);
+  }, [refresh, own]);
 
   const recordEdit = useCallback(
     async ({ label, coalesceKey, coalesceMs, files }: RecordEditInput) => {
       if (!projectId) return;
       const paths = Object.keys(files);
+      own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,
         paths,
         overwrote: await overwroteVersions(files),
         ...(coalesceKey && { coalesceKey, idleMs: coalesceMs ?? DEFAULT_COALESCE_MS }),
       });
-      heldClaimRef.current =
-        claimHeld(reply, label) && coalesceKey ? { paths, at: Date.now() } : null;
+      const claimed = claimHeld(reply, label);
+      if (claimed) own.remember(claimed, files);
+      heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
       void refresh();
     },
-    [projectId, refresh],
+    [projectId, refresh, own],
   );
 
   const step = useCallback(
@@ -165,6 +233,7 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
       if (!projectId) return { ok: false, reason: "empty" };
       const next = direction === "undo" ? view.back : view.forward;
       const paths = [...new Set([...(next?.paths ?? []), ...(heldClaimRef.current?.paths ?? [])])];
+      own.overtake();
       const run = async (): Promise<ApplyResult> => {
         const previous = await readAll(paths, callbacks.readFile);
         const posted = await post(
@@ -183,19 +252,30 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
           return { ok: false, reason: "content-mismatch", paths: files };
         }
         if (!reply.entry) return { ok: false, reason: "empty" };
+        own.stepped(reply.entry);
         const changed = reply.entry.files.map((file) => file.path);
         return {
           ok: true,
           label: reply.entry.label,
+          undoes: reply.entry.undoes,
           paths: changed,
-          files: await restoredFiles(changed, previous, callbacks.readFile),
+          files: await restoredFiles(
+            changed,
+            { ...own.afterOf(reply.entry.undoes), ...previous },
+            callbacks.readFile,
+          ),
         };
       };
       return callbacks.serialize ? callbacks.serialize(paths, run) : run();
     },
-    [projectId, view, refresh],
+    [projectId, view, refresh, own],
   );
 
+  const noteOutsideChange = useCallback(() => {
+    own.overtake();
+    void refresh();
+  }, [own, refresh]);
+
   const undo = useCallback((callbacks: ApplyCallbacks) => step("undo", callbacks), [step]);
   const redo = useCallback((callbacks: ApplyCallbacks) => step("redo", callbacks), [step]);
 
@@ -220,5 +300,7 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
     recordEdit,
     undo,
     redo,
+    predict: own.predict,
+    noteOutsideChange,
   };
 }

package/src/hooks/usePreviewPersistence.ts

@@ -8,17 +8,22 @@ import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { createDomEditSaveQueue, type DomEditSaveDrainResult } from "../utils/domEditSaveQueue";
 import {
   flushStudioPendingEdits,
+  hasStudioPendingEdits,
   type StudioPendingEditsDrainResult,
 } from "../utils/studioPendingEdits";
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { applyUndoRestoreToPreview, type UndoRestoreFile } from "../utils/gsapUndoRestore";
+import {
+  applyUndoRestoreToPreview,
+  showRestoreInPlace,
+  type RestoreFiles,
+} from "../utils/gsapUndoRestore";
 import { usePlayerStore } from "../player";
 import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 
 /** The restore payload the undo/redo preview-sync consumes (from the history store). */
 interface HistoryPreviewRestore {
   paths?: string[];
-  files?: Record<string, UndoRestoreFile>;
+  files?: RestoreFiles;
 }
 
 // ── Types ──
@@ -217,6 +222,23 @@ export function usePreviewPersistence({
     [previewIframeRef, activeCompPathRef, reloadPreview],
   );
 
+  // A restore the server has not confirmed yet: in place now, or not at all. A GSAP script re-run is not
+  // synchronous, and a pending save would land under it.
+  const showHistoryRestoreNow = useCallback(
+    (files: RestoreFiles): (() => void) | null => {
+      if (!domEditSaveQueueRef.current?.isIdle() || hasStudioPendingEdits()) return null;
+      const iframe = previewIframeRef.current;
+      const now = () => usePlayerStore.getState().currentTime;
+      const putBack = showRestoreInPlace(iframe, activeCompPathRef.current, files, now());
+      if (!putBack) return null;
+      return () => {
+        if (putBack(now())) syncStoredAutomationFromPreview(iframe?.contentDocument ?? null);
+        else void syncHistoryPreviewAfterApply({ paths: Object.keys(files) });
+      };
+    },
+    [previewIframeRef, activeCompPathRef, syncHistoryPreviewAfterApply],
+  );
+
   // ── Migrate legacy studio-motion.json ──
   // Projects that used the old JSON-file approach may still have a populated
   // `.hyperframes/studio-motion.json`. The studio no longer reads from it, but
@@ -239,5 +261,6 @@ export function usePreviewPersistence({
     applyCurrentStudioManualEditsToPreview,
     applyStudioManualEditsToPreview,
     syncHistoryPreviewAfterApply,
+    showHistoryRestoreNow,
   };
 }

package/src/hooks/useStudioExternalFileChanges.ts

@@ -36,6 +36,7 @@ interface UseStudioExternalFileChangesOptions {
   previewPersistence: PreviewPersistence;
   pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
   reloadPreview: () => void;
+  onOutsideChange?: () => void;
 }
 
 /** Connects the app's save queues, recovery storage, and reload surfaces to one owner. */
@@ -47,14 +48,17 @@ export function useStudioExternalFileChanges({
   previewPersistence,
   pendingTimelineEditPathRef,
   reloadPreview,
+  onOutsideChange,
 }: UseStudioExternalFileChangesOptions) {
   const { flushPendingSourceSave, discardPendingSourceSave } = fileManager;
   const { drainPendingDomEditSaves, resetDomEditSaveQueueBreaker } = previewPersistence;
   const bumpThumbnailRevisions = usePlayerStore((state) => state.bumpThumbnailRevisions);
   const onAcceptedPersistedFileChange = useCallback(
-    (_path: string, affectedCompositions: readonly string[] | null) =>
-      bumpThumbnailRevisions(affectedCompositions),
-    [bumpThumbnailRevisions],
+    (_path: string, affectedCompositions: readonly string[] | null) => {
+      onOutsideChange?.();
+      bumpThumbnailRevisions(affectedCompositions);
+    },
+    [bumpThumbnailRevisions, onOutsideChange],
   );
   const drainPendingChanges = useCallback(async () => {
     const source = await flushPendingSourceSave();

package/src/index.ts

@@ -12,6 +12,10 @@ export type { ShortcutHint, ShortcutSection } from "./player/components/studioSh
 export { CompositionBreadcrumb } from "./components/nle/CompositionBreadcrumb";
 export type { CompositionLevel } from "./components/nle/CompositionBreadcrumb";
 export { useCompositionStack } from "./components/nle/useCompositionStack";
+export { Dock } from "./components/dock/Dock";
+export { useDockLayoutStore } from "./components/dock/dockLayoutStore";
+export type { DockController } from "./components/dock/dockLayoutStore";
+export type { PanelId } from "./components/dock/panelRegistry";
 
 // Player (preview, timeline, playback controls)
 export {
@@ -183,6 +187,9 @@ export { DomEditProvider, useDomEditSelectionContext } from "./contexts/DomEditC
 export { PreviewReadOnlyProvider } from "./components/editor/previewReadOnlyContext";
 export { ConnectedDomEditOverlay } from "./components/editor/ConnectedDomEditOverlay";
 export type { ConnectedDomEditOverlayProps } from "./components/editor/ConnectedDomEditOverlay";
+export { useDomEditZOrder } from "./components/editor/useDomEditZOrder";
+export type { DomEditZOrder } from "./components/editor/useDomEditZOrder";
+export type { ZOrderAction } from "./components/editor/canvasContextMenuZOrder";
 export type { DomEditCapabilities, DomEditSelection } from "./components/editor/domEditingTypes";
 export { useDomStyleCommit } from "./hooks/useDomStyleCommit";
 export type { UseDomStyleCommitOptions } from "./hooks/useDomStyleCommit";