@hyperframes/studio 0.8.105 → 0.8.107

package/src/hooks/useClipboard.ts

@@ -30,6 +30,26 @@ import {
 } from "../utils/authoredSource";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 
+type InPlace = { inPlace?: boolean };
+
+const pasteStart = (
+  payload: Extract<ClipboardPayload, { kind: "timeline-clip" }>,
+  targetPath: string,
+  playhead: number,
+  options?: InPlace,
+) =>
+  options?.inPlace && payload.copiedInComposition === targetPath
+    ? Math.min(...payload.clips.map((clip) => clip.start))
+    : playhead;
+
+const pasteWords = (payload: ClipboardPayload) =>
+  payload.kind === "timeline-clip"
+    ? {
+        label: clipLabel("Paste", payload.clips.length),
+        toast: clipToast("Pasted", payload.clips.length),
+      }
+    : { label: "Paste element", toast: "Pasted element" };
+
 interface RecordEditInput {
   label: string;
   coalesceKey?: string;
@@ -313,6 +333,7 @@ export function useClipboard({
         clips,
         sourceFile,
         projectId: projectIdRef.current ?? undefined,
+        copiedInComposition: activeCompPath || "index.html",
       };
     });
   }, [activeCompPath, findSelectedClips, readClips, showToast]);
