@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/chunk-REXYVBUO.js

@@ -0,0 +1,191 @@
+import { traitLevelFromDescription } from './chunk-PCR37T3U.js';
+import { useContentSurface, useEventBus, Typography, Icon, cn, domPassthrough } from './chunk-4YXBKHHM.js';
+import { useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function generateItemId(item, index) {
+  if (item.id) return item.id;
+  const headerText = item.header ?? item.title;
+  if (typeof headerText === "string") {
+    return `accordion-${headerText.toLowerCase().replace(/\s+/g, "-")}-${index}`;
+  }
+  return `accordion-item-${index}`;
+}
+function normalizeItem(item, index) {
+  return {
+    ...item,
+    id: generateItemId(item, index),
+    header: item.header ?? item.title ?? ""
+  };
+}
+var Accordion = ({
+  items,
+  multiple = false,
+  defaultOpenItems,
+  defaultOpen,
+  openItems: controlledOpenItems,
+  onItemToggle,
+  className,
+  toggleEvent,
+  surface = "auto",
+  ...rest
+}) => {
+  const contentSurface = useContentSurface(surface);
+  const eventBus = useEventBus();
+  const normalizedItems = items.map(
+    (item, index) => normalizeItem(item, index)
+  );
+  const resolveDefaultOpen = () => {
+    if (defaultOpenItems) return defaultOpenItems;
+    if (defaultOpen) {
+      return defaultOpen.filter((index) => index >= 0 && index < normalizedItems.length).map((index) => normalizedItems[index].id);
+    }
+    return normalizedItems.filter((item) => item.defaultOpen).map((item) => item.id);
+  };
+  const [internalOpenItems, setInternalOpenItems] = useState(
+    new Set(resolveDefaultOpen())
+  );
+  const openItemsSet = controlledOpenItems ? new Set(controlledOpenItems) : internalOpenItems;
+  const handleToggle = (itemId) => {
+    const isOpen = openItemsSet.has(itemId);
+    const newOpenItems = new Set(openItemsSet);
+    if (isOpen) {
+      newOpenItems.delete(itemId);
+    } else {
+      if (!multiple) {
+        newOpenItems.clear();
+      }
+      newOpenItems.add(itemId);
+    }
+    if (controlledOpenItems === void 0) {
+      setInternalOpenItems(newOpenItems);
+    }
+    onItemToggle?.(itemId, !isOpen);
+    if (toggleEvent) eventBus.emit(`UI:${toggleEvent}`, { itemId, isOpen: !isOpen });
+  };
+  return contentSurface.provide(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...domPassthrough(rest),
+        className: cn("w-full divide-y divide-border", contentSurface.className && cn(contentSurface.className, "overflow-hidden"), className),
+        children: normalizedItems.map((item) => {
+          const isOpen = openItemsSet.has(item.id);
+          const isDisabled = item.disabled;
+          return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => !isDisabled && handleToggle(item.id),
+                disabled: isDisabled,
+                className: cn(
+                  "w-full flex items-center justify-between px-4 py-3",
+                  "hover:bg-muted",
+                  "transition-colors duration-fast",
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+                  "disabled:opacity-50 disabled:cursor-not-allowed",
+                  isOpen && "bg-muted font-bold"
+                ),
+                "aria-expanded": isOpen,
+                "aria-controls": `accordion-content-${item.id}`,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 text-left", children: typeof item.header === "string" ? /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "medium", children: item.header }) : item.header }),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: "chevron-down",
+                      size: "sm",
+                      className: cn(
+                        "transition-transform duration-fast",
+                        isOpen && "transform rotate-180"
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            isOpen && /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: `accordion-content-${item.id}`,
+                className: "px-4 py-3 border-t-heavy border-border",
+                children: item.content
+              }
+            )
+          ] }) }, item.id);
+        })
+      }
+    )
+  );
+};
+Accordion.displayName = "Accordion";
+
+// src/lib/avl-play.ts
+function armsOf(trait, from, event) {
+  return trait.transitions.filter((t) => t.from === from && t.event === event);
+}
+function armPosition(trait, transition) {
+  return armsOf(trait, transition.from, transition.event).findIndex((t) => t.index === transition.index);
+}
+function firedTransition(trait, step) {
+  if (step.result.firedArm === void 0 || !step.result.transitionFired) return void 0;
+  return armsOf(trait, step.from, step.result.event)[step.result.firedArm];
+}
+var ofTrait = (steps, orbital, trait) => steps.filter((s) => s.orbital === orbital && s.trait === trait);
+function stateMachinePlayback(trait, orbital, steps, cursor) {
+  const played = ofTrait(steps.slice(0, cursor + 1), orbital, trait.name);
+  const visitedStates = [];
+  for (const step of played) {
+    for (const state of [step.result.state.before, step.result.state.after]) {
+      if (state !== null && visitedStates[visitedStates.length - 1] !== state) visitedStates.push(state);
+    }
+  }
+  const last = played[played.length - 1];
+  if (!last) return { visitedStates };
+  return {
+    activeState: last.result.state.after ?? last.result.state.before ?? void 0,
+    activeTransition: firedTransition(trait, last)?.index,
+    visitedStates
+  };
+}
+function tracedTransition(trait, trace) {
+  const arms = armsOf(trait, trace.from, trace.event);
+  const arm = trace.firedArm;
+  if (arm !== void 0) return arms[arm];
+  const entering = arms.filter((t) => t.to === trace.to);
+  return entering.length === 1 ? entering[0] : void 0;
+}
+function tracePlayback(trait, traces) {
+  const hops = traces.filter((t) => t.traitName === trait.name);
+  const visitedStates = [];
+  for (const hop of hops) {
+    for (const state of [hop.from, hop.to]) {
+      if (visitedStates[visitedStates.length - 1] !== state) visitedStates.push(state);
+    }
+  }
+  const last = hops[hops.length - 1];
+  if (!last) return { visitedStates };
+  return { activeState: last.to, activeTransition: tracedTransition(trait, last)?.index, visitedStates };
+}
+function describedTransitionLines(description, running, transition) {
+  const printed = traitLevelFromDescription(description);
+  if (!printed || !description.source) return void 0;
+  const match = armsOf(printed, transition.from, transition.event)[armPosition(running, transition)];
+  const lines = match ? description.source.transitions.find((l) => l.index === match.index) : void 0;
+  return lines ? { start: lines.start, end: lines.end } : void 0;
+}
+function transitionPlayback(trait, orbital, transition, steps, cursor) {
+  const arm = armPosition(trait, transition);
+  const played = ofTrait(steps.slice(0, cursor + 1), orbital, trait.name);
+  for (let i = played.length - 1; i >= 0; i--) {
+    const step = played[i];
+    if (step.from !== transition.from || step.result.event !== transition.event) continue;
+    const fired = step.result.transitionFired && step.result.firedArm === arm;
+    const guard = step.result.guards?.find((g) => g.arm === arm);
+    if (fired || guard) return { step, fired, ...guard ? { guard } : {}, effects: fired ? step.result.effects : [] };
+  }
+  return void 0;
+}
+
+export { Accordion, armPosition, armsOf, describedTransitionLines, firedTransition, stateMachinePlayback, tracePlayback, transitionPlayback };

