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

package/dist/index.js

@@ -0,0 +1,1475 @@
+// 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/chart-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 ChartHeaderIcon({
+  chartId
+}) {
+  const key = (chartId ?? "").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 chartNavIcon(chartId) {
+  const key = chartId.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/ChartPageHeader.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChartPageHeader({
+  title,
+  description,
+  chartId
+}) {
+  return /* @__PURE__ */ jsxs2("header", { className: "sf-chart-page-header", children: [
+    /* @__PURE__ */ jsx3("div", { className: "sf-chart-page-header-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(ChartHeaderIcon, { chartId: chartId ?? title }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "sf-chart-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 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-route", children: /* @__PURE__ */ jsxs4("code", { children: [
+              edge.fromName,
+              " \u2192 ",
+              edge.toName
+            ] }) }),
+            /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description })
+          ]
+        }
+      );
+    }
+    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", children: "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.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__ */ jsxs4("p", { className: "sf-overview-legend-route", children: [
+            edge.fromName,
+            " \u2192 ",
+            edge.toName
+          ] }),
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description })
+        ] });
+      }
+    } 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(chart) {
+  const counts = /* @__PURE__ */ new Map();
+  for (const edge of chart.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 transitionLabelBadge(options) {
+  const lines = 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("");
+  return `<g class="overview-edge-hit" data-edge-index="${options.index}" role="button" tabindex="0" aria-label="${escapeXml(options.edgeName)}"><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" x="${x}" y="${y}" width="${width}" height="${height}" rx="${height / 2}" fill="var(--sf-selected)" stroke="var(--sf-accent)" stroke-width="2"/><text text-anchor="middle" fill="var(--sf-ink)" font-size="10" font-weight="600" pointer-events="none">${textContent}</text></g>`;
+}
+function diagramSvg(chart, title, instanceId) {
+  const labels = chart.states.map((state) => wrapLabel(state.name));
+  const boxHeight = Math.max(
+    54,
+    ...labels.map((lines) => lines.length * 17 + 24)
+  );
+  const width = Math.max(280, chart.states.length * 260 + 24);
+  const markerId = escapeXml(`${instanceId}-arrow`);
+  const centers = new Map(
+    chart.states.map((state, index) => [state.id, 142 + index * 260])
+  );
+  const routes = chart.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 = chart.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 selfLoopCounts = countSelfLoopsPerState(chart);
+  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 = chart.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 selfLoopSlot = /* @__PURE__ */ new Map();
+  chart.edges.forEach((edge, index) => {
+    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="flow-edge flow-edge-self" data-edge-index="${index}" d="${layout.path}" fill="none" stroke="var(--sf-accent)" stroke-width="2.5" marker-end="url(#${markerId})"/>`
+      );
+      badges.push(
+        transitionLabelBadge({
+          edgeName: edge.name,
+          cx: layout.labelCx,
+          cy: layout.labelCy,
+          index,
+          path: layout.path
+        })
+      );
+      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="flow-edge" data-edge-index="${index}" d="${path}" fill="none" stroke="var(--sf-accent)" stroke-width="2.5" marker-end="url(#${markerId})"/>`
+    );
+    badges.push(
+      transitionLabelBadge({
+        edgeName: edge.name,
+        cx: (start + end) / 2,
+        cy: lane,
+        index,
+        path
+      })
+    );
+  });
+  const nodes = chart.states.map((state, index) => {
+    const x = centers.get(state.id);
+    const initial = state.id === chart.initialId;
+    const lines = labels[index];
+    const textY = top + boxHeight / 2 - (lines.length - 1) * 8.5 + 4;
+    const iconY = top + 22;
+    const labelX = x + 8;
+    return `${initial ? `<circle cx="${x - 108}" cy="${top + boxHeight / 2}" r="7" fill="var(--sf-accent)"/>` : ""}${stateIconMarkup(state.id, x, iconY)}<g class="overview-state-hit${initial ? " is-initial-state" : ""}" data-state-id="${escapeXml(state.id)}" role="button" tabindex="0" aria-label="${escapeXml(state.name)}"><rect class="overview-state-box" x="${x - 95}" y="${top}" width="190" height="${boxHeight}" rx="12" fill="var(--sf-panel)" stroke="var(--sf-accent)" stroke-width="${initial ? 3 : 2}"/><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 + 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("")}${badges.join("")}${nodes.join("")}</svg>`;
+}
+
+// src/parse-chart.ts
+import { Children, isValidElement } from "react";
+
+// src/State.tsx
+function State(_props) {
+  void _props;
+  return null;
+}
+State.displayName = "StateFlowState";
+
+// src/Transition.tsx
+function Transition(_props) {
+  void _props;
+  return null;
+}
+Transition.displayName = "StateFlowTransition";
+
+// src/parse-chart.ts
+function parseFlow(children, defaultStateName) {
+  const rawStates = [];
+  const edges = [];
+  const nameToId = /* @__PURE__ */ new Map();
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child) || child.type !== State) {
+      return;
+    }
+    const id = child.props.id ?? `state-${rawStates.length}`;
+    if (nameToId.has(child.props.name)) {
+      throw new Error(`Duplicate state name: ${child.props.name}`);
+    }
+    if (rawStates.some((state) => state.id === id)) {
+      throw new Error(`Duplicate state id: ${id}`);
+    }
+    rawStates.push({
+      id,
+      name: child.props.name,
+      description: child.props.description
+    });
+    nameToId.set(child.props.name, id);
+  });
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child) || child.type !== State) {
+      return;
+    }
+    const fromId = nameToId.get(child.props.name);
+    if (!fromId) {
+      return;
+    }
+    Children.forEach(child.props.children, (transitionChild) => {
+      if (!isValidElement(transitionChild) || transitionChild.type !== Transition) {
+        return;
+      }
+      const toName = transitionChild.props.to;
+      const toId = nameToId.get(toName);
+      if (!toId) {
+        throw new Error(`Unknown transition target state: ${toName}`);
+      }
+      edges.push({
+        fromId,
+        fromName: child.props.name,
+        toId,
+        toName,
+        name: transitionChild.props.name,
+        description: transitionChild.props.description
+      });
+    });
+  });
+  const initialId = nameToId.get(defaultStateName);
+  if (!initialId) {
+    throw new Error(`Unknown default state: ${defaultStateName}`);
+  }
+  return {
+    states: rawStates,
+    edges,
+    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 chart = useMemo(
+    () => parseFlow(children, defaultStateName),
+    [children, defaultStateName]
+  );
+  const instanceId = useId();
+  const chartTitle = titleCaseName(name);
+  const svgHtml = diagramSvg(chart, chartTitle, instanceId);
+  return /* @__PURE__ */ jsxs5("article", { className: "sf-root", children: [
+    /* @__PURE__ */ jsx6(
+      ChartPageHeader,
+      {
+        title: chartTitle,
+        description,
+        chartId: name
+      }
+    ),
+    svgHtml ? /* @__PURE__ */ jsx6(
+      DiagramOverview,
+      {
+        svgHtml,
+        states: chart.states,
+        edges: chart.edges,
+        viewPersistenceKey: name,
+        detailLayout: "split",
+        initialStateId: chart.initialId
+      }
+    ) : /* @__PURE__ */ jsx6("p", { className: "sf-notice", children: "No overview diagram is available for this flow." })
+  ] });
+}
+Flow.displayName = "StateFlowFlow";
+
+// src/ApplicationChartRenderer.tsx
+import { useId as useId2, useMemo as useMemo2 } from "react";
+import {
+  compileApplicationChart
+} from "@ai-digital-factory/state-flow-chart";
+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 ApplicationChartRenderer({
+  chart
+}) {
+  const parsed = useMemo2(() => compileApplicationChart(chart), [chart]);
+  const instanceId = useId2();
+  const chartTitle = titleCaseName2(chart.name);
+  const svgHtml = diagramSvg(parsed, chartTitle, instanceId);
+  return /* @__PURE__ */ jsxs6("article", { className: "sf-root", children: [
+    /* @__PURE__ */ jsx7(
+      ChartPageHeader,
+      {
+        title: chartTitle,
+        description: chart.description,
+        chartId: chart.name
+      }
+    ),
+    svgHtml ? /* @__PURE__ */ jsx7(
+      DiagramOverview,
+      {
+        svgHtml,
+        states: parsed.states,
+        edges: parsed.edges,
+        viewPersistenceKey: chart.name,
+        detailLayout: "split",
+        initialStateId: parsed.initialId
+      }
+    ) : /* @__PURE__ */ jsx7("p", { className: "sf-notice", children: "No overview diagram is available for this flow." })
+  ] });
+}
+
+// src/extract-chart-definition.ts
+import {
+  Children as Children2,
+  isValidElement as isValidElement2
+} from "react";
+var FLOW_DISPLAY_NAME = "StateFlowFlow";
+var STATE_DISPLAY_NAME = "StateFlowState";
+var TRANSITION_DISPLAY_NAME = "StateFlowTransition";
+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 isFlowElement(node) {
+  return isValidElement2(node) && elementDisplayName(node.type) === FLOW_DISPLAY_NAME;
+}
+function isStateElement(node) {
+  return isValidElement2(node) && elementDisplayName(node.type) === STATE_DISPLAY_NAME;
+}
+function isTransitionElement(node) {
+  return isValidElement2(node) && elementDisplayName(node.type) === TRANSITION_DISPLAY_NAME;
+}
+function extractApplicationChartDefinition(node) {
+  if (!isFlowElement(node)) {
+    throw new Error("Application flow module must render a Flow root");
+  }
+  const { name, description, default: defaultState, children } = node.props;
+  const states = [];
+  Children2.forEach(children, (child) => {
+    if (!isStateElement(child)) {
+      return;
+    }
+    const transitions = [];
+    Children2.forEach(child.props.children, (transitionChild) => {
+      if (!isTransitionElement(transitionChild)) {
+        return;
+      }
+      transitions.push({
+        to: transitionChild.props.to,
+        name: transitionChild.props.name,
+        description: transitionChild.props.description
+      });
+    });
+    states.push({
+      name: child.props.name,
+      description: child.props.description,
+      transitions
+    });
+  });
+  return {
+    name,
+    description,
+    default: defaultState,
+    states
+  };
+}
+function extractApplicationChartDefinitionFromComponent(component) {
+  return extractApplicationChartDefinition(component());
+}
+
+// src/index.tsx
+import {
+  DEFAULT_TRANSITION_NAME,
+  STATE_APPLICATION_HOOK_EXPORT_NAMES,
+  TRANSITION_APPLICATION_HOOK_EXPORT_NAMES
+} from "@ai-digital-factory/state-flow-chart";
+export {
+  ApplicationChartRenderer,
+  ChartHeaderIcon,
+  ChartPageHeader,
+  DEFAULT_TRANSITION_NAME,
+  DiagramOverview,
+  Flow,
+  STATE_APPLICATION_HOOK_EXPORT_NAMES,
+  State,
+  StateFlowPlaceholder,
+  TRANSITION_APPLICATION_HOOK_EXPORT_NAMES,
+  Transition,
+  chartNavIcon,
+  diagramSvg,
+  extractApplicationChartDefinition,
+  extractApplicationChartDefinitionFromComponent,
+  mergeScrollYIntoSearch,
+  parseScrollYFromSearch,
+  replaceBrowserUrlSearch
+};