@bendyline/squisq-editor-react 1.6.2 → 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,8 @@ 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
@@ -453,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.
@@ -475,6 +504,7 @@ export function Scene(props: SceneProps) {
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
         onDoubleClick={handleDoubleClick}
         onDragOver={onDrop ? handleDragOver : undefined}
         onDrop={onDrop ? handleDrop : undefined}

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

@@ -30,6 +30,7 @@ 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';
 
@@ -40,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
@@ -59,6 +61,7 @@ export function SceneBlockWidget({
   fallbackParentPos,
   mode,
   host,
+  textChannel,
 }: SceneBlockWidgetProps) {
   const [parentPos, setParentPos] = useState<number>(
     () => findSceneHeadingPos(editor, headingKey, mode) ?? fallbackParentPos,
@@ -89,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;
@@ -114,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);

package/src/scene/SceneViewport.tsx

@@ -11,7 +11,7 @@
  * canvas grid would.
  */
 
-import { forwardRef, type ReactNode, type WheelEvent } from 'react';
+import { forwardRef, useId, type ReactNode, type WheelEvent } from 'react';
 import type { SceneTransform } from './hooks/useScenePanZoom';
 
 interface SceneViewportProps {
@@ -24,6 +24,7 @@ interface SceneViewportProps {
   onPointerDown?: (e: React.PointerEvent<SVGSVGElement>) => void;
   onPointerMove?: (e: React.PointerEvent<SVGSVGElement>) => void;
   onPointerUp?: (e: React.PointerEvent<SVGSVGElement>) => void;
+  onPointerCancel?: (e: React.PointerEvent<SVGSVGElement>) => void;
   onDoubleClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
   /** HTML5 drag-and-drop handlers — used for palette drag-to-place. */
   onDragOver?: (e: React.DragEvent<SVGSVGElement>) => void;
@@ -43,6 +44,7 @@ export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(funct
     onPointerDown,
     onPointerMove,
     onPointerUp,
+    onPointerCancel,
     onDoubleClick,
     onDragOver,
     onDrop,
@@ -52,6 +54,7 @@ export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(funct
   ref,
 ) {
   const t = transform;
+  const gridId = `squisq-scene-dot-grid-${useId().replace(/:/g, '')}`;
   const groupTransform = `translate(${t.tx} ${t.ty}) scale(${t.scale})`;
 
   return (
@@ -70,6 +73,7 @@ export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(funct
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
       onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
       onDoubleClick={onDoubleClick}
       onDragOver={onDragOver}
       onDrop={onDrop}
@@ -85,7 +89,7 @@ export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(funct
     >
       <defs>
         <pattern
-          id="squisq-scene-dot-grid"
+          id={gridId}
           x={t.tx}
           y={t.ty}
           width={24 * t.scale}
@@ -95,7 +99,7 @@ export const SceneViewport = forwardRef<SVGSVGElement, SceneViewportProps>(funct
           <circle cx={1} cy={1} r={1} className="squisq-scene-dot" />
         </pattern>
       </defs>
-      <rect width="100%" height="100%" fill="url(#squisq-scene-dot-grid)" />
+      <rect width="100%" height="100%" fill={`url(#${gridId})`} />
       <g transform={groupTransform}>{children}</g>
     </svg>
   );

package/src/scene/ShapePalette.tsx

@@ -8,7 +8,7 @@
  * gets drawn.
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { shapePath } from '@bendyline/squisq/doc';
 
 interface ShapePaletteProps {
@@ -152,8 +152,23 @@ export function ShapePalette({
 /** A 40×30 SVG thumbnail of a shape, inside a 48×38 button viewport. */
 function ShapeThumb({ kind }: { kind: string }) {
   const d = shapePath(kind, 4, 4, 40, 30);
+  const arrowId = `squisq-shape-thumb-arrow-${useId().replace(/:/g, '')}`;
   return (
     <svg viewBox="0 0 48 38" width={36} height={28} aria-hidden="true">
+      {kind === 'arrow' ? (
+        <defs>
+          <marker
+            id={arrowId}
+            viewBox="0 0 10 10"
+            refX={9}
+            refY={5}
+            markerWidth={4}
+            markerHeight={4}
+          >
+            <path d="M 0 0 L 10 5 L 0 10 z" className="squisq-shape-thumb-line" />
+          </marker>
+        </defs>
+      ) : null}
       {d ? (
         <path d={d} className="squisq-shape-thumb" />
       ) : kind === 'circle' ? (
@@ -167,7 +182,7 @@ function ShapeThumb({ kind }: { kind: string }) {
           x2={44}
           y2={4}
           className="squisq-shape-thumb-line"
-          markerEnd="url(#squisq-edge-arrow-end)"
+          markerEnd={`url(#${arrowId})`}
         />
       ) : kind === 'text' ? (
         <text x={24} y={26} textAnchor="middle" className="squisq-shape-thumb-text">