@bendyline/squisq-editor-react 1.6.2 → 2.0.1

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">

package/src/scene/__tests__/DiagramAdapter.test.ts

@@ -53,4 +53,90 @@ describe('buildDiagramScene', () => {
     );
     expect(out.edges[0]).toEqual({ id: 'a->b', source: 'a', target: 'b' });
   });
+
+  it('passes container kind through and styles the label top-anchored', () => {
+    const out = buildDiagramScene(
+      [
+        {
+          id: 'group',
+          position: { x: 0, y: 0 },
+          data: { label: 'Cluster\nextra' },
+          width: 600,
+          height: 400,
+          kind: 'container',
+        },
+        { id: 'a', position: { x: 40, y: 60 }, data: { label: 'A' } },
+      ],
+      [],
+    );
+    expect(out.nodes[0].kind).toBe('container');
+    const label = out.layers.find((l) => l.id === 'node-label-group');
+    expect(label?.position.y).toBeLessThan(0 + 400 / 2); // top-anchored, not centered
+    if (label?.type === 'text') expect(label.content.text).toBe('Cluster'); // first line only
+  });
+
+  it('fits and vertically centers dense multi-line labels inside ASCII-sized cards', () => {
+    const out = buildDiagramScene(
+      [
+        {
+          id: 'kernel',
+          position: { x: 100, y: 200 },
+          data: {
+            label: '@bendyline/molen-kernel\nheadless sim — no DOM, no thread\nWorker + Node',
+          },
+          width: 252,
+          height: 112,
+        },
+      ],
+      [],
+    );
+    const label = out.layers.find((layer) => layer.id === 'node-label-kernel');
+    expect(label?.type).toBe('text');
+    if (label?.type !== 'text') return;
+
+    expect(label.content.style.fontSize).toBeLessThan(38);
+    expect(label.content.style.lineHeight).toBe(1.25);
+    expect(label.position.width).toBe(228);
+    expect(label.position.y).toBeLessThan(200 + 112 / 2);
+  });
+
+  it('maps directed:false to endMarker none, leaves default edges alone', () => {
+    const out = buildDiagramScene(
+      [
+        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'A' } },
+        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'B' } },
+      ],
+      [
+        { id: 'a->b', source: 'a', target: 'b', directed: false },
+        { id: 'b->a', source: 'b', target: 'a' },
+      ],
+    );
+    expect(out.edges[0]).toEqual({ id: 'a->b', source: 'a', target: 'b', endMarker: 'none' });
+    expect(out.edges[1]).toEqual({ id: 'b->a', source: 'b', target: 'a' });
+  });
+
+  it('preserves authored anchors and routing for ASCII-derived edges', () => {
+    const out = buildDiagramScene(
+      [
+        { id: 'source', position: { x: 0, y: 0 }, data: { label: 'Source' } },
+        { id: 'target', position: { x: 0, y: 200 }, data: { label: 'Target' } },
+      ],
+      [
+        {
+          id: 'source->target',
+          source: 'source',
+          target: 'target',
+          sourceAnchor: { side: 'bottom', offset: 0.25 },
+          targetAnchor: { side: 'top', offset: 0.5 },
+          routing: 'orthogonal',
+        },
+      ],
+    );
+
+    expect(out.edges[0]).toMatchObject({
+      sourceAnchor: { side: 'bottom', offset: 0.25 },
+      targetAnchor: { side: 'top', offset: 0.5 },
+      routing: 'orthogonal',
+    });
+  });
 });

package/src/scene/__tests__/SceneBlockExtension.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { Schema } from '@tiptap/pm/model';
+import type { Editor } from '@tiptap/react';
+import { findSceneHeadingPos, getHeadingKey } from '../SceneBlockExtension';
+
+const schema = new Schema({
+  nodes: {
+    doc: { content: 'heading+' },
+    text: {},
+    heading: {
+      content: 'text*',
+      attrs: {
+        level: { default: 1 },
+        dataTemplate: { default: 'layout' },
+        dataBlockAttrs: { default: null },
+      },
+    },
+  },
+});
+
+describe('SceneBlockExtension heading identity', () => {
+  it('targets the correct canvas when headings have duplicate text or ids', () => {
+    const first = schema.node('heading', { dataBlockAttrs: '#same' }, schema.text('Layout'));
+    const second = schema.node('heading', { dataBlockAttrs: '#same' }, schema.text('Layout'));
+    const secondPos = first.nodeSize;
+    const doc = schema.node('doc', null, [first, second]);
+    const editor = { state: { doc } } as unknown as Editor;
+    const firstKey = getHeadingKey(first, 0);
+    const secondKey = getHeadingKey(second, secondPos);
+    expect(firstKey).not.toBe(secondKey);
+    expect(findSceneHeadingPos(editor, secondKey, 'layout')).toBe(secondPos);
+  });
+});

