@ai-digital-factory/state-flow 0.1.0 → 0.1.1

package/dist/index.js

@@ -7,7 +7,7 @@ function StateFlowPlaceholder() {
 // src/Flow.tsx
 import { useId, useMemo } from "react";
 
-// src/chart-visuals.tsx
+// src/flow-visuals.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function SvgIcon({
   children,
@@ -15,10 +15,8 @@ function SvgIcon({
 }) {
   return /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 24 24", width: size, height: size, fill: "none", children });
 }
-function ChartHeaderIcon({
-  chartId
-}) {
-  const key = (chartId ?? "").toLowerCase();
+function FlowHeaderIcon({ flowId }) {
+  const key = (flowId ?? "").toLowerCase();
   if (key.includes("visitor") || key.includes("access")) {
     return /* @__PURE__ */ jsxs(SvgIcon, { children: [
       /* @__PURE__ */ jsx2(
@@ -126,8 +124,8 @@ function ChartHeaderIcon({
     )
   ] });
 }
-function chartNavIcon(chartId) {
-  const key = chartId.toLowerCase();
+function flowNavIcon(flowId) {
+  const key = flowId.toLowerCase();
   if (key.includes("visitor") || key.includes("access")) {
     return "\u25CE";
   }
@@ -140,16 +138,16 @@ function chartNavIcon(chartId) {
   return "\u25C6";
 }
 
-// src/ChartPageHeader.tsx
+// src/FlowPageHeader.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function ChartPageHeader({
+function FlowPageHeader({
   title,
   description,
-  chartId
+  flowId
 }) {
-  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: [
+  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 })
     ] })
@@ -377,6 +375,39 @@ function focusToSelection(focus, edges) {
 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,
@@ -687,12 +718,8 @@ function DiagramOverview({
             ] }),
             /* @__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 })
+            /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description }),
+            /* @__PURE__ */ jsx5(DestinationList, { edges, edge })
           ]
         }
       );
@@ -711,7 +738,13 @@ function DiagramOverview({
           ] }),
           /* @__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(
+              "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 })
         ] }),
@@ -749,7 +782,8 @@ function DiagramOverview({
                     /* @__PURE__ */ jsxs4("span", { className: "sf-overview-transitions-route", children: [
                       edge.fromName,
                       " \u2192 ",
-                      edge.toName
+                      edge.toName,
+                      edge.destinationCount > 1 ? ` (${edge.destinationDescription})` : ""
                     ] })
                   ]
                 }
@@ -776,12 +810,8 @@ function DiagramOverview({
         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 })
