@hyperframes/studio 0.5.0-alpha.1 → 0.5.0-alpha.10

package/src/player/store/playerStore.ts

@@ -34,6 +34,7 @@ interface PlayerState {
   elements: TimelineElement[];
   selectedElementId: string | null;
   playbackRate: number;
+  loopEnabled: boolean;
   /** Timeline zoom: 'fit' auto-scales to viewport, 'manual' uses manualZoomPercent */
   zoomMode: ZoomMode;
   /** Timeline zoom percent relative to the fit width when in manual mode */
@@ -43,6 +44,7 @@ interface PlayerState {
   setCurrentTime: (time: number) => void;
   setDuration: (duration: number) => void;
   setPlaybackRate: (rate: number) => void;
+  setLoopEnabled: (enabled: boolean) => void;
   setTimelineReady: (ready: boolean) => void;
   setElements: (elements: TimelineElement[]) => void;
   setSelectedElementId: (id: string | null) => void;
@@ -76,11 +78,13 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   elements: [],
   selectedElementId: null,
   playbackRate: 1,
+  loopEnabled: false,
   zoomMode: "fit",
   manualZoomPercent: 100,
 
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setPlaybackRate: (rate) => set({ playbackRate: rate }),
+  setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
   setZoomMode: (mode) => set({ zoomMode: mode }),
   setManualZoomPercent: (percent) =>
     set({ manualZoomPercent: Math.max(10, Math.min(2000, Math.round(percent))) }),
@@ -96,7 +100,7 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       ),
     })),
   // Resets project-specific state when switching compositions.
-  // playbackRate, zoomMode, and manualZoomPercent are intentionally preserved
+  // playbackRate, loopEnabled, zoomMode, and manualZoomPercent are intentionally preserved
   // because they are user preferences that should survive project switches.
   reset: () =>
     set({

package/src/styles/studio.css

@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+/*
+ * Studio is a dark-only UI — pin the user-agent color scheme to dark so that
+ * browser-native chrome (scrollbars, form controls, focus rings) picks the
+ * matching palette instead of defaulting to light against our #0a0a0a body.
+ */
+:root {
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
   padding: 0;

package/src/utils/clipboard.test.ts

@@ -0,0 +1,88 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Window } from "happy-dom";
+import { copyTextToClipboard } from "./clipboard";
+
+function installDocument(execCommand: (command: string) => boolean): void {
+  const window = new Window();
+  Object.defineProperty(window.document, "execCommand", {
+    configurable: true,
+    value: execCommand,
+  });
+  vi.stubGlobal("document", window.document);
+}
+
+function installNavigator(
+  writeText: (text: string) => Promise<void>,
+  userAgent = "Mozilla/5.0 Chrome/120.0.0.0 Safari/537.36",
+): void {
+  vi.stubGlobal("navigator", {
+    clipboard: { writeText },
+    userAgent,
+  });
+}
+
+describe("copyTextToClipboard", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("uses the synchronous selection copy path first in Safari", async () => {
+    const execCommand = vi.fn((command: string) => command === "copy");
+    const writeText = vi.fn((_text: string) => Promise.resolve());
+
+    installDocument(execCommand);
+    installNavigator(
+      writeText,
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
+    );
+
+    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
+
+    expect(execCommand).toHaveBeenCalledWith("copy");
+    expect(writeText).not.toHaveBeenCalled();
+    expect(document.querySelector("textarea")).toBeNull();
+  });
+
+  it("uses navigator.clipboard first outside Safari", async () => {
+    const execCommand = vi.fn((command: string) => command === "copy");
+    const writeText = vi.fn((_text: string) => Promise.resolve());
+
+    installDocument(execCommand);
+    installNavigator(writeText);
+
+    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
+
+    expect(writeText).toHaveBeenCalledWith("copy me");
+    expect(execCommand).not.toHaveBeenCalled();
+  });
+
+  it("falls back to selection copy outside Safari when navigator.clipboard fails", async () => {
+    const execCommand = vi.fn((command: string) => command === "copy");
+    const writeText = vi.fn((_text: string) => Promise.reject(new Error("blocked")));
+
+    installDocument(execCommand);
+    installNavigator(writeText);
+
+    await expect(copyTextToClipboard("copy me")).resolves.toBe(true);
+
+    expect(writeText).toHaveBeenCalledWith("copy me");
+    expect(execCommand).toHaveBeenCalledWith("copy");
+  });
+
+  it("reports failure when both copy paths fail", async () => {
+    const execCommand = vi.fn(() => false);
+    const writeText = vi.fn((_text: string) => Promise.reject(new Error("blocked")));
+
+    installDocument(execCommand);
+    installNavigator(
+      writeText,
+      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Safari/605.1.15",
+    );
+
+    await expect(copyTextToClipboard("copy me")).resolves.toBe(false);
+
+    expect(execCommand).toHaveBeenCalledWith("copy");
+    expect(writeText).toHaveBeenCalledWith("copy me");
+    expect(document.querySelector("textarea")).toBeNull();
+  });
+});

package/src/utils/clipboard.ts

@@ -0,0 +1,57 @@
+function copyWithSelection(text: string): boolean {
+  if (typeof document === "undefined" || !document.body || !document.execCommand) {
+    return false;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.width = "1px";
+  textarea.style.height = "1px";
+  textarea.style.padding = "0";
+  textarea.style.border = "0";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+
+  document.body.appendChild(textarea);
+  textarea.focus({ preventScroll: true });
+  textarea.select();
+  textarea.setSelectionRange(0, text.length);
+
+  try {
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(textarea);
+  }
+}
+
+function shouldCopyWithSelectionFirst(): boolean {
+  if (typeof navigator === "undefined") return false;
+
+  const userAgent = navigator.userAgent;
+  return /Safari/i.test(userAgent) && !/Chrome|Chromium|CriOS|FxiOS|Edg|OPR/i.test(userAgent);
+}
+
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  const useSelectionFirst = shouldCopyWithSelectionFirst();
+  if (useSelectionFirst && copyWithSelection(text)) {
+    return true;
+  }
+
+  const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      return true;
+    } catch {
+      // Fall back below when the browser still allows synchronous copy.
+    }
+  }
+
+  return !useSelectionFirst && copyWithSelection(text);
+}

