@pipelex/mthds-ui 0.32.0 → 0.33.0

package/dist/graph/index.js

@@ -71,7 +71,7 @@ import {
   stripDomain,
   textWidthPx,
   validateGraphSpec
-} from "../chunk-T5Y7KNCZ.js";
+} from "../chunk-ABUDTHWF.js";
 import {
   makePipeRef,
   parsePipeRef

package/dist/graph/react/graph-core.css

@@ -105,6 +105,19 @@
   inset: 0;
   background: var(--color-bg);
 }
+/* The still presentation (`GraphViewer`'s `interactive={false}`): the drawing
+   is laid in the page like a picture. The container flows in its parent at the
+   height `StillFit` sets inline rather than filling a sized parent, shows the
+   host's surface through it, and takes no pointer event, so a click or the
+   wheel reaches the page beneath. `GraphViewer` also makes it `inert`, which no
+   descendant's own `pointer-events: auto` (a fold button's) can override. */
+.react-flow-container--still {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  background: transparent;
+  pointer-events: none;
+}
 .react-flow__node {
   font-family: var(--font-sans);
   cursor: pointer;

package/dist/graph/react/index.d.ts

@@ -134,6 +134,20 @@ interface GraphViewerProps {
     initialFoldMode?: FoldMode;
     /** Hide the built-in floating toolbar (direction + controllers toggle). */
     hideToolbar?: boolean;
+    /**
+     * `false` draws the graph as a still picture laid in the page, for a host
+     * that shows a method's flowchart before anyone asks to explore it: nothing
+     * pans, zooms, drags or selects, the drawing is `inert` so no button in it
+     * takes a click or the keyboard, a click opens no detail panel and fires no
+     * callback, the wheel scrolls the page, and there is no background, no toolbar
+     * and no detail panel. The drawing is fitted to the container's width, never
+     * past its natural size, and the container takes the height the drawing
+     * needs, so the host gives it a width and no height. Defaults to `true`, the
+     * interactive canvas. Reactive: a host switching to `true` gets the canvas,
+     * fitted to view, and must then size its parent as for any canvas. See
+     * `docs/still-presentation.md`.
+     */
+    interactive?: boolean;
     /**
      * Theme *mode*: `dark | light | system`. Reactive: passing it as a prop drives
      * the active mode, and clearing it back to `undefined` hands control back to

package/dist/graph/react/index.js

@@ -21,7 +21,7 @@ import {
   roundedPolylinePath,
   routeLabelCenter,
   validateGraphSpec
-} from "../../chunk-T5Y7KNCZ.js";
+} from "../../chunk-ABUDTHWF.js";
 import {
   parsePipeRef
 } from "../../chunk-2N65P32H.js";
@@ -68,7 +68,7 @@ import "./viewer/GraphToolbar.css";
 import "./styles/simple/SimpleStyle.css";
 
 // src/graph/react/viewer/GraphViewer.tsx
-import React12 from "react";
+import React13 from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -2556,6 +2556,71 @@ function GraphToolbar({
   ] }) });
 }
 
+// src/graph/react/viewer/StillFit.tsx
+import React11 from "react";
+import { useEdges, useNodes, useNodesInitialized, useReactFlow, useStore } from "@xyflow/react";
+
+// src/graph/react/viewer/stillViewport.ts
+var STILL_PADDING_PX = 16;
+var STILL_PLACEHOLDER_HEIGHT_PX = 120;
+function stillContentBounds(nodeBounds, routes) {
+  let minX = nodeBounds.x;
+  let minY = nodeBounds.y;
+  let maxX = nodeBounds.x + nodeBounds.width;
+  let maxY = nodeBounds.y + nodeBounds.height;
+  const take = (x, y) => {
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+    minX = Math.min(minX, x);
+    minY = Math.min(minY, y);
+    maxX = Math.max(maxX, x);
+    maxY = Math.max(maxY, y);
+  };
+  for (const route of routes) {
+    if (!route) continue;
+    for (const point of route.points) take(point.x, point.y);
+    if (route.label) {
+      take(route.label.x, route.label.y);
+      take(route.label.x + route.label.width, route.label.y + route.label.height);
+    }
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function stillViewport(bounds, containerWidth, padding = STILL_PADDING_PX) {
+  if (!(containerWidth > 0) || !(bounds.width > 0) || !(bounds.height > 0)) return null;
+  const room = Math.max(containerWidth - 2 * padding, 1);
+  const zoom = Math.min(1, room / bounds.width);
+  return {
+    x: (containerWidth - bounds.width * zoom) / 2 - bounds.x * zoom,
+    y: padding - bounds.y * zoom,
+    zoom,
+    height: Math.ceil(bounds.height * zoom + 2 * padding)
+  };
+}
+
+// src/graph/react/viewer/StillFit.tsx
+function StillFit({ onHeight }) {
+  const width = useStore((s) => s.width);
+  const nodesInitialized = useNodesInitialized();
+  const nodes = useNodes();
+  const edges = useEdges();
+  const { getNodesBounds, setViewport } = useReactFlow();
+  React11.useLayoutEffect(() => {
+    if (!nodesInitialized || nodes.length === 0) return;
+    const bounds = stillContentBounds(
+      getNodesBounds(nodes),
+      edges.map((e) => {
+        var _a;
+        return (_a = e.data) == null ? void 0 : _a.route;
+      })
+    );
+    const view = stillViewport(bounds, width);
+    if (!view) return;
+    void setViewport({ x: view.x, y: view.y, zoom: view.zoom });
+    onHeight(view.height);
+  }, [nodesInitialized, nodes, edges, width, getNodesBounds, setViewport, onHeight]);
+  return null;
+}
+
 // src/graph/react/nodes/NodeValidationBadge.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 function NodeValidationBadge({
@@ -3213,6 +3278,19 @@ var nodeTypes = __spreadValues(__spreadProps(__spreadValues({}, controllerNodeTy
   pipeCard: PipeCardRFNode
 }), simpleNodeTypes);
 var edgeTypes = { [EDGE_TYPE_ROUTED]: RoutedEdge };
+var STILL_FLOW_PROPS = {
+  panOnDrag: false,
+  zoomOnScroll: false,
+  zoomOnPinch: false,
+  zoomOnDoubleClick: false,
+  preventScrolling: false,
+  nodesDraggable: false,
+  nodesConnectable: false,
+  nodesFocusable: false,
+  edgesFocusable: false,
+  elementsSelectable: false,
+  disableKeyboardA11y: true
+};
 function StuffNodeDetail({
   nodeId,
   stuffData,
@@ -3316,6 +3394,7 @@ function GraphViewer(props) {
     initialShowControllers,
     initialFoldMode,
     hideToolbar = false,
+    interactive = true,
     theme: themeProp,
     graphStyle: graphStyleProp,
     onGraphStyleChange,
@@ -3340,20 +3419,20 @@ function GraphViewer(props) {
     onValidationIssueClick
   } = props;
   const graphspecProp = (_a = graph == null ? void 0 : graph.graphSpec) != null ? _a : null;
-  const graphspec = React12.useMemo(
+  const graphspec = React13.useMemo(
     () => graphspecProp === null ? null : validateGraphSpec(graphspecProp),
     [graphspecProp]
   );
-  const [direction, setDirection] = React12.useState(
+  const [direction, setDirection] = React13.useState(
     () => {
       var _a2, _b2;
       return (_b2 = (_a2 = initialDirection != null ? initialDirection : config.direction) != null ? _a2 : DEFAULT_GRAPH_CONFIG.direction) != null ? _b2 : GRAPH_DIRECTION.TB;
     }
   );
   const externalMode = resolveExternalThemeMode(themeProp, config.theme);
-  const [mode, setMode] = React12.useState(externalMode);
-  const prevExternalModeRef = React12.useRef(externalMode);
-  React12.useEffect(() => {
+  const [mode, setMode] = React13.useState(externalMode);
+  const prevExternalModeRef = React13.useRef(externalMode);
+  React13.useEffect(() => {
     if (externalMode !== prevExternalModeRef.current) {
       prevExternalModeRef.current = externalMode;
       setMode(externalMode);
@@ -3361,13 +3440,13 @@ function GraphViewer(props) {
   }, [externalMode]);
   const systemTheme = useSystemTheme(systemThemeProp);
   const resolvedTheme = resolveActiveTheme(mode, systemTheme);
-  const onThemeChangeRef = React12.useRef(onThemeChange);
+  const onThemeChangeRef = React13.useRef(onThemeChange);
   onThemeChangeRef.current = onThemeChange;
-  const prevReportedRef = React12.useRef({
+  const prevReportedRef = React13.useRef({
     mode,
     resolvedTheme
   });
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     var _a2;
     const prev = prevReportedRef.current;
     if (prev.mode !== mode || prev.resolvedTheme !== resolvedTheme) {
@@ -3376,48 +3455,48 @@ function GraphViewer(props) {
     }
   }, [mode, resolvedTheme]);
   const externalStyle = resolveGraphStyle(graphStyleProp, config.graphStyle);
-  const [graphStyle, setGraphStyle] = React12.useState(externalStyle);
-  const prevExternalStyleRef = React12.useRef(externalStyle);
-  React12.useEffect(() => {
+  const [graphStyle, setGraphStyle] = React13.useState(externalStyle);
+  const prevExternalStyleRef = React13.useRef(externalStyle);
+  React13.useEffect(() => {
     if (externalStyle !== prevExternalStyleRef.current) {
       prevExternalStyleRef.current = externalStyle;
       setGraphStyle(externalStyle);
     }
   }, [externalStyle]);
-  const onGraphStyleChangeRef = React12.useRef(onGraphStyleChange);
+  const onGraphStyleChangeRef = React13.useRef(onGraphStyleChange);
   onGraphStyleChangeRef.current = onGraphStyleChange;
-  const prevReportedStyleRef = React12.useRef(graphStyle);
-  React12.useEffect(() => {
+  const prevReportedStyleRef = React13.useRef(graphStyle);
+  React13.useEffect(() => {
     var _a2;
     if (prevReportedStyleRef.current !== graphStyle) {
       prevReportedStyleRef.current = graphStyle;
       (_a2 = onGraphStyleChangeRef.current) == null ? void 0 : _a2.call(onGraphStyleChangeRef, graphStyle);
     }
   }, [graphStyle]);
-  const graphStyleRef = React12.useRef(graphStyle);
+  const graphStyleRef = React13.useRef(graphStyle);
   graphStyleRef.current = graphStyle;
   const styleCapabilities = GRAPH_STYLES[graphStyle].capabilities;
   const effectiveFoldMode = (_c = (_b = initialFoldMode != null ? initialFoldMode : config.foldMode) != null ? _b : DEFAULT_GRAPH_CONFIG.foldMode) != null ? _c : FOLD_MODE.EXPANDED;
-  const [showControllers, setShowControllers] = React12.useState(() => {
+  const [showControllers, setShowControllers] = React13.useState(() => {
     var _a2, _b2;
     if (effectiveFoldMode === FOLD_MODE.FOLDED) return true;
     return (_b2 = (_a2 = initialShowControllers != null ? initialShowControllers : config.showControllers) != null ? _a2 : DEFAULT_GRAPH_CONFIG.showControllers) != null ? _b2 : false;
   });
-  const foldModeRef = React12.useRef(effectiveFoldMode);
+  const foldModeRef = React13.useRef(effectiveFoldMode);
   foldModeRef.current = effectiveFoldMode;
-  const containerRef = React12.useRef(null);
-  const [detailSelection, setDetailSelection] = React12.useState(null);
-  const [conceptOverride, setConceptOverride] = React12.useState(null);
+  const containerRef = React13.useRef(null);
+  const [detailSelection, setDetailSelection] = React13.useState(null);
+  const [conceptOverride, setConceptOverride] = React13.useState(null);
   const {
     width: panelWidth,
     isDragging: isPanelDragging,
     handleMouseDown: onResizeMouseDown
   } = useResizable({ defaultWidth: 380, minWidth: 280, maxWidth: 800, containerRef });
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     setDetailSelection(null);
     setConceptOverride(null);
   }, [graphspec]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const themePalette = getPaletteForTheme(resolvedTheme);
@@ -3432,14 +3511,15 @@ function GraphViewer(props) {
       }
     };
   }, [config.paletteColors, resolvedTheme]);
+  const [stillHeight, setStillHeight] = React13.useState(STILL_PLACEHOLDER_HEIGHT_PX);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowRef = React12.useRef(null);
-  const initialDataRef = React12.useRef(null);
-  const rawGraphDataRef = React12.useRef(null);
-  const layoutCacheRef = React12.useRef(null);
-  const [expandedControllers, setExpandedControllers] = React12.useState(/* @__PURE__ */ new Set());
-  const toggleCollapse = React12.useCallback((controllerId) => {
+  const reactFlowRef = React13.useRef(null);
+  const initialDataRef = React13.useRef(null);
+  const rawGraphDataRef = React13.useRef(null);
+  const layoutCacheRef = React13.useRef(null);
+  const [expandedControllers, setExpandedControllers] = React13.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = React13.useCallback((controllerId) => {
     setExpandedControllers((prev) => {
       const next = new Set(prev);
       if (next.has(controllerId)) next.delete(controllerId);
@@ -3447,17 +3527,17 @@ function GraphViewer(props) {
       return next;
     });
   }, []);
-  const [foldedControllers, setFoldedControllers] = React12.useState(/* @__PURE__ */ new Set());
-  const styleDefaultFoldsRef = React12.useRef(/* @__PURE__ */ new Set());
-  const readerOpenedRef = React12.useRef(/* @__PURE__ */ new Set());
-  const markReaderFolds = React12.useCallback((ids, folded) => {
+  const [foldedControllers, setFoldedControllers] = React13.useState(/* @__PURE__ */ new Set());
+  const styleDefaultFoldsRef = React13.useRef(/* @__PURE__ */ new Set());
+  const readerOpenedRef = React13.useRef(/* @__PURE__ */ new Set());
+  const markReaderFolds = React13.useCallback((ids, folded) => {
     for (const id of ids) {
       styleDefaultFoldsRef.current.delete(id);
       if (folded) readerOpenedRef.current.delete(id);
       else readerOpenedRef.current.add(id);
     }
   }, []);
-  const toggleFold = React12.useCallback(
+  const toggleFold = React13.useCallback(
     (controllerId, options) => {
       setFoldedControllers((prev) => {
         const next = new Set(prev);
@@ -3475,43 +3555,45 @@ function GraphViewer(props) {
     [markReaderFolds]
   );
   const edgeType = config.edgeType || EDGE_TYPE.DEFAULT;
-  const layoutConfig = React12.useMemo(
+  const layoutConfig = React13.useMemo(
     () => ({ nodesep: config.nodesep, ranksep: config.ranksep }),
     [config.nodesep, config.ranksep]
   );
-  const showControllersRef = React12.useRef(showControllers);
+  const showControllersRef = React13.useRef(showControllers);
   showControllersRef.current = showControllers;
-  const directionRef = React12.useRef(direction);
+  const directionRef = React13.useRef(direction);
   directionRef.current = direction;
-  const layoutConfigRef = React12.useRef(layoutConfig);
+  const layoutConfigRef = React13.useRef(layoutConfig);
   layoutConfigRef.current = layoutConfig;
-  const initialZoomRef = React12.useRef(config.initialZoom);
+  const initialZoomRef = React13.useRef(config.initialZoom);
   initialZoomRef.current = config.initialZoom;
-  const panToTopRef = React12.useRef(config.panToTop);
+  const panToTopRef = React13.useRef(config.panToTop);
   panToTopRef.current = config.panToTop;
-  const expandedRef = React12.useRef(expandedControllers);
+  const interactiveRef = React13.useRef(interactive);
+  interactiveRef.current = interactive;
+  const expandedRef = React13.useRef(expandedControllers);
   expandedRef.current = expandedControllers;
-  const toggleCollapseRef = React12.useRef(toggleCollapse);
+  const toggleCollapseRef = React13.useRef(toggleCollapse);
   toggleCollapseRef.current = toggleCollapse;
-  const foldedRef = React12.useRef(foldedControllers);
+  const foldedRef = React13.useRef(foldedControllers);
   foldedRef.current = foldedControllers;
-  const toggleFoldRef = React12.useRef(toggleFold);
+  const toggleFoldRef = React13.useRef(toggleFold);
   toggleFoldRef.current = toggleFold;
-  const isFirstFoldEffect = React12.useRef(true);
-  const prevFoldSizeRef = React12.useRef(0);
-  const skipNextFoldEffectRef = React12.useRef(false);
-  const statusMapRef = React12.useRef(statusMap);
+  const isFirstFoldEffect = React13.useRef(true);
+  const prevFoldSizeRef = React13.useRef(0);
+  const skipNextFoldEffectRef = React13.useRef(false);
+  const statusMapRef = React13.useRef(statusMap);
   statusMapRef.current = statusMap;
-  const validationIssuesRef = React12.useRef(validationIssues);
+  const validationIssuesRef = React13.useRef(validationIssues);
   validationIssuesRef.current = validationIssues;
-  const selectedNodeIdRef = React12.useRef(null);
+  const selectedNodeIdRef = React13.useRef(null);
   selectedNodeIdRef.current = (_d = detailSelection == null ? void 0 : detailSelection.nodeId) != null ? _d : null;
-  const [validationOpen, setValidationOpen] = React12.useState(false);
-  const openValidationPanel = React12.useCallback(() => setValidationOpen(true), []);
-  const validationWidgetAvailable = validationState !== void 0 && !hideToolbar;
-  const validationWidgetAvailableRef = React12.useRef(validationWidgetAvailable);
+  const [validationOpen, setValidationOpen] = React13.useState(false);
+  const openValidationPanel = React13.useCallback(() => setValidationOpen(true), []);
+  const validationWidgetAvailable = validationState !== void 0 && !hideToolbar && interactive;
+  const validationWidgetAvailableRef = React13.useRef(validationWidgetAvailable);
   validationWidgetAvailableRef.current = validationWidgetAvailable;
-  const decorateNodes = React12.useCallback(
+  const decorateNodes = React13.useCallback(
     (nodes2) => {
       var _a2, _b2, _c2;
       const raw = rawGraphDataRef.current;
@@ -3532,7 +3614,7 @@ function GraphViewer(props) {
     },
     [openValidationPanel]
   );
-  const frameLayout = React12.useCallback(
+  const frameLayout = React13.useCallback(
     (style, layout, graphspec2, analysis) => GRAPH_STYLE_PIPELINES[style].frame({
       nodes: cloneCachedNodes(layout.nodes),
       edges: layout.edges,
@@ -3551,18 +3633,18 @@ function GraphViewer(props) {
     const data = initialDataRef.current;
     return cache !== null && data !== null && cache.graphspec === data._graphspec && cache.graphStyle === data._graphStyle;
   };
-  const nodesRef = React12.useRef([]);
+  const nodesRef = React13.useRef([]);
   nodesRef.current = nodes;
-  const onValidationIssueClickRef = React12.useRef(onValidationIssueClick);
+  const onValidationIssueClickRef = React13.useRef(onValidationIssueClick);
   onValidationIssueClickRef.current = onValidationIssueClick;
-  const flashTimeoutRef = React12.useRef(null);
-  React12.useEffect(
+  const flashTimeoutRef = React13.useRef(null);
+  React13.useEffect(
     () => () => {
       if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
     },
     []
   );
-  const handleValidationIssueClick = React12.useCallback(
+  const handleValidationIssueClick = React13.useCallback(
     (index, issue) => {
       var _a2, _b2, _c2;
       (_a2 = onValidationIssueClickRef.current) == null ? void 0 : _a2.call(onValidationIssueClickRef, index, issue);
@@ -3605,7 +3687,7 @@ function GraphViewer(props) {
     },
     [setNodes]
   );
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (!initialDataRef.current) return;
     let cancelled = false;
     void (async () => {
@@ -3638,7 +3720,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
@@ -3650,7 +3732,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [direction, layoutConfig]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
@@ -3658,7 +3740,7 @@ function GraphViewer(props) {
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [showControllers, expandedControllers, toggleCollapse, toggleFold, decorateNodes]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     var _a2;
     if (!graphspec) {
       initialDataRef.current = null;
@@ -3758,7 +3840,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
             if (initialZoomRef.current !== void 0 && initialZoomRef.current !== null) {
               void reactFlowRef.current.zoomTo(initialZoomRef.current);
@@ -3777,7 +3859,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [graphspec, edgeType, graphStyle]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     if (isFirstFoldEffect.current) {
       isFirstFoldEffect.current = false;
       prevFoldSizeRef.current = foldedControllers.size;
@@ -3842,7 +3924,7 @@ function GraphViewer(props) {
         setNodes(decorateNodes(withControllers.nodes));
         setEdges(toAppEdges(withControllers.edges));
         setTimeout(() => {
-          if (!cancelled && reactFlowRef.current) {
+          if (!cancelled && reactFlowRef.current && interactiveRef.current) {
             void reactFlowRef.current.fitView({ padding: 0.1 });
           }
         }, 50);
@@ -3854,7 +3936,7 @@ function GraphViewer(props) {
       cancelled = true;
     };
   }, [foldedControllers, toggleFold]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
@@ -3862,14 +3944,14 @@ function GraphViewer(props) {
     setNodes(decorateNodes(withControllers.nodes));
     setEdges(toAppEdges(withControllers.edges));
   }, [statusMap, decorateNodes]);
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const cache = layoutCacheRef.current;
     const data = initialDataRef.current;
     if (!cache || !data || !cacheMatchesData()) return;
     const withControllers = frameLayout(cache.graphStyle, cache, data._graphspec, data._analysis);
     setNodes(decorateNodes(withControllers.nodes));
   }, [validationIssues, validationWidgetAvailable, decorateNodes]);
-  const onNodeClick = React12.useCallback(
+  const onNodeClick = React13.useCallback(
     (event, node) => {
       const nodeData = node.data;
       onNodeSelect == null ? void 0 : onNodeSelect(node.id, nodeData, event);
@@ -3910,7 +3992,7 @@ function GraphViewer(props) {
       conceptOverride
     ]
   );
-  const onInit = React12.useCallback(
+  const onInit = React13.useCallback(
     (reactFlowInstance) => {
       reactFlowRef.current = reactFlowInstance;
       if (onReactFlowInit) {
@@ -3919,12 +4001,28 @@ function GraphViewer(props) {
     },
     [onReactFlowInit]
   );
-  const handlePaneClick = React12.useCallback(() => {
+  const prevInteractiveRef = React13.useRef(interactive);
+  React13.useEffect(() => {
+    if (prevInteractiveRef.current === interactive) return;
+    prevInteractiveRef.current = interactive;
+    if (!interactive) {
+      setDetailSelection(null);
+      setConceptOverride(null);
+      setValidationOpen(false);
+      return;
+    }
+    const timer = setTimeout(() => {
+      var _a2;
+      void ((_a2 = reactFlowRef.current) == null ? void 0 : _a2.fitView({ padding: 0.1 }));
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [interactive]);
+  const handlePaneClick = React13.useCallback(() => {
     setDetailSelection(null);
     setConceptOverride(null);
     onPaneClick == null ? void 0 : onPaneClick();
   }, [onPaneClick]);
-  const handleConceptClick = React12.useCallback(
+  const handleConceptClick = React13.useCallback(
     (conceptCode) => {
       if (!graphspec) return;
       const info = resolveConceptRef(graphspec, conceptCode);
@@ -3941,7 +4039,7 @@ function GraphViewer(props) {
   const rawAnalysis = (_e = rawGraphDataRef.current) == null ? void 0 : _e.analysis;
   const allControllerIds = rawAnalysis == null ? void 0 : rawAnalysis.controllerNodeIds;
   const foldControlsAvailable = styleCapabilities.foldAll && (!styleCapabilities.controllerFrameToggle || showControllers);
-  const foldAllProps = React12.useMemo(() => {
+  const foldAllProps = React13.useMemo(() => {
     if (!foldControlsAvailable || !allControllerIds || allControllerIds.size === 0) {
       return {
         onFoldAll: void 0,
@@ -3963,34 +4061,37 @@ function GraphViewer(props) {
       expandAllDisabled: foldedControllers.size === 0
     };
   }, [foldControlsAvailable, allControllerIds, foldedControllers, markReaderFolds]);
-  const styleMenuOptions = React12.useMemo(() => resolveStyleMenu(styleMenu), [styleMenu]);
+  const styleMenuOptions = React13.useMemo(() => resolveStyleMenu(styleMenu), [styleMenu]);
   return /* @__PURE__ */ jsxs27(
     "div",
     {
       ref: containerRef,
-      className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}`,
+      className: `react-flow-container react-flow-container--theme-${resolvedTheme} react-flow-container--mode-${mode}${interactive ? "" : " react-flow-container--still"}`,
+      style: interactive ? void 0 : { height: stillHeight },
+      inert: !interactive,
       children: [
         /* @__PURE__ */ jsxs27(
           ReactFlow,
-          {
+          __spreadProps(__spreadValues({
             nodes,
             edges,
             nodeTypes,
             edgeTypes,
             onNodesChange,
             onEdgesChange,
-            onNodeClick,
-            onPaneClick: handlePaneClick,
+            onNodeClick: interactive ? onNodeClick : void 0,
+            onPaneClick: interactive ? handlePaneClick : void 0,
             onInit,
-            fitView: true,
+            fitView: interactive,
             fitViewOptions: { padding: 0.1 },
             defaultEdgeOptions: { type: edgeType },
-            panOnScroll: true,
-            minZoom: 0.1,
+            panOnScroll: interactive,
+            minZoom: interactive ? 0.1 : 0.01,
             proOptions: { hideAttribution: true },
-            panActivationKeyCode: null,
+            panActivationKeyCode: null
+          }, interactive ? {} : STILL_FLOW_PROPS), {
             children: [
-              /* @__PURE__ */ jsx29(
+              interactive ? /* @__PURE__ */ jsx29(
                 Background,
                 {
                   variant: BackgroundVariant.Dots,
@@ -3998,8 +4099,8 @@ function GraphViewer(props) {
                   size: 1,
                   color: "var(--color-bg-dots)"
                 }
-              ),
-              !hideToolbar && /* @__PURE__ */ jsx29(
+              ) : /* @__PURE__ */ jsx29(StillFit, { onHeight: setStillHeight }),
+              interactive && !hideToolbar && /* @__PURE__ */ jsx29(
                 GraphToolbar,
                 {
                   direction,
@@ -4037,9 +4138,9 @@ function GraphViewer(props) {
                 }
               )
             ]
-          }
+          })
         ),
-        /* @__PURE__ */ jsxs27(
+        interactive && /* @__PURE__ */ jsxs27(
           DetailPanel,
           {
             isOpen: detailOpen,