@hyperframes/studio 0.6.97 → 0.6.98

package/src/hooks/useConsoleErrorCapture.ts

@@ -17,15 +17,38 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
     if (!previewIframe) return;
+
+    let patchedWin: (Window & typeof globalThis) | null = null;
+    let origConsoleError: ((...args: unknown[]) => void) | null = null;
+    let errorHandler: ((e: ErrorEvent) => void) | null = null;
+
+    const detachErrorCapture = () => {
+      const win = patchedWin;
+      if (!win) return;
+      patchedWin = null;
+      try {
+        // origConsoleError and errorHandler are always set alongside patchedWin
+        win.console.error = origConsoleError!;
+        win.removeEventListener("error", errorHandler!);
+        delete (win as unknown as Record<string, unknown>).__hfErrorCapture;
+      } catch {
+        /* cross-origin or destroyed window */
+      }
+      origConsoleError = null;
+      errorHandler = null;
+    };
+
     const attachErrorCapture = () => {
+      detachErrorCapture();
       try {
         const win = previewIframe.contentWindow as (Window & typeof globalThis) | null;
         if (!win) return;
         if ((win as unknown as Record<string, unknown>).__hfErrorCapture) return;
         (win as unknown as Record<string, unknown>).__hfErrorCapture = true;
-        const origError = win.console.error.bind(win.console);
+        patchedWin = win;
+        origConsoleError = win.console.error.bind(win.console);
         win.console.error = function (...args: unknown[]) {
-          origError(...args);
+          origConsoleError!(...args);
           const text = args.map((a) => (a instanceof Error ? a.message : String(a))).join(" ");
           if (text.includes("favicon")) return;
           consoleErrorsRef.current = [
@@ -34,18 +57,20 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
           ];
           setConsoleErrors([...consoleErrorsRef.current]);
         };
-        win.addEventListener("error", (e: ErrorEvent) => {
+        errorHandler = (e: ErrorEvent) => {
           const text = e.message || String(e);
           consoleErrorsRef.current = [
             ...consoleErrorsRef.current,
             { severity: "error", message: text },
           ];
           setConsoleErrors([...consoleErrorsRef.current]);
-        });
+        };
+        win.addEventListener("error", errorHandler);
       } catch {
         /* same-origin only */
       }
     };
+
     attachErrorCapture();
     const handleLoad = () => {
       consoleErrorsRef.current = [];
@@ -53,7 +78,10 @@ export function useConsoleErrorCapture(previewIframe: HTMLIFrameElement | null)
       attachErrorCapture();
     };
     previewIframe.addEventListener("load", handleLoad);
-    return () => previewIframe.removeEventListener("load", handleLoad);
+    return () => {
+      previewIframe.removeEventListener("load", handleLoad);
+      detachErrorCapture();
+    };
   }, [previewIframe]);
 
   return { consoleErrors, setConsoleErrors, resetErrors };

package/src/hooks/useDomEditCommits.ts

@@ -1,43 +1,23 @@
 import { useCallback, useRef } from "react";
 import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
-import { usePlayerStore } from "../player";
-import { STUDIO_GSAP_DRAG_INTERCEPT_ENABLED } from "../components/editor/manualEditingAvailability";
 import { FONT_EXT } from "../utils/mediaTypes";
-import type { PatchOperation } from "../utils/sourcePatcher";
+
 import { trackStudioEvent } from "../utils/studioTelemetry";
-import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { primaryFontFamilyValue } from "../utils/studioFontHelpers";
 import { createStudioSaveHttpError } from "../utils/studioSaveDiagnostics";
