feat: add reusable record player packages

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 dist
+dist-element
 dist-ssr
 *.local
 

README.md

@@ -31,11 +31,21 @@ npm run dev
 
 Then open `http://localhost:5173` in your browser.
 
+## Reusable package entry points
+
+This repository now exposes a first reusable API slice under `src/packages` while preserving the hosted Vite app:
+
+- `player-core` — pure ZIP loading/parsing (`parseRecording`, `loadRecording`) plus `LoadedRecording`, `TimelineModel`, `RecordingEvent`, `ScreenshotIndex`, and `PlayerError` contracts. URL string loading uses `fetch` with browser `same-origin` credentials by default and supports injected fetch/signal.
+- `player-react` — `RecordPlayer` and `RecordPlayerLoader` React components for rendering a loaded recording or fetching one from `src`.
+- `player-element` — `defineVibiumRecordPlayerElement()` for registering `<vibium-record-player src="/record.zip">`; it dispatches `vibium-player-ready` with `{ recording }` and `vibium-player-error` with `{ error }`.
+
+Remaining migration work is intentionally staged: the hosted app still uses the existing full-featured studio UI, while future PRs can replace its embedded parser with `player-core`, add formal library build outputs, and migrate the full timeline/compare experience onto these public contracts.
+
 ## Tech Stack
 
 - React + Vite + TypeScript
 - Tailwind CSS
-- JSZip (loaded from CDN at runtime)
+- JSZip
 - shadcn/ui
 
 ## License

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
+    "build:element": "vite build --config vite.element.config.ts",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest run",
@@ -48,6 +49,7 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
     "react": "^18.3.1",
@@ -65,9 +67,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.0.0",
-    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",

src/components/RecordStudio.jsx

@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle } from "react";
+import JSZip from "jszip";
 
 /*
   Vibium Player — player.vibium.dev
@@ -8,18 +9,14 @@ import { useState, useRef, useEffect, useMemo, useCallback, forwardRef, useImper
   files and extracts screenshots from resources.
 */
 
-// We'll load JSZip from CDN at runtime
+// Prefer an explicitly injected global (tests and embedding pages can set
+// window.JSZip), otherwise use the bundled dependency so the player has no
+// runtime CDN requirement.
 let JSZipLoaded = null;
 function loadJSZip() {
   if (JSZipLoaded) return JSZipLoaded;
-  JSZipLoaded = new Promise((resolve, reject) => {
-    if (window.JSZip) return resolve(window.JSZip);
-    const s = document.createElement("script");
-    s.src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";
-    s.onload = () => resolve(window.JSZip);
-    s.onerror = reject;
-    document.head.appendChild(s);
-  });
+  const injected = typeof window !== "undefined" ? window.JSZip : undefined;
+  JSZipLoaded = Promise.resolve(injected || JSZip);
   return JSZipLoaded;
 }
 

src/packages/index.ts

@@ -0,0 +1,3 @@
+export * from "./player-core";
+export * from "./player-react";
+export * from "./player-element";