@matchina/viz-svg 0.1.0-alpha.1

package/dist/SvgInspector.d.ts

@@ -0,0 +1,17 @@
+import type { MachineShape } from 'matchina';
+import type { ElkLayoutOptions, SvgLayout } from './elk-layout.js';
+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;
+}
+export declare const SvgInspector: any;
+export default SvgInspector;

package/dist/SvgInspector.js

@@ -0,0 +1,586 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.SvgInspector = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _elkLayout = require("./elk-layout.js");
+var _svgPath = require("./svg-path.js");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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))"
+};
+function NodeShape({
+  node,
+  isActive,
+  isAncestor
+}) {
+  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 /* @__PURE__ */_react.default.createElement("g", null, /* @__PURE__ */_react.default.createElement("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 ? /* @__PURE__ */_react.default.createElement("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) : /* @__PURE__ */_react.default.createElement("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), isActive && !node.isCompound && /* @__PURE__ */_react.default.createElement("circle", {
+    cx: node.x + node.width - 10,
+    cy: node.y + 10,
+    r: 4,
+    style: {
+      fill: V.accent
+    }
+  }, /* @__PURE__ */_react.default.createElement("animate", {
+    attributeName: "opacity",
+    values: "1;0.35;1",
+    dur: "1.6s",
+    repeatCount: "indefinite"
+  })));
+}
+function SelfLoopShape({
+  edge,
+  node,
+  isOutgoing,
+  onFire,
+  loopIndex
+}) {
+  const [hovered, setHovered] = (0, _react.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;
+  const sy = node.y + hh;
+  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 /* @__PURE__ */_react.default.createElement("g", {
+    style: {
+      cursor: isOutgoing ? "pointer" : "default"
+    },
+    onClick: isOutgoing ? () => onFire(edge.event) : void 0,
+    onMouseEnter: isOutgoing ? () => setHovered(true) : void 0,
+    onMouseLeave: isOutgoing ? () => setHovered(false) : void 0
+  }, isOutgoing && /* @__PURE__ */_react.default.createElement("path", {
+    d,
+    fill: "none",
+    stroke: "transparent",
+    strokeWidth: 14
+  }), /* @__PURE__ */_react.default.createElement("path", {
+    d,
+    fill: "none",
+    style: {
+      stroke,
+      strokeWidth,
+      opacity,
+      transition: "stroke 220ms ease, opacity 220ms ease"
+    },
+    markerEnd: `url(#${markerId})`
+  }), label && /* @__PURE__ */_react.default.createElement("g", {
+    transform: `translate(${labelX}, ${labelY - label.height / 2})`,
+    style: {
+      opacity,
+      transition: "opacity 220ms ease",
+      cursor: isOutgoing ? "pointer" : "default"
+    },
+    onClick: isOutgoing ? () => onFire(edge.event) : void 0
+  }, /* @__PURE__ */_react.default.createElement("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"
+    }
+  }), /* @__PURE__ */_react.default.createElement("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)));
+}
+function EdgeShape({
+  edge,
+  isOutgoing,
+  onFire,
+  labelT = 0.5
+}) {
+  const [hovered, setHovered] = (0, _react.useState)(false);
+  const section = edge.sections?.[0];
+  if (!section?.startPoint || !section?.endPoint) return null;
+  const d = (0, _svgPath.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";
+  const mid = label ? (0, _svgPath.pathAtT)(section, labelT) : null;
+  return /* @__PURE__ */_react.default.createElement("g", {
+    style: {
+      cursor: isOutgoing ? "pointer" : "default"
+    },
+    onClick: isOutgoing ? () => onFire(edge.event) : void 0,
+    onMouseEnter: isOutgoing ? () => setHovered(true) : void 0,
+    onMouseLeave: isOutgoing ? () => setHovered(false) : void 0
+  }, isOutgoing && /* @__PURE__ */_react.default.createElement("path", {
+    d,
+    fill: "none",
+    stroke: "transparent",
+    strokeWidth: 18
+  }), /* @__PURE__ */_react.default.createElement("path", {
+    d,
+    fill: "none",
+    style: {
+      stroke,
+      strokeWidth,
+      opacity,
+      transition: "stroke 220ms ease, opacity 220ms ease"
+    },
+    markerEnd: `url(#${markerId})`
+  }), label && mid && /* @__PURE__ */_react.default.createElement("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) : void 0
+  }, /* @__PURE__ */_react.default.createElement("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"
+    }
+  }), /* @__PURE__ */_react.default.createElement("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)));
+}
+const ctrlBtn = {
+  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
+};
+const MAX_FIT_ZOOM = 1;
+function computeFit(contentW, contentH, containerW, containerH) {
+  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
+  };
+}
+const SvgInspector = exports.SvgInspector = _react.default.memo(function SvgInspector2({
+  shape,
+  value,
+  onFire,
+  options,
+  interactive = true,
+  precomputedLayout
+}) {
+  const [layout, setLayout] = (0, _react.useState)(precomputedLayout ?? null);
+  const [pan, setPan] = (0, _react.useState)({
+    x: 20,
+    y: 20
+  });
+  const [zoom, setZoom] = (0, _react.useState)(1);
+  const [interacted, setInteracted] = (0, _react.useState)(false);
+  const dragRef = (0, _react.useRef)({
+    active: false,
+    sx: 0,
+    sy: 0,
+    px: 0,
+    py: 0
+  });
+  const containerRef = (0, _react.useRef)(null);
+  const optionsKey = JSON.stringify(options ?? {});
+  const initialOptionsKey = (0, _react.useRef)(optionsKey);
+  const initialShapeRef = (0, _react.useRef)(shape);
+  (0, _react.useEffect)(() => {
+    if (precomputedLayout && shape === initialShapeRef.current && optionsKey === initialOptionsKey.current) {
+      return;
+    }
+    (0, _elkLayout.runElkLayout)(shape, options ?? {}).then(l => {
+      setLayout(l);
+      if (interacted) fitToContainer(l);
+    }).catch(console.error);
+  }, [shape, optionsKey]);
+  function fitToContainer(l) {
+    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);
+  }
+  function leaveViewBoxMode(l) {
+    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);
+  }
+  const activePath = (0, _react.useMemo)(() => value ? value.split(".") : [], [value]);
+  const activeLeafId = value;
+  const activeAncestorIds = (0, _react.useMemo)(() => {
+    const set = /* @__PURE__ */new Set();
+    for (let i = 0; i < activePath.length - 1; i++) {
+      set.add(activePath.slice(0, i + 1).join("."));
+    }
+    return set;
+  }, [activePath]);
+  const activeSourceIds = (0, _react.useMemo)(() => {
+    const set = /* @__PURE__ */new Set();
+    for (let i = 1; i <= activePath.length; i++) {
+      set.add(activePath.slice(0, i).join("."));
+    }
+    return set;
+  }, [activePath]);
+  function handleFire(event) {
+    if (interactive) onFire?.(event);
+  }
+  function onWheel(e) {
+    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) {
+    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) {
+    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;
+  }
+  const edgeLabelT = (0, _react.useMemo)(() => {
+    const allEdges = layout?.edges ?? [];
+    const pairNextIdx = /* @__PURE__ */new Map();
+    const pairTotal = /* @__PURE__ */new Map();
+    for (const edge of allEdges) {
+      const key = `${edge.sourcePath.join(".")}\u2192${edge.targetPath.join(".")}`;
+      pairTotal.set(key, (pairTotal.get(key) ?? 0) + 1);
+    }
+    const result = /* @__PURE__ */new Map();
+    for (const edge of allEdges) {
+      const key = `${edge.sourcePath.join(".")}\u2192${edge.targetPath.join(".")}`;
+      const count = pairTotal.get(key) ?? 1;
+      const idx = pairNextIdx.get(key) ?? 0;
+      pairNextIdx.set(key, idx + 1);
+      const t = count === 1 ? 0.5 : 0.3 + idx / (count - 1) * 0.4;
+      result.set(edge.id, t);
+    }
+    return result;
+  }, [layout]);
+  if (!layout) {
+    return /* @__PURE__ */_react.default.createElement("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        background: V.bg,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, /* @__PURE__ */_react.default.createElement("span", {
+      style: {
+        color: V.edge,
+        fontFamily: "var(--matchina-viz-font, 'JetBrains Mono', monospace)",
+        fontSize: 12
+      }
+    }, "computing layout\u2026"));
+  }
+  const {
+    nodes,
+    edges,
+    width,
+    height
+  } = layout;
+  const compounds = nodes.filter(n => n.isCompound);
+  const leaves = nodes.filter(n => !n.isCompound);
+  return /* @__PURE__ */_react.default.createElement("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,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+    onMouseLeave: onMouseUp
+  }, /* @__PURE__ */_react.default.createElement("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"
+    })
+  }, /* @__PURE__ */_react.default.createElement("defs", null, /* @__PURE__ */_react.default.createElement("marker", {
+    id: "matchina-svg-arrow",
+    viewBox: "0 0 10 10",
+    refX: "9",
+    refY: "5",
+    markerWidth: "7",
+    markerHeight: "7",
+    orient: "auto-start-reverse"
+  }, /* @__PURE__ */_react.default.createElement("path", {
+    d: "M 0 0 L 10 5 L 0 10 z",
+    style: {
+      fill: "rgba(100,116,139,0.7)"
+    }
+  })), /* @__PURE__ */_react.default.createElement("marker", {
+    id: "matchina-svg-arrow-active",
+    viewBox: "0 0 10 10",
+    refX: "9",
+    refY: "5",
+    markerWidth: "7",
+    markerHeight: "7",
+    orient: "auto-start-reverse"
+  }, /* @__PURE__ */_react.default.createElement("path", {
+    d: "M 0 0 L 10 5 L 0 10 z",
+    style: {
+      fill: V.accent
+    }
+  }))), /* @__PURE__ */_react.default.createElement("g", {
+    transform: interacted ? `translate(${pan.x}, ${pan.y}) scale(${zoom})` : void 0
+  }, compounds.map(node => /* @__PURE__ */_react.default.createElement(NodeShape, {
+    key: node.id,
+    node,
+    isActive: node.id === activeLeafId,
+    isAncestor: activeAncestorIds.has(node.id)
+  })), (() => {
+    const nodeById = new Map(nodes.map(n => [n.id, n]));
+    const selfLoopIndexByNode = /* @__PURE__ */new Map();
+    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 /* @__PURE__ */_react.default.createElement(SelfLoopShape, {
+          key: edge.id,
+          edge,
+          node,
+          isOutgoing,
+          onFire: handleFire,
+          loopIndex
+        });
+      }
+      return /* @__PURE__ */_react.default.createElement(EdgeShape, {
+        key: edge.id,
+        edge,
+        isOutgoing,
+        onFire: handleFire,
+        labelT: edgeLabelT.get(edge.id) ?? 0.5
+      });
+    });
+  })(), leaves.map(node => /* @__PURE__ */_react.default.createElement(NodeShape, {
+    key: node.id,
+    node,
+    isActive: node.id === activeLeafId,
+    isAncestor: activeAncestorIds.has(node.id)
+  })))), /* @__PURE__ */_react.default.createElement("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"
+    }
+  }, /* @__PURE__ */_react.default.createElement("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
+  }, "+"), /* @__PURE__ */_react.default.createElement("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}`
+    }
+  }, "\u2212"), /* @__PURE__ */_react.default.createElement("button", {
+    "aria-label": "Fit view",
+    title: "Fit view",
+    onClick: () => layout && leaveViewBoxMode(layout),
+    style: {
+      ...ctrlBtn,
+      borderTop: `1px solid ${V.ctrlBorder}`
+    }
+  }, "\u26F6")));
+});
+module.exports = SvgInspector;