package/src/utils/timelineAssetDrop.test.ts

@@ -12,6 +12,8 @@ describe("getTimelineAssetKind", () => {
   it("detects image, video, and audio assets", () => {
     expect(getTimelineAssetKind("assets/photo.png")).toBe("image");
     expect(getTimelineAssetKind("assets/clip.mp4")).toBe("video");
+    expect(getTimelineAssetKind("assets/clip.mov")).toBe("video");
+    expect(getTimelineAssetKind("assets/music.mp3")).toBe("audio");
     expect(getTimelineAssetKind("assets/music.wav")).toBe("audio");
   });
 });
@@ -78,11 +80,69 @@ describe("resolveTimelineAssetSrc", () => {
 });
 
 describe("buildTimelineFileDropPlacements", () => {
-  it("uses the dropped start and stacks multiple files onto successive tracks", () => {
-    expect(buildTimelineFileDropPlacements({ start: 1.5, track: 2 }, 3)).toEqual([
+  it("returns no placements for an empty drop set", () => {
+    expect(buildTimelineFileDropPlacements({ start: 1.5, track: 2 }, [])).toEqual([]);
+  });
+
+  it("uses the dropped start and spaces multiple files by duration on the same track", () => {
+    expect(buildTimelineFileDropPlacements({ start: 1.5, track: 2 }, [1.2, 1.6, 1.1])).toEqual([
+      { start: 1.5, track: 2 },
+      { start: 2.7, track: 2 },
+      { start: 4.3, track: 2 },
+    ]);
+  });
+
+  it("uses fallback spacing when a duration is unavailable", () => {
+    expect(buildTimelineFileDropPlacements({ start: 1.5, track: 2 }, [1.2, 0, 1.1])).toEqual([
       { start: 1.5, track: 2 },
-      { start: 1.5, track: 3 },
-      { start: 1.5, track: 4 },
+      { start: 2.7, track: 2 },
+      { start: 7.7, track: 2 },
+    ]);
+  });
+
+  it("moves the spaced sequence to a clear track when the dropped row is occupied", () => {
+    expect(
+      buildTimelineFileDropPlacements(
+        { start: 1.5, track: 2 },
+        [1.2, 1.6, 1.1],
+        [
+          { start: 0, duration: 8, track: 2 },
+          { start: 0, duration: 4, track: 5 },
+        ],
+      ),
+    ).toEqual([
+      { start: 1.5, track: 6 },
+      { start: 2.7, track: 6 },
+      { start: 4.3, track: 6 },
+    ]);
+  });
+
+  it("keeps a requested track above occupied rows when that track is clear", () => {
+    expect(
+      buildTimelineFileDropPlacements(
+        { start: 1.5, track: 8 },
+        [1.2, 1.6],
+        [
+          { start: 0, duration: 8, track: 2 },
+          { start: 0, duration: 4, track: 5 },
+        ],
+      ),
+    ).toEqual([
+      { start: 1.5, track: 8 },
+      { start: 2.7, track: 8 },
+    ]);
+  });
+
+  it("moves a default-track drop to a clear row when track 0 is occupied at time 0", () => {
+    expect(
+      buildTimelineFileDropPlacements(
+        { start: 0, track: 0 },
+        [1.2, 1.6],
+        [{ start: 0, duration: 8, track: 0 }],
+      ),
+    ).toEqual([
+      { start: 0, track: 1 },
+      { start: 1.2, track: 1 },
     ]);
   });
 });

package/src/utils/timelineAssetDrop.ts

@@ -1,6 +1,7 @@
 import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT } from "./mediaTypes";
 
 export const TIMELINE_ASSET_MIME = "application/x-hyperframes-asset";
+const FALLBACK_TIMELINE_FILE_DROP_DURATION = 5;
 
 export type TimelineAssetKind = "image" | "video" | "audio";
 
@@ -46,12 +47,33 @@ export function resolveTimelineAssetSrc(targetPath: string, assetPath: string):
 
 export function buildTimelineFileDropPlacements(
   placement: { start: number; track: number },
-  count: number,
+  durations: number[],
+  occupiedClips: Array<{ start: number; duration: number; track: number }> = [],
 ): Array<{ start: number; track: number }> {
-  return Array.from({ length: Math.max(0, count) }, (_, index) => ({
-    start: placement.start,
-    track: placement.track + index,
-  }));
+  let nextStart = Math.round(Math.max(0, placement.start) * 100) / 100;
+  const sequenceStart = nextStart;
+  const resolvedDurations = durations.map((duration) =>
+    Number.isFinite(duration) && duration > 0 ? duration : FALLBACK_TIMELINE_FILE_DROP_DURATION,
+  );
+  const sequenceEnd = resolvedDurations.reduce(
+    (end, duration) => Math.round((end + duration) * 100) / 100,
+    sequenceStart,
+  );
+  const overlapsDropTrack = occupiedClips.some((clip) => {
+    if (clip.track !== placement.track) return false;
+    const clipStart = Math.max(0, clip.start);
+    const clipEnd = clipStart + Math.max(0, clip.duration);
+    return sequenceStart < clipEnd && sequenceEnd > clipStart;
+  });
+  const track = overlapsDropTrack
+    ? Math.max(placement.track, ...occupiedClips.map((clip) => clip.track)) + 1
+    : placement.track;
+
+  return resolvedDurations.map((duration) => {
+    const start = nextStart;
+    nextStart = Math.round((nextStart + duration) * 100) / 100;
+    return { start, track };
+  });
 }
 
 export function resolveTimelineAssetInitialGeometry(source: string): {