@codefilm/recorder 3.0.0

package/dist/react/useFilmRecorder.d.ts

@@ -0,0 +1,11 @@
+import { FilmRecorder } from '../core/FilmRecorder';
+import { FilmRecorderOptions, RecorderState } from '../core/types';
+export declare function useFilmRecorder(options?: FilmRecorderOptions): {
+    recorder: FilmRecorder | null;
+    state: RecorderState | null;
+    tourState: "idle" | "running" | "stopped" | "error";
+    currentScene: string | null;
+    stopTour: () => Promise<void>;
+    stopAll: () => Promise<void>;
+};
+//# sourceMappingURL=useFilmRecorder.d.ts.map

package/dist/react/useFilmRecorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilmRecorder.d.ts","sourceRoot":"","sources":["../../src/react/useFilmRecorder.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnE,wBAAgB,eAAe,CAAC,OAAO,GAAE,mBAAwB;;;;;;;EA4JhE"}

package/dist/react/useFilmRecorder.js

@@ -0,0 +1,61 @@
+import { useRef as f, useState as i, useEffect as t } from "react";
+import { FilmRecorder as C } from "../core/FilmRecorder.js";
+function w(e = {}) {
+  const n = f(e);
+  n.current = e;
+  const [S, o] = i(null), [m, d] = i("idle"), [s, a] = i(null), r = f(null);
+  t(() => {
+    const l = new C(n.current);
+    r.current = l;
+    const c = l.getState();
+    o(c), d(c.tourState), a(c.currentScene);
+    const R = l.onStateChange((u) => {
+      o(u), d(u.tourState), a(u.currentScene);
+    });
+    return () => {
+      R(), l.destroy(), r.current = null;
+    };
+  }, []), t(() => {
+    r.current && e.autoZoom !== void 0 && r.current.setAutoZoom(e.autoZoom);
+  }, [e.autoZoom]), t(() => {
+    r.current && e.pauseDuringScroll !== void 0 && r.current.setPauseDuringScroll(e.pauseDuringScroll);
+  }, [e.pauseDuringScroll]), t(() => {
+    r.current && e.showGrid !== void 0 && r.current.setShowGrid(e.showGrid);
+  }, [e.showGrid]), t(() => {
+    r.current && e.showOutline !== void 0 && r.current.setShowOutline(e.showOutline);
+  }, [e.showOutline]), t(() => {
+    r.current && e.elementSelector !== void 0 && r.current.setElementSelector(e.elementSelector);
+  }, [e.elementSelector]), t(() => {
+    r.current && e.elementPadding !== void 0 && r.current.setElementPadding(e.elementPadding);
+  }, [e.elementPadding]), t(() => {
+    r.current && e.fixedRecordingRegion !== void 0 && r.current.setFixedRecordingRegion(e.fixedRecordingRegion);
+  }, [e.fixedRecordingRegion]), t(() => {
+    r.current && e.movePointerToSelector !== void 0 && r.current.setMovePointerToSelector(e.movePointerToSelector);
+  }, [e.movePointerToSelector]), t(() => {
+    r.current && e.ignoreSelector !== void 0 && r.current.setIgnoreSelector(e.ignoreSelector);
+  }, [e.ignoreSelector]), t(() => {
+    r.current && e.pointerClassName !== void 0 && r.current.setPointerClassName(e.pointerClassName);
+  }, [e.pointerClassName]), t(() => {
+    r.current && e.pointerFillColor !== void 0 && r.current.setPointerFillColor(e.pointerFillColor);
+  }, [e.pointerFillColor]), t(() => {
+    r.current && e.pointerBorderColor !== void 0 && r.current.setPointerBorderColor(e.pointerBorderColor);
+  }, [e.pointerBorderColor]), t(() => {
+    r.current && e.pointerRippleColor !== void 0 && r.current.setPointerRippleColor(e.pointerRippleColor);
+  }, [e.pointerRippleColor]), t(() => {
+    r.current && e.disableRipple !== void 0 && r.current.setDisableRipple(e.disableRipple);
+  }, [e.disableRipple]), t(() => {
+    r.current && e.overlays !== void 0 && r.current.setOverlays(e.overlays);
+  }, [e.overlays]);
+  const v = () => r.current?.stopTour() ?? Promise.resolve(), g = () => r.current?.stopAll() ?? Promise.resolve();
+  return {
+    recorder: r.current,
+    state: S,
+    tourState: m,
+    currentScene: s,
+    stopTour: v,
+    stopAll: g
+  };
+}
+export {
+  w as useFilmRecorder
+};

