@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/recorder/RecorderModal.tsx

@@ -12,7 +12,8 @@
  * doc parse.
  *
  * Visual conventions match `VideoExportModal` from `@bendyline/squisq-
- * video-react` (cream / gold palette, inline styles, no external CSS).
+ * video-react`, with inline theme tokens so the body-level portal follows
+ * the editor's light/dark chrome scheme.
  */
 
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from 'react';
@@ -25,6 +26,8 @@ import { buildTimingJson, encodeTimingJson, timingPathFor } from './timingJson.j
 
 // ── Types ──────────────────────────────────────────────────────────
 
+export type RecorderColorScheme = 'light' | 'dark';
+
 export interface RecorderModalProps {
   /** Required — recordings are written here. */
   mediaProvider: MediaProvider;
@@ -37,6 +40,8 @@ export interface RecorderModalProps {
   container?: ContentContainer | null;
   /** Initial capture source. Defaults to `'mic'` (narration). */
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme. Defaults to `'light'`. */
+  colorScheme?: RecorderColorScheme;
   /** Called after the modal is dismissed (save or cancel). */
   onClose: () => void;
   /**
@@ -77,9 +82,34 @@ const overlayStyle: CSSProperties = {
   zIndex: 10000,
 };
 
+/**
+ * The recorder is normally portaled to `document.body`, outside the editor
+ * shell's CSS-variable scope. Copy the scheme onto a fresh scope and provide
+ * inline fallbacks so the standalone RecorderModal/RecorderButton exports are
+ * themed even when a host has not loaded the editor stylesheet.
+ */
+function recorderThemeStyle(colorScheme: RecorderColorScheme): CSSProperties {
+  const dark = colorScheme === 'dark';
+  return {
+    colorScheme,
+    '--squisq-recorder-surface': `var(--squisq-bg, ${dark ? '#1f2937' : '#fffdf7'})`,
+    '--squisq-recorder-input': `var(--squisq-input-bg, ${dark ? '#374151' : '#fff'})`,
+    '--squisq-recorder-border': `var(--squisq-border, ${dark ? '#4b5563' : '#c9b98a'})`,
+    '--squisq-recorder-text': `var(--squisq-text, ${dark ? '#e5e7eb' : '#4a3c1f'})`,
+    '--squisq-recorder-muted': `var(--squisq-text-muted, ${dark ? '#9ca3af' : '#5a4a2a'})`,
+    '--squisq-recorder-accent': 'var(--squisq-accent, #8b6914)',
+    '--squisq-recorder-accent-text': '#fff',
+    '--squisq-recorder-danger': dark ? '#dc4c4c' : '#b33a3a',
+    '--squisq-recorder-danger-border': dark ? '#ef6a6a' : '#902929',
+    '--squisq-recorder-error-bg': dark ? '#3f151b' : '#fceeee',
+    '--squisq-recorder-error-border': dark ? '#7f1d1d' : '#d88a8a',
+    '--squisq-recorder-error-text': dark ? '#fecdd3' : '#8c2a2a',
+  } as CSSProperties;
+}
+
 const modalStyle: CSSProperties = {
-  background: '#FFFDF7',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-surface)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
   padding: '24px 28px',
   width: 'min(560px, calc(100vw - 48px))',
@@ -87,14 +117,14 @@ const modalStyle: CSSProperties = {
   overflowY: 'auto',
   boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
   fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: '#4a3c1f',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const titleStyle: CSSProperties = {
   margin: '0 0 16px 0',
   fontSize: 18,
   fontWeight: 600,
-  color: '#2d2310',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const labelStyle: CSSProperties = {
@@ -102,7 +132,7 @@ const labelStyle: CSSProperties = {
   fontSize: 13,
   fontWeight: 500,
   marginBottom: 4,
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-text)',
 };
 
 const inputStyle: CSSProperties = {
@@ -110,10 +140,10 @@ const inputStyle: CSSProperties = {
   padding: '6px 8px',
   fontSize: 13,
   fontFamily: 'inherit',
-  border: '1px solid #c9b98a',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
-  background: '#fff',
-  color: '#4a3c1f',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
   marginBottom: 12,
   boxSizing: 'border-box',
 };
@@ -130,9 +160,9 @@ const btnPrimary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#8B6914',
-  color: '#fff',
-  border: '1px solid #7a5c10',
+  background: 'var(--squisq-recorder-accent)',
+  color: 'var(--squisq-recorder-accent-text)',
+  border: '1px solid var(--squisq-recorder-accent)',
   borderRadius: 0,
 };
 
@@ -142,16 +172,16 @@ const btnSecondary: CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#E8DFC6',
-  color: '#4a3c1f',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 0,
 };
 
 const btnDanger: CSSProperties = {
   ...btnPrimary,
-  background: '#B33A3A',
-  borderColor: '#902929',
+  background: 'var(--squisq-recorder-danger)',
+  borderColor: 'var(--squisq-recorder-danger-border)',
 };
 
 const toggleRowStyle: CSSProperties = {
@@ -166,17 +196,17 @@ const toggleBase: CSSProperties = {
   fontFamily: 'inherit',
   cursor: 'pointer',
   background: 'transparent',
-  color: '#5a4a2a',
-  border: '1px solid #c9b98a',
+  color: 'var(--squisq-recorder-text)',
+  border: '1px solid var(--squisq-recorder-border)',
   borderRadius: 999,
 };
 
 const toggleActive: CSSProperties = {
   ...toggleBase,
-  color: '#fffdf5',
+  color: 'var(--squisq-recorder-accent-text)',
   fontWeight: 600,
-  background: '#8B6914',
-  borderColor: '#8B6914',
+  background: 'var(--squisq-recorder-accent)',
+  borderColor: 'var(--squisq-recorder-accent)',
 };
 
 const previewBoxStyle: CSSProperties = {
@@ -196,21 +226,21 @@ const previewBoxStyle: CSSProperties = {
 const audioMeterStyle: CSSProperties = {
   width: '100%',
   height: 56,
-  background: '#F2EBD9',
-  border: '1px solid #c9b98a',
+  background: 'var(--squisq-recorder-input)',
+  border: '1px solid var(--squisq-recorder-border)',
   marginBottom: 12,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  color: '#5a4a2a',
+  color: 'var(--squisq-recorder-muted)',
   fontSize: 13,
   fontVariantNumeric: 'tabular-nums',
 };
 
 const errorStyle: CSSProperties = {
-  background: '#FCEEEE',
-  border: '1px solid #D88A8A',
-  color: '#8C2A2A',
+  background: 'var(--squisq-recorder-error-bg)',
+  border: '1px solid var(--squisq-recorder-error-border)',
+  color: 'var(--squisq-recorder-error-text)',
   padding: '8px 10px',
   fontSize: 13,
   marginBottom: 12,
@@ -223,6 +253,20 @@ const buttonRowStyle: CSSProperties = {
   marginTop: 8,
 };
 
+const summaryStyle: CSSProperties = {
+  margin: '0 0 12px 0',
+  fontSize: 12,
+  color: 'var(--squisq-recorder-muted)',
+};
+
+const recordingStatusStyle: CSSProperties = {
+  fontSize: 13,
+  fontVariantNumeric: 'tabular-nums',
+  marginBottom: 12,
+  color: 'var(--squisq-recorder-accent)',
+  fontWeight: 600,
+};
+
 // ── Helpers ────────────────────────────────────────────────────────
 
 function formatDurationMs(ms: number): string {
@@ -293,6 +337,7 @@ export function RecorderModal({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onClose,
   onSave,
 }: RecorderModalProps) {
@@ -471,7 +516,14 @@ export function RecorderModal({
   };
 
   return (
-    <div style={overlayStyle} role="dialog" aria-modal="true" aria-label="Record media">
+    <div
+      className="squisq-editor-shell squisq-recorder-overlay"
+      data-theme={colorScheme}
+      style={{ ...overlayStyle, ...recorderThemeStyle(colorScheme) }}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Record media"
+    >
       <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
         <h2 style={titleStyle}>Record media</h2>
 
@@ -493,9 +545,7 @@ export function RecorderModal({
           })}
         </div>
 
-        <p style={{ margin: '0 0 12px 0', fontSize: 12, color: '#5a4a2a' }}>
-          {captureSummary(micOn, video)}
-        </p>
+        <p style={summaryStyle}>{captureSummary(micOn, video)}</p>
 
         {recorder.error && <div style={errorStyle}>{recorder.error.message}</div>}
         {saveError && <div style={errorStyle}>{saveError}</div>}
@@ -579,6 +629,7 @@ export function RecorderModal({
           >
             <input
               type="checkbox"
+              style={{ accentColor: 'var(--squisq-recorder-accent)' }}
               checked={includeSystemAudio}
               onChange={(e) => setIncludeSystemAudio(e.target.checked)}
               disabled={recorder.state === 'recording' || recorder.state === 'requesting'}
@@ -602,15 +653,7 @@ export function RecorderModal({
 
         {/* Live duration during recording */}
         {recorder.state === 'recording' && !isAudioOnly && (
-          <div
-            style={{
-              fontSize: 13,
-              fontVariantNumeric: 'tabular-nums',
-              marginBottom: 12,
-              color: '#8B6914',
-              fontWeight: 600,
-            }}
-          >
+          <div style={recordingStatusStyle}>
             ● Recording {formatDurationMs(recorder.durationMs)}
           </div>
         )}

package/src/recorder/RecorderPanel.tsx

@@ -12,7 +12,11 @@ import { useCallback, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
-import { RecorderModal, type RecorderSaveResult } from './RecorderModal.js';
+import {
+  RecorderModal,
+  type RecorderColorScheme,
+  type RecorderSaveResult,
+} from './RecorderModal.js';
 import { Icon } from '../Icon';
 import type { RecorderSource } from './hooks/useMediaRecorder.js';
 
@@ -20,6 +24,8 @@ export interface RecorderPanelProps {
   mediaProvider: MediaProvider;
   container?: ContentContainer | null;
   initialMode?: RecorderSource;
+  /** Light/dark chrome scheme copied onto the portaled modal. */
+  colorScheme?: RecorderColorScheme;
   onSave?: (result: RecorderSaveResult) => void;
   /** ARIA / tooltip label. Defaults to `'Record media'`. */
   tooltip?: string;
@@ -31,6 +37,7 @@ export function RecorderPanel({
   mediaProvider,
   container = null,
   initialMode = 'mic',
+  colorScheme = 'light',
   onSave,
   tooltip = 'Record media',
   className,
@@ -57,6 +64,7 @@ export function RecorderPanel({
             mediaProvider={mediaProvider}
             container={container}
             initialMode={initialMode}
+            colorScheme={colorScheme}
             onClose={handleClose}
             onSave={(result) => {
               onSave?.(result);

package/src/recorder/hooks/useMediaRecorder.ts

@@ -173,6 +173,9 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
   const startTimestampRef = useRef<number | null>(null);
   const tickerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const stopResolversRef = useRef<Array<(blob: Blob | null) => void>>([]);
+  const stopPromiseRef = useRef<Promise<Blob | null> | null>(null);
+  const requestPromiseRef = useRef<Promise<void> | null>(null);
+  const lifecycleRef = useRef(0);
 
   // Stable copy of options for callbacks that read them late. Re-evaluated
   // each render, but each callback closes over the ref so we don't have
@@ -222,9 +225,13 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
   }, [clearTicker]);
 
   const cancel = useCallback(() => {
+    lifecycleRef.current += 1;
     const rec = recorderRef.current;
     if (rec && rec.state !== 'inactive') {
       try {
+        rec.ondataavailable = null;
+        rec.onstop = null;
+        rec.onerror = null;
         rec.stop();
       } catch {
         // Ignore — we're tearing down anyway.
@@ -237,6 +244,8 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
     startTimestampRef.current = null;
     // Any in-flight stop() promises won't get a blob.
     stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+    stopPromiseRef.current = null;
+    requestPromiseRef.current = null;
     setBlob(null);
     setDurationMs(0);
     setError(null);
@@ -244,66 +253,89 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
   }, [clearTicker, releaseStream]);
 
   const request = useCallback(async () => {
+    if (requestPromiseRef.current) return requestPromiseRef.current;
+    if (recorderRef.current?.stream.active) return;
     if (!supportsMediaRecorder()) {
       const err = new Error('MediaRecorder is not supported in this environment.');
       setError(err);
       setState('error');
       throw err;
     }
-    if (state === 'recording' || state === 'stopping') {
-      // Don't start a parallel acquisition while one is in flight.
-      return;
-    }
-    setError(null);
-    setState('requesting');
-    try {
-      const source = optionsRef.current.source ?? 'mic';
-      const { stream: nextStream, dispose } = await acquireStream(source, optionsRef.current);
-      const resolved = resolveFormat(captureKindFor(source), optionsRef.current.mimeType);
-      const recorderOptions: MediaRecorderOptions = {};
-      if (resolved.mimeType) recorderOptions.mimeType = resolved.mimeType;
-      if (optionsRef.current.bitsPerSecond) {
-        recorderOptions.bitsPerSecond = optionsRef.current.bitsPerSecond;
-      }
-      const recorder = new MediaRecorder(nextStream, recorderOptions);
+    const lifecycle = ++lifecycleRef.current;
+    const requestPromise = (async () => {
+      setError(null);
+      setState('requesting');
+      let acquired: { stream: MediaStream; dispose: () => void } | null = null;
+      try {
+        const source = optionsRef.current.source ?? 'mic';
+        acquired = await acquireStream(source, optionsRef.current);
+        const { stream: nextStream, dispose } = acquired;
+        if (lifecycle !== lifecycleRef.current) {
+          nextStream.getTracks().forEach((track) => track.stop());
+          dispose();
+          return;
+        }
+        const resolved = resolveFormat(captureKindFor(source), optionsRef.current.mimeType);
+        const recorderOptions: MediaRecorderOptions = {};
+        if (resolved.mimeType) recorderOptions.mimeType = resolved.mimeType;
+        if (optionsRef.current.bitsPerSecond) {
+          recorderOptions.bitsPerSecond = optionsRef.current.bitsPerSecond;
+        }
+        const recorder = new MediaRecorder(nextStream, recorderOptions);
 
-      recorder.ondataavailable = (e) => {
-        if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
-      };
-      recorder.onstop = () => {
-        // The recorded MIME type is authoritative once data is in hand —
-        // some browsers down-negotiate the format (e.g. drop codec hint).
-        const recordedType = recorder.mimeType || resolved.mimeType || 'application/octet-stream';
-        const finalBlob = new Blob(chunksRef.current, { type: recordedType });
-        chunksRef.current = [];
-        setBlob(finalBlob);
-        setState('stopped');
-        clearTicker();
-        stopResolversRef.current.splice(0).forEach((resolve) => resolve(finalBlob));
-      };
-      recorder.onerror = (event) => {
-        const detail = (event as unknown as { error?: DOMException }).error;
-        const err = detail instanceof Error ? detail : new Error('Recorder error');
-        setError(err);
-        setState('error');
-        clearTicker();
-        stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
-      };
+        recorder.ondataavailable = (e) => {
+          if (e.data && e.data.size > 0) chunksRef.current.push(e.data);
+        };
+        recorder.onstop = () => {
+          if (recorderRef.current !== recorder || lifecycle !== lifecycleRef.current) return;
+          // The recorded MIME type is authoritative once data is in hand —
+          // some browsers down-negotiate the format (e.g. drop codec hint).
+          const recordedType = recorder.mimeType || resolved.mimeType || 'application/octet-stream';
+          const finalBlob = new Blob(chunksRef.current, { type: recordedType });
+          chunksRef.current = [];
+          setBlob(finalBlob);
+          setState('stopped');
+          clearTicker();
+          stopResolversRef.current.splice(0).forEach((resolve) => resolve(finalBlob));
+          stopPromiseRef.current = null;
+        };
+        recorder.onerror = (event) => {
+          if (recorderRef.current !== recorder || lifecycle !== lifecycleRef.current) return;
+          const detail = (event as unknown as { error?: DOMException }).error;
+          const err = detail instanceof Error ? detail : new Error('Recorder error');
+          setError(err);
+          setState('error');
+          clearTicker();
+          stopResolversRef.current.splice(0).forEach((resolve) => resolve(null));
+          stopPromiseRef.current = null;
+        };
 
-      recorderRef.current = recorder;
-      disposeStreamRef.current = dispose;
-      setStream(nextStream);
-      setFormat(resolved);
-      setBlob(null);
-      setDurationMs(0);
-      setState('ready');
-    } catch (err: unknown) {
-      const normalized = err instanceof Error ? err : new Error('Stream acquisition failed');
-      setError(normalized);
-      setState('error');
-      throw normalized;
-    }
-  }, [state, clearTicker]);
+        recorderRef.current = recorder;
+        disposeStreamRef.current = dispose;
+        setStream(nextStream);
+        setFormat(resolved);
+        setBlob(null);
+        setDurationMs(0);
+        setState('ready');
+        acquired = null;
+      } catch (err: unknown) {
+        if (acquired) {
+          acquired.stream.getTracks().forEach((track) => track.stop());
+          acquired.dispose();
+        }
+        const normalized = err instanceof Error ? err : new Error('Stream acquisition failed');
+        if (lifecycle === lifecycleRef.current) {
+          setError(normalized);
+          setState('error');
+        }
+        throw normalized;
+      } finally {
+        if (lifecycle === lifecycleRef.current) requestPromiseRef.current = null;
+      }
+    })();
+    requestPromiseRef.current = requestPromise;
+    return requestPromise;
+  }, [clearTicker]);
 
   const start = useCallback(() => {
     const rec = recorderRef.current;
@@ -329,12 +361,13 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
   }, [clearTicker]);
 
   const stop = useCallback((): Promise<Blob | null> => {
+    if (stopPromiseRef.current) return stopPromiseRef.current;
     const rec = recorderRef.current;
     if (!rec || rec.state === 'inactive') {
       return Promise.resolve(blob);
     }
     setState('stopping');
-    return new Promise<Blob | null>((resolve) => {
+    const stopPromise = new Promise<Blob | null>((resolve) => {
       stopResolversRef.current.push(resolve);
       try {
         rec.stop();
@@ -346,6 +379,11 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
         stopResolversRef.current.splice(0).forEach((r) => r(null));
       }
     });
+    stopPromiseRef.current = stopPromise;
+    void stopPromise.finally(() => {
+      if (stopPromiseRef.current === stopPromise) stopPromiseRef.current = null;
+    });
+    return stopPromise;
   }, [blob, clearTicker]);
 
   // Final unmount cleanup — make sure we don't leak the camera light /
@@ -360,9 +398,14 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
   useEffect(() => {
     const pendingResolvers = stopResolversRef.current;
     return () => {
+      lifecycleRef.current += 1;
+      requestPromiseRef.current = null;
       const rec = recorderRef.current;
       if (rec && rec.state !== 'inactive') {
         try {
+          rec.ondataavailable = null;
+          rec.onstop = null;
+          rec.onerror = null;
           rec.stop();
         } catch {
           // ignore
@@ -371,6 +414,7 @@ export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMedi
       releaseStream();
       clearTicker();
       pendingResolvers.splice(0).forEach((resolve) => resolve(null));
+      stopPromiseRef.current = null;
     };
   }, [releaseStream, clearTicker]);
 

package/src/resolveBlockVisual.ts

@@ -1,6 +1,6 @@
 /**
  * resolveBlockVisual — resolves a doc block into a renderable card (with
- * `layers`) via the shared preview pipeline (`buildPreviewDoc` → `getLayers`).
+ * `layers`) via the shared preview pipeline and canonical materializer.
  *
  * Kept in its own module (rather than alongside `BlockThumbnail` in
  * `TimelineBlockPreview.tsx`) so that component file exports only components,
@@ -8,7 +8,7 @@
  */
 
 import type { Block, DocBlock, Doc, ViewportConfig, Theme } from '@bendyline/squisq/schemas';
-import { getLayers, type RenderContext } from '@bendyline/squisq/doc';
+import { materializeBlockLayers, type MaterializeBlockLayersOptions } from '@bendyline/squisq/doc';
 import { buildPreviewDoc } from './buildPreviewDoc';
 
 /**
@@ -24,8 +24,14 @@ export function resolveBlockVisual(
   try {
     const slide = buildPreviewDoc({ ...doc, blocks: [block] }).blocks[0] as DocBlock | undefined;
     if (!slide) return null;
-    const ctx: RenderContext = { blockIndex: 0, totalBlocks: 1, theme, viewport };
-    const layers = getLayers(slide, ctx);
+    const ctx: MaterializeBlockLayersOptions = {
+      blockIndex: 0,
+      totalBlocks: 1,
+      theme,
+      viewport,
+      customTemplates: doc.customTemplates,
+    };
+    const { layers } = materializeBlockLayers(slide, ctx);
     return { ...(slide as unknown as Block), layers };
   } catch {
     return null;