package/dist/chunk-ROICKAU7.js

@@ -0,0 +1,24 @@
+import { AvlStateMachine } from './chunk-SP5CDJ6K.js';
+import { EmptyState } from './chunk-AGXD77SL.js';
+import { useTranslate, Box, domPassthrough } from './chunk-4YXBKHHM.js';
+import { jsx } from 'react/jsx-runtime';
+
+var BehaviorView = ({ data, ...rest }) => {
+  const { t } = useTranslate();
+  const details = data.traits.map((tr) => data.traitDetails[tr.name]).filter((d) => d !== void 0);
+  if (details.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { ...domPassthrough(rest), "data-testid": "behavior-view-empty", children: /* @__PURE__ */ jsx(EmptyState, { icon: "workflow", title: t("avl.noTraitData") }) });
+  }
+  return /* @__PURE__ */ jsx(Box, { ...domPassthrough(rest), className: "flex flex-col gap-4", style: { width: "100%" }, children: details.map((trait) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: "rounded-lg border px-5 pb-4 pt-4",
+      style: { background: "var(--color-card)", borderColor: "var(--color-border)", boxShadow: "var(--shadow-sm)" },
+      children: /* @__PURE__ */ jsx(AvlStateMachine, { trait })
+    },
+    trait.name
+  )) });
+};
+BehaviorView.displayName = "BehaviorView";
+
+export { BehaviorView };

