@matchina/viz-svg 0.1.0-alpha.1

package/src/SvgInspector.tsx

@@ -0,0 +1,613 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { MachineShape } from 'matchina';
+import { runElkLayout } from './elk-layout.js';
+import type { ElkLayoutOptions, SvgEdge, SvgLayout, SvgNode } from './elk-layout.js';
+import { buildCurvedPath, pathAtT } from './svg-path.js';
+
+// CSS variable names with their default values (dark teal theme).
+// Consumers can override any of these on a parent element.
+//
+//   --matchina-viz-accent          active highlight color
+//   --matchina-viz-bg              canvas background
+//   --matchina-viz-node            leaf node fill
+//   --matchina-viz-node-active     active leaf fill
+//   --matchina-viz-node-compound   compound node fill
+//   --matchina-viz-border          inactive node border
+//   --matchina-viz-text            label text
+//   --matchina-viz-text-active     active label text
+//   --matchina-viz-edge            inactive edge stroke
+
+const V = {
+  accent: 'var(--matchina-viz-accent, #2dd4bf)',
+  bg: 'var(--matchina-viz-bg, #0a0f17)',
+  node: 'var(--matchina-viz-node, rgba(28,38,54,0.95))',
+  nodeActive: 'var(--matchina-viz-node-active, rgba(20,90,82,0.85))',
+  nodeCompound: 'var(--matchina-viz-node-compound, rgba(20,28,40,0.7))',
+  border: 'var(--matchina-viz-border, rgba(148,163,184,0.25))',
+  text: 'var(--matchina-viz-text, rgba(226,232,240,0.92))',
+  textActive: 'var(--matchina-viz-text-active, #e6fffb)',
+  edge: 'var(--matchina-viz-edge, rgba(100,116,139,0.55))',
+  labelBg: 'var(--matchina-viz-label-bg, rgba(15,23,33,0.95))',
+  labelBgActive: 'var(--matchina-viz-label-bg-active, rgba(8,47,51,0.95))',
+  labelText: 'var(--matchina-viz-label-text, rgba(203,213,225,0.82))',
+  ctrlBg: 'var(--matchina-viz-ctrl-bg, rgba(20,28,40,0.85))',
+  ctrlBorder: 'var(--matchina-viz-ctrl-border, rgba(148,163,184,0.24))',
+  ctrlText: 'var(--matchina-viz-ctrl-text, rgba(226,232,240,0.65))',
+} as const;
+
+function NodeShape({ node, isActive, isAncestor }: {
+  node: SvgNode;
+  isActive: boolean;
+  isAncestor: boolean;
+}) {
+  const stroke = isActive || isAncestor ? V.accent : V.border;
+  const strokeWidth = isActive ? 2 : isAncestor ? 1.5 : 1;
+  const fill = node.isCompound
+    ? V.nodeCompound
+    : isActive
+    ? V.nodeActive
+    : V.node;
+  const textFill = isActive ? V.textActive : isActive || isAncestor ? V.accent : V.text;
+
+  return (
+    <g>
+      <rect
+        x={node.x} y={node.y}
+        width={node.width} height={node.height}
+        rx={10} ry={10}
+        style={{ fill, stroke, strokeWidth, transition: 'stroke 280ms ease, fill 280ms ease' }}
+      />
+      {node.isCompound ? (
+        <text
+          x={node.x + 14} y={node.y + 22}
+          style={{
+            fill: isActive || isAncestor ? V.accent : V.text,
+            fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+            fontSize: 12,
+            fontWeight: 600,
+            letterSpacing: '0.06em',
+            transition: 'fill 280ms ease',
+          }}
+        >
+          {node.label}
+        </text>
+      ) : (
+        <text
+          x={node.x + node.width / 2} y={node.y + node.height / 2 + 5}
+          textAnchor="middle"
+          style={{
+            fill: textFill,
+            fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+            fontSize: 14,
+            fontWeight: isActive ? 600 : 500,
+            transition: 'fill 280ms ease',
+          }}
+        >
+          {node.label}
+        </text>
+      )}
+      {isActive && !node.isCompound && (
+        <circle cx={node.x + node.width - 10} cy={node.y + 10} r={4} style={{ fill: V.accent }}>
+          <animate attributeName="opacity" values="1;0.35;1" dur="1.6s" repeatCount="indefinite" />
+        </circle>
+      )}
+    </g>
+  );
+}
+
+// Self-loop: cubic bezier looping out from the top-right corner of the node.
+// Ported from FloatingEdge.tsx in viz-reactflow — stacks multiple loops by index.
+function SelfLoopShape({ edge, node, isOutgoing, onFire, loopIndex }: {
+  edge: SvgEdge;
+  node: SvgNode;
+  isOutgoing: boolean;
+  onFire: (event: string) => void;
+  loopIndex: number;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const stroke = isOutgoing ? V.accent : V.edge;
+  const strokeWidth = isOutgoing ? (hovered ? 2.5 : 2) : 1.25;
+  const opacity = isOutgoing ? 1 : 0.65;
+  const markerId = isOutgoing ? 'matchina-svg-arrow-active' : 'matchina-svg-arrow';
+  const { label } = edge;
+
+  const hw = node.width / 2;
+  const hh = node.height / 2;
+  const sx = node.x + hw; // node center x
+  const sy = node.y + hh; // node center y
+  const loopRadius = 28 + loopIndex * 16;
+
+  const startX = sx + hw - 8 - loopIndex * 2;
+  const startY = sy - hh;
+  const endX = sx + hw;
+  const endY = sy - hh + 8 + loopIndex * 2;
+
+  const d = `M ${startX} ${startY} C ${startX} ${startY - loopRadius}, ${endX + loopRadius} ${endY}, ${endX} ${endY}`;
+  const labelX = sx + hw + loopRadius + 4;
+  const labelY = sy - hh - 10 + loopIndex * (label ? label.height + 8 : 24);
+
+  return (
+    <g
+      style={{ cursor: isOutgoing ? 'pointer' : 'default' }}
+      onClick={isOutgoing ? () => onFire(edge.event) : undefined}
+      onMouseEnter={isOutgoing ? () => setHovered(true) : undefined}
+      onMouseLeave={isOutgoing ? () => setHovered(false) : undefined}
+    >
+      {isOutgoing && <path d={d} fill="none" stroke="transparent" strokeWidth={14} />}
+      <path
+        d={d} fill="none"
+        style={{ stroke, strokeWidth, opacity, transition: 'stroke 220ms ease, opacity 220ms ease' }}
+        markerEnd={`url(#${markerId})`}
+      />
+      {label && (
+        <g
+          transform={`translate(${labelX}, ${labelY - label.height / 2})`}
+          style={{ opacity, transition: 'opacity 220ms ease', cursor: isOutgoing ? 'pointer' : 'default' }}
+          onClick={isOutgoing ? () => onFire(edge.event) : undefined}
+        >
+          <rect
+            x={-6} y={-2}
+            width={label.width + 12} height={label.height + 4}
+            rx={6} ry={6}
+            style={{
+              fill: isOutgoing ? (hovered ? V.accent : V.labelBgActive) : V.labelBg,
+              stroke: isOutgoing ? V.accent : 'rgba(100,116,139,0.45)',
+              strokeWidth: isOutgoing ? 1 : 0.75,
+              transition: 'fill 150ms ease, stroke 150ms ease',
+            }}
+          />
+          <text
+            x={label.width / 2} y={(label.height + 4) / 2 + 4}
+            textAnchor="middle"
+            style={{
+              fill: isOutgoing ? (hovered ? V.labelBg : V.accent) : V.labelText,
+              fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+              fontSize: 11,
+              fontWeight: isOutgoing ? 600 : 500,
+              letterSpacing: '0.04em',
+              userSelect: 'none',
+              transition: 'fill 150ms ease',
+            }}
+          >
+            {label.text}
+          </text>
+        </g>
+      )}
+    </g>
+  );
+}
+
+function EdgeShape({ edge, isOutgoing, onFire, labelT = 0.5 }: {
+  edge: SvgEdge;
+  isOutgoing: boolean;
+  onFire: (event: string) => void;
+  labelT?: number;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const section = edge.sections?.[0];
+  if (!section?.startPoint || !section?.endPoint) return null;
+
+  const d = buildCurvedPath(section);
+  const stroke = isOutgoing ? V.accent : V.edge;
+  const strokeWidth = isOutgoing ? (hovered ? 2.5 : 2) : 1.25;
+  const opacity = isOutgoing ? 1 : 0.65;
+  const { label } = edge;
+  const markerId = isOutgoing ? 'matchina-svg-arrow-active' : 'matchina-svg-arrow';
+
+  // Use labelT to spread parallel edge labels along the path instead of all at midpoint.
+  const mid = label ? pathAtT(section, labelT) : null;
+
+  return (
+    <g
+      style={{ cursor: isOutgoing ? 'pointer' : 'default' }}
+      onClick={isOutgoing ? () => onFire(edge.event) : undefined}
+      onMouseEnter={isOutgoing ? () => setHovered(true) : undefined}
+      onMouseLeave={isOutgoing ? () => setHovered(false) : undefined}
+    >
+      {isOutgoing && (
+        <path d={d} fill="none" stroke="transparent" strokeWidth={18} />
+      )}
+      <path
+        d={d} fill="none"
+        style={{
+          stroke, strokeWidth, opacity,
+          transition: 'stroke 220ms ease, opacity 220ms ease',
+        }}
+        markerEnd={`url(#${markerId})`}
+      />
+      {label && mid && (
+        <g
+          transform={`translate(${mid.x - label.width / 2}, ${mid.y - label.height / 2})`}
+          style={{ opacity, transition: 'opacity 220ms ease', cursor: isOutgoing ? 'pointer' : 'default' }}
+          onClick={isOutgoing ? () => onFire(edge.event) : undefined}
+        >
+          <rect
+            x={-6} y={-2}
+            width={label.width + 12} height={label.height + 4}
+            rx={6} ry={6}
+            style={{
+              fill: isOutgoing
+                ? hovered ? V.accent : V.labelBgActive
+                : V.labelBg,
+              stroke: isOutgoing ? V.accent : 'rgba(100,116,139,0.45)',
+              strokeWidth: isOutgoing ? 1 : 0.75,
+              transition: 'fill 150ms ease, stroke 150ms ease',
+            }}
+          />
+          <text
+            x={label.width / 2} y={(label.height + 4) / 2 + 4}
+            textAnchor="middle"
+            style={{
+              fill: isOutgoing
+                ? hovered ? V.labelBg : V.accent
+                : V.labelText,
+              fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+              fontSize: 11,
+              fontWeight: isOutgoing ? 600 : 500,
+              letterSpacing: '0.04em',
+              userSelect: 'none',
+              transition: 'fill 150ms ease',
+            }}
+          >
+            {label.text}
+          </text>
+        </g>
+      )}
+    </g>
+  );
+}
+
+const ctrlBtn: React.CSSProperties = {
+  background: 'transparent',
+  border: 'none',
+  color: V.ctrlText,
+  // 44×44 meets a11y touch-target minimum on coarse pointers; on fine pointers
+  // (mouse) the visual hit area is still adequate. Keeps the corner control
+  // stack compact while remaining tappable on mobile.
+  width: 44,
+  height: 44,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+  fontSize: 14,
+  lineHeight: 1,
+  cursor: 'pointer',
+  padding: 0,
+};
+
+export interface SvgInspectorProps {
+  shape: MachineShape;
+  value: string;
+  onFire?: (event: string) => void;
+  options?: ElkLayoutOptions;
+  interactive?: boolean;
+  /**
+   * Pre-computed layout (e.g. from runElkLayout in an Astro frontmatter, serialized to JSON).
+   * When supplied, the inspector renders synchronously from this layout — no "computing layout…"
+   * placeholder on first paint. ELK still re-runs in the background when `options` changes after mount.
+   */
+  precomputedLayout?: SvgLayout;
+}
+
+const MAX_FIT_ZOOM = 1.0;
+
+function computeFit(
+  contentW: number,
+  contentH: number,
+  containerW: number,
+  containerH: number,
+): { zoom: number; pan: { x: number; y: number } } {
+  const scaleX = containerW / contentW;
+  const scaleY = containerH / contentH;
+  const zoom = Math.min(scaleX, scaleY, MAX_FIT_ZOOM);
+  const pan = {
+    x: (containerW - contentW * zoom) / 2,
+    y: (containerH - contentH * zoom) / 2,
+  };
+  return { zoom, pan };
+}
+
+export const SvgInspector = React.memo(function SvgInspector({
+  shape,
+  value,
+  onFire,
+  options,
+  interactive = true,
+  precomputedLayout,
+}: SvgInspectorProps) {
+  const [layout, setLayout] = useState<SvgLayout | null>(precomputedLayout ?? null);
+  const [pan, setPan] = useState({ x: 20, y: 20 });
+  const [zoom, setZoom] = useState(1);
+  // `interacted` flips true on the first wheel/drag/fit. Until then we render via
+  // SVG's native viewBox so the diagram is centered and scaled to fit without any
+  // JS-driven post-mount fit — making the SSR'd initial frame correct on first paint.
+  const [interacted, setInteracted] = useState(false);
+  const dragRef = useRef({ active: false, sx: 0, sy: 0, px: 0, py: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Stable options key — re-layout only when options actually change
+  const optionsKey = JSON.stringify(options ?? {});
+  const initialOptionsKey = useRef(optionsKey);
+  const initialShapeRef = useRef(shape);
+
+  useEffect(() => {
+    // Skip the initial ELK run when we already have a precomputed layout for the same inputs.
+    if (
+      precomputedLayout &&
+      shape === initialShapeRef.current &&
+      optionsKey === initialOptionsKey.current
+    ) {
+      return;
+    }
+    runElkLayout(shape, options ?? {}).then((l) => {
+      setLayout(l);
+      // When layout changes after the user has already started interacting,
+      // re-fit so the new graph isn't off-screen.
+      if (interacted) fitToContainer(l);
+    }).catch(console.error);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shape, optionsKey]);
+
+  function fitToContainer(l: SvgLayout) {
+    const el = containerRef.current;
+    if (!el) return;
+    const { zoom: z, pan: p } = computeFit(l.width, l.height, el.clientWidth, el.clientHeight);
+    setZoom(z);
+    setPan(p);
+  }
+
+  /**
+   * Compute the effective pan+zoom that the pre-interaction viewBox is currently producing,
+   * then seed state with those values and flip into imperative-transform mode. This
+   * keeps the diagram visually identical across the viewBox→transform handoff: same
+   * scale, same center. The MAX_FIT_ZOOM cap matches the viewBox path below, which
+   * expands the viewBox to container dimensions when content is smaller than the
+   * container so small diagrams render at 1x rather than ballooning to fill.
+   */
+  function leaveViewBoxMode(l: SvgLayout) {
+    const el = containerRef.current;
+    if (!el) { setInteracted(true); return; }
+    const scaleX = el.clientWidth / l.width;
+    const scaleY = el.clientHeight / l.height;
+    const z = Math.min(scaleX, scaleY, MAX_FIT_ZOOM);
+    const p = {
+      x: (el.clientWidth - l.width * z) / 2,
+      y: (el.clientHeight - l.height * z) / 2,
+    };
+    setZoom(z);
+    setPan(p);
+    setInteracted(true);
+  }
+
+  // Derive active paths from the current state value (dot-separated fullKey)
+  const activePath = useMemo(() => (value ? value.split('.') : []), [value]);
+
+  const activeLeafId = value;
+  const activeAncestorIds = useMemo(() => {
+    const set = new Set<string>();
+    for (let i = 0; i < activePath.length - 1; i++) {
+      set.add(activePath.slice(0, i + 1).join('.'));
+    }
+    return set;
+  }, [activePath]);
+
+  // Outgoing edges: source is on the active path (leaf or any ancestor)
+  const activeSourceIds = useMemo(() => {
+    const set = new Set<string>();
+    for (let i = 1; i <= activePath.length; i++) {
+      set.add(activePath.slice(0, i).join('.'));
+    }
+    return set;
+  }, [activePath]);
+
+  function handleFire(event: string) {
+    if (interactive) onFire?.(event);
+  }
+
+  function onWheel(e: React.WheelEvent) {
+    e.preventDefault();
+    if (!interacted && layout) leaveViewBoxMode(layout);
+    setZoom(z => Math.min(2.5, Math.max(0.3, z * (e.deltaY > 0 ? 0.92 : 1.08))));
+  }
+
+  function onMouseDown(e: React.MouseEvent) {
+    if (e.button !== 0) return;
+    if (!interacted && layout) leaveViewBoxMode(layout);
+    dragRef.current = { active: true, sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y };
+  }
+  function onMouseMove(e: React.MouseEvent) {
+    if (!dragRef.current.active) return;
+    setPan({
+      x: dragRef.current.px + e.clientX - dragRef.current.sx,
+      y: dragRef.current.py + e.clientY - dragRef.current.sy,
+    });
+  }
+  function onMouseUp() { dragRef.current.active = false; }
+
+  // Spread label positions for parallel edges (same source→target pair).
+  // Uses evenly spaced t values across [0.3..0.7] so labels don't stack.
+  // Must be before the early return to satisfy Rules of Hooks.
+  const edgeLabelT = useMemo(() => {
+    const allEdges = layout?.edges ?? [];
+    const pairNextIdx = new Map<string, number>();
+    const pairTotal = new Map<string, number>();
+    for (const edge of allEdges) {
+      const key = `${edge.sourcePath.join('.')}→${edge.targetPath.join('.')}`;
+      pairTotal.set(key, (pairTotal.get(key) ?? 0) + 1);
+    }
+    const result = new Map<string, number>();
+    for (const edge of allEdges) {
+      const key = `${edge.sourcePath.join('.')}→${edge.targetPath.join('.')}`;
+      const count = pairTotal.get(key) ?? 1;
+      const idx = pairNextIdx.get(key) ?? 0;
+      pairNextIdx.set(key, idx + 1);
+      // Spread evenly: 1 edge → 0.5, 2 → [0.35, 0.65], 3 → [0.3, 0.5, 0.7], etc.
+      const t = count === 1 ? 0.5 : 0.3 + (idx / (count - 1)) * 0.4;
+      result.set(edge.id, t);
+    }
+    return result;
+  }, [layout]);
+
+  if (!layout) {
+    return (
+      <div style={{ width: '100%', height: '100%', background: V.bg, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <span style={{ color: V.edge, fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)", fontSize: 12 }}>computing layout…</span>
+      </div>
+    );
+  }
+
+  const { nodes, edges, width, height } = layout;
+  const compounds = nodes.filter(n => n.isCompound);
+  const leaves = nodes.filter(n => !n.isCompound);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        cursor: 'grab',
+        background: V.bg,
+        backgroundImage: `radial-gradient(ellipse 80% 60% at 70% 0%, color-mix(in srgb, ${V.accent} 5%, transparent), transparent 60%)`,
+        // Pre-interaction we let the SVG act as a flex item so its maxWidth/maxHeight
+        // (set to content dimensions) caps it at 1x and centers it. Post-interaction
+        // the inner <g transform> controls placement, so we revert to block layout.
+        ...(!interacted && {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }),
+      }}
+      onWheel={onWheel}
+      onMouseDown={onMouseDown}
+      onMouseMove={onMouseMove}
+      onMouseUp={onMouseUp}
+      onMouseLeave={onMouseUp}
+    >
+      <svg
+        {...(interacted && { width: '100%', height: '100%' })}
+        style={{
+          display: 'block',
+          // Pre-interaction: cap intrinsic size at the content's natural dimensions so
+          // small diagrams sit at 1x (centered by the parent flex container) instead of
+          // ballooning to fill via viewBox. Larger diagrams still shrink to fit via the
+          // viewBox + `meet` because we still allow width/height to expand to 100%.
+          ...(!interacted && {
+            width: '100%',
+            height: '100%',
+            maxWidth: width,
+            maxHeight: height,
+          }),
+        }}
+        {...(!interacted && {
+          viewBox: `0 0 ${width} ${height}`,
+          preserveAspectRatio: 'xMidYMid meet',
+        })}
+      >
+        <defs>
+          <marker id="matchina-svg-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" style={{ fill: 'rgba(100,116,139,0.7)' }} />
+          </marker>
+          <marker id="matchina-svg-arrow-active" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" style={{ fill: V.accent }} />
+          </marker>
+        </defs>
+
+        <g transform={interacted ? `translate(${pan.x}, ${pan.y}) scale(${zoom})` : undefined}>
+          {/* Compound containers rendered first (lowest z) */}
+          {compounds.map(node => (
+            <NodeShape
+              key={node.id}
+              node={node}
+              isActive={node.id === activeLeafId}
+              isAncestor={activeAncestorIds.has(node.id)}
+            />
+          ))}
+          {/* Edges — self-loops rendered separately with custom arc geometry */}
+          {(() => {
+            const nodeById = new Map(nodes.map(n => [n.id, n]));
+            const selfLoopIndexByNode = new Map<string, number>();
+            return edges.map(edge => {
+              const isSelf = edge.sourcePath.join('.') === edge.targetPath.join('.');
+              const isOutgoing = activeSourceIds.has(edge.sourcePath.join('.'));
+              if (isSelf) {
+                const nodeId = edge.sourcePath.join('.');
+                const node = nodeById.get(nodeId);
+                if (!node) return null;
+                const loopIndex = selfLoopIndexByNode.get(nodeId) ?? 0;
+                selfLoopIndexByNode.set(nodeId, loopIndex + 1);
+                return (
+                  <SelfLoopShape
+                    key={edge.id}
+                    edge={edge}
+                    node={node}
+                    isOutgoing={isOutgoing}
+                    onFire={handleFire}
+                    loopIndex={loopIndex}
+                  />
+                );
+              }
+              return (
+                <EdgeShape
+                  key={edge.id}
+                  edge={edge}
+                  isOutgoing={isOutgoing}
+                  onFire={handleFire}
+                  labelT={edgeLabelT.get(edge.id) ?? 0.5}
+                />
+              );
+            });
+          })()}
+          {/* Leaves on top */}
+          {leaves.map(node => (
+            <NodeShape
+              key={node.id}
+              node={node}
+              isActive={node.id === activeLeafId}
+              isAncestor={activeAncestorIds.has(node.id)}
+            />
+          ))}
+        </g>
+      </svg>
+
+      <div style={{
+        position: 'absolute', bottom: 14, right: 14,
+        display: 'flex', flexDirection: 'column',
+        background: V.ctrlBg,
+        border: `1px solid ${V.ctrlBorder}`,
+        borderRadius: 'var(--matchina-viz-radius, 2px)',
+        overflow: 'hidden',
+      }}>
+        <button
+          aria-label="Zoom in"
+          title="Zoom in"
+          onClick={() => {
+            if (!interacted && layout) leaveViewBoxMode(layout);
+            setZoom(z => Math.min(2.5, z * 1.15));
+          }}
+          style={ctrlBtn}
+        >+</button>
+        <button
+          aria-label="Zoom out"
+          title="Zoom out"
+          onClick={() => {
+            if (!interacted && layout) leaveViewBoxMode(layout);
+            setZoom(z => Math.max(0.3, z * 0.87));
+          }}
+          style={{ ...ctrlBtn, borderTop: `1px solid ${V.ctrlBorder}` }}
+        >−</button>
+        <button
+          aria-label="Fit view"
+          title="Fit view"
+          onClick={() => layout && leaveViewBoxMode(layout)}
+          style={{ ...ctrlBtn, borderTop: `1px solid ${V.ctrlBorder}` }}
+        >⛶</button>
+      </div>
+    </div>
+  );
+});
+
+export default SvgInspector;