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>
2026-09-10 22:20:14 +00:00 · 2026-03-21 22:43:56 -07:00
parent 10621e7903
commit 9f8e5ba5a1
401 changed files with 54545 additions and 2 deletions
@@ -0,0 +1,153 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { createPickerModule } from "./picker";
+
+function createMockPostMessage() {
+  return vi.fn();
+}
+
+describe("createPickerModule", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    document.head.querySelectorAll("style").forEach(s => s.remove());
+    document.body.classList.remove("__hf-pick-active");
+  });
+
+  it("returns enablePickMode, disablePickMode, installPickerApi", () => {
+    const picker = createPickerModule({ postMessage: createMockPostMessage() });
+    expect(typeof picker.enablePickMode).toBe("function");
+    expect(typeof picker.disablePickMode).toBe("function");
+    expect(typeof picker.installPickerApi).toBe("function");
+  });
+
+  describe("enablePickMode / disablePickMode", () => {
+    it("adds and removes pick-active class on body", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.enablePickMode();
+      expect(document.body.classList.contains("__hf-pick-active")).toBe(true);
+
+      picker.disablePickMode();
+      expect(document.body.classList.contains("__hf-pick-active")).toBe(false);
+    });
+
+    it("injects and removes style element", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.enablePickMode();
+      const styles = document.head.querySelectorAll("style");
+      const hasPickStyle = Array.from(styles).some(s =>
+        s.textContent?.includes("__hf-pick-highlight")
+      );
+      expect(hasPickStyle).toBe(true);
+
+      picker.disablePickMode();
+      const stylesAfter = document.head.querySelectorAll("style");
+      const hasPickStyleAfter = Array.from(stylesAfter).some(s =>
+        s.textContent?.includes("__hf-pick-highlight")
+      );
+      expect(hasPickStyleAfter).toBe(false);
+    });
+
+    it("enabling twice is idempotent", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.enablePickMode();
+      picker.enablePickMode();
+      expect(document.body.classList.contains("__hf-pick-active")).toBe(true);
+    });
+
+    it("disabling when not active is safe", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      expect(() => picker.disablePickMode()).not.toThrow();
+    });
+  });
+
+  describe("installPickerApi", () => {
+    it("installs __HF_PICKER_API on window", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api).toBeDefined();
+      expect(typeof api.enable).toBe("function");
+      expect(typeof api.disable).toBe("function");
+      expect(typeof api.isActive).toBe("function");
+      expect(typeof api.getHovered).toBe("function");
+      expect(typeof api.getSelected).toBe("function");
+      expect(typeof api.getCandidatesAtPoint).toBe("function");
+      expect(typeof api.pickAtPoint).toBe("function");
+      expect(typeof api.pickManyAtPoint).toBe("function");
+    });
+
+    it("isActive returns pick mode state", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+
+      expect(api.isActive()).toBe(false);
+      picker.enablePickMode();
+      expect(api.isActive()).toBe(true);
+      picker.disablePickMode();
+      expect(api.isActive()).toBe(false);
+    });
+
+    it("getCandidatesAtPoint returns empty for invalid coords", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api.getCandidatesAtPoint(NaN, NaN)).toEqual([]);
+      expect(api.getCandidatesAtPoint(Infinity, 0)).toEqual([]);
+    });
+
+    it("pickAtPoint returns null for invalid coords", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api.pickAtPoint(NaN, NaN)).toBeNull();
+    });
+
+    it("pickManyAtPoint returns empty for invalid coords", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api.pickManyAtPoint(NaN, NaN)).toEqual([]);
+    });
+
+    it("getHovered returns null initially", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api.getHovered()).toBeNull();
+    });
+
+    it("getSelected returns null initially", () => {
+      const picker = createPickerModule({ postMessage: createMockPostMessage() });
+      picker.installPickerApi();
+      const api = (window as any).__HF_PICKER_API;
+      expect(api.getSelected()).toBeNull();
+    });
+  });
+
+  describe("escape key handler", () => {
+    it("disables pick mode and posts cancel message on Escape", () => {
+      const postMessage = createMockPostMessage();
+      const picker = createPickerModule({ postMessage });
+      picker.enablePickMode();
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+
+      expect(document.body.classList.contains("__hf-pick-active")).toBe(false);
+      expect(postMessage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          source: "hf-preview",
+          type: "pick-mode-cancelled",
+        })
+      );
+    });
+
+    it("ignores non-Escape keys", () => {
+      const postMessage = createMockPostMessage();
+      const picker = createPickerModule({ postMessage });
+      picker.enablePickMode();
+
+      document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+      expect(document.body.classList.contains("__hf-pick-active")).toBe(true);
+    });
+  });
+});