@hyperframes/studio 0.6.11 → 0.6.13

package/src/hooks/useClipboard.ts

@@ -0,0 +1,229 @@
+import { useCallback, useRef } from "react";
+import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { type ClipboardPayload, deduplicateIds, insertAsSibling } from "../utils/clipboardPayload";
+import { collectHtmlIds } from "../utils/studioHelpers";
+import { insertTimelineAssetIntoSource } from "../utils/timelineAssetDrop";
+import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import type { EditHistoryKind } from "../utils/editHistory";
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+
+interface RecordEditInput {
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  files: Record<string, { before: string; after: string }>;
+}
+
+interface UseClipboardOptions {
+  projectId: string | null;
+  activeCompPath: string | null;
+  domEditSelectionRef: React.MutableRefObject<DomEditSelection | 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;
+  handleTimelineElementDelete: (element: TimelineElement) => Promise<void>;
+  handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+}
+
+async function readFileContent(projectId: string, targetPath: string): Promise<string> {
+  const response = await fetch(
+    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
+  );
+  if (!response.ok) throw new Error(`Failed to read ${targetPath}`);
+  const data = (await response.json()) as { content?: string };
+  if (typeof data.content !== "string") throw new Error(`Missing file contents for ${targetPath}`);
+  return data.content;
+}
+
+function getElementOuterHtml(
+  iframeRef: React.MutableRefObject<HTMLIFrameElement | null>,
+  selection: DomEditSelection,
+): string | null {
+  let doc: Document | null = null;
+  try {
+    doc = iframeRef.current?.contentDocument ?? null;
+  } catch {
+    return null;
+  }
+  if (!doc) return null;
+
+  let el: Element | null = null;
+  if (selection.id) {
+    el = doc.getElementById(selection.id);
+  }
+  if (!el && selection.selector) {
+    const matches = doc.querySelectorAll(selection.selector);
+    el = matches[selection.selectorIndex ?? 0] ?? null;
+  }
+  return el && "outerHTML" in el ? (el as Element).outerHTML : null;
+}
+
+export function useClipboard({
+  projectId,
+  activeCompPath,
+  domEditSelectionRef,
+  showToast,
+  writeProjectFile,
+  recordEdit,
+  domEditSaveTimestampRef,
+  reloadPreview,
+  handleTimelineElementDelete,
+  handleDomEditElementDelete,
+  previewIframeRef,
+}: UseClipboardOptions) {
+  const clipboardRef = useRef<ClipboardPayload | null>(null);
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+
+  const handleCopy = useCallback((): boolean => {
+    const { selectedElementId, elements } = usePlayerStore.getState();
+
+    // Timeline clip copy
+    if (selectedElementId) {
+      const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
+      if (!element) return false;
+      const targetPath = element.sourceFile || activeCompPath || "index.html";
+
+      let html: string | null = null;
+      try {
+        const doc = previewIframeRef.current?.contentDocument;
+        if (doc) {
+          let el: Element | null = null;
+          if (element.domId) el = doc.getElementById(element.domId);
+          if (!el && element.selector) {
+            const matches = doc.querySelectorAll(element.selector);
+            el = matches[element.selectorIndex ?? 0] ?? null;
+          }
+          if (el && "outerHTML" in el) html = (el as Element).outerHTML;
+        }
+      } catch {
+        // cross-origin frame
+      }
+
+      if (!html) {
+        showToast("Unable to copy this element.", "info");
+        return false;
+      }
+
+      const payload: ClipboardPayload = { kind: "timeline-clip", html, sourceFile: targetPath };
+      clipboardRef.current = payload;
+      showToast("Copied clip", "info");
+      return true;
+    }
+
+    // DOM element copy
+    const domSelection = domEditSelectionRef.current;
+    if (domSelection) {
+      const html = getElementOuterHtml(previewIframeRef, domSelection);
+      if (!html) {
+        showToast("Unable to copy this element.", "info");
+        return false;
+      }
+      const targetPath = domSelection.sourceFile || activeCompPath || "index.html";
+      const payload: ClipboardPayload = {
+        kind: "dom-element",
+        html,
+        sourceFile: targetPath,
+        originSelector: domSelection.selector,
+        originSelectorIndex: domSelection.selectorIndex,
+      };
+      clipboardRef.current = payload;
+      showToast("Copied element", "info");
+      return true;
+    }
+
+    return false;
+  }, [activeCompPath, domEditSelectionRef, previewIframeRef, showToast]);
+
+  const handlePaste = useCallback(async () => {
+    const payload = clipboardRef.current;
+    if (!payload) {
+      showToast("Nothing to paste.", "info");
+      return;
+    }
+    const pid = projectIdRef.current;
+    if (!pid) return;
+
+    const targetPath = activeCompPath || "index.html";
+    try {
+      const originalContent = await readFileContent(pid, targetPath);
+      const existingIds = collectHtmlIds(originalContent);
+      const deduped = deduplicateIds(payload.html, existingIds);
+
+      let patchedContent: string;
+      if (payload.kind === "timeline-clip") {
+        // Only rewrite data-start on the outermost opening tag. The non-global
+        // regex matches the first occurrence, which is always in the root tag
+        // since outerHTML starts with it. Nested clips keep their own timing.
+        const { currentTime } = usePlayerStore.getState();
+        const rootTagEnd = deduped.indexOf(">");
+        const rootTag = rootTagEnd >= 0 ? deduped.slice(0, rootTagEnd + 1) : deduped;
+        const patchedRootTag = rootTag.replace(
+          /data-start="[^"]*"/,
+          `data-start="${formatTimelineAttributeNumber(currentTime)}"`,
+        );
+        const withNewStart = patchedRootTag + deduped.slice(rootTagEnd + 1);
+        patchedContent = insertTimelineAssetIntoSource(originalContent, withNewStart);
+      } else {
+        patchedContent = insertAsSibling(
+          originalContent,
+          deduped,
+          payload.originSelector,
+          payload.originSelectorIndex,
+        );
+      }
+
+      domEditSaveTimestampRef.current = Date.now();
+      await saveProjectFilesWithHistory({
+        projectId: pid,
+        label: payload.kind === "timeline-clip" ? "Paste clip" : "Paste element",
+        kind: "timeline" as EditHistoryKind,
+        files: { [targetPath]: patchedContent },
+        readFile: async () => originalContent,
+        writeFile: writeProjectFile,
+        recordEdit,
+      });
+
+      reloadPreview();
+      showToast(payload.kind === "timeline-clip" ? "Pasted clip" : "Pasted element", "info");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to paste";
+      showToast(message);
+    }
+  }, [
+    activeCompPath,
+    domEditSaveTimestampRef,
+    recordEdit,
+    reloadPreview,
+    showToast,
+    writeProjectFile,
+  ]);
+
+  const handleCut = useCallback(async (): Promise<boolean> => {
+    const copied = handleCopy();
+    if (!copied) return false;
+
+    const { selectedElementId, elements } = usePlayerStore.getState();
+    if (selectedElementId) {
+      const element = elements.find((el) => (el.key ?? el.id) === selectedElementId);
+      if (element) {
+        await handleTimelineElementDelete(element);
+        return true;
+      }
+    }
+
+    const domSelection = domEditSelectionRef.current;
+    if (domSelection) {
+      await handleDomEditElementDelete(domSelection);
+      return true;
+    }
+    return true;
+  }, [handleCopy, domEditSelectionRef, handleTimelineElementDelete, handleDomEditElementDelete]);
+
+  return { handleCopy, handlePaste, handleCut };
+}

