@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/scene/SceneSelection.tsx

@@ -28,6 +28,8 @@ interface SceneSelectionProps {
   } | null;
   /** Fired when the user presses a corner/edge handle. */
   onHandlePointerDown?: (e: React.PointerEvent<SVGElement>, corner: ResizeCorner) => void;
+  /** Whether to render resize handles in addition to the selection outline. */
+  showHandles?: boolean;
 }
 
 const HANDLE_SIZE = 8;
@@ -38,6 +40,7 @@ export function SceneSelection({
   liveOffset,
   liveResize,
   onHandlePointerDown,
+  showHandles = true,
 }: SceneSelectionProps) {
   if (selection.size === 0) return null;
   const selected = hitItems.filter((it) => selection.has(it.id));
@@ -84,21 +87,22 @@ export function SceneSelection({
               className="squisq-scene-selection-outline"
               pointerEvents="none"
             />
-            {corners.map(({ corner, cx, cy, cursor }) => (
-              <rect
-                key={corner}
-                x={cx - HANDLE_SIZE / 2}
-                y={cy - HANDLE_SIZE / 2}
-                width={HANDLE_SIZE}
-                height={HANDLE_SIZE}
-                className="squisq-scene-selection-handle"
-                style={{ cursor }}
-                onPointerDown={
-                  onHandlePointerDown ? (e) => onHandlePointerDown(e, corner) : undefined
-                }
-                data-corner={corner}
-              />
-            ))}
+            {showHandles &&
+              corners.map(({ corner, cx, cy, cursor }) => (
+                <rect
+                  key={corner}
+                  x={cx - HANDLE_SIZE / 2}
+                  y={cy - HANDLE_SIZE / 2}
+                  width={HANDLE_SIZE}
+                  height={HANDLE_SIZE}
+                  className="squisq-scene-selection-handle"
+                  style={{ cursor }}
+                  onPointerDown={
+                    onHandlePointerDown ? (e) => onHandlePointerDown(e, corner) : undefined
+                  }
+                  data-corner={corner}
+                />
+              ))}
           </g>
         );
       })}

package/src/scene/SceneSideToolbar.tsx