package/dist/vanilla/RegionRecorderUI.d.ts

@@ -0,0 +1,21 @@
+import { FilmRecorder } from '../core/FilmRecorder';
+export declare class RegionRecorderUI {
+    private recorder;
+    private container;
+    private unsubscribe;
+    private settingsBar;
+    private gridOverlay;
+    private cropBox;
+    private recordBtn;
+    private pngBtn;
+    private resSelect;
+    private gridCheckbox;
+    private autoZoomCheckbox;
+    private pauseScrollCheckbox;
+    private outlineCheckbox;
+    constructor(recorder: FilmRecorder, container?: HTMLElement);
+    private mount;
+    private updateDOM;
+    unmount(): void;
+}
+//# sourceMappingURL=RegionRecorderUI.d.ts.map

package/dist/vanilla/RegionRecorderUI.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RegionRecorderUI.d.ts","sourceRoot":"","sources":["../../src/vanilla/RegionRecorderUI.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA6C,MAAM,sBAAsB,CAAC;AAG/F,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,QAAQ,CAAe;IAC/B,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,WAAW,CAA6B;IAGhD,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,OAAO,CAA+B;IAG9C,OAAO,CAAC,SAAS,CAAkC;IACnD,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,SAAS,CAAkC;IACnD,OAAO,CAAC,YAAY,CAAiC;IACrD,OAAO,CAAC,gBAAgB,CAAiC;IACzD,OAAO,CAAC,mBAAmB,CAAiC;IAC5D,OAAO,CAAC,eAAe,CAAiC;gBAE5C,QAAQ,EAAE,YAAY,EAAE,SAAS,GAAE,WAA2B;IAO1E,OAAO,CAAC,KAAK;IA4Ib,OAAO,CAAC,SAAS;IAuEV,OAAO;CAgBf"}

package/dist/vanilla/RegionRecorderUI.js

