npm - @hyperframes/studio - Versions diffs - 0.4.17 → 0.4.18 - Mend

@hyperframes/studio 0.4.17 → 0.4.18

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 (11) hide show

package/dist/assets/index-D0VntLIQ.js +115 -0
package/dist/index.html +1 -1
package/package.json +4 -4
package/src/App.tsx +359 -48
package/src/components/nle/NLELayout.tsx +15 -0
package/src/components/sidebar/AssetsTab.tsx +7 -0
package/src/player/components/Timeline.test.ts +73 -0
package/src/player/components/Timeline.tsx +183 -12
package/src/utils/timelineAssetDrop.test.ts +80 -0
package/src/utils/timelineAssetDrop.ts +87 -0
package/dist/assets/index-JZr8f8y8.js +0 -115

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-JZr8f8y8.js"></script>
+    <script type="module" crossorigin src="/assets/index-D0VntLIQ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-kT65pCwW.css">
   </head>
   <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.4.17",
-    "@hyperframes/player": "0.4.17"
+    "@hyperframes/core": "0.4.18",
+    "@hyperframes/player": "0.4.18"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -47,7 +47,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.4.17"
+    "@hyperframes/producer": "0.4.18"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/App.tsx CHANGED Viewed

@@ -13,6 +13,15 @@ import { LintModal } from "./components/LintModal";
 import type { LintFinding } from "./components/LintModal";
 import { MediaPreview } from "./components/MediaPreview";
 import { isMediaFile } from "./utils/mediaTypes";
+import {
+  buildTimelineAssetId,
+  buildTimelineAssetInsertHtml,
+  buildTimelineFileDropPlacements,
+  getTimelineAssetKind,
+  insertTimelineAssetIntoSource,
+  resolveTimelineAssetSrc,
+  type TimelineAssetKind,
+} from "./utils/timelineAssetDrop";
 import { CaptionOverlay } from "./captions/components/CaptionOverlay";
 import { CaptionPropertyPanel } from "./captions/components/CaptionPropertyPanel";
 import { CaptionTimeline } from "./captions/components/CaptionTimeline";
@@ -45,6 +54,56 @@ interface AppToast {
   tone: "error" | "info";
 }
