@hyperframes/studio 0.1.10 → 0.1.12

package/src/player/index.ts

@@ -3,15 +3,15 @@ export { Player } from "./components/Player";
 export { PlayerControls } from "./components/PlayerControls";
 export { Timeline } from "./components/Timeline";
 export { PreviewPanel } from "./components/PreviewPanel";
-export { AgentActivityTrack } from "./components/AgentActivityTrack";
-export type { AgentActivity } from "./components/AgentActivityTrack";
+export { VideoThumbnail } from "./components/VideoThumbnail";
+export { CompositionThumbnail } from "./components/CompositionThumbnail";
 
 // Hooks
 export { useTimelinePlayer } from "./hooks/useTimelinePlayer";
 
 // Store
 export { usePlayerStore, liveTime } from "./store/playerStore";
-export type { TimelineElement, ActiveEdits } from "./store/playerStore";
+export type { TimelineElement, ZoomMode } from "./store/playerStore";
 
 // Utils
 export { formatTime } from "./lib/time";

package/src/player/lib/time.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect } from "vitest";
+import { formatTime } from "./time";
+
+describe("formatTime", () => {
+  it("formats zero seconds", () => {
+    expect(formatTime(0)).toBe("0:00");
+  });
+
+  it("formats seconds less than a minute", () => {
+    expect(formatTime(5)).toBe("0:05");
+    expect(formatTime(30)).toBe("0:30");
+    expect(formatTime(59)).toBe("0:59");
+  });
+
+  it("formats exact minutes", () => {
+    expect(formatTime(60)).toBe("1:00");
+    expect(formatTime(120)).toBe("2:00");
+    expect(formatTime(600)).toBe("10:00");
+  });
+
+  it("formats minutes and seconds", () => {
+    expect(formatTime(65)).toBe("1:05");
+    expect(formatTime(90)).toBe("1:30");
+    expect(formatTime(125)).toBe("2:05");
+  });
+
+  it("formats large values (over an hour)", () => {
+    expect(formatTime(3600)).toBe("60:00");
+    expect(formatTime(3661)).toBe("61:01");
+    expect(formatTime(7200)).toBe("120:00");
+  });
+
+  it("floors fractional seconds", () => {
+    expect(formatTime(0.9)).toBe("0:00");
+    expect(formatTime(1.5)).toBe("0:01");
+    expect(formatTime(59.99)).toBe("0:59");
+    expect(formatTime(60.5)).toBe("1:00");
+  });
+
+  it("pads single-digit seconds with leading zero", () => {
+    expect(formatTime(1)).toBe("0:01");
+    expect(formatTime(61)).toBe("1:01");
+    expect(formatTime(609)).toBe("10:09");
+  });
+
+  it("guards against negative values", () => {
+    expect(formatTime(-1)).toBe("0:00");
+  });
+
+  it("guards against NaN", () => {
+    expect(formatTime(NaN)).toBe("0:00");
+  });
+
+  it("guards against Infinity", () => {
+    expect(formatTime(Infinity)).toBe("0:00");
+  });
+});

package/src/player/lib/time.ts

