@bendyline/squisq-editor-react 1.6.2 → 2.0.0

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,

package/src/scene/layers/DiagramEdges.tsx

@@ -13,6 +13,7 @@
  * drag).
  */
 
+import { useId } from 'react';
 import type { MarkerStyle } from '@bendyline/squisq/schemas';
 import { connectorPath, markerPath } from '@bendyline/squisq/doc';
 import type { SceneEdge } from '../commands/SceneCommand';
@@ -33,8 +34,8 @@ interface DiagramEdgesProps {
 /** Marker styles that carry a glyph (everything except 'none'). */
 const MARKER_STYLES: MarkerStyle[] = ['arrow', 'open', 'diamond', 'circle', 'square'];
 
-function markerId(style: MarkerStyle, dir: 'start' | 'end'): string {
-  return `squisq-edge-${style}-${dir}`;
+function markerId(prefix: string, style: MarkerStyle, dir: 'start' | 'end'): string {
+  return `${prefix}-squisq-edge-${style}-${dir}`;
 }
 
 export function DiagramEdges({
@@ -45,6 +46,7 @@ export function DiagramEdges({
   onEdgeClick,
 }: DiagramEdgesProps) {
   const boxById = boxesOf(nodes);
+  const markerPrefix = useId().replace(/:/g, '');
   const defaultRouting = variant === 'straight' ? 'straight' : 'curved';
 
   return (
@@ -56,8 +58,8 @@ export function DiagramEdges({
             if (!mp) return null;
             return (
               <marker
-                key={markerId(style, dir)}
-                id={markerId(style, dir)}
+                key={markerId(markerPrefix, style, dir)}
+                id={markerId(markerPrefix, style, dir)}
                 viewBox="0 0 10 10"
                 refX={dir === 'end' ? 9 : 1}
                 refY={5}
@@ -81,7 +83,13 @@ export function DiagramEdges({
         const a = boxById.get(edge.source);
         const b = boxById.get(edge.target);
         if (!a || !b) return null;
-        const snapped = edgeEndpoints(nodes, edge.source, edge.target);
+        const snapped = edgeEndpoints(
+          nodes,
+          edge.source,
+          edge.target,
+          edge.sourceAnchor,
+          edge.targetAnchor,
+        );
         if (!snapped) return null;
         const { start, end } = snapped;
         const d = connectorPath(edge.routing ?? defaultRouting, start, end);
@@ -99,9 +107,15 @@ export function DiagramEdges({
               className="squisq-scene-edge-path"
               strokeDasharray={edge.dasharray}
               markerStart={
-                startMarker !== 'none' ? `url(#${markerId(startMarker, 'start')})` : undefined
+                startMarker !== 'none'
+                  ? `url(#${markerId(markerPrefix, startMarker, 'start')})`
+                  : undefined
+              }
+              markerEnd={
+                endMarker !== 'none'
+                  ? `url(#${markerId(markerPrefix, endMarker, 'end')})`
+                  : undefined
               }
-              markerEnd={endMarker !== 'none' ? `url(#${markerId(endMarker, 'end')})` : undefined}
             />
             {edge.label ? (
               <text

package/src/scene/layers/edgeGeometry.ts

@@ -9,8 +9,10 @@
 
 import { NODE_WIDTH, NODE_HEIGHT } from './nodeCard';
 import {
+  anchorPoint,
   nearestSnapPoint as nearestCoreSnapPoint,
   snapEndpoints as coreSnapEndpoints,
+  type ConnectorAnchor,
   type ConnectorSnapPoint,
 } from '@bendyline/squisq/doc';
 
@@ -77,12 +79,18 @@ export function edgeEndpoints(
   nodes: readonly EdgeNodeBox[],
   source: string,
   target: string,
+  sourceAnchor?: ConnectorAnchor,
+  targetAnchor?: ConnectorAnchor,
 ): { start: ConnectorSnapPoint; end: ConnectorSnapPoint } | null {
   const boxes = boxesOf(nodes);
   const a = boxes.get(source);
   const b = boxes.get(target);
   if (!a || !b) return null;
-  return coreSnapEndpoints(a, b);
+  const snapped = coreSnapEndpoints(a, b);
+  return {
+    start: sourceAnchor ? anchorPoint(a, sourceAnchor) : snapped.start,
+    end: targetAnchor ? anchorPoint(b, targetAnchor) : snapped.end,
+  };
 }
 
 export function straightPath(a: { x: number; y: number }, b: { x: number; y: number }): string {

package/src/scene/layers/nodeCard.tsx

@@ -11,6 +11,7 @@
  */
 
 import type { ShapeLayer, TextLayer, Layer } from '@bendyline/squisq/schemas';
+import { DIAGRAM_LABEL_LINE_HEIGHT, fitDiagramLabel } from '@bendyline/squisq/doc';
 
 export const NODE_WIDTH = 180;
 export const NODE_HEIGHT = 64;
@@ -34,6 +35,12 @@ export interface DiagramNodeDescriptor {
   stroke?: string;
   /** Optional shape: 'rect' (default) or 'pill' (fully rounded). */
   shape?: 'rect' | 'pill';
+  /**
+   * 'container' renders as a background grouping card: translucent fill,
+   * muted stroke, label anchored near the top edge instead of centered
+   * (children paint over the interior).
+   */
+  kind?: 'container';
 }
 
 /**
@@ -45,43 +52,55 @@ export interface DiagramNodeDescriptor {
 export function nodeCardLayers(node: DiagramNodeDescriptor): [ShapeLayer, TextLayer] {
   const width = node.width ?? NODE_WIDTH;
   const height = node.height ?? NODE_HEIGHT;
+  const isContainer = node.kind === 'container';
   const card: ShapeLayer = {
     id: `node-card-${node.id}`,
     type: 'shape',
     position: { x: node.x, y: node.y, width, height },
     content: {
       shape: 'rect',
-      fill: node.fill ?? '#ffffff',
-      stroke: node.stroke ?? '#1e293b',
+      fill: node.fill ?? (isContainer ? '#94a3b8' : '#ffffff'),
+      ...(isContainer ? { fillOpacity: 0.12 } : {}),
+      stroke: node.stroke ?? (isContainer ? '#94a3b8' : '#1e293b'),
       strokeWidth: 2,
       borderRadius: node.shape === 'pill' ? height / 2 : 10,
     },
   };
 
   // Scale the label font with the node height so resized cards stay
-  // legible without the text overflowing.
-  const fontSize = Math.max(12, Math.min(48, Math.round(height * 0.34)));
+  // legible without the text overflowing. Containers keep a fixed, small
+  // title size — their height tracks their children, not their label.
+  const labelText = isContainer ? (node.label.split('\n')[0] ?? '') : node.label;
+  const preferredFontSize = Math.max(12, Math.min(48, Math.round(height * 0.34)));
+  const fit = isContainer
+    ? { fontSize: 16, firstLineOffset: 0, textWidth: width }
+    : fitDiagramLabel(labelText, width, height, preferredFontSize);
+  const { fontSize } = fit;
 
   // Label has no explicit height — that keeps its bounding box
   // unresolvable in `layerBounds`, which in turn keeps it out of the
   // Scene's hit-test. The label rides along visually via `layerFollows`
   // but never wins a pointer-down (the card underneath does), so a
   // drag-on-text moves the card as expected.
+  //
+  // Container labels anchor near the top edge — the interior belongs to
+  // the children painting over it.
   const label: TextLayer = {
     id: `node-label-${node.id}`,
     type: 'text',
     position: {
       x: node.x + width / 2,
-      y: node.y + height / 2,
-      width,
+      y: isContainer ? node.y + fontSize + 8 : node.y + height / 2 + fit.firstLineOffset,
+      width: fit.textWidth,
       anchor: 'center',
     },
     content: {
-      text: node.label,
+      text: labelText,
       style: {
         fontSize,
+        ...(!isContainer ? { lineHeight: DIAGRAM_LABEL_LINE_HEIGHT } : {}),
         fontWeight: 'bold',
-        color: node.stroke ?? '#1e293b',
+        color: node.stroke ?? (isContainer ? '#64748b' : '#1e293b'),
         textAlign: 'center',
       },
     },

package/src/scene/scene.css

@@ -37,11 +37,14 @@
 
 .squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--shape,
 .squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--path,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--text,
-.squisq-editor-shell[data-theme='dark'] .squisq-scene-extras {
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-layer--text {
   filter: invert(1) hue-rotate(180deg) saturate(0.9);
 }
 
+/* Scene extras (diagram/drawing connectors) already use the dark-aware
+   --squisq-text tokens below. Inverting this group a second time turns the
+   intended light strokes and arrowheads nearly black against the canvas. */
+
 .squisq-scene-viewport {
   display: block;
   width: 100%;

package/src/scene/text/SceneTextOverlay.tsx

@@ -19,7 +19,6 @@ import { layerBounds } from '../hooks/useSceneHitTest';
 import type { SceneTransform } from '../hooks/useScenePanZoom';
 import type { SceneTextEditConfig } from './sceneTextConfig';
 import { buildSceneTextExtensions } from './sceneTiptap';
-import { sceneTextChannel } from './sceneTextChannel';
 
 interface SceneTextOverlayProps {
   config: SceneTextEditConfig;
@@ -90,12 +89,13 @@ export function SceneTextOverlay({
 
   // Publish to the toolbar channel while mounted; clear on unmount.
   useEffect(() => {
-    if (!editor) return;
-    sceneTextChannel.set({ editor, level: config.level });
+    if (!editor || !config.channel) return;
+    const channel = config.channel;
+    channel.set({ editor, level: config.level });
     return () => {
-      if (sceneTextChannel.get()?.editor === editor) sceneTextChannel.set(null);
+      if (channel.get()?.editor === editor) channel.set(null);
     };
-  }, [editor, config.level]);
+  }, [editor, config.level, config.channel]);
 
   // Commit when focus leaves the editor — unless it went to the toolbar
   // (the user clicking Bold) or stayed within the overlay.