@hyperframes/studio 0.7.57 → 0.7.59

package/src/hooks/timelineTrackVisibility.ts

@@ -33,7 +33,8 @@ interface ToggleTimelineTrackHiddenInput {
 }
 
 interface ToggleTimelineElementHiddenInput extends Omit<ToggleTimelineTrackHiddenInput, "track"> {
-  elementKey: string;
+  /** One timeline key, or several to hide/show in a single atomic file write. */
+  elementKey: string | readonly string[];
 }
 
 interface SetElementsHiddenInput {
@@ -62,7 +63,7 @@ interface UseTimelineTrackVisibilityEditingInput extends Omit<
 
 interface UseTimelineElementVisibilityEditingInput extends Omit<
   ToggleTimelineElementHiddenInput,
-  "projectId" | "elementKey" | "hidden" | "previewIframe"
+  "projectId" | "elementKey" | "hidden" | "previewIframe" | "timelineElements"
 > {
   projectIdRef: ReadonlyRef<string | null>;
   previewIframeRef: ReadonlyRef<HTMLIFrameElement | null>;
@@ -82,9 +83,10 @@ function patchLiveHiddenState(
   iframe: HTMLIFrameElement | null,
   elements: readonly TimelineElement[],
   hidden: boolean,
+  activeCompPath: string | null,
 ): void {
   for (const element of elements) {
-    const target = findTimelineElementInIframe(iframe, element);
+    const target = findTimelineElementInIframe(iframe, element, activeCompPath);
     if (!target) continue;
     if (hidden) {
       target.setAttribute("data-hidden", "");
@@ -134,7 +136,7 @@ async function setElementsHidden({
 }: SetElementsHiddenInput): Promise<string[]> {
   if (elements.length === 0) return [];
 
-  patchLiveHiddenState(previewIframe, elements, hidden);
+  patchLiveHiddenState(previewIframe, elements, hidden, activeCompPath);
   reseekPreviewRuntime(previewIframe);
 
   const hiddenOperation: PatchOperation = {
@@ -188,7 +190,7 @@ async function setElementsHidden({
     // The optimistic live patch already ran; a patch-target/save failure here would
     // otherwise leave the preview showing the wrong visibility until a reload. Revert
     // the live DOM to the prior state so what's on screen matches what persisted.
-    patchLiveHiddenState(previewIframe, elements, !hidden);
+    patchLiveHiddenState(previewIframe, elements, !hidden, activeCompPath);
     reseekPreviewRuntime(previewIframe);
     throw error;
   }
@@ -232,13 +234,21 @@ export async function toggleTimelineElementHidden({
   domEditSaveTimestampRef,
   pendingTimelineEditPathRef,
 }: ToggleTimelineElementHiddenInput): Promise<string[]> {
-  const element = timelineElements.find((item) => (item.key ?? item.id) === elementKey);
+  const keys = new Set(typeof elementKey === "string" ? [elementKey] : elementKey);
+  const elements = timelineElements.filter((item) => keys.has(item.key ?? item.id));
   return setElementsHidden({
     projectId,
     activeCompPath,
-    elements: element ? [element] : [],
+    elements,
     hidden,
-    label: hidden ? "Hide element" : "Show element",
+    label:
+      elements.length > 1
+        ? hidden
+          ? `Hide ${elements.length} elements`
+          : `Show ${elements.length} elements`
+        : hidden
+          ? "Hide element"
+          : "Show element",
     previewIframe,
     writeProjectFile,
     recordEdit,
@@ -312,7 +322,6 @@ export function useTimelineTrackVisibilityEditing({
 export function useTimelineElementVisibilityEditing({
   projectIdRef,
   activeCompPath,
-  timelineElements,
   showToast,
   writeProjectFile,
   recordEdit,
@@ -322,11 +331,20 @@ export function useTimelineElementVisibilityEditing({
   isRecordingRef,
   forceReloadSdkSession,
 }: UseTimelineElementVisibilityEditingInput): (
-  elementKey: string,
+  elementKey: string | readonly string[],
   hidden: boolean,
 ) => Promise<void> {
+  // Resolve against the EXPANDED rows, not the raw store list — a nested
+  // sub-composition child has no entry of its own in the raw list (only its
+  // host does), so an elementKey for such a child (the
+  // `sourceFile#domId`-shaped virtual key `resolveTimelineIdForSelection`
+  // falls back to) would never match anything there and Hide All would
+  // silently no-op for it. The expanded list synthesizes a real, patchable
+  // TimelineElement (with matching key/domId/sourceFile) for each visible
+  // child whenever its host is currently expanded.
+  const expandedElements = useExpandedTimelineElements();
   return useCallback(
-    async (elementKey: string, hidden: boolean) => {
+    async (elementKey: string | readonly string[], hidden: boolean) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -337,7 +355,7 @@ export function useTimelineElementVisibilityEditing({
         await toggleTimelineElementHidden({
           projectId: pid,
           activeCompPath,
-          timelineElements,
+          timelineElements: expandedElements,
           elementKey,
           hidden,
           previewIframe: previewIframeRef.current,
@@ -356,7 +374,7 @@ export function useTimelineElementVisibilityEditing({
     },
     [
       activeCompPath,
-      timelineElements,
+      expandedElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,

package/src/hooks/useAppHotkeys.ts

@@ -9,6 +9,7 @@ import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { STUDIO_RAZOR_TOOL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 
 function iframeContentWindow(iframe: HTMLIFrameElement | null): Window | null {
   try {
@@ -87,6 +88,7 @@ interface HistoryResult {
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
   writeFile: (path: string, content: string) => Promise<void>;
+  serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
 }
 interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
@@ -367,6 +369,11 @@ export function useAppHotkeys({
     },
     [domEditSaveTimestampRef, writeProjectFile],
   );
+  const serializeHistoryFiles = useCallback(
+    <T>(paths: readonly string[], task: () => Promise<T>) =>
+      serializeStudioFileMutations(writeProjectFile, paths, task),
+    [writeProjectFile],
+  );
 
   const applyHistory = useCallback(
     async (direction: "undo" | "redo") => {
@@ -377,6 +384,7 @@ export function useAppHotkeys({
       const result = await editHistory[direction]({
         readFile: readHistoryFile,
         writeFile: writeHistoryFile,
+        serialize: serializeHistoryFiles,
       });
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
@@ -406,6 +414,7 @@ export function useAppHotkeys({
       syncHistoryPreviewAfterApply,
       waitForPendingDomEditSaves,
       writeHistoryFile,
+      serializeHistoryFiles,
       onAfterUndoRedo,
       activeCompPath,
       forceReloadSdkSession,

package/src/hooks/useClipboard.ts

@@ -8,6 +8,7 @@ import { insertTimelineAssetIntoSource } from "../utils/timelineAssetDrop";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+import { findElementForSelection } from "../components/editor/domEditingElement";
 import { readFileContent } from "./timelineEditingHelpers";
 
 interface RecordEditInput {
@@ -34,6 +35,7 @@ interface UseClipboardOptions {
 function getElementOuterHtml(
   iframeRef: React.MutableRefObject<HTMLIFrameElement | null>,
   selection: DomEditSelection,
+  activeCompositionPath: string | null,
 ): string | null {
   let doc: Document | null = null;
   try {
@@ -43,15 +45,7 @@ function getElementOuterHtml(
   }
   if (!doc) return null;
 
-  let el: Element | null = null;
-  if (selection.id) {
-    el = doc.getElementById(selection.id);
-  }
-  if (!el && selection.selector) {
-    const matches = doc.querySelectorAll(selection.selector);
-    el = matches[selection.selectorIndex ?? 0] ?? null;
-  }
-  return el && "outerHTML" in el ? (el as Element).outerHTML : null;
+  return findElementForSelection(doc, selection, activeCompositionPath)?.outerHTML ?? null;
 }
 
 export function useClipboard({
@@ -71,6 +65,9 @@ export function useClipboard({
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
 
+  // The copy-mode branches predate this change; this diff only replaces its
+  // duplicated DOM lookup with the canonical composition-aware resolver.
+  // fallow-ignore-next-line complexity
   const handleCopy = useCallback((): boolean => {
     const { selectedElementId, elements } = usePlayerStore.getState();
 
@@ -84,13 +81,18 @@ export function useClipboard({
       try {
         const doc = previewIframeRef.current?.contentDocument;
         if (doc) {
-          let el: Element | null = null;
-          if (element.domId) el = doc.getElementById(element.domId);
-          if (!el && element.selector) {
-            const matches = doc.querySelectorAll(element.selector);
-            el = matches[element.selectorIndex ?? 0] ?? null;
-          }
-          if (el && "outerHTML" in el) html = (el as Element).outerHTML;
+          html =
+            findElementForSelection(
+              doc,
+              {
+                hfId: element.hfId,
+                id: element.domId,
+                selector: element.selector,
+                selectorIndex: element.selectorIndex,
+                sourceFile: targetPath,
+              },
+              activeCompPath,
+            )?.outerHTML ?? null;
         }
       } catch {
         // cross-origin frame
@@ -110,7 +112,7 @@ export function useClipboard({
     // DOM element copy
     const domSelection = domEditSelectionRef.current;
     if (domSelection) {
-      const html = getElementOuterHtml(previewIframeRef, domSelection);
+      const html = getElementOuterHtml(previewIframeRef, domSelection, activeCompPath);
       if (!html) {
         showToast("Unable to copy this element.", "info");
         return false;

package/src/hooks/useDomEditAttributeCommits.ts

@@ -25,6 +25,7 @@ interface DataAttributeCommitOptions {
   coalescePrefix: string;
   skipRefresh: boolean;
   refreshAfter?: boolean;
+  onSettled?: (ok: boolean) => void;
 }
 
 function resolveFullAttrName(attr: string, prefixData: boolean | undefined): string {
@@ -57,6 +58,25 @@ interface CapturedAttributeElement {
   previousValue: string | null;
 }
 
+interface CapturedMultiAttributeElement {
+  element: HTMLElement;
+  previousValues: Map<string, string | null>;
+}
+
+function captureMultiAttributeElement(
+  doc: Document | null | undefined,
+  selection: DomEditSelection,
+  activeCompPath: string | null,
+  fullAttrs: string[],
+): CapturedMultiAttributeElement | null {
+  const el = findPreviewAttributeElement(doc, selection, activeCompPath);
+  if (!el) return null;
+  const previousValues = new Map(
+    fullAttrs.map((fullAttr) => [fullAttr, el.getAttribute(fullAttr)]),
+  );
+  return { element: el, previousValues };
+}
+
 function captureAttributeElement(
   doc: Document | null | undefined,
   selection: DomEditSelection,
@@ -128,6 +148,7 @@ export function useDomEditAttributeCommits({
         onError: (error) => reportDomEditPersistFailure(domEditSelection, [op], error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
         resync: () => refreshDomEditSelectionFromPreview(domEditSelection),
+        onSettled: options.onSettled,
       });
     },
     [
@@ -140,6 +161,105 @@ export function useDomEditAttributeCommits({
     ],
   );
 
+  // Commits several data-* 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
+  // second call resolves `domEditSelection` fresh from current hook state, so
+  // a selection change between the two awaits would misdirect it at the
+  // NEWLY selected element instead of the one being edited, and a failure of
+  // just the second call would leave the two attributes in an inconsistent
+  // half-applied state. Bundling them into one `PatchOperation[]` against an
+  // explicit, caller-supplied `selection` (not the "current" one) closes both
+  // gaps — matching `onCommitAnimatedProperties`'s same-shaped fix for GSAP
+  // property batches.
+  const commitDataAttributes = useCallback(
+    async (
+      selection: DomEditSelection,
+      attrs: Record<string, string | null>,
+      options: DataAttributeCommitOptions,
+    ) => {
+      const iframe = previewIframeRef.current;
+      const entries = Object.entries(attrs).map(([attr, value]) => ({
+        attr,
+        fullAttr: resolveFullAttrName(attr, true),
+        value,
+      }));
+      const commitKey = `${options.coalescePrefix}:${entries
+        .map((entry) => entry.attr)
+        .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;
+
+      await runDomEditCommit({
+        capture: () => {
+          captured = captureMultiAttributeElement(
+            iframe?.contentDocument,
+            selection,
+            activeCompPath,
+            entries.map((entry) => entry.fullAttr),
+          );
+        },
+        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);
+          }
+        },
+        persist: () =>
+          persistDomEditOperations(selection, ops, {
+            label: options.label,
+            coalesceKey: commitKey,
+            skipRefresh: options.skipRefresh,
+          }),
+        shouldRevert: () => isLatestCommit(),
+        revert: () => {
+          if (!captured) return;
+          for (const entry of entries) {
+            setOrRemovePreviewAttribute(
+              captured.element,
+              entry.fullAttr,
+              captured.previousValues.get(entry.fullAttr) ?? null,
+            );
+          }
+        },
+        onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
+        shouldResync: () => isLatestCommit() && !!options.refreshAfter,
+        resync: () => refreshDomEditSelectionFromPreview(selection),
+        onSettled: options.onSettled,
+      });
+    },
+    [
+      activeCompPath,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      showToast,
+      previewIframeRef,
+    ],
+  );
+
+  const handleDomAttributesCommit = useCallback(
+    async (selection: DomEditSelection, attrs: Record<string, string>) => {
+      await commitDataAttributes(selection, attrs, {
+        label: "Edit timing",
+        coalescePrefix: "attrs",
+        skipRefresh: false,
+        refreshAfter: true,
+      });
+    },
+    [commitDataAttributes],
+  );
+
   const handleDomAttributeCommit = useCallback(
     async (attr: string, value: string) => {
       await commitDataAttribute(attr, value, {
@@ -153,11 +273,12 @@ export function useDomEditAttributeCommits({
   );
 
   const handleDomAttributeLiveCommit = useCallback(
-    async (attr: string, value: string | null) => {
+    async (attr: string, value: string | null, onSettled?: (ok: boolean) => void) => {
       await commitDataAttribute(attr, value, {
         label: `Edit ${attr.replace(/^(data-)?/, "").replace(/-/g, " ")}`,
         coalescePrefix: "attr-live",
         skipRefresh: true,
+        onSettled,
       });
     },
     [commitDataAttribute],
@@ -223,5 +344,6 @@ export function useDomEditAttributeCommits({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
   };
 }