+          /* @__PURE__ */ jsx5("p", { className: "sf-overview-legend-detail", children: edge.description }),
+          /* @__PURE__ */ jsx5(DestinationList, { edges, edge })
         ] });
       }
     } else {
@@ -1054,9 +1084,9 @@ function layoutSelfLoop(cx, top, slot, slotsOnState) {
 function roundCoord(value) {
   return Math.round(value * 10) / 10;
 }
-function countSelfLoopsPerState(chart) {
+function countSelfLoopsPerState(flow) {
   const counts = /* @__PURE__ */ new Map();
-  for (const edge of chart.edges) {
+  for (const edge of flow.edges) {
     if (edge.fromId !== edge.toId) {
       continue;
     }
@@ -1071,8 +1101,26 @@ function maxSelfLoopsOnOneState(counts) {
   }
   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 lines = wrapEdgeLabel(options.edgeName);
+  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;
@@ -1088,20 +1136,34 @@ function transitionLabelBadge(options) {
   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>`;
+  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 diagramSvg(chart, title, instanceId) {
-  const labels = chart.states.map((state) => wrapLabel(state.name));
+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, chart.states.length * 260 + 24);
+  const width = Math.max(280, flow.states.length * 260 + 24);
   const markerId = escapeXml(`${instanceId}-arrow`);
   const centers = new Map(
-    chart.states.map((state, index) => [state.id, 142 + index * 260])
+    flow.states.map((state, index) => [state.id, 142 + index * 260])
   );
-  const routes = chart.edges.map((edge, index) => {
+  const routes = flow.edges.map((edge, index) => {
     const from = centers.get(edge.fromId);
     const to = centers.get(edge.toId);
     return {
@@ -1117,7 +1179,7 @@ function diagramSvg(chart, title, instanceId) {
   for (const center of centers.values()) {
     for (const above of [true, false]) {
       const ports = routes.filter((route) => {
-        const edge = chart.edges[route.index];
+        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 }] : [],
@@ -1130,14 +1192,23 @@ function diagramSvg(chart, title, instanceId) {
       });
     }
   }
-  const selfLoopCounts = countSelfLoopsPerState(chart);
+  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 = chart.edges[route.index];
+      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
@@ -1161,8 +1232,12 @@ function diagramSvg(chart, title, instanceId) {
   const bottom = top + boxHeight;
   const paths = [];
   const badges = [];
+  const splits = [];
+  const drawnSplits = /* @__PURE__ */ new Set();
   const selfLoopSlot = /* @__PURE__ */ new Map();
-  chart.edges.forEach((edge, index) => {
+  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;
@@ -1170,7 +1245,7 @@ function diagramSvg(chart, title, instanceId) {
       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})"/>`
+        `<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({
@@ -1178,7 +1253,8 @@ function diagramSvg(chart, title, instanceId) {
           cx: layout.labelCx,
           cy: layout.labelCy,
           index,
-          path: layout.path
+          path: layout.path,
+          ...branching ? { branchLabel: edge.destinationDescription } : {}
         })
       );
       return;
@@ -1188,106 +1264,293 @@ function diagramSvg(chart, title, instanceId) {
     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})"/>`
+      `<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
+        path,
+        ...branching ? { branchLabel: edge.destinationDescription } : {}
       })
     );
   });
-  const nodes = chart.states.map((state, index) => {
+  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 === chart.initialId;
+    const initial = state.id === flow.initialId;
     const lines = labels[index];
-    const textY = top + boxHeight / 2 - (lines.length - 1) * 8.5 + 4;
+    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;
-    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 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 + 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>`;
+  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-chart.ts
-import { Children, isValidElement } from "react";
+// src/parse-flow.ts
+import {
+  compileFlow
+} from "@ai-digital-factory/state-flow-definition";
 
-// src/State.tsx
-function State(_props) {
-  void _props;
-  return null;
+// 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;
 }
-State.displayName = "StateFlowState";
-
-// src/Transition.tsx
-function Transition(_props) {
-  void _props;
+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;
 }
-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) {
+function transitionsOf(children) {
+  const transitions = [];
+  Children.forEach(children, (transitionChild) => {
+    if (!isElement(transitionChild, TRANSITION_DISPLAY_NAME)) {
       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
+    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 } : {}
     });
-    nameToId.set(child.props.name, id);
   });
+  return transitions;
+}
+function statesOf(children) {
+  const states = [];
   Children.forEach(children, (child) => {
-    if (!isValidElement(child) || child.type !== State) {
-      return;
+    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
+      });
     }
-    const fromId = nameToId.get(child.props.name);
-    if (!fromId) {
-      return;
+    if (props.flow !== void 0) {
+      regions.push({
+        kind: "flow",
+        name: props.name,
+        description: props.description,
+        flow: props.flow
+      });
     }
-    Children.forEach(child.props.children, (transitionChild) => {
-      if (!isValidElement(transitionChild) || transitionChild.type !== Transition) {
-        return;
+    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
       }
-      const toName = transitionChild.props.to;
-      const toId = nameToId.get(toName);
-      if (!toId) {
-        throw new Error(`Unknown transition target state: ${toName}`);
+    } : {}
+  };
+}
+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);
       }
-      edges.push({
-        fromId,
-        fromName: child.props.name,
-        toId,
-        toName,
-        name: transitionChild.props.name,
-        description: transitionChild.props.description
-      });
     });
+  };
+  visit(children);
+  return ids;
+}
+
+// src/parse-flow.ts
+function parseFlow(children, defaultStateName) {
+  const parsed = compileFlow({
+    name: "",
+    description: "",
+    default: defaultStateName,
+    states: statesOf(children)
   });
-  const initialId = nameToId.get(defaultStateName);
-  if (!initialId) {
-    throw new Error(`Unknown default state: ${defaultStateName}`);
+  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: rawStates,
-    edges,
-    initialId
+    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)
   };
 }
 
