@hyperframes/studio 0.6.90 → 0.6.91

package/src/hooks/useRazorSplit.ts

@@ -0,0 +1,303 @@
+import { useCallback, useRef } from "react";
+import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import { getTimelineElementLabel, collectHtmlIds } from "../utils/studioHelpers";
+import {
+  canSplitElement,
+  buildPatchTarget,
+  readFileContent,
+  SPLIT_BOUNDARY_EPSILON_S,
+} from "../utils/timelineElementSplit";
+import type { RecordEditInput } from "./useTimelineEditing";
+
+interface UseRazorSplitOptions {
+  projectId: string | null;
+  activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  reloadPreview: () => void;
+  isRecordingRef?: React.RefObject<boolean>;
+}
+
+function generateSplitId(existingIds: string[], baseId: string): string {
+  let newId = `${baseId}-split`;
+  let suffix = 2;
+  while (existingIds.includes(newId)) {
+    newId = `${baseId}-split-${suffix++}`;
+  }
+  return newId;
+}
+
+async function splitHtmlElement(
+  projectId: string,
+  targetPath: string,
+  patchTarget: NonNullable<ReturnType<typeof buildPatchTarget>>,
+  splitTime: number,
+  newId: string,
+): Promise<{ ok: boolean; changed?: boolean; content?: string }> {
+  const response = await fetch(
+    `/api/projects/${projectId}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ target: patchTarget, splitTime, newId }),
+    },
+  );
+  if (!response.ok) throw new Error("Split request failed");
+  return (await response.json()) as { ok: boolean; changed?: boolean; content?: string };
+}
+
+async function splitGsapAnimations(
+  projectId: string,
+  targetPath: string,
+  originalId: string,
+  newId: string,
+  splitTime: number,
+  elementStart: number,
+  elementDuration: number,
+): Promise<{ content: string | null; skippedSelectors?: string[] }> {
+  const response = await fetch(
+    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(targetPath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        type: "split-animations",
+        originalId,
+        newId,
+        splitTime,
+        elementStart,
+        elementDuration,
+      }),
+    },
+  );
+  if (!response.ok) {
+    const errorBody = (await response.json().catch(() => null)) as { error?: string } | null;
+    if (errorBody?.error === "no GSAP script found in file") {
+      return { content: null };
+    }
+    throw new Error(errorBody?.error ?? `GSAP animation split failed (${response.status})`);
+  }
+  const data = (await response.json()) as {
+    ok?: boolean;
+    after?: string;
+    skippedSelectors?: string[];
+  };
+  return {
+    content: data.ok && data.after ? data.after : null,
+    skippedSelectors: data.skippedSelectors,
+  };
+}
+
+// fallow-ignore-next-line complexity
+async function executeSplit(
+  pid: string,
+  element: TimelineElement,
+  splitTime: number,
+  activeCompPath: string | null,
+  writeProjectFile: (path: string, content: string) => Promise<void>,
+): Promise<{
+  targetPath: string;
+  originalContent: string;
+  patchedContent: string;
+  changed: boolean;
+  skippedSelectors?: string[];
+}> {
+  const patchTarget = buildPatchTarget(element);
+  if (!patchTarget) throw new Error("Clip is missing a patchable target.");
+
+  const targetPath = element.sourceFile || activeCompPath || "index.html";
+  const originalContent = await readFileContent(pid, targetPath);
+  const newId = generateSplitId(collectHtmlIds(originalContent), element.domId || "clip");
+
+  const splitResult = await splitHtmlElement(pid, targetPath, patchTarget, splitTime, newId);
+  if (!splitResult.ok) throw new Error("Failed to split clip.");
+  if (!splitResult.changed) {
+    return { targetPath, originalContent, patchedContent: originalContent, changed: false };
+  }
+
+  let patchedContent =
+    typeof splitResult.content === "string" ? splitResult.content : originalContent;
+
+  let skippedSelectors: string[] | undefined;
+  if (element.domId) {
+    try {
+      const gsapResult = await splitGsapAnimations(
+        pid,
+        targetPath,
+        element.domId,
+        newId,
+        splitTime,
+        element.start,
+        element.duration,
+      );
+      if (gsapResult.content) patchedContent = gsapResult.content;
+      if (gsapResult.skippedSelectors?.length) skippedSelectors = gsapResult.skippedSelectors;
+    } catch (gsapError) {
+      // GSAP mutation failed — the HTML split already wrote to disk.
+      // Restore the original content to avoid a corrupt half-split state.
+      await writeProjectFile(targetPath, originalContent);
+      throw gsapError;
+    }
+  }
+
+  return { targetPath, originalContent, patchedContent, changed: true, skippedSelectors };
+}
+
+export function useRazorSplit({
+  projectId,
+  activeCompPath,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  reloadPreview,
+  isRecordingRef,
+}: UseRazorSplitOptions) {
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+
+  const handleRazorSplit = useCallback(
+    // fallow-ignore-next-line complexity
+    async (element: TimelineElement, splitTime: number) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+
+      const pid = projectIdRef.current;
+      if (!pid || !canSplitElement(element)) return;
+
+      const clipStart = element.start;
+      const clipEnd = element.start + element.duration;
+      if (
+        splitTime <= clipStart + SPLIT_BOUNDARY_EPSILON_S ||
+        splitTime >= clipEnd - SPLIT_BOUNDARY_EPSILON_S
+      ) {
+        return;
+      }
+
+      try {
+        const { targetPath, originalContent, patchedContent, changed, skippedSelectors } =
+          await executeSplit(pid, element, splitTime, activeCompPath, writeProjectFile);
+
+        if (!changed) {
+          showToast("Failed to split clip — playhead may be outside the clip", "error");
+          return;
+        }
+
+        domEditSaveTimestampRef.current = Date.now();
+        await saveProjectFilesWithHistory({
+          projectId: pid,
+          label: "Split timeline clip",
+          kind: "timeline",
+          files: { [targetPath]: patchedContent },
+          readFile: async () => originalContent,
+          writeFile: writeProjectFile,
+          recordEdit,
+        });
+
+        reloadPreview();
+        showToast(`Split ${getTimelineElementLabel(element)} at ${splitTime.toFixed(2)}s`, "info");
+        if (skippedSelectors?.length) {
+          showToast(
+            `Some animations use non-ID selectors (${skippedSelectors.join(", ")}) and were not retargeted`,
+            "info",
+          );
+        }
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to split timeline clip";
+        showToast(message, "error");
+      }
+    },
+    [
+      activeCompPath,
+      recordEdit,
+      showToast,
+      writeProjectFile,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      isRecordingRef,
+    ],
+  );
+
+  // fallow-ignore-next-line complexity
+  const handleRazorSplitAll = useCallback(
+    async (splitTime: number) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+
+      const pid = projectIdRef.current;
+      if (!pid) return;
+      const { elements } = usePlayerStore.getState();
+      const splittable = elements.filter(
+        (el) => canSplitElement(el) && splitTime > el.start && splitTime < el.start + el.duration,
+      );
+      if (splittable.length === 0) return;
+
+      try {
+        const originals = new Map<string, string>();
+        for (const el of splittable) {
+          const path = el.sourceFile || activeCompPath || "index.html";
+          if (!originals.has(path)) {
+            originals.set(path, await readFileContent(pid, path));
+          }
+        }
+
+        let splitCount = 0;
+        const finalContent = new Map<string, string>();
+
+        for (const element of splittable) {
+          const result = await executeSplit(
+            pid,
+            element,
+            splitTime,
+            activeCompPath,
+            writeProjectFile,
+          );
+          if (result.changed) {
+            finalContent.set(result.targetPath, result.patchedContent);
+            await writeProjectFile(result.targetPath, result.patchedContent);
+            splitCount++;
+          }
+        }
+
+        if (splitCount === 0) return;
+
+        domEditSaveTimestampRef.current = Date.now();
+        await recordEdit({
+          label: `Split ${splitCount} clips at ${splitTime.toFixed(2)}s`,
+          kind: "timeline",
+          files: Object.fromEntries(
+            [...finalContent].map(([path, after]) => [
+              path,
+              { before: originals.get(path) ?? "", after },
+            ]),
+          ),
+        });
+
+        reloadPreview();
+        showToast(`Split ${splitCount} clips at ${splitTime.toFixed(2)}s`, "info");
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to split clips";
+        showToast(message, "error");
+      }
+    },
+    [
+      activeCompPath,
+      recordEdit,
+      showToast,
+      writeProjectFile,
+      domEditSaveTimestampRef,
+      reloadPreview,
+      isRecordingRef,
+    ],
+  );
+
+  return { handleRazorSplit, handleRazorSplitAll };
+}

package/src/hooks/useTimelineEditing.ts

@@ -1,6 +1,7 @@
 import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
+import { useRazorSplit } from "./useRazorSplit";
 import {
   buildTimelineAssetId,
   buildTimelineAssetInsertHtml,
@@ -30,7 +31,7 @@ import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
 // ── Types ──
 
-interface RecordEditInput {
+export interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
@@ -386,108 +387,24 @@ export function useTimelineEditing({
     [showToast],
   );
 
-  const handleTimelineElementSplit = useCallback(
-    async (element: TimelineElement, splitTime: number) => {
-      if (isRecordingRef?.current) {
-        showToast("Cannot edit timeline while recording", "error");
-        return;
-      }
-      const pid = projectIdRef.current;
-      if (!pid) return;
-
-      const splittableTags = new Set(["video", "audio", "img"]);
-      if (
-        element.timelineLocked ||
-        element.timingSource === "implicit" ||
-        element.compositionSrc ||
-        !splittableTags.has(element.tag) ||
-        !element.duration ||
-        !Number.isFinite(element.duration)
-      ) {
-        return;
-      }
-
-      if (splitTime <= element.start || splitTime >= element.start + element.duration) {
-        showToast("Playhead must be inside the clip to split.", "error");
-        return;
-      }
-
-      const patchTarget = buildPatchTarget(element);
-      if (!patchTarget) {
-        showToast("Clip is missing a patchable target.", "error");
-        return;
-      }
-
-      const targetPath = element.sourceFile || activeCompPath || "index.html";
-      try {
-        const originalContent = await readFileContent(pid, targetPath);
-        const existingIds = collectHtmlIds(originalContent);
-        const baseId = element.domId || "clip";
-        let newId = `${baseId}-split`;
-        let suffix = 2;
-        while (existingIds.includes(newId)) {
-          newId = `${baseId}-split-${suffix++}`;
-        }
-
-        const response = await fetch(
-          `/api/projects/${pid}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ target: patchTarget, splitTime, newId }),
-          },
-        );
-        if (!response.ok) {
-          throw new Error("Split request failed");
-        }
-
-        const data = (await response.json()) as {
-          ok?: boolean;
-          changed?: boolean;
-          content?: string;
-        };
-        if (!data.ok || !data.changed) {
-          showToast("Failed to split clip — playhead may be outside the clip.", "error");
-          return;
-        }
-
-        const patchedContent = typeof data.content === "string" ? data.content : originalContent;
-
-        domEditSaveTimestampRef.current = Date.now();
-        await saveProjectFilesWithHistory({
-          projectId: pid,
-          label: "Split timeline clip",
-          kind: "timeline",
-          files: { [targetPath]: patchedContent },
-          readFile: async () => originalContent,
-          writeFile: writeProjectFile,
-          recordEdit,
-        });
-
-        reloadPreview();
-        const label = getTimelineElementLabel(element);
-        showToast(`Split ${label} at ${splitTime.toFixed(2)}s`, "info");
-      } catch (error) {
-        const message = error instanceof Error ? error.message : "Failed to split timeline clip";
-        showToast(message, "error");
-      }
-    },
-    [
-      activeCompPath,
-      recordEdit,
-      showToast,
-      writeProjectFile,
-      domEditSaveTimestampRef,
-      reloadPreview,
-      isRecordingRef,
-    ],
-  );
+  const { handleRazorSplit, handleRazorSplitAll } = useRazorSplit({
+    projectId,
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    reloadPreview,
+    isRecordingRef,
+  });
 
   return {
     handleTimelineElementMove,
     handleTimelineElementResize,
     handleTimelineElementDelete,
-    handleTimelineElementSplit,
+    handleTimelineElementSplit: handleRazorSplit,
+    handleRazorSplit,
+    handleRazorSplitAll,
     handleTimelineAssetDrop,
     handleTimelineFileDrop,
     handleBlockedTimelineEdit,

package/src/player/components/ClipContextMenu.tsx

@@ -1,5 +1,7 @@
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo } from "react";
 import type { TimelineElement } from "../store/playerStore";