-import {
-  buildDomEditPatchTarget,
-  getDomEditTargetKey,
-  readHfId,
-  type DomEditSelection,
-} from "../components/editor/domEditing";
-import {
-  applyStudioPathOffset,
-  applyStudioBoxSize,
-  applyStudioRotation,
-  clearStudioPathOffset,
-  clearStudioBoxSize,
-  clearStudioRotation,
-} from "../components/editor/manualEdits";
-import {
-  buildPathOffsetPatches,
-  buildBoxSizePatches,
-  buildRotationPatches,
-  buildClearPathOffsetPatches,
-  buildClearBoxSizePatches,
-  buildClearRotationPatches,
-} from "../components/editor/manualEditsDom";
+import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
-import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { PersistDomEditOperations } from "./domEditCommitTypes";
 import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
 import { useDomEditTextCommits } from "./useDomEditTextCommits";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
+import { useElementLifecycleOps } from "./useElementLifecycleOps";
+
+// Re-export so existing consumers keep their import path
+export { GSAP_CSS_FALLBACK_BLOCKED_MESSAGE } from "./useDomGeometryCommits";
 
 // ── Helpers ──
-type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
 
 function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
@@ -60,40 +40,6 @@ function formatPatchRejectionMessage(body: { error?: string; fields?: string[] }
   return `Couldn't save edit: ${body.error}${suffix}`;
 }
 
