@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/scene/layers/DiagramEdges.tsx

@@ -13,10 +13,11 @@
  * 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';
-import { boxesOf, edgePoint } from './edgeGeometry';
+import { boxesOf, edgeEndpoints } from './edgeGeometry';
 import type { EdgeNodeBox } from './edgeGeometry';
 
 interface DiagramEdgesProps {
@@ -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,8 +83,15 @@ export function DiagramEdges({
         const a = boxById.get(edge.source);
         const b = boxById.get(edge.target);
         if (!a || !b) return null;
-        const start = edgePoint(a, b);
-        const end = edgePoint(b, a);
+        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);
         const startMarker = edge.startMarker ?? 'none';
         const endMarker = edge.endMarker ?? 'arrow';
@@ -98,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

@@ -8,6 +8,13 @@
  */
 
 import { NODE_WIDTH, NODE_HEIGHT } from './nodeCard';
+import {
+  anchorPoint,
+  nearestSnapPoint as nearestCoreSnapPoint,
+  snapEndpoints as coreSnapEndpoints,
+  type ConnectorAnchor,
+  type ConnectorSnapPoint,
+} from '@bendyline/squisq/doc';
 
 /** Minimal box an edge needs from a node/shape (id + bounds). */
 export interface EdgeNodeBox {
@@ -49,21 +56,41 @@ export function edgePoint(from: NodeBox, to: NodeBox): { x: number; y: number }
   return { x: from.cx + dx * s, y: from.cy + dy * s };
 }
 
+function boxFor(nodes: readonly EdgeNodeBox[], id: string): NodeBox | null {
+  return boxesOf(nodes).get(id) ?? null;
+}
+
+/** Nearest stable connector port on the named node/shape to `point`. */
+export function snapPointToward(
+  nodes: readonly EdgeNodeBox[],
+  id: string,
+  point: { x: number; y: number },
+): ConnectorSnapPoint | null {
+  const box = boxFor(nodes, id);
+  return box ? nearestCoreSnapPoint(box, point) : null;
+}
+
 /**
- * Clipped start/end points of the edge `source`→`target`, or null when an
- * endpoint shape is missing. Used by the renderer and by a tool hit-testing
+ * Snapped start/end points of the edge `source`→`target`, or null when an
+ * endpoint shape is missing. Used by the renderer and by tool hit-testing
  * endpoint handles against the same geometry the renderer draws.
  */
 export function edgeEndpoints(
   nodes: readonly EdgeNodeBox[],
   source: string,
   target: string,
-): { start: { x: number; y: number }; end: { x: number; y: number } } | null {
+  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 { start: edgePoint(a, b), end: edgePoint(b, a) };
+  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

@@ -20,6 +20,31 @@
   overflow: hidden;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-shell {
+  --squisq-surface: #0f172a;
+  --squisq-surface-hover: #1e293b;
+  --squisq-border: #475569;
+  --squisq-text: #f8fafc;
+  --squisq-text-muted: #94a3b8;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-root,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-inline,
+.squisq-editor-shell[data-theme='dark'] .squisq-diagram-inline {
+  background: #0f172a;
+  border-color: #475569;
+}
+
+.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 {
+  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%;
@@ -111,6 +136,18 @@
   pointer-events: none;
 }
 
+.squisq-scene-connection-point {
+  fill: #ffffff;
+  stroke: #6366f1;
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  pointer-events: none;
+}
+
+.squisq-scene-connection-point--active {
+  fill: #6366f1;
+}
+
 /* ── Toolbar ──────────────────────────────────────────────── */
 
 .squisq-scene-toolbar {
@@ -261,6 +298,46 @@
   color: #b91c1c;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-toolbar,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-tools,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-actions,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-block-props {
+  background: #111827;
+  border-color: #475569;
+  color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action {
+  background: #111827;
+  color: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action:hover:not(:disabled) {
+  background: #1f2937;
+  border-color: #64748b;
+  color: #f8fafc;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-tool--active:hover {
+  background: #312e81;
+  border-color: #818cf8;
+  color: #f8fafc;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger {
+  color: #fca5a5;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-action--danger:hover:not(:disabled) {
+  background: #450a0a;
+  border-color: #f87171;
+  color: #fecaca;
+}
+
 /* Maximized overlay: a flex-filling canvas with the toolbar as a right-hand
    column (full screen has room to reserve it). */
 .squisq-scene-block-max {
@@ -303,8 +380,8 @@
   overflow-y: auto;
 }
 
-/* Re-flow the (normally horizontal, right-aligned) toolbar into a top-aligned
-   vertical column whose button groups wrap within the 180px width. */
+/* Re-flow the (normally horizontal, right-aligned) gutter toolbar into a
+   top-aligned vertical column whose button groups wrap within the 180px. */
 .squisq-scene-side-toolbar .squisq-scene-block-toolbar {
   flex-direction: column;
   align-items: stretch;
@@ -326,6 +403,23 @@
   right: calc(100% + 6px);
 }
 
+/* ── Narrow-width fallback bar ─────────────────────────────────
+   When SceneSideToolbar measures that the right gutter can't hold the 180px
+   column, it renders the same toolbar as an in-flow horizontal bar above the
+   canvas instead. Normal flow (not an overlay) so it always paints and is
+   never clipped; it just keeps the toolbar's natural horizontal layout and
+   wraps on very narrow widths. */
+.squisq-scene-inline-toolbar {
+  display: flex;
+  margin-bottom: 8px;
+}
+.squisq-scene-inline-toolbar .squisq-scene-block-toolbar {
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  width: 100%;
+  margin: 0;
+}
+
 /* ── Maximize button ──────────────────────────────────────── */
 
 .squisq-scene-maximize-btn {
@@ -354,6 +448,19 @@
   color: #0f172a;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn {
+  background: #111827;
+  border-color: #475569;
+  color: #e5e7eb;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-maximize-btn:hover {
+  background: #1f2937;
+  border-color: #64748b;
+  color: #f8fafc;
+}
+
 /* ── Diagram node card (used by nodeCard.tsx) ─────────────── */
 
 .squisq-scene-node-card {
@@ -502,6 +609,35 @@
   font-weight: 700;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette {
+  background: #111827;
+  color: #e5e7eb;
+  border-color: #475569;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-search,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-select {
+  background: #0f172a;
+  color: #e5e7eb;
+  border-color: #475569;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-palette-item:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear:hover {
+  background: #1f2937;
+  border-color: #64748b;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb,
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-line {
+  stroke: #e5e7eb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-shape-thumb-text {
+  fill: #e5e7eb;
+}
+
 /* Per-selection style controls, inline in the contextual toolbar (Fill /
    Stroke / Color swatches + connector dropdowns) — styled as a pill that
    matches the tools/actions groups. */
@@ -566,6 +702,13 @@
   background: #f1f5f9;
 }
 
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-color,
+.squisq-editor-shell[data-theme='dark'] .squisq-scene-prop-clear {
+  background: #0f172a;
+  color: #e5e7eb;
+  border-color: #475569;
+}
+
 /* ── Inline widget host (mirrors squisq-diagram-inline) ──── */
 
 .squisq-scene-widget-host {

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.

package/src/scene/text/sceneTextChannel.ts

@@ -1,13 +1,13 @@
 /**
- * sceneTextChannel — a module singleton that bridges the canvas's inline
+ * sceneTextChannel — an editor-owned channel that bridges the canvas's inline
  * text editor (which renders in a **detached React root** created by the
  * Diagram/SceneBlock ProseMirror extensions, outside `<EditorProvider>`)
  * to the provider, so the top formatting toolbar can target it.
  *
  * The active textbox's `SceneTextOverlay` publishes its Tiptap editor here
  * on focus and clears it on blur/unmount; `EditorProvider` subscribes and
- * mirrors the handle into `activeSceneText`. Singleton because only one
- * canvas textbox can be focused at a time.
+ * mirrors the handle into `activeSceneText`. Each EditorProvider creates its
+ * own channel, preventing focus in one editor from mutating another editor.
  */
 
 import type { Editor as TiptapEditor } from '@tiptap/core';
@@ -20,21 +20,27 @@ export interface SceneTextHandle {
 
 type Listener = (handle: SceneTextHandle | null) => void;
 
-let current: SceneTextHandle | null = null;
-const listeners = new Set<Listener>();
+export interface SceneTextChannel {
+  set(handle: SceneTextHandle | null): void;
+  get(): SceneTextHandle | null;
+  subscribe(listener: Listener): () => void;
+}
 
-export const sceneTextChannel = {
-  /** Publish (or clear with `null`) the focused canvas textbox editor. */
-  set(handle: SceneTextHandle | null): void {
-    current = handle;
-    for (const listener of listeners) listener(handle);
-  },
-  get(): SceneTextHandle | null {
-    return current;
-  },
-  /** Subscribe to handle changes. Returns an unsubscribe function. */
-  subscribe(listener: Listener): () => void {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  },
-};
+/** Create a channel owned by one EditorProvider; no cross-editor singleton. */
+export function createSceneTextChannel(): SceneTextChannel {
+  let current: SceneTextHandle | null = null;
+  const listeners = new Set<Listener>();
+  return {
+    set(handle) {
+      current = handle;
+      for (const listener of listeners) listener(handle);
+    },
+    get() {
+      return current;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}

package/src/scene/text/sceneTextConfig.ts

@@ -5,9 +5,13 @@
  * the host owns persistence (markdown heading vs. layout JSON blob).
  */
 
+import type { SceneTextChannel } from './sceneTextChannel';
+
 export type SceneTextLevel = 'inline' | 'block' | 'rich';
 
 export interface SceneTextEditConfig {
+  /** Per-editor bridge to the formatting toolbar. */
+  channel?: SceneTextChannel;
   /**
    * Map a hit layer id (what the pointer landed on) to the layer id whose
    * on-screen box the editor should cover, or `null` when that layer isn't