+import { canSplitElement } from "../../utils/timelineElementSplit";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 interface ClipContextMenuProps {
   x: number;
@@ -20,30 +22,12 @@ export const ClipContextMenu = memo(function ClipContextMenu({
   onSplit,
   onDelete,
 }: ClipContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  const dismiss = useCallback(
-    (e: MouseEvent | KeyboardEvent) => {
-      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
-      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
-      onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", dismiss);
-    document.addEventListener("keydown", dismiss);
-    return () => {
-      document.removeEventListener("mousedown", dismiss);
-      document.removeEventListener("keydown", dismiss);
-    };
-  }, [dismiss]);
+  const menuRef = useContextMenuDismiss(onClose);
 
   const adjustedX = Math.min(x, window.innerWidth - 200);
   const adjustedY = Math.min(y, window.innerHeight - 200);
 
-  const isSplittable = ["video", "audio", "img"].includes(element.tag);
+  const isSplittable = canSplitElement(element) && ["video", "audio", "img"].includes(element.tag);
   const canSplit =
     isSplittable && currentTime > element.start && currentTime < element.start + element.duration;
 

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,5 +1,6 @@
-import { memo, useCallback, useEffect, useRef } from "react";
+import { memo, useRef } from "react";
 import { EASE_LABELS } from "../../components/editor/gsapAnimationConstants";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 export interface KeyframeDiamondContextMenuState {
   x: number;
@@ -41,27 +42,9 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   onChangeEase,
   onCopyProperties,
 }: KeyframeDiamondContextMenuProps) {
-  const menuRef = useRef<HTMLDivElement>(null);
+  const menuRef = useContextMenuDismiss(onClose);
   const easeSubmenuRef = useRef<HTMLDivElement>(null);
 
-  const dismiss = useCallback(
-    (e: MouseEvent | KeyboardEvent) => {
-      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
-      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
-      onClose();
-    },
-    [onClose],
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", dismiss);
-    document.addEventListener("keydown", dismiss);
-    return () => {
-      document.removeEventListener("mousedown", dismiss);
-      document.removeEventListener("keydown", dismiss);
-    };
-  }, [dismiss]);
-
   const adjustedX = Math.min(state.x, window.innerWidth - 200);
   const adjustedY = Math.min(state.y, window.innerHeight - 300);
 

package/src/player/components/PlayheadIndicator.tsx

@@ -0,0 +1,43 @@
+// fallow-ignore-file dead-code
+/**
+ * Shared playhead visual used by TimelineCanvas (real playhead) and
+ * TimelineEditorNotice (animated illustration).
+ */
+interface PlayheadIndicatorProps {
+  /** CSS color, defaults to the HF accent variable */
+  color?: string;
+  /** Glow shadow color, defaults to translucent accent */
+  glowColor?: string;
+}
+
+export function PlayheadIndicator({
+  color = "var(--hf-accent, #3CE6AC)",
+  glowColor = "rgba(60,230,172,0.5)",
+}: PlayheadIndicatorProps) {
+  return (
+    <>
+      <div
+        className="absolute top-0 bottom-0"
+        style={{
+          left: "50%",
+          width: 2,
+          marginLeft: -1,
+          background: color,
+          boxShadow: `0 0 8px ${glowColor}`,
+        }}
+      />
+      <div className="absolute" style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}>
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: "6px solid transparent",
+            borderRight: "6px solid transparent",
+            borderTop: `8px solid ${color}`,
+            filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
+          }}
+        />
+      </div>
+    </>
+  );
+}