npm - @hyperframes/studio - Versions diffs - 0.7.55 → 0.7.56 - Mend

@hyperframes/studio 0.7.55 → 0.7.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (237) hide show

package/dist/assets/{index-BXaqaVKt.js → index-BWnOxAiH.js} +1 -1
package/dist/assets/{index-CPetwHFV.js → index-C4csZims.js} +1 -1
package/dist/assets/index-CmVCjZjp.js +423 -0
package/dist/assets/index-D-GyYi2d.css +1 -0
package/dist/{chunk-SOTCF4DF.js → chunk-5QSIMBEJ.js} +2 -1
package/dist/chunk-5QSIMBEJ.js.map +1 -0
package/dist/{domEditingLayers-2ECJK24D.js → domEditingLayers-6LQGKPOI.js} +2 -2
package/dist/index.d.ts +146 -144
package/dist/index.html +2 -2
package/dist/index.js +40414 -37680
package/dist/index.js.map +1 -1
package/package.json +7 -7
package/src/App.tsx +106 -96
package/src/components/EditorShell.tsx +253 -0
package/src/components/StudioGlobalDragOverlay.tsx +1 -3
package/src/components/StudioLeftSidebar.tsx +13 -3
package/src/components/StudioRightPanel.tsx +8 -3
package/src/components/TimelineToolbar.test.tsx +2 -2
package/src/components/TimelineToolbar.tsx +179 -121
package/src/components/editor/DomEditCropHandles.test.tsx +74 -3
package/src/components/editor/DomEditCropHandles.tsx +64 -29
package/src/components/editor/DomEditOverlay.test.ts +245 -279
package/src/components/editor/DomEditOverlay.tsx +158 -126
package/src/components/editor/DomEditOverlayHover.test.tsx +90 -0
package/src/components/editor/DomEditRotateHandle.tsx +38 -18
package/src/components/editor/DomEditSelectionChrome.test.tsx +80 -0
package/src/components/editor/DomEditSelectionChrome.tsx +257 -0
package/src/components/editor/LayersPanel.test.ts +66 -2
package/src/components/editor/LayersPanel.tsx +43 -1
package/src/components/editor/OffCanvasIndicators.test.tsx +34 -0
package/src/components/editor/OffCanvasIndicators.tsx +49 -10
package/src/components/editor/SnapGuideOverlay.tsx +28 -23
package/src/components/editor/SnapToolbar.test.tsx +0 -1
package/src/components/editor/anchoredResizeCommitFeedsOffset.test.ts +214 -0
package/src/components/editor/anchoredResizeReleaseShift.test.ts +106 -10
package/src/components/editor/domEditNudge.test.ts +80 -0
package/src/components/editor/domEditNudge.ts +44 -0
package/src/components/editor/domEditOverlayGeometry.test.ts +167 -1
package/src/components/editor/domEditOverlayGeometry.ts +280 -20
package/src/components/editor/domEditOverlayGestures.ts +44 -41
package/src/components/editor/domEditOverlayStartGesture.ts +62 -2
package/src/components/editor/domEditResizeLocal.test.ts +131 -0
package/src/components/editor/domEditResizeLocal.ts +125 -0
package/src/components/editor/domEditingDom.ts +1 -1
package/src/components/editor/manualEditsDomPatches.test.ts +47 -0
package/src/components/editor/manualOffsetDrag.ts +55 -12
package/src/components/editor/offCanvasIndicatorGeometry.ts +31 -10
package/src/components/editor/offCanvasIndicatorRefresh.test.tsx +25 -1
package/src/components/editor/resizeDraft.ts +108 -0
package/src/components/editor/snapEngine.test.ts +12 -78
package/src/components/editor/snapEngine.ts +13 -53
package/src/components/editor/useDomEditNudge.test.tsx +228 -0
package/src/components/editor/useDomEditNudge.ts +254 -0
package/src/components/editor/useDomEditOverlayGestures.ts +115 -116
package/src/components/editor/useDomEditOverlayRects.ts +9 -2
package/src/components/nle/AssetPreviewOverlay.tsx +147 -0
package/src/components/nle/NLEContext.test.ts +144 -0
package/src/components/nle/NLEContext.tsx +328 -0
package/src/components/nle/NLEPreview.tsx +1 -1
package/src/components/nle/PreviewOverlays.tsx +240 -0
package/src/components/nle/PreviewPane.tsx +163 -0
package/src/components/nle/TimelinePane.test.ts +60 -0
package/src/components/nle/TimelinePane.tsx +293 -0
package/src/components/nle/TimelineResizeDivider.tsx +8 -2
package/src/components/nle/useCompositionStack.test.tsx +44 -0
package/src/components/nle/useCompositionStack.ts +17 -9
package/src/components/nle/useTimelineEditCallbacks.ts +217 -0
package/src/components/sidebar/AssetCard.tsx +326 -0
package/src/components/sidebar/AssetContextMenu.tsx +15 -30
package/src/components/sidebar/AssetsTab.test.ts +96 -0
package/src/components/sidebar/AssetsTab.tsx +71 -206
package/src/components/sidebar/AudioRow.tsx +39 -2
package/src/components/sidebar/BlocksTab.tsx +8 -1
package/src/components/sidebar/LeftSidebar.tsx +4 -1
package/src/components/sidebar/assetHelpers.ts +29 -0
package/src/contexts/DomEditContext.tsx +9 -0
package/src/contexts/StudioContext.tsx +9 -8
package/src/contexts/TimelineEditContext.tsx +3 -7
package/src/hooks/deleteSelectedKeyframes.ts +35 -0
package/src/hooks/domEditCommitTypes.ts +12 -1
package/src/hooks/domSelectionTestHarness.ts +14 -0
package/src/hooks/gestureTransaction.test.ts +311 -0
package/src/hooks/gestureTransaction.ts +199 -0
package/src/hooks/gsapDragCommit.test.ts +141 -41
package/src/hooks/gsapDragCommit.ts +64 -74
package/src/hooks/gsapDragStaticSetHelpers.ts +9 -21
package/src/hooks/gsapResizeIntercept.test.ts +69 -0
package/src/hooks/gsapResizeIntercept.ts +38 -10
package/src/hooks/gsapRuntimeBridge.test.ts +49 -13
package/src/hooks/gsapRuntimeBridge.ts +4 -4
package/src/hooks/gsapScriptCommitTypes.ts +16 -5
package/src/hooks/gsapShared.test.ts +19 -1
package/src/hooks/gsapShared.ts +14 -0
package/src/hooks/patchDocumentRootDuration.test.ts +71 -0
package/src/hooks/timelineEditingGsap.ts +14 -0
package/src/hooks/timelineEditingHelpers.test.ts +34 -1
package/src/hooks/timelineEditingHelpers.ts +22 -48
package/src/hooks/timelineMoveAdapter.test.ts +77 -0
package/src/hooks/timelineMoveAdapter.ts +37 -0
package/src/hooks/useAnimatedPropertyCommit.test.tsx +36 -8
package/src/hooks/useAnimatedPropertyCommit.ts +31 -26
package/src/hooks/useAppHotkeys.ts +16 -25
package/src/hooks/useBlockHandlers.ts +55 -27
package/src/hooks/useContextMenuDismiss.ts +31 -7
package/src/hooks/useDomEditCommits.test.tsx +154 -1
package/src/hooks/useDomEditCommits.ts +100 -3
package/src/hooks/useDomEditPositionPatchCommit.ts +2 -0
package/src/hooks/useDomEditSession.ts +2 -2
package/src/hooks/useDomEditTextCommits.test.tsx +135 -0
package/src/hooks/useDomEditTextCommits.ts +8 -3
package/src/hooks/useDomEditWiring.ts +7 -9
package/src/hooks/useDomGeometryCommits.ts +17 -2
package/src/hooks/useDomSelection.test.ts +2 -36
package/src/hooks/useDomSelection.ts +81 -51
package/src/hooks/useDomSelectionSelectionGuards.test.ts +276 -0
package/src/hooks/useElementLifecycleOps.test.tsx +258 -0
package/src/hooks/useElementLifecycleOps.ts +40 -71
package/src/hooks/useEnableKeyframes.test.ts +142 -1
package/src/hooks/useEnableKeyframes.ts +73 -29
package/src/hooks/useGestureCommit.test.tsx +130 -0
package/src/hooks/useGestureCommit.ts +32 -8
package/src/hooks/useGroupCommits.ts +7 -28
package/src/hooks/useGsapAwareEditing.test.tsx +239 -0
package/src/hooks/useGsapAwareEditing.ts +115 -20
package/src/hooks/useGsapKeyframeOps.test.tsx +59 -0
package/src/hooks/useGsapKeyframeOps.ts +38 -10
package/src/hooks/useGsapScriptCommits.test.tsx +40 -1
package/src/hooks/useGsapScriptCommits.ts +134 -50
package/src/hooks/useGsapSelectionHandlers.ts +49 -16
package/src/hooks/useMusicBeatAnalysis.ts +72 -36
package/src/hooks/usePersistentEditHistory.test.ts +33 -0
package/src/hooks/usePersistentEditHistory.ts +92 -58
package/src/hooks/usePreviewPersistence.ts +25 -7
package/src/hooks/useRazorSplit.history.test.tsx +148 -18
package/src/hooks/useRazorSplit.test.ts +269 -0
package/src/hooks/useRazorSplit.testHelpers.ts +64 -0
package/src/hooks/useRazorSplit.ts +107 -36
package/src/hooks/useRenderClipContent.ts +24 -6
package/src/hooks/useStudioContextValue.ts +15 -5
package/src/hooks/useStudioUrlState.ts +2 -4
package/src/hooks/useTimelineEditing.test.tsx +20 -29
package/src/hooks/useTimelineEditingTypes.ts +6 -0
package/src/hooks/useTimelineGroupEditing.ts +18 -4
package/src/index.ts +1 -1
package/src/player/components/ImageThumbnail.test.tsx +173 -0
package/src/player/components/ImageThumbnail.tsx +160 -0
package/src/player/components/PlayheadIndicator.tsx +50 -5
package/src/player/components/Timeline.test.ts +102 -19
package/src/player/components/Timeline.tsx +194 -194
package/src/player/components/TimelineCanvas.tsx +207 -521
package/src/player/components/TimelineClip.tsx +4 -1
package/src/player/components/TimelineClipDiamonds.tsx +9 -40
package/src/player/components/TimelineEmptyState.tsx +3 -1
package/src/player/components/TimelineLanes.tsx +487 -0
package/src/player/components/TimelineOverlays.tsx +122 -0
package/src/player/components/VideoThumbnail.test.tsx +152 -0
package/src/player/components/VideoThumbnail.tsx +28 -7
package/src/player/components/thumbnailUtils.test.ts +127 -0
package/src/player/components/thumbnailUtils.ts +54 -0
package/src/player/components/timelineCallbacks.ts +18 -18
package/src/player/components/timelineClipChildren.tsx +39 -0
package/src/player/components/timelineClipDragCommit.test.ts +943 -0
package/src/player/components/timelineClipDragCommit.ts +401 -0
package/src/player/components/timelineClipDragPreview.test.ts +144 -0
package/src/player/components/timelineClipDragPreview.ts +323 -38
package/src/player/components/timelineClipDragTypes.ts +65 -0
package/src/player/components/timelineCollision.test.ts +42 -2
package/src/player/components/timelineDragDrop.ts +69 -60
package/src/player/components/timelineEditCapabilities.ts +52 -0
package/src/player/components/timelineEditing.test.ts +1 -1
package/src/player/components/timelineEditing.ts +76 -59
package/src/player/components/timelineGroupEditing.test.ts +126 -0
package/src/player/components/timelineGroupEditing.ts +133 -0
package/src/player/components/timelineGroupResizeCommit.ts +54 -0
package/src/player/components/timelineLayout.test.ts +95 -23
package/src/player/components/timelineLayout.ts +120 -61
package/src/player/components/timelineMarquee.test.ts +197 -0
package/src/player/components/timelineMarquee.ts +112 -0
package/src/player/components/timelineOptimisticRevision.ts +42 -0
package/src/player/components/timelineTheme.ts +6 -1
package/src/player/components/useResolvedTimelineEditCallbacks.ts +25 -3
package/src/player/components/useTimelineClipDrag.resize.test.tsx +241 -0
package/src/player/components/useTimelineClipDrag.ts +380 -386
package/src/player/components/useTimelineEditPinning.ts +121 -0
package/src/player/components/useTimelineGeometry.ts +129 -0
package/src/player/components/useTimelinePlayhead.ts +4 -16
package/src/player/components/useTimelineRangeSelection.ts +341 -50
package/src/player/components/useTimelineStackingSync.test.tsx +67 -0
package/src/player/components/useTimelineStackingSync.ts +83 -0
package/src/player/hooks/useExpandedTimelineElements.ts +0 -3
package/src/player/hooks/usePlaybackKeyboard.ts +5 -0
package/src/player/hooks/useTimelinePlayer.ts +48 -53
package/src/player/hooks/useTimelinePlayerLoop.ts +85 -0
package/src/player/index.ts +3 -2
package/src/player/lib/time.test.ts +19 -19
package/src/player/lib/time.ts +6 -2
package/src/player/lib/timelineDOM.test.ts +25 -98
package/src/player/lib/timelineDOM.ts +12 -81
package/src/player/lib/timelineElementHelpers.ts +54 -5
package/src/player/lib/timelineIframeHelpers.ts +2 -0
package/src/player/store/playerStore.ts +62 -3
package/src/styles/studio.css +27 -0
package/src/utils/assetPreviewStore.ts +33 -0
package/src/utils/blockInstaller.ts +10 -2
package/src/utils/editHistory.test.ts +35 -0
package/src/utils/gsapSoftReload.test.ts +119 -1
package/src/utils/gsapSoftReload.ts +153 -0
package/src/utils/mediaTypes.ts +3 -2
package/src/utils/resizeDebug.ts +55 -0
package/src/utils/rootDuration.test.ts +90 -1
package/src/utils/rootDuration.ts +76 -13
package/src/utils/sdkCutover.ts +4 -0
package/src/utils/studioFileHistory.ts +37 -7
package/src/utils/studioHelpers.ts +62 -0
package/src/utils/studioPreviewHelpers.test.ts +65 -8
package/src/utils/studioPreviewHelpers.ts +10 -0
package/src/utils/studioTelemetry.ts +4 -1
package/src/utils/studioUrlState.test.ts +0 -1
package/src/utils/timelineAssetDrop.ts +62 -0
package/src/utils/timelineDiscovery.ts +0 -17
package/dist/assets/index-BRwkMj0w.js +0 -423
package/dist/assets/index-Dq7FEg0K.css +0 -1
package/dist/chunk-SOTCF4DF.js.map +0 -1
package/src/components/StudioPreviewArea.tsx +0 -500
package/src/components/nle/NLELayout.test.ts +0 -12
package/src/components/nle/NLELayout.tsx +0 -591
package/src/player/components/TimelineLayerGutter.tsx +0 -61
package/src/player/components/TimelineSelectionOverlays.tsx +0 -55
package/src/player/components/timelineMarqueeSelection.test.ts +0 -87
package/src/player/components/timelineSnapTargets.test.ts +0 -144
package/src/player/components/timelineSnapTargets.ts +0 -164
package/src/player/components/useTimelineClipDrag.test.tsx +0 -506
package/src/player/components/useTimelineClipGroupDrag.ts +0 -417
package/src/player/components/useTimelineMarqueeSelection.test.tsx +0 -231
package/src/player/components/useTimelineMarqueeSelection.ts +0 -276
package/src/utils/timelineDiscovery.test.ts +0 -90
/package/dist/{domEditingLayers-2ECJK24D.js.map → domEditingLayers-6LQGKPOI.js.map} +0 -0