@@ -0,0 +1,128 @@
+import { HEADER_PX as d, OUTLINE_PX as o, SHORTCUT_KEY as l } from "../core/FilmRecorder.js";
+class f {
+  recorder;
+  container;
+  unsubscribe = null;
+  // DOM Elements
+  settingsBar = null;
+  gridOverlay = null;
+  cropBox = null;
+  // Cached state controls
+  recordBtn = null;
+  pngBtn = null;
+  resSelect = null;
+  gridCheckbox = null;
+  autoZoomCheckbox = null;
+  pauseScrollCheckbox = null;
+  outlineCheckbox = null;
+  constructor(e, r = document.body) {
+    this.recorder = e, this.container = r, this.mount();
+  }
+  mount() {
+    if (typeof window > "u") return;
+    this.settingsBar = document.createElement("div"), this.settingsBar.className = "cfr-settings-bar", this.settingsBar.innerHTML = `
+      <div class="cfr-settings-bar-content">
+        <button class="cfr-btn cfr-btn-default" id="cfr-record-btn" aria-label="Start recording">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-right:4px;"><circle cx="12" cy="12" r="10"/></svg>
+          Record <span class="cfr-kbd"></span>
+        </button>
+        <button class="cfr-btn cfr-btn-secondary" id="cfr-png-btn" disabled>
+          PNG frame
+        </button>
+        <button class="cfr-btn cfr-btn-ghost" id="cfr-full-btn">
+          Full <span class="cfr-kbd"></span>
+        </button>
+        <button class="cfr-btn cfr-btn-ghost" id="cfr-focus-btn">
+          Focus mouse <span class="cfr-kbd"></span>
+        </button>
+        <button class="cfr-btn cfr-btn-ghost" id="cfr-pause-mouse-btn">
+          Pause mouse <span class="cfr-kbd"></span>
+        </button>
+        
+        <div class="cfr-divider"></div>
+        
+        <div class="cfr-select-wrapper">
+          <select class="cfr-select" id="cfr-res-select"></select>
+        </div>
+        
+        <div class="cfr-divider"></div>
+        
+        <label class="cfr-checkbox-container">
+          <input type="checkbox" class="cfr-checkbox" id="cfr-grid-check">
+          <span class="cfr-label">Grid</span>
+        </label>
+        <label class="cfr-checkbox-container">
+          <input type="checkbox" class="cfr-checkbox" id="cfr-auto-zoom-check">
+          <span class="cfr-label">Auto-zoom on hold</span>
+        </label>
+        <label class="cfr-checkbox-container">
+          <input type="checkbox" class="cfr-checkbox" id="cfr-pause-scroll-check">
+          <span class="cfr-label">Pause zoom while scrolling</span>
+        </label>
+        <label class="cfr-checkbox-container">
+          <input type="checkbox" class="cfr-checkbox" id="cfr-outline-check">
+          <span class="cfr-label">Show outline border</span>
+        </label>
+      </div>
+    `, this.container.appendChild(this.settingsBar), this.gridOverlay = document.createElement("div"), this.gridOverlay.className = "cfr-grid-overlay", this.gridOverlay.setAttribute("aria-hidden", "true"), this.gridOverlay.style.top = `${d}px`, this.container.appendChild(this.gridOverlay), this.cropBox = document.createElement("div"), this.cropBox.className = "cfr-crop-box", this.cropBox.setAttribute("aria-label", "Cinematic 16:9 capture region");
+    const e = this.recorder.getState().showOutline;
+    this.cropBox.style.outline = e ? `${o}px solid var(--cfr-outline)` : "none", this.cropBox.style.outlineOffset = e ? `${o}px` : "0", this.container.appendChild(this.cropBox), this.recordBtn = this.container.querySelector("#cfr-record-btn"), this.pngBtn = this.container.querySelector("#cfr-png-btn"), this.resSelect = this.container.querySelector("#cfr-res-select"), this.gridCheckbox = this.container.querySelector("#cfr-grid-check"), this.autoZoomCheckbox = this.container.querySelector("#cfr-auto-zoom-check"), this.pauseScrollCheckbox = this.container.querySelector("#cfr-pause-scroll-check"), this.outlineCheckbox = this.container.querySelector("#cfr-outline-check");
+    const r = this.container.querySelector("#cfr-full-btn"), c = this.container.querySelector("#cfr-focus-btn"), n = this.container.querySelector("#cfr-pause-mouse-btn"), s = /Mac/i.test(navigator.platform) ? "⌘" : "Ctrl";
+    this.recordBtn && (this.recordBtn.querySelector(".cfr-kbd").textContent = `${s}+${l.toUpperCase()}`), r && (r.querySelector(".cfr-kbd").textContent = `${s}+↑`), c && (c.querySelector(".cfr-kbd").textContent = `${s}+↓`), n && (n.querySelector(".cfr-kbd").textContent = `${s}+L`), this.recorder.getState();
+    const a = this.recorder.options.resolutions;
+    a.forEach((t) => {
+      const i = document.createElement("option");
+      i.value = t.label, i.textContent = t.label, this.resSelect && this.resSelect.appendChild(i);
+    }), this.recordBtn?.addEventListener("click", () => {
+      this.recorder.getState().recording ? this.recorder.stopRecording() : this.recorder.startRecording();
+    }), this.pngBtn?.addEventListener("click", () => this.recorder.captureBitmap()), r?.addEventListener("click", () => this.recorder.resetFullScreen()), c?.addEventListener("click", () => this.recorder.zoomToMouse()), n?.addEventListener("click", () => {
+      const t = this.recorder.getState().mousePaused;
+      this.recorder.setMousePaused(!t);
+    }), this.resSelect?.addEventListener("change", (t) => {
+      const i = t.target.value, h = a.find((u) => u.label === i);
+      h && this.recorder.setResolution(h);
+    }), this.gridCheckbox?.addEventListener("change", (t) => {
+      this.recorder.setShowGrid(t.target.checked);
+    }), this.autoZoomCheckbox?.addEventListener("change", (t) => {
+      this.recorder.setAutoZoom(t.target.checked);
+    }), this.pauseScrollCheckbox?.addEventListener("change", (t) => {
+      this.recorder.setPauseDuringScroll(t.target.checked);
+    }), this.outlineCheckbox?.addEventListener("change", (t) => {
+      this.recorder.setShowOutline(t.target.checked);
+    }), this.unsubscribe = this.recorder.onStateChange((t) => this.updateDOM(t));
+  }
+  updateDOM(e) {
+    if (typeof window > "u") return;
+    const r = this.recorder.computeGrid(e.viewport.w, e.viewport.h);
+    if (this.recordBtn && (e.recording ? (this.recordBtn.className = "cfr-btn cfr-btn-destructive", this.recordBtn.innerHTML = `
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-right:4px;"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
+          ${e.mousePaused ? "Paused" : "Stop"}
+          <span class="cfr-kbd">${/Mac/i.test(navigator.platform) ? "⌘" : "Ctrl"}+${l.toUpperCase()}</span>
+        `) : (this.recordBtn.className = "cfr-btn cfr-btn-default", this.recordBtn.innerHTML = `
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="margin-right:4px;"><circle cx="12" cy="12" r="10"/></svg>
+          Record
+          <span class="cfr-kbd">${/Mac/i.test(navigator.platform) ? "⌘" : "Ctrl"}+${l.toUpperCase()}</span>
+        `)), this.pngBtn && (this.pngBtn.disabled = !e.recording), this.resSelect && (this.resSelect.disabled = e.recording, this.resSelect.value = e.resolution.label), this.gridCheckbox && (this.gridCheckbox.disabled = e.recording, this.gridCheckbox.checked = e.showGrid), this.autoZoomCheckbox && (this.autoZoomCheckbox.checked = e.autoZoom), this.pauseScrollCheckbox && (this.pauseScrollCheckbox.checked = e.pauseDuringScroll), this.outlineCheckbox && (this.outlineCheckbox.checked = e.showOutline), this.gridOverlay) {
+      const c = e.showGrid && !e.recording;
+      this.gridOverlay.style.display = c ? "block" : "none", c && (this.gridOverlay.style.backgroundImage = `
+          linear-gradient(to right, var(--cfr-border) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--cfr-border) 1px, transparent 1px)
+        `, this.gridOverlay.style.backgroundSize = `${r.cellW}px ${r.cellH}px`);
+    }
+    if (this.cropBox) {
+      const c = {
+        x: e.displayRect.col * r.cellW,
+        y: d + e.displayRect.row * r.cellH,
+        width: e.displayRect.w * r.cellW,
+        height: e.displayRect.h * r.cellH
+      };
+      this.cropBox.style.left = `${c.x}px`, this.cropBox.style.top = `${c.y}px`, this.cropBox.style.width = `${c.width}px`, this.cropBox.style.height = `${c.height}px`, this.cropBox.style.outline = e.showOutline ? `${o}px solid var(--cfr-outline)` : "none", this.cropBox.style.outlineOffset = e.showOutline ? `${o}px` : "0";
+    }
+  }
+  unmount() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = null), this.settingsBar && this.settingsBar.parentNode && this.settingsBar.parentNode.removeChild(this.settingsBar), this.gridOverlay && this.gridOverlay.parentNode && this.gridOverlay.parentNode.removeChild(this.gridOverlay), this.cropBox && this.cropBox.parentNode && this.cropBox.parentNode.removeChild(this.cropBox);
+  }
+}
+export {
+  f as RegionRecorderUI
+};

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@codefilm/recorder",
+  "version": "3.0.0",
+  "description": "Cinematic screen region recorder SDK with automatic focal zooming, pointer overlays, and custom aspects.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./app-script": {
+      "types": "./dist/core/app-script.d.ts",
+      "import": "./dist/core/app-script.js"
+    },
+    "./style.css": "./dist/code-film.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/codedotfilm/code-film-recorder.git",
+    "directory": "sdk"
+  },
+  "bugs": {
+    "url": "https://github.com/codedotfilm/code-film-recorder/issues"
+  },
+  "homepage": "https://github.com/codedotfilm/code-film-recorder#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "test": "bun test",
+    "prepublishOnly": "npm run build"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "dist/*.css"
+  ],
+  "dependencies": {
+    "@openai/agents": "^0.1.0",
+    "openai": "^5.20.2",
+    "zod": "^3.24.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0"
+  }
+}