@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/styles/index.css

@@ -11,5 +11,8 @@
 @import '../imageEditor/image-editor.css';
 @import './image-edit-affordance.css';
 @import './diagram.css';
+@import './ascii-diagram.css';
+@import './tree-view.css';
+@import './ascii-timeline.css';
 @import '../scene/scene.css';
 @import '../customTemplates/designer.css';

package/src/styles/tree-view.css

@@ -0,0 +1,189 @@
+/* ASCII tree fences in the WYSIWYG editor.
+ *
+ * A qualifying code fence is hidden behind its interactive outline widget
+ * (TreeOutlineWidget). The raw art is always editable in the Source / Raw
+ * view; there is no on-canvas source toggle.
+ *
+ * Colors use the editor-shell CSS custom properties (`--squisq-bg`,
+ * `--squisq-input-bg`, `--squisq-border`, `--squisq-text`,
+ * `--squisq-text-muted`) which the shell flips for `[data-theme='dark']`,
+ * so the outline follows the editor's light/dark mode. */
+
+.squisq-wysiwyg-editor pre.squisq-tree-fence-hidden {
+  display: none;
+}
+
+.squisq-tree-widget-host {
+  margin: 0.75rem 0 1.25rem;
+}
+
+.squisq-tree-outline {
+  border: 1px solid var(--squisq-border, #e2e8f0);
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: var(--squisq-input-bg, #ffffff);
+  color: var(--squisq-text, #1e293b);
+  font-size: 14px;
+}
+
+.squisq-tree-toolbar {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+
+.squisq-tree-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  padding: 3px 8px;
+  border: 1px solid var(--squisq-border, #e2e8f0);
+  border-radius: 5px;
+  background: var(--squisq-bg, #f8fafc);
+  color: var(--squisq-text, #1e293b);
+  cursor: pointer;
+}
+.squisq-tree-btn:hover {
+  border-color: var(--squisq-text-muted, #94a3b8);
+}
+
+/* Include the widget wrapper so this reset wins over the editor's generic
+ * `.squisq-wysiwyg-editor ul` padding. Otherwise every nested rail picks up
+ * another 24px of list indentation. */
+.squisq-tree-outline .squisq-tree-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.squisq-tree-rows .squisq-tree-rows {
+  border-left: 1px solid var(--squisq-border, #e2e8f0);
+  margin-left: 8px;
+}
+
+.squisq-tree-item {
+  position: relative;
+}
+
+.squisq-tree-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 0;
+  border-radius: 4px;
+}
+.squisq-tree-row:hover .squisq-tree-controls {
+  opacity: 1;
+}
+
+.squisq-tree-item--dragging {
+  opacity: 0.42;
+}
+
+.squisq-tree-item--drop-before > .squisq-tree-row::before,
+.squisq-tree-item--drop-after::after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 999px;
+  background: #6366f1;
+  pointer-events: none;
+}
+.squisq-tree-item--drop-before > .squisq-tree-row::before {
+  top: -1px;
+}
+/* An after-drop becomes the target's sibling, so show the marker below its
+ * complete subtree rather than directly below the target row. */
+.squisq-tree-item--drop-after::after {
+  bottom: -1px;
+}
+.squisq-tree-item--drop-child > .squisq-tree-row {
+  background: rgba(99, 102, 241, 0.12);
+  box-shadow: inset 0 0 0 1px #6366f1;
+}
+
+.squisq-tree-chevron {
+  flex: 0 0 auto;
+  width: 16px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--squisq-text-muted, #64748b);
+  padding: 0;
+  font-size: 11px;
+}
+.squisq-tree-chevron--empty {
+  cursor: default;
+}
+
+.squisq-tree-icon {
+  flex: 0 0 auto;
+  width: 18px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: #6366f1;
+  padding: 0;
+}
+
+.squisq-tree-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 1px 4px;
+  font: inherit;
+  color: var(--squisq-text, #1e293b);
+  background: transparent;
+}
+.squisq-tree-label:focus {
+  outline: none;
+  border-color: #6366f1;
+  background: var(--squisq-bg, #f8fafc);
+}
+
+.squisq-tree-controls {
+  flex: 0 0 auto;
+  display: inline-flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.squisq-tree-drag-handle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  color: var(--squisq-text-muted, #64748b);
+  cursor: grab;
+}
+.squisq-tree-drag-handle:active {
+  cursor: grabbing;
+}
+.squisq-tree-controls button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--squisq-text-muted, #64748b);
+  padding: 2px 4px;
+  border-radius: 4px;
+  font-size: 11px;
+}
+.squisq-tree-controls button:hover {
+  background: var(--squisq-bg, #f1f5f9);
+  color: var(--squisq-text, #1e293b);
+}
+.squisq-tree-controls .squisq-tree-delete:hover {
+  color: #ef4444;
+}
+
+.squisq-tree-warnings {
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--squisq-text-muted, #6b7280);
+}

package/src/teleprompter/TeleprompterControls.tsx

@@ -0,0 +1,218 @@
+/**
+ * Docked controls rail for the Narrate mode: transport, pacing, mic,
+ * display, and pop-out. Lives under the surface (never in the main
+ * toolbar). The Record affordance mounts through `recordSlot` in
+ * Phase B so scenario 2 (prompter-only) has zero recording code paths.
+ */
+
+import type { ReactNode } from 'react';
+import type { TeleprompterController } from './useTeleprompter';
+import type { FloatingWindowHandle } from './useFloatingWindow';
+import type { FloatTier } from './types';
+
+const TIER_LABELS: Record<FloatTier, string> = {
+  'document-pip': 'Floating window (always on top)',
+  'video-pip': 'Picture-in-picture (read-only)',
+  popup: 'Popup window',
+  docked: 'Docked',
+};
+
+export interface TeleprompterControlsProps {
+  controller: TeleprompterController;
+  float: FloatingWindowHandle;
+  /** Phase B mounts the narration Record button here. */
+  recordSlot?: ReactNode;
+}
+
+export function TeleprompterControls({ controller, float, recordSlot }: TeleprompterControlsProps) {
+  const { transport, prefs, setPrefs, mic } = controller;
+  const rolling = transport === 'rolling' || transport === 'countdown';
+  const voiceLive = prefs.voiceTracking && mic.status === 'live';
+
+  return (
+    <div
+      className="squisq-teleprompter-controls"
+      data-testid="teleprompter-controls"
+      data-mic-status={mic.status}
+      data-transport={transport}
+      data-voice-live={voiceLive || undefined}
+    >
+      <span className="squisq-teleprompter-group">
+        <button
+          type="button"
+          onClick={() => (rolling ? controller.pause() : controller.play())}
+          aria-label={rolling ? 'Pause prompter' : 'Start prompter'}
+        >
+          {rolling ? '⏸ Pause' : transport === 'paused' ? '▶ Resume' : '▶ Start'}
+        </button>
+        <button type="button" onClick={controller.restart} aria-label="Restart prompter">
+          ⟲ Restart
+        </button>
+      </span>
+
+      <span className="squisq-teleprompter-group">
+        <label htmlFor="squisq-prompter-countdown">Countdown</label>
+        <select
+          id="squisq-prompter-countdown"
+          value={prefs.countdownSec}
+          onChange={(e) => setPrefs({ countdownSec: Number(e.target.value) as 0 | 3 | 5 | 10 })}
+        >
+          <option value={0}>Off</option>
+          <option value={3}>3s</option>
+          <option value={5}>5s</option>
+          <option value={10}>10s</option>
+        </select>
+      </span>
+
+      <span className="squisq-teleprompter-group">
+        <label htmlFor="squisq-prompter-wpm">Speed</label>
+        <input
+          id="squisq-prompter-wpm"
+          type="range"
+          min={80}
+          max={260}
+          step={5}
+          value={prefs.baseWpm}
+          onChange={(e) => setPrefs({ baseWpm: Number(e.target.value) })}
+        />
+        <span aria-live="off">{prefs.baseWpm} wpm</span>
+      </span>
+
+      <span className="squisq-teleprompter-group">
+        <button
+          type="button"
+          aria-pressed={prefs.voiceTracking}
+          onClick={() => {
+            const next = !prefs.voiceTracking;
+            setPrefs({ voiceTracking: next });
+            if (next && mic.status === 'idle') void mic.start(prefs.micDeviceId);
+            if (!next && mic.status !== 'idle') mic.stop();
+          }}
+          title="Match the prompter speed to your voice (halts when you stop speaking)"
+        >
+          🎙 Voice pace
+        </button>
+        {prefs.voiceTracking ? (
+          <>
+            <label htmlFor="squisq-prompter-sensitivity" title="Voice detection sensitivity">
+              Sens.
+            </label>
+            <input
+              id="squisq-prompter-sensitivity"
+              type="range"
+              min={0}
+              max={1}
+              step={0.05}
+              value={prefs.vadSensitivity}
+              onChange={(e) => setPrefs({ vadSensitivity: Number(e.target.value) })}
+              style={{ width: 70 }}
+            />
+            <select
+              aria-label="Microphone"
+              value={prefs.micDeviceId ?? ''}
+              onChange={(e) => setPrefs({ micDeviceId: e.target.value || null })}
+            >
+              <option value="">Default mic</option>
+              {mic.devices.map((device) => (
+                <option key={device.deviceId} value={device.deviceId}>
+                  {device.label || `Mic ${device.deviceId.slice(0, 6)}`}
+                </option>
+              ))}
+            </select>
+            <span
+              className={`squisq-teleprompter-meter${controller.voiceActive ? ' squisq-teleprompter-meter--voice' : ''}`}
+              role="meter"
+              aria-label="Mic level"
+              aria-valuemin={0}
+              aria-valuemax={1}
+              aria-valuenow={Math.round(controller.micLevel * 100) / 100}
+            >
+              <span
+                className="squisq-teleprompter-meter-fill"
+                style={{ width: `${Math.round(controller.micLevel * 100)}%` }}
+              />
+            </span>
+            {mic.status === 'error' ? (
+              <span title={mic.error?.message ?? 'Microphone unavailable'}>
+                ⚠ mic unavailable — constant speed
+              </span>
+            ) : null}
+          </>
+        ) : null}
+      </span>
+
+      <span className="squisq-teleprompter-group">
+        <label htmlFor="squisq-prompter-fontsize">Aa</label>
+        <input
+          id="squisq-prompter-fontsize"
+          type="range"
+          min={28}
+          max={96}
+          step={2}
+          value={prefs.fontSizePx}
+          onChange={(e) => setPrefs({ fontSizePx: Number(e.target.value) })}
+          style={{ width: 80 }}
+          aria-label="Prompter font size"
+        />
+        <button
+          type="button"
+          aria-pressed={prefs.mirrored}
+          onClick={() => setPrefs({ mirrored: !prefs.mirrored })}
+          title="Mirror for beam-splitter teleprompter rigs (M)"
+        >
+          ⇋ Mirror
+        </button>
+        <button
+          type="button"
+          aria-pressed={prefs.lineGuide}
+          onClick={() => setPrefs({ lineGuide: !prefs.lineGuide })}
+          title="Eye-line guide"
+        >
+          ▸ Guide
+        </button>
+      </span>
+
+      {recordSlot}
+
+      {float.supportedTiers.length > 0 ? (
+        <span className="squisq-teleprompter-group" style={{ marginLeft: 'auto' }}>
+          {float.isOpen ? (
+            <button type="button" onClick={float.close}>
+              ⇤ Bring back
+            </button>
+          ) : (
+            <>
+              {float.supportedTiers.length > 1 ? (
+                <select
+                  aria-label="Float mode"
+                  data-testid="teleprompter-float-tier"
+                  defaultValue={float.supportedTiers[0]}
+                  id="squisq-prompter-float-tier"
+                >
+                  {float.supportedTiers.map((tier) => (
+                    <option key={tier} value={tier}>
+                      {TIER_LABELS[tier]}
+                    </option>
+                  ))}
+                </select>
+              ) : null}
+              <button
+                type="button"
+                onClick={() => {
+                  const select = document.getElementById(
+                    'squisq-prompter-float-tier',
+                  ) as HTMLSelectElement | null;
+                  const preferred = (select?.value as FloatTier | undefined) ?? undefined;
+                  void float.open(preferred);
+                }}
+                title="Pop the prompter out so it can sit next to your camera"
+              >
+                ⇱ Pop out
+              </button>
+            </>
+          )}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/teleprompter/TeleprompterSelfView.tsx

@@ -0,0 +1,22 @@
+/**
+ * Small corner self-view shown while recording with the camera on.
+ */
+
+import { useRef } from 'react';
+import { useStreamPreview } from '../recorder/hooks/useStreamPreview';
+
+export function TeleprompterSelfView({ stream }: { stream: MediaStream | null }) {
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  useStreamPreview(videoRef, stream);
+  if (!stream) return null;
+  return (
+    <video
+      ref={videoRef}
+      className="squisq-teleprompter-selfview"
+      muted
+      playsInline
+      autoPlay
+      data-testid="teleprompter-selfview"
+    />
+  );
+}

package/src/teleprompter/TeleprompterSurface.tsx

@@ -0,0 +1,267 @@
+/**
+ * The teleprompter script surface — pure presentational and portal-able.
+ *
+ * Zero context reads: everything arrives via props, so the same element
+ * renders docked, inside a Document-PiP window, or in a popup. Two
+ * performance-critical details:
+ *
+ * 1. The token spans render ONCE per script/font change (memoized
+ *    column). The active-word highlight and the smooth scroll are
+ *    applied imperatively from a rAF loop — re-rendering thousands of
+ *    spans through React at 15 Hz would jank.
+ * 2. The rAF loop is requested on the surface's OWN window
+ *    (`ownerDocument.defaultView`), not the opener — a Document-PiP
+ *    window keeps animating while the main window is occluded. Mount
+ *    with a `key` per float target so the loop rebinds on window moves.
+ */
+
+import { memo, useEffect, useMemo, useRef } from 'react';
+import type { MouseEvent as ReactMouseEvent } from 'react';
+import type { Theme } from '@bendyline/squisq/schemas';
+import type { NarrationScript } from '@bendyline/squisq/narration';
+import {
+  EYE_LINE_FRACTION,
+  measureTokenLines,
+  stepScroll,
+  targetOffsetFor,
+  type TokenLineMap,
+} from './scrollModel';
+import { ensureTeleprompterStyles, prompterVarsFromTheme } from './teleprompterTheme';
+
+export 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;
+}
+
+interface Paragraph {
+  key: string;
+  tokenIndexes: number[];
+}
+
+interface BlockGroup {
+  blockId: string;
+  heading?: string;
+  paragraphs: Paragraph[];
+}
+
+function groupScript(script: NarrationScript): BlockGroup[] {
+  return script.blocks.map((range) => {
+    const paragraphs: Paragraph[] = [];
+    let current: number[] = [];
+    for (let i = range.tokenStart; i < range.tokenEnd; i++) {
+      current.push(i);
+      if (script.tokens[i].pauseAfter >= 2 && i < range.tokenEnd - 1) {
+        paragraphs.push({ key: `${range.blockId}-${paragraphs.length}`, tokenIndexes: current });
+        current = [];
+      }
+    }
+    if (current.length > 0) {
+      paragraphs.push({ key: `${range.blockId}-${paragraphs.length}`, tokenIndexes: current });
+    }
+    const group: BlockGroup = { blockId: range.blockId, paragraphs };
+    if (range.heading !== undefined) group.heading = range.heading;
+    return group;
+  });
+}
+
+/** The static token column — memoized so wordPos updates never re-render it. */
+const ScriptColumn = memo(function ScriptColumn({
+  script,
+  compact,
+}: {
+  script: NarrationScript;
+  compact: boolean;
+}) {
+  const groups = useMemo(() => groupScript(script), [script]);
+  return (
+    <>
+      {groups.map((group) => (
+        <section key={group.blockId} data-block-id={group.blockId}>
+          {!compact && group.heading ? (
+            <span className="squisq-teleprompter-block-marker">{group.heading}</span>
+          ) : null}
+          {group.paragraphs.map((paragraph) => (
+            <p key={paragraph.key} className="squisq-teleprompter-para">
+              {paragraph.tokenIndexes.map((idx) => (
+                <span key={idx} className="squisq-teleprompter-word" data-token-idx={idx}>
+                  {script.tokens[idx].text}{' '}
+                </span>
+              ))}
+            </p>
+          ))}
+        </section>
+      ))}
+    </>
+  );
+});
+
+export function TeleprompterSurface({
+  script,
+  wordPos,
+  fontSizePx,
+  mirrored,
+  lineGuide,
+  countdownRemaining,
+  recordingIndicator,
+  theme,
+  compact = false,
+  onSeekToken,
+}: TeleprompterSurfaceProps) {
+  const surfaceRef = useRef<HTMLDivElement | null>(null);
+  const columnRef = useRef<HTMLDivElement | null>(null);
+  const wordPosRef = useRef(wordPos);
+  wordPosRef.current = wordPos;
+
+  const vars = useMemo(() => prompterVarsFromTheme(theme), [theme]);
+
+  // Inject the shared stylesheet into whichever document hosts us.
+  useEffect(() => {
+    const doc = surfaceRef.current?.ownerDocument;
+    if (doc) ensureTeleprompterStyles(doc);
+  }, []);
+
+  // Imperative highlight + smooth scroll on the surface's own window.
+  useEffect(() => {
+    const surface = surfaceRef.current;
+    const column = columnRef.current;
+    if (!surface || !column) return;
+    const win = surface.ownerDocument.defaultView ?? window;
+
+    let lines: TokenLineMap | null = null;
+    let spans: HTMLElement[] = [];
+    let activeIdx = -1;
+    let offset = 0;
+    let lastTime = performance.now();
+    let raf = 0;
+
+    // Map each token index to the token that should be highlighted when the
+    // prompter is on it: the nearest spoken word at or before it (falling
+    // forward for leading punctuation). Keeps the active-word marker off
+    // standalone punctuation as the cursor glides across it.
+    const tokens = script.tokens;
+    const spokenAt = new Int32Array(tokens.length);
+    let lastSpoken = -1;
+    for (let i = 0; i < tokens.length; i++) {
+      if (tokens[i].spoken) lastSpoken = i;
+      spokenAt[i] = lastSpoken;
+    }
+    let firstSpoken = -1;
+    for (let i = 0; i < tokens.length; i++) {
+      if (tokens[i].spoken) {
+        firstSpoken = i;
+        break;
+      }
+    }
+    for (let i = 0; i < tokens.length && spokenAt[i] === -1; i++) spokenAt[i] = firstSpoken;
+
+    const remeasure = () => {
+      lines = measureTokenLines(column);
+      spans = Array.from(column.querySelectorAll<HTMLElement>('[data-token-idx]'));
+    };
+    remeasure();
+
+    const applyHighlight = (nextIdx: number) => {
+      if (nextIdx === activeIdx) return;
+      const lo = Math.min(activeIdx, nextIdx);
+      const hi = Math.max(activeIdx, nextIdx);
+      for (let i = Math.max(0, lo); i <= hi && i < spans.length; i++) {
+        const span = spans[i];
+        if (!span) continue;
+        span.classList.toggle('squisq-teleprompter-word--active', i === nextIdx);
+        span.classList.toggle('squisq-teleprompter-word--read', i < nextIdx);
+      }
+      activeIdx = nextIdx;
+    };
+
+    const loop = (now: number) => {
+      const dtMs = now - lastTime;
+      lastTime = now;
+      const pos = wordPosRef.current;
+      const clampedIdx = Math.min(Math.max(Math.floor(pos), 0), spans.length - 1);
+      // Snap the highlight off punctuation onto the nearest spoken word.
+      const highlightIdx =
+        clampedIdx < spokenAt.length && spokenAt[clampedIdx] >= 0
+          ? spokenAt[clampedIdx]
+          : clampedIdx;
+      if (spans.length > 0) applyHighlight(highlightIdx);
+      if (lines) {
+        const target = targetOffsetFor(pos, lines, surface.clientHeight);
+        offset = stepScroll(offset, target, dtMs);
+        column.style.transform = `translateY(${-offset}px)`;
+      }
+      raf = win.requestAnimationFrame(loop);
+    };
+    raf = win.requestAnimationFrame(loop);
+
+    // The opener's ResizeObserver observing a same-cluster window's
+    // element is fine; only rAF must belong to the surface's window.
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(remeasure) : null;
+    resizeObserver?.observe(surface);
+
+    return () => {
+      win.cancelAnimationFrame(raf);
+      resizeObserver?.disconnect();
+    };
+    // fontSizePx/compact change the layout → remeasure via effect rerun.
+  }, [script, fontSizePx, compact]);
+
+  const handleClick = onSeekToken
+    ? (event: ReactMouseEvent<HTMLDivElement>) => {
+        const target = event.target as HTMLElement | null;
+        const span = target?.closest<HTMLElement>('[data-token-idx]');
+        if (!span) return;
+        const idx = Number(span.dataset.tokenIdx);
+        if (Number.isFinite(idx)) onSeekToken(idx);
+      }
+    : undefined;
+
+  return (
+    <div
+      ref={surfaceRef}
+      className={`squisq-teleprompter-surface${mirrored ? ' squisq-teleprompter-surface--mirrored' : ''}`}
+      style={{ ...vars, fontSize: `${fontSizePx}px` }}
+      data-testid="teleprompter-surface"
+    >
+      <div className="squisq-teleprompter-flip">
+        <div
+          ref={columnRef}
+          className="squisq-teleprompter-scroll"
+          style={compact ? { padding: '30vh 5% 60vh' } : undefined}
+          onClick={handleClick}
+        >
+          <ScriptColumn script={script} compact={compact} />
+        </div>
+      </div>
+      {lineGuide ? (
+        <>
+          <div
+            className="squisq-teleprompter-guide-band"
+            style={{ top: `calc(${EYE_LINE_FRACTION * 100}% - 0.75em)`, height: '1.5em' }}
+          />
+          <div
+            className="squisq-teleprompter-line-guide"
+            style={{ top: `calc(${EYE_LINE_FRACTION * 100}% - 0.75em)`, height: '1.5em' }}
+          />
+        </>
+      ) : null}
+      {countdownRemaining !== null ? (
+        <div className="squisq-teleprompter-countdown">
+          <span className="squisq-teleprompter-countdown-digit">{countdownRemaining}</span>
+        </div>
+      ) : null}
+      {recordingIndicator ? <div className="squisq-teleprompter-recdot" /> : null}
+    </div>
+  );
+}