@ai-digital-factory/state-flow 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,1721 @@
+// src/StateFlowPlaceholder.tsx
+import { jsx } from "react/jsx-runtime";
+function StateFlowPlaceholder() {
+  return /* @__PURE__ */ jsx("p", { children: "State Flow library stub" });
+}
+
+// src/Flow.tsx
+import { useId, useMemo } from "react";
+
+// src/flow-visuals.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function SvgIcon({
+  children,
+  size = 28
+}) {
+  return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", children });
+}
+function FlowHeaderIcon({ flowId }) {
+  const key = (flowId ?? "").toLowerCase();
+  if (key.includes("visitor") || key.includes("access")) {
+    return /* @__PURE__ */ jsxs(SvgIcon, { children: [
+      /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: "12",
+          cy: "8",
+          r: "3.25",
+          stroke: "currentColor",
+          strokeWidth: "1.75"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round"
+        }
+      )
+    ] });
+  }
+  if (key.includes("operator") || key.includes("session") || key.includes("gate")) {
+    return /* @__PURE__ */ jsxs(SvgIcon, { children: [
+      /* @__PURE__ */ jsx2(
+        "rect",
+        {
+          x: "5",
+          y: "10",
+          width: "14",
+          height: "10",
+          rx: "2",
+          stroke: "currentColor",
+          strokeWidth: "1.75"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M8 10V8a4 4 0 0 1 8 0v2",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round"
+        }
+      )
+    ] });
+  }
+  if (key.includes("search") || key.includes("instrument")) {
+    return /* @__PURE__ */ jsxs(SvgIcon, { children: [
+      /* @__PURE__ */ jsx2(
+        "circle",
+        {
+          cx: "10.5",
+          cy: "10.5",
+          r: "5.5",
+          stroke: "currentColor",
+          strokeWidth: "1.75"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "path",
+        {
+          d: "M15 15l4.5 4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.75",
+          strokeLinecap: "round"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(SvgIcon, { children: [
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x: "3",
+        y: "4",
+        width: "8",
+        height: "6",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.75"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "rect",
+      {
+        x: "13",
+        y: "14",
+        width: "8",
+        height: "6",
+        rx: "2",
+        stroke: "currentColor",
+        strokeWidth: "1.75"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "path",
+      {
+        d: "M11 7h2M11 7l2 7",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function flowNavIcon(flowId) {
+  const key = flowId.toLowerCase();
+  if (key.includes("visitor") || key.includes("access")) {
+    return "\u25CE";
+  }
+  if (key.includes("search") || key.includes("instrument")) {
+    return "\u2315";
+  }
+  if (key.includes("operator") || key.includes("session") || key.includes("gate")) {
+    return "\u2B21";
+  }
+  return "\u25C6";
+}
+
+// src/FlowPageHeader.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function FlowPageHeader({
+  title,
+  description,
+  flowId
+}) {
+  return /* @__PURE__ */ jsxs2("header", { className: "sf-flow-page-header", children: [
+    /* @__PURE__ */ jsx3("div", { className: "sf-flow-page-header-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(FlowHeaderIcon, { flowId: flowId ?? title }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "sf-flow-page-header-text", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "sf-title", children: title }),
+      /* @__PURE__ */ jsx3("p", { className: "sf-intro", children: description })
+    ] })
+  ] });
+}
+
+// src/DiagramOverview.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+
+// src/DiagramLegend.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DiagramLegend() {
+  return /* @__PURE__ */ jsxs3("footer", { className: "sf-diagram-legend", "aria-label": "Diagram legend", children: [
+    /* @__PURE__ */ jsx4("p", { className: "sf-diagram-legend-title", children: "Legend" }),
+    /* @__PURE__ */ jsxs3("ul", { className: "sf-diagram-legend-list", children: [
+      /* @__PURE__ */ jsxs3("li", { children: [
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            className: "sf-diagram-legend-swatch is-active-state",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Active state" }),
+          " \u2014 Selected state."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("li", { children: [
+        /* @__PURE__ */ jsx4("span", { className: "sf-diagram-legend-swatch is-state", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          /* @__PURE__ */ jsx4("strong", { children: "State" }),
+          " \u2014 A possible state."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("li", { children: [
+        /* @__PURE__ */ jsx4("span", { className: "sf-diagram-legend-swatch is-connector", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Transition" }),
+          " \u2014 Movement between states."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("li", { children: [
+        /* @__PURE__ */ jsx4("span", { className: "sf-diagram-legend-swatch is-label", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs3("span", { children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Transition label" }),
+          " \u2014 Event or condition."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/diagram-view-url.ts
+var DIAGRAM_VIEW_ZOOM_MIN = 0.5;
+var DIAGRAM_VIEW_ZOOM_MAX = 2;
+var PARAM_ZOOM = "zoom";
+var PARAM_PAN_X = "panX";
+var PARAM_PAN_Y = "panY";
+var PARAM_STATE = "state";
+var PARAM_TRANSITION = "transition";
+var PARAM_SCROLL_Y = "scrollY";
+function parseFiniteNumber(raw) {
+  if (raw === null || raw === "") {
+    return null;
+  }
+  const value = Number(raw);
+  return Number.isFinite(value) ? value : null;
+}
+function clampDiagramZoom(scale) {
+  return Math.min(
+    DIAGRAM_VIEW_ZOOM_MAX,
+    Math.max(DIAGRAM_VIEW_ZOOM_MIN, scale)
+  );
+}
+function roundZoomForUrl(zoom) {
+  return Math.round(zoom * 1e3) / 1e3;
+}
+function roundPanForUrl(pan) {
+  return Math.round(pan);
+}
+function parseDiagramViewSearchParams(search, defaults) {
+  const params = new URLSearchParams(
+    search.startsWith("?") ? search.slice(1) : search
+  );
+  const zoomRaw = parseFiniteNumber(params.get(PARAM_ZOOM));
+  const panXRaw = parseFiniteNumber(params.get(PARAM_PAN_X));
+  const panYRaw = parseFiniteNumber(params.get(PARAM_PAN_Y));
+  const view = {
+    zoom: zoomRaw !== null ? clampDiagramZoom(zoomRaw) : defaults.zoom,
+    panX: panXRaw !== null ? panXRaw : defaults.panX,
+    panY: panYRaw !== null ? panYRaw : defaults.panY
+  };
+  const stateId = params.get(PARAM_STATE)?.trim() ?? "";
+  const transitionName = params.get(PARAM_TRANSITION)?.trim() ?? "";
+  let focus = null;
+  if (transitionName.length > 0) {
+    focus = { kind: "transition", transitionName };
+  } else if (stateId.length > 0) {
+    focus = { kind: "state", stateId };
+  }
+  return { view, focus };
+}
+function validateDiagramFocus(focus, states, edges) {
+  if (!focus) {
+    return null;
+  }
+  if (focus.kind === "state") {
+    return states.some((state) => state.id === focus.stateId) ? focus : null;
+  }
+  return edges.some((edge) => edge.name === focus.transitionName) ? focus : null;
+}
+function edgeIndexForTransitionName(edges, transitionName) {
+  const index = edges.findIndex((edge) => edge.name === transitionName);
+  return index >= 0 ? index : null;
+}
+function buildDiagramViewSearchParams(existingSearch, view, focus, defaults) {
+  const params = new URLSearchParams(
+    existingSearch.startsWith("?") ? existingSearch.slice(1) : existingSearch
+  );
+  params.delete(PARAM_ZOOM);
+  params.delete(PARAM_PAN_X);
+  params.delete(PARAM_PAN_Y);
+  params.delete(PARAM_STATE);
+  params.delete(PARAM_TRANSITION);
+  if (roundZoomForUrl(view.zoom) !== roundZoomForUrl(defaults.zoom)) {
+    params.set(PARAM_ZOOM, String(roundZoomForUrl(view.zoom)));
+  }
+  if (roundPanForUrl(view.panX) !== roundPanForUrl(defaults.panX)) {
+    params.set(PARAM_PAN_X, String(roundPanForUrl(view.panX)));
+  }
+  if (roundPanForUrl(view.panY) !== roundPanForUrl(defaults.panY)) {
+    params.set(PARAM_PAN_Y, String(roundPanForUrl(view.panY)));
+  }
+  if (focus?.kind === "state") {
+    params.set(PARAM_STATE, focus.stateId);
+  } else if (focus?.kind === "transition") {
+    params.set(PARAM_TRANSITION, focus.transitionName);
+  }
+  const serialized = params.toString();
+  return serialized.length > 0 ? `?${serialized}` : "";
+}
+function parseScrollYFromSearch(search) {
+  const params = new URLSearchParams(
+    search.startsWith("?") ? search.slice(1) : search
+  );
+  const raw = parseFiniteNumber(params.get(PARAM_SCROLL_Y));
+  if (raw === null) {
+    return null;
+  }
+  const rounded = Math.round(raw);
+  return rounded > 0 ? rounded : null;
+}
+function mergeScrollYIntoSearch(search, scrollY) {
+  const params = new URLSearchParams(
+    search.startsWith("?") ? search.slice(1) : search
+  );
+  const rounded = Math.round(scrollY);
+  if (rounded <= 0) {
+    params.delete(PARAM_SCROLL_Y);
+  } else {
+    params.set(PARAM_SCROLL_Y, String(rounded));
+  }
+  const serialized = params.toString();
+  return serialized.length > 0 ? `?${serialized}` : "";
+}
+function replaceBrowserUrlSearch(search) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const next = `${window.location.pathname}${search}${window.location.hash}`;
+  if (`${window.location.pathname}${window.location.search}${window.location.hash}` === next) {
+    return;
+  }
+  window.history.replaceState(null, "", next);
+}
+function readDiagramViewFromBrowser(defaults) {
+  if (typeof window === "undefined") {
+    return { view: defaults, focus: null };
+  }
+  return parseDiagramViewSearchParams(window.location.search, defaults);
+}
+
+// src/DiagramOverview.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function stateById(states, id) {
+  return states.find((state) => state.id === id);
+}
+var ZOOM_MIN = 0.5;
+var ZOOM_MAX = 2;
+var ZOOM_STEP = 0.15;
+var ZOOM_DEFAULT = 1;
+var PAN_CLICK_THRESHOLD_PX = 4;
+function clampZoom(scale) {
+  return clampDiagramZoom(scale);
+}
+function viewStateDefaults() {
+  return { zoom: ZOOM_DEFAULT, panX: 0, panY: 0 };
+}
+function selectionToFocus(selection, edges) {
+  if (!selection) {
+    return null;
+  }
+  if (selection.kind === "state") {
+    return { kind: "state", stateId: selection.stateId };
+  }
+  const edge = edges[selection.edgeIndex];
+  return edge ? { kind: "transition", transitionName: edge.name } : null;
+}
+function focusToSelection(focus, edges) {
+  if (!focus) {
+    return null;
+  }
+  if (focus.kind === "state") {
+    return { kind: "state", stateId: focus.stateId };
+  }
+  const edgeIndex = edgeIndexForTransitionName(edges, focus.transitionName);
+  return edgeIndex === null ? null : { kind: "edge", edgeIndex };
+}
+function outgoingTransitions(edges, stateId) {
+  return edges.filter((edge) => edge.fromId === stateId);
+}
+function DestinationList({
+  edges,
+  edge
+}) {
+  const destinations = edges.filter(
+    (candidate) => candidate.name === edge.name && candidate.fromId === edge.fromId
+  );
+  return /* @__PURE__ */ jsx5(
+    "ul",
+    {
+      className: "sf-overview-destination-list",
+      "aria-label": destinations.length > 1 ? "Branch destinations" : "Destination",
+      children: destinations.map((destination) => /* @__PURE__ */ jsxs4(
+        "li",
+        {
+          className: `sf-overview-legend-route${destination.toId === edge.toId && destinations.length > 1 ? " is-selected" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs4("code", { children: [
+              destination.fromName,
+              " \u2192 ",
+              destination.toName
+            ] }),
+            destination.destinationDescription ? /* @__PURE__ */ jsxs4("span", { className: "sf-overview-destination-detail", children: [
+              " ",
+              destination.destinationDescription
+            ] }) : null
+          ]
+        },
+        destination.toId
+      ))
+    }
+  );
+}
+function DiagramOverview({
+  svgHtml,
+  states,
+  edges,
+  viewPersistenceKey,
+  guardBlockedEdgeIndex = null,
+  detailLayout = "inline",
+  initialStateId
+}) {
+  const figureRef = useRef(null);
+  const viewportRef = useRef(null);
+  const detailRef = useRef(null);
+  const viewDefaults = viewStateDefaults();
+  const restoredFromUrl = viewPersistenceKey ? readDiagramViewFromBrowser(viewDefaults) : { view: viewDefaults, focus: null };
+  const [zoom, setZoom] = useState(() => clampZoom(restoredFromUrl.view.zoom));
+  const [pan, setPan] = useState({
+    x: restoredFromUrl.view.panX,
+    y: restoredFromUrl.view.panY
+  });
+  const [isPanning, setIsPanning] = useState(false);
+  const [selection, setSelection] = useState(() => {
+    if (!viewPersistenceKey) {
+      return null;
+    }
+    const validFocus = validateDiagramFocus(
+      restoredFromUrl.focus,
+      states,
+      edges
+    );
+    return focusToSelection(validFocus, edges);
+  });
+  const panSessionRef = useRef(null);
+  const suppressSelectionClickRef = useRef(false);
+  const edgesRef = useRef(edges);
+  const statesRef = useRef(states);
+  useEffect(() => {
+    edgesRef.current = edges;
+    statesRef.current = states;
+  }, [edges, states]);
+  const syncViewToUrl = useCallback(() => {
+    if (!viewPersistenceKey) {
+      return;
+    }
+    const view = { zoom, panX: pan.x, panY: pan.y };
+    const focus = selectionToFocus(selection, edges);
+    const search = buildDiagramViewSearchParams(
+      window.location.search,
+      view,
+      focus,
+      viewDefaults
+    );
+    replaceBrowserUrlSearch(search);
+  }, [viewPersistenceKey, zoom, pan.x, pan.y, selection, edges]);
+  useEffect(() => {
+    syncViewToUrl();
+  }, [syncViewToUrl]);
+  useEffect(() => {
+    if (!viewPersistenceKey) {
+      return;
+    }
+    const onPopState = () => {
+      const { view, focus } = readDiagramViewFromBrowser(viewDefaults);
+      const validFocus = validateDiagramFocus(focus, states, edges);
+      setZoom(clampZoom(view.zoom));
+      setPan({ x: view.panX, y: view.panY });
+      setSelection(focusToSelection(validFocus, edges));
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [viewPersistenceKey, states, edges]);
+  useEffect(() => {
+    if (!viewPersistenceKey) {
+      return;
+    }
+    const { view, focus } = readDiagramViewFromBrowser(viewDefaults);
+    if (!focus) {
+      return;
+    }
+    const validFocus = validateDiagramFocus(focus, states, edges);
+    if (validFocus) {
+      return;
+    }
+    const search = buildDiagramViewSearchParams(
+      window.location.search,
+      view,
+      null,
+      viewDefaults
+    );
+    replaceBrowserUrlSearch(search);
+    setSelection(null);
+  }, [viewPersistenceKey, states, edges, svgHtml]);
+  const preparedSvg = svgHtml;
+  const applySelectionToDom = useCallback((next) => {
+    const figure = figureRef.current;
+    if (!figure) {
+      return;
+    }
+    const svg = figure.querySelector("svg");
+    figure.querySelectorAll(".overview-edge-hit").forEach((node) => {
+      node.classList.remove("is-selected");
+      node.removeAttribute("aria-pressed");
+    });
+    figure.querySelectorAll(".flow-edge.is-selected").forEach((node) => {
+      node.classList.remove("is-selected");
+    });
+    figure.querySelectorAll(".overview-state-hit").forEach((node) => {
+      node.classList.remove("is-selected");
+      node.removeAttribute("aria-pressed");
+    });
+    svg?.classList.remove("has-edge-selection", "has-state-selection");
+    if (!next) {
+      return;
+    }
+    if (next.kind === "edge") {
+      figure.querySelectorAll(".overview-edge-hit").forEach((node) => {
+        const active = Number(node.getAttribute("data-edge-index")) === next.edgeIndex;
+        node.classList.toggle("is-selected", active);
+        node.setAttribute("aria-pressed", String(active));
+      });
+      figure.querySelectorAll(".flow-edge").forEach((node) => {
+        node.classList.toggle(
+          "is-selected",
+          Number(node.getAttribute("data-edge-index")) === next.edgeIndex
+        );
+      });
+      svg?.classList.add("has-edge-selection");
+      return;
+    }
+    figure.querySelectorAll(".overview-state-hit").forEach((node) => {
+      const active = node.getAttribute("data-state-id") === next.stateId;
+      node.classList.toggle("is-selected", active);
+      node.setAttribute("aria-pressed", String(active));
+    });
+    svg?.classList.add("has-state-selection");
+  }, []);
+  const applyGuardBlockedToDom = useCallback((edgeIndex) => {
+    const figure = figureRef.current;
+    if (!figure) {
+      return;
+    }
+    const svg = figure.querySelector("svg");
+    figure.querySelectorAll(".flow-edge.is-guard-blocked").forEach((node) => {
+      node.classList.remove("is-guard-blocked");
+      if (node instanceof SVGElement) {
+        node.style.removeProperty("stroke");
+        node.style.removeProperty("stroke-width");
+        node.style.removeProperty("filter");
+        node.style.removeProperty("opacity");
+      }
+    });
+    figure.querySelectorAll(".overview-edge-hit.is-guard-blocked").forEach((node) => {
+      node.classList.remove("is-guard-blocked");
+    });
+    svg?.classList.remove("has-guard-blocked");
+    if (edgeIndex === null || edgeIndex < 0) {
+      return;
+    }
+    svg?.classList.add("has-guard-blocked");
+    const path = figure.querySelector(
+      `.flow-edge[data-edge-index="${edgeIndex}"]`
+    );
+    const hit = figure.querySelector(
+      `.overview-edge-hit[data-edge-index="${edgeIndex}"]`
+    );
+    path?.classList.add("is-guard-blocked");
+    if (path instanceof SVGElement) {
+      path.style.stroke = "var(--sf-warning)";
+      path.style.strokeWidth = "3.75";
+      path.style.filter = "drop-shadow(0 0 10px color-mix(in srgb, var(--sf-warning) 75%, transparent))";
+      path.style.opacity = "1";
+    }
+    hit?.classList.add("is-guard-blocked");
+  }, []);
+  useEffect(() => {
+    const figure = figureRef.current;
+    if (!figure) {
+      return;
+    }
+    figure.innerHTML = preparedSvg;
+  }, [preparedSvg]);
+  useEffect(() => {
+    if (detailLayout !== "split" || !initialStateId) {
+      return;
+    }
+    setSelection((current) => {
+      if (current !== null) {
+        return current;
+      }
+      return stateById(states, initialStateId) ? { kind: "state", stateId: initialStateId } : null;
+    });
+  }, [detailLayout, initialStateId, states, preparedSvg]);
+  useEffect(() => {
+    if (guardBlockedEdgeIndex === null || guardBlockedEdgeIndex < 0) {
+      return;
+    }
+    setSelection({ kind: "edge", edgeIndex: guardBlockedEdgeIndex });
+  }, [guardBlockedEdgeIndex]);
+  useEffect(() => {
+    applySelectionToDom(selection);
+    applyGuardBlockedToDom(guardBlockedEdgeIndex ?? null);
+  }, [
+    selection,
+    guardBlockedEdgeIndex,
+    applySelectionToDom,
+    applyGuardBlockedToDom,
+    preparedSvg
+  ]);
+  useEffect(() => {
+    const figure = figureRef.current;
+    if (!figure) {
+      return;
+    }
+    const revealEdge = (edgeIndex) => {
+      const edge = edgesRef.current[edgeIndex];
+      if (!edge) {
+        return;
+      }
+      setSelection({ kind: "edge", edgeIndex });
+      if (detailLayout !== "split") {
+        detailRef.current?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    };
+    const revealState = (stateId) => {
+      const state = stateById(statesRef.current, stateId);
+      if (!state) {
+        return;
+      }
+      setSelection({ kind: "state", stateId });
+      if (detailLayout !== "split") {
+        detailRef.current?.scrollIntoView({
+          block: "nearest",
+          behavior: "smooth"
+        });
+      }
+    };
+    const onClick = (event) => {
+      if (suppressSelectionClickRef.current) {
+        suppressSelectionClickRef.current = false;
+        return;
+      }
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const edgeHit = target.closest(".overview-edge-hit");
+      if (edgeHit && figure.contains(edgeHit)) {
+        event.preventDefault();
+        revealEdge(Number(edgeHit.getAttribute("data-edge-index")));
+        return;
+      }
+      const stateHit = target.closest(".overview-state-hit");
+      if (stateHit && figure.contains(stateHit)) {
+        event.preventDefault();
+        const stateId = stateHit.getAttribute("data-state-id");
+        if (stateId) {
+          revealState(stateId);
+        }
+      }
+    };
+    const onKeyDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      if (event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      const edgeHit = target.closest(".overview-edge-hit");
+      if (edgeHit && figure.contains(edgeHit)) {
+        event.preventDefault();
+        revealEdge(Number(edgeHit.getAttribute("data-edge-index")));
+        return;
+      }
+      const stateHit = target.closest(".overview-state-hit");
+      if (stateHit && figure.contains(stateHit)) {
+        event.preventDefault();
+        const stateId = stateHit.getAttribute("data-state-id");
+        if (stateId) {
+          revealState(stateId);
+        }
+      }
+    };
+    figure.addEventListener("click", onClick);
+    figure.addEventListener("keydown", onKeyDown);
+    return () => {
+      figure.removeEventListener("click", onClick);
+      figure.removeEventListener("keydown", onKeyDown);
+    };
+  }, [preparedSvg, detailLayout]);
+  const guardBlockedActive = guardBlockedEdgeIndex !== null && guardBlockedEdgeIndex >= 0 && selection?.kind === "edge" && selection.edgeIndex === guardBlockedEdgeIndex;
+  const detailAside = (() => {
+    if (selection?.kind === "edge") {
+      const edge = edges[selection.edgeIndex];
+      if (!edge) {
+        return null;
+      }
+      return /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: `sf-overview-detail-card${guardBlockedActive ? " is-guard-blocked" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs4("h3", { className: "sf-overview-detail-heading", children: [
+              /* @__PURE__ */ jsx5("span", { className: "sf-overview-detail-heading-icon", "aria-hidden": true, children: "\u2192" }),
+              "Transition"
+            ] }),
+            /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-title", children: /* @__PURE__ */ jsx5("strong", { children: edge.name }) }),
+            guardBlockedActive ? /* @__PURE__ */ jsx5("p", { className: "sf-overview-guard-blocked-note", children: "Guard blocked this transition." }) : null,
+            /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description }),
+            /* @__PURE__ */ jsx5(DestinationList, { edges, edge })
+          ]
+        }
+      );
+    }
+    if (selection?.kind === "state") {
+      const state = stateById(states, selection.stateId);
+      if (!state) {
+        return null;
+      }
+      const outgoing = outgoingTransitions(edges, state.id);
+      return /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "sf-overview-detail-card", children: [
+          /* @__PURE__ */ jsxs4("h3", { className: "sf-overview-detail-heading", children: [
+            /* @__PURE__ */ jsx5("span", { className: "sf-overview-detail-heading-icon", "aria-hidden": true, children: "\u25C6" }),
+            "State details"
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "sf-overview-detail-title-row", children: [
+            /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-title", children: /* @__PURE__ */ jsx5("strong", { children: state.name }) }),
+            /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: `sf-overview-detail-kind-tag${state.kind === "final" ? " is-final" : ""}`,
+                children: state.kind === "final" ? "Final state" : "State"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: state.description })
+        ] }),
+        outgoing.length > 0 ? /* @__PURE__ */ jsxs4("div", { className: "sf-overview-transitions-card", children: [
+          /* @__PURE__ */ jsxs4("h4", { className: "sf-overview-transitions-heading", children: [
+            "Transitions (",
+            outgoing.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx5("ul", { className: "sf-overview-transitions-list", children: outgoing.map((edge, index) => /* @__PURE__ */ jsx5(
+            "li",
+            {
+              className: "sf-overview-transitions-item",
+              children: /* @__PURE__ */ jsxs4(
+                "button",
+                {
+                  type: "button",
+                  className: "sf-overview-transitions-button",
+                  "aria-pressed": void 0,
+                  onClick: () => {
+                    const edgeIndex = edges.indexOf(edge);
+                    if (edgeIndex >= 0) {
+                      setSelection({ kind: "edge", edgeIndex });
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx5(
+                      "span",
+                      {
+                        className: "sf-overview-transitions-dot",
+                        "aria-hidden": true
+                      }
+                    ),
+                    /* @__PURE__ */ jsx5("span", { className: "sf-overview-transitions-name", children: edge.name }),
+                    /* @__PURE__ */ jsxs4("span", { className: "sf-overview-transitions-route", children: [
+                      edge.fromName,
+                      " \u2192 ",
+                      edge.toName,
+                      edge.destinationCount > 1 ? ` (${edge.destinationDescription})` : ""
+                    ] })
+                  ]
+                }
+              )
+            },
+            `${edge.name}-${edge.toId}-${index}`
+          )) })
+        ] }) : null
+      ] });
+    }
+    if (detailLayout === "split") {
+      return /* @__PURE__ */ jsxs4("div", { className: "sf-overview-detail-empty", children: [
+        /* @__PURE__ */ jsx5("p", { className: "sf-overview-detail-empty-title", children: "Nothing selected" }),
+        /* @__PURE__ */ jsx5("p", { className: "sf-overview-detail-empty-hint", children: "Click a state or transition on the diagram to inspect it." })
+      ] });
+    }
+    return null;
+  })();
+  let detailContent = null;
+  if (detailLayout === "inline" && selection !== null) {
+    if (selection.kind === "edge") {
+      const edge = edges[selection.edgeIndex];
+      if (edge) {
+        detailContent = /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-title", children: /* @__PURE__ */ jsx5("strong", { children: edge.name }) }),
+          guardBlockedActive ? /* @__PURE__ */ jsx5("p", { className: "sf-overview-guard-blocked-note", children: "Guard blocked this transition." }) : null,
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description }),
+          /* @__PURE__ */ jsx5(DestinationList, { edges, edge })
+        ] });
+      }
+    } else {
+      const state = stateById(states, selection.stateId);
+      if (state) {
+        detailContent = /* @__PURE__ */ jsxs4(Fragment, { children: [
+          /* @__PURE__ */ jsx5("p", { className: "sf-caption", children: "State" }),
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-title", children: /* @__PURE__ */ jsx5("strong", { children: state.name }) }),
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: state.description })
+        ] });
+      }
+    }
+  }
+  const zoomOut = () => setZoom((current) => clampZoom(current - ZOOM_STEP));
+  const zoomIn = () => setZoom((current) => clampZoom(current + ZOOM_STEP));
+  const resetView = () => {
+    setZoom(ZOOM_DEFAULT);
+    setPan({ x: 0, y: 0 });
+    setSelection(null);
+  };
+  const isDiagramHitTarget = (target) => {
+    if (!(target instanceof Element)) {
+      return false;
+    }
+    return Boolean(
+      target.closest(".overview-state-hit") || target.closest(".overview-edge-hit")
+    );
+  };
+  const onViewportPointerDown = (event) => {
+    const middleButton = event.button === 1;
+    const primaryButton = event.button === 0;
+    if (!middleButton && !primaryButton) {
+      return;
+    }
+    if (primaryButton && isDiagramHitTarget(event.target)) {
+      return;
+    }
+    event.preventDefault();
+    panSessionRef.current = {
+      pointerId: event.pointerId,
+      originX: event.clientX,
+      originY: event.clientY,
+      startPanX: pan.x,
+      startPanY: pan.y
+    };
+    setIsPanning(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const onViewportPointerMove = (event) => {
+    const session = panSessionRef.current;
+    if (!session || session.pointerId !== event.pointerId) {
+      return;
+    }
+    const deltaX = event.clientX - session.originX;
+    const deltaY = event.clientY - session.originY;
+    if (Math.abs(deltaX) > PAN_CLICK_THRESHOLD_PX || Math.abs(deltaY) > PAN_CLICK_THRESHOLD_PX) {
+      suppressSelectionClickRef.current = true;
+    }
+    setPan({
+      x: session.startPanX + deltaX,
+      y: session.startPanY + deltaY
+    });
+  };
+  const endPan = (event) => {
+    const session = panSessionRef.current;
+    if (!session || session.pointerId !== event.pointerId) {
+      return;
+    }
+    panSessionRef.current = null;
+    setIsPanning(false);
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const overviewLabel = detailLayout === "split" ? "State flow" : "Overview";
+  const diagramColumn = /* @__PURE__ */ jsxs4("div", { className: "sf-diagram-overview", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "sf-diagram-overview-header", children: [
+      /* @__PURE__ */ jsxs4("div", { children: [
+        /* @__PURE__ */ jsx5("p", { className: "sf-diagram-overview-label", children: overviewLabel }),
+        /* @__PURE__ */ jsx5("p", { className: "sf-diagram-overview-hint", children: "Drag empty space (or middle-click drag) to pan; click a state or transition to read it." })
+      ] }),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          className: "sf-diagram-overview-zoom",
+          role: "group",
+          "aria-label": "Diagram view",
+          children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "sf-diagram-zoom-btn",
+                "aria-label": "Zoom out",
+                disabled: zoom <= ZOOM_MIN + 1e-6,
+                onClick: zoomOut,
+                children: "\u2212"
+              }
+            ),
+            /* @__PURE__ */ jsxs4("span", { className: "sf-diagram-zoom-level", "aria-live": "polite", children: [
+              Math.round(zoom * 100),
+              "%"
+            ] }),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "sf-diagram-zoom-btn",
+                "aria-label": "Zoom in",
+                disabled: zoom >= ZOOM_MAX - 1e-6,
+                onClick: zoomIn,
+                children: "+"
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                className: "sf-diagram-zoom-btn sf-diagram-reset-btn",
+                "aria-label": "Reset zoom and pan",
+                onClick: resetView,
+                children: "Reset"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: `sf-diagram-overview-viewport${isPanning ? " is-panning" : ""}`,
+        ref: viewportRef,
+        onPointerDown: onViewportPointerDown,
+        onPointerMove: onViewportPointerMove,
+        onPointerUp: endPan,
+        onPointerCancel: endPan,
+        children: /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "sf-diagram-overview-figure",
+            ref: figureRef,
+            style: {
+              transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`
+            }
+          }
+        )
+      }
+    ),
+    detailLayout === "inline" && selection !== null && detailContent ? /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: `sf-overview-edge-detail${guardBlockedActive ? " is-guard-blocked" : ""}`,
+        ref: detailRef,
+        role: "region",
+        "aria-live": "polite",
+        "data-selection-kind": selection.kind === "edge" ? "transition" : "state",
+        children: detailContent
+      }
+    ) : null
+  ] });
+  if (detailLayout === "split") {
+    return /* @__PURE__ */ jsxs4("div", { className: "sf-diagram-workspace-wrap", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "sf-diagram-workspace", children: [
+        /* @__PURE__ */ jsx5("div", { className: "sf-diagram-workspace-primary", children: diagramColumn }),
+        /* @__PURE__ */ jsx5(
+          "aside",
+          {
+            className: "sf-diagram-workspace-aside",
+            ref: detailRef,
+            role: "region",
+            "aria-live": "polite",
+            children: detailAside
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5(DiagramLegend, {})
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    diagramColumn,
+    /* @__PURE__ */ jsx5(DiagramLegend, {})
+  ] });
+}
+
+// src/diagram-svg.ts
+function escapeXml(value) {
+  return value.replace(/[&<>"']/g, (character) => {
+    return {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&apos;"
+    }[character];
+  });
+}
+function wrapLabel(name) {
+  const words = name.match(/\S{1,22}/g) ?? [""];
+  const lines = [""];
+  for (const word of words) {
+    const last = lines.length - 1;
+    if (lines[last] && lines[last].length + word.length + 1 > 22)
+      lines.push(word);
+    else lines[last] += `${lines[last] ? " " : ""}${word}`;
+  }
+  return lines;
+}
+function wrapEdgeLabel(name) {
+  if (name.length <= 18) {
+    return [name];
+  }
+  const segments = name.split("-");
+  const lines = [];
+  let current = "";
+  for (const segment of segments) {
+    const candidate = current ? `${current}-${segment}` : segment;
+    if (candidate.length > 16 && current) {
+      lines.push(current);
+      current = segment;
+    } else {
+      current = candidate;
+    }
+  }
+  if (current) {
+    lines.push(current);
+  }
+  if (lines.length <= 2) {
+    return lines;
+  }
+  const remainder = lines.slice(1).join("-");
+  const tail = remainder.length > 15 ? `${remainder.slice(0, 14)}\u2026` : remainder;
+  return [lines[0], tail];
+}
+function stateIconMarkup(stateId, x, iconY) {
+  const key = stateId.toLowerCase();
+  const stroke = "var(--sf-accent)";
+  const common = `stroke="${stroke}" stroke-width="1.6" stroke-linecap="round" fill="none"`;
+  if (key.includes("guest")) {
+    return `<g class="overview-state-icon" pointer-events="none" transform="translate(${x - 78} ${iconY - 4})"><circle cx="10" cy="6" r="3.2" ${common}/><path d="M4 16c0-2.8 2.7-5 6-5s6 2.2 6 5" ${common}/></g>`;
+  }
+  if (key.includes("unauth")) {
+    return `<g class="overview-state-icon" pointer-events="none" transform="translate(${x - 78} ${iconY - 4})"><ellipse cx="10" cy="10" rx="6.5" ry="4.8" ${common}/><path d="M4 6l12 8M16 6 4 14" ${common}/></g>`;
+  }
+  if (key.includes("auth")) {
+    return `<g class="overview-state-icon" pointer-events="none" transform="translate(${x - 78} ${iconY - 4})"><rect x="5" y="8.5" width="10" height="8" rx="1.5" ${common}/><path d="M7 8.5V6.8a3 3 0 0 1 6 0V8.5" ${common}/></g>`;
+  }
+  return `<g class="overview-state-icon" pointer-events="none" transform="translate(${x - 78} ${iconY - 4})"><rect x="6" y="6" width="8" height="8" rx="2" ${common}/></g>`;
+}
+function orthogonalEdgePath(start, end, attachY, laneY) {
+  return `M ${start} ${attachY} L ${start} ${laneY} L ${end} ${laneY} L ${end} ${attachY}`;
+}
+var STATE_BOX_HALF_WIDTH = 95;
+var SELF_LOOP_BAND_HEIGHT = 42;
+function layoutSelfLoop(cx, top, slot, slotsOnState) {
+  const innerLeft = cx - STATE_BOX_HALF_WIDTH + 18;
+  const innerRight = cx + STATE_BOX_HALF_WIDTH - 18;
+  const band = innerRight - innerLeft;
+  const loopSpan = Math.min(
+    92,
+    Math.max(52, (band - 12 * Math.max(0, slotsOnState - 1)) / slotsOnState)
+  );
+  const stride = slotsOnState > 1 ? (band - loopSpan) / (slotsOnState - 1) : 0;
+  const left = innerLeft + slot * stride;
+  const right = left + loopSpan;
+  const laneY = top - 26;
+  const path = `M ${roundCoord(left)} ${top} L ${roundCoord(left)} ${laneY} L ${roundCoord(right)} ${laneY} L ${roundCoord(right)} ${top}`;
+  return { path, labelCx: (left + right) / 2, labelCy: laneY };
+}
+function roundCoord(value) {
+  return Math.round(value * 10) / 10;
+}
+function countSelfLoopsPerState(flow) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const edge of flow.edges) {
+    if (edge.fromId !== edge.toId) {
+      continue;
+    }
+    counts.set(edge.fromId, (counts.get(edge.fromId) ?? 0) + 1);
+  }
+  return counts;
+}
+function maxSelfLoopsOnOneState(counts) {
+  let max = 0;
+  for (const count of counts.values()) {
+    max = Math.max(max, count);
+  }
+  return max;
+}
+function wrapBranchLabel(text) {
+  const words = text.trim().split(/\s+/);
+  const lines = [""];
+  for (const word of words) {
+    const last = lines.length - 1;
+    if (lines[last] && lines[last].length + word.length + 1 > 20) {
+      if (lines.length === 2) {
+        lines[last] = `${lines[last].slice(0, 18)}\u2026`;
+        return lines;
+      }
+      lines.push(word);
+    } else {
+      lines[last] += `${lines[last] ? " " : ""}${word}`;
+    }
+  }
+  return lines;
+}
+function transitionLabelBadge(options) {
+  const branch = options.branchLabel !== void 0;
+  const lines = branch ? wrapBranchLabel(options.branchLabel) : wrapEdgeLabel(options.edgeName);
+  const charWidth = 6.35;
+  const lineHeight = 12;
+  const padX = 10;
+  const padY = 6;
+  const width = Math.min(
+    152,
+    Math.max(40, ...lines.map((line) => line.length * charWidth + padX * 2))
+  );
+  const height = lines.length * lineHeight + padY * 2;
+  const x = options.cx - width / 2;
+  const y = options.cy - height / 2;
+  const textAnchorY = options.cy - (lines.length - 1) * lineHeight / 2 + 3.5;
+  const textContent = lines.map(
+    (line, lineIndex) => `<tspan x="${options.cx}" y="${textAnchorY + lineIndex * lineHeight}">${escapeXml(line)}</tspan>`
+  ).join("");
+  const label = branch ? `${options.edgeName}: ${options.branchLabel}` : options.edgeName;
+  return `<g class="overview-edge-hit${branch ? " overview-branch-hit" : ""}" data-edge-index="${options.index}" role="button" tabindex="0" aria-label="${escapeXml(label)}"><path d="${options.path}" fill="none" stroke="transparent" stroke-width="22"/><rect class="overview-edge-hit-area" x="${x - 6}" y="${y - 6}" width="${width + 12}" height="${height + 12}" rx="${(height + 12) / 2}" fill="transparent"/><rect class="overview-edge-badge${branch ? " overview-branch-badge" : ""}" x="${x}" y="${y}" width="${width}" height="${height}" rx="${branch ? 6 : height / 2}" fill="${branch ? "var(--sf-panel)" : "var(--sf-selected)"}" stroke="var(--sf-accent)" stroke-width="${branch ? 1.5 : 2}"${branch ? ' stroke-dasharray="4 3"' : ""}/><text text-anchor="middle" fill="var(--sf-ink)" font-size="10" font-weight="${branch ? 500 : 600}" ${branch ? 'font-style="italic" ' : ""}pointer-events="none">${textContent}</text></g>`;
+}
+function splitNodeMarkup(options) {
+  const r = 7;
+  const { x, y } = options;
+  return `<g class="overview-edge-hit overview-split-hit" data-edge-index="${options.index}" role="button" tabindex="0" aria-label="${escapeXml(`${options.edgeName} (branches)`)}"><path class="overview-split-node" d="M ${x} ${y - r} L ${x + r} ${y} L ${x} ${y + r} L ${x - r} ${y} Z" fill="var(--sf-accent)" stroke="var(--sf-panel)" stroke-width="1.5"/></g>`;
+}
+function diagramSvg(flow, title, instanceId) {
+  const templates = flow.states.map(
+    (state) => (state.composition?.regions ?? []).filter((region) => region.kind !== "inline").map(
+      (region) => region.kind === "list" ? `${region.name}: ${region.flow}[ ]` : `${region.name}: ${region.flow}`
+    )
+  );
+  const labels = flow.states.map((state, index) => [
+    ...wrapLabel(state.name),
+    ...templates[index]
+  ]);
+  const boxHeight = Math.max(
+    54,
+    ...labels.map((lines) => lines.length * 17 + 24)
+  );
+  const width = Math.max(280, flow.states.length * 260 + 24);
+  const markerId = escapeXml(`${instanceId}-arrow`);
+  const centers = new Map(
+    flow.states.map((state, index) => [state.id, 142 + index * 260])
+  );
+  const routes = flow.edges.map((edge, index) => {
+    const from = centers.get(edge.fromId);
+    const to = centers.get(edge.toId);
+    return {
+      index,
+      from,
+      to,
+      above: from <= to,
+      start: from,
+      end: to,
+      lane: 0
+    };
+  });
+  for (const center of centers.values()) {
+    for (const above of [true, false]) {
+      const ports = routes.filter((route) => {
+        const edge = flow.edges[route.index];
+        return edge.fromId !== edge.toId && route.above === above;
+      }).flatMap((route) => [
+        ...route.from === center ? [{ route, key: "start", neighbor: route.to }] : [],
+        ...route.to === center ? [{ route, key: "end", neighbor: route.from }] : []
+      ]).sort(
+        (a, b) => a.neighbor - b.neighbor || a.route.index - b.route.index
+      );
+      ports.forEach((port, index) => {
+        port.route[port.key] = center - 78 + 156 * (index + 1) / (ports.length + 1);
+      });
+    }
+  }
+  const sharedStart = /* @__PURE__ */ new Map();
+  for (const route of routes) {
+    const edge = flow.edges[route.index];
+    if (edge.destinationCount < 2 || edge.fromId === edge.toId) continue;
+    const key = `${edge.name}:${route.above}`;
+    const shared = sharedStart.get(key);
+    if (shared === void 0) sharedStart.set(key, route.start);
+    else route.start = shared;
+  }
+  const selfLoopCounts = countSelfLoopsPerState(flow);
+  const maxSelfLoopsOnState = maxSelfLoopsOnOneState(selfLoopCounts);
+  const selfLoopReserved = maxSelfLoopsOnState > 0 ? SELF_LOOP_BAND_HEIGHT + (maxSelfLoopsOnState - 1) * 4 : 0;
+  const laneCounts = { above: 0, below: 0 };
+  for (const above of [true, false]) {
+    const lanes = [];
+    const sorted = routes.filter((route) => {
+      const edge = flow.edges[route.index];
+      return edge.fromId !== edge.toId && route.above === above;
+    }).sort(
+      (a, b) => Math.abs(a.end - a.start) - Math.abs(b.end - b.start) || a.index - b.index
+    );
+    for (const route of sorted) {
+      const left = Math.min(route.start, route.end) - 16;
+      const right = Math.max(route.start, route.end) + 16;
+      let lane = lanes.findIndex(
+        (intervals) => intervals.every(([l, r]) => right < l || left > r)
+      );
+      if (lane === -1) {
+        lane = lanes.length;
+        lanes.push([]);
+      }
+      lanes[lane].push([left, right]);
+      route.lane = lane;
+    }
+    laneCounts[above ? "above" : "below"] = lanes.length;
+  }
+  const top = 32 + (laneCounts.above ? 64 + (laneCounts.above - 1) * 44 : 0) + selfLoopReserved;
+  const bottom = top + boxHeight;
+  const paths = [];
+  const badges = [];
+  const splits = [];
+  const drawnSplits = /* @__PURE__ */ new Set();
+  const selfLoopSlot = /* @__PURE__ */ new Map();
+  const edgeClass = (edge) => edge.destinationCount > 1 ? "flow-edge flow-edge-branch" : "flow-edge";
+  flow.edges.forEach((edge, index) => {
+    const branching = edge.destinationCount > 1;
+    if (edge.fromId === edge.toId) {
+      const cx = centers.get(edge.fromId);
+      const slotsOnState = selfLoopCounts.get(edge.fromId) ?? 1;
+      const slot = selfLoopSlot.get(edge.fromId) ?? 0;
+      selfLoopSlot.set(edge.fromId, slot + 1);
+      const layout = layoutSelfLoop(cx, top, slot, slotsOnState);
+      paths.push(
+        `<path class="${edgeClass(edge)} flow-edge-self" data-edge-index="${index}" d="${layout.path}" fill="none" stroke="var(--sf-accent)" stroke-width="2.5" data-transition="${escapeXml(edge.name)}" marker-end="url(#${markerId})"/>`
+      );
+      badges.push(
+        transitionLabelBadge({
+          edgeName: edge.name,
+          cx: layout.labelCx,
+          cy: layout.labelCy,
+          index,
+          path: layout.path,
+          ...branching ? { branchLabel: edge.destinationDescription } : {}
+        })
+      );
+      return;
+    }
+    const { start, end, above, lane: laneIndex } = routes[index];
+    const lane = above ? top - 64 - laneIndex * 44 : bottom + 64 + laneIndex * 44;
+    const y = above ? top : bottom;
+    const path = orthogonalEdgePath(start, end, y, lane);
+    paths.push(
+      `<path class="${edgeClass(edge)}" data-edge-index="${index}" d="${path}" fill="none" stroke="var(--sf-accent)" stroke-width="2.5" data-transition="${escapeXml(edge.name)}" marker-end="url(#${markerId})"/>`
+    );
+    if (branching) {
+      const splitKey = `${edge.name}:${above}`;
+      const splitY = above ? y - 32 : y + 32;
+      if (!drawnSplits.has(splitKey)) {
+        const firstSplit = ![...drawnSplits].some(
+          (key) => key.startsWith(`${edge.name}:`)
+        );
+        drawnSplits.add(splitKey);
+        splits.push(
+          splitNodeMarkup({ edgeName: edge.name, x: start, y: splitY, index })
+        );
+        if (firstSplit) {
+          badges.push(
+            transitionLabelBadge({
+              edgeName: edge.name,
+              cx: start,
+              cy: (y + splitY) / 2,
+              index,
+              path: `M ${start} ${y} L ${start} ${splitY}`
+            }).replace(
+              'class="overview-edge-hit"',
+              'class="overview-edge-hit overview-split-label"'
+            )
+          );
+        }
+      }
+    }
+    badges.push(
+      transitionLabelBadge({
+        edgeName: edge.name,
+        cx: (start + end) / 2,
+        cy: lane,
+        index,
+        path,
+        ...branching ? { branchLabel: edge.destinationDescription } : {}
+      })
+    );
+  });
+  const brackets = [];
+  for (const parent of flow.states) {
+    for (const region of parent.composition?.regions ?? []) {
+      if (region.kind !== "inline") continue;
+      const children = flow.states.filter(
+        (state) => state.parent?.state === parent.name && state.parent.region === region.name
+      );
+      if (children.length === 0) continue;
+      const xs = children.map((state) => centers.get(state.id));
+      const left = Math.min(...xs) - 95;
+      const right = Math.max(...xs) + 95;
+      const y = bottom + 14;
+      const label = parent.composition.kind === "compound" ? `inside ${parent.name}` : `inside ${parent.name} \u203A ${region.name}`;
+      brackets.push(
+        `<g class="overview-region" pointer-events="none"><path d="M ${left} ${y - 6} L ${left} ${y} L ${right} ${y} L ${right} ${y - 6}" fill="none" stroke="var(--sf-accent)" stroke-width="1.2" stroke-dasharray="4 3"/><text x="${(left + right) / 2}" y="${y + 13}" text-anchor="middle" fill="var(--sf-ink)" font-size="10" font-style="italic">${escapeXml(label)}</text></g>`
+      );
+    }
+  }
+  const nodes = flow.states.map((state, index) => {
+    const x = centers.get(state.id);
+    const initial = state.id === flow.initialId;
+    const lines = labels[index];
+    const final = state.kind === "final";
+    const kindTag = final ? null : state.composition?.kind === "parallel" ? "PARALLEL" : state.composition ? "COMPOUND" : null;
+    const textY = top + boxHeight / 2 - (lines.length - 1) * 8.5 + (final || kindTag ? 9 : 4);
+    const iconY = top + 22;
+    const labelX = x + 8;
+    const stroke = final ? "var(--sf-final)" : "var(--sf-accent)";
+    const finalMarkup = final ? `<rect class="overview-state-final-ring" x="${x - 90}" y="${top + 5}" width="180" height="${boxHeight - 10}" rx="9" fill="none" stroke="${stroke}" stroke-width="1.2" pointer-events="none"/><text class="overview-state-kind" x="${x}" y="${top + 17}" text-anchor="middle" fill="${stroke}" font-size="9" font-weight="700" letter-spacing="0.08em" pointer-events="none">FINAL</text>` : kindTag ? `<text class="overview-state-kind" x="${x}" y="${top + 17}" text-anchor="middle" fill="${stroke}" font-size="9" font-weight="700" letter-spacing="0.08em" pointer-events="none">${kindTag}</text>` : "";
+    return `${initial ? `<circle cx="${x - 108}" cy="${top + boxHeight / 2}" r="7" fill="var(--sf-accent)"/>` : ""}${final ? "" : stateIconMarkup(state.id, x, iconY)}<g class="overview-state-hit${initial ? " is-initial-state" : ""}${final ? " is-final-state" : ""}" data-state-id="${escapeXml(state.id)}" data-state-kind="${state.kind}" role="button" tabindex="0" aria-label="${escapeXml(final ? `${state.name} (final state)` : state.name)}"><rect class="overview-state-box" x="${x - 95}" y="${top}" width="190" height="${boxHeight}" rx="12" fill="${final ? "var(--sf-final-fill)" : "var(--sf-panel)"}" stroke="${stroke}" stroke-width="${initial ? 3 : 2}"/>${finalMarkup}<text text-anchor="middle" fill="var(--sf-ink)" font-size="13" font-weight="500" pointer-events="none">${lines.map((line, lineIndex) => `<tspan x="${labelX}" y="${textY + lineIndex * 17}">${escapeXml(line)}</tspan>`).join("")}</text></g>`;
+  });
+  const height = bottom + (brackets.length > 0 ? 40 : 32) + (laneCounts.below ? 64 + (laneCounts.below - 1) * 44 : 0);
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" class="sf-flow-svg" style="font-family:system-ui,sans-serif"><title>${escapeXml(title)}</title><defs><marker id="${markerId}" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto"><path d="M 0 1 L 9 5 L 0 9 z" fill="var(--sf-accent)"/></marker></defs>${paths.join("")}${brackets.join("")}${splits.join("")}${badges.join("")}${nodes.join("")}</svg>`;
+}
+
+// src/parse-flow.ts
+import {
+  compileFlow
+} from "@ai-digital-factory/state-flow-definition";
+
+// src/extract-flow-definition.ts
+import {
+  Children,
+  isValidElement
+} from "react";
+var FLOW_DISPLAY_NAME = "StateFlowFlow";
+var STATE_DISPLAY_NAME = "StateFlowState";
+var FINAL_STATE_DISPLAY_NAME = "StateFlowFinalState";
+var PARALLEL_STATE_DISPLAY_NAME = "StateFlowParallelState";
+var REGION_DISPLAY_NAME = "StateFlowRegion";
+var FLOW_LIST_DISPLAY_NAME = "StateFlowFlowList";
+var TRANSITION_DISPLAY_NAME = "StateFlowTransition";
+var TO_DISPLAY_NAME = "StateFlowTo";
+function elementDisplayName(type) {
+  if (typeof type === "function" || typeof type === "object") {
+    if (type && "displayName" in type) {
+      const displayName = type.displayName;
+      if (displayName) {
+        return displayName;
+      }
+    }
+    if (typeof type === "function" && type.name) {
+      return type.name;
+    }
+  }
+  return void 0;
+}
+function isElement(node, displayName) {
+  return isValidElement(node) && elementDisplayName(node.type) === displayName;
+}
+function isFlowElement(node) {
+  return isElement(node, FLOW_DISPLAY_NAME);
+}
+function stateKind(node) {
+  if (isElement(node, STATE_DISPLAY_NAME)) return "state";
+  if (isElement(node, FINAL_STATE_DISPLAY_NAME)) return "final";
+  if (isElement(node, PARALLEL_STATE_DISPLAY_NAME)) return "parallel";
+  return null;
+}
+function transitionsOf(children) {
+  const transitions = [];
+  Children.forEach(children, (transitionChild) => {
+    if (!isElement(transitionChild, TRANSITION_DISPLAY_NAME)) {
+      return;
+    }
+    const destinations = [];
+    Children.forEach(transitionChild.props.children, (toChild) => {
+      if (isElement(toChild, TO_DISPLAY_NAME)) {
+        destinations.push({
+          state: toChild.props.state,
+          description: toChild.props.description
+        });
+      }
+    });
+    const { childWork, trigger } = transitionChild.props;
+    transitions.push({
+      name: transitionChild.props.name,
+      description: transitionChild.props.description,
+      destinations,
+      ...childWork !== void 0 ? { childWork } : {},
+      ...trigger !== void 0 && trigger !== "dispatch" ? { trigger } : {}
+    });
+  });
+  return transitions;
+}
+function statesOf(children) {
+  const states = [];
+  Children.forEach(children, (child) => {
+    const kind = stateKind(child);
+    if (kind === null) return;
+    states.push(stateOf(child, kind));
+  });
+  return states;
+}
+function flowListRegion(node) {
+  return {
+    kind: "list",
+    name: node.props.name,
+    description: node.props.description,
+    flow: node.props.flow
+  };
+}
+function stateOf(element, kind) {
+  const props = element.props;
+  const regions = [];
+  if (kind === "parallel") {
+    Children.forEach(props.children, (child) => {
+      if (isElement(child, REGION_DISPLAY_NAME)) {
+        const { name, description, flow } = child.props;
+        regions.push(
+          flow !== void 0 ? { kind: "flow", name, description, flow } : {
+            kind: "inline",
+            name,
+            description,
+            default: child.props.default ?? "",
+            states: statesOf(child.props.children)
+          }
+        );
+      } else if (isElement(child, FLOW_LIST_DISPLAY_NAME)) {
+        regions.push(flowListRegion(child));
+      }
+    });
+  } else {
+    const nested = statesOf(props.children);
+    if (nested.length > 0 || props.default !== void 0) {
+      regions.push({
+        kind: "inline",
+        name: props.name,
+        description: props.description,
+        default: props.default ?? "",
+        states: nested
+      });
+    }
+    if (props.flow !== void 0) {
+      regions.push({
+        kind: "flow",
+        name: props.name,
+        description: props.description,
+        flow: props.flow
+      });
+    }
+    Children.forEach(props.children, (child) => {
+      if (isElement(child, FLOW_LIST_DISPLAY_NAME)) {
+        regions.push(flowListRegion(child));
+      }
+    });
+  }
+  const composite = kind === "parallel" || regions.length > 0;
+  return {
+    name: props.name,
+    description: props.description,
+    kind: kind === "final" ? "final" : "state",
+    transitions: transitionsOf(props.children),
+    ...composite ? {
+      composition: {
+        kind: kind === "parallel" ? "parallel" : "compound",
+        regions
+      }
+    } : {}
+  };
+}
+function extractFlowDefinition(node) {
+  if (!isFlowElement(node)) {
+    throw new Error("Application flow module must render a Flow root");
+  }
+  const { name, description, default: defaultState, children } = node.props;
+  return {
+    name,
+    description,
+    default: defaultState,
+    states: statesOf(children)
+  };
+}
+function extractFlowDefinitionFromComponent(component) {
+  return extractFlowDefinition(component());
+}
+function explicitStateIds(children) {
+  const ids = /* @__PURE__ */ new Map();
+  const visit = (nodes) => {
+    Children.forEach(nodes, (child) => {
+      if (!isValidElement(child)) return;
+      const display = elementDisplayName(child.type);
+      if (display === STATE_DISPLAY_NAME || display === FINAL_STATE_DISPLAY_NAME || display === PARALLEL_STATE_DISPLAY_NAME) {
+        if (child.props.id !== void 0)
+          ids.set(child.props.name, child.props.id);
+        visit(child.props.children);
+      } else if (display === REGION_DISPLAY_NAME) {
+        visit(child.props.children);
+      }
+    });
+  };
+  visit(children);
+  return ids;
+}
+
+// src/parse-flow.ts
+function parseFlow(children, defaultStateName) {
+  const parsed = compileFlow({
+    name: "",
+    description: "",
+    default: defaultStateName,
+    states: statesOf(children)
+  });
+  const explicit = explicitStateIds(children);
+  if (explicit.size === 0) return parsed;
+  const remap = new Map(
+    parsed.states.map((state) => [
+      state.id,
+      explicit.get(state.name) ?? state.id
+    ])
+  );
+  const ids = [...remap.values()];
+  const duplicate = ids.find((id, index) => ids.indexOf(id) !== index);
+  if (duplicate !== void 0) {
+    throw new Error(`Duplicate state id: ${duplicate}`);
+  }
+  return {
+    states: parsed.states.map((state) => ({
+      ...state,
+      id: remap.get(state.id)
+    })),
+    edges: parsed.edges.map((edge) => ({
+      ...edge,
+      fromId: remap.get(edge.fromId),
+      toId: remap.get(edge.toId)
+    })),
+    initialId: remap.get(parsed.initialId)
+  };
+}
+
+// src/Flow.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function titleCaseName(name) {
+  if (!name) {
+    return name;
+  }
+  return name.split("-").map((part) => part ? part.charAt(0).toUpperCase() + part.slice(1) : part).join(" ");
+}
+function Flow({
+  name,
+  description,
+  default: defaultStateName,
+  children
+}) {
+  const flow = useMemo(
+    () => parseFlow(children, defaultStateName),
+    [children, defaultStateName]
+  );
+  const instanceId = useId();
+  const flowTitle = titleCaseName(name);
+  const svgHtml = diagramSvg(flow, flowTitle, instanceId);
+  return /* @__PURE__ */ jsxs5("article", { className: "sf-root", children: [
+    /* @__PURE__ */ jsx6(
+      FlowPageHeader,
+      {
+        title: flowTitle,
+        description,
+        flowId: name
+      }
+    ),
+    svgHtml ? /* @__PURE__ */ jsx6(
+      DiagramOverview,
+      {
+        svgHtml,
+        states: flow.states,
+        edges: flow.edges,
+        viewPersistenceKey: name,
+        detailLayout: "split",
+        initialStateId: flow.initialId
+      }
+    ) : /* @__PURE__ */ jsx6("p", { className: "sf-notice", children: "No overview diagram is available for this flow." })
+  ] });
+}
+Flow.displayName = "StateFlowFlow";
+
+// src/State.tsx
+function State(_props) {
+  void _props;
+  return null;
+}
+State.displayName = "StateFlowState";
+
+// src/ParallelState.tsx
+function ParallelState(_props) {
+  void _props;
+  return null;
+}
+ParallelState.displayName = "StateFlowParallelState";
+
+// src/Region.tsx
+function Region(_props) {
+  void _props;
+  return null;
+}
+Region.displayName = "StateFlowRegion";
+
+// src/FlowList.tsx
+function FlowList(_props) {
+  void _props;
+  return null;
+}
+FlowList.displayName = "StateFlowFlowList";
+
+// src/FinalState.tsx
+function FinalState(_props) {
+  void _props;
+  return null;
+}
+FinalState.displayName = "StateFlowFinalState";
+
+// src/Transition.tsx
+function Transition(_props) {
+  void _props;
+  return null;
+}
+Transition.displayName = "StateFlowTransition";
+
+// src/To.tsx
+function To(_props) {
+  void _props;
+  return null;
+}
+To.displayName = "StateFlowTo";
+
+// src/FlowRenderer.tsx
+import { useId as useId2, useMemo as useMemo2 } from "react";
+import {
+  compileFlow as compileFlow2
+} from "@ai-digital-factory/state-flow-definition";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function titleCaseName2(name) {
+  if (!name) {
+    return name;
+  }
+  return name.charAt(0).toUpperCase() + name.slice(1);
+}
+function FlowRenderer({ flow }) {
+  const parsed = useMemo2(() => compileFlow2(flow), [flow]);
+  const instanceId = useId2();
+  const flowTitle = titleCaseName2(flow.name);
+  const svgHtml = diagramSvg(parsed, flowTitle, instanceId);
+  return /* @__PURE__ */ jsxs6("article", { className: "sf-root", children: [
+    /* @__PURE__ */ jsx7(
+      FlowPageHeader,
+      {
+        title: flowTitle,
+        description: flow.description,
+        flowId: flow.name
+      }
+    ),
+    svgHtml ? /* @__PURE__ */ jsx7(
+      DiagramOverview,
+      {
+        svgHtml,
+        states: parsed.states,
+        edges: parsed.edges,
+        viewPersistenceKey: flow.name,
+        detailLayout: "split",
+        initialStateId: parsed.initialId
+      }
+    ) : /* @__PURE__ */ jsx7("p", { className: "sf-notice", children: "No overview diagram is available for this flow." })
+  ] });
+}
+
+// src/index.tsx
+import {
+  DEFAULT_TRANSITION_NAME,
+  STATE_HANDLER_EXPORT_NAMES,
+  TRANSITION_HANDLER_EXPORT_NAMES
+} from "@ai-digital-factory/state-flow-definition";
+export {
+  DEFAULT_TRANSITION_NAME,
+  DiagramOverview,
+  FinalState,
+  Flow,
+  FlowHeaderIcon,
+  FlowList,
+  FlowPageHeader,
+  FlowRenderer,
+  ParallelState,
+  Region,
+  STATE_HANDLER_EXPORT_NAMES,
+  State,
+  StateFlowPlaceholder,
+  TRANSITION_HANDLER_EXPORT_NAMES,
+  To,
+  Transition,
+  diagramSvg,
+  extractFlowDefinition,
+  extractFlowDefinitionFromComponent,
+  flowNavIcon,
+  mergeScrollYIntoSearch,
+  parseScrollYFromSearch,
+  replaceBrowserUrlSearch
+};