@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/teleprompter/teleprompterTheme.ts

@@ -1,303 +0,0 @@
-/**
- * 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).
- */
-
-import { resolveFontFamily, type Theme } from '@bendyline/squisq/schemas';
-
-/** Inline CSS vars for the surface root, derived from the doc theme. */
-export function prompterVarsFromTheme(theme: Theme): Record<string, string> {
-  const colors = theme.colors;
-  return {
-    '--squisq-prompter-bg': colors.background,
-    '--squisq-prompter-text': colors.text,
-    '--squisq-prompter-muted': colors.textMuted ?? colors.text,
-    '--squisq-prompter-accent': colors.primary,
-    '--squisq-prompter-font': resolveFontFamily(
-      theme.typography?.bodyFont,
-      'system-ui, sans-serif',
-    ),
-  };
-}
-
-/** Marker attribute used to inject the style block exactly once per document. */
-export const TELEPROMPTER_STYLE_ATTR = 'data-squisq-teleprompter';
-
-/** Inject {@link TELEPROMPTER_CSS} into a document once (main doc or a float window). */
-export function ensureTeleprompterStyles(doc: Document): void {
-  if (doc.querySelector(`style[${TELEPROMPTER_STYLE_ATTR}]`)) return;
-  const style = doc.createElement('style');
-  style.setAttribute(TELEPROMPTER_STYLE_ATTR, '');
-  style.textContent = TELEPROMPTER_CSS;
-  doc.head.appendChild(style);
-}
-
-export const TELEPROMPTER_CSS = `
-.squisq-teleprompter-root {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  background: var(--squisq-bg, #f5f5f5);
-  outline: none;
-}
-.squisq-teleprompter-stage {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  display: flex;
-}
-
-.squisq-teleprompter-surface {
-  position: relative;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--squisq-prompter-bg, #101014);
-  color: var(--squisq-prompter-text, #f5f5f2);
-  font-family: var(--squisq-prompter-font, system-ui, sans-serif);
-  user-select: none;
-}
-.squisq-teleprompter-flip {
-  position: absolute;
-  inset: 0;
-}
-.squisq-teleprompter-surface--mirrored .squisq-teleprompter-flip {
-  transform: scaleX(-1);
-}
-.squisq-teleprompter-scroll {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  will-change: transform;
-  padding: 40vh 8% 60vh;
-  box-sizing: border-box;
-}
-.squisq-teleprompter-line-guide {
-  position: absolute;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  z-index: 2;
-}
-.squisq-teleprompter-line-guide::before,
-.squisq-teleprompter-line-guide::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  border: 9px solid transparent;
-  transform: translateY(-50%);
-}
-.squisq-teleprompter-line-guide::before {
-  left: 6px;
-  border-left-color: var(--squisq-prompter-accent, #e8b64c);
-}
-.squisq-teleprompter-line-guide::after {
-  right: 6px;
-  border-right-color: var(--squisq-prompter-accent, #e8b64c);
-}
-.squisq-teleprompter-guide-band {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: color-mix(in srgb, var(--squisq-prompter-accent, #e8b64c) 9%, transparent);
-  pointer-events: none;
-  z-index: 1;
-}
-
-.squisq-teleprompter-block-marker {
-  display: block;
-  margin: 1.1em 0 0.35em;
-  font-size: 0.38em;
-  font-weight: 600;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--squisq-prompter-muted, #9a9aa0);
-  border-top: 1px solid color-mix(in srgb, var(--squisq-prompter-muted, #9a9aa0) 35%, transparent);
-  padding-top: 0.6em;
-}
-.squisq-teleprompter-para {
-  margin: 0 0 0.55em;
-  line-height: 1.4;
-  font-weight: 500;
-}
-.squisq-teleprompter-word {
-  opacity: 0.45;
-  transition: color 0.1s linear, opacity 0.1s linear;
-}
-.squisq-teleprompter-word--read {
-  opacity: 0.9;
-}
-.squisq-teleprompter-word--active {
-  opacity: 1;
-  font-weight: 800;
-  color: var(--squisq-prompter-accent, #e8b64c);
-}
-
-.squisq-teleprompter-countdown {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 3;
-  background: color-mix(in srgb, var(--squisq-prompter-bg, #101014) 72%, transparent);
-}
-.squisq-teleprompter-countdown-digit {
-  font-size: 18vmin;
-  font-weight: 800;
-  color: var(--squisq-prompter-accent, #e8b64c);
-  animation: squisq-prompter-pulse 1s ease-in-out infinite;
-}
-.squisq-teleprompter-recdot {
-  position: absolute;
-  top: 14px;
-  right: 16px;
-  z-index: 4;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: #e5484d;
-  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 30%, transparent);
-  animation: squisq-prompter-pulse 1.4s ease-in-out infinite;
-}
-/* Counter-flip overlays so they stay readable in mirror mode. */
-.squisq-teleprompter-surface--mirrored .squisq-teleprompter-countdown,
-.squisq-teleprompter-surface--mirrored .squisq-teleprompter-recdot {
-  transform: scaleX(-1);
-}
-
-.squisq-teleprompter-selfview {
-  position: absolute;
-  right: 14px;
-  bottom: 14px;
-  width: 160px;
-  border-radius: 8px;
-  border: 2px solid color-mix(in srgb, #e5484d 60%, transparent);
-  z-index: 5;
-  background: #000;
-}
-
-.squisq-teleprompter-review {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--squisq-border, #e5e7eb);
-  background: var(--squisq-surface, var(--squisq-bg, #fff));
-  color: var(--squisq-text, #111827);
-  font-size: 12.5px;
-}
-.squisq-teleprompter-review audio {
-  height: 28px;
-  max-width: 260px;
-}
-.squisq-teleprompter-review button {
-  font: inherit;
-  color: inherit;
-  background: var(--squisq-input-bg, #fff);
-  border: 1px solid var(--squisq-border, #d1d5db);
-  border-radius: 6px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-
-.squisq-teleprompter-float-note {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  color: var(--squisq-text-muted, #6b7280);
-  font-size: 14px;
-}
-
-.squisq-teleprompter-controls {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 10px;
-  padding: 8px 12px;
-  border-top: 1px solid var(--squisq-border, #e5e7eb);
-  background: var(--squisq-surface, var(--squisq-bg, #fff));
-  color: var(--squisq-text, #111827);
-  font-size: 12.5px;
-}
-.squisq-teleprompter-controls .squisq-teleprompter-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-.squisq-teleprompter-controls button {
-  font: inherit;
-  color: inherit;
-  background: var(--squisq-input-bg, #fff);
-  border: 1px solid var(--squisq-border, #d1d5db);
-  border-radius: 6px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-.squisq-teleprompter-controls button:hover {
-  background: var(--squisq-surface-hover, #f3f4f6);
-}
-.squisq-teleprompter-controls button[aria-pressed='true'] {
-  background: var(--squisq-text, #111827);
-  color: var(--squisq-bg, #fff);
-  border-color: var(--squisq-text, #111827);
-}
-.squisq-teleprompter-controls select,
-.squisq-teleprompter-controls input[type='range'] {
-  font: inherit;
-  color: inherit;
-  background: var(--squisq-input-bg, #fff);
-  border: 1px solid var(--squisq-border, #d1d5db);
-  border-radius: 6px;
-  max-width: 170px;
-}
-.squisq-teleprompter-controls input[type='range'] {
-  border: none;
-  background: transparent;
-  width: 110px;
-}
-.squisq-teleprompter-meter {
-  position: relative;
-  width: 64px;
-  height: 8px;
-  border-radius: 4px;
-  overflow: hidden;
-  background: var(--squisq-border, #e5e7eb);
-}
-.squisq-teleprompter-meter-fill {
-  position: absolute;
-  inset: 0 auto 0 0;
-  background: #9ca3af;
-  transition: width 0.08s linear;
-}
-.squisq-teleprompter-meter--voice .squisq-teleprompter-meter-fill {
-  background: #30a46c;
-}
-
-@keyframes squisq-prompter-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.45; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .squisq-teleprompter-countdown-digit,
-  .squisq-teleprompter-recdot {
-    animation: none;
-  }
-  .squisq-teleprompter-word {
-    transition: none;
-  }
-}
-`;