@@ -1,4 +1,5 @@
 export function formatTime(time: number): string {
+  if (!Number.isFinite(time) || time < 0) return "0:00";
   const mins = Math.floor(time / 60);
   const secs = Math.floor(time % 60);
   return `${mins}:${secs.toString().padStart(2, "0")}`;

package/src/player/store/playerStore.test.ts

@@ -0,0 +1,265 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { usePlayerStore, liveTime, type TimelineElement } from "./playerStore";
+
+describe("usePlayerStore", () => {
+  beforeEach(() => {
+    usePlayerStore.getState().reset();
+  });
+
+  describe("initial state", () => {
+    it("has correct defaults", () => {
+      const state = usePlayerStore.getState();
+      expect(state.isPlaying).toBe(false);
+      expect(state.currentTime).toBe(0);
+      expect(state.duration).toBe(0);
+      expect(state.timelineReady).toBe(false);
+      expect(state.elements).toEqual([]);
+      expect(state.selectedElementId).toBeNull();
+      expect(state.playbackRate).toBe(1);
+      expect(state.zoomMode).toBe("fit");
+      expect(state.pixelsPerSecond).toBe(100);
+    });
+  });
+
+  describe("setIsPlaying", () => {
+    it("sets isPlaying to true", () => {
+      usePlayerStore.getState().setIsPlaying(true);
+      expect(usePlayerStore.getState().isPlaying).toBe(true);
+    });
+
+    it("sets isPlaying to false", () => {
+      usePlayerStore.getState().setIsPlaying(true);
+      usePlayerStore.getState().setIsPlaying(false);
+      expect(usePlayerStore.getState().isPlaying).toBe(false);
+    });
+  });
+
+  describe("setCurrentTime", () => {
+    it("updates currentTime", () => {
+      usePlayerStore.getState().setCurrentTime(12.5);
+      expect(usePlayerStore.getState().currentTime).toBe(12.5);
+    });
+
+    it("accepts zero", () => {
+      usePlayerStore.getState().setCurrentTime(42);
+      usePlayerStore.getState().setCurrentTime(0);
+      expect(usePlayerStore.getState().currentTime).toBe(0);
+    });
+  });
+
+  describe("setDuration", () => {
+    it("updates duration", () => {
+      usePlayerStore.getState().setDuration(120);
+      expect(usePlayerStore.getState().duration).toBe(120);
+    });
+  });
+
+  describe("setPlaybackRate", () => {
+    it("updates playbackRate", () => {
+      usePlayerStore.getState().setPlaybackRate(2);
+      expect(usePlayerStore.getState().playbackRate).toBe(2);
+    });
+  });
+
+  describe("setTimelineReady", () => {
+    it("updates timelineReady", () => {
+      usePlayerStore.getState().setTimelineReady(true);
+      expect(usePlayerStore.getState().timelineReady).toBe(true);
+    });
+  });
+
+  describe("setElements", () => {
+    it("sets the elements array", () => {
+      const elements: TimelineElement[] = [
+        { id: "el-1", tag: "div", start: 0, duration: 5, track: 0 },
+        {
+          id: "el-2",
+          tag: "video",
+          start: 2,
+          duration: 10,
+          track: 1,
+          src: "test.mp4",
+        },
+      ];
+      usePlayerStore.getState().setElements(elements);
+      expect(usePlayerStore.getState().elements).toEqual(elements);
+      expect(usePlayerStore.getState().elements).toHaveLength(2);
+    });
+
+    it("replaces existing elements", () => {
+      usePlayerStore
+        .getState()
+        .setElements([{ id: "el-1", tag: "div", start: 0, duration: 5, track: 0 }]);
+      usePlayerStore
+        .getState()
+        .setElements([{ id: "el-3", tag: "span", start: 1, duration: 3, track: 0 }]);
+      const elements = usePlayerStore.getState().elements;
+      expect(elements).toHaveLength(1);
+      expect(elements[0].id).toBe("el-3");
+    });
+  });
+
+  describe("setSelectedElementId", () => {
+    it("selects an element", () => {
+      usePlayerStore.getState().setSelectedElementId("el-1");
+      expect(usePlayerStore.getState().selectedElementId).toBe("el-1");
+    });
+
+    it("clears selection with null", () => {
+      usePlayerStore.getState().setSelectedElementId("el-1");
+      usePlayerStore.getState().setSelectedElementId(null);
+      expect(usePlayerStore.getState().selectedElementId).toBeNull();
+    });
+  });
+
+  describe("updateElementStart", () => {
+    it("updates the start time of a specific element", () => {
+      usePlayerStore.getState().setElements([
+        { id: "el-1", tag: "div", start: 0, duration: 5, track: 0 },
+        { id: "el-2", tag: "div", start: 5, duration: 5, track: 1 },
+      ]);
+      usePlayerStore.getState().updateElementStart("el-1", 3);
+      const elements = usePlayerStore.getState().elements;
+      expect(elements[0].start).toBe(3);
+      expect(elements[1].start).toBe(5); // unchanged
+    });
+
+    it("does not modify elements when id is not found", () => {
+      const original: TimelineElement[] = [
+        { id: "el-1", tag: "div", start: 0, duration: 5, track: 0 },
+      ];
+      usePlayerStore.getState().setElements(original);
+      usePlayerStore.getState().updateElementStart("nonexistent", 10);
+      expect(usePlayerStore.getState().elements[0].start).toBe(0);
+    });
+  });
+
+  describe("setZoomMode", () => {
+    it("changes zoom mode to manual", () => {
+      usePlayerStore.getState().setZoomMode("manual");
+      expect(usePlayerStore.getState().zoomMode).toBe("manual");
+    });
+
+    it("changes zoom mode back to fit", () => {
+      usePlayerStore.getState().setZoomMode("manual");
+      usePlayerStore.getState().setZoomMode("fit");
+      expect(usePlayerStore.getState().zoomMode).toBe("fit");
+    });
+  });
+
+  describe("setPixelsPerSecond", () => {
+    it("updates pixelsPerSecond", () => {
+      usePlayerStore.getState().setPixelsPerSecond(200);
+      expect(usePlayerStore.getState().pixelsPerSecond).toBe(200);
+    });
+
+    it("clamps to minimum of 10", () => {
+      usePlayerStore.getState().setPixelsPerSecond(5);
+      expect(usePlayerStore.getState().pixelsPerSecond).toBe(10);
+    });
+
+    it("clamps negative values to 10", () => {
+      usePlayerStore.getState().setPixelsPerSecond(-50);
+      expect(usePlayerStore.getState().pixelsPerSecond).toBe(10);
+    });
+  });
+
+  describe("reset", () => {
+    it("resets all state to defaults", () => {
+      // Mutate everything
+      const store = usePlayerStore.getState();
+      store.setIsPlaying(true);
+      store.setCurrentTime(42);
+      store.setDuration(120);
+      store.setTimelineReady(true);
+      store.setElements([{ id: "el-1", tag: "div", start: 0, duration: 5, track: 0 }]);
+      store.setSelectedElementId("el-1");
+
+      // Reset
+      usePlayerStore.getState().reset();
+
+      const state = usePlayerStore.getState();
+      expect(state.isPlaying).toBe(false);
+      expect(state.currentTime).toBe(0);
+      expect(state.duration).toBe(0);
+      expect(state.timelineReady).toBe(false);
+      expect(state.elements).toEqual([]);
+      expect(state.selectedElementId).toBeNull();
+    });
+
+    it("does not reset playbackRate, zoomMode, or pixelsPerSecond", () => {
+      const store = usePlayerStore.getState();
+      store.setPlaybackRate(2);
+      store.setZoomMode("manual");
+      store.setPixelsPerSecond(200);
+
+      usePlayerStore.getState().reset();
+
+      const state = usePlayerStore.getState();
+      // reset() only resets the fields explicitly listed in the reset function
+      expect(state.playbackRate).toBe(2);
+      expect(state.zoomMode).toBe("manual");
+      expect(state.pixelsPerSecond).toBe(200);
+    });
+  });
+});
+
+describe("liveTime", () => {
+  it("notifies subscribers with the current time", () => {
+    const listener = vi.fn();
+    const unsubscribe = liveTime.subscribe(listener);
+
+    liveTime.notify(5.5);
+    expect(listener).toHaveBeenCalledWith(5.5);
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    liveTime.notify(10);
+    expect(listener).toHaveBeenCalledWith(10);
+    expect(listener).toHaveBeenCalledTimes(2);
+
+    unsubscribe();
+  });
+
+  it("supports multiple subscribers", () => {
+    const listener1 = vi.fn();
+    const listener2 = vi.fn();
+    const unsub1 = liveTime.subscribe(listener1);
+    const unsub2 = liveTime.subscribe(listener2);
+
+    liveTime.notify(3);
+    expect(listener1).toHaveBeenCalledWith(3);
+    expect(listener2).toHaveBeenCalledWith(3);
+
+    unsub1();
+    unsub2();
+  });
+
+  it("unsubscribe stops notifications", () => {
+    const listener = vi.fn();
+    const unsubscribe = liveTime.subscribe(listener);
+
+    liveTime.notify(1);
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsubscribe();
+
+    liveTime.notify(2);
+    expect(listener).toHaveBeenCalledTimes(1); // not called again
+  });
+
+  it("unsubscribe returns true when listener existed", () => {
+    const listener = vi.fn();
+    const unsubscribe = liveTime.subscribe(listener);
+    // Set.delete returns boolean, our unsubscribe wraps it
+    const result = unsubscribe();
+    expect(result).toBe(true);
+  });
+
+  it("double unsubscribe returns false", () => {
+    const listener = vi.fn();
+    const unsubscribe = liveTime.subscribe(listener);
+    unsubscribe();
+    const result = unsubscribe();
+    expect(result).toBe(false);
+  });
+});

package/src/player/store/playerStore.ts

@@ -11,16 +11,9 @@ export interface TimelineElement {
   volume?: number;
   /** Path from data-composition-src — identifies sub-composition elements */
   compositionSrc?: string;
-  /** Agent that created/last edited this element */
-  agentId?: string;
-  /** Agent's color for ownership visualization */
-  agentColor?: string;
 }
 
-/** Map of elementId → agentColor for clips currently being edited */
-export interface ActiveEdits {
-  [elementId: string]: { agentId: string; agentColor: string };
-}
+export type ZoomMode = "fit" | "manual";
 
 interface PlayerState {
   isPlaying: boolean;
@@ -29,9 +22,15 @@ interface PlayerState {
   timelineReady: boolean;
   elements: TimelineElement[];
   selectedElementId: string | null;
-  /** Clips currently being edited by agents — for glow animation */
-  activeEdits: ActiveEdits;
   playbackRate: number;
+  /** Timeline zoom: 'fit' auto-scales to viewport, 'manual' uses pixelsPerSecond */
+  zoomMode: ZoomMode;
+  /** Pixels per second when in manual zoom mode */
+  pixelsPerSecond: number;
+  /** Edit range selection */
+  editRangeStart: number | null;
+  editRangeEnd: number | null;
+  editMode: boolean;
 
   setIsPlaying: (playing: boolean) => void;
   setCurrentTime: (time: number) => void;
@@ -40,8 +39,17 @@ interface PlayerState {
   setTimelineReady: (ready: boolean) => void;
   setElements: (elements: TimelineElement[]) => void;
   setSelectedElementId: (id: string | null) => void;
-  setActiveEdits: (edits: ActiveEdits) => void;
+  setEditRange: (start: number | null, end: number | null) => void;
+  setEditMode: (active: boolean) => void;
   updateElementStart: (elementId: string, newStart: number) => void;
+  updateElementDuration: (elementId: string, newDuration: number) => void;
+  updateElementTrack: (elementId: string, newTrack: number) => void;
+  updateElement: (
+    elementId: string,
+    updates: Partial<Pick<TimelineElement, "start" | "duration" | "track">>,
+  ) => void;
+  setZoomMode: (mode: ZoomMode) => void;
+  setPixelsPerSecond: (pps: number) => void;
   reset: () => void;
 }
 
@@ -65,21 +73,42 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   timelineReady: false,
   elements: [],
   selectedElementId: null,
-  activeEdits: {},
   playbackRate: 1,
+  zoomMode: "fit",
+  pixelsPerSecond: 100,
+  editRangeStart: null,
+  editRangeEnd: null,
+  editMode: false,
 
   setIsPlaying: (playing) => set({ isPlaying: playing }),
   setPlaybackRate: (rate) => set({ playbackRate: rate }),
-  setCurrentTime: (time) => set({ currentTime: time }),
-  setDuration: (duration) => set({ duration }),
+  setZoomMode: (mode) => set({ zoomMode: mode }),
+  setPixelsPerSecond: (pps) => set({ pixelsPerSecond: Math.max(10, pps) }),
+  setCurrentTime: (time) => set({ currentTime: Number.isFinite(time) ? time : 0 }),
+  setDuration: (duration) => set({ duration: Number.isFinite(duration) ? duration : 0 }),
   setTimelineReady: (ready) => set({ timelineReady: ready }),
   setElements: (elements) => set({ elements }),
   setSelectedElementId: (id) => set({ selectedElementId: id }),
-  setActiveEdits: (edits) => set({ activeEdits: edits }),
+  setEditRange: (start, end) => set({ editRangeStart: start, editRangeEnd: end }),
+  setEditMode: (active) => set({ editMode: active, editRangeStart: null, editRangeEnd: null }),
   updateElementStart: (elementId, newStart) =>
     set((state) => ({
       elements: state.elements.map((el) => (el.id === elementId ? { ...el, start: newStart } : el)),
     })),
+  updateElementDuration: (elementId, newDuration) =>
+    set((state) => ({
+      elements: state.elements.map((el) =>
+        el.id === elementId ? { ...el, duration: newDuration } : el,
+      ),
+    })),
+  updateElementTrack: (elementId, newTrack) =>
+    set((state) => ({
+      elements: state.elements.map((el) => (el.id === elementId ? { ...el, track: newTrack } : el)),
+    })),
+  updateElement: (elementId, updates) =>
+    set((state) => ({
+      elements: state.elements.map((el) => (el.id === elementId ? { ...el, ...updates } : el)),
+    })),
   reset: () =>
     set({
       isPlaying: false,
@@ -88,6 +117,5 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       timelineReady: false,
       elements: [],
       selectedElementId: null,
-      activeEdits: {},
     }),
 }));