package/src/utils/gsapSoftReload.test.ts CHANGED Viewed

@@ -1,7 +1,12 @@
 // @vitest-environment happy-dom
 import { describe, it, expect, vi } from "vitest";
-import { applySoftReload, ensureMotionPathPluginLoaded } from "./gsapSoftReload";
+import {
+  applySoftReload,
+  ensureMotionPathPluginLoaded,
+  diffSoftReloadableRestore,
+  applyUndoRestoreToPreview,
+} from "./gsapSoftReload";
 const SCRIPT_TEXT = `
 window.__timelines = window.__timelines || {};
@@ -447,3 +452,116 @@ describe("applySoftReload authored-opacity restore", () => {
     expect(restoreOpacity(el)).toBe("");
   });
 });
+// ── Bug 2: undo/redo restore soft-apply ──────────────────────────────────────
+const wrap = (body: string) => `<html><body>${body}</body></html>`;
+describe("diffSoftReloadableRestore", () => {
+  it("reports the changed id for an attribute/inline-style-only diff", () => {
+    const prev = wrap(`<div id="a" style="translate: 10px 10px">t</div>`);
+    const next = wrap(`<div id="a" style="translate: 0px 0px">t</div>`);
+    expect(diffSoftReloadableRestore(prev, next)).toEqual({ changedElementIds: ["a"] });
+  });
+  it("treats a structural change (added element) as NOT soft-reloadable", () => {
+    const prev = wrap(`<div id="a">t</div>`);
+    const next = wrap(`<div id="a">t</div><div id="a-split">t</div>`);
+    expect(diffSoftReloadableRestore(prev, next)).toBeNull();
+  });
+  it("treats an element text/child change as NOT soft-reloadable", () => {
+    const prev = wrap(`<div id="a">one</div>`);
+    const next = wrap(`<div id="a">two</div>`);
+    expect(diffSoftReloadableRestore(prev, next)).toBeNull();
+  });
+  it("allows a GSAP-script-only change (no id'd-attribute diff)", () => {
+    const prev = wrap(
+      `<div id="a">t</div><script>window.__timelines["root"]=gsap.timeline().to("#a",{x:1});</script>`,
+    );
+    const next = wrap(
+      `<div id="a">t</div><script>window.__timelines["root"]=gsap.timeline().to("#a",{x:9});</script>`,
+    );
+    expect(diffSoftReloadableRestore(prev, next)).toEqual({ changedElementIds: [] });
+  });
+});
+function buildLiveIframe(bodyHtml: string) {
+  const doc = document.implementation.createHTMLDocument("");
+  doc.body.innerHTML = bodyHtml;
+  const contentWindow = {
+    gsap: { timeline: () => {} },
+    __hfForceTimelineRebind: () => {},
+    __timelines: {} as Record<string, unknown>,
+    __player: { getTime: () => 3, seek: vi.fn() },
+    __hfStudioManualEditsApply: vi.fn(),
+  };
+  return {
+    iframe: { contentWindow, contentDocument: doc } as unknown as HTMLIFrameElement,
+    contentWindow,
+    doc,
+  };
+}
+describe("applyUndoRestoreToPreview", () => {
+  const ROOT = "index.html";
+  it("soft-applies an attribute/style-only restore: syncs the live element, no full reload", () => {
+    const { iframe, contentWindow, doc } = buildLiveIframe(
+      `<div id="a" style="translate: 10px 10px" data-hf-path-offset="true">t</div>`,
+    );
+    const reloadPreview = vi.fn();
+    const files = {
+      [ROOT]: {
+        previous: wrap(
+          `<div id="a" style="translate: 10px 10px" data-hf-path-offset="true">t</div>`,
+        ),
+        restored: wrap(`<div id="a" style="translate: 0px 0px" data-hf-path-offset="true">t</div>`),
+      },
+    };
+    const outcome = applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview);
+    expect(outcome).toBe("soft");
+    expect(reloadPreview).not.toHaveBeenCalled();
+    // Live element reverted to the restored inline style.
+    expect(doc.getElementById("a")!.getAttribute("style")).toBe("translate: 0px 0px");
+    // No GSAP script in the restore → the manual-edit reapply runs, playhead held.
+    expect(contentWindow.__player.seek).toHaveBeenCalledWith(3);
+    expect(contentWindow.__hfStudioManualEditsApply).toHaveBeenCalled();
+  });
+  it("full-reloads a multi-file restore", () => {
+    const { iframe } = buildLiveIframe(`<div id="a">t</div>`);
+    const reloadPreview = vi.fn();
+    const files = {
+      [ROOT]: {
+        previous: wrap(`<div id="a" style="x">t</div>`),
+        restored: wrap(`<div id="a">t</div>`),
+      },
+      "scenes/intro.html": { previous: "a", restored: "b" },
+    };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+  it("full-reloads a structural restore (split/delete undo)", () => {
+    const { iframe } = buildLiveIframe(`<div id="a">t</div><div id="a-split">t</div>`);
+    const reloadPreview = vi.fn();
+    const files = {
+      [ROOT]: {
+        previous: wrap(`<div id="a">t</div><div id="a-split">t</div>`),
+        restored: wrap(`<div id="a">t</div>`),
+      },
+    };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+  it("full-reloads when the restore touches a sub-comp, not the active comp", () => {
+    const { iframe } = buildLiveIframe(`<div id="a">t</div>`);
+    const reloadPreview = vi.fn();
+    const files = { "scenes/intro.html": { previous: "a", restored: "b" } };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+});

package/src/utils/gsapSoftReload.ts CHANGED Viewed

@@ -183,6 +183,159 @@ export interface SoftReloadOptions {
   authoredHtml?: string;
 }
+/** One file's restore from the edit-history store: before (live) / after (target) bytes. */
+export interface UndoRestoreFile {
+  previous: string;
+  restored: string;
+}
+function idElementMap(doc: Document): Map<string, Element> {
+  const map = new Map<string, Element>();
+  for (const el of doc.querySelectorAll("[id]")) {
+    const id = el.getAttribute("id");
+    if (id) map.set(id, el);
+  }
+  return map;
+}
+// Strip id'd elements to bare `id` and blank GSAP scripts, in place: docs that
+// differ only in id'd attributes/inline-style/script text normalize equal; any
+// residual difference is beyond soft-reload's reach → caller full-reloads.
+function normalizeSoftResidual(doc: Document): void {
+  for (const el of doc.querySelectorAll("[id]")) {
+    const id = el.getAttribute("id");
+    for (const name of [...el.getAttributeNames()]) {
+      if (name !== "id") el.removeAttribute(name);
+    }
+    if (id) el.setAttribute("id", id);
+  }
+  for (const script of findGsapScriptElements(doc)) script.textContent = "";
+}
+// Soft-reloadable iff the docs differ SOLELY in id'd-element attributes/inline
+// style and/or the GSAP script; returns the changed ids to sync onto the live
+// DOM. Structural/text diffs → null → the caller full-reloads. Pure.
+export function diffSoftReloadableRestore(
+  previous: string,
+  restored: string,
+): { changedElementIds: string[] } | null {
+  let prevDoc: Document;
+  let nextDoc: Document;
+  try {
+    prevDoc = new DOMParser().parseFromString(previous, "text/html");
+    nextDoc = new DOMParser().parseFromString(restored, "text/html");
+  } catch {
+    return null;
+  }
+  const prevById = idElementMap(prevDoc);
+  const nextById = idElementMap(nextDoc);
+  // A different id set means an element was added or removed (e.g. a split, a
+  // delete) — structural, so soft-reload can't express it.
+  if (prevById.size !== nextById.size) return null;
+  const changedElementIds: string[] = [];
+  for (const [id, nextEl] of nextById) {
+    const prevEl = prevById.get(id);
+    if (!prevEl || prevEl.tagName !== nextEl.tagName) return null;
+    // A change inside the element (text / children) is out of soft scope; only
+    // its own attributes may differ. (GSAP scripts are handled via re-run.)
+    if (prevEl.innerHTML !== nextEl.innerHTML) return null;
+    if (prevEl.outerHTML !== nextEl.outerHTML) changedElementIds.push(id);
+  }
+  // Confirm nothing OUTSIDE id'd-element attributes and GSAP scripts changed.
+  normalizeSoftResidual(prevDoc);
+  normalizeSoftResidual(nextDoc);
+  if (prevDoc.documentElement.outerHTML !== nextDoc.documentElement.outerHTML) return null;
+  return { changedElementIds };
+}
+/** Copy every attribute from `source` onto the live `target`, dropping extras. */
+function syncElementAttributes(target: Element, source: Element): void {
+  for (const name of [...target.getAttributeNames()]) {
+    if (!source.hasAttribute(name)) target.removeAttribute(name);
+  }
+  for (const name of source.getAttributeNames()) {
+    target.setAttribute(name, source.getAttribute(name) ?? "");
+  }
+}
+/**
+ * Soft-apply an undo/redo restore to the live preview WITHOUT a full iframe
+ * remount (which blanks the frame black and re-flashes the WebGL context). Only
+ * the active composition — the document living in the root iframe — is eligible;
+ * a sub-comp or multi-file restore falls back to `reloadPreview`.
+ *
+ * The restore is soft-applied when its only differences are id'd-element
+ * attributes / inline-style and/or the GSAP script (see diffSoftReloadableRestore):
+ *   1. Each changed element's attribute surface (inline style, data-start /
+ *      -duration, the studio manual-offset props + flags) is synced onto the live
+ *      element — so a canvas-position revert lands on the live DOM the runtime's
+ *      seek-reapply reads from, not just on disk.
+ *   2. The restored GSAP script is re-run in place via applySoftReload, which
+ *      re-seeks to `currentTime` (playhead-invariant) and re-folds manual edits.
+ *      With no single script, the manual-edit reapply is invoked directly.
+ *
+ * Returns "soft" when applied in place, "full" when it escalated to reloadPreview
+ * (ineligible restore, missing target, or a permanent soft-reload failure).
+ */
+export function applyUndoRestoreToPreview(
+  iframe: HTMLIFrameElement | null,
+  activeCompPath: string | null,
+  files: Record<string, UndoRestoreFile> | undefined,
+  currentTime: number,
+  reloadPreview: () => void,
+): "soft" | "full" {
+  const paths = files ? Object.keys(files) : [];
+  // Soft path only covers the single active-comp document in the root iframe.
+  if (!iframe || !activeCompPath || !files || paths.length !== 1 || paths[0] !== activeCompPath) {
+    reloadPreview();
+    return "full";
+  }
+  const doc = iframe.contentDocument;
+  const win = iframe.contentWindow as IframeWindow | null;
+  if (!doc || !win) {
+    reloadPreview();
+    return "full";
+  }
+  const { previous, restored } = files[activeCompPath]!;
+  const diff = diffSoftReloadableRestore(previous, restored);
+  if (!diff) {
+    reloadPreview();
+    return "full";
+  }
+  // Sync each changed element's attributes onto the live DOM from the restored
+  // markup, so the runtime's seek-reapply (which reads inline offset props off
+  // the live element) folds the REVERTED values, not the stale current ones.
+  const restoredById = idElementMap(new DOMParser().parseFromString(restored, "text/html"));
+  for (const id of diff.changedElementIds) {
+    const liveEl = doc.getElementById(id);
+    const restoredEl = restoredById.get(id);
+    if (liveEl && restoredEl) syncElementAttributes(liveEl, restoredEl);
+  }
+  const script = extractGsapScriptText(restored);
+  if (script) {
+    const result = applySoftReload(iframe, script, {
+      onAsyncFailure: reloadPreview,
+      currentTimeOverride: currentTime,
+    });
+    if (result === "cannot-soft-reload") {
+      reloadPreview();
+      return "full";
+    }
+    return "soft";
+  }
+  // No single GSAP script to re-run — the change was pure attribute/style. Re-fold
+  // manual edits and hold the playhead so the synced attributes take visible effect.
+  try {
+    win.__player?.seek?.(currentTime);
+    win.__hfStudioManualEditsApply?.();
+  } catch {
+    reloadPreview();
+    return "full";
+  }
+  return "soft";
+}
 export function applySoftReload(
   iframe: HTMLIFrameElement | null,
   scriptText: string,

package/src/utils/mediaTypes.ts CHANGED Viewed

@@ -1,9 +1,10 @@
-export const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|svg|ico)$/i;
+export const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|avif|svg|ico)$/i;
 export const VIDEO_EXT = /\.(mp4|webm|mov)$/i;
 export const AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac)$/i;
 export const FONT_EXT = /\.(woff|woff2|ttf|ttc|otf|eot)$/i;
 export const LUT_EXT = /\.cube$/i;
-export const MEDIA_EXT = /\.(mp4|webm|mov|mp3|wav|ogg|m4a|aac|jpg|jpeg|png|gif|webp|svg|ico)$/i;
+export const MEDIA_EXT =
+  /\.(mp4|webm|mov|mp3|wav|ogg|m4a|aac|jpg|jpeg|png|gif|webp|avif|svg|ico)$/i;
 export function isMediaFile(path: string): boolean {
   return MEDIA_EXT.test(path);

package/src/utils/resizeDebug.ts ADDED Viewed

@@ -0,0 +1,55 @@
+// Resize/gesture diagnostics — grep [hf-resize]. Off by default; opt in per
+// session with `localStorage.setItem("hf-resize-debug", "1")` (then reload).
+// Granular per-move/per-gesture tracing that complements the always-on
+// [hf-commit] transaction telemetry in gestureTransaction.ts.
+let moveN = 0;
+let enabled: boolean | null = null;
+function isEnabled(): boolean {
+  if (enabled === null) {
+    try {
+      enabled = localStorage.getItem("hf-resize-debug") === "1";
+    } catch {
+      enabled = false;
+    }
+  }
+  return enabled;
+}
+export function logResize(stage: string, data: Record<string, unknown>): void {
+  if (!isEnabled()) return;
+  console.log(
+    `[hf-resize] ${JSON.stringify({ stage, t: Math.round(performance.now()), ...data })}`,
+  );
+}
+/** Per-pointermove logging, throttled: first move then every 8th. */
+export function logResizeMove(data: Record<string, unknown>): void {
+  if (!isEnabled()) return;
+  moveN += 1;
+  if (moveN % 8 === 1) logResize("move", { n: moveN, ...data });
+}
+export function resetResizeMoveLog(): void {
+  moveN = 0;
+}
+/** Snapshot the element's live geometry now and again after 200ms (jump detector). */
+export function logResizeSettle(el: HTMLElement, tag: string): void {
+  if (!isEnabled()) return;
+  const snap = (phase: string) => {
+    const r = el.getBoundingClientRect();
+    const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
+    logResize("settle", {
+      tag,
+      phase,
+      rect: { x: r.x, y: r.y, w: r.width, h: r.height },
+      cssW: cs?.width,
+      cssH: cs?.height,
+      transform: cs?.transform,
+      inlineStyle: el.getAttribute("style"),
+    });
+  };
+  snap("t0");
+  setTimeout(() => snap("t200"), 200);
+}

package/src/utils/rootDuration.test.ts CHANGED Viewed

@@ -1,5 +1,10 @@
+// @vitest-environment jsdom
 import { describe, expect, it } from "vitest";
-import { extendRootDurationInSource } from "./rootDuration";
+import {
+  extendRootDurationInSource,
+  patchRootCompositionDuration,
+  readRootCompositionDuration,
+} from "./rootDuration";
 describe("extendRootDurationInSource", () => {
   it("extends data-duration when the new end is bigger than the root duration", () => {
@@ -31,4 +36,88 @@ describe("extendRootDurationInSource", () => {
     expect(patched).toContain(`<div data-duration="3"></div>`);
     expect(patched).toContain(`<div data-composition-id="main" data-duration="7"></div>`);
   });
+  // Reviewer round-2 finding #3: the old regex was attribute-ORDER-dependent and
+  // double-quotes-only, so these hand-authored variants silently no-op'd.
+  it("extends when data-duration is declared BEFORE data-composition-id", () => {
+    const source = `<div data-duration="4" data-composition-id="main"></div>`;
+    expect(extendRootDurationInSource(source, 9)).toBe(
+      `<div data-duration="9" data-composition-id="main"></div>`,
+    );
+  });
+  it("extends when attributes use single quotes", () => {
+    const source = `<div data-composition-id='main' data-duration='4'></div>`;
+    expect(extendRootDurationInSource(source, 9)).toBe(
+      `<div data-composition-id='main' data-duration='9'></div>`,
+    );
+  });
+  it("extends with swapped order AND single quotes AND extra whitespace", () => {
+    const source = `<div  data-duration = '4'  data-composition-id = 'main' >x</div>`;
+    expect(extendRootDurationInSource(source, 9)).toBe(
+      `<div  data-duration = '9'  data-composition-id = 'main' >x</div>`,
+    );
+  });
+});
+describe("readRootCompositionDuration", () => {
+  it("reads the root duration regardless of attribute order or quote style", () => {
+    expect(
+      readRootCompositionDuration(`<div data-composition-id="main" data-duration="4"></div>`),
+    ).toBe(4);
+    expect(
+      readRootCompositionDuration(`<div data-duration="4" data-composition-id="main"></div>`),
+    ).toBe(4);
+    expect(
+      readRootCompositionDuration(`<div data-composition-id='main' data-duration='4.5'></div>`),
+    ).toBe(4.5);
+  });
+  it("reads the FIRST composition when several are present", () => {
+    const source = [
+      `<div data-composition-id="root" data-duration="10"></div>`,
+      `<div data-composition-id="nested" data-duration="2"></div>`,
+    ].join("\n");
+    expect(readRootCompositionDuration(source)).toBe(10);
+  });
+  it("returns null when there is no composition root", () => {
+    expect(readRootCompositionDuration(`<div data-duration="4"></div>`)).toBeNull();
+  });
+  it("returns null when the root has no data-duration attribute", () => {
+    expect(readRootCompositionDuration(`<div data-composition-id="main"></div>`)).toBeNull();
+  });
+});
+describe("patchRootCompositionDuration", () => {
+  it("rewrites only the root's data-duration value, preserving surrounding bytes", () => {
+    const source = [
+      `<!doctype html>`,
+      `<div data-composition-id="main" data-duration="4" data-width="640">`,
+      `  <img src="a.png" data-duration="3" />`,
+      `</div>`,
+    ].join("\n");
+    const patched = patchRootCompositionDuration(source, "8");
+    expect(patched).toBe(
+      [
+        `<!doctype html>`,
+        `<div data-composition-id="main" data-duration="8" data-width="640">`,
+        `  <img src="a.png" data-duration="3" />`,
+        `</div>`,
+      ].join("\n"),
+    );
+  });
+  it("keeps single-quote style when rewriting", () => {
+    expect(
+      patchRootCompositionDuration(`<div data-composition-id='main' data-duration='4'></div>`, "8"),
+    ).toBe(`<div data-composition-id='main' data-duration='8'></div>`);
+  });
+  it("is a no-op when the root has no data-duration attribute", () => {
+    const source = `<div data-composition-id="main"></div>`;
+    expect(patchRootCompositionDuration(source, "8")).toBe(source);
+  });
 });

package/src/utils/rootDuration.ts CHANGED Viewed

@@ -1,17 +1,80 @@
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
-export function extendRootDurationInSource(source: string, newEnd: number): string {
-  const rootDurMatch = source.match(
-    /(<[^>]*data-composition-id="[^"]*"[^>]*data-duration=")([^"]*)(")/,
+/**
+ * Matches the opening tag of the ROOT composition element — the first tag that
+ * carries a `data-composition-id` attribute, regardless of where the attribute
+ * sits in the tag or how its value is quoted. `[^>]*` keeps the match inside a
+ * single tag, so the first hit is the first composition in document order (the
+ * same element `doc.querySelector("[data-composition-id]")` resolves to).
+ */
+const ROOT_COMPOSITION_OPEN_TAG_RE = /<[^>]*\bdata-composition-id(?=[\s=/>])[^>]*>/i;
+/**
+ * Matches a `data-duration="..."` attribute inside a single opening tag. Quote
+ * style is captured (backreferenced), so both `"` and `'` round-trip, and the
+ * `\s*` around `=` tolerates author whitespace.
+ */
+const DATA_DURATION_ATTR_RE = /(\bdata-duration\s*=\s*)(["'])[^"']*\2/i;
+/**
+ * Read the ROOT composition's raw `data-duration`.
+ *
+ * Parses the source with DOMParser and locates the root the same way the rest of
+ * the timeline code does — the first `[data-composition-id]` element in document
+ * order — then reads its `data-duration`. Because it works on the parsed tree,
+ * attribute order and quote style are irrelevant, unlike the previous
+ * order-dependent, double-quotes-only regex.
+ *
+ * Returns `null` when there is no root composition or the root has no
+ * `data-duration` attribute at all. When the attribute is present but not a
+ * number the parsed `NaN` is returned as-is, so callers reproduce the old
+ * regex's "attribute matched but value unusable" behavior.
+ *
+ * Deterministic and render-safe: DOMParser is the only DOM global used.
+ */
+export function readRootCompositionDuration(source: string): number | null {
+  const root = new DOMParser()
+    .parseFromString(source, "text/html")
+    .querySelector("[data-composition-id]");
+  const raw = root?.getAttribute("data-duration");
+  if (raw == null) return null;
+  return Number.parseFloat(raw);
+}
+/**
+ * Rewrite the ROOT composition's `data-duration` value, preserving the rest of
+ * the document byte-for-byte.
+ *
+ * We deliberately do NOT re-serialize the parsed Document: a DOMParser round-trip
+ * injects `<html>/<head>/<body>`, forces double quotes, self-closes void
+ * elements, and drops the original indentation — it reformats unrelated markup.
+ * Instead we locate the root opening tag and rewrite only its `data-duration`
+ * value in place, keeping the author's quote style. The targeted splice is
+ * attribute-order-, quote-, and whitespace-agnostic.
+ *
+ * No-op (returns `source` unchanged) when there is no root composition tag or the
+ * root tag has no `data-duration` attribute to replace.
+ */
+export function patchRootCompositionDuration(source: string, newValue: string): string {
+  const rootTag = ROOT_COMPOSITION_OPEN_TAG_RE.exec(source);
+  if (!rootTag) return source;
+  const patchedTag = rootTag[0].replace(
+    DATA_DURATION_ATTR_RE,
+    (_full, prefix: string, quote: string) => `${prefix}${quote}${newValue}${quote}`,
   );
-  if (rootDurMatch) {
-    const rootDur = parseFloat(rootDurMatch[2]!);
-    if (newEnd > rootDur) {
-      return source.replace(
-        rootDurMatch[0],
-        `${rootDurMatch[1]}${formatTimelineAttributeNumber(newEnd)}${rootDurMatch[3]}`,
-      );
-    }
-  }
-  return source;
+  if (patchedTag === rootTag[0]) return source;
+  return (
+    source.slice(0, rootTag.index) + patchedTag + source.slice(rootTag.index + rootTag[0].length)
+  );
+}
+/**
+ * Grow-only ratchet: extend the root composition's `data-duration` to `newEnd`
+ * when `newEnd` is larger than the current root duration. No-op otherwise (and
+ * when there is no root duration to compare against).
+ */
+export function extendRootDurationInSource(source: string, newEnd: number): string {
+  const current = readRootCompositionDuration(source);
+  if (current == null || !(newEnd > current)) return source;
+  return patchRootCompositionDuration(source, formatTimelineAttributeNumber(newEnd));
 }

package/src/utils/sdkCutover.ts CHANGED Viewed

@@ -18,6 +18,7 @@ export interface CutoverDeps {
       label: string;
       kind: EditHistoryKind;
       coalesceKey?: string;
+      coalesceMs?: number;
       files: Record<string, { before: string; after: string }>;
     }) => Promise<void>;
   };
