@bendyline/squisq-editor-react 2.0.1 → 2.1.0

package/src/mermaid/mermaidSourceOps.ts

@@ -0,0 +1,454 @@
+/**
+ * Loss-minimizing source transformations for structured Mermaid flowchart edits.
+ *
+ * Additive edits are represented as ordinary Mermaid declarations, preceded by
+ * a private comment marker so later edits can update the declaration instead
+ * of endlessly appending overrides. Destructive edits are deliberately
+ * conservative: they only rewrite lines that can be associated with the
+ * selected node/edge without dropping an unrelated edge.
+ */
+
+import type {
+  MermaidEditableEdge,
+  MermaidEditableNode,
+  MermaidFlowchartDirection,
+  MermaidFlowchartModel,
+} from './mermaidModel';
+import type { MermaidFlowchartShapeId } from './mermaidShapes';
+
+const NODE_MARKER = '%% squisq:node ';
+const EDGE_MARKER = '%% squisq:edge ';
+const EDGE_TOKEN = /(?:<[-=.]+[ox>]?|[ox<]?[-=.]+[ox>]|~~~)/;
+
+export interface MermaidSourceEditResult {
+  ok: boolean;
+  source: string;
+  reason?: string;
+}
+
+export function isEditableMermaidNodeId(id: string): boolean {
+  return /^[A-Za-z_][A-Za-z0-9_-]*$/.test(id);
+}
+
+function encodedId(id: string): string {
+  return encodeURIComponent(id);
+}
+
+function splitLines(source: string): string[] {
+  return source.split(/\r?\n/);
+}
+
+function joinLines(lines: readonly string[]): string {
+  return lines.join('\n');
+}
+
+function withoutManagedBlock(source: string, marker: string): string {
+  const lines = splitLines(source);
+  const next: string[] = [];
+  for (let index = 0; index < lines.length; index += 1) {
+    if (lines[index].trim() !== marker) {
+      next.push(lines[index]);
+      continue;
+    }
+    // Squisq-managed blocks are exactly marker + one Mermaid statement.
+    index += 1;
+    if (next.length > 0 && next[next.length - 1] === '' && lines[index + 1] === '') {
+      next.pop();
+    }
+  }
+  return joinLines(next);
+}
+
+function appendManagedBlock(source: string, marker: string, statement: string): string {
+  const without = withoutManagedBlock(source, marker).replace(/[ \t]+$/gm, '');
+  const separator = without.endsWith('\n\n') ? '' : without.endsWith('\n') ? '\n' : '\n\n';
+  return `${without}${separator}  ${marker}\n  ${statement}`;
+}
+
+function formatNode(node: Pick<MermaidEditableNode, 'id' | 'label' | 'shape' | 'classes'>): string {
+  const classes = node.classes
+    .filter((className) => /^[A-Za-z_][A-Za-z0-9_-]*$/.test(className))
+    .map((className) => `:::${className}`)
+    .join('');
+  return `${node.id}@{ shape: ${node.shape}, label: ${JSON.stringify(node.label)} }${classes}`;
+}
+
+export function upsertMermaidNode(
+  source: string,
+  node: Pick<MermaidEditableNode, 'id' | 'label' | 'shape' | 'classes'>,
+): MermaidSourceEditResult {
+  if (!isEditableMermaidNodeId(node.id)) {
+    return {
+      ok: false,
+      source,
+      reason: `Node id “${node.id}” is not safe for structured source editing.`,
+    };
+  }
+  const marker = `${NODE_MARKER}${encodedId(node.id)}`;
+  return { ok: true, source: appendManagedBlock(source, marker, formatNode(node)) };
+}
+
+export function renameMermaidNode(
+  source: string,
+  node: MermaidEditableNode,
+  label: string,
+): MermaidSourceEditResult {
+  const nextLabel = label.trim();
+  if (!nextLabel) return { ok: false, source, reason: 'A node label cannot be empty.' };
+  if (nextLabel === node.label) return { ok: false, source, reason: 'The label is unchanged.' };
+  return upsertMermaidNode(source, { ...node, label: nextLabel });
+}
+
+export function changeMermaidNodeShape(
+  source: string,
+  node: MermaidEditableNode,
+  shape: MermaidFlowchartShapeId,
+): MermaidSourceEditResult {
+  if (shape === node.shape) return { ok: false, source, reason: 'The shape is unchanged.' };
+  return upsertMermaidNode(source, { ...node, shape });
+}
+
+export function nextMermaidNodeId(model: MermaidFlowchartModel, base = 'node'): string {
+  const ids = new Set(model.nodes.map((node) => node.id));
+  if (!ids.has(base)) return base;
+  let suffix = 2;
+  while (ids.has(`${base}${suffix}`)) suffix += 1;
+  return `${base}${suffix}`;
+}
+
+export function addMermaidNode(
+  source: string,
+  model: MermaidFlowchartModel,
+  shape: MermaidFlowchartShapeId = 'rect',
+): MermaidSourceEditResult & { nodeId?: string } {
+  const id = nextMermaidNodeId(model);
+  const result = upsertMermaidNode(source, {
+    id,
+    label: 'New node',
+    shape,
+    classes: [],
+  });
+  return result.ok ? { ...result, nodeId: id } : result;
+}
+
+export function duplicateMermaidNode(
+  source: string,
+  model: MermaidFlowchartModel,
+  node: MermaidEditableNode,
+): MermaidSourceEditResult & { nodeId?: string } {
+  const id = nextMermaidNodeId(model, `${node.id}_copy`);
+  const result = upsertMermaidNode(source, {
+    ...node,
+    id,
+    label: `${node.label} copy`,
+  });
+  return result.ok ? { ...result, nodeId: id } : result;
+}
+
+export function connectMermaidNodes(
+  source: string,
+  model: MermaidFlowchartModel,
+  sourceId: string,
+  targetId: string,
+): MermaidSourceEditResult {
+  if (sourceId === targetId) {
+    return { ok: false, source, reason: 'Choose a different node to create a connection.' };
+  }
+  if (!isEditableMermaidNodeId(sourceId) || !isEditableMermaidNodeId(targetId)) {
+    return { ok: false, source, reason: 'One of the node ids is not safe to rewrite.' };
+  }
+  if (model.edges.some((edge) => edge.source === sourceId && edge.target === targetId)) {
+    return { ok: false, source, reason: 'Those nodes are already connected.' };
+  }
+  const marker = `${EDGE_MARKER}${encodedId(sourceId)} ${encodedId(targetId)}`;
+  return {
+    ok: true,
+    source: appendManagedBlock(source, marker, `${sourceId} --> ${targetId}`),
+  };
+}
+
+function withoutQuotedText(line: string): string {
+  let quote = '';
+  let escaped = false;
+  let result = '';
+  for (const char of line) {
+    if (escaped) {
+      result += quote ? ' ' : char;
+      escaped = false;
+      continue;
+    }
+    if (char === '\\') {
+      escaped = true;
+      result += quote ? ' ' : char;
+      continue;
+    }
+    if (quote) {
+      if (char === quote) quote = '';
+      result += ' ';
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      result += ' ';
+      continue;
+    }
+    result += char;
+  }
+  return result;
+}
+
+function idRegex(id: string): RegExp {
+  const escaped = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return new RegExp(`(^|[^A-Za-z0-9_-])${escaped}(?=$|[^A-Za-z0-9_-])`);
+}
+
+function lineReferencesNode(line: string, id: string): boolean {
+  return idRegex(id).test(withoutQuotedText(line));
+}
+
+function referencedNodeIds(line: string, model: MermaidFlowchartModel): string[] {
+  return model.nodes.filter((node) => lineReferencesNode(line, node.id)).map((node) => node.id);
+}
+
+function isEdgeLine(line: string): boolean {
+  const stripped = withoutQuotedText(line).trim();
+  return !stripped.startsWith('%%') && EDGE_TOKEN.test(stripped);
+}
+
+function formatEdgeLabel(label: string): string {
+  // A literal pipe terminates Mermaid's pipe-delimited edge label. Preserve it
+  // as an HTML entity so the authored label still round-trips through Mermaid.
+  return `|${JSON.stringify(label.replace(/\|/g, '&#124;'))}|`;
+}
+
+function rewriteSimpleEdgeLabel(
+  line: string,
+  edge: MermaidEditableEdge,
+  label: string,
+): string | null {
+  const stripped = withoutQuotedText(line);
+  const operator = EDGE_TOKEN.exec(stripped);
+  if (!operator) return null;
+
+  const suffixStart = operator.index + operator[0].length;
+  const suffix = line.slice(suffixStart);
+  const existingPipeLabel = /^(\s*)\|([^|\r\n]*)\|/.exec(suffix);
+
+  // Mermaid also accepts labels written between two link fragments, such as
+  // `A -- label --> B`. Rewriting that form without a full statement parser
+  // risks damaging its link style, so keep it source-only.
+  if (edge.label && !existingPipeLabel) return null;
+
+  const afterLabel = existingPipeLabel ? suffix.slice(existingPipeLabel[0].length) : suffix;
+  const nextLabel = label ? formatEdgeLabel(label) : '';
+  return `${line.slice(0, suffixStart)}${nextLabel}${afterLabel}`;
+}
+
+function lineIndent(line: string): string {
+  return /^\s*/.exec(line)?.[0] ?? '';
+}
+
+function declarationFor(node: MermaidEditableNode, indent: string): string {
+  return `${indent}${formatNode(node)}`;
+}
+
+/**
+ * Remove a node when each affected edge line contains no edge between two
+ * surviving nodes. This covers ordinary one-edge-per-line Mermaid (including
+ * declarations on the edge) while refusing dense `A & B --> C & D` rewrites.
+ */
+export function deleteMermaidNode(
+  source: string,
+  model: MermaidFlowchartModel,
+  nodeId: string,
+): MermaidSourceEditResult {
+  const selected = model.nodes.find((node) => node.id === nodeId);
+  if (!selected) return { ok: false, source, reason: 'The selected node no longer exists.' };
+  if (!isEditableMermaidNodeId(nodeId)) {
+    return { ok: false, source, reason: 'This node id can only be edited in Source.' };
+  }
+
+  let working = withoutManagedBlock(source, `${NODE_MARKER}${encodedId(nodeId)}`);
+  const lines = splitLines(working);
+  const next: string[] = [];
+  let removed = false;
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    const trimmed = line.trim();
+
+    if (trimmed.startsWith(EDGE_MARKER)) {
+      const markerIds = trimmed.slice(EDGE_MARKER.length).split(/\s+/).map(decodeURIComponent);
+      if (markerIds.includes(nodeId)) {
+        removed = true;
+        index += 1;
+        continue;
+      }
+    }
+
+    if (!lineReferencesNode(line, nodeId)) {
+      next.push(line);
+      continue;
+    }
+
+    if (isEdgeLine(line)) {
+      const ids = referencedNodeIds(line, model);
+      const survivingIds = ids.filter((id) => id !== nodeId);
+      const losesSurvivingEdge = model.edges.some(
+        (edge) =>
+          edge.source !== nodeId &&
+          edge.target !== nodeId &&
+          survivingIds.includes(edge.source) &&
+          survivingIds.includes(edge.target),
+      );
+      if (losesSurvivingEdge) {
+        return {
+          ok: false,
+          source,
+          reason:
+            'This compact edge statement also contains unrelated connections; edit it in Source.',
+        };
+      }
+      const indent = lineIndent(line);
+      for (const id of survivingIds) {
+        const survivor = model.nodes.find((node) => node.id === id);
+        if (survivor) next.push(declarationFor(survivor, indent));
+      }
+      removed = true;
+      continue;
+    }
+
+    // Preserve other nodes in a multi-node class assignment.
+    const classMatch = /^(\s*class\s+)([^\s]+)(\s+.+)$/.exec(line);
+    if (classMatch) {
+      const ids = classMatch[2].split(',').filter((id) => id !== nodeId);
+      if (ids.length > 0) next.push(`${classMatch[1]}${ids.join(',')}${classMatch[3]}`);
+      removed = true;
+      continue;
+    }
+
+    // Standalone declarations, style/click directives, and Squisq overrides
+    // for the selected id can be dropped without touching another node.
+    removed = true;
+  }
+
+  working = joinLines(next);
+  return removed
+    ? { ok: true, source: working.replace(/\n{3,}/g, '\n\n') }
+    : { ok: false, source, reason: 'No safe source declaration was found for this node.' };
+}
+
+export function disconnectMermaidEdge(
+  source: string,
+  model: MermaidFlowchartModel,
+  edge: MermaidEditableEdge,
+): MermaidSourceEditResult {
+  const managedMarker = `${EDGE_MARKER}${encodedId(edge.source)} ${encodedId(edge.target)}`;
+  const withoutManaged = withoutManagedBlock(source, managedMarker);
+  if (withoutManaged !== source) return { ok: true, source: withoutManaged };
+
+  const sourceNode = model.nodes.find((node) => node.id === edge.source);
+  const targetNode = model.nodes.find((node) => node.id === edge.target);
+  if (!sourceNode || !targetNode) {
+    return { ok: false, source, reason: 'The connection endpoints no longer exist.' };
+  }
+
+  const lines = splitLines(source);
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+    if (!isEdgeLine(line)) continue;
+    if (!lineReferencesNode(line, edge.source) || !lineReferencesNode(line, edge.target)) continue;
+    const ids = referencedNodeIds(line, model);
+    if (ids.some((id) => id !== edge.source && id !== edge.target)) continue;
+    const indent = lineIndent(line);
+    lines.splice(index, 1, declarationFor(sourceNode, indent), declarationFor(targetNode, indent));
+    return { ok: true, source: joinLines(lines) };
+  }
+
+  return {
+    ok: false,
+    source,
+    reason: 'This connection is part of a compact Mermaid statement; edit it in Source.',
+  };
+}
+
+/**
+ * Add, update, or remove a label on a one-edge-per-line flowchart connection.
+ * Managed Squisq edges and ordinary Mermaid pipe labels are both supported;
+ * compact or otherwise ambiguous statements deliberately fall back to Source.
+ */
+export function setMermaidEdgeLabel(
+  source: string,
+  model: MermaidFlowchartModel,
+  edge: MermaidEditableEdge,
+  label: string,
+): MermaidSourceEditResult {
+  const nextLabel = label.trim();
+  if (nextLabel === edge.label.trim()) {
+    return { ok: false, source, reason: 'The connection label is unchanged.' };
+  }
+  if (!isEditableMermaidNodeId(edge.source) || !isEditableMermaidNodeId(edge.target)) {
+    return { ok: false, source, reason: 'This connection can only be labeled in Source.' };
+  }
+
+  const lines = splitLines(source);
+  const managedMarker = `${EDGE_MARKER}${encodedId(edge.source)} ${encodedId(edge.target)}`;
+  const markerIndex = lines.findIndex((line) => line.trim() === managedMarker);
+  if (markerIndex >= 0) {
+    const statementIndex = markerIndex + 1;
+    const statement = lines[statementIndex];
+    const rewritten = statement ? rewriteSimpleEdgeLabel(statement, edge, nextLabel) : null;
+    if (!rewritten) {
+      return { ok: false, source, reason: 'This connection label can only be changed in Source.' };
+    }
+    lines[statementIndex] = rewritten;
+    return { ok: true, source: joinLines(lines) };
+  }
+
+  const candidates = lines
+    .map((line, index) => ({ line, index }))
+    .filter(({ line }) => {
+      if (!isEdgeLine(line)) return false;
+      if (!lineReferencesNode(line, edge.source) || !lineReferencesNode(line, edge.target)) {
+        return false;
+      }
+      const ids = referencedNodeIds(line, model);
+      return !ids.some((id) => id !== edge.source && id !== edge.target);
+    });
+
+  if (candidates.length !== 1) {
+    return {
+      ok: false,
+      source,
+      reason: 'This connection is part of an ambiguous Mermaid statement; edit it in Source.',
+    };
+  }
+
+  const candidate = candidates[0];
+  const rewritten = rewriteSimpleEdgeLabel(candidate.line, edge, nextLabel);
+  if (!rewritten) {
+    return {
+      ok: false,
+      source,
+      reason: 'This connection uses a label form that can only be changed in Source.',
+    };
+  }
+  lines[candidate.index] = rewritten;
+  return { ok: true, source: joinLines(lines) };
+}
+
+export function setMermaidFlowchartDirection(
+  source: string,
+  direction: MermaidFlowchartDirection,
+): MermaidSourceEditResult {
+  const header = /^(\s*)(flowchart|graph)\b[^\r\n]*$/m;
+  if (!header.test(source)) {
+    return { ok: false, source, reason: 'Only flowchart and graph headers have a direction.' };
+  }
+  const next = source.replace(header, (_match, indent: string, keyword: string) => {
+    return `${indent}${keyword} ${direction}`;
+  });
+  return next === source
+    ? { ok: false, source, reason: 'The direction is unchanged.' }
+    : { ok: true, source: next };
+}

