@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/chunk-K4MOPSEL.js

@@ -0,0 +1,674 @@
+import { JsonTreeEditor } from './chunk-ILQXJ2AR.js';
+import { transitionPlayback, Accordion } from './chunk-REXYVBUO.js';
+import { EmptyState } from './chunk-AGXD77SL.js';
+import { useContainerWidth, roundedEdgePath } from './chunk-TXAUOLWZ.js';
+import { AvlExplain, AvlEffectChip } from './chunk-AB3X7QTE.js';
+import { AvlEffect } from './chunk-DZBQA2OW.js';
+import { parseTraitLevel } from './chunk-PCR37T3U.js';
+import { AVL_INK, AVL_FONT, effectZoneOf, avlTint, OPERATOR_CATEGORY_COLORS, avlBlend } from './chunk-UXLE3IPR.js';
+import { useTranslate, useMediaQuery, Box, Typography, Card, VStack, HStack, Badge, Button } from './chunk-4YXBKHHM.js';
+import { useRef, useMemo, useState } from 'react';
+import { formatSExpr, JsonValueSchema, isJsonObject, isBinding } from '@almadar/core';
+import { operatorVisualForm, getStdOperatorMeta } from '@almadar/std/registry';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MONO = 7.4;
+var ROW = 40;
+var GAP_X = 112;
+var GAP_Y = 16;
+var PAD = 12;
+var keyOf = (path) => path.join(".");
+function leafLabel(expr) {
+  if (typeof expr === "string") return isBinding(expr) ? expr : JSON.stringify(expr);
+  if (expr === null) return "null";
+  if (typeof expr === "number" || typeof expr === "boolean") return String(expr);
+  return Array.isArray(expr) ? "[\u2026]" : "{\u2026}";
+}
+function build(expr, path) {
+  const base = { key: keyOf(path), path, expr, x: 0, y: 0, w: 0, h: 0, bandTop: 0, bandBottom: 0, wireLabels: [] };
+  if (Array.isArray(expr) && expr.length > 0 && typeof expr[0] === "string") {
+    const op = expr[0];
+    const args = expr.slice(1);
+    const form = operatorVisualForm(op) ?? "unknown";
+    if (form === "scope" && Array.isArray(args[0])) {
+      const pairs = args[0];
+      const bindings = pairs.map((pair, i) => {
+        const value = Array.isArray(pair) ? pair[1] : pair;
+        return build(value, [...path, 1, i, 1]);
+      });
+      const names = pairs.map((pair) => Array.isArray(pair) && typeof pair[0] === "string" ? pair[0] : "");
+      const body = args.slice(1).map((a, i) => build(a, [...path, i + 2]));
+      return { ...base, kind: "call", label: op, form, children: [...bindings, ...body], wireLabels: [...names, ...body.map(() => "")] };
+    }
+    if (form === "template") {
+      const params = args[0];
+      const body = args.slice(1).map((a, i) => build(a, [...path, i + 2]));
+      const paramText = Array.isArray(params) ? params.join(" ") : typeof params === "string" ? params : "";
+      return { ...base, kind: "call", label: `fn [${paramText}]`, form, children: body, wireLabels: body.map(() => "") };
+    }
+    const children = args.map((a, i) => build(a, [...path, i + 1]));
+    return { ...base, kind: "call", label: op, form, children, wireLabels: children.map(() => "") };
+  }
+  if (Array.isArray(expr)) {
+    const children = expr.map((a, i) => build(a, [...path, i]));
+    return { ...base, kind: "array", label: "[ ]", form: null, children, wireLabels: children.map((_, i) => String(i)) };
+  }
+  if (expr !== null && typeof expr === "object") {
+    const entries = Object.entries(expr);
+    const children = entries.map(([k, v]) => build(v, [...path, k]));
+    return { ...base, kind: "object", label: "{ }", form: null, children, wireLabels: entries.map(([k]) => k) };
+  }
+  return { ...base, kind: isBinding(expr) ? "binding" : "literal", label: leafLabel(expr), form: null, children: [] };
+}
+function size(n) {
+  n.children.forEach(size);
+  const ports = Math.max(1, n.children.length);
+  if (n.kind === "binding" || n.kind === "literal") {
+    n.w = Math.max(40, Math.round(n.label.length * MONO + 26));
+    n.h = 28;
+    return;
+  }
+  const labelW = Math.round(n.label.length * MONO + 28);
+  switch (n.form) {
+    case "series":
+    case "parallel":
+      n.w = Math.max(labelW, 120);
+      n.h = Math.max(ROW + 16, ports * 40 + 26);
+      return;
+    case "conveyor":
+      n.w = Math.max(labelW, 200);
+      n.h = Math.max(64, ports * 30 + 14);
+      return;
+    case "ladder":
+      n.w = Math.max(labelW, 80);
+      n.h = Math.max(ROW, ports * 30 + 14);
+      return;
+    case "actuator":
+      n.w = Math.max(labelW + 22, 96);
+      n.h = Math.max(ROW, ports * 26 + 12);
+      return;
+    default:
+      n.w = Math.max(labelW, 56);
+      n.h = Math.max(ROW, ports * 26 + 12);
+  }
+}
+function place(n, right, top) {
+  n.x = right - n.w;
+  if (n.children.length === 0) {
+    n.bandTop = top;
+    n.bandBottom = top + n.h;
+    n.y = top;
+    return n.h;
+  }
+  let cursor = top;
+  const childRight = n.x - GAP_X;
+  for (const child of n.children) {
+    const band2 = place(child, childRight, cursor);
+    cursor += band2 + GAP_Y;
+  }
+  const childrenBottom = cursor - GAP_Y;
+  const span = childrenBottom - top;
+  const band = Math.max(span, n.h);
+  n.bandTop = top;
+  n.bandBottom = top + band;
+  n.y = top + (band - n.h) / 2;
+  return band;
+}
+function subtreeWidth(n) {
+  return n.w + (n.children.length ? GAP_X + Math.max(...n.children.map(subtreeWidth)) : 0);
+}
+function shift(n, dx, dy) {
+  n.x += dx;
+  n.y += dy;
+  n.bandTop += dy;
+  n.bandBottom += dy;
+  n.children.forEach((c) => shift(c, dx, dy));
+}
+function buildCircuit(expr) {
+  const root = build(expr, []);
+  size(root);
+  const width = subtreeWidth(root);
+  const height = place(root, width, 0);
+  shift(root, PAD, PAD);
+  return { root, w: width + 2 * PAD, h: height + 2 * PAD };
+}
+function portY(n, i) {
+  const count = Math.max(1, n.children.length);
+  return n.y + n.h * (i + 1) / (count + 1);
+}
+function circuitState(trace, cursor) {
+  const out = /* @__PURE__ */ new Map();
+  const get = (k) => {
+    let s = out.get(k);
+    if (!s) {
+      s = { status: "idle", results: [] };
+      out.set(k, s);
+    }
+    return s;
+  };
+  for (let i = 0; i <= cursor && i < trace.length; i++) {
+    const step = trace[i];
+    const s = get(keyOf(step.path));
+    if (step.kind === "enter") s.status = "active";
+    else if (step.kind === "skip") s.status = "skipped";
+    else if (step.kind === "exit") {
+      if (step.error !== void 0) {
+        s.status = "error";
+        s.error = step.error;
+      } else {
+        s.status = "done";
+        s.value = step.value;
+        s.results.push(step.value ?? null);
+      }
+    }
+  }
+  return out;
+}
+function activeStack(trace, cursor) {
+  const stack = [];
+  for (let i = 0; i <= cursor && i < trace.length; i++) {
+    const step = trace[i];
+    const k = keyOf(step.path);
+    if (step.kind === "enter") stack.push(k);
+    else if (step.kind === "exit") {
+      const at = stack.lastIndexOf(k);
+      if (at >= 0) stack.splice(at, 1);
+    }
+  }
+  return stack;
+}
+var MIN_SCALE = 0.85;
+var MAX_SCALE = 1.2;
+var IDLE = { status: "idle", results: [] };
+function truthy(v) {
+  return v !== void 0 && v !== null && v !== false && v !== 0 && v !== "";
+}
+function fmt(v) {
+  if (v === void 0) return "";
+  if (v === null || typeof v !== "object") return typeof v === "string" ? JSON.stringify(v) : String(v);
+  if (Array.isArray(v)) {
+    return v.length <= 4 && v.every((x) => x === null || typeof x !== "object") ? `[${v.map(fmt).join(" ")}]` : `[${v.length}]`;
+  }
+  const keys = Object.keys(v);
+  return keys.length <= 3 ? `{${keys.join(", ")}}` : `{${keys.length}}`;
+}
+function opColor(op) {
+  const meta = getStdOperatorMeta(op);
+  return meta ? OPERATOR_CATEGORY_COLORS[meta.category] : AVL_INK.quiet;
+}
+var AvlCircuit = ({ expr, trace, cursor, title, showCode = true, className }) => {
+  const { t } = useTranslate();
+  const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const hostRef = useRef(null);
+  const hostWidth = useContainerWidth(hostRef);
+  const circuit = useMemo(() => buildCircuit(expr), [expr]);
+  const at = trace ? Math.min(cursor ?? trace.length - 1, trace.length - 1) : -1;
+  const states = useMemo(() => trace ? circuitState(trace, at) : /* @__PURE__ */ new Map(), [trace, at]);
+  const stack = useMemo(() => trace ? activeStack(trace, at) : [], [trace, at]);
+  const nodes = useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    const walk2 = (n) => {
+      out.set(n.key, n);
+      n.children.forEach(walk2);
+    };
+    walk2(circuit.root);
+    return out;
+  }, [circuit]);
+  const parents = useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    const walk2 = (n) => {
+      n.children.forEach((c) => {
+        out.set(c.key, n);
+        walk2(c);
+      });
+    };
+    walk2(circuit.root);
+    return out;
+  }, [circuit]);
+  const stateOf = (n) => {
+    const s = states.get(n.key) ?? IDLE;
+    if (s.status !== "skipped") return s;
+    const form = parents.get(n.key)?.form;
+    return form === "series" || form === "parallel" || form === "branch" ? s : IDLE;
+  };
+  const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, hostWidth ? hostWidth / (circuit.w + 120) : 1));
+  const W = circuit.w + 120;
+  const narration = (() => {
+    if (!trace || at < 0) return null;
+    const step = trace[at];
+    const node = nodes.get(step.path.join("."));
+    const code = node ? formatSExpr(node.expr) : "";
+    if (step.kind === "enter") return t("avl.circuit.evaluating", { code });
+    if (step.kind === "skip") return t("avl.circuit.skipped", { code });
+    if (step.kind === "iter") return t("avl.circuit.nextItem", { code });
+    if (step.error !== void 0) return t("avl.circuit.failed", { code, error: step.error });
+    return t("avl.circuit.returned", { code, value: fmt(step.value) });
+  })();
+  const wire = (parent, child, i) => {
+    const s = stateOf(child);
+    const x1 = child.x + child.w;
+    const y1 = child.y + child.h / 2;
+    const x2 = parent.x;
+    const y2 = portY(parent, i);
+    const xm = x2 - 24;
+    const d = roundedEdgePath([{ x: x1, y: y1 }, { x: xm, y: y1 }, { x: xm, y: y2 }, { x: x2, y: y2 }], 8);
+    const live = s.status === "done";
+    const running = s.status === "active";
+    const label = parent.wireLabels[i];
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: s.status === "error" ? AVL_INK.fail : live || running ? AVL_INK.focus : AVL_INK.quiet,
+          strokeOpacity: s.status === "skipped" ? 0.25 : live || running ? 1 : 0.5,
+          strokeWidth: live ? 2 : 1.5,
+          strokeDasharray: s.status === "skipped" ? "3 4" : running ? "8 6" : void 0,
+          children: running && !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-14", dur: "0.8s", repeatCount: "indefinite" }) : null
+        }
+      ),
+      label ? /* @__PURE__ */ jsx("text", { x: xm + 4, y: y2 - 6, fontFamily: AVL_FONT.mono, fontSize: 12, fill: AVL_INK.quiet, children: label }) : null,
+      live && s.value !== void 0 ? valueChip((x1 + xm) / 2, y1, s.value, true) : null
+    ] }, `w-${child.key}`);
+  };
+  const valueChip = (x, y, v, centered = false) => {
+    const text = fmt(v);
+    const w = Math.max(28, text.length * 7.4 + 14);
+    if (centered) x -= w / 2;
+    const isBool = typeof v === "boolean";
+    const tone = isBool ? v ? AVL_INK.pass : AVL_INK.fail : AVL_INK.focus;
+    return /* @__PURE__ */ jsxs("g", { children: [
+      /* @__PURE__ */ jsx("title", { children: JSON.stringify(v) }),
+      /* @__PURE__ */ jsx("rect", { x, y: y - 22, width: w, height: 18, rx: 9, fill: avlTint(tone, 16), stroke: tone, strokeWidth: 1 }),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          "data-testid": "avl-circuit-value",
+          x: x + w / 2,
+          y: y - 13,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fontFamily: AVL_FONT.mono,
+          fontSize: 12,
+          fontWeight: 600,
+          fill: AVL_INK.text,
+          children: text
+        }
+      )
+    ] });
+  };
+  const switchGlyph = (n, i, cx, cy, vertical) => {
+    const child = n.children[i];
+    const s = stateOf(child);
+    const decided = s.status === "done";
+    const closed = decided && truthy(s.value);
+    const color = s.status === "skipped" ? AVL_INK.quiet : decided ? closed ? AVL_INK.focus : AVL_INK.fail : AVL_INK.quiet;
+    const a = vertical ? { x: cx, y: cy - 13 } : { x: cx - 14, y: cy };
+    const b = vertical ? { x: cx, y: cy + 13 } : { x: cx + 14, y: cy };
+    const lever = closed || !decided ? b : vertical ? { x: cx + 16, y: cy + 6 } : { x: cx + 8, y: cy - 14 };
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        opacity: s.status === "skipped" ? 0.35 : 1,
+        ...decided && !closed ? { "data-testid": "avl-circuit-open-switch", "data-key": child.key } : {},
+        children: [
+          /* @__PURE__ */ jsx("line", { x1: n.x, y1: portY(n, i), x2: vertical ? cx - 4 : cx, y2: cy, stroke: AVL_INK.quiet, strokeWidth: 1, strokeDasharray: "2 3" }),
+          /* @__PURE__ */ jsx("circle", { cx: a.x, cy: a.y, r: 2.5, fill: AVL_INK.text }),
+          /* @__PURE__ */ jsx("circle", { cx: b.x, cy: b.y, r: 2.5, fill: decided && !closed ? AVL_INK.quiet : AVL_INK.text }),
+          /* @__PURE__ */ jsx("line", { x1: a.x, y1: a.y, x2: lever.x, y2: lever.y, stroke: color, strokeWidth: 2.5, strokeLinecap: "round" })
+        ]
+      },
+      `sw-${child.key}`
+    );
+  };
+  const body = (n) => {
+    const s = stateOf(n);
+    const cx = n.x + n.w / 2;
+    const cy = n.y + n.h / 2;
+    const tint = n.kind === "call" && n.form !== "template" ? opColor(n.label) : AVL_INK.quiet;
+    const frame = (dashed = false) => /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: n.x,
+        y: n.y,
+        width: n.w,
+        height: n.h,
+        rx: n.kind === "binding" || n.kind === "literal" ? n.h / 2 : 10,
+        fill: n.kind === "call" ? avlBlend(tint, 12, AVL_INK.surface) : n.kind === "literal" ? AVL_INK.wash : AVL_INK.surface,
+        stroke: s.status === "error" ? AVL_INK.fail : s.status === "active" ? AVL_INK.focus : n.kind === "call" ? avlBlend(tint, 55, AVL_INK.line) : AVL_INK.line,
+        strokeWidth: s.status === "active" ? 2 : 1,
+        strokeDasharray: dashed || n.form === "unknown" ? "5 4" : void 0
+      }
+    );
+    const caption = (text, big = false) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: n.form === "series" || n.form === "parallel" || n.form === "conveyor" || n.form === "ladder" ? n.x + 10 : cx,
+        y: n.form === "series" || n.form === "parallel" || n.form === "conveyor" || n.form === "ladder" ? n.y + 14 : cy,
+        textAnchor: n.form === "series" || n.form === "parallel" || n.form === "conveyor" || n.form === "ladder" ? "start" : "middle",
+        dominantBaseline: "central",
+        fontFamily: AVL_FONT.mono,
+        fontSize: big ? 18 : 12,
+        fontWeight: big ? 600 : 500,
+        fill: n.kind === "literal" ? AVL_INK.quiet : AVL_INK.text,
+        children: text
+      }
+    );
+    if (n.kind !== "call") return /* @__PURE__ */ jsxs(Fragment, { children: [
+      frame(),
+      caption(n.label)
+    ] });
+    switch (n.form) {
+      case "series": {
+        const rx = n.x + n.w - 34;
+        const ys = n.children.map((_, i) => portY(n, i));
+        let lit = true;
+        const segs = [];
+        let prev = n.y + 8;
+        n.children.forEach((c, i) => {
+          const cs = stateOf(c);
+          segs.push(/* @__PURE__ */ jsx("line", { x1: rx, y1: prev, x2: rx, y2: ys[i] - 13, stroke: lit ? AVL_INK.focus : AVL_INK.quiet, strokeOpacity: lit ? 1 : 0.4, strokeWidth: 2 }, `r${i}`));
+          lit = lit && cs.status === "done" && truthy(cs.value);
+          prev = ys[i] + 13;
+        });
+        segs.push(/* @__PURE__ */ jsx("line", { x1: rx, y1: prev, x2: rx, y2: cy, stroke: lit ? AVL_INK.focus : AVL_INK.quiet, strokeOpacity: lit ? 1 : 0.4, strokeWidth: 2 }, "rend"));
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          caption(n.label),
+          segs,
+          n.children.map((_, i) => switchGlyph(n, i, rx, ys[i], true))
+        ] });
+      }
+      case "parallel": {
+        const l = n.x + 18;
+        const r = n.x + n.w - 18;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          caption(n.label),
+          /* @__PURE__ */ jsx("line", { x1: l, y1: portY(n, 0) - 10, x2: l, y2: portY(n, n.children.length - 1) + 10, stroke: AVL_INK.quiet, strokeWidth: 2 }),
+          /* @__PURE__ */ jsx("line", { x1: r, y1: portY(n, 0) - 10, x2: r, y2: portY(n, n.children.length - 1) + 10, stroke: AVL_INK.quiet, strokeWidth: 2 }),
+          n.children.map((c, i) => {
+            const cs = stateOf(c);
+            const on = cs.status === "done" && truthy(cs.value);
+            const py = portY(n, i);
+            return /* @__PURE__ */ jsxs("g", { children: [
+              /* @__PURE__ */ jsx("line", { x1: l, y1: py, x2: (l + r) / 2 - 12, y2: py, stroke: on ? AVL_INK.focus : AVL_INK.quiet, strokeWidth: 1.5 }),
+              /* @__PURE__ */ jsx("line", { x1: (l + r) / 2 + 12, y1: py, x2: r, y2: py, stroke: on ? AVL_INK.focus : AVL_INK.quiet, strokeWidth: 1.5 }),
+              switchGlyph(n, i, (l + r) / 2, py, false)
+            ] }, `b${i}`);
+          })
+        ] });
+      }
+      case "branch": {
+        const cond = stateOf(n.children[0]);
+        const takenIndex = cond.status === "done" ? truthy(cond.value) ? 1 : 2 : -1;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          n.children.slice(1).map((c, j) => {
+            const i = j + 1;
+            const on = i === takenIndex;
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: `M ${n.x} ${portY(n, i)} C ${cx} ${portY(n, i)}, ${cx} ${cy}, ${n.x + n.w} ${cy}`,
+                fill: "none",
+                stroke: on ? AVL_INK.focus : AVL_INK.quiet,
+                strokeOpacity: on ? 1 : 0.35,
+                strokeWidth: on ? 2.5 : 1.5
+              },
+              `t${i}`
+            );
+          }),
+          /* @__PURE__ */ jsx("line", { x1: n.x, y1: portY(n, 0), x2: cx, y2: cy, stroke: AVL_INK.quiet, strokeWidth: 1, strokeDasharray: "2 3" }),
+          /* @__PURE__ */ jsx("text", { x: n.x + 8, y: n.y + 12, fontFamily: AVL_FONT.mono, fontSize: 12, fill: AVL_INK.text, children: n.label })
+        ] });
+      }
+      case "conveyor": {
+        const collection = stateOf(n.children[0]);
+        const items = Array.isArray(collection.value) ? collection.value : [];
+        const lambda = n.children[1];
+        const bodyNode = lambda?.children[lambda.children.length - 1];
+        const bodyState = bodyNode ? stateOf(bodyNode) : IDLE;
+        const results = bodyState.results;
+        const beltY = n.y + n.h - 26;
+        const step = items.length ? (n.w - 24) / items.length : 0;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          caption(n.label),
+          /* @__PURE__ */ jsx("rect", { x: n.x + 8, y: beltY - 12, width: n.w - 16, height: 24, rx: 12, fill: AVL_INK.wash, stroke: AVL_INK.line }),
+          items.map((item, i) => {
+            const done = i < results.length;
+            const current = bodyState.status === "active" && i === results.length;
+            const result = done ? results[i] : void 0;
+            const kept = typeof result === "boolean" ? result : true;
+            const x = n.x + 12 + i * step;
+            return /* @__PURE__ */ jsxs("g", { "data-testid": "avl-circuit-item", "data-result": done ? String(result) : "pending", children: [
+              /* @__PURE__ */ jsx("title", { children: JSON.stringify(item) }),
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x,
+                  y: beltY - 9,
+                  width: step - 6,
+                  height: 18,
+                  rx: 9,
+                  fill: done ? avlTint(kept ? AVL_INK.pass : AVL_INK.fail, 16) : AVL_INK.surface,
+                  stroke: current ? AVL_INK.focus : done ? kept ? AVL_INK.pass : AVL_INK.fail : AVL_INK.line,
+                  strokeWidth: current ? 2 : 1,
+                  opacity: done && !kept ? 0.55 : 1
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "text",
+                {
+                  x: x + (step - 6) / 2,
+                  y: beltY,
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  fontFamily: AVL_FONT.mono,
+                  fontSize: 12,
+                  fill: AVL_INK.text,
+                  textDecoration: done && !kept ? "line-through" : void 0,
+                  children: [
+                    `#${i + 1}`,
+                    done ? typeof result === "boolean" ? kept ? " \u2713" : " \u2715" : ` ${fmt(result)}` : ""
+                  ]
+                }
+              )
+            ] }, `it${i}`);
+          })
+        ] });
+      }
+      case "ladder": {
+        const rl = n.x + 14;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          caption(n.label),
+          /* @__PURE__ */ jsx("line", { x1: rl, y1: n.y + 22, x2: rl, y2: n.y + n.h - 6, stroke: AVL_INK.focus, strokeWidth: 2 }),
+          n.children.map((c, i) => {
+            const cs = stateOf(c);
+            const color = cs.status === "done" ? AVL_INK.pass : cs.status === "active" ? AVL_INK.focus : cs.status === "error" ? AVL_INK.fail : AVL_INK.quiet;
+            return /* @__PURE__ */ jsx("line", { x1: rl, y1: portY(n, i), x2: n.x + n.w - 10, y2: portY(n, i), stroke: color, strokeWidth: cs.status === "idle" ? 1 : 2 }, `r${i}`);
+          })
+        ] });
+      }
+      case "actuator": {
+        const zone = effectZoneOf(n.label);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          /* @__PURE__ */ jsx("svg", { x: n.x + 6, y: cy - 9, width: 18, height: 18, viewBox: "-9 -9 18 18", overflow: "visible", children: /* @__PURE__ */ jsx(AvlEffect, { effectType: n.label, size: 7, color: s.status === "done" ? AVL_INK.pass : AVL_INK.quiet }) }),
+          /* @__PURE__ */ jsx("text", { x: n.x + 28, y: cy, dominantBaseline: "central", fontFamily: AVL_FONT.mono, fontSize: 12, fontWeight: 600, fill: AVL_INK.text, children: n.label }),
+          s.status === "done" && zone ? /* @__PURE__ */ jsxs("text", { "data-testid": "avl-circuit-zone", x: n.x + n.w - 8, y: n.y + n.h + 14, textAnchor: "end", fontFamily: AVL_FONT.mono, fontSize: 12, fill: AVL_INK.pass, children: [
+            "\u2192 ",
+            t(`avl.circuit.zone.${zone}`)
+          ] }) : null
+        ] });
+      }
+      case "invert":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("path", { d: `M ${n.x + 8} ${n.y + 6} L ${n.x + n.w - 14} ${cy} L ${n.x + 8} ${n.y + n.h - 6} Z`, fill: AVL_INK.surface, stroke: AVL_INK.line }),
+          /* @__PURE__ */ jsx("circle", { cx: n.x + n.w - 9, cy, r: 4, fill: AVL_INK.surface, stroke: AVL_INK.line })
+        ] });
+      case "template":
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(true),
+          caption(n.label)
+        ] });
+      default:
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          frame(),
+          caption(n.form === "unknown" ? `${n.label} ?` : n.label, n.label.length <= 2)
+        ] });
+    }
+  };
+  const drawn = [];
+  const walk = (n) => {
+    n.children.forEach((c, i) => {
+      walk(c);
+      drawn.push(wire(n, c, i));
+    });
+    const s = stateOf(n);
+    drawn.push(
+      /* @__PURE__ */ jsxs(
+        "g",
+        {
+          "data-testid": "avl-circuit-node",
+          "data-key": n.key,
+          "data-kind": n.kind,
+          "data-form": n.form ?? "",
+          "data-status": s.status,
+          opacity: s.status === "skipped" ? 0.35 : 1,
+          children: [
+            s.status === "active" ? /* @__PURE__ */ jsx("rect", { x: n.x - 4, y: n.y - 4, width: n.w + 8, height: n.h + 8, rx: 14, fill: "none", stroke: AVL_INK.focus, strokeOpacity: 0.22, strokeWidth: 4, children: !reduceMotion ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-opacity", values: "0.28;0.06;0.28", dur: "1.6s", repeatCount: "indefinite" }) : null }) : null,
+            body(n)
+          ]
+        },
+        `n-${n.key}`
+      )
+    );
+  };
+  walk(circuit.root);
+  const root = circuit.root;
+  const rootState = stateOf(root);
+  const outY = root.y + root.h / 2;
+  return /* @__PURE__ */ jsxs(Box, { className, style: { width: "100%" }, children: [
+    title || showCode ? /* @__PURE__ */ jsxs(Box, { className: "pb-2", children: [
+      title ? /* @__PURE__ */ jsx(Typography, { variant: "body", weight: "semibold", children: title }) : null,
+      showCode ? /* @__PURE__ */ jsx(Box, { as: "code", "data-testid": "avl-circuit-code", style: { display: "block", fontFamily: AVL_FONT.mono, fontSize: 13, color: AVL_INK.quiet, whiteSpace: "pre-wrap" }, children: formatSExpr(expr) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx(Box, { ref: hostRef, className: "overflow-x-auto", style: { width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "relative mx-auto", style: { width: W * scale, height: circuit.h * scale }, children: /* @__PURE__ */ jsxs("svg", { width: W * scale, height: circuit.h * scale, viewBox: `0 0 ${W} ${circuit.h}`, role: "img", "aria-label": formatSExpr(expr), children: [
+      drawn,
+      /* @__PURE__ */ jsx("path", { d: `M ${root.x + root.w} ${outY} H ${root.x + root.w + 38}`, stroke: rootState.status === "done" ? AVL_INK.focus : AVL_INK.quiet, strokeWidth: 2 }),
+      rootState.status === "done" && typeof rootState.value === "boolean" ? /* @__PURE__ */ jsx("circle", { cx: root.x + root.w + 48, cy: outY, r: 8, fill: rootState.value ? AVL_INK.pass : AVL_INK.fail }) : null,
+      rootState.status === "done" && rootState.value !== void 0 ? valueChip(root.x + root.w + 62, outY + 10, rootState.value) : null
+    ] }) }) }),
+    narration !== null ? /* @__PURE__ */ jsxs(Box, { className: "pt-2", children: [
+      /* @__PURE__ */ jsxs(Box, { "data-testid": "avl-circuit-narration", style: { fontSize: 13, color: AVL_INK.quiet }, children: [
+        /* @__PURE__ */ jsx(Box, { as: "span", style: { color: AVL_INK.text, fontWeight: 600 }, children: t("avl.circuit.step", { n: at + 1, total: trace?.length ?? 0 }) }),
+        " \u2014 ",
+        narration
+      ] }),
+      stack.length > 0 ? /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap items-center gap-1 pt-1", style: { fontFamily: AVL_FONT.mono, fontSize: 12, color: AVL_INK.quiet }, children: [
+        t("avl.circuit.stack"),
+        stack.map((k, i) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            "data-testid": "avl-circuit-stack-frame",
+            className: "rounded px-1.5",
+            style: { border: `1px solid ${i === stack.length - 1 ? AVL_INK.focus : AVL_INK.line}`, color: i === stack.length - 1 ? AVL_INK.focus : AVL_INK.quiet, background: AVL_INK.wash },
+            children: nodes.get(k)?.label ?? k
+          },
+          k
+        ))
+      ] }) : null
+    ] }) : null
+  ] });
+};
+AvlCircuit.displayName = "AvlCircuit";
+var EffectHeader = ({ type, failed, failedLabel, note }) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+  /* @__PURE__ */ jsx(AvlEffectChip, { effectType: type, size: 18, note }),
+  /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", children: type }),
+  failed ? /* @__PURE__ */ jsx(Badge, { variant: "danger", size: "sm", children: failedLabel }) : null
+] });
+var AvlTransitionDetail = ({ schema, transitionIndex, scene, cursor, transition, playback, ...rest }) => {
+  const { t } = useTranslate();
+  const resolved = useMemo(() => {
+    if (transition) return { transition, playback };
+    if (schema === void 0 || transitionIndex === void 0) return null;
+    const program = typeof schema === "string" ? JSON.parse(schema) : schema;
+    const level = parseTraitLevel(program, rest.orbital, rest.trait);
+    const found = level?.transitions[transitionIndex];
+    if (!level || !found) return null;
+    const steps = scene ?? [];
+    return { transition: found, playback: playback ?? transitionPlayback(level, rest.orbital, found, steps, cursor ?? steps.length - 1) };
+  }, [transition, playback, schema, transitionIndex, scene, cursor, rest.orbital, rest.trait]);
+  if (!resolved) return /* @__PURE__ */ jsx(Box, { "data-testid": "avl-transition-missing", children: /* @__PURE__ */ jsx(EmptyState, { icon: "git-branch", title: t("avl.transitionMissing") }) });
+  return /* @__PURE__ */ jsx(TransitionDetailBody, { ...rest, transition: resolved.transition, ...resolved.playback ? { playback: resolved.playback } : {} });
+};
+var TransitionDetailBody = ({ orbital, trait, transition, annotations, playback, stepEvent, className }) => {
+  const { t } = useTranslate();
+  const [payload, setPayload] = useState({});
+  const guard = transition.guard ?? null;
+  const guardRun = playback?.guard;
+  const request = { orbital, trait, from: transition.from, event: transition.event, payload };
+  const effectItems = useMemo(
+    () => transition.effects.map((effect, i) => {
+      const expr = [effect.type, ...effect.args];
+      const ran = playback?.effects[i];
+      return {
+        id: `effect-${i}`,
+        header: /* @__PURE__ */ jsx(EffectHeader, { type: effect.type, failed: ran?.status === "failed", failedLabel: t("avl.play.effectFailed"), note: annotations?.effects?.[effect.type] }),
+        content: /* @__PURE__ */ jsx(AvlCircuit, { expr, trace: ran?.evalTrace, showCode: true })
+      };
+    }),
+    [transition.effects, playback, t, annotations]
+  );
+  const openEffects = transition.effects.map((effect, i) => effectZoneOf(effect.type) === "screen" ? null : `effect-${i}`).filter((id) => id !== null);
+  return /* @__PURE__ */ jsx(Card, { className: `w-full max-w-5xl mx-auto ${className ?? ""}`, shadow: "md", "data-testid": "avl-transition-detail", children: /* @__PURE__ */ jsx(Box, { className: "p-6", children: /* @__PURE__ */ jsxs(VStack, { gap: "lg", children: [
+    /* @__PURE__ */ jsxs(HStack, { gap: "md", justify: "between", align: "center", wrap: true, children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "lg", children: transition.from }),
+        annotations?.transitions?.[transition.event] ? /* @__PURE__ */ jsx(AvlExplain, { lines: [transition.event], note: annotations.transitions[transition.event], children: /* @__PURE__ */ jsx(Box, { as: "span", tabIndex: 0, "data-testid": "avl-td-event", className: "underline decoration-dotted underline-offset-4 cursor-help", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", weight: "semibold", as: "span", children: transition.event }) }) }) : /* @__PURE__ */ jsx(Box, { as: "span", "data-testid": "avl-td-event", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", weight: "semibold", as: "span", children: transition.event }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h5", color: "muted", children: "\u2192" }),
+        /* @__PURE__ */ jsx(Badge, { variant: "neutral", size: "lg", children: transition.to })
+      ] }),
+      playback ? /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", children: /* @__PURE__ */ jsx(Badge, { variant: playback.fired ? "success" : "warning", size: "md", "data-testid": "avl-transition-verdict", children: playback.fired ? t("avl.play.fired") : guardRun && !guardRun.passed ? t("avl.play.blocked") : t("avl.play.notReached") }) }) : null
+    ] }),
+    stepEvent ? /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: t("avl.play.payload") }),
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(JsonTreeEditor, { value: payload, onChange: (next) => {
+          const json = JsonValueSchema.safeParse(next);
+          setPayload(json.success && isJsonObject(json.data) ? json.data : {});
+        } }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", action: stepEvent, actionPayload: request, leftIcon: "skip-forward", children: t("avl.play.step") })
+      ] })
+    ] }) : null,
+    !playback && stepEvent ? /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: t("avl.play.notPlayed") }) : null,
+    guard !== null ? /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "muted", children: t("avl.guard") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", "data-testid": "avl-td-guard-caption", children: t("avl.guardCaption") }),
+        guardRun ? /* @__PURE__ */ jsx(Badge, { variant: guardRun.passed ? "success" : "danger", size: "sm", children: guardRun.passed ? t("avl.play.guardPassed") : t("avl.play.guardFailed") }) : null
+      ] }),
+      /* @__PURE__ */ jsx(AvlCircuit, { expr: guard, trace: guardRun?.trace })
+    ] }) : null,
+    effectItems.length > 0 ? /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+      /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "center", wrap: true, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "overline", color: "muted", children: [
+          t("avl.effects"),
+          " (",
+          effectItems.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", "data-testid": "avl-td-effects-caption", children: t("avl.effectsCaption") })
+      ] }),
+      /* @__PURE__ */ jsx(Accordion, { items: effectItems, multiple: true, defaultOpenItems: openEffects })
+    ] }) : null
+  ] }) }) });
+};
+AvlTransitionDetail.displayName = "AvlTransitionDetail";
+
+export { AvlCircuit, AvlTransitionDetail };