@@ -369,136 +390,136 @@ export function useClipboard({
 
   // Two independent paste modes (timeline clip vs DOM element) behind one guarded save.
   // fallow-ignore-next-line complexity
-  const handlePaste = useCallback(async () => {
-    const payload = await clipboardRef.current;
-    if (!payload) {
-      showToast("Nothing to paste.", "info");
-      return;
-    }
-    const pid = projectIdRef.current;
-    if (!pid) return;
-
-    const targetPath = activeCompPath || "index.html";
-    try {
-      let pastedIds: string[] = [];
-      const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
-      const paste = (originalContent: string) => {
-        if (payload.kind !== "timeline-clip")
-          return pasteElementHtml(originalContent, payload, fromThisFile);
-        const { currentTime, elements } = usePlayerStore.getState();
-        const pasted = pasteTimelineClips(
-          originalContent,
-          payload.clips,
-          currentTime,
-          elements,
-          fromThisFile,
-        );
-        pastedIds = pasted.ids;
-        // A clip pasted past the current composition end would exist in the
-        // file but never appear on the timeline or in playback/export (the
-        // root's data-duration is what actually bounds the render).
-        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-      };
-
-      const label =
-        payload.kind === "timeline-clip"
-          ? clipLabel("Paste", payload.clips.length)
-          : "Paste element";
-
-      await saveProjectFilesWithHistory({
-        projectId: pid,
-        label,
-        files: { [targetPath]: paste },
-        readFile: (path) => readFileContent(pid, path),
-        writeFile: writeProjectFile,
-        recordEdit,
-      });
-
-      // CapCut: the pasted clip(s) become the selection; the playhead does not
-      // move. reloadPreview is a bare refresh-key bump with no selection
-      // snapshot of its own; calling setSelection before it is what makes the
-      // post-reload store state land on the pasted ids instead of stale ones.
-      if (pastedIds.length > 0) {
-        usePlayerStore.getState().setSelection(pastedIds.map((id) => elementKey(id, targetPath)));
+  const handlePaste = useCallback(
+    async (options?: InPlace) => {
+      const payload = await clipboardRef.current;
+      if (!payload) {
+        showToast("Nothing to paste.", "info");
+        return;
       }
-      reloadPreview();
-      showToast(
-        payload.kind === "timeline-clip"
-          ? clipToast("Pasted", payload.clips.length)
-          : "Pasted element",
-        "info",
-      );
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to paste";
-      showToast(message);
-    }
-  }, [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile]);
+      const pid = projectIdRef.current;
+      if (!pid) return;
+
+      const targetPath = activeCompPath || "index.html";
+      try {
+        let pastedIds: string[] = [];
+        const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
+        const paste = (originalContent: string) => {
+          if (payload.kind !== "timeline-clip")
+            return pasteElementHtml(originalContent, payload, fromThisFile);
+          const { currentTime, elements } = usePlayerStore.getState();
+          const pasted = pasteTimelineClips(
+            originalContent,
+            payload.clips,
+            pasteStart(payload, targetPath, currentTime, options),
+            elements,
+            fromThisFile,
+          );
+          pastedIds = pasted.ids;
+          // A clip pasted past the current composition end would exist in the
+          // file but never appear on the timeline or in playback/export (the
+          // root's data-duration is what actually bounds the render).
+          return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+        };
 
-  // Duplicates the current selection in place, immediately after it, without
-  // touching the clipboard — a pending copy must survive a Cmd+D. Shares
-  // pasteTimelineClips with handlePaste; only the anchor and clip source
-  // differ (the selection's own end here, the playhead there).
-  const handleDuplicate = useCallback(async (): Promise<boolean> => {
-    const targets = findSelectedClips();
-    if (!targets) return false;
-    const pid = projectIdRef.current;
-    if (!pid) return false;
-
-    const { elements } = targets;
-    const pathOf = (el: TimelineElement) => el.sourceFile || activeCompPath || "index.html";
-    const targetPath = pathOf(elements[0]!);
-    // The copy lands in targetPath's own clock, so anchor and lane check are local to it.
-    const anchorTime = toAuthoredStart(
-      elements[0]!,
-      Math.max(...elements.map((el) => el.start + el.duration)),
-    );
+        const { label, toast } = pasteWords(payload);
+
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label,
+          files: { [targetPath]: paste },
+          readFile: (path) => readFileContent(pid, path),
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        // CapCut: the pasted clip(s) become the selection; the playhead does not
+        // move. reloadPreview is a bare refresh-key bump with no selection
+        // snapshot of its own; calling setSelection before it is what makes the
+        // post-reload store state land on the pasted ids instead of stale ones.
+        if (pastedIds.length > 0) {
+          usePlayerStore.getState().setSelection(pastedIds.map((id) => elementKey(id, targetPath)));
+        }
+        reloadPreview();
+        showToast(toast, "info");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to paste";
+        showToast(message);
+      }
+    },
+    [activeCompPath, recordEdit, reloadPreview, showToast, writeProjectFile],
+  );
 
-    try {
-      const clips = await readClips(targets);
-      let ids: string[] = [];
-      const duplicate = (originalContent: string) => {
-        const liveElements = usePlayerStore
-          .getState()
-          .elements.filter((el) => pathOf(el) === targetPath)
-          .map((el) => ({ ...el, start: toAuthoredStart(el, el.start) }));
-        const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements, true);
-        ids = pasted.ids;
-        return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
-      };
+  // Duplicates the selection right after it, or with `inPlace` at its own time on a track of its own,
+  // without touching the clipboard — a pending copy must survive a Cmd+D. Shares
+  // pasteTimelineClips with handlePaste; only the anchor and clip source differ (the
+  // selection's end or start here, the playhead or the copy's own time there).
+  const handleDuplicate = useCallback(
+    async (options?: InPlace): Promise<boolean> => {
+      const targets = findSelectedClips();
+      if (!targets) return false;
+      const pid = projectIdRef.current;
+      if (!pid) return false;
+
+      const { elements } = targets;
+      const pathOf = (el: TimelineElement) => el.sourceFile || activeCompPath || "index.html";
+      const targetPath = pathOf(elements[0]!);
+      // The copy lands in targetPath's own clock, so anchor and lane check are local to it.
+      const anchorTime = toAuthoredStart(
+        elements[0]!,
+        options?.inPlace
+          ? Math.min(...elements.map((el) => el.start))
+          : Math.max(...elements.map((el) => el.start + el.duration)),
+      );
 
-      await saveProjectFilesWithHistory({
-        projectId: pid,
-        label: clipLabel("Duplicate", clips.length),
-        files: { [targetPath]: duplicate },
-        readFile: (path) => readFileContent(pid, path),
-        writeFile: writeProjectFile,
-        recordEdit,
-      });
+      try {
+        const clips = await readClips(targets);
+        let ids: string[] = [];
+        const duplicate = (originalContent: string) => {
+          const liveElements = usePlayerStore
+            .getState()
+            .elements.filter((el) => pathOf(el) === targetPath)
+            .map((el) => ({ ...el, start: toAuthoredStart(el, el.start) }));
+          const pasted = pasteTimelineClips(originalContent, clips, anchorTime, liveElements, true);
+          ids = pasted.ids;
+          return extendRootDurationInSource(pasted.content, pasted.requiredEnd);
+        };
 
-      // The duplicate becomes the selection, mirroring CapCut's own paste
-      // convention — there is no CapCut Duplicate to match directly (Cmd+D is
-      // a no-op there); this is our own choice for consistency with paste.
-      // Select before reloading, same reason as handlePaste above.
-      if (ids.length > 0) {
-        usePlayerStore.getState().setSelection(ids.map((id) => elementKey(id, targetPath)));
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: clipLabel("Duplicate", clips.length),
+          files: { [targetPath]: duplicate },
+          readFile: (path) => readFileContent(pid, path),
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        // The duplicate becomes the selection, mirroring CapCut's own paste
+        // convention — there is no CapCut Duplicate to match directly (Cmd+D is
+        // a no-op there); this is our own choice for consistency with paste.
+        // Select before reloading, same reason as handlePaste above.
+        if (ids.length > 0) {
+          usePlayerStore.getState().setSelection(ids.map((id) => elementKey(id, targetPath)));
+        }
+        reloadPreview();
+        showToast(clipToast("Duplicated", clips.length), "info");
+        return true;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to duplicate";
+        showToast(message);
+        return false;
       }
-      reloadPreview();
-      showToast(clipToast("Duplicated", clips.length), "info");
-      return true;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to duplicate";
-      showToast(message);
-      return false;
-    }
-  }, [
-    activeCompPath,
-    findSelectedClips,
-    readClips,
-    recordEdit,
-    reloadPreview,
-    showToast,
-    writeProjectFile,
-  ]);
+    },
+    [
+      activeCompPath,
+      findSelectedClips,
+      readClips,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      writeProjectFile,
+    ],
+  );
 
   const handleCut = useCallback(async (): Promise<boolean> => {
     const selected = getSelectedElements();

package/src/hooks/useDomEditAttributeCommits.ts

@@ -5,8 +5,11 @@ import {
   getDomEditTargetKey,
   type DomEditSelection,
 } from "../components/editor/domEditing";
-import type { PersistDomEditOperations } from "./domEditCommitTypes";
-import { reportDomEditPersistFailure } from "./domEditPersistFailure";
+import type { CommitDomAttributeBatch, PersistDomEditOperations } from "./domEditCommitTypes";
+import {
+  DomEditPersistPreparedWriteError,
+  reportDomEditPersistFailure,
+} from "./domEditPersistFailure";
 import { bumpDomEditCommitMapVersion, runDomEditCommit } from "./domEditCommitRunner";
 import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
@@ -54,6 +57,15 @@ export function resolveOptimisticAttributeValue(attr: string, value: string | nu
   return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
 }
 
+function previewAttributeName(op: PatchOperation): string {
+  return op.type === "attribute" ? resolveFullAttrName(op.property, true) : op.property;
+}
+
+function previewAttributeValue(op: PatchOperation): string | null {
+  if (op.type === "html-attribute") return resolveOptimisticAttributeValue(op.property, op.value);
+  return op.value === "" ? null : op.value;
+}
+
 function setOrRemovePreviewAttribute(
   el: HTMLElement,
   fullAttr: string,
@@ -209,7 +221,7 @@ export function useDomEditAttributeCommits({
     ],
   );
 
-  // Commits several data-* attributes on the SAME element in ONE persist call
+  // Commits several data-* and HTML attributes on the SAME element in ONE persist call
   // — needed when two attributes together describe a single logical value
   // (e.g. a pinned timing range's start+duration): committing them through two
   // separate sequential `commitDataAttribute` calls leaves a window where the
@@ -221,32 +233,30 @@ export function useDomEditAttributeCommits({
   // explicit, caller-supplied `selection` (not the "current" one) closes both
   // gaps — matching `onCommitAnimatedProperties`'s same-shaped fix for GSAP
   // property batches.
-  const commitDataAttributes = useCallback(
+  const commitAttributeOps = useCallback(
     async (
       selection: DomEditSelection,
-      attrs: Record<string, string | null>,
-      options: DataAttributeCommitOptions,
-    ) => {
+      ops: PatchOperation[],
+      options: DataAttributeCommitOptions & {
+        prepareContent?: (html: string) => string;
+        syncAutomation?: boolean;
+      },
+    ): Promise<boolean> => {
       const iframe = previewIframeRef.current;
-      const entries = Object.entries(attrs).map(([attr, value]) => ({
-        attr,
-        fullAttr: resolveFullAttrName(attr, true),
-        value,
+      const entries = ops.map((op) => ({
+        fullAttr: previewAttributeName(op),
+        value: previewAttributeValue(op),
       }));
-      const commitKey = `${options.coalescePrefix}:${entries
-        .map((entry) => entry.attr)
+      const commitKey = `${options.coalescePrefix}:${ops
+        .map((op) => op.property)
         .sort()
         .join(",")}:${getDomEditTargetKey(selection)}`;
       const isLatestCommit = bumpDomEditCommitMapVersion(
         domAttributeCommitVersionRef.current,
         commitKey,
       );
-      const ops: PatchOperation[] = entries.map((entry) => ({
-        type: "attribute",
-        property: entry.attr,
-        value: entry.value,
-      }));
       let captured: CapturedMultiAttributeElement | null = null;
+      let landed = false;
 
       await runDomEditCommit({
         capture: () => {
@@ -260,8 +270,7 @@ export function useDomEditAttributeCommits({
         apply: () => {
           if (!captured) return;
           for (const entry of entries) {
-            const nextValue = entry.value === null || entry.value === "" ? null : entry.value;
-            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, nextValue);
+            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, entry.value);
           }
         },
         persist: () =>
@@ -269,8 +278,10 @@ export function useDomEditAttributeCommits({
             label: options.label,
             coalesceKey: commitKey,
             skipRefresh: options.skipRefresh,
+            prepareContent: options.prepareContent,
           }),
-        shouldRevert: () => isLatestCommit(),
+        shouldRevert: (error) =>
+          isLatestCommit() && !(error instanceof DomEditPersistPreparedWriteError),
         revert: () => {
           if (!captured) return;
           for (const entry of entries) {
@@ -283,10 +294,19 @@ export function useDomEditAttributeCommits({
         },
         onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
-        resync: () => refreshDomEditSelectionFromPreview(selection),
-        onSettled: options.onSettled,
+        resync: () => {
+          refreshDomEditSelectionFromPreview(selection);
+          if (options.syncAutomation) {
+            syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
+          }
+        },
+        onSettled: (ok) => {
+          landed = ok;
+          options.onSettled?.(ok);
+        },
         onFinally: isLatestCommit.release,
       });
+      return landed;
     },
     [
       activeCompPath,
@@ -299,14 +319,35 @@ export function useDomEditAttributeCommits({
 
   const handleDomAttributesCommit = useCallback(
     async (selection: DomEditSelection, attrs: Record<string, string>) => {
-      await commitDataAttributes(selection, attrs, {
-        label: "Edit timing",
-        coalescePrefix: "attrs",
+      await commitAttributeOps(
+        selection,
+        Object.entries(attrs).map(([property, value]) => ({
+          type: "attribute",
+          property,
+          value,
+        })),
+        {
+          label: "Edit timing",
+          coalescePrefix: "attrs",
+          skipRefresh: false,
+          refreshAfter: true,
+        },
+      );
+    },
+    [commitAttributeOps],
+  );
+
+  const handleDomAttributeBatchCommit: CommitDomAttributeBatch = useCallback(
+    (selection, ops, options) =>
+      commitAttributeOps(selection, ops, {
+        label: options.label,
+        coalescePrefix: "attr-batch",
         skipRefresh: false,
         refreshAfter: true,
-      });
-    },
-    [commitDataAttributes],
+        syncAutomation: true,
+        prepareContent: options.prepareContent,
+      }),
+    [commitAttributeOps],
   );
 
   const handleDomAttributeCommit = useCallback(
@@ -438,5 +479,6 @@ export function useDomEditAttributeCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
   };
 }