-export const GSAP_CSS_FALLBACK_BLOCKED_MESSAGE =
-  "This element is GSAP-animated — dragging via CSS would corrupt keyframes";
-
-// fallow-ignore-next-line complexity
-function isElementGsapTargeted(iframe: HTMLIFrameElement | null, element: HTMLElement): boolean {
-  // When the GSAP drag intercept is disabled for debugging, treat every
-  // element as un-targeted so commits take the plain CSS persist path.
-  if (!STUDIO_GSAP_DRAG_INTERCEPT_ENABLED) return false;
-  if (!iframe?.contentWindow) return false;
-  let timelines: Record<string, TimelineLike> | undefined;
-  try {
-    timelines = (iframe.contentWindow as Window & { __timelines?: Record<string, TimelineLike> })
-      .__timelines;
-  } catch {
-    return false;
-  }
-  if (!timelines) return false;
-  const id = element.id;
-  for (const tl of Object.values(timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets) continue;
-        for (const t of child.targets()) {
-          if (t === element || (id && t.id === id)) return true;
-        }
-      }
-    } catch {
-      continue;
-    }
-  }
-  return false;
-}
-
 // ── Types ──
 
 interface RecordEditInput {
@@ -103,17 +49,7 @@ interface RecordEditInput {
   files: Record<string, { before: string; after: string }>;
 }
 
-export type PersistDomEditOperations = (
-  selection: DomEditSelection,
-  operations: PatchOperation[],
-  options?: {
-    label?: string;
-    coalesceKey?: string;
-    skipRefresh?: boolean;
-    prepareContent?: (html: string, sourceFile: string) => string;
-    shouldSave?: () => boolean;
-  },
-) => Promise<void>;
+export type { PersistDomEditOperations } from "./domEditCommitTypes";
 
 export interface UseDomEditCommitsParams {
   activeCompPath: string | null;
@@ -322,6 +258,8 @@ export function useDomEditCommits({
     resolveImportedFontAsset,
   });
 
+  // ── Position patch helper (shared by geometry + lifecycle hooks) ──
+
   const commitPositionPatchToHtml = useDomEditPositionPatchCommit({
     activeCompPath,
     persistDomEditOperations,
@@ -329,229 +267,33 @@ export function useDomEditCommits({
     showToast,
   });
 
-  // ── Position commits ──
-
-  const handleDomPathOffsetCommit = useCallback(
-    (selection: DomEditSelection, next: { x: number; y: number }) => {
-      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
-        const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-        showToast(error.message, "error");
-        return Promise.reject(error);
-      }
-      applyStudioPathOffset(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
-        label: "Move layer",
-        coalesceKey: `path-offset:${getDomEditTargetKey(selection)}`,
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast],
-  );
-
-  const handleDomGroupPathOffsetCommit = useCallback(
-    (updates: DomEditGroupPathOffsetCommit[]) => {
-      if (updates.length === 0) return Promise.resolve();
-      const blockedUpdate = updates.find(({ selection }) =>
-        isElementGsapTargeted(previewIframeRef.current, selection.element),
-      );
-      if (blockedUpdate) {
-        const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-        showToast(error.message, "error");
-        return Promise.reject(error);
-      }
-      const coalesceKey = updates
-        .map((u) => getDomEditTargetKey(u.selection))
-        .sort()
-        .join(":");
-      const saves = updates.map(({ selection, next }) => {
-        applyStudioPathOffset(selection.element, next);
-        return commitPositionPatchToHtml(selection, buildPathOffsetPatches(selection.element), {
-          label: `Move ${updates.length} layers`,
-          coalesceKey: `group-path-offset:${coalesceKey}`,
-        });
-      });
-      return Promise.all(saves).then(() => undefined);
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast],
-  );
-
-  const handleDomBoxSizeCommit = useCallback(
-    (selection: DomEditSelection, next: { width: number; height: number }) => {
-      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
-        const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-        showToast(error.message, "error");
-        return Promise.reject(error);
-      }
-      applyStudioBoxSize(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
-        label: "Resize layer box",
-        coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast],
-  );
-
-  const handleDomRotationCommit = useCallback(
-    (selection: DomEditSelection, next: { angle: number }) => {
-      if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
-        const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
-        showToast(error.message, "error");
-        return Promise.reject(error);
-      }
-      applyStudioRotation(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildRotationPatches(selection.element), {
-        label: "Rotate layer",
-        coalesceKey: `rotation:${getDomEditTargetKey(selection)}`,
-      });
-    },
-    [commitPositionPatchToHtml, previewIframeRef, showToast],
-  );
-
-  const handleDomManualEditsReset = useCallback(
-    (selection: DomEditSelection) => {
-      const element = selection.element;
-      const clearPatches = [
-        ...buildClearPathOffsetPatches(element),
-        ...buildClearBoxSizePatches(element),
-        ...buildClearRotationPatches(element),
-      ];
-      clearStudioPathOffset(element);
-      clearStudioBoxSize(element);
-      clearStudioRotation(element);
-      // skipRefresh:false triggers reloadPreview() which re-syncs selection on load
-      void commitPositionPatchToHtml(selection, clearPatches, {
-        label: "Reset layer edits",
-        coalesceKey: `manual-reset:${getDomEditTargetKey(selection)}`,
-        skipRefresh: false,
-      }).catch(() => undefined);
-    },
-    [commitPositionPatchToHtml],
-  );
+  // ── Geometry commits (path offset, box size, rotation) ──
 
-  // fallow-ignore-next-line complexity
-  const handleDomEditElementDelete = useCallback(
-    // fallow-ignore-next-line complexity
-    async (selection: DomEditSelection) => {
-      const pid = projectIdRef.current;
-      if (!pid) return;
-      const label = selection.label || selection.id || selection.selector || selection.tagName;
-
-      const targetPath = selection.sourceFile || activeCompPath || "index.html";
-      try {
-        const response = await fetch(
-          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
-        );
-        if (!response.ok) {
-          throw await createStudioSaveHttpError(response, `Failed to read ${targetPath}`);
-        }
-
-        const data = (await response.json()) as { content?: string };
-        const originalContent = data.content;
-        if (typeof originalContent !== "string")
-          throw new Error(`Missing file contents for ${targetPath}`);
-
-        const patchTarget = buildDomEditPatchTarget(selection);
-        if (!patchTarget.id && !patchTarget.selector && !patchTarget.hfId) {
-          throw new Error("Selected element has no patchable target");
-        }
+  const {
+    handleDomPathOffsetCommit,
+    handleDomGroupPathOffsetCommit,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
+    handleDomManualEditsReset,
+  } = useDomGeometryCommits({
+    previewIframeRef,
+    showToast,
+    commitPositionPatchToHtml,
+  });
 
-        domEditSaveTimestampRef.current = Date.now();
-        const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ target: patchTarget }),
-          },
-        );
-        if (!removeResponse.ok) {
-          throw await createStudioSaveHttpError(
-            removeResponse,
-            `Failed to delete element from ${targetPath}`,
-          );
-        }
+  // ── Element lifecycle (delete, z-index reorder) ──
 
-        const removeData = (await removeResponse.json()) as { changed?: boolean; content?: string };
-        const patchedContent =
-          typeof removeData.content === "string" ? removeData.content : originalContent;
-        await saveProjectFilesWithHistory({
-          projectId: pid,
-          label: "Delete element",
-          kind: "timeline",
-          files: { [targetPath]: patchedContent },
-          readFile: async () => originalContent,
-          writeFile: writeProjectFile,
-          recordEdit: editHistory.recordEdit,
-        });
-
-        clearDomSelection();
-        usePlayerStore.getState().setSelectedElementId(null);
-        reloadPreview();
-        showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Failed to delete element";
-        showToast(message);
-      }
-    },
-    [
-      activeCompPath,
-      clearDomSelection,
-      domEditSaveTimestampRef,
-      editHistory.recordEdit,
-      projectIdRef,
-      reloadPreview,
-      showToast,
-      writeProjectFile,
-    ],
-  );
-
-  const handleDomZIndexReorderCommit = useCallback(
-    (
-      entries: Array<{
-        element: HTMLElement;
-        zIndex: number;
-        id?: string;
-        selector?: string;
-        selectorIndex?: number;
-        sourceFile: string;
-      }>,
-    ) => {
-      if (entries.length === 0) return;
-      const coalesceKey = `z-reorder:${entries.map((e) => e.id ?? e.selector ?? e.element.getAttribute("data-hf-id") ?? "el").join(":")}`;
-      for (let i = 0; i < entries.length; i++) {
-        const entry = entries[i];
-        entry.element.style.zIndex = String(entry.zIndex);
-        const patches: Array<{ type: "inline-style"; property: string; value: string }> = [
-          { type: "inline-style", property: "z-index", value: String(entry.zIndex) },
-        ];
-        try {
-          const win = entry.element.ownerDocument?.defaultView;
-          if (win && win.getComputedStyle(entry.element).position === "static") {
-            entry.element.style.position = "relative";
-            patches.push({ type: "inline-style", property: "position", value: "relative" });
-          }
-        } catch {
-          /* cross-origin or detached — skip */
-        }
-        void commitPositionPatchToHtml(
-          {
-            element: entry.element,
-            id: entry.id ?? null,
-            hfId: readHfId(entry.element),
-            selector: entry.selector,
-            selectorIndex: entry.selectorIndex,
-            sourceFile: entry.sourceFile,
-          } as unknown as DomEditSelection,
-          patches,
-          {
-            label: "Reorder layers",
-            coalesceKey,
-            skipRefresh: i < entries.length - 1,
-          },
-        ).catch(() => undefined);
-      }
-    },
-    [commitPositionPatchToHtml],
-  );
+  const { handleDomEditElementDelete, handleDomZIndexReorderCommit } = useElementLifecycleOps({
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    domEditSaveTimestampRef,
+    editHistory,
+    projectIdRef,
+    reloadPreview,
+    clearDomSelection,
+    commitPositionPatchToHtml,
+  });
 
   return {
     resolveImportedFontAsset,

package/src/hooks/useDomEditPositionPatchCommit.ts

@@ -3,7 +3,7 @@ import type { DomEditSelection } from "../components/editor/domEditing";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import { trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
 import { DomEditSaveQueueOpenError } from "../utils/domEditSaveQueue";
-import type { PersistDomEditOperations } from "./useDomEditCommits";
+import type { PersistDomEditOperations } from "./domEditCommitTypes";
 
 interface UseDomEditPositionPatchCommitParams {
   activeCompPath: string | null;