package/src/hooks/useDomEditCommits.ts

@@ -189,6 +189,7 @@ export function useDomEditCommits({
 
   const {
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,
@@ -437,6 +438,7 @@ export function useDomEditCommits({
   return {
     resolveImportedFontAsset,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,

package/src/hooks/useDomEditSession.ts

@@ -193,6 +193,7 @@ export function useDomEditSession({
   const {
     resolveImportedFontAsset,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
@@ -305,6 +306,7 @@ export function useDomEditSession({
     applyDomSelection,
     clearDomSelection,
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomBoxSizeCommit,

package/src/hooks/useDomEditTextCommits.ts

@@ -113,6 +113,38 @@ export function useDomEditTextCommits({
     ],
   );
 
+  const handleDomAttributeCommit = useCallback(
+    async (attr: string, value: string) => {
+      if (!domEditSelection) return;
+      const iframe = previewIframeRef.current;
+      const doc = iframe?.contentDocument;
+      if (doc) {
+        const el = findElementForSelection(doc, domEditSelection, activeCompPath);
+        if (el) el.setAttribute(`data-${attr}`, value);
+      }
+      const op: PatchOperation = { type: "attribute", property: attr, value };
+      try {
+        await persistDomEditOperations(domEditSelection, [op], {
+          label: "Edit timing",
+          skipRefresh: false,
+        });
+      } catch (err) {
+        console.warn(
+          "[Studio] Attribute persist failed:",
+          err instanceof Error ? err.message : err,
+        );
+      }
+      refreshDomEditSelectionFromPreview(domEditSelection);
+    },
+    [
+      activeCompPath,
+      domEditSelection,
+      persistDomEditOperations,
+      refreshDomEditSelectionFromPreview,
+      previewIframeRef,
+    ],
+  );
+
   const handleDomTextCommit = useCallback(
     async (value: string, fieldKey?: string) => {
       if (!domEditSelection) return;
@@ -321,6 +353,7 @@ export function useDomEditTextCommits({
 
   return {
     handleDomStyleCommit,
+    handleDomAttributeCommit,
     handleDomTextCommit,
     commitDomTextFields,
     handleDomTextFieldStyleCommit,

package/src/player/components/Player.tsx

@@ -229,13 +229,19 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           // data arrives), but the overlay communicates why the first frame
           // or first audio beat may lag.
           //
+          // Skip the overlay on subsequent loads (content refreshes via
+          // refreshPlayer). The browser has already cached the assets from
+          // the first load, so they resolve near-instantly and the overlay
+          // just creates a disruptive flash.
+          //
           // Poll with a 10 s safety cap (100 ticks × 100 ms). If the cap
           // trips we hide the overlay so the UI doesn't appear stuck forever,
           // but we log a debug warning so the case is diagnosable — a long
           // cold video or a broken asset can legitimately exceed 10 s on a
           // slow network.
           if (assetPollRef.current) clearInterval(assetPollRef.current);
-          let lastUnloaded = hasUnloadedAssets(iframe, false);
+          const isContentRefresh = loadCountRef.current > 1;
+          let lastUnloaded = isContentRefresh ? false : hasUnloadedAssets(iframe, false);
           if (lastUnloaded) {
             setAssetsLoading(true);
             let attempts = 0;

package/src/utils/clipboardPayload.test.ts

@@ -0,0 +1,62 @@
+// @vitest-environment node
+import { describe, expect, it } from "vitest";
+import {
+  deduplicateIds,
+  serializeClipboardPayload,
+  deserializeClipboardPayload,
+  type ClipboardPayload,
+} from "./clipboardPayload";
+
+describe("deduplicateIds", () => {
+  it("renames ids that collide with existing ids", () => {
+    const html = '<div id="hero"><img id="photo" src="a.png" /></div>';
+    const existingIds = ["hero", "other"];
+    const result = deduplicateIds(html, existingIds);
+    expect(result).not.toContain('id="hero"');
+    expect(result).toContain('id="photo"');
+    expect(result).toMatch(/id="hero-\d+"/);
+  });
+
+  it("returns html unchanged when no collisions", () => {
+    const html = '<div id="unique"><p>hello</p></div>';
+    const result = deduplicateIds(html, ["other"]);
+    expect(result).toBe(html);
+  });
+
+  it("does not rewrite data-composition-id or other data-*-id attributes", () => {
+    const html = '<div data-composition-id="hero" data-clip-id="hero" id="hero">content</div>';
+    const result = deduplicateIds(html, ["hero"]);
+    expect(result).toContain('data-composition-id="hero"');
+    expect(result).toContain('data-clip-id="hero"');
+    expect(result).toMatch(/\sid="hero-\d+"/);
+  });
+});
+
+describe("serializeClipboardPayload / deserializeClipboardPayload", () => {
+  it("round-trips a timeline clip payload", () => {
+    const payload: ClipboardPayload = {
+      kind: "timeline-clip",
+      html: '<img id="photo" src="a.png" data-start="1" data-duration="3" />',
+      sourceFile: "index.html",
+    };
+    const json = serializeClipboardPayload(payload);
+    const parsed = deserializeClipboardPayload(json);
+    expect(parsed).toEqual(payload);
+  });
+
+  it("round-trips a dom-element payload", () => {
+    const payload: ClipboardPayload = {
+      kind: "dom-element",
+      html: '<div class="card"><p>Hello</p></div>',
+      sourceFile: "compositions/scene.html",
+    };
+    const json = serializeClipboardPayload(payload);
+    const parsed = deserializeClipboardPayload(json);
+    expect(parsed).toEqual(payload);
+  });
+
+  it("returns null for invalid JSON", () => {
+    expect(deserializeClipboardPayload("not json")).toBeNull();
+    expect(deserializeClipboardPayload('{"kind":"unknown"}')).toBeNull();
+  });
+});

package/src/utils/clipboardPayload.ts

@@ -0,0 +1,168 @@
+const CLIPBOARD_MARKER = "hyperframes-clipboard:v1";
+
+export interface ClipboardPayload {
+  kind: "timeline-clip" | "dom-element";
+  html: string;
+  sourceFile: string;
+  originSelector?: string;
+  originSelectorIndex?: number;
+}
+
+interface SerializedPayload {
+  _marker: string;
+  kind: "timeline-clip" | "dom-element";
+  html: string;
+  sourceFile: string;
+  originSelector?: string;
+  originSelectorIndex?: number;
+}
+
+export function serializeClipboardPayload(payload: ClipboardPayload): string {
+  const data: SerializedPayload = {
+    _marker: CLIPBOARD_MARKER,
+    kind: payload.kind,
+    html: payload.html,
+    sourceFile: payload.sourceFile,
+    originSelector: payload.originSelector,
+    originSelectorIndex: payload.originSelectorIndex,
+  };
+  return JSON.stringify(data);
+}
+
+export function deserializeClipboardPayload(json: string): ClipboardPayload | null {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(json);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== "object") return null;
+  const obj = parsed as Record<string, unknown>;
+  if (obj._marker !== CLIPBOARD_MARKER) return null;
+  if (obj.kind !== "timeline-clip" && obj.kind !== "dom-element") return null;
+  if (typeof obj.html !== "string" || typeof obj.sourceFile !== "string") return null;
+  return {
+    kind: obj.kind,
+    html: obj.html,
+    sourceFile: obj.sourceFile,
+    originSelector: typeof obj.originSelector === "string" ? obj.originSelector : undefined,
+    originSelectorIndex:
+      typeof obj.originSelectorIndex === "number" ? obj.originSelectorIndex : undefined,
+  };
+}
+
+/**
+ * Insert `newHtml` as a sibling immediately after the element matched by
+ * `selector` (at `selectorIndex`) in `source`. Falls back to inserting after
+ * the composition root if the selector doesn't match — so paste never silently
+ * drops the content.
+ */
+export function insertAsSibling(
+  source: string,
+  newHtml: string,
+  selector: string | undefined,
+  selectorIndex: number | undefined,
+): string {
+  if (selector) {
+    const idx = selectorIndex ?? 0;
+    let matchCount = 0;
+
+    // Find the element by searching for its opening tag pattern.
+    // For id selectors like #foo, search for id="foo".
+    // For class selectors like .name-text, search for class="...name-text...".
+    // For attribute selectors like [data-composition-id="x"], search literally.
+
+    let searchPattern: RegExp | null = null;
+    if (selector.startsWith("#")) {
+      const id = selector.slice(1);
+      searchPattern = new RegExp(`<[a-z][^>]*\\bid="${id}"[^>]*>`, "gi");
+    } else if (selector.startsWith(".")) {
+      const cls = selector.slice(1);
+      searchPattern = new RegExp(`<[a-z][^>]*\\bclass="[^"]*\\b${cls}\\b[^"]*"[^>]*>`, "gi");
+    } else if (selector.startsWith("[")) {
+      const inner = selector.slice(1, -1);
+      searchPattern = new RegExp(`<[a-z][^>]*\\b${inner}[^>]*>`, "gi");
+    }
+
+    if (searchPattern) {
+      let match: RegExpExecArray | null;
+      while ((match = searchPattern.exec(source)) !== null) {
+        if (matchCount === idx) {
+          const insertPos = findClosingTagPosition(source, match.index);
+          if (insertPos > 0) {
+            return source.slice(0, insertPos) + "\n" + newHtml + source.slice(insertPos);
+          }
+        }
+        matchCount++;
+      }
+    }
+  }
+
+  // Fallback: insert after composition root opening tag (same as timeline clips)
+  const rootOpenTag = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;
+  const rootMatch = rootOpenTag.exec(source);
+  if (rootMatch && rootMatch.index != null) {
+    const insertAt = rootMatch.index + rootMatch[0].length;
+    return source.slice(0, insertAt) + newHtml + source.slice(insertAt);
+  }
+
+  return source + newHtml;
+}
+
+function findClosingTagPosition(html: string, openTagStart: number): number {
+  // Find the end of the opening tag
+  const openTagEnd = html.indexOf(">", openTagStart);
+  if (openTagEnd < 0) return -1;
+
+  // Self-closing tag?
+  if (html[openTagEnd - 1] === "/") return openTagEnd + 1;
+
+  // Extract the tag name
+  const tagNameMatch = html.slice(openTagStart).match(/^<([a-z][a-z0-9]*)/i);
+  if (!tagNameMatch) return -1;
+  const tagName = tagNameMatch[1]!;
+
+  // Walk forward counting open/close tags of the same name
+  let depth = 1;
+  let pos = openTagEnd + 1;
+  const openRe = new RegExp(`<${tagName}(?:\\s|>|/>)`, "gi");
+  const closeRe = new RegExp(`</${tagName}\\s*>`, "gi");
+
+  while (depth > 0 && pos < html.length) {
+    openRe.lastIndex = pos;
+    closeRe.lastIndex = pos;
+
+    const nextOpen = openRe.exec(html);
+    const nextClose = closeRe.exec(html);
+
+    if (!nextClose) return -1;
+
+    if (nextOpen && nextOpen.index < nextClose.index) {
+      // Check if it's self-closing
+      const selfCloseCheck = html.lastIndexOf("/", html.indexOf(">", nextOpen.index));
+      if (selfCloseCheck > nextOpen.index) {
+        pos = html.indexOf(">", nextOpen.index) + 1;
+      } else {
+        depth++;
+        pos = html.indexOf(">", nextOpen.index) + 1;
+      }
+    } else {
+      depth--;
+      if (depth === 0) return nextClose.index + nextClose[0].length;
+      pos = nextClose.index + nextClose[0].length;
+    }
+  }
+  return -1;
+}
+
+export function deduplicateIds(html: string, existingIds: string[]): string {
+  const existingSet = new Set(existingIds);
+  return html.replace(/(?<=\s)id="([^"]+)"/g, (full, id: string) => {
+    if (!existingSet.has(id)) return full;
+    let counter = 2;
+    while (existingSet.has(`${id}-${counter}`)) counter++;
+    const newId = `${id}-${counter}`;
+    existingSet.add(newId);
+    return `id="${newId}"`;
+  });
+}