initial code (#2)

* feat: initial code port from hyperframes-internal

Port all OSS-ready packages from the internal monorepo:
- @hyperframes/core — shared types, HTML generation, GSAP utilities, runtime
- @hyperframes/cli — CLI for creating, previewing, and rendering compositions
- @hyperframes/engine — framework-agnostic rendering engine (BeginFrame + FFmpeg)
- @hyperframes/producer — video rendering pipeline (Puppeteer + FFmpeg)
- @hyperframes/ui-player — browser-based video player component
- @hyperframes/studio — composition editor (React frontend + Hono backend)

Includes regression test suite with Docker-based test harness.

All HeyGen-internal references, deployment infrastructure, and
proprietary assets have been removed. Package names migrated
from @app/* to @hyperframes/*.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: scrub internal codenames and stale references from OSS port

- Replace static.heygen.ai runtime URLs in test fixtures
- Remove internal CDN publish script (publish-hyperframe-runtime.ts)
- Replace sandbox-studio, sandbox-interceptor, __magicEditRuntime
  with neutral names (studio, hyperframe-runtime, __hyperframeRuntime)
- Fix stale Vault API / localhost references in docs
- Remove broken deprecated_studio link

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: remove remaining internal codenames and stale references

- Delete stale producer README.md and PIPELINE.md (referenced nonexistent files)
- Replace "Cerberus" codename with "HyperFrames" in test design reviews
- Replace magic-edit postMessage identifiers with hf-preview/hf-parent
- Rename debug-magic-edit-timeline.ts to debug-timeline.ts
- Replace "Motion Cut" with "HyperFrames" in Timeline comments
- Fix studio/CLI references to nonexistent archive package
  (use local data/projects/ dir, stub render proxy)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

packages/studio/src/player/store/playerStore.ts

@@ -0,0 +1,93 @@
+import { create } from "zustand";
+
+export interface TimelineElement {
+  id: string;
+  tag: string;
+  start: number;
+  duration: number;
+  track: number;
+  src?: string;
+  playbackStart?: number;
+  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 };
+}
+
+interface PlayerState {
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  timelineReady: boolean;
+  elements: TimelineElement[];
+  selectedElementId: string | null;
+  /** Clips currently being edited by agents — for glow animation */
+  activeEdits: ActiveEdits;
+  playbackRate: number;
+
+  setIsPlaying: (playing: boolean) => void;
+  setCurrentTime: (time: number) => void;
+  setDuration: (duration: number) => void;
+  setPlaybackRate: (rate: number) => void;
+  setTimelineReady: (ready: boolean) => void;
+  setElements: (elements: TimelineElement[]) => void;
+  setSelectedElementId: (id: string | null) => void;
+  setActiveEdits: (edits: ActiveEdits) => void;
+  updateElementStart: (elementId: string, newStart: number) => void;
+  reset: () => void;
+}
+
+// Lightweight pub-sub for current time during playback.
+// Bypasses React state so the RAF loop can update the playhead/time display
+// without triggering re-renders on every frame.
+type TimeListener = (time: number) => void;
+const _timeListeners = new Set<TimeListener>();
+export const liveTime = {
+  notify: (t: number) => _timeListeners.forEach((cb) => cb(t)),
+  subscribe: (cb: TimeListener) => {
+    _timeListeners.add(cb);
+    return () => _timeListeners.delete(cb);
+  },
+};
+
+export const usePlayerStore = create<PlayerState>((set) => ({
+  isPlaying: false,
+  currentTime: 0,
+  duration: 0,
+  timelineReady: false,
+  elements: [],
+  selectedElementId: null,
+  activeEdits: {},
+  playbackRate: 1,
+
+  setIsPlaying: (playing) => set({ isPlaying: playing }),
+  setPlaybackRate: (rate) => set({ playbackRate: rate }),
+  setCurrentTime: (time) => set({ currentTime: time }),
+  setDuration: (duration) => set({ duration }),
+  setTimelineReady: (ready) => set({ timelineReady: ready }),
+  setElements: (elements) => set({ elements }),
+  setSelectedElementId: (id) => set({ selectedElementId: id }),
+  setActiveEdits: (edits) => set({ activeEdits: edits }),
+  updateElementStart: (elementId, newStart) =>
+    set((state) => ({
+      elements: state.elements.map((el) => (el.id === elementId ? { ...el, start: newStart } : el)),
+    })),
+  reset: () =>
+    set({
+      isPlaying: false,
+      currentTime: 0,
+      duration: 0,
+      timelineReady: false,
+      elements: [],
+      selectedElementId: null,
+      activeEdits: {},
+    }),
+}));