@hyperframes/studio 0.6.47 → 0.6.49

package/src/components/nle/NLEPreview.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef, useState, type Ref } from "react";
+import { memo, useCallback, useEffect, useRef, useState, type RefObject } from "react";
 import { Player } from "../../player";
 import {
   DEFAULT_PREVIEW_ZOOM,
@@ -14,7 +14,7 @@ import {
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 interface NLEPreviewProps {
   projectId: string;
-  iframeRef: Ref<HTMLIFrameElement>;
+  iframeRef: RefObject<HTMLIFrameElement | null>;
   onIframeLoad: () => void;
   onCompositionLoadingChange?: (loading: boolean) => void;
   portrait?: boolean;
@@ -37,6 +37,11 @@ const ZOOM_HUD_TIMEOUT_MS = 1200;
 const ZOOM_SETTLE_MS = 200;
 const PREVIEW_STAGE_INSET_PX = 16;
 
+interface PreviewCompositionSize {
+  width: number;
+  height: number;
+}
+
 function isPreviewAtFit(state: PreviewZoomState): boolean {
   return (
     Math.abs(state.zoomPercent - 100) < 0.5 &&
@@ -56,14 +61,41 @@ function loadInitialZoom(): PreviewZoomState {
     : DEFAULT_PREVIEW_ZOOM;
 }
 
-function resolvePreviewStageSize(
+// fallow-ignore-next-line complexity
+function readPreviewCompositionSize(
+  iframe: HTMLIFrameElement | null,
+): PreviewCompositionSize | null {
+  try {
+    const doc = iframe?.contentDocument;
+    const root =
+      doc?.querySelector("[data-composition-id][data-width][data-height]") ??
+      doc?.querySelector("[data-width][data-height]");
+    if (!root) return null;
+    const width = Number.parseInt(root.getAttribute("data-width") ?? "", 10);
+    const height = Number.parseInt(root.getAttribute("data-height") ?? "", 10);
+    if (!Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0) {
+      return null;
+    }
+    return { width, height };
+  } catch {
+    return null;
+  }
+}
+
+export function resolvePreviewStageSize(
   viewportWidth: number,
   viewportHeight: number,
+  compositionSize: PreviewCompositionSize | null,
   portrait: boolean | undefined,
 ): { width: number; height: number } {
   const availableWidth = Math.max(0, viewportWidth - PREVIEW_STAGE_INSET_PX);
   const availableHeight = Math.max(0, viewportHeight - PREVIEW_STAGE_INSET_PX);
-  const aspectRatio = portrait ? 9 / 16 : 16 / 9;
+  const aspectRatio =
+    compositionSize && compositionSize.width > 0 && compositionSize.height > 0
+      ? compositionSize.width / compositionSize.height
+      : portrait
+        ? 9 / 16
+        : 16 / 9;
 
   if (availableWidth === 0 || availableHeight === 0) {
     return { width: 0, height: 0 };
@@ -95,10 +127,12 @@ export const NLEPreview = memo(function NLEPreview({
   const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
+  const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
   useEffect(() => {
     onStageRef?.(stageRef);
   }, [onStageRef]);
-  const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, portrait));
+  const [compositionSize, setCompositionSize] = useState<PreviewCompositionSize | null>(null);
+  const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, null, portrait));
 
   const zoomRef = useRef<PreviewZoomState>(loadInitialZoom());
   const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(() => zoomRef.current);
@@ -127,14 +161,29 @@ export const NLEPreview = memo(function NLEPreview({
 
     const updateStageSize = () => {
       const rect = viewport.getBoundingClientRect();
-      setStageSize(resolvePreviewStageSize(rect.width, rect.height, portrait));
+      setStageSize(resolvePreviewStageSize(rect.width, rect.height, compositionSize, portrait));
     };
 
     updateStageSize();
     const observer = new ResizeObserver(updateStageSize);
     observer.observe(viewport);
     return () => observer.disconnect();
-  }, [portrait]);
+  }, [compositionSize, portrait]);
+
+  const updateCompositionSizeFromPreview = useCallback(() => {
+    const next = readPreviewCompositionSize(previewIframeRef.current);
+    setCompositionSize((prev) =>
+      prev?.width === next?.width && prev?.height === next?.height ? prev : next,
+    );
+  }, []);
+
+  const setPreviewIframeRef = useCallback(
+    (node: HTMLIFrameElement | null) => {
+      previewIframeRef.current = node;
+      iframeRef.current = node;
+    },
+    [iframeRef],
+  );
 
   const stageSizeRef = useRef(stageSize);
   stageSizeRef.current = stageSize;
@@ -403,10 +452,11 @@ export const NLEPreview = memo(function NLEPreview({
             )}
             <Player
               key={activeKey}
-              ref={iframeRef}
+              ref={setPreviewIframeRef}
               projectId={directUrl ? undefined : projectId}
               directUrl={directUrl}
               onLoad={() => {
+                updateCompositionSizeFromPreview();
                 onIframeLoad();
                 applyInitialZoom();
               }}

package/src/hooks/useDomEditCommits.ts

@@ -81,7 +81,7 @@ export interface UseDomEditCommitsParams {
   buildDomSelectionFromTarget: (
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+  ) => Promise<DomEditSelection | null>;
 }
 
 // ── Hook ──
@@ -128,6 +128,7 @@ export function useDomEditCommits({
     [fileTree, projectId, importedFontAssetsRef],
   );
 
+  // fallow-ignore-next-line complexity
   const persistDomEditOperations: PersistDomEditOperations = useCallback(
     async (selection, operations, options) => {
       const pid = projectIdRef.current;
@@ -232,6 +233,7 @@ export function useDomEditCommits({
 
   // ── Position patch helper ──
 
+  // fallow-ignore-next-line complexity
   const commitPositionPatchToHtml = useCallback(
     (
       selection: DomEditSelection,
@@ -244,6 +246,7 @@ export function useDomEditCommits({
           coalesceKey: options.coalesceKey,
           skipRefresh: options.skipRefresh ?? true,
         });
+        // fallow-ignore-next-line complexity
       }).catch((error) => {
         const message = error instanceof Error ? error.message : "Failed to save position";
         showToast(message);
@@ -251,6 +254,9 @@ export function useDomEditCommits({
           source: "dom_edit",
           label: options.label,
           error_message: message,
+          target_id: selection.id ?? undefined,
+          target_selector: selection.selector ?? undefined,
+          target_source_file: selection.sourceFile ?? undefined,
         });
       });
     },
@@ -333,6 +339,7 @@ export function useDomEditCommits({
 
   // ── Motion commits (HTML-attribute–backed) ──
 
+  // fallow-ignore-next-line complexity
   const handleDomMotionCommit = useCallback(
     (
       selection: DomEditSelection,
@@ -359,6 +366,7 @@ export function useDomEditCommits({
     [commitPositionPatchToHtml, previewIframeRef, refreshDomEditSelectionFromPreview],
   );
 
+  // fallow-ignore-next-line complexity
   const handleDomMotionClear = useCallback(
     (selection: DomEditSelection) => {
       const clearPatches = buildClearMotionPatches(selection.element);
@@ -387,6 +395,7 @@ export function useDomEditCommits({
     [commitPositionPatchToHtml, previewIframeRef, refreshDomEditSelectionFromPreview],
   );
 
+  // fallow-ignore-next-line complexity
   const handleDomEditElementDelete = useCallback(
     async (selection: DomEditSelection) => {
       const pid = projectIdRef.current;

package/src/hooks/useDomEditSession.ts

@@ -231,7 +231,7 @@ export function useDomEditSession({
   useEffect(() => {
     if (!previewIframe) return;
 
-    const syncSelectionFromDocument = () => {
+    const syncSelectionFromDocument = async () => {
       if (!STUDIO_INSPECTOR_PANELS_ENABLED || captionEditMode) return;
       const currentSelection = domEditSelectionRef.current;
       if (!currentSelection) return;
@@ -249,7 +249,7 @@ export function useDomEditSession({
         return;
       }
 
-      const nextSelection = buildDomSelectionFromTarget(nextElement);
+      const nextSelection = await buildDomSelectionFromTarget(nextElement);
       if (nextSelection) {
         applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
       }
@@ -257,13 +257,13 @@ export function useDomEditSession({
 
     syncPreviewHistoryHotkey(previewIframe);
     void applyStudioManualEditsToPreviewRef.current(previewIframe);
-    syncSelectionFromDocument();
+    void syncSelectionFromDocument();
     refreshPreviewDocumentVersion();
 
     const handleLoad = () => {
       syncPreviewHistoryHotkey(previewIframe);
       void applyStudioManualEditsToPreviewRef.current(previewIframe);
-      syncSelectionFromDocument();
+      void syncSelectionFromDocument();
       refreshPreviewDocumentVersion();
     };
 

package/src/hooks/useDomEditTextCommits.ts

@@ -38,7 +38,7 @@ export interface UseDomEditTextCommitsParams {
   buildDomSelectionFromTarget: (
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+  ) => Promise<DomEditSelection | null>;
   persistDomEditOperations: PersistDomEditOperations;
   resolveImportedFontAsset: (fontFamilyValue: string) => ImportedFontAsset | null;
 }
@@ -231,7 +231,7 @@ export function useDomEditTextCommits({
       if (doc) {
         const refreshed = findElementForSelection(doc, domEditSelection, activeCompPath);
         if (refreshed) {
-          const nextSelection = buildDomSelectionFromTarget(refreshed);
+          const nextSelection = await buildDomSelectionFromTarget(refreshed);
           if (nextSelection) {
             applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
           }
@@ -287,7 +287,7 @@ export function useDomEditTextCommits({
       if (doc) {
         const refreshed = findElementForSelection(doc, selection, activeCompPath);
         if (refreshed) {
-          const nextSelection = buildDomSelectionFromTarget(refreshed);
+          const nextSelection = await buildDomSelectionFromTarget(refreshed);
           if (nextSelection) {
             applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
           }

package/src/hooks/useDomSelection.ts

@@ -60,17 +60,19 @@ export interface UseDomSelectionReturn {
   buildDomSelectionFromTarget: (
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+  ) => Promise<DomEditSelection | null>;
   resolveDomSelectionFromPreviewPoint: (
     clientX: number,
     clientY: number,
     options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+  ) => Promise<DomEditSelection | null>;
   updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
-  buildDomSelectionForTimelineElement: (element: TimelineElement) => DomEditSelection | null;
-  handleTimelineElementSelect: (element: TimelineElement | null) => void;
-  refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => void;
-  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => void;
+  buildDomSelectionForTimelineElement: (
+    element: TimelineElement,
+  ) => Promise<DomEditSelection | null>;
+  handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
+  refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
 }
 
 // ── Hook ──
@@ -193,24 +195,34 @@ export function useDomSelection({
   }, [applyDomSelection]);
 
   const buildDomSelectionFromTarget = useCallback(
-    (target: HTMLElement, options?: { preferClipAncestor?: boolean }) => {
+    (
+      target: HTMLElement,
+      options?: { preferClipAncestor?: boolean; skipSourceProbe?: boolean },
+    ) => {
       return resolveDomEditSelection(target, {
         activeCompositionPath: activeCompPath,
         isMasterView,
         preferClipAncestor: options?.preferClipAncestor,
+        skipSourceProbe: options?.skipSourceProbe,
+        projectId,
       });
     },
-    [activeCompPath, isMasterView],
+    [activeCompPath, isMasterView, projectId],
   );
 
   const resolveDomSelectionFromPreviewPoint = useCallback(
-    (clientX: number, clientY: number, options?: { preferClipAncestor?: boolean }) => {
+    async (
+      clientX: number,
+      clientY: number,
+      options?: { preferClipAncestor?: boolean; skipSourceProbe?: boolean },
+    ) => {
       const iframe = previewIframeRef.current;
       if (!iframe || captionEditMode) return null;
       const target = getPreviewTargetFromPointer(iframe, clientX, clientY, activeCompPath);
       if (!target) return null;
       return buildDomSelectionFromTarget(target, {
         preferClipAncestor: options?.preferClipAncestor,
+        skipSourceProbe: options?.skipSourceProbe,
       });
     },
     [activeCompPath, buildDomSelectionFromTarget, captionEditMode, previewIframeRef],
@@ -223,7 +235,7 @@ export function useDomSelection({
   }, []);
 
   const buildDomSelectionForTimelineElement = useCallback(
-    (element: TimelineElement): DomEditSelection | null => {
+    async (element: TimelineElement): Promise<DomEditSelection | null> => {
       const iframe = previewIframeRef.current;
       let doc: Document | null = null;
       try {
@@ -248,21 +260,21 @@ export function useDomSelection({
   );
 
   const handleTimelineElementSelect = useCallback(
-    (element: TimelineElement | null) => {
+    async (element: TimelineElement | null) => {
       if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
       if (!element) {
         applyDomSelection(null, { revealPanel: false });
         return;
       }
 
-      const selection = buildDomSelectionForTimelineElement(element);
+      const selection = await buildDomSelectionForTimelineElement(element);
       if (selection) applyDomSelection(selection);
     },
     [applyDomSelection, buildDomSelectionForTimelineElement],
   );
 
   const refreshDomEditSelectionFromPreview = useCallback(
-    (selection: DomEditSelection) => {
+    async (selection: DomEditSelection) => {
       const iframe = previewIframeRef.current;
       let doc: Document | null = null;
       try {
@@ -275,7 +287,7 @@ export function useDomSelection({
       const element = findElementForSelection(doc, selection, activeCompPath);
       if (!element) return;
 
-      const nextSelection = buildDomSelectionFromTarget(element);
+      const nextSelection = await buildDomSelectionFromTarget(element);
       if (nextSelection) {
         applyDomSelection(nextSelection, {
           revealPanel: false,
@@ -287,7 +299,7 @@ export function useDomSelection({
   );
 
   const refreshDomEditGroupSelectionsFromPreview = useCallback(
-    (selections: DomEditSelection[]) => {
+    async (selections: DomEditSelection[]) => {
       const iframe = previewIframeRef.current;
       let doc: Document | null = null;
       try {
@@ -301,7 +313,7 @@ export function useDomSelection({
       for (const selection of selections) {
         const element = findElementForSelection(doc, selection, activeCompPath);
         if (!element) continue;
-        const nextSelection = buildDomSelectionFromTarget(element);
+        const nextSelection = await buildDomSelectionFromTarget(element);
         if (nextSelection) nextGroup.push(nextSelection);
       }
       if (nextGroup.length === 0) return;

package/src/hooks/usePreviewInteraction.ts

@@ -20,8 +20,8 @@ export interface UsePreviewInteractionParams {
   resolveDomSelectionFromPreviewPoint: (
     clientX: number,
     clientY: number,
-    options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+    options?: { preferClipAncestor?: boolean; skipSourceProbe?: boolean },
+  ) => Promise<DomEditSelection | null>;
   updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
 
   onClickToSource?: (selection: DomEditSelection) => void;
@@ -40,9 +40,9 @@ export function usePreviewInteraction({
   onClickToSource,
 }: UsePreviewInteractionParams) {
   const handlePreviewCanvasMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
+    async (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
       if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) return;
-      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+      const nextSelection = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
         preferClipAncestor: options?.preferClipAncestor ?? false,
       });
       if (!nextSelection) {
@@ -66,14 +66,15 @@ export function usePreviewInteraction({
   );
 
   const handlePreviewCanvasPointerMove = useCallback(
-    (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
+    async (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
       if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) {
         updateDomEditHoverSelection(null);
         return null;
       }
 
-      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+      const nextSelection = await resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
         preferClipAncestor: options?.preferClipAncestor ?? false,
+        skipSourceProbe: true,
       });
       updateDomEditHoverSelection(nextSelection);
       return nextSelection;

package/src/hooks/useStudioUrlState.ts

@@ -25,7 +25,7 @@ interface UseStudioUrlStateParams {
   buildDomSelectionFromTarget: (
     target: HTMLElement,
     options?: { preferClipAncestor?: boolean },
-  ) => DomEditSelection | null;
+  ) => Promise<DomEditSelection | null>;
   applyDomSelection: (
     selection: DomEditSelection | null,
     options?: {
@@ -140,10 +140,11 @@ export function useStudioUrlState({
       return;
     }
 
-    const selection = buildDomSelectionFromTarget(element, { preferClipAncestor: false });
-    applyDomSelection(selection, { revealPanel: false });
     hydratedSelectionRef.current = true;
     pendingSelectionRef.current = null;
+    void buildDomSelectionFromTarget(element, { preferClipAncestor: false }).then((selection) => {
+      applyDomSelection(selection, { revealPanel: false });
+    });
   }, [
     activeCompPath,
     applyDomSelection,