package/src/scene/__tests__/sceneIsolation.test.tsx

@@ -0,0 +1,119 @@
+/** @vitest-environment jsdom */
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { SceneToolContext } from '../tools/SceneTool';
+import { SelectTool, beginHandleDrag, getActiveMoveOffset } from '../tools/SelectTool';
+import { ConnectTool } from '../tools/ConnectTool';
+import { createSceneTextChannel } from '../text/sceneTextChannel';
+import { SceneViewport } from '../SceneViewport';
+import { DiagramEdges } from '../layers/DiagramEdges';
+
+function context(id = 'layer'): SceneToolContext {
+  const layer = {
+    id,
+    type: 'shape' as const,
+    position: { x: 0, y: 0, width: 20, height: 20 },
+    content: { shape: 'rect' as const },
+  };
+  return {
+    interaction: {},
+    viewport: { width: 100, height: 100 },
+    transform: { tx: 0, ty: 0, scale: 1 },
+    layers: [layer],
+    edges: [],
+    selection: new Set(),
+    hitItems: [{ id, layer, bounds: { x: 0, y: 0, width: 20, height: 20 } }],
+    screenToViewport: (x, y) => ({ x, y }),
+    viewportToScreen: (x, y) => ({ x, y }),
+    hit: () => id,
+    setSelection: vi.fn(),
+    dispatch: vi.fn(),
+  };
+}
+
+function pointer(clientX: number, clientY: number) {
+  return {
+    button: 0,
+    clientX,
+    clientY,
+    pointerId: 1,
+    shiftKey: false,
+    currentTarget: {
+      getBoundingClientRect: () => ({ left: 0, top: 0 }),
+      setPointerCapture: vi.fn(),
+      releasePointerCapture: vi.fn(),
+    },
+    stopPropagation: vi.fn(),
+  } as unknown as React.PointerEvent;
+}
+
+describe('Scene instance isolation', () => {
+  it('keeps select and connect gestures in the owning Scene context', () => {
+    const first = context('node-card-a');
+    const second = context('node-card-a');
+    SelectTool.onPointerDown!(pointer(0, 0), first);
+    SelectTool.onPointerMove!(pointer(10, 0), first);
+    expect(getActiveMoveOffset(first.interaction)).toEqual({ dx: 10, dy: 0 });
+    expect(getActiveMoveOffset(second.interaction)).toBeNull();
+
+    ConnectTool.onPointerDown!(pointer(5, 5), first);
+    expect(first.interaction.connect).toBeTruthy();
+    expect(second.interaction.connect).toBeUndefined();
+  });
+
+  it('commits a resize as one command containing origin and size', () => {
+    const ctx = context('node-card-a');
+    beginHandleDrag(
+      {
+        layerId: 'node-card-a',
+        corner: 'nw',
+        startV: { x: 10, y: 20 },
+        startBounds: { x: 10, y: 20, width: 100, height: 50 },
+      },
+      ctx.interaction,
+    );
+
+    SelectTool.onPointerMove!(pointer(0, 0), ctx);
+    SelectTool.onPointerUp!(pointer(0, 0), ctx);
+
+    expect(ctx.dispatch).toHaveBeenCalledTimes(1);
+    expect(ctx.dispatch).toHaveBeenCalledWith({
+      kind: 'resizeLayer',
+      id: 'node-card-a',
+      x: 0,
+      y: 0,
+      width: 110,
+      height: 70,
+    });
+  });
+
+  it('creates independent text-toolbar channels', () => {
+    const first = createSceneTextChannel();
+    const second = createSceneTextChannel();
+    const listener = vi.fn();
+    second.subscribe(listener);
+    first.set({ editor: {} as never, level: 'inline' });
+    expect(listener).not.toHaveBeenCalled();
+    expect(second.get()).toBeNull();
+  });
+
+  it('namespaces grid and edge marker definitions per canvas', () => {
+    const edge = { id: 'e', source: 'a', target: 'b', endMarker: 'arrow' as const };
+    const nodes = [
+      { id: 'a', x: 0, y: 0, width: 10, height: 10, cx: 5, cy: 5 },
+      { id: 'b', x: 30, y: 0, width: 10, height: 10, cx: 35, cy: 5 },
+    ];
+    const { container } = render(
+      <>
+        <SceneViewport width={100} height={100} transform={{ tx: 0, ty: 0, scale: 1 }}>
+          <DiagramEdges nodes={nodes} edges={[edge]} />
+        </SceneViewport>
+        <SceneViewport width={100} height={100} transform={{ tx: 0, ty: 0, scale: 1 }}>
+          <DiagramEdges nodes={nodes} edges={[edge]} />
+        </SceneViewport>
+      </>,
+    );
+    const ids = Array.from(container.querySelectorAll('[id]')).map((node) => node.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});