package/src/teleprompter/types.ts

@@ -1,38 +0,0 @@
-/**
- * Shared types for the Narrate (teleprompter) display mode.
- */
-
-export 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;
-}
-
-export const DEFAULT_TELEPROMPTER_PREFS: TeleprompterPrefs = Object.freeze({
-  fontSizePx: 48,
-  mirrored: false,
-  baseWpm: 150,
-  voiceTracking: true,
-  vadSensitivity: 0.5,
-  countdownSec: 3,
-  lineGuide: true,
-  micDeviceId: null,
-});
-
-export type PrompterTransport = 'stopped' | 'countdown' | 'rolling' | 'paused' | 'finished';
-
-/** Floating-surface tier, best first. */
-export type FloatTier = 'document-pip' | 'video-pip' | 'popup' | 'docked';

package/src/teleprompter/useFloatingWindow.ts

@@ -1,74 +0,0 @@
-/**
- * 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).
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  createFloatingWindowManager,
-  detectFloatTiers,
-  type CanvasSink,
-  type FloatingWindowManager,
-} from './floatingWindow';
-import type { FloatTier } from './types';
-
-export 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;
-}
-
-const FLOAT_WIDTH = 380;
-const FLOAT_HEIGHT = 540;
-
-export function useFloatingWindow(styleCss: string): FloatingWindowHandle {
-  const managerRef = useRef<FloatingWindowManager | null>(null);
-  if (managerRef.current === null) {
-    managerRef.current = createFloatingWindowManager({ styleCss });
-  }
-  const manager = managerRef.current;
-
-  const [tier, setTier] = useState<FloatTier>('docked');
-  const supportedTiers = useMemo(() => detectFloatTiers().filter((t) => t !== 'docked'), []);
-
-  useEffect(() => {
-    const offChange = manager.on('tierchange', setTier);
-    const offClosed = manager.on('closed', setTier);
-    return () => {
-      offChange();
-      offClosed();
-      manager.dispose();
-    };
-  }, [manager]);
-
-  const open = useCallback(
-    async (preferredTier?: FloatTier) => {
-      await manager.open({
-        width: FLOAT_WIDTH,
-        height: FLOAT_HEIGHT,
-        title: 'Squisq Teleprompter',
-        ...(preferredTier !== undefined ? { preferredTier } : {}),
-      });
-    },
-    [manager],
-  );
-
-  const close = useCallback(() => manager.close(), [manager]);
-
-  return {
-    tier,
-    isOpen: manager.isOpen,
-    supportedTiers,
-    portalTarget: manager.getPortalTarget(),
-    canvasSink: manager.getCanvasSink(),
-    open,
-    close,
-  };
-}

package/src/teleprompter/useMicAnalysis.ts

@@ -1,211 +0,0 @@
-/**
- * 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).
- */
-
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { requestMicStream } from '../recorder/sources/micStream';
-import { PCM_WORKLET_NAME, registerPcmWorklet } from './pcmWorklet';
-
-export type MicAnalysisStatus = 'idle' | 'starting' | 'live' | 'error';
-
-export type PcmHopListener = (pcm: Float32Array, audioTimeSec: number) => void;
-
-export 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;
-}
-
-interface LiveGraph {
-  stream: MediaStream;
-  context: AudioContext;
-  source: MediaStreamAudioSourceNode;
-  node: AudioWorkletNode | ScriptProcessorNode;
-  /** Keeps ScriptProcessor pulling without audible output. */
-  sink: GainNode | null;
-}
-
-export function useMicAnalysis(): MicAnalysisHandle {
-  const [status, setStatus] = useState<MicAnalysisStatus>('idle');
-  const [error, setError] = useState<Error | null>(null);
-  const [devices, setDevices] = useState<MediaDeviceInfo[]>([]);
-  const [stream, setStream] = useState<MediaStream | null>(null);
-  const [sampleRate, setSampleRate] = useState<number | null>(null);
-  const graphRef = useRef<LiveGraph | null>(null);
-  const listenersRef = useRef<Set<PcmHopListener>>(new Set());
-  const generationRef = useRef(0);
-
-  const refreshDevices = useCallback(async () => {
-    try {
-      const all = await navigator.mediaDevices.enumerateDevices();
-      setDevices(all.filter((d) => d.kind === 'audioinput'));
-    } catch {
-      // Enumeration is best-effort; the default device still works.
-    }
-  }, []);
-
-  useEffect(() => {
-    if (typeof navigator === 'undefined' || !navigator.mediaDevices?.addEventListener) return;
-    const onChange = () => void refreshDevices();
-    navigator.mediaDevices.addEventListener('devicechange', onChange);
-    return () => navigator.mediaDevices.removeEventListener('devicechange', onChange);
-  }, [refreshDevices]);
-
-  const teardown = useCallback(() => {
-    const graph = graphRef.current;
-    graphRef.current = null;
-    if (!graph) return;
-    try {
-      if ('port' in graph.node) {
-        graph.node.port.onmessage = null;
-      } else {
-        (graph.node as ScriptProcessorNode).onaudioprocess = null;
-      }
-      graph.node.disconnect();
-      graph.source.disconnect();
-      graph.sink?.disconnect();
-    } catch {
-      // Best-effort teardown; the context close below is what matters.
-    }
-    for (const track of graph.stream.getTracks()) track.stop();
-    void graph.context.close().catch(() => undefined);
-  }, []);
-
-  const stop = useCallback(() => {
-    generationRef.current += 1;
-    teardown();
-    setStream(null);
-    setSampleRate(null);
-    setStatus('idle');
-    setError(null);
-  }, [teardown]);
-
-  const start = useCallback(
-    async (deviceId: string | null): Promise<MediaStream | null> => {
-      const generation = ++generationRef.current;
-      teardown();
-      setStatus('starting');
-      setError(null);
-      try {
-        const micStream = await requestMicStream(
-          deviceId ? { deviceId: { exact: deviceId } } : undefined,
-        );
-        if (generation !== generationRef.current) {
-          for (const track of micStream.getTracks()) track.stop();
-          return null;
-        }
-        const context = new AudioContext();
-        // Autoplay policy can start contexts suspended when creation lands
-        // after an await; resume explicitly (we're inside a user gesture).
-        if (context.state === 'suspended') {
-          await context.resume().catch(() => undefined);
-        }
-        const source = context.createMediaStreamSource(micStream);
-        const emit = (pcm: Float32Array, audioTime: number) => {
-          for (const listener of listenersRef.current) listener(pcm, audioTime);
-        };
-
-        let node: AudioWorkletNode | ScriptProcessorNode | null = null;
-        let sink: GainNode | null = null;
-        if (context.audioWorklet && typeof AudioWorkletNode !== 'undefined') {
-          try {
-            await registerPcmWorklet(context);
-            const workletNode = new AudioWorkletNode(context, PCM_WORKLET_NAME, {
-              numberOfInputs: 1,
-              numberOfOutputs: 1,
-              channelCount: 1,
-              channelCountMode: 'explicit',
-            });
-            workletNode.port.onmessage = (event: MessageEvent) => {
-              const data = event.data as { pcm?: Float32Array; audioTime?: number };
-              if (data && data.pcm instanceof Float32Array) {
-                emit(data.pcm, typeof data.audioTime === 'number' ? data.audioTime : 0);
-              }
-            };
-            source.connect(workletNode);
-            // The graph must reach the destination or the browser may never
-            // pull (process) the tap; a zero-gain sink keeps it silent.
-            sink = context.createGain();
-            sink.gain.value = 0;
-            workletNode.connect(sink);
-            sink.connect(context.destination);
-            node = workletNode;
-          } catch {
-            node = null;
-          }
-        }
-        if (node === null) {
-          // Degraded fallback: ScriptProcessor still pushes PCM off the
-          // audio clock (not rAF), just with more main-thread overhead.
-          const processor = context.createScriptProcessor(1024, 1, 1);
-          processor.onaudioprocess = (event: AudioProcessingEvent) => {
-            const input = event.inputBuffer.getChannelData(0);
-            emit(new Float32Array(input), event.playbackTime);
-          };
-          sink = context.createGain();
-          sink.gain.value = 0;
-          source.connect(processor);
-          processor.connect(sink);
-          sink.connect(context.destination);
-          node = processor;
-        }
-
-        if (generation !== generationRef.current) {
-          for (const track of micStream.getTracks()) track.stop();
-          void context.close().catch(() => undefined);
-          return null;
-        }
-        graphRef.current = { stream: micStream, context, source, node, sink };
-        setStream(micStream);
-        setSampleRate(context.sampleRate);
-        setStatus('live');
-        void refreshDevices();
-        return micStream;
-      } catch (err: unknown) {
-        if (generation !== generationRef.current) return null;
-        setError(err instanceof Error ? err : new Error(String(err)));
-        setStatus('error');
-        return null;
-      }
-    },
-    [refreshDevices, teardown],
-  );
-
-  const subscribeHop = useCallback((listener: PcmHopListener) => {
-    listenersRef.current.add(listener);
-    return () => {
-      listenersRef.current.delete(listener);
-    };
-  }, []);
-
-  // Full teardown when the owning view unmounts.
-  useEffect(() => {
-    return () => {
-      generationRef.current += 1;
-      teardown();
-    };
-  }, [teardown]);
-
-  return { status, error, stream, sampleRate, devices, start, stop, subscribeHop };
-}