package/src/utils/htmlEditor.ts

@@ -0,0 +1,164 @@
+/**
+ * HTML Editor — Utility functions for parsing and manipulating HyperFrame HTML source.
+ */
+
+/**
+ * Parse a CSS inline style string into a key-value map.
+ * e.g. "opacity: 0.5; transform: matrix(1,0,0,1,0,0)" →
+ *      { opacity: "0.5", transform: "matrix(1,0,0,1,0,0)" }
+ */
+export function parseStyleString(style: string): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const decl of style.split(";")) {
+    const colonIdx = decl.indexOf(":");
+    if (colonIdx < 0) continue;
+    const key = decl.slice(0, colonIdx).trim();
+    const value = decl.slice(colonIdx + 1).trim();
+    if (key && value) result[key] = value;
+  }
+  return result;
+}
+
+/**
+ * Merge `newStyles` into an opening tag string's `style` attribute.
+ * - New values win over existing ones.
+ * - If no `style` attribute is present, one is added before the closing `>`.
+ */
+export function mergeStyleIntoTag(tag: string, newStyles: string): string {
+  if (!newStyles.trim()) return tag;
+
+  const incoming = parseStyleString(newStyles);
+
+  // Match style="..." or style='...' — handle multi-line attrs via dotall-like trick
+  const styleAttrRe = /style=(["'])([\s\S]*?)\1/;
+  const match = tag.match(styleAttrRe);
+
+  if (match) {
+    const quote = match[1];
+    const existing = parseStyleString(match[2]);
+    const merged = { ...existing, ...incoming };
+    const serialized = Object.entries(merged)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join("; ");
+    return tag.replace(styleAttrRe, `style=${quote}${serialized}${quote}`);
+  }
+
+  // No style attribute — insert one before the closing `>`
+  const serialized = Object.entries(incoming)
+    .map(([k, v]) => `${k}: ${v}`)
+    .join("; ");
+  // Handle self-closing tags (`/>`) and regular closing (`>`)
+  return tag.replace(/(\/?>)$/, ` style="${serialized}"$1`);
+}
+
+/**
+ * Find the full element block (opening tag through closing tag) in the source.
+ * Uses quote-aware scanning to handle attributes containing >.
+ * Uses depth counting to handle nested same-name tags.
+ */
+export function findElementBlock(
+  html: string,
+  elementId: string,
+): {
+  start: number;
+  end: number;
+  openTag: string;
+  tagName: string;
+  indent: string;
+  innerContent: string;
+  isSelfClosing: boolean;
+} | null {
+  let idIdx = html.indexOf(`id="${elementId}"`);
+  if (idIdx < 0) idIdx = html.indexOf(`id='${elementId}'`);
+  if (idIdx < 0) return null;
+
+  // Walk backward to find < and capture indent
+  let tagStart = idIdx;
+  while (tagStart > 0 && html[tagStart] !== "<") tagStart--;
+
+  let indentStart = tagStart;
+  while (indentStart > 0 && html[indentStart - 1] !== "\n") indentStart--;
+  const indent = html.slice(indentStart, tagStart);
+
+  // Walk forward from id to find the closing > of the opening tag
+  let tagEnd = idIdx;
+  let inQuote: string | null = null;
+  while (tagEnd < html.length) {
+    const ch = html[tagEnd];
+    if (inQuote) {
+      if (ch === inQuote) inQuote = null;
+    } else {
+      if (ch === '"' || ch === "'") inQuote = ch;
+      if (ch === ">") {
+        tagEnd++;
+        break;
+      }
+    }
+    tagEnd++;
+  }
+
+  const openTag = html.slice(tagStart, tagEnd);
+  const tagNameMatch = openTag.match(/^<([a-z][a-z0-9]*)/i);
+  if (!tagNameMatch) return null;
+
+  const tagName = tagNameMatch[1];
+  const isSelfClosing =
+    openTag.trimEnd().endsWith("/>") ||
+    ["img", "br", "hr", "input", "meta", "link", "source"].includes(tagName.toLowerCase());
+
+  if (isSelfClosing) {
+    return {
+      start: tagStart,
+      end: tagStart + openTag.length,
+      openTag,
+      tagName,
+      indent: /^[\t ]*$/.test(indent) ? indent : "",
+      innerContent: "",
+      isSelfClosing: true,
+    };
+  }
+
+  // Find matching closing tag using depth counting
+  const closeTag = `</${tagName.toLowerCase()}>`;
+  const openPattern = `<${tagName.toLowerCase()}`;
+  let depth = 0;
+  let pos = tagStart;
+  const lower = html.toLowerCase();
+
+  while (pos < html.length) {
+    if (lower.startsWith("<!--", pos)) {
+      const commentEnd = lower.indexOf("-->", pos + 4);
+      pos = commentEnd < 0 ? html.length : commentEnd + 3;
+      continue;
+    }
+
+    if (lower.startsWith(openPattern, pos) && /[\s>/]/.test(html[pos + openPattern.length] || "")) {
+      depth++;
+      pos += openPattern.length;
+      continue;
+    }
+
+    if (lower.startsWith(closeTag, pos)) {
+      depth--;
+      if (depth === 0) {
+        const end = pos + closeTag.length;
+        const innerContent = html.slice(tagStart + openTag.length, pos);
+        return {
+          start: tagStart,
+          end,
+          openTag,
+          tagName,
+          indent: /^[\t ]*$/.test(indent) ? indent : "",
+          innerContent,
+          isSelfClosing: false,
+        };
+      }
+      pos += closeTag.length;
+      continue;
+    }
+
+    pos++;
+  }
+
+  return null;
+}