@@ -1305,42 +1568,91 @@ function Flow({
   default: defaultStateName,
   children
 }) {
-  const chart = useMemo(
+  const flow = useMemo(
     () => parseFlow(children, defaultStateName),
     [children, defaultStateName]
   );
   const instanceId = useId();
-  const chartTitle = titleCaseName(name);
-  const svgHtml = diagramSvg(chart, chartTitle, instanceId);
+  const flowTitle = titleCaseName(name);
+  const svgHtml = diagramSvg(flow, flowTitle, instanceId);
   return /* @__PURE__ */ jsxs5("article", { className: "sf-root", children: [
     /* @__PURE__ */ jsx6(
-      ChartPageHeader,
+      FlowPageHeader,
       {
-        title: chartTitle,
+        title: flowTitle,
         description,
-        chartId: name
+        flowId: name
       }
     ),
     svgHtml ? /* @__PURE__ */ jsx6(
       DiagramOverview,
       {
         svgHtml,
-        states: chart.states,
-        edges: chart.edges,
+        states: flow.states,
+        edges: flow.edges,
         viewPersistenceKey: name,
         detailLayout: "split",
-        initialStateId: chart.initialId
+        initialStateId: flow.initialId
       }
     ) : /* @__PURE__ */ jsx6("p", { className: "sf-notice", children: "No overview diagram is available for this flow." })
   ] });
 }
 Flow.displayName = "StateFlowFlow";
 
-// src/ApplicationChartRenderer.tsx
+// 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 {
-  compileApplicationChart
-} from "@ai-digital-factory/state-flow-chart";
+  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) {
@@ -1348,20 +1660,18 @@ function titleCaseName2(name) {
   }
   return name.charAt(0).toUpperCase() + name.slice(1);
 }
-function ApplicationChartRenderer({
-  chart
-}) {
-  const parsed = useMemo2(() => compileApplicationChart(chart), [chart]);
+function FlowRenderer({ flow }) {
+  const parsed = useMemo2(() => compileFlow2(flow), [flow]);
   const instanceId = useId2();
-  const chartTitle = titleCaseName2(chart.name);
-  const svgHtml = diagramSvg(parsed, chartTitle, instanceId);
+  const flowTitle = titleCaseName2(flow.name);
+  const svgHtml = diagramSvg(parsed, flowTitle, instanceId);
   return /* @__PURE__ */ jsxs6("article", { className: "sf-root", children: [
     /* @__PURE__ */ jsx7(
-      ChartPageHeader,
+      FlowPageHeader,
       {
-        title: chartTitle,
-        description: chart.description,
-        chartId: chart.name
+        title: flowTitle,
+        description: flow.description,
+        flowId: flow.name
       }
     ),
     svgHtml ? /* @__PURE__ */ jsx7(
@@ -1370,7 +1680,7 @@ function ApplicationChartRenderer({
         svgHtml,
         states: parsed.states,
         edges: parsed.edges,
-        viewPersistenceKey: chart.name,
+        viewPersistenceKey: flow.name,
         detailLayout: "split",
         initialStateId: parsed.initialId
       }
@@ -1378,97 +1688,33 @@ function ApplicationChartRenderer({
   ] });
 }
 
-// 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";
+  STATE_HANDLER_EXPORT_NAMES,
+  TRANSITION_HANDLER_EXPORT_NAMES
+} from "@ai-digital-factory/state-flow-definition";
 export {
-  ApplicationChartRenderer,
-  ChartHeaderIcon,
-  ChartPageHeader,
   DEFAULT_TRANSITION_NAME,
   DiagramOverview,
+  FinalState,
   Flow,
-  STATE_APPLICATION_HOOK_EXPORT_NAMES,
+  FlowHeaderIcon,
+  FlowList,
+  FlowPageHeader,
+  FlowRenderer,
+  ParallelState,
+  Region,
+  STATE_HANDLER_EXPORT_NAMES,
   State,
   StateFlowPlaceholder,
-  TRANSITION_APPLICATION_HOOK_EXPORT_NAMES,
+  TRANSITION_HANDLER_EXPORT_NAMES,
+  To,
   Transition,
-  chartNavIcon,
   diagramSvg,
-  extractApplicationChartDefinition,
-  extractApplicationChartDefinitionFromComponent,
+  extractFlowDefinition,
+  extractFlowDefinitionFromComponent,
+  flowNavIcon,
   mergeScrollYIntoSearch,
   parseScrollYFromSearch,
   replaceBrowserUrlSearch