package/dist/chunk-SP5CDJ6K.js

@@ -0,0 +1,338 @@
+import { useContainerWidth, computeTraitLayout, roundedEdgePath } from './chunk-TXAUOLWZ.js';
+import { AvlExplain, AvlEffectChip } from './chunk-AB3X7QTE.js';
+import { gearTeethPath } from './chunk-TZZBINQY.js';
+import { AVL_INK, AVL_FONT, AVL_STROKE, avlTint } from './chunk-UXLE3IPR.js';
+import { domPassthrough, useTranslate, useEventBus, useMediaQuery, Box, Typography, Button } from './chunk-4YXBKHHM.js';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { formatSExpr } from '@almadar/core';
+import { createLogger } from '@almadar/logger';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var log = createLogger("almadar:ui:avl:state-machine");
+var MONO_CHAR = 7.3;
+var BODY_CHAR = 7.6;
+var NODE_H = 44;
+var PILL_H = 24;
+var EFFECT_CHIP = 14;
+var EFFECT_GAP = 4;
+var MARGIN = 28;
+var MIN_SCALE = 0.85;
+var MAX_SCALE = 1.25;
+function effectText(effect) {
+  return effect.args.length === 0 ? void 0 : formatSExpr([effect.type, ...effect.args]);
+}
+function guardText(t) {
+  return t.guard === void 0 || t.guard === null ? null : formatSExpr(t.guard);
+}
+function pillWidth(t) {
+  return 20 + (guardText(t) === null ? 0 : 16) + t.event.length * MONO_CHAR + t.effects.length * (EFFECT_CHIP + EFFECT_GAP);
+}
+function gearDiameter(name) {
+  return Math.max(96, Math.round(name.length * BODY_CHAR + 40));
+}
+function metricsFor(nodeShape, direction) {
+  return {
+    nodeSize: (name) => nodeShape === "gear" ? { width: gearDiameter(name), height: gearDiameter(name) } : { width: Math.max(112, Math.round(name.length * BODY_CHAR + 44)), height: NODE_H },
+    labelSize: (t) => ({ width: pillWidth(t), height: PILL_H }),
+    nodeSpacing: 40,
+    layerSpacing: 88,
+    orthogonal: true,
+    direction
+  };
+}
+var AvlStateMachine = ({
+  trait,
+  activeState,
+  activeTransition,
+  visitedStates,
+  followActive = false,
+  stateClickEvent,
+  transitionClickEvent,
+  onTransitionClick,
+  selectedState,
+  pendingSourceState,
+  nodeShape = "pill",
+  entityFields,
+  direction = "ltr",
+  showHeader = true,
+  annotations,
+  className,
+  ...rest
+}) => {
+  const passthrough = domPassthrough(rest);
+  const { t } = useTranslate();
+  const eventBus = useEventBus();
+  const clickable = transitionClickEvent !== void 0 || onTransitionClick !== void 0;
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [layout, setLayout] = useState(null);
+  const [layoutFailed, setLayoutFailed] = useState(false);
+  const [layoutAttempt, setLayoutAttempt] = useState(0);
+  const hostRef = useRef(null);
+  const hostWidth = useContainerWidth(hostRef);
+  const traitKey = useMemo(() => JSON.stringify(trait), [trait]);
+  useEffect(() => {
+    if (trait.states.length === 0) return;
+    let live = true;
+    setLayoutFailed(false);
+    computeTraitLayout(trait, metricsFor(nodeShape, direction)).then((l) => {
+      if (live) setLayout(l);
+    }).catch((error) => {
+      log.error("layout-failed", { trait: trait.name, error: error instanceof Error ? error : String(error) });
+      if (live) setLayoutFailed(true);
+    });
+    return () => {
+      live = false;
+    };
+  }, [traitKey, nodeShape, direction, layoutAttempt]);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!followActive || layout === null || host === null || activeState === void 0) return;
+    const node = [...host.querySelectorAll('[data-testid="avl-sm-state"]')].find((n) => n.getAttribute("data-state") === activeState);
+    if (node === void 0) return;
+    const hostBox = host.getBoundingClientRect();
+    const nodeBox = node.getBoundingClientRect();
+    const left = host.scrollLeft + (nodeBox.left + nodeBox.width / 2) - (hostBox.left + hostBox.width / 2);
+    host.scrollTo({ left: Math.max(0, left), behavior: reduceMotion ? "auto" : "smooth" });
+  }, [followActive, layout, activeState, reduceMotion]);
+  const visitOrder = useMemo(() => new Map((visitedStates ?? []).map((s, i) => [s, i + 1])), [visitedStates]);
+  const nextFromActive = useMemo(
+    () => new Set(trait.transitions.filter((tr) => activeState !== void 0 && tr.from === activeState).map((tr) => tr.index)),
+    [trait.transitions, activeState]
+  );
+  const header = showHeader ? /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap items-baseline justify-between gap-2 pb-3", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", children: trait.name }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "muted", children: [
+        t("avl.onEntity", { entity: trait.linkedEntity }),
+        " \xB7 ",
+        t("avl.stateCount", { count: trait.states.length }),
+        " \xB7 ",
+        t("avl.transitionCount", { count: trait.transitions.length })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap gap-2", children: [
+      entityFields && entityFields.length > 0 ? /* @__PURE__ */ jsxs(Box, { as: "span", "data-testid": "avl-sm-fields", style: { fontFamily: AVL_FONT.mono, fontSize: 12, lineHeight: "20px", color: AVL_INK.quiet }, children: [
+        trait.linkedEntity,
+        " ",
+        "{ ",
+        entityFields.join(", "),
+        " }"
+      ] }) : null,
+      trait.listenedEvents.map((ev) => /* @__PURE__ */ jsx(Rail, { kind: t("avl.listensRail"), event: ev }, `in-${ev}`)),
+      trait.emittedEvents.map((ev) => /* @__PURE__ */ jsx(Rail, { kind: t("avl.emitsRail"), event: ev }, `out-${ev}`))
+    ] })
+  ] }) : null;
+  if (trait.states.length === 0) {
+    return /* @__PURE__ */ jsxs(Box, { "data-testid": "avl-state-machine", className, style: { width: "100%" }, ...passthrough, children: [
+      header,
+      /* @__PURE__ */ jsx(Box, { "data-testid": "avl-state-machine-empty", className: "rounded-md border border-dashed p-6 text-center", style: { borderColor: AVL_INK.line }, children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.noStateMachine") }) })
+    ] });
+  }
+  const w = layout ? layout.width + 2 * MARGIN : 0;
+  const h = layout ? layout.height + 2 * MARGIN : 0;
+  const fit = layout && hostWidth ? hostWidth / w : 1;
+  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, fit));
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "avl-state-machine", className, style: { width: "100%" }, ...passthrough, children: [
+    header,
+    /* @__PURE__ */ jsx(Box, { ref: hostRef, className: "overflow-x-auto", style: { width: "100%" }, children: layout ? /* @__PURE__ */ jsx(Box, { className: "relative mx-auto", style: { width: w * scale, height: h * scale }, children: /* @__PURE__ */ jsxs(Box, { className: "absolute left-0 top-0", style: { width: w, height: h, transform: `scale(${scale})`, transformOrigin: "0 0" }, children: [
+      /* @__PURE__ */ jsxs("svg", { width: w, height: h, className: "absolute left-0 top-0 overflow-visible", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsx("marker", { id: `avl-sm-head-${trait.name}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "7", markerHeight: "7", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L10 5 L0 10z", fill: AVL_INK.quiet, fillOpacity: 0.8 }) }),
+          /* @__PURE__ */ jsx("marker", { id: `avl-sm-head-hot-${trait.name}`, viewBox: "0 0 10 10", refX: "9", refY: "5", markerWidth: "6", markerHeight: "6", orient: "auto-start-reverse", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L10 5 L0 10z", fill: AVL_INK.focus }) })
+        ] }),
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${MARGIN},${MARGIN})`, children: [
+          layout.nodes.filter((n) => n.isInitial).map((n) => {
+            const cy = n.y + n.height / 2;
+            const rtl = direction === "rtl";
+            const dot = rtl ? n.x + n.width + 18 : n.x - 18;
+            const d = rtl ? `M ${n.x + n.width + 13} ${cy} H ${n.x + n.width + 1}` : `M ${n.x - 13} ${cy} H ${n.x - 1}`;
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("circle", { cx: dot, cy, r: 5, fill: AVL_INK.text }),
+              /* @__PURE__ */ jsx("path", { d, stroke: AVL_INK.quiet, strokeWidth: AVL_STROKE.wire, markerEnd: `url(#avl-sm-head-${trait.name})` })
+            ] }, `init-${n.id}`);
+          }),
+          layout.edges.map((e) => {
+            const fired = e.index === activeTransition;
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                "data-testid": "avl-sm-wire",
+                "data-event": e.event,
+                "data-fired": fired ? "true" : "false",
+                d: roundedEdgePath(e.points, 10),
+                fill: "none",
+                stroke: fired ? AVL_INK.focus : AVL_INK.quiet,
+                strokeOpacity: fired ? 1 : 0.55,
+                strokeWidth: fired ? AVL_STROKE.active : AVL_STROKE.wire,
+                strokeDasharray: fired ? "8 6" : e.isBackward || e.isSelf ? "5 4" : void 0,
+                markerEnd: `url(#avl-sm-head${fired ? "-hot" : ""}-${trait.name})`,
+                children: fired && !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-14", dur: "0.8s", repeatCount: "indefinite" }) : null
+              },
+              e.id
+            );
+          }),
+          layout.nodes.filter((n) => n.id === activeState).map((n) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: n.x - 5,
+              y: n.y - 5,
+              width: n.width + 10,
+              height: n.height + 10,
+              rx: 12,
+              fill: "none",
+              stroke: AVL_INK.focus,
+              strokeWidth: 4,
+              strokeOpacity: 0.22,
+              children: !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", values: "0.28;0.06;0.28", dur: "1.6s", repeatCount: "indefinite" }) : null
+            },
+            `ring-${n.id}`
+          ))
+        ] })
+      ] }),
+      layout.edges.map((e) => {
+        const tr = trait.transitions.find((x) => x.index === e.index);
+        if (!tr) return null;
+        const fired = e.index === activeTransition;
+        const next = !fired && nextFromActive.has(e.index);
+        const guard = guardText(tr);
+        const pw = pillWidth(tr);
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            "data-testid": "avl-sm-label",
+            "data-event": tr.event,
+            role: clickable ? "button" : void 0,
+            tabIndex: clickable ? 0 : void 0,
+            "aria-current": fired ? "true" : void 0,
+            onClick: clickable ? () => {
+              const payload = { index: tr.index, event: tr.event, from: tr.from, to: tr.to };
+              onTransitionClick?.(payload);
+              if (transitionClickEvent) eventBus.emit(`UI:${transitionClickEvent}`, payload);
+            } : void 0,
+            className: `absolute flex flex-col items-center justify-center ${clickable ? "cursor-pointer" : ""}`,
+            style: { left: MARGIN + e.labelX, top: MARGIN + e.labelY, width: e.labelW, height: e.labelH },
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: "flex items-center gap-1 rounded-md px-2",
+                style: {
+                  height: PILL_H,
+                  width: pw,
+                  background: AVL_INK.surface,
+                  border: `1px ${next ? "dashed" : "solid"} ${fired ? AVL_INK.focus : AVL_INK.line}`,
+                  fontFamily: AVL_FONT.mono,
+                  fontSize: 12,
+                  color: fired ? AVL_INK.focus : AVL_INK.text,
+                  fontWeight: fired ? 600 : 400
+                },
+                children: [
+                  guard !== null ? /* @__PURE__ */ jsx(AvlExplain, { lines: [t("avl.guard"), t("avl.guardCaption")], code: guard, children: /* @__PURE__ */ jsx(Box, { as: "span", role: "img", tabIndex: 0, "aria-label": `${t("avl.guard")}: ${guard}`, "data-testid": "avl-guard-glyph", className: "inline-flex shrink-0 cursor-help rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 1 L11 6 L6 11 L1 6z", fill: AVL_INK.surface, stroke: fired ? AVL_INK.focus : AVL_INK.quiet, strokeWidth: 1.2 }) }) }) }) : null,
+                  annotations?.transitions?.[tr.event] ? /* @__PURE__ */ jsx(AvlExplain, { lines: [tr.event], code: guard ?? void 0, note: annotations.transitions[tr.event], children: /* @__PURE__ */ jsx(Box, { as: "span", tabIndex: 0, "data-explain": `transition:${tr.event}`, className: "whitespace-nowrap underline decoration-dotted underline-offset-2 cursor-help", children: tr.event }) }) : /* @__PURE__ */ jsx(Box, { as: "span", className: "whitespace-nowrap", children: tr.event }),
+                  tr.effects.map((fx, i) => /* @__PURE__ */ jsx(AvlEffectChip, { effectType: fx.type, size: EFFECT_CHIP, note: annotations?.effects?.[fx.type], code: effectText(fx) }, `${fx.type}-${i}`))
+                ]
+              }
+            )
+          },
+          `label-${e.id}`
+        );
+      }),
+      trait.states.map((s) => {
+        const n = layout.nodes.find((x) => x.id === s.name);
+        if (!n) return null;
+        const active = s.name === activeState;
+        const selected = s.name === selectedState;
+        const pending = s.name === pendingSourceState;
+        const visit = visitOrder.get(s.name);
+        const idle = activeState !== void 0 && !active && visit === void 0;
+        const gear = nodeShape === "gear";
+        const emphasis = active || selected || pending;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            "data-testid": "avl-sm-state",
+            "data-state": s.name,
+            "data-active": active ? "true" : "false",
+            "data-selected": selected ? "true" : "false",
+            "data-pending": pending ? "true" : "false",
+            "data-shape": nodeShape,
+            role: stateClickEvent ? "button" : void 0,
+            tabIndex: stateClickEvent ? 0 : void 0,
+            "aria-current": active ? "true" : void 0,
+            "aria-pressed": stateClickEvent ? selected : void 0,
+            onClick: stateClickEvent ? () => eventBus.emit(`UI:${stateClickEvent}`, { stateId: s.name }) : void 0,
+            className: `absolute flex items-center justify-center ${gear ? "rounded-full" : "rounded-lg"} ${stateClickEvent ? "cursor-pointer" : ""}`,
+            style: {
+              left: MARGIN + n.x,
+              top: MARGIN + n.y,
+              width: n.width,
+              height: n.height,
+              background: gear ? "transparent" : AVL_INK.surface,
+              border: gear ? "none" : `${emphasis ? 2 : 1}px ${pending ? "dashed" : "solid"} ${emphasis ? AVL_INK.focus : AVL_INK.line}`,
+              boxShadow: gear ? "none" : s.isTerminal ? `0 0 0 3px ${AVL_INK.surface}, 0 0 0 4px ${AVL_INK.line}, var(--shadow-sm)` : selected ? `0 0 0 4px ${avlTint(AVL_INK.focus, 18)}, var(--shadow-hover)` : active ? "var(--shadow-hover)" : "var(--shadow-sm)",
+              color: idle ? AVL_INK.quiet : AVL_INK.text,
+              fontFamily: AVL_FONT.body,
+              fontSize: 13,
+              fontWeight: active ? 600 : 500,
+              transition: "border-color var(--duration-normal, 200ms), box-shadow var(--duration-normal, 200ms)"
+            },
+            children: [
+              pending ? /* @__PURE__ */ jsx(Box, { as: "span", className: "sr-only", children: t("avl.pendingSourceState") }) : null,
+              visit !== void 0 && !active ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  "data-testid": "avl-sm-visit",
+                  className: "absolute flex items-center justify-center rounded-full",
+                  style: { top: -9, left: -9, width: 18, height: 18, fontSize: 11, fontWeight: 600, background: AVL_INK.wash, color: AVL_INK.quiet, border: `1px solid ${AVL_INK.line}` },
+                  children: visit
+                }
+              ) : null,
+              active ? /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "span",
+                  className: "absolute rounded-full px-1.5",
+                  style: { top: -10, right: 8, fontSize: 11, fontWeight: 600, background: AVL_INK.focus, color: AVL_INK.onFocus, boxShadow: `0 0 0 2px ${avlTint(AVL_INK.focus, 18)}` },
+                  children: t("avl.now")
+                }
+              ) : null,
+              gear ? /* @__PURE__ */ jsxs("svg", { "data-testid": "avl-sm-gear", width: n.width, height: n.height, className: "absolute left-0 top-0", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: gearTeethPath(n.width / 2, n.height / 2, n.width / 2 - 8, n.width / 2 - 1, 12),
+                    fill: AVL_INK.surface,
+                    stroke: emphasis ? AVL_INK.focus : AVL_INK.line,
+                    strokeWidth: emphasis ? 2 : 1.25,
+                    strokeDasharray: pending || s.isTerminal ? "4 3" : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: n.width / 2, cy: n.height / 2, r: n.width / 2 - 14, fill: "none", stroke: AVL_INK.line, strokeWidth: 1 })
+              ] }) : null,
+              annotations?.states?.[s.name] ? /* @__PURE__ */ jsx(AvlExplain, { lines: [s.name], note: annotations.states[s.name], children: /* @__PURE__ */ jsx(Box, { as: "span", tabIndex: 0, "data-explain": `state:${s.name}`, className: "relative underline decoration-dotted underline-offset-2 cursor-help", children: s.name }) }) : /* @__PURE__ */ jsx(Box, { as: "span", className: "relative", children: s.name })
+            ]
+          },
+          s.name
+        );
+      })
+    ] }) }) : layoutFailed ? /* @__PURE__ */ jsxs(Box, { role: "alert", className: "flex flex-col items-center justify-center gap-2 py-10", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.layoutFailed") }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", label: t("common.retry"), onClick: () => setLayoutAttempt((n) => n + 1) })
+    ] }) : /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-10", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", children: t("avl.computingLayout") }) }) })
+  ] });
+};
+var Rail = ({ kind, event }) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    as: "span",
+    className: "inline-flex items-center gap-1 rounded-full px-2",
+    style: { fontFamily: AVL_FONT.mono, fontSize: 12, lineHeight: "20px", border: `1px solid ${AVL_INK.line}`, background: AVL_INK.wash, color: AVL_INK.quiet },
+    children: [
+      kind,
+      /* @__PURE__ */ jsx(Box, { as: "span", style: { color: AVL_INK.text, fontWeight: 600 }, children: event })
+    ]
+  }
+);
+AvlStateMachine.displayName = "AvlStateMachine";
+
+export { AvlStateMachine, BODY_CHAR, MARGIN, MAX_SCALE, MIN_SCALE, MONO_CHAR, PILL_H, metricsFor, pillWidth };