@bendyline/squisq-editor-react 2.2.0 → 2.3.1

package/dist/teleprompter/index.d.ts

@@ -0,0 +1,497 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MediaProvider, Doc, Theme } from '@bendyline/squisq/schemas';
+import { ContentContainer } from '@bendyline/squisq/storage';
+import { NarrationTrace, NarrationAlignment, NarrationScript, NarrationTimingJsonV3, VadConfig } from '@bendyline/squisq/narration';
+import { KeyboardEvent, ReactNode } from 'react';
+
+/** Editor plumbing the recording flow needs; omit for prompter-only use. */
+interface TeleprompterRecordingDeps {
+    mediaProvider: MediaProvider;
+    container: ContentContainer | null;
+    markdownSource: string;
+    setMarkdownSource: (next: string) => void;
+    bumpMediaRevision: () => void;
+}
+interface TeleprompterViewProps {
+    doc: Doc | null;
+    theme: Theme;
+    /** Kept for API symmetry with PreviewPanel; recording uses `recording.container`. */
+    workspaceContainer?: ContentContainer | null;
+    /** Media base path (reserved for future preview integrations). */
+    basePath?: string;
+    /**
+     * Optional audience-window portal owned by the editor's Presentation mode.
+     * The main controller remains authoritative; only this live surface is
+     * mirrored into the target.
+     */
+    presentationTarget?: HTMLElement | null;
+    /** Recording deps; null/omitted disables the Record affordance. */
+    recording?: TeleprompterRecordingDeps | null;
+}
+declare function TeleprompterView(props: TeleprompterViewProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Mic capture + PCM transport for the teleprompter.
+ *
+ * getUserMedia → AudioContext → AudioWorklet tap → subscriber callbacks
+ * with 1024-sample Float32Array hops on the main thread. The DSP itself
+ * lives in core (`@bendyline/squisq/narration`) — this hook only moves
+ * samples. Falls back to a ScriptProcessorNode when `audioWorklet` is
+ * unavailable (same push model, so pacing still isn't tied to rAF).
+ */
+type MicAnalysisStatus = 'idle' | 'starting' | 'live' | 'error';
+type PcmHopListener = (pcm: Float32Array, audioTimeSec: number) => void;
+interface MicAnalysisHandle {
+    status: MicAnalysisStatus;
+    error: Error | null;
+    /** The live mic stream (feeds the narration recorder too), or null. */
+    stream: MediaStream | null;
+    /** AudioContext sample rate once live. */
+    sampleRate: number | null;
+    /** Known audio inputs (labels appear after the first grant). */
+    devices: MediaDeviceInfo[];
+    /**
+     * Start (or restart) capture. Resolves with the live stream — callers
+     * that need it immediately must use the return value, not the `stream`
+     * state field, which only updates on the NEXT render (stale-closure
+     * hazard right after an await). Null on failure/supersession.
+     */
+    start: (deviceId: string | null) => Promise<MediaStream | null>;
+    stop: () => void;
+    /** Subscribe to PCM hops; returns an unsubscribe. */
+    subscribeHop: (listener: PcmHopListener) => () => void;
+}
+declare function useMicAnalysis(): MicAnalysisHandle;
+
+/**
+ * Narration recorder for the teleprompter — an in-place (no modal)
+ * capture flow.
+ *
+ * Audio records THE MIC ANALYSIS STREAM (what paces the prompter is
+ * exactly what lands in the take); the optional camera is a separate
+ * video-only capture whose start skew vs the audio recorder is measured
+ * and persisted (`cameraOffsetSec`) — the audio file is the doc clock,
+ * so camera skew never affects narration timing. While recording, a
+ * sparse live trace of the prompter position is sampled; after stop,
+ * the take is decoded and run through core's offline aligner
+ * (`alignNarration`) to produce word/block timestamps for the sidecar.
+ * Decode/alignment failure degrades gracefully: saving still works,
+ * just without re-timing.
+ */
+
+type NarrationRecorderState = 'idle' | 'starting' | 'recording' | 'processing' | 'review' | 'saving' | 'error';
+interface NarrationTake {
+    audioBlob: Blob;
+    audioMime: string;
+    audioExt: string;
+    cameraBlob: Blob | null;
+    cameraMime: string | null;
+    cameraExt: string | null;
+    durationSec: number;
+    cameraOffsetSec: number | undefined;
+    trace: NarrationTrace;
+    alignment: NarrationAlignment | null;
+    script: NarrationScript;
+}
+interface UseNarrationRecorderOptions {
+    mic: MicAnalysisHandle;
+    getScript: () => NarrationScript | null;
+    /** Live prompter position, sampled into the trace while recording. */
+    getWordPos: () => number;
+    getMicDeviceId: () => string | null;
+    /** Fired when capture actually starts (View starts the prompter). */
+    onRecordingStart?: () => void;
+    onRecordingStop?: () => void;
+}
+interface NarrationRecorderController {
+    state: NarrationRecorderState;
+    error: Error | null;
+    withCamera: boolean;
+    setWithCamera: (on: boolean) => void;
+    /** Live camera stream for the self-view while recording. */
+    cameraStream: MediaStream | null;
+    take: NarrationTake | null;
+    start: () => Promise<void>;
+    stop: () => Promise<void>;
+    retake: () => void;
+    discard: () => void;
+    /** Transition into/out of 'saving'; the View owns the actual I/O. */
+    beginSave: () => void;
+    finishSave: (ok: boolean, error?: Error) => void;
+}
+declare function useNarrationRecorder(options: UseNarrationRecorderOptions): NarrationRecorderController;
+
+/**
+ * Pure save-plan builder for a narration take, plus its executor.
+ *
+ * Follows the recorder's conventions (`RecorderModal.handleSave`):
+ * audio at `audio/<narration-…>` via `MediaProvider.addMedia` (the
+ * RETURNED path is authoritative — providers may rename), the timing
+ * sidecar at `<audio>.timing.json` via `container.writeFile` (falling
+ * back to `addMedia` with a warning), and ONE `setMarkdownSource` write
+ * composing every markdown edit from a single snapshot (the single-write
+ * rule — successive writes each derive from stale source and clobber
+ * each other).
+ *
+ * Block timings deliberately do NOT get baked into heading `duration=`
+ * pins: pins outrank narration in `applyNarrationTiming`, so baking
+ * them would shadow every retake. The sidecar owns the timing.
+ */
+
+interface NarrationSavePlanArgs {
+    script: NarrationScript;
+    /** Null when decode/alignment failed — the sidecar still saves (empty timing). */
+    alignment: NarrationAlignment | null;
+    durationSec: number;
+    audioExt: string;
+    cameraExt: string | null;
+    baseWpm: number;
+    cameraOffsetSec?: number;
+}
+interface NarrationSavePlan {
+    audioRelativeName: string;
+    cameraRelativeName: string | null;
+    sidecarPayload: NarrationTimingJsonV3;
+    /** Sidecar path for a given (possibly renamed) saved audio path. */
+    sidecarPathFor: (savedAudioPath: string) => string;
+    /** Compose ALL markdown edits from one source snapshot. */
+    nextMarkdown: (currentSource: string, savedAudioPath: string, savedCameraPath: string | null) => string;
+}
+declare function buildNarrationSavePlan(args: NarrationSavePlanArgs): NarrationSavePlan;
+interface ExecuteNarrationSaveDeps {
+    mediaProvider: MediaProvider;
+    container: ContentContainer | null;
+    /**
+     * Read the LIVE markdown source at write time. Deliberately a getter, not
+     * a snapshot: the media writes above are async, and a value captured before
+     * them would compose the preamble from a stale source and clobber anything
+     * that landed in between.
+     */
+    getMarkdownSource: () => string;
+    setMarkdownSource: (next: string) => void;
+    bumpMediaRevision: () => void;
+}
+/**
+ * What a save attempt has already committed. Passed back in on a retry so a
+ * second attempt REUSES the audio it already wrote instead of writing another
+ * timestamped file (and orphaning the first).
+ *
+ * Mutated in place by {@link executeNarrationSave} as each step lands, which
+ * is what makes the record survive the throw that aborted the attempt.
+ */
+interface NarrationSaveProgress {
+    audioPath?: string;
+    cameraPath?: string | null;
+    sidecarPath?: string;
+}
+interface NarrationSaveResult {
+    audioPath: string;
+    cameraPath: string | null;
+    sidecarPath: string;
+}
+/**
+ * Execute a save plan: media writes, sidecar, then the single markdown write.
+ *
+ * Every step is idempotent against `progress`. A failed attempt leaves its
+ * completed steps recorded there, so retrying with the SAME progress object
+ * resumes rather than restarts — no duplicate audio, no second sidecar.
+ */
+declare function executeNarrationSave(plan: NarrationSavePlan, take: {
+    audioBlob: Blob;
+    audioMime: string;
+    cameraBlob: Blob | null;
+    cameraMime: string | null;
+}, deps: ExecuteNarrationSaveDeps, progress?: NarrationSaveProgress): Promise<NarrationSaveResult>;
+
+/**
+ * Pure markdown edit: insert (or replace) the narration reference at the
+ * start of the document.
+ *
+ * The narration take is referenced by a preamble media annotation —
+ * `{[audio src=audio/narration-….webm anchor=document]}` — the canonical
+ * authored form `markdownToDoc` lifts into `doc.documentMedia`. A prior
+ * teleprompter take's line is replaced, so retakes swap the reference
+ * instead of stacking narrations. The optional camera companion rides on
+ * the next line as an inline `<video>` (deliberately NOT doc-anchored:
+ * document-anchored video renders full-bleed behind every block and is
+ * excluded from export audio — not a talking head).
+ *
+ * ## Matching a prior take by ROLE, not by path
+ *
+ * These patterns deliberately do not encode a `audio/narration-` /
+ * `video/narration-cam-` path prefix. `narrationSave` treats the path
+ * RETURNED by `MediaProvider.addMedia` as authoritative because providers
+ * may rename or relocate the file, so a path-shaped matcher misses the
+ * very annotation it wrote and the next retake stacks a second one — two
+ * document-anchored audio tracks playing at once.
+ *
+ * Instead we match the annotation's ROLE, scoped to POSITION:
+ *
+ * - Narration: a `{[audio … anchor=document …]}` line. Document-anchored
+ *   audio is a single-occupancy slot (it becomes `doc.documentMedia` and
+ *   is what `applyNarrationTiming` / `resolveAudioMapping` treat as *the*
+ *   narration), so replacing whatever occupies it is exactly right —
+ *   two of them is never a valid document.
+ * - Camera: a `<video …></video>` line sitting immediately after that
+ *   narration line (blank lines allowed between). Adjacency to the
+ *   preamble is the role marker here — an inline `<video>` carries no
+ *   anchor of its own, and this is the exact shape `cameraVideoLine`
+ *   emits as part of the same insert.
+ *
+ * Both matchers are confined to the PREAMBLE REGION — the blank-padded run
+ * at the insertion point (top of file, or just after the frontmatter fence).
+ * Role alone is not enough: matching document-wide would let a retake
+ * silently replace a background-music annotation the user wrote further
+ * down, or consume whichever `<video>` of theirs happened to follow it.
+ * Content outside the region we wrote is never touched.
+ */
+declare function narrationAnnotationLine(audioPath: string): string;
+declare function cameraVideoLine(cameraPath: string): string;
+/**
+ * Insert the narration preamble after the frontmatter (or at the top),
+ * replacing any previous teleprompter take's lines.
+ */
+declare function insertNarrationPreamble(source: string, audioPath: string, cameraPath: string | null): string;
+
+interface TeleprompterSurfaceProps {
+    script: NarrationScript;
+    /** Fractional word position; floor is the active token. */
+    wordPos: number;
+    fontSizePx: number;
+    mirrored: boolean;
+    lineGuide: boolean;
+    countdownRemaining: number | null;
+    recordingIndicator: boolean;
+    theme: Theme;
+    /** Hide block markers / tighten padding for small float windows. */
+    compact?: boolean;
+    /** Click a word to jump the prompter there. */
+    onSeekToken?: (tokenIndex: number) => void;
+}
+declare function TeleprompterSurface({ script, wordPos, fontSizePx, mirrored, lineGuide, countdownRemaining, recordingIndicator, theme, compact, onSeekToken, }: TeleprompterSurfaceProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shared types for the Narrate (teleprompter) display mode.
+ */
+interface TeleprompterPrefs {
+    /** Prompter type size in px (28–96). */
+    fontSizePx: number;
+    /** Beam-splitter mirror flip. */
+    mirrored: boolean;
+    /** Base speaking rate in words per minute (80–260). */
+    baseWpm: number;
+    /** Voice-adaptive pacing on/off; off = constant-rate manual mode. */
+    voiceTracking: boolean;
+    /** VAD sensitivity 0–1 (0.5 = engine defaults). */
+    vadSensitivity: number;
+    /** Countdown before the prompter starts rolling. */
+    countdownSec: 0 | 3 | 5 | 10;
+    /** Eye-line chevrons + focus band. */
+    lineGuide: boolean;
+    /** Preferred mic device id (null = system default). */
+    micDeviceId: string | null;
+}
+declare const DEFAULT_TELEPROMPTER_PREFS: TeleprompterPrefs;
+type PrompterTransport = 'stopped' | 'countdown' | 'rolling' | 'paused' | 'finished';
+/** Floating-surface tier, best first. */
+type FloatTier = 'document-pip' | 'video-pip' | 'popup' | 'docked';
+
+/**
+ * The teleprompter controller — single source of truth, always in the
+ * MAIN window (floats are render targets only).
+ *
+ * Loop-ownership rule: **the audio worklet owns time; the main window
+ * owns state; the visible surface owns pixels.** Voice-mode position
+ * advances on worklet PCM hops (immune to rAF/timer throttling while
+ * the browser is occluded by recording software); manual constant-rate
+ * mode uses rAF and is documented as best-effort under occlusion. React
+ * state publishes at ~15 Hz; per-hop subscribers (`subscribeTick`)
+ * exist for the video-PiP canvas pump.
+ */
+
+interface TeleprompterController {
+    script: NarrationScript | null;
+    transport: PrompterTransport;
+    countdownRemaining: number | null;
+    /** Fractional word position (published ~15 Hz). */
+    wordPos: number;
+    /** Smoothed mic level 0–1 for the meter. */
+    micLevel: number;
+    /** VAD flag for the meter tint. */
+    voiceActive: boolean;
+    mic: MicAnalysisHandle;
+    prefs: TeleprompterPrefs;
+    setPrefs: (patch: Partial<TeleprompterPrefs>) => void;
+    play: () => void;
+    pause: () => void;
+    restart: () => void;
+    /** Move the prompter by whole tokens and re-anchor voice tracking. */
+    nudge: (deltaTokens: number) => void;
+    /** Jump to an absolute token index (e.g. click a block marker). */
+    seekToToken: (tokenIndex: number) => void;
+    /** Per-analysis-tick subscription (video-PiP pump). Not throttled. */
+    subscribeTick: (cb: (wordPos: number) => void) => () => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+}
+/** Map the 0–1 sensitivity pref onto VAD thresholds (0.5 = engine defaults). */
+declare function vadConfigForSensitivity(sensitivity: number): Partial<VadConfig>;
+declare function useTeleprompter(opts: {
+    doc: Doc | null;
+}): TeleprompterController;
+
+/**
+ * Floating-teleprompter window manager — framework-free.
+ *
+ * Capability ladder, best first:
+ *   1. `document-pip` — Document Picture-in-Picture (Chromium 116+,
+ *      Firefox 151+): a true always-on-top window hosting live DOM; the
+ *      React surface portals into it.
+ *   2. `video-pip`   — canvas → `captureStream(0)` → `<video>` →
+ *      `requestPictureInPicture()` (Safari's only always-on-top path;
+ *      `webkitSetPresentationMode` fallback). Read-only: the main
+ *      window draws frames and calls `requestFrame()` on analysis
+ *      ticks — never rAF, which throttles under occlusion.
+ *   3. `popup`       — `window.open` (positionable, not always-on-top).
+ *   4. `docked`      — no float.
+ *
+ * Every tier is feature-detected at open time and falls through to the
+ * next on ANY failure. All interactive state stays in the main window;
+ * floats are render targets only.
+ */
+
+interface FloatOpenOptions {
+    width: number;
+    height: number;
+    /** Try this tier first; the ladder continues below it on failure. */
+    preferredTier?: FloatTier;
+    title: string;
+}
+interface CanvasSink {
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    /** Push the freshly drawn canvas frame into the PiP video. */
+    requestFrame: () => void;
+}
+type FloatEvent = 'closed' | 'tierchange';
+interface FloatingWindowManager {
+    readonly tier: FloatTier;
+    readonly isOpen: boolean;
+    /** Resolves with the tier that actually opened ('docked' if none could). */
+    open(opts: FloatOpenOptions): Promise<FloatTier>;
+    /** Idempotent; restores docked and emits 'closed'. */
+    close(): void;
+    /** Portal container for 'document-pip' | 'popup'; null otherwise. */
+    getPortalTarget(): HTMLElement | null;
+    /** Canvas sink for 'video-pip'; null otherwise. */
+    getCanvasSink(): CanvasSink | null;
+    on(event: FloatEvent, cb: (tier: FloatTier) => void): () => void;
+    /** Tear everything down (unmount); like close() but silent-safe. */
+    dispose(): void;
+}
+/** Feature-detect the available float tiers, best first. */
+declare function detectFloatTiers(): FloatTier[];
+declare function createFloatingWindowManager(deps: {
+    styleCss: string;
+}): FloatingWindowManager;
+
+/**
+ * React binding over {@link createFloatingWindowManager}: exposes the
+ * current tier + portal target as state and guarantees the float closes
+ * when the owning view unmounts (mode switch, Use-tab exit, shell
+ * teardown).
+ */
+
+interface FloatingWindowHandle {
+    tier: FloatTier;
+    isOpen: boolean;
+    /** Non-docked tiers this browser supports, best first. */
+    supportedTiers: FloatTier[];
+    portalTarget: HTMLElement | null;
+    canvasSink: CanvasSink | null;
+    open: (preferredTier?: FloatTier) => Promise<void>;
+    close: () => void;
+}
+declare function useFloatingWindow(styleCss: string): FloatingWindowHandle;
+
+interface TeleprompterControlsProps {
+    controller: TeleprompterController;
+    float: FloatingWindowHandle;
+    /** Phase B mounts the narration Record button here. */
+    recordSlot?: ReactNode;
+}
+declare function TeleprompterControls({ controller, float, recordSlot }: TeleprompterControlsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * The PCM tap AudioWorklet, shipped as an inline source string.
+ *
+ * Why inline → Blob URL instead of a bundled asset: `audioWorklet
+ * .addModule(url)` resolves relative to the host DOCUMENT, so a
+ * dist-relative asset would need every consumer's bundler to rewrite
+ * and serve it (editor-react ships zero runtime assets today). The
+ * worklet is ~30 lines with no imports; inlining follows the
+ * `PLAYER_BUNDLE` source-string precedent and needs zero bundler
+ * config. The worklet does NO DSP — it batches 128-sample render
+ * quanta into 1024-sample frames and posts them (transferably) to the
+ * main thread, where the pure engine in `@bendyline/squisq/narration`
+ * runs. The audio render thread never throttles, so pacing keeps
+ * working while the browser window is fully occluded by recording
+ * software — the whole point of the teleprompter's scenario 2.
+ */
+declare const PCM_WORKLET_NAME = "squisq-pcm-tap";
+declare const PCM_WORKLET_SOURCE = "\nclass SquisqPcmTap extends AudioWorkletProcessor {\n  constructor() {\n    super();\n    this._buf = new Float32Array(1024);\n    this._len = 0;\n  }\n  process(inputs) {\n    const channel = inputs[0] && inputs[0][0];\n    if (channel && channel.length > 0) {\n      let i = 0;\n      while (i < channel.length) {\n        const n = Math.min(channel.length - i, this._buf.length - this._len);\n        this._buf.set(channel.subarray(i, i + n), this._len);\n        this._len += n;\n        i += n;\n        if (this._len === this._buf.length) {\n          const out = this._buf;\n          this._buf = new Float32Array(1024);\n          this._len = 0;\n          // Clone, don't transfer: Chrome recycles buffers transferred out\n          // of the worklet scope once the receiving handler returns, so a\n          // transferred hop reads as zeros if anything retains it. A 4 KB\n          // structured clone at ~47 Hz is negligible.\n          this.port.postMessage({ pcm: out, audioTime: currentTime });\n        }\n      }\n    }\n    return true;\n  }\n}\nregisterProcessor('squisq-pcm-tap', SquisqPcmTap);\n";
+/** Register the tap on an AudioContext via a same-origin Blob URL. */
+declare function registerPcmWorklet(ctx: AudioContext): Promise<void>;
+
+/**
+ * Pure scroll math for the teleprompter surface.
+ *
+ * The surface renders the whole script into one absolutely-positioned
+ * column and translates it so the active word sits at the eye-line
+ * (~35% from the top). These helpers are DOM-free except for the
+ * measurement entry point, which only reads layout.
+ */
+interface TokenLineMap {
+    /** Top offset (px, within the scroll column) of each token span. */
+    tokenTops: number[];
+    /** Height of each token's line box (px). */
+    tokenHeights: number[];
+}
+/** Fraction of the viewport height where the active line is held. */
+declare const EYE_LINE_FRACTION = 0.35;
+/**
+ * Measure the top offset of every `[data-token-idx]` span inside the
+ * scroll column. Layout read only — call on mount, resize, and font-size
+ * changes, not per frame.
+ */
+declare function measureTokenLines(scrollColumn: HTMLElement): TokenLineMap;
+/**
+ * The translateY offset (px) that puts the (fractional) word position on
+ * the eye-line. Interpolates between the current and next token tops so
+ * the column glides instead of stepping line by line.
+ */
+declare function targetOffsetFor(wordPos: number, lines: TokenLineMap, viewportHeightPx: number, eyeLine?: number): number;
+/**
+ * Advance the current scroll offset toward the target: exponential
+ * approach (critically-damped feel) with an absolute speed clamp so a
+ * hard resync glides rather than teleporting.
+ */
+declare function stepScroll(currentPx: number, targetPx: number, dtMs: number, maxPxPerSec?: number): number;
+
+/**
+ * Self-contained styling for the teleprompter.
+ *
+ * Everything the prompter surface needs ships as one CSS string plus a
+ * set of inline `--squisq-prompter-*` custom properties derived from the
+ * doc Theme. The docked surface, a Document-PiP window, and a popup all
+ * inject the SAME string, so the surface never depends on the host
+ * page's cascade (the VideoExportModal self-theming strategy).
+ */
+
+/** Inline CSS vars for the surface root, derived from the doc theme. */
+declare function prompterVarsFromTheme(theme: Theme): Record<string, string>;
+/** Inject {@link TELEPROMPTER_CSS} into a document once (main doc or a float window). */
+declare function ensureTeleprompterStyles(doc: Document): void;
+declare const TELEPROMPTER_CSS = "\n.squisq-teleprompter-root {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: var(--squisq-bg, #f5f5f5);\n  outline: none;\n}\n.squisq-teleprompter-stage {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  display: flex;\n}\n\n.squisq-teleprompter-surface {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n  background: var(--squisq-prompter-bg, #101014);\n  color: var(--squisq-prompter-text, #f5f5f2);\n  font-family: var(--squisq-prompter-font, system-ui, sans-serif);\n  user-select: none;\n}\n.squisq-teleprompter-flip {\n  position: absolute;\n  inset: 0;\n}\n.squisq-teleprompter-surface--mirrored .squisq-teleprompter-flip {\n  transform: scaleX(-1);\n}\n.squisq-teleprompter-scroll {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  will-change: transform;\n  padding: 40vh 8% 60vh;\n  box-sizing: border-box;\n}\n.squisq-teleprompter-line-guide {\n  position: absolute;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n.squisq-teleprompter-line-guide::before,\n.squisq-teleprompter-line-guide::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  border: 9px solid transparent;\n  transform: translateY(-50%);\n}\n.squisq-teleprompter-line-guide::before {\n  left: 6px;\n  border-left-color: var(--squisq-prompter-accent, #e8b64c);\n}\n.squisq-teleprompter-line-guide::after {\n  right: 6px;\n  border-right-color: var(--squisq-prompter-accent, #e8b64c);\n}\n.squisq-teleprompter-guide-band {\n  position: absolute;\n  left: 0;\n  right: 0;\n  background: color-mix(in srgb, var(--squisq-prompter-accent, #e8b64c) 9%, transparent);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.squisq-teleprompter-block-marker {\n  display: block;\n  margin: 1.1em 0 0.35em;\n  font-size: 0.38em;\n  font-weight: 600;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: var(--squisq-prompter-muted, #9a9aa0);\n  border-top: 1px solid color-mix(in srgb, var(--squisq-prompter-muted, #9a9aa0) 35%, transparent);\n  padding-top: 0.6em;\n}\n.squisq-teleprompter-para {\n  margin: 0 0 0.55em;\n  line-height: 1.4;\n  font-weight: 500;\n}\n.squisq-teleprompter-word {\n  opacity: 0.45;\n  transition: color 0.1s linear, opacity 0.1s linear;\n}\n.squisq-teleprompter-word--read {\n  opacity: 0.9;\n}\n.squisq-teleprompter-word--active {\n  opacity: 1;\n  font-weight: 800;\n  color: var(--squisq-prompter-accent, #e8b64c);\n}\n\n.squisq-teleprompter-countdown {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 3;\n  background: color-mix(in srgb, var(--squisq-prompter-bg, #101014) 72%, transparent);\n}\n.squisq-teleprompter-countdown-digit {\n  font-size: 18vmin;\n  font-weight: 800;\n  color: var(--squisq-prompter-accent, #e8b64c);\n  animation: squisq-prompter-pulse 1s ease-in-out infinite;\n}\n.squisq-teleprompter-recdot {\n  position: absolute;\n  top: 14px;\n  right: 16px;\n  z-index: 4;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #e5484d;\n  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 30%, transparent);\n  animation: squisq-prompter-pulse 1.4s ease-in-out infinite;\n}\n/* Counter-flip overlays so they stay readable in mirror mode. */\n.squisq-teleprompter-surface--mirrored .squisq-teleprompter-countdown,\n.squisq-teleprompter-surface--mirrored .squisq-teleprompter-recdot {\n  transform: scaleX(-1);\n}\n\n.squisq-teleprompter-selfview {\n  position: absolute;\n  right: 14px;\n  bottom: 14px;\n  width: 160px;\n  border-radius: 8px;\n  border: 2px solid color-mix(in srgb, #e5484d 60%, transparent);\n  z-index: 5;\n  background: #000;\n}\n\n.squisq-teleprompter-review {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--squisq-border, #e5e7eb);\n  background: var(--squisq-surface, var(--squisq-bg, #fff));\n  color: var(--squisq-text, #111827);\n  font-size: 12.5px;\n}\n.squisq-teleprompter-review audio {\n  height: 28px;\n  max-width: 260px;\n}\n.squisq-teleprompter-review button {\n  font: inherit;\n  color: inherit;\n  background: var(--squisq-input-bg, #fff);\n  border: 1px solid var(--squisq-border, #d1d5db);\n  border-radius: 6px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n\n.squisq-teleprompter-float-note {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  color: var(--squisq-text-muted, #6b7280);\n  font-size: 14px;\n}\n\n.squisq-teleprompter-controls {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 10px;\n  padding: 8px 12px;\n  border-top: 1px solid var(--squisq-border, #e5e7eb);\n  background: var(--squisq-surface, var(--squisq-bg, #fff));\n  color: var(--squisq-text, #111827);\n  font-size: 12.5px;\n}\n.squisq-teleprompter-controls .squisq-teleprompter-group {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  white-space: nowrap;\n}\n.squisq-teleprompter-controls button {\n  font: inherit;\n  color: inherit;\n  background: var(--squisq-input-bg, #fff);\n  border: 1px solid var(--squisq-border, #d1d5db);\n  border-radius: 6px;\n  padding: 4px 10px;\n  cursor: pointer;\n}\n.squisq-teleprompter-controls button:hover {\n  background: var(--squisq-surface-hover, #f3f4f6);\n}\n.squisq-teleprompter-controls button[aria-pressed='true'] {\n  background: var(--squisq-text, #111827);\n  color: var(--squisq-bg, #fff);\n  border-color: var(--squisq-text, #111827);\n}\n.squisq-teleprompter-controls select,\n.squisq-teleprompter-controls input[type='range'] {\n  font: inherit;\n  color: inherit;\n  background: var(--squisq-input-bg, #fff);\n  border: 1px solid var(--squisq-border, #d1d5db);\n  border-radius: 6px;\n  max-width: 170px;\n}\n.squisq-teleprompter-controls input[type='range'] {\n  border: none;\n  background: transparent;\n  width: 110px;\n}\n.squisq-teleprompter-meter {\n  position: relative;\n  width: 64px;\n  height: 8px;\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--squisq-border, #e5e7eb);\n}\n.squisq-teleprompter-meter-fill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  background: #9ca3af;\n  transition: width 0.08s linear;\n}\n.squisq-teleprompter-meter--voice .squisq-teleprompter-meter-fill {\n  background: #30a46c;\n}\n\n@keyframes squisq-prompter-pulse {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.45; }\n}\n@media (prefers-reduced-motion: reduce) {\n  .squisq-teleprompter-countdown-digit,\n  .squisq-teleprompter-recdot {\n    animation: none;\n  }\n  .squisq-teleprompter-word {\n    transition: none;\n  }\n}\n";
+
+export { type CanvasSink, DEFAULT_TELEPROMPTER_PREFS, EYE_LINE_FRACTION, type FloatOpenOptions, type FloatTier, type FloatingWindowHandle, type FloatingWindowManager, type MicAnalysisHandle, type MicAnalysisStatus, type NarrationRecorderController, type NarrationRecorderState, type NarrationSavePlan, type NarrationSaveResult, type NarrationTake, PCM_WORKLET_NAME, PCM_WORKLET_SOURCE, type PrompterTransport, TELEPROMPTER_CSS, type TeleprompterController, TeleprompterControls, type TeleprompterControlsProps, type TeleprompterPrefs, type TeleprompterRecordingDeps, TeleprompterSurface, type TeleprompterSurfaceProps, TeleprompterView, type TeleprompterViewProps, type TokenLineMap, buildNarrationSavePlan, cameraVideoLine, createFloatingWindowManager, detectFloatTiers, ensureTeleprompterStyles, executeNarrationSave, insertNarrationPreamble, measureTokenLines, narrationAnnotationLine, prompterVarsFromTheme, registerPcmWorklet, stepScroll, targetOffsetFor, useFloatingWindow, useMicAnalysis, useNarrationRecorder, useTeleprompter, vadConfigForSensitivity };

package/dist/teleprompter/index.js

@@ -0,0 +1,57 @@
+import {
+  DEFAULT_TELEPROMPTER_PREFS,
+  EYE_LINE_FRACTION,
+  PCM_WORKLET_NAME,
+  PCM_WORKLET_SOURCE,
+  TELEPROMPTER_CSS,
+  TeleprompterControls,
+  TeleprompterSurface,
+  TeleprompterView,
+  buildNarrationSavePlan,
+  cameraVideoLine,
+  createFloatingWindowManager,
+  detectFloatTiers,
+  ensureTeleprompterStyles,
+  executeNarrationSave,
+  insertNarrationPreamble,
+  measureTokenLines,
+  narrationAnnotationLine,
+  prompterVarsFromTheme,
+  registerPcmWorklet,
+  stepScroll,
+  targetOffsetFor,
+  useFloatingWindow,
+  useMicAnalysis,
+  useNarrationRecorder,
+  useTeleprompter,
+  vadConfigForSensitivity
+} from "../chunk-5JMHFAVW.js";
+import "../chunk-5Q4JN4I5.js";
+export {
+  DEFAULT_TELEPROMPTER_PREFS,
+  EYE_LINE_FRACTION,
+  PCM_WORKLET_NAME,
+  PCM_WORKLET_SOURCE,
+  TELEPROMPTER_CSS,
+  TeleprompterControls,
+  TeleprompterSurface,
+  TeleprompterView,
+  buildNarrationSavePlan,
+  cameraVideoLine,
+  createFloatingWindowManager,
+  detectFloatTiers,
+  ensureTeleprompterStyles,
+  executeNarrationSave,
+  insertNarrationPreamble,
+  measureTokenLines,
+  narrationAnnotationLine,
+  prompterVarsFromTheme,
+  registerPcmWorklet,
+  stepScroll,
+  targetOffsetFor,
+  useFloatingWindow,
+  useMicAnalysis,
+  useNarrationRecorder,
+  useTeleprompter,
+  vadConfigForSensitivity
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -22,6 +22,9 @@
     "access": "public"
   },
   "type": "module",
+  "engines": {
+    "node": ">=22.14.0"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -40,10 +43,30 @@
       "types": "./dist/monaco.d.ts",
       "import": "./dist/monaco.js"
     },
+    "./shell": {
+      "types": "./dist/shell/index.d.ts",
+      "import": "./dist/shell/index.js"
+    },
+    "./json-editor": {
+      "types": "./dist/json-editor/index.d.ts",
+      "import": "./dist/json-editor/index.js"
+    },
+    "./image-editor": {
+      "types": "./dist/image-editor/index.d.ts",
+      "import": "./dist/image-editor/index.js"
+    },
+    "./recorder": {
+      "types": "./dist/recorder/index.d.ts",
+      "import": "./dist/recorder/index.js"
+    },
+    "./teleprompter": {
+      "types": "./dist/teleprompter/index.d.ts",
+      "import": "./dist/teleprompter/index.js"
+    },
     "./styles": "./dist/styles/index.css"
   },
   "scripts": {
-    "build": "tsup && node ../../scripts/build-styles.mjs",
+    "build": "tsup && node ../../scripts/build-styles.mjs && node ../../scripts/remove-empty-chunks.mjs dist",
     "dev": "concurrently -n js,dts -c blue,gray -r \"tsup --watch --no-dts --no-clean\" \"tsup --watch --dts-only --no-clean\"",
     "typecheck": "tsc --noEmit"
   },
@@ -52,17 +75,11 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "monaco-editor": {
-      "optional": true
-    }
-  },
   "dependencies": {
-    "@bendyline/squisq": "2.2.0",
-    "@bendyline/squisq-formats": "2.2.0",
-    "@bendyline/squisq-react": "2.2.0",
+    "@bendyline/squisq": "2.3.0",
+    "@bendyline/squisq-formats": "2.3.0",
+    "@bendyline/squisq-react": "2.3.0",
     "@fortawesome/fontawesome-free": "7.2.0",
-    "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
     "@tiptap/extension-link": "2.27.2",
     "@tiptap/extension-mention": "2.27.2",
@@ -81,8 +98,10 @@
     "type-fest": "4.41.0"
   },
   "devDependencies": {
+    "@monaco-editor/react": "4.7.0",
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
+    "monaco-editor": "0.50.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "tsup": "8.5.1",