package/src/scene/Scene.tsx

@@ -34,6 +34,7 @@ import { RenderLayer } from './layers/renderLayer';
 import { useSceneTextEditing } from './text/useSceneTextEditing';
 import { SceneTextOverlay } from './text/SceneTextOverlay';
 import type { SceneTextEditConfig } from './text/sceneTextConfig';
+import { SceneViewControls } from './SceneViewControls';
 
 export interface SceneProps {
   /** Viewport size in viewport units. Layers render in this coordinate space. */
@@ -78,6 +79,8 @@ export interface SceneProps {
   showMaximize?: boolean;
   maximized?: boolean;
   onToggleMaximize?: () => void;
+  /** Show the shared diagram zoom and fit controls. */
+  showViewControls?: boolean;
   /** Render the built-in toolbar (Select / Connect / etc.). Default true. */
   showToolbar?: boolean;
   /**
@@ -112,6 +115,7 @@ export function Scene(props: SceneProps) {
     showMaximize,
     maximized,
     onToggleMaximize,
+    showViewControls = false,
     showToolbar = true,
     textEditing,
     onDrop,
@@ -139,6 +143,8 @@ export function Scene(props: SceneProps) {
 
   // ── Pan/zoom + selection ────────────────────────────────────
   const panZoom = useScenePanZoom();
+  const { fitBox, zoomAt } = panZoom;
+  const [viewMode, setViewMode] = useState<'fit' | 'manual'>('fit');
   const selection = useSceneSelection();
   const setSceneSelection = selection.setSelection;
   const { hit } = useSceneHitTest();
@@ -226,6 +232,7 @@ export function Scene(props: SceneProps) {
       const sy = e.clientY - rect.top;
       // Negative deltaY = wheel up = zoom in.
       const factor = Math.exp(-e.deltaY * 0.0015);
+      setViewMode('manual');
       panZoom.zoomAt(factor, sx, sy);
     },
     [panZoom],
@@ -246,6 +253,7 @@ export function Scene(props: SceneProps) {
       (e.currentTarget as SVGSVGElement).focus({ preventScroll: true });
       // Middle-button or space-modified drag → pan, regardless of tool.
       if (e.button === 1 || (e.button === 0 && e.altKey)) {
+        setViewMode('manual');
         isPanning.current = true;
         panLast.current = { x: e.clientX, y: e.clientY };
         (e.currentTarget as Element).setPointerCapture?.(e.pointerId);
@@ -372,8 +380,7 @@ export function Scene(props: SceneProps) {
     return () => root.removeEventListener('keydown', onKey);
   }, [tools, activeTool, setActiveTool, textEdit.activeRef]);
 
-  // ── Initial fit ─────────────────────────────────────────────
-  const didFitRef = useRef(false);
+  // ── Responsive fit ──────────────────────────────────────────
   const [containerSize, setContainerSize] = useState<{ width: number; height: number } | null>(
     null,
   );
@@ -391,12 +398,8 @@ export function Scene(props: SceneProps) {
     return () => ro.disconnect();
   }, []);
 
-  useEffect(() => {
-    if (didFitRef.current) return;
-    if (!containerSize) return;
-    if (hitItems.length === 0) return;
-    didFitRef.current = true;
-    // Fit to the bounding box of all hit items (the visible content).
+  const contentBox = useMemo(() => {
+    if (hitItems.length === 0) return null;
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
@@ -407,13 +410,32 @@ export function Scene(props: SceneProps) {
       if (it.bounds.x + it.bounds.width > maxX) maxX = it.bounds.x + it.bounds.width;
       if (it.bounds.y + it.bounds.height > maxY) maxY = it.bounds.y + it.bounds.height;
     }
-    if (!Number.isFinite(minX)) return;
-    panZoom.fitBox(
-      { x: minX, y: minY, width: maxX - minX, height: maxY - minY },
-      containerSize,
-      40,
-    );
-  }, [containerSize, hitItems, panZoom]);
+    if (!Number.isFinite(minX)) return null;
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }, [hitItems]);
+
+  const fitContent = useCallback(() => {
+    if (!containerSize || !contentBox) return;
+    fitBox(contentBox, containerSize, 40, 1);
+  }, [containerSize, contentBox, fitBox]);
+
+  useEffect(() => {
+    if (viewMode === 'fit') fitContent();
+  }, [fitContent, viewMode]);
+
+  const adjustZoom = useCallback(
+    (factor: number) => {
+      setViewMode('manual');
+      if (!containerSize) return;
+      zoomAt(factor, containerSize.width / 2, containerSize.height / 2);
+    },
+    [containerSize, zoomAt],
+  );
+
+  const activateFit = useCallback(() => {
+    setViewMode('fit');
+    fitContent();
+  }, [fitContent]);
 
   // ── Render ──────────────────────────────────────────────────
   const liveOffset = activeId === 'select' ? getActiveMoveOffset(interaction) : null;
@@ -548,6 +570,15 @@ export function Scene(props: SceneProps) {
         />
         {activeTool?.renderOverlay?.(ctx)}
       </SceneViewport>
+      {showViewControls && (
+        <SceneViewControls
+          scale={panZoom.transform.scale}
+          fit={viewMode === 'fit'}
+          onZoomOut={() => adjustZoom(1 / 1.2)}
+          onZoomIn={() => adjustZoom(1.2)}
+          onFit={activateFit}
+        />
+      )}
       {showMaximize && onToggleMaximize && (
         <button
           type="button"

package/src/scene/SceneBlockToolbar.tsx

@@ -40,8 +40,12 @@ export interface SceneBlockAction {
   title?: string;
   onClick: () => void;
   disabled?: boolean;
+  /** Apply the selected-mode treatment (for actions such as Connect). */
+  active?: boolean;
   /** Render with the destructive (red) treatment — used for Delete. */
   danger?: boolean;
+  /** Optional dropdown anchored to this action button. */
+  popover?: ReactNode;
 }
 
 export interface SceneBlockToolbarProps {
@@ -178,20 +182,31 @@ export function SceneBlockToolbar({
       {properties}
       {actions.length > 0 && (
         <div className="squisq-scene-block-actions">
-          {actions.map((a) => (
-            <button
-              key={a.id}
-              type="button"
-              className={`squisq-scene-action${a.danger ? ' squisq-scene-action--danger' : ''}`}
-              onClick={a.onClick}
-              disabled={a.disabled}
-              title={a.title ?? a.label}
-              aria-label={a.title ?? a.label}
-            >
-              {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
-              <span className="squisq-scene-action-label">{a.label}</span>
-            </button>
-          ))}
+          {actions.map((a) => {
+            const button = (
+              <button
+                key={a.id}
+                type="button"
+                className={`squisq-scene-action${a.active ? ' squisq-scene-action--active' : ''}${a.danger ? ' squisq-scene-action--danger' : ''}`}
+                onClick={a.onClick}
+                disabled={a.disabled}
+                title={a.title ?? a.label}
+                aria-label={a.title ?? a.label}
+                aria-pressed={a.active || undefined}
+              >
+                {a.icon && <span className="squisq-scene-action-icon">{a.icon}</span>}
+                <span className="squisq-scene-action-label">{a.label}</span>
+              </button>
+            );
+            return a.popover ? (
+              <span key={a.id} className="squisq-scene-action-popover-anchor">
+                {button}
+                {a.popover}
+              </span>
+            ) : (
+              button
+            );
+          })}
         </div>
       )}
     </div>

package/src/scene/SceneViewControls.tsx

@@ -0,0 +1,43 @@
+import { Icon } from '../Icon';
+
+interface SceneViewControlsProps {
+  scale: number;
+  fit: boolean;
+  onZoomOut: () => void;
+  onZoomIn: () => void;
+  onFit: () => void;
+}
+
+/** Shared zoom/fit chrome for source-backed simple and complex diagrams. */
+export function SceneViewControls({
+  scale,
+  fit,
+  onZoomOut,
+  onZoomIn,
+  onFit,
+}: SceneViewControlsProps) {
+  return (
+    <div className="squisq-scene-view-controls" role="toolbar" aria-label="Diagram view">
+      <button type="button" onClick={onZoomOut} title="Zoom out" aria-label="Zoom out">
+        <Icon icon="fa-solid fa-minus" />
+      </button>
+      <output className="squisq-scene-view-scale" aria-label="Diagram zoom">
+        {Math.round(scale * 100)}%
+      </output>
+      <button type="button" onClick={onZoomIn} title="Zoom in" aria-label="Zoom in">
+        <Icon icon="fa-solid fa-plus" />
+      </button>
+      <button
+        type="button"
+        className="squisq-scene-view-fit"
+        data-active={fit || undefined}
+        aria-pressed={fit}
+        onClick={onFit}
+        title="Fit all shapes in the canvas"
+        aria-label="Fit diagram"
+      >
+        Fit
+      </button>
+    </div>
+  );
+}