@bendyline/squisq-editor-react 1.6.1 → 2.0.0

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;

package/src/scene/Scene.tsx

@@ -23,7 +23,7 @@ import {
 } from 'react';
 import type { Layer } from '@bendyline/squisq/schemas';
 import type { SceneCommand, SceneEdge } from './commands/SceneCommand';
-import type { SceneTool, SceneToolContext } from './tools/SceneTool';
+import type { SceneInteractionState, SceneTool, SceneToolContext } from './tools/SceneTool';
 import { useScenePanZoom } from './hooks/useScenePanZoom';
 import { useSceneSelection } from './hooks/useSceneSelection';
 import { useSceneHitTest, layerBounds, type HitTestable } from './hooks/useSceneHitTest';
@@ -140,12 +140,21 @@ export function Scene(props: SceneProps) {
   // ── Pan/zoom + selection ────────────────────────────────────
   const panZoom = useScenePanZoom();
   const selection = useSceneSelection();
+  const setSceneSelection = selection.setSelection;
   const { hit } = useSceneHitTest();
+  const interaction = useRef<SceneInteractionState>({}).current;
 
-  // Surface selection upward so a host can drive a properties panel.
-  useEffect(() => {
-    onSelectionChange?.(selection.selection);
-  }, [selection.selection, onSelectionChange]);
+  // Surface selection in the originating interaction rather than a passive
+  // effect. Detached editor roots can then update their toolbar without
+  // forcing a flush from inside another component's lifecycle.
+  const setSelection = useCallback(
+    (ids: Iterable<string>) => {
+      const next = new Set(ids);
+      setSceneSelection(next);
+      onSelectionChange?.(next);
+    },
+    [setSceneSelection, onSelectionChange],
+  );
 
   // ── Hit-test cache ──────────────────────────────────────────
   const hitItems: HitTestable[] = useMemo(() => {
@@ -161,6 +170,7 @@ export function Scene(props: SceneProps) {
   // ── Tool context (rebuilt every render — cheap, no allocations in hot path) ──
   const ctx: SceneToolContext = useMemo(
     () => ({
+      interaction,
       viewport,
       transform: panZoom.transform,
       layers,
@@ -170,7 +180,7 @@ export function Scene(props: SceneProps) {
       screenToViewport: panZoom.screenToViewport,
       viewportToScreen: panZoom.viewportToScreen,
       hit: (p) => hit(p, hitItems),
-      setSelection: selection.setSelection,
+      setSelection,
       dispatch: onCommand,
       setActiveTool,
       beginTextEdit: textEdit.begin,
@@ -183,16 +193,17 @@ export function Scene(props: SceneProps) {
       layers,
       edges,
       selection.selection,
-      selection.setSelection,
+      setSelection,
       hitItems,
       hit,
       onCommand,
       setActiveTool,
       textEdit.begin,
+      interaction,
     ],
   );
-  // Mirror ctx in a ref so keyboard handlers attached to window read the
-  // latest selection without re-binding on every selection change.
+  // Mirror ctx in a ref so root keyboard handlers read the latest selection
+  // without re-binding on every selection change.
   const ctxRef = useRef(ctx);
   ctxRef.current = ctx;
 
@@ -220,12 +231,9 @@ export function Scene(props: SceneProps) {
     [panZoom],
   );
 
-  // Tools keep their drag state in module-level closures (so it survives
-  // outside React's render cycle). To make the live drag/resize preview
-  // *visible*, the Scene needs to re-render on every pointer-move while
-  // a gesture is in progress. We bump `dragTick` on pointer-down and on
-  // every move thereafter — cheap (one setState per move) and only fires
-  // while the user is actively interacting.
+  // Gesture state belongs to this Scene instance and lives outside React's
+  // render cycle. Bump `dragTick` while a pointer gesture is active so its
+  // live drag/resize preview is visible.
   const [, setDragTick] = useState(0);
   const pointerActive = useRef(false);
   const bumpTick = useCallback(() => setDragTick((t) => t + 1), []);
@@ -280,6 +288,27 @@ export function Scene(props: SceneProps) {
     [activeTool],
   );
 
+  const handlePointerCancel = useCallback(
+    (e: React.PointerEvent<SVGSVGElement>) => {
+      pointerActive.current = false;
+      isPanning.current = false;
+      panLast.current = null;
+      interaction.selectDrag = undefined;
+      interaction.connect = undefined;
+      (e.currentTarget as Element).releasePointerCapture?.(e.pointerId);
+      bumpTick();
+    },
+    [interaction, bumpTick],
+  );
+
+  useEffect(
+    () => () => {
+      interaction.selectDrag = undefined;
+      interaction.connect = undefined;
+    },
+    [interaction],
+  );
+
   const handleDoubleClick = useCallback(
     (e: React.MouseEvent<SVGSVGElement>) => {
       activeTool?.onDoubleClick?.(e, ctxRef.current);
@@ -387,8 +416,9 @@ export function Scene(props: SceneProps) {
   }, [containerSize, hitItems, panZoom]);
 
   // ── Render ──────────────────────────────────────────────────
-  const liveOffset = activeId === 'select' ? getActiveMoveOffset() : null;
-  const liveResize = activeId === 'select' ? getActiveResize() : null;
+  const liveOffset = activeId === 'select' ? getActiveMoveOffset(interaction) : null;
+  const liveResize = activeId === 'select' ? getActiveResize(interaction) : null;
+  const showSelectionHandles = activeTool?.hideSelectionHandles !== true;
 
   // Per-layer transform applied during an in-flight drag or resize so
   // the user sees the layer move/stretch in real time, not just on commit.
@@ -415,6 +445,32 @@ export function Scene(props: SceneProps) {
     return {};
   };
 
+  // A text box's font size is independent of its box size — a wide box exists
+  // precisely so a small caption can left/center/right-align within it. So
+  // when a text box is directly resized we reshape the box and re-align its
+  // text at the *unchanged* font, rather than scaling the glyphs with the box
+  // (the generic matrix path in `wrapperFor`, which would stretch the text and
+  // then snap it back to its real size on commit). Returns a clone positioned
+  // at the live-resize box, or null when `layer` isn't a text box being
+  // directly resized. Follower labels (drawing/diagram, whose font is derived
+  // from box height) are resized via their shape, not directly, so they never
+  // match here and keep the scale-with-box preview.
+  const liveResizedTextBox = (layer: Layer): Layer | null => {
+    if (!liveResize || liveResize.layerId !== layer.id || layer.type !== 'text') return null;
+    const b = liveResize.bounds;
+    return {
+      ...layer,
+      position: {
+        ...layer.position,
+        x: b.x,
+        y: b.y,
+        width: b.width,
+        height: b.height,
+        anchor: 'top-left',
+      },
+    };
+  };
+
   const handleHandlePointerDown = (e: React.PointerEvent<SVGElement>, corner: ResizeCorner) => {
     const id = selection.selection.values().next().value as string | undefined;
     if (!id) return;
@@ -426,7 +482,7 @@ export function Scene(props: SceneProps) {
     const sx = e.clientX - rect.left;
     const sy = e.clientY - rect.top;
     const startV = panZoom.screenToViewport(sx, sy);
-    beginHandleDrag({ layerId: id, corner, startV, startBounds: bounds });
+    beginHandleDrag({ layerId: id, corner, startV, startBounds: bounds }, interaction);
     (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
     // Mark a gesture as active so the Scene's pointer-move handler
     // triggers re-renders for the live resize preview.
@@ -448,27 +504,47 @@ export function Scene(props: SceneProps) {
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
         onDoubleClick={handleDoubleClick}
         onDragOver={onDrop ? handleDragOver : undefined}
         onDrop={onDrop ? handleDrop : undefined}
       >
         {/* Extras (e.g. diagram edges) render behind the layers so the
             cards visually clip edge endpoints. */}
-        {renderExtras?.(ctx)}
+        {renderExtras && <g className="squisq-scene-extras">{renderExtras(ctx)}</g>}
         {/* Layers — the Scene wraps each in a transformable <g> so a
             selected layer can show a live drag/resize preview without
             requiring the host to know about drag state. */}
-        {layers.map((layer) => (
-          <g key={layer.id} data-layer-id={layer.id} {...wrapperFor(layer)}>
-            {layerRenderer(layer, viewport)}
-          </g>
-        ))}
+        {layers.map((layer) => {
+          const layerClassName = `squisq-scene-layer squisq-scene-layer--${layer.type}`;
+          // Text boxes reshape (font-fixed) rather than scale during resize;
+          // everything else stretches via the group transform.
+          const resizedText = liveResizedTextBox(layer);
+          if (resizedText) {
+            return (
+              <g key={layer.id} className={layerClassName} data-layer-id={layer.id}>
+                {layerRenderer(resizedText, viewport)}
+              </g>
+            );
+          }
+          return (
+            <g
+              key={layer.id}
+              className={layerClassName}
+              data-layer-id={layer.id}
+              {...wrapperFor(layer)}
+            >
+              {layerRenderer(layer, viewport)}
+            </g>
+          );
+        })}
         <SceneSelection
           selection={selection.selection}
           hitItems={hitItems}
           liveOffset={liveOffset}
           liveResize={liveResize}
-          onHandlePointerDown={handleHandlePointerDown}
+          onHandlePointerDown={showSelectionHandles ? handleHandlePointerDown : undefined}
+          showHandles={showSelectionHandles}
         />
         {activeTool?.renderOverlay?.(ctx)}
       </SceneViewport>

package/src/scene/SceneBlockExtension.ts

@@ -20,6 +20,7 @@ import { createElement } from 'react';
 import type { Node as PMNode } from '@tiptap/pm/model';
 import { parsePandocAttrTokens } from '@bendyline/squisq/markdown';
 import { SceneBlockWidget, type SceneBlockMode } from './SceneBlockWidget';
+import type { SceneTextChannel } from './text/sceneTextChannel';
 
 /**
  * Stable identifier for a layout/drawing heading — used as part of the
@@ -27,24 +28,24 @@ import { SceneBlockWidget, type SceneBlockMode } from './SceneBlockWidget';
  * changes (drag/resize commits write into the heading's
  * `data-block-attrs`).
  */
-export function getHeadingKey(node: PMNode): string {
+export function getHeadingKey(node: PMNode, position?: number): string {
   const raw = (node.attrs as Record<string, unknown>).dataBlockAttrs;
   if (typeof raw === 'string' && raw.length > 0) {
     const attrs = parsePandocAttrTokens(raw);
-    if (attrs.id) return attrs.id;
+    if (attrs.id) return position == null ? attrs.id : `${attrs.id}@${position}`;
   }
   let text = '';
   node.content.forEach((child) => {
     if (child.isText) text += child.text ?? '';
   });
-  return (
+  const slug =
     text
       .toLowerCase()
       .replace(/[^\w\s-]/g, '')
       .replace(/[\s_]+/g, '-')
       .replace(/-+/g, '-')
-      .replace(/^-|-$/g, '') || 'block'
-  );
+      .replace(/^-|-$/g, '') || 'block';
+  return position == null ? slug : `${slug}@${position}`;
 }
 
 /**
@@ -63,7 +64,7 @@ export function findSceneHeadingPos(
     if (node.type.name !== 'heading') return;
     const attrs = node.attrs as { dataTemplate?: string };
     if (attrs.dataTemplate !== expectedTemplate) return;
-    if (getHeadingKey(node) === headingKey) {
+    if (getHeadingKey(node, pos) === headingKey) {
       found = pos;
       return false;
     }
@@ -82,7 +83,11 @@ interface SceneRoot {
   root: Root;
 }
 
-function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
+function buildDecorations(
+  state: EditorState,
+  editor: Editor,
+  textChannel?: SceneTextChannel,
+): DecorationSet {
   const decos: Decoration[] = [];
 
   state.doc.descendants((node, pos) => {
@@ -93,7 +98,7 @@ function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
     const parentDepth = attrs.level;
     const widgetPos = pos + node.nodeSize;
     const parentPos = pos;
-    const headingKey = getHeadingKey(node);
+    const headingKey = getHeadingKey(node, pos);
     decos.push(
       Decoration.widget(
         widgetPos,
@@ -112,6 +117,7 @@ function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
               fallbackParentPos: parentPos,
               mode,
               host: view.dom.parentElement ?? view.dom,
+              textChannel,
             }),
           );
 
@@ -161,6 +167,7 @@ function buildDecorations(state: EditorState, editor: Editor): DecorationSet {
 export interface SceneBlockExtensionOptions {
   /** When false, the extension is inert. */
   enabled?: boolean;
+  textChannel?: SceneTextChannel;
 }
 
 export const SceneBlockExtension = Extension.create<SceneBlockExtensionOptions>({
@@ -179,10 +186,10 @@ export const SceneBlockExtension = Extension.create<SceneBlockExtensionOptions>(
       new Plugin({
         key: KEY,
         state: {
-          init: (_config, state) => buildDecorations(state, editor),
+          init: (_config, state) => buildDecorations(state, editor, this.options.textChannel),
           apply: (tr, oldDecos, _oldState, newState) => {
             if (!tr.docChanged) return oldDecos;
-            return buildDecorations(newState, editor);
+            return buildDecorations(newState, editor, this.options.textChannel);
           },
         },
         props: {

package/src/scene/SceneBlockWidget.tsx

@@ -25,10 +25,12 @@ import { shapeIdFromLayerId } from './layers/shapeLayers';
 import { ShapePalette } from './ShapePalette';
 import { ScenePropsBar } from './ScenePropsBar';
 import { SceneBlockToolbar, type SceneBlockAction, type SceneAlignment } from './SceneBlockToolbar';
+import { SceneSideToolbar } from './SceneSideToolbar';
 import type { SceneTextEditConfig } from './text/sceneTextConfig';
 import { markdownToTiptap } from '../tiptapBridge';
 import { Icon } from '../Icon';
 import { DiagramMaximizedOverlay } from '../diagram/DiagramMaximizedOverlay';
+import type { SceneTextChannel } from './text/sceneTextChannel';
 
 export type SceneBlockMode = 'layout' | 'drawing';
 
@@ -39,6 +41,7 @@ interface SceneBlockWidgetProps {
   mode: SceneBlockMode;
   /** Host element for portal targeting (used by maximize overlay). */
   host?: HTMLElement | null;
+  textChannel?: SceneTextChannel;
 }
 
 // Default viewport for layout/drawing surfaces. Matches Squisq's 16:9
@@ -58,6 +61,7 @@ export function SceneBlockWidget({
   fallbackParentPos,
   mode,
   host,
+  textChannel,
 }: SceneBlockWidgetProps) {
   const [parentPos, setParentPos] = useState<number>(
     () => findSceneHeadingPos(editor, headingKey, mode) ?? fallbackParentPos,
@@ -88,6 +92,7 @@ export function SceneBlockWidget({
   dispatchRef.current = adapter.dispatch;
   const textConfig = useMemo<SceneTextEditConfig>(
     () => ({
+      channel: textChannel,
       resolveEditableId: (id) => {
         const l = layersRef.current.find((x) => x.id === id);
         return l && l.type === 'text' ? id : null;
@@ -113,7 +118,7 @@ export function SceneBlockWidget({
       // content is stored as the child sub-block's markdown body.
       level: isDrawing ? 'inline' : 'block',
     }),
-    [isDrawing],
+    [isDrawing, textChannel],
   );
 
   const [maximized, setMaximized] = useState(false);
@@ -301,15 +306,15 @@ export function SceneBlockWidget({
   );
 
   const body = <div className="squisq-scene-stage">{canvas}</div>;
-  const sideToolbar = <div className="squisq-scene-side-toolbar">{toolbar}</div>;
 
   if (maximized) {
     return (
       <div className="squisq-scene-inline-placeholder">
         <DiagramMaximizedOverlay host={host ?? null} onClose={() => setMaximized(false)}>
+          {/* Maximized has a full screen for a static right column — no collapse. */}
           <div className="squisq-scene-block-max">
             {body}
-            {sideToolbar}
+            <div className="squisq-scene-side-toolbar">{toolbar}</div>
           </div>
         </DiagramMaximizedOverlay>
       </div>
@@ -318,8 +323,10 @@ export function SceneBlockWidget({
 
   return (
     <div className="squisq-scene-shell">
+      {/* Before the canvas so the narrow-width fallback bar sits above it; the
+        wide-width gutter column is absolute and unaffected by DOM order. */}
+      <SceneSideToolbar>{toolbar}</SceneSideToolbar>
       <div className="squisq-scene-inline">{body}</div>
-      {sideToolbar}
     </div>
   );
 }