+const DEFAULT_TIMELINE_ASSET_DURATION: Record<TimelineAssetKind, number> = {
+  image: 3,
+  video: 5,
+  audio: 5,
+};
+function collectHtmlIds(source: string): string[] {
+  return Array.from(source.matchAll(/\bid="([^"]+)"/g), (match) => match[1] ?? "");
+}
+async function resolveDroppedAssetDuration(
+  projectId: string,
+  assetPath: string,
+  kind: TimelineAssetKind,
+): Promise<number> {
+  if (kind === "image") return DEFAULT_TIMELINE_ASSET_DURATION.image;
+  const media = document.createElement(kind === "video" ? "video" : "audio");
+  media.preload = "metadata";
+  media.src = `/api/projects/${projectId}/preview/${assetPath}`;
+  const duration = await new Promise<number>((resolve) => {
+    const timeout = window.setTimeout(() => resolve(DEFAULT_TIMELINE_ASSET_DURATION[kind]), 3000);
+    const finalize = (value: number) => {
+      window.clearTimeout(timeout);
+      resolve(value);
+    };
+    media.addEventListener(
+      "loadedmetadata",
+      () => {
+        const raw = Number(media.duration);
+        finalize(
+          Number.isFinite(raw) && raw > 0
+            ? Math.round(raw * 100) / 100
+            : DEFAULT_TIMELINE_ASSET_DURATION[kind],
+        );
+      },
+      { once: true },
+    );
+    media.addEventListener("error", () => finalize(DEFAULT_TIMELINE_ASSET_DURATION[kind]), {
+      once: true,
+    });
+  });
+  media.src = "";
+  media.load();
+  return duration;
+}
 // ── Main App ──
 export function StudioApp() {
@@ -717,7 +776,135 @@ export function StudioApp() {
     [activeCompPath],
   );
-  // ── File Management Handlers ──
+  const showToast = useCallback((message: string, tone: AppToast["tone"] = "error") => {
+    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
+    setAppToast({ message, tone });
+    toastTimerRef.current = setTimeout(() => setAppToast(null), 4000);
+  }, []);
+  const handleTimelineElementDelete = useCallback(
+    async (element: TimelineElement) => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      const targetPath = element.sourceFile || activeCompPath || "index.html";
+      try {
+        const response = await fetch(
+          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+        );
+        if (!response.ok) {
+          throw new Error(`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 = element.domId
+          ? { id: element.domId, selector: element.selector, selectorIndex: element.selectorIndex }
+          : element.selector
+            ? { selector: element.selector, selectorIndex: element.selectorIndex }
+            : null;
+        if (!patchTarget) {
+          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
+        }
+        const resolvedTargetPath = targetPath || "index.html";
+        const remainingElements = timelineElements.filter(
+          (timelineElement) =>
+            (timelineElement.key ?? timelineElement.id) !== (element.key ?? element.id) &&
+            (timelineElement.sourceFile || activeCompPath || "index.html") === resolvedTargetPath,
+        );
+        const trackZIndices = buildTrackZIndexMap(
+          remainingElements.map((timelineElement) => timelineElement.track),
+        );
+        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 new Error(`Failed to delete ${element.id} from ${targetPath}`);
+        }
+        const removeData = (await removeResponse.json()) as {
+          changed?: boolean;
+          content?: string;
+        };
+        let patchedContent =
+          typeof removeData.content === "string" ? removeData.content : originalContent;
+        for (const timelineElement of remainingElements) {
+          const elementTarget = timelineElement.domId
+            ? {
+                id: timelineElement.domId,
+                selector: timelineElement.selector,
+                selectorIndex: timelineElement.selectorIndex,
+              }
+            : timelineElement.selector
+              ? {
+                  selector: timelineElement.selector,
+                  selectorIndex: timelineElement.selectorIndex,
+                }
+              : null;
+          if (!elementTarget) continue;
+          const nextZIndex = trackZIndices.get(timelineElement.track);
+          if (nextZIndex == null) continue;
+          patchedContent = applyPatchByTarget(patchedContent, elementTarget, {
+            type: "inline-style",
+            property: "z-index",
+            value: String(nextZIndex),
+          });
+        }
+        const saveResponse = await fetch(
+          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "text/plain" },
+            body: patchedContent,
+          },
+        );
+        if (!saveResponse.ok) {
+          throw new Error(`Failed to save ${targetPath}`);
+        }
+        if (editingPathRef.current === targetPath) {
+          setEditingFile({ path: targetPath, content: patchedContent });
+        }
+        usePlayerStore
+          .getState()
+          .setElements(
+            timelineElements.filter(
+              (timelineElement) =>
+                (timelineElement.key ?? timelineElement.id) !== (element.key ?? element.id),
+            ),
+          );
+        usePlayerStore.getState().setSelectedElementId(null);
+        setRefreshKey((k) => k + 1);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Failed to delete timeline clip";
+        showToast(message);
+      }
+    },
+    [activeCompPath, showToast, timelineElements],
+  );
+  const handleBlockedTimelineEdit = useCallback(
+    (_element: TimelineElement) => {
+      const now = Date.now();
+      if (now - lastBlockedTimelineToastAtRef.current < 1500) return;
+      lastBlockedTimelineToastAtRef.current = now;
+      showToast("This clip can’t be moved or resized from the timeline yet.", "info");
+    },
+    [showToast],
+  );
   const refreshFileTree = useCallback(async () => {
     const pid = projectIdRef.current;
@@ -727,6 +914,171 @@ export function StudioApp() {
     if (data.files) setFileTree(data.files);
   }, []);
+  const uploadProjectFiles = useCallback(
+    async (files: Iterable<File>, dir?: string): Promise<string[]> => {
+      const pid = projectIdRef.current;
+      const fileList = Array.from(files);
+      if (!pid || fileList.length === 0) return [];
+      const formData = new FormData();
+      for (const file of fileList) {
+        formData.append("file", file);
+      }
+      const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
+      try {
+        const res = await fetch(`/api/projects/${pid}/upload${qs}`, {
+          method: "POST",
+          body: formData,
+        });
+        if (res.ok) {
+          const data = await res.json();
+          if (data.skipped?.length) {
+            showToast(`Skipped (too large): ${data.skipped.join(", ")}`);
+          }
+          if (data.invalid?.length) {
+            const names = data.invalid.map((entry: { name: string }) => entry.name).join(", ");
+            showToast(`Unsupported media skipped: ${names}`);
+          }
+          await refreshFileTree();
+          setRefreshKey((k) => k + 1);
+          return Array.isArray(data.files) ? data.files : [];
+        } else if (res.status === 413) {
+          showToast("Upload rejected: payload too large");
+        } else {
+          showToast(`Upload failed (${res.status})`);
+        }
+      } catch {
+        showToast("Upload failed: network error");
+      }
+      return [];
+    },
+    [refreshFileTree, showToast],
+  );
+  const handleTimelineAssetDrop = useCallback(
+    async (assetPath: string, placement: Pick<TimelineElement, "start" | "track">) => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      const kind = getTimelineAssetKind(assetPath);
+      if (!kind) {
+        showToast("Only image, video, and audio assets can be dropped onto the timeline.");
+        return;
+      }
+      const targetPath = activeCompPath || "index.html";
+      try {
+        const response = await fetch(
+          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+        );
+        if (!response.ok) {
+          throw new Error(`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 normalizedStart = Number(formatTimelineAttributeNumber(placement.start));
+        const normalizedDuration = Number(
+          formatTimelineAttributeNumber(await resolveDroppedAssetDuration(pid, assetPath, kind)),
+        );
+        const newId = buildTimelineAssetId(assetPath, collectHtmlIds(originalContent));
+        const resolvedAssetSrc = resolveTimelineAssetSrc(targetPath, assetPath);
+        const resolvedTargetPath = targetPath || "index.html";
+        const relevantElements = timelineElements.filter(
+          (timelineElement) =>
+            (timelineElement.sourceFile || activeCompPath || "index.html") === resolvedTargetPath,
+        );
+        const trackZIndices = buildTrackZIndexMap([
+          ...relevantElements.map((timelineElement) => timelineElement.track),
+          placement.track,
+        ]);
+        let patchedContent = originalContent;
+        for (const timelineElement of relevantElements) {
+          const elementTarget = timelineElement.domId
+            ? {
+                id: timelineElement.domId,
+                selector: timelineElement.selector,
+                selectorIndex: timelineElement.selectorIndex,
+              }
+            : timelineElement.selector
+              ? {
+                  selector: timelineElement.selector,
+                  selectorIndex: timelineElement.selectorIndex,
+                }
+              : null;
+          if (!elementTarget) continue;
+          const nextZIndex = trackZIndices.get(timelineElement.track);
+          if (nextZIndex == null) continue;
+          patchedContent = applyPatchByTarget(patchedContent, elementTarget, {
+            type: "inline-style",
+            property: "z-index",
+            value: String(nextZIndex),
+          });
+        }
+        patchedContent = insertTimelineAssetIntoSource(
+          patchedContent,
+          buildTimelineAssetInsertHtml({
+            id: newId,
+            assetPath: resolvedAssetSrc,
+            kind,
+            start: normalizedStart,
+            duration: normalizedDuration,
+            track: placement.track,
+            zIndex: trackZIndices.get(placement.track) ?? 1,
+          }),
+        );
+        const saveResponse = await fetch(
+          `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+          {
+            method: "PUT",
+            headers: { "Content-Type": "text/plain" },
+            body: patchedContent,
+          },
+        );
+        if (!saveResponse.ok) {
+          throw new Error(`Failed to save ${targetPath}`);
+        }
+        if (editingPathRef.current === targetPath) {
+          setEditingFile({ path: targetPath, content: patchedContent });
+        }
+        setRefreshKey((k) => k + 1);
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to drop asset onto timeline";
+        showToast(message);
+      }
+    },
+    [activeCompPath, showToast, timelineElements],
+  );
+  const handleTimelineFileDrop = useCallback(
+    async (files: File[], placement?: Pick<TimelineElement, "start" | "track">) => {
+      const uploaded = await uploadProjectFiles(files);
+      if (uploaded.length === 0) return;
+      const placements = buildTimelineFileDropPlacements(
+        placement ?? { start: 0, track: 0 },
+        uploaded.length,
+      );
+      for (const [index, assetPath] of uploaded.entries()) {
+        await handleTimelineAssetDrop(assetPath, placements[index] ?? placements[0]);
+      }
+    },
+    [handleTimelineAssetDrop, uploadProjectFiles],
+  );
+  // ── File Management Handlers ──
   const handleCreateFile = useCallback(
     async (path: string) => {
       const pid = projectIdRef.current;
@@ -840,55 +1192,11 @@ export function StudioApp() {
   const handleMoveFile = handleRenameFile;
-  const showToast = useCallback((message: string, tone: AppToast["tone"] = "error") => {
-    if (toastTimerRef.current) clearTimeout(toastTimerRef.current);
-    setAppToast({ message, tone });
-    toastTimerRef.current = setTimeout(() => setAppToast(null), 4000);
-  }, []);
-  const handleBlockedTimelineEdit = useCallback(
-    (_element: TimelineElement) => {
-      const now = Date.now();
-      if (now - lastBlockedTimelineToastAtRef.current < 1500) return;
-      lastBlockedTimelineToastAtRef.current = now;
-      showToast("This clip can’t be moved or resized from the timeline yet.", "info");
-    },
-    [showToast],
-  );
   const handleImportFiles = useCallback(
-    async (files: FileList, dir?: string) => {
-      const pid = projectIdRef.current;
-      if (!pid || files.length === 0) return;
-      const formData = new FormData();
-      for (const file of Array.from(files)) {
-        formData.append("file", file);
-      }
-      const qs = dir ? `?dir=${encodeURIComponent(dir)}` : "";
-      try {
-        const res = await fetch(`/api/projects/${pid}/upload${qs}`, {
-          method: "POST",
-          body: formData,
-        });
-        if (res.ok) {
-          const data = await res.json();
-          if (data.skipped?.length) {
-            showToast(`Skipped (too large): ${data.skipped.join(", ")}`);
-          }
-          await refreshFileTree();
-          setRefreshKey((k) => k + 1);
-        } else if (res.status === 413) {
-          showToast("Upload rejected: payload too large");
-        } else {
-          showToast(`Upload failed (${res.status})`);
-        }
-      } catch {
-        showToast("Upload failed: network error");
-      }
+    async (files: FileList | File[], dir?: string) => {
+      void uploadProjectFiles(Array.from(files), dir);
     },
-    [refreshFileTree, showToast],
+    [uploadProjectFiles],
   );
   const handleLint = useCallback(async () => {
@@ -1151,6 +1459,9 @@ export function StudioApp() {
             activeCompositionPath={activeCompPath}
             timelineToolbar={timelineToolbar}
             renderClipContent={renderClipContent}
+            onDeleteElement={handleTimelineElementDelete}
+            onAssetDrop={handleTimelineAssetDrop}
+            onFileDrop={handleTimelineFileDrop}
             onMoveElement={handleTimelineElementMove}
             onResizeElement={handleTimelineElementResize}
             onBlockedEditAttempt={handleBlockedTimelineEdit}

package/src/components/nle/NLELayout.tsx CHANGED Viewed

@@ -28,6 +28,15 @@ interface NLELayoutProps {
     element: TimelineElement,
     style: { clip: string; label: string },
   ) => ReactNode;
+  onFileDrop?: (
+    files: File[],
+    placement?: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
+  onAssetDrop?: (
+    assetPath: string,
+    placement: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
   /** Persist timeline move actions back into source HTML */
   onMoveElement?: (
     element: TimelineElement,
@@ -61,6 +70,9 @@ export const NLELayout = memo(function NLELayout({
   onIframeRef,
   onCompositionChange,
   renderClipContent,
+  onFileDrop,
+  onDeleteElement,
+  onAssetDrop,
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
@@ -393,6 +405,9 @@ export const NLELayout = memo(function NLELayout({
                 onSeek={seek}
                 onDrillDown={handleDrillDown}
                 renderClipContent={renderClipContent}
+                onFileDrop={onFileDrop}
+                onDeleteElement={onDeleteElement}
+                onAssetDrop={onAssetDrop}
                 onMoveElement={onMoveElement}
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}

package/src/components/sidebar/AssetsTab.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import { memo, useState, useCallback, useRef } from "react";
 import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, AUDIO_EXT } from "../../utils/mediaTypes";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 interface AssetsTabProps {
   projectId: string;
@@ -106,7 +107,13 @@ function AssetCard({
   return (
     <>
       <div
+        draggable
         onClick={() => onCopy(asset)}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "copy";
+          e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+          e.dataTransfer.setData("text/plain", asset);
+        }}
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu({ x: e.clientX, y: e.clientY });

package/src/player/components/Timeline.test.ts CHANGED Viewed

@@ -1,9 +1,12 @@
 import { describe, it, expect } from "vitest";
 import {
   generateTicks,
+  getDefaultDroppedTrack,
   getTimelineCanvasHeight,
+  resolveTimelineAssetDrop,
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomTransition,
+  shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
 import { formatTime } from "../lib/time";
@@ -162,3 +165,73 @@ describe("getTimelineCanvasHeight", () => {
     expect(getTimelineCanvasHeight(0)).toBeGreaterThan(24);
   });
 });
+describe("shouldHandleTimelineDeleteKey", () => {
+  it("handles Delete and Backspace when focus is not in an editor", () => {
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);
+    expect(shouldHandleTimelineDeleteKey({ key: "Backspace" })).toBe(true);
+  });
+  it("ignores modifier shortcuts", () => {
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", metaKey: true })).toBe(false);
+    expect(shouldHandleTimelineDeleteKey({ key: "Backspace", ctrlKey: true })).toBe(false);
+  });
+  it("ignores input and editable targets", () => {
+    const input = { tagName: "INPUT", isContentEditable: false };
+    const editable = { tagName: "DIV", isContentEditable: true };
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: input })).toBe(false);
+    expect(shouldHandleTimelineDeleteKey({ key: "Delete", target: editable })).toBe(false);
+  });
+});
+describe("getDefaultDroppedTrack", () => {
+  it("defaults to track 0 when there are no rows yet", () => {
+    expect(getDefaultDroppedTrack([])).toBe(0);
+  });
+  it("creates a new bottom track when dropped below existing rows", () => {
+    expect(getDefaultDroppedTrack([0, 1, 5], 10)).toBe(6);
+  });
+});
+describe("resolveTimelineAssetDrop", () => {
+  it("maps drop coordinates to a start time and visible track", () => {
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 200,
+          scrollLeft: 0,
+          scrollTop: 0,
+          pixelsPerSecond: 100,
+          duration: 10,
+          trackHeight: 72,
+          trackOrder: [0, 3, 7],
+        },
+        432,
+        310,
+      ),
+    ).toEqual({ start: 3, track: 3 });
+  });
+  it("can create a new bottom track when dropped below the last visible row", () => {
+    expect(
+      resolveTimelineAssetDrop(
+        {
+          rectLeft: 100,
+          rectTop: 200,
+          scrollLeft: 0,
+          scrollTop: 0,
+          pixelsPerSecond: 100,
+          duration: 10,
+          trackHeight: 72,
+          trackOrder: [0, 3, 7],
+        },
+        250,
+        600,
+      ),
+    ).toEqual({ start: 1.18, track: 8 });
+  });
+});