@@ -84,6 +85,8 @@ function wrongCompositionFile(deps: CutoverDeps, targetPath: string): boolean {
 interface CutoverOptions {
   label?: string;
   coalesceKey?: string;
+  /** Coalesce window (ms); Infinity folds across a slow round-trip. */
+  coalesceMs?: number;
   /** Skip the preview reload (mirrors the server path's skipRefresh). */
   skipRefresh?: boolean;
 }
@@ -110,6 +113,7 @@ export async function persistSdkSerialize(
     label: options?.label ?? "Edit layer",
     kind: "manual",
     ...(options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {}),
+    ...(options?.coalesceMs != null ? { coalesceMs: options.coalesceMs } : {}),
     files: { [targetPath]: { before: originalContent, after } },
   });
   if (deps.refresh) deps.refresh(after);

package/src/utils/studioFileHistory.ts CHANGED Viewed

@@ -1,25 +1,55 @@
+import type { MutableRefObject } from "react";
 import type { EditHistoryKind } from "./editHistory";
+import { createStudioSaveHttpError } from "./studioSaveDiagnostics";
+export interface RecordEditInput {
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  coalesceMs?: number;
+  files: Record<string, { before: string; after: string }>;
+}
+export interface DomEditCommitBaseParams {
+  activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  domEditSaveTimestampRef: MutableRefObject<number>;
+  editHistory: { recordEdit: (entry: RecordEditInput) => Promise<void> };
+  projectIdRef: MutableRefObject<string | null>;
+  reloadPreview: () => void;
+  clearDomSelection: () => void;
+}
 interface SaveProjectFilesWithHistoryInput {
   projectId: string;
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
+  coalesceMs?: number;
   files: Record<string, string>;
   readFile: (path: string) => Promise<string>;
   writeFile: (path: string, content: string) => Promise<void>;
-  recordEdit: (entry: {
-    label: string;
-    kind: EditHistoryKind;
-    coalesceKey?: string;
-    files: Record<string, { before: string; after: string }>;
-  }) => Promise<void>;
+  recordEdit: (entry: RecordEditInput) => Promise<void>;
+}
+export async function readProjectFileContent(pid: string, path: string): Promise<string> {
+  const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(path)}`);
+  if (!response.ok) {
+    throw await createStudioSaveHttpError(response, `Failed to read ${path}`);
+  }
+  const data = (await response.json()) as { content?: string };
+  if (typeof data.content !== "string") {
+    throw new Error(`Missing file contents for ${path}`);
+  }
+  return data.content;
 }
 export async function saveProjectFilesWithHistory({
   label,
   kind,
   coalesceKey,
+  coalesceMs,
   files,
   readFile,
   writeFile,
@@ -43,7 +73,7 @@ export async function saveProjectFilesWithHistory({
       writtenPaths.push(path);
     }
-    await recordEdit({ label, kind, coalesceKey, files: snapshots });
+    await recordEdit({ label, kind, coalesceKey, coalesceMs, files: snapshots });
   } catch (error) {
     try {
       for (const path of writtenPaths.reverse()) {