@@ -0,0 +1,89 @@
+/**
+ * SceneSideToolbar — placement wrapper for a `SceneBlockToolbar` beside an
+ * *inline* diagram / drawing / layout canvas.
+ *
+ * The toolbar normally floats as an always-open vertical column in the page's
+ * right gutter (`.squisq-scene-side-toolbar`, positioned at `left: 100%`). That
+ * only works when the gutter is wide enough to hold the 180px column; on a
+ * narrow editor — or in a host whose page fills most of the width — the column
+ * overhangs the editor's clipping edge and gets cut off.
+ *
+ * So we measure the real gutter (the gap between the canvas's right edge and
+ * the nearest horizontally-clipping ancestor) rather than guessing from a
+ * viewport breakpoint, since page width / centering / host chrome all move it:
+ *   • Fits  — render the column as-is (the common, wider case).
+ *   • Clips — render the toolbar as a compact horizontal bar in normal flow
+ *     above the canvas (`.squisq-scene-inline-toolbar`). It stays visible and
+ *     is never clipped; it just costs a small strip of vertical space.
+ *
+ * A normal-flow bar is used rather than an on-demand overlay popover because
+ * absolutely-positioned content overlapping the React Flow canvas fails to
+ * paint in some hosts (the diagram's own maximize overlay hits the same wall),
+ * whereas in-flow content always renders.
+ *
+ * Only the inline placement adapts. Maximized mode has a full screen to reserve
+ * a static right column, so the widgets render the bare
+ * `.squisq-scene-side-toolbar` there and never mount this wrapper.
+ */
+
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+
+/**
+ * Horizontal room the gutter must have to host the open column, kept in sync
+ * with `.squisq-scene-side-toolbar` in scene.css (12px `margin-left` + 180px
+ * `width`) plus a few px of breathing room so we fall back to the bar just
+ * before the column would touch the clip edge.
+ */
+const SIDE_TOOLBAR_FIT_PX = 12 + 180 + 4;
+
+interface SceneSideToolbarProps {
+  /** The `SceneBlockToolbar` element built by the host widget. */
+  children: ReactNode;
+}
+
+export function SceneSideToolbar({ children }: SceneSideToolbarProps) {
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [collapsed, setCollapsed] = useState(false);
+
+  // Measure whether the right gutter can host the column. The column is
+  // absolutely positioned at the shell's right edge, so its clipping depends on
+  // `shellRight` vs. the nearest ancestor that clips horizontally — recomputed
+  // whenever the editor body resizes (window resize, outline toggle, etc.).
+  // Switching to the in-flow bar changes shell *height*, not `shellRight`, so
+  // there's no measure↔collapse loop.
+  useLayoutEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const shell = wrap.closest('.squisq-scene-shell') as HTMLElement | null;
+    const clip = wrap.closest('.squisq-editor-content') as HTMLElement | null;
+    const measure = () => {
+      if (!shell) return;
+      const shellRight = shell.getBoundingClientRect().right;
+      const clipRight = clip
+        ? clip.getBoundingClientRect().right
+        : document.documentElement.clientWidth;
+      setCollapsed(clipRight - shellRight < SIDE_TOOLBAR_FIT_PX);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    const target = clip ?? shell;
+    if (target) ro.observe(target);
+    if (shell && shell !== target) ro.observe(shell);
+    window.addEventListener('resize', measure);
+    return () => {
+      ro.disconnect();
+      window.removeEventListener('resize', measure);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={wrapRef}
+      className={collapsed ? 'squisq-scene-inline-toolbar' : 'squisq-scene-side-toolbar'}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default SceneSideToolbar;

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,93 @@
+/** @vitest-environment jsdom */
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import type { SceneToolContext } from '../tools/SceneTool';
+import { SelectTool, 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('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);
+  });
+});

package/src/scene/adapters/DiagramAdapter.ts

@@ -10,26 +10,15 @@
  * underlying heading id when dispatching writes.
  */
 
-import type { Editor } from '@tiptap/react';
 import type { Layer } from '@bendyline/squisq/schemas';
-import type { SceneCommand, SceneEdge } from '../commands/SceneCommand';
+import type { SceneEdge } from '../commands/SceneCommand';
 import {
   nodesToCardLayers,
-  nodeIdFromCardLayerId,
   NODE_WIDTH,
   NODE_HEIGHT,
   type DiagramNodeDescriptor,
 } from '../layers/nodeCard';
-import {
-  moveNode,
-  addConnection,
-  removeConnection,
-  renameNode,
-  addNode,
-  removeNode,
-  listDiagramChildren,
-} from '../../diagram/diagramCommands';
-import type { DiagramRFNode, DiagramRFEdge } from '../../diagram/useDiagramData';
+import type { DiagramNode, DiagramEdge } from '../../diagram/types';
 
 export interface DiagramSceneData {
   layers: Layer[];
@@ -44,8 +33,8 @@ export interface DiagramSceneData {
  * shape so the existing data hook can stay unchanged during the swap.
  */
 export function buildDiagramScene(
-  nodes: readonly DiagramRFNode[],
-  edges: readonly DiagramRFEdge[],
+  nodes: readonly DiagramNode[],
+  edges: readonly DiagramEdge[],
 ): DiagramSceneData {
   const descriptors: DiagramNodeDescriptor[] = nodes.map((n) => ({
     id: n.id,
@@ -54,6 +43,7 @@ export function buildDiagramScene(
     y: n.position.y,
     ...(n.width != null ? { width: n.width } : {}),
     ...(n.height != null ? { height: n.height } : {}),
+    ...(n.kind === 'container' ? { kind: 'container' as const } : {}),
   }));
   const layers = nodesToCardLayers(descriptors);
   const sceneEdges: SceneEdge[] = edges.map((e) => ({
@@ -61,6 +51,10 @@ export function buildDiagramScene(
     source: e.source,
     target: e.target,
     ...(e.label ? { label: e.label } : {}),
+    ...(e.directed === false ? { endMarker: 'none' as const } : {}),
+    ...(e.sourceAnchor ? { sourceAnchor: e.sourceAnchor } : {}),
+    ...(e.targetAnchor ? { targetAnchor: e.targetAnchor } : {}),
+    ...(e.routing ? { routing: e.routing } : {}),
   }));
   return { layers, edges: sceneEdges, nodes: descriptors };
 }
@@ -80,89 +74,6 @@ export function nodeCenter(node: DiagramNodeDescriptor): { x: number; y: number
   return { x: node.x + NODE_WIDTH / 2, y: node.y + NODE_HEIGHT / 2 };
 }
 
-/**
- * Build a SceneCommand dispatcher that writes back to Tiptap using the
- * existing diagram commands. The returned function is stable for a
- * given (editor, parentPos) tuple.
- */
-export function makeDiagramDispatch(
-  editor: Editor,
-  parentPos: number,
-): (cmd: SceneCommand) => void {
-  return (cmd: SceneCommand) => {
-    switch (cmd.kind) {
-      case 'moveLayer': {
-        const nodeId = nodeIdFromCardLayerId(cmd.id);
-        if (!nodeId) return;
-        // Only the card layer carries the node's position; ignore label
-        // moves (they'd duplicate the same write).
-        if (!cmd.id.startsWith('node-card-')) return;
-        moveNode(editor, parentPos, nodeId, cmd.x, cmd.y);
-        return;
-      }
-      case 'addEdge':
-        addConnection(editor, parentPos, cmd.source, cmd.target, cmd.type);
-        return;
-      case 'removeEdge':
-        removeConnection(editor, parentPos, cmd.source, cmd.target, cmd.type);
-        return;
-      case 'removeLayer': {
-        const nodeId = nodeIdFromCardLayerId(cmd.id);
-        if (nodeId) removeNode(editor, parentPos, nodeId);
-        return;
-      }
-      case 'renameLayer': {
-        const nodeId = nodeIdFromCardLayerId(cmd.id);
-        if (nodeId) renameNode(editor, parentPos, nodeId, cmd.label);
-        return;
-      }
-      case 'addLayer': {
-        // Diagram mode interprets addLayer as "add a new diagram node at
-        // the layer's position". Pull (x, y) from the layer's position
-        // and synthesize a fresh id.
-        const pos = cmd.layer.position;
-        const x = typeof pos.x === 'number' ? pos.x : 0;
-        const y = typeof pos.y === 'number' ? pos.y : 0;
-        const id = nextNodeId(editor, parentPos);
-        const label = inferAddedLabel(cmd.layer) ?? `Node`;
-        addNode(editor, parentPos, id, label, x, y);
-        return;
-      }
-      case 'setLayerAttr': {
-        const nodeId = nodeIdFromCardLayerId(cmd.id);
-        if (!nodeId) return;
-        if (cmd.path === 'content.text' && typeof cmd.value === 'string') {
-          renameNode(editor, parentPos, nodeId, cmd.value);
-        }
-        return;
-      }
-      case 'resizeLayer':
-        // v1: diagram nodes are fixed-size. Ignore resize.
-        return;
-      case 'setLayerText': {
-        const nodeId = nodeIdFromCardLayerId(cmd.id);
-        if (nodeId) renameNode(editor, parentPos, nodeId, cmd.text);
-        return;
-      }
-    }
-    // Exhaustiveness check — TS will flag unhandled command kinds.
-    const _exhaustive: never = cmd;
-    void _exhaustive;
-  };
-
-  function inferAddedLabel(layer: Layer): string | null {
-    if (layer.type === 'text') return layer.content.text;
-    return null;
-  }
-}
-
-function nextNodeId(editor: Editor, parentPos: number): string {
-  const used = new Set(listDiagramChildren(editor, parentPos).map((c) => c.id));
-  let i = used.size + 1;
-  let id = `node-${i}`;
-  while (used.has(id)) {
-    i++;
-    id = `node-${i}`;
-  }
-  return id;
-}
+// (The heading-based `makeDiagramDispatch` was removed with the ASCII-fence
+// cutover — canvas commands for diagrams now flow through
+// `asciiDiagram/asciiDiagramCommands.ts` instead of heading mutations.)

package/src/scene/commands/SceneCommand.ts

@@ -11,7 +11,7 @@
  * component drive three different editing surfaces.
  */
 
-import type { Layer } from '@bendyline/squisq/schemas';
+import type { DiagramEdgeAnchor, Layer } from '@bendyline/squisq/schemas';
 
 export type SceneCommand =
   /** Commit a layer's new top-left position (in viewport units). */
@@ -67,4 +67,7 @@ export interface SceneEdge {
   dasharray?: string;
   /** Per-edge routing override (else the renderer's variant default). */
   routing?: import('@bendyline/squisq/doc').ConnectorRouting;
+  /** Optional authored node-side attachments (used by ASCII-derived diagrams). */
+  sourceAnchor?: DiagramEdgeAnchor;
+  targetAnchor?: DiagramEdgeAnchor;
 }

package/src/scene/index.ts

@@ -59,12 +59,7 @@ export {
 } from './layers/nodeCard';
 export { DiagramEdges } from './layers/DiagramEdges';
 
-export {
-  buildDiagramScene,
-  makeDiagramDispatch,
-  nodeCenter,
-  type DiagramSceneData,
-} from './adapters/DiagramAdapter';
+export { buildDiagramScene, nodeCenter, type DiagramSceneData } from './adapters/DiagramAdapter';
 
 export {
   useLayoutAdapter,