@almadar/ui 2.15.13 → 2.16.0

package/dist/avl/index.cjs

@@ -0,0 +1,1837 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React6 = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React6__default = /*#__PURE__*/_interopDefault(React6);
+
+// components/atoms/avl/types.ts
+var AVL_OPERATOR_COLORS = {
+  arithmetic: "#4A90D9",
+  comparison: "#E8913A",
+  logic: "#9B59B6",
+  string: "#27AE60",
+  collection: "#1ABC9C",
+  time: "#F39C12",
+  control: "#E74C3C",
+  async: "#E91E8F"
+};
+var AVL_FIELD_TYPE_SHAPES = {
+  string: "circle",
+  number: "triangle",
+  boolean: "square",
+  date: "diamond",
+  enum: "ring",
+  object: "hexagon",
+  array: "bars"
+};
+var AvlOrbital = ({
+  cx = 0,
+  cy = 0,
+  r = 80,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx,
+        cy,
+        r,
+        fill: color,
+        opacity: 0.03
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - r - 8,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlOrbital.displayName = "AvlOrbital";
+function persistenceStroke(kind) {
+  switch (kind) {
+    case "persistent":
+      return { strokeWidth: 2.5 };
+    case "runtime":
+      return { strokeDasharray: "6 3", strokeWidth: 2 };
+    case "singleton":
+      return { strokeWidth: 3.5 };
+    case "instance":
+      return { strokeDasharray: "2 3", strokeWidth: 2 };
+  }
+}
+var AvlEntity = ({
+  x = 0,
+  y = 0,
+  r = 18,
+  fieldCount = 0,
+  persistence = "persistent",
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const strokeProps = persistenceStroke(persistence);
+  const facets = Array.from({ length: fieldCount }, (_, i) => {
+    const angle = Math.PI * 2 * i / fieldCount - Math.PI / 2;
+    const innerR = r + 2;
+    const outerR = r + 10;
+    return {
+      x1: x + innerR * Math.cos(angle),
+      y1: y + innerR * Math.sin(angle),
+      x2: x + outerR * Math.cos(angle),
+      y2: y + outerR * Math.sin(angle)
+    };
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r, fill: color, opacity: 0.15 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r,
+        fill: "none",
+        stroke: color,
+        strokeWidth: strokeProps.strokeWidth,
+        strokeDasharray: strokeProps.strokeDasharray
+      }
+    ),
+    persistence === "singleton" && /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: r - 4,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5
+      }
+    ),
+    facets.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: f.x1,
+        y1: f.y1,
+        x2: f.x2,
+        y2: f.y2,
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.6
+      },
+      i
+    )),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + r + (fieldCount > 0 ? 18 : 14),
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlEntity.displayName = "AvlEntity";
+var AvlTrait = ({
+  cx = 0,
+  cy = 0,
+  rx = 60,
+  ry = 30,
+  rotation = 0,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, transform: `rotate(${rotation},${cx},${cy})`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "ellipse",
+      {
+        cx,
+        cy,
+        rx,
+        ry,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: "4 2"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx - rx - 6,
+        y: cy,
+        textAnchor: "end",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.8,
+        transform: `rotate(${-rotation},${cx - rx - 6},${cy})`,
+        children: label
+      }
+    )
+  ] });
+};
+AvlTrait.displayName = "AvlTrait";
+var AvlPage = ({
+  x = 0,
+  y = 0,
+  size = 12,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const half = size / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: x - half,
+        y: y - half,
+        width: size,
+        height: size,
+        fill: color,
+        opacity: 0.3,
+        stroke: color,
+        strokeWidth: 1.5
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + half + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlPage.displayName = "AvlPage";
+var AvlApplication = ({
+  x = 0,
+  y = 0,
+  width = 500,
+  height = 350,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 12,
+        ry: 12,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 3
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 12,
+        ry: 12,
+        fill: color,
+        opacity: 0.02
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: x + 16,
+        y: y + 20,
+        fill: color,
+        fontSize: 12,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: label
+      }
+    )
+  ] });
+};
+AvlApplication.displayName = "AvlApplication";
+var AvlState = ({
+  x = 0,
+  y = 0,
+  name,
+  isInitial = false,
+  isTerminal = false,
+  width = 100,
+  height = 40,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const rx = height / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, transform: `translate(${x},${y})`, children: [
+    isInitial && /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: -16,
+        cy: height / 2,
+        r: 6,
+        fill: color
+      }
+    ),
+    isTerminal && /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: -4,
+        y: -4,
+        width: width + 8,
+        height: height + 8,
+        rx: rx + 4,
+        ry: rx + 4,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: 0,
+        y: 0,
+        width,
+        height,
+        rx,
+        ry: rx,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    name && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: width / 2,
+        y: height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        children: name
+      }
+    )
+  ] });
+};
+AvlState.displayName = "AvlState";
+var avlTransitionId = 0;
+var AvlTransition = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  curved = false,
+  curveAwayFrom,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlTransitionId += 1;
+    return { arrow: `avl-tr-${avlTransitionId}-arrow` };
+  }, []);
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const curvature = len * 0.2;
+  let perpX = -dy / len;
+  let perpY = dx / len;
+  if (curveAwayFrom) {
+    const testX = mx + perpX * curvature;
+    const testY = my + perpY * curvature;
+    const distTest = Math.sqrt((testX - curveAwayFrom.x) ** 2 + (testY - curveAwayFrom.y) ** 2);
+    const distMid = Math.sqrt((mx - curveAwayFrom.x) ** 2 + (my - curveAwayFrom.y) ** 2);
+    if (distTest < distMid) {
+      perpX = -perpX;
+      perpY = -perpY;
+    }
+  }
+  const cpx = mx + perpX * curvature;
+  const cpy = my + perpY * curvature;
+  const d = curved ? `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}` : `M${x1},${y1} L${x2},${y2}`;
+  const labelX = curved ? (x1 + 2 * cpx + x2) / 4 : mx;
+  const labelY = curved ? (y1 + 2 * cpy + y2) / 4 : my;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "marker",
+      {
+        id: ids.arrow,
+        markerWidth: "8",
+        markerHeight: "6",
+        refX: "7",
+        refY: "3",
+        orient: "auto",
+        markerUnits: "strokeWidth",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        markerEnd: `url(#${ids.arrow})`
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: labelX,
+        y: labelY - 6,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.8,
+        children: label
+      }
+    )
+  ] });
+};
+AvlTransition.displayName = "AvlTransition";
+var AvlEvent = ({
+  x = 0,
+  y = 0,
+  size = 16,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const s = size / 16;
+  const bolt = [
+    `M${x - 2 * s},${y - 8 * s}`,
+    `L${x + 4 * s},${y - 8 * s}`,
+    `L${x + 1 * s},${y - 1 * s}`,
+    `L${x + 5 * s},${y - 1 * s}`,
+    `L${x - 3 * s},${y + 8 * s}`,
+    `L${x},${y + 1 * s}`,
+    `L${x - 4 * s},${y + 1 * s}`,
+    "Z"
+  ].join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: bolt, fill: color }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + size / 2 + 12,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlEvent.displayName = "AvlEvent";
+var AvlGuard = ({
+  x = 0,
+  y = 0,
+  size = 24,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const h = size / 2;
+  const points = `${x},${y - h} ${x + h},${y} ${x},${y + h} ${x - h},${y}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "polygon",
+      {
+        points,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2,
+        strokeLinejoin: "round"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        children: label
+      }
+    )
+  ] });
+};
+AvlGuard.displayName = "AvlGuard";
+function effectIcon(type, x, y, s, color) {
+  switch (type) {
+    case "render-ui":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x - s, y: y - s, width: s * 2, height: s * 2, fill: "none", stroke: color, strokeWidth: 1.5, rx: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s, stroke: color, strokeWidth: 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 1 })
+      ] });
+    case "set":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: `M${x - s * 0.6},${y + s} L${x - s},${y + s * 0.4} L${x + s * 0.4},${y - s} L${x + s},${y - s * 0.4} Z`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5,
+          strokeLinejoin: "round"
+        }
+      );
+    case "persist":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: x, cy: y - s * 0.6, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x - s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + s, y1: y - s * 0.6, x2: x + s, y2: y + s * 0.4, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: x, cy: y + s * 0.4, rx: s, ry: s * 0.4, fill: "none", stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "fetch":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, y1: y - s, x2: x, y2: y + s * 0.6, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: `${x - s * 0.5},${y + s * 0.1} ${x},${y + s} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "emit":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s * 0.3, fill: color }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M${x - s * 0.7},${y - s * 0.7} A${s},${s} 0 0,1 ${x + s * 0.7},${y - s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M${x - s},${y - s} A${s * 1.4},${s * 1.4} 0 0,1 ${x + s},${y - s}`, fill: "none", stroke: color, strokeWidth: 1, opacity: 0.6 })
+      ] });
+    case "navigate":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y, x2: x + s * 0.6, y2: y, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: `${x + s * 0.1},${y - s * 0.5} ${x + s},${y} ${x + s * 0.1},${y + s * 0.5}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "notify":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: `M${x - s * 0.7},${y + s * 0.3} Q${x - s * 0.7},${y - s} ${x},${y - s} Q${x + s * 0.7},${y - s} ${x + s * 0.7},${y + s * 0.3} Z`, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s * 0.8, y1: y + s * 0.3, x2: x + s * 0.8, y2: y + s * 0.3, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y + s * 0.7, r: s * 0.2, fill: color })
+      ] });
+    case "call-service":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y - s * 0.3, x2: x + s, y2: y - s * 0.3, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: `${x + s * 0.5},${y - s * 0.7} ${x + s},${y - s * 0.3} ${x + s * 0.5},${y + s * 0.1}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + s, y1: y + s * 0.3, x2: x - s, y2: y + s * 0.3, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: `${x - s * 0.5},${y - s * 0.1} ${x - s},${y + s * 0.3} ${x - s * 0.5},${y + s * 0.7}`, fill: "none", stroke: color, strokeWidth: 1.5, strokeLinejoin: "round" })
+      ] });
+    case "spawn":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x, y1: y - s * 0.5, x2: x, y2: y + s * 0.5, stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "despawn":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s * 0.5, y1: y, x2: x + s * 0.5, y2: y, stroke: color, strokeWidth: 1.5 })
+      ] });
+    case "do":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: `${x - s * 0.3},${y - s * 0.5} ${x + s * 0.5},${y} ${x - s * 0.3},${y + s * 0.5}`, fill: color })
+      ] });
+    case "if":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: `${x},${y - s} ${x + s * 0.7},${y} ${x},${y + s} ${x - s * 0.7},${y}`,
+          fill: "none",
+          stroke: color,
+          strokeWidth: 1.5,
+          strokeLinejoin: "round"
+        }
+      );
+    case "log":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x,
+          y,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: color,
+          fontSize: s * 2.2,
+          fontFamily: "serif",
+          children: "\xB6"
+        }
+      );
+  }
+}
+var AvlEffect = ({
+  x = 0,
+  y = 0,
+  effectType,
+  size = 8,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    effectIcon(effectType, x, y, size, color),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + size + 10,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlEffect.displayName = "AvlEffect";
+var AvlField = ({
+  x = 0,
+  y = 0,
+  angle = 0,
+  length = 30,
+  required = true,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const x2 = x + length * Math.cos(angle);
+  const y2 = y + length * Math.sin(angle);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x,
+        y1: y,
+        x2,
+        y2,
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: required ? void 0 : "3 2"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x2, cy: y2, r: 2.5, fill: color, opacity: 0.6 }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: x2 + 6 * Math.cos(angle),
+        y: y2 + 6 * Math.sin(angle),
+        textAnchor: Math.cos(angle) >= 0 ? "start" : "end",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlField.displayName = "AvlField";
+function typeShape(kind, x, y, s, color) {
+  switch (kind) {
+    case "string":
+      return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s, fill: color });
+    case "number":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: `${x},${y - s} ${x + s},${y + s * 0.7} ${x - s},${y + s * 0.7}`,
+          fill: color
+        }
+      );
+    case "boolean":
+      return /* @__PURE__ */ jsxRuntime.jsx("rect", { x: x - s * 0.8, y: y - s * 0.8, width: s * 1.6, height: s * 1.6, fill: color });
+    case "date":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: `${x},${y - s} ${x + s},${y} ${x},${y + s} ${x - s},${y}`,
+          fill: color
+        }
+      );
+    case "enum":
+      return /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: s, fill: "none", stroke: color, strokeWidth: 1.5 });
+    case "object":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "polygon",
+        {
+          points: Array.from({ length: 6 }, (_, i) => {
+            const a = Math.PI * 2 * i / 6 - Math.PI / 6;
+            return `${x + s * Math.cos(a)},${y + s * Math.sin(a)}`;
+          }).join(" "),
+          fill: color,
+          opacity: 0.8
+        }
+      );
+    case "array":
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y - s * 0.6, x2: x + s, y2: y - s * 0.6, stroke: color, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y, x2: x + s, y2: y, stroke: color, strokeWidth: 2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x - s, y1: y + s * 0.6, x2: x + s, y2: y + s * 0.6, stroke: color, strokeWidth: 2 })
+      ] });
+  }
+}
+var AvlFieldType = ({
+  x = 0,
+  y = 0,
+  kind,
+  size = 5,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    typeShape(kind, x, y, size, color),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + size + 10,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlFieldType.displayName = "AvlFieldType";
+var AvlBinding = ({
+  x1,
+  y1,
+  x2,
+  y2,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1,
+        y1,
+        x2,
+        y2,
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "2 3",
+        opacity: 0.6
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: mx,
+        y: my - 4,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: "@"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: mx,
+        y: my + 10,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.6,
+        children: label
+      }
+    )
+  ] });
+};
+AvlBinding.displayName = "AvlBinding";
+var AvlPersistence = ({
+  x = 0,
+  y = 0,
+  kind,
+  size = 20,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const half = size / 2;
+  const strokeProps = (() => {
+    switch (kind) {
+      case "persistent":
+        return { strokeWidth: 2.5 };
+      case "runtime":
+        return { strokeDasharray: "6 3", strokeWidth: 2 };
+      case "singleton":
+        return { strokeWidth: 3 };
+      case "instance":
+        return { strokeDasharray: "2 3", strokeWidth: 2 };
+    }
+  })();
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x - half,
+        y1: y,
+        x2: x + half,
+        y2: y,
+        stroke: color,
+        strokeWidth: strokeProps.strokeWidth,
+        strokeDasharray: strokeProps.strokeDasharray,
+        strokeLinecap: "round"
+      }
+    ),
+    kind === "singleton" && /* @__PURE__ */ jsxRuntime.jsx(
+      "line",
+      {
+        x1: x - half,
+        y1: y + 5,
+        x2: x + half,
+        y2: y + 5,
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeLinecap: "round"
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + (kind === "singleton" ? 20 : 14),
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 8,
+        fontFamily: "inherit",
+        opacity: 0.7,
+        children: label
+      }
+    )
+  ] });
+};
+AvlPersistence.displayName = "AvlPersistence";
+var AvlOperator = ({
+  x = 0,
+  y = 0,
+  name,
+  namespace = "arithmetic",
+  size = 16,
+  color,
+  opacity = 1,
+  className
+}) => {
+  const opColor = color ?? AVL_OPERATOR_COLORS[namespace];
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: x - size,
+        y: y - size * 0.7,
+        width: size * 2,
+        height: size * 1.4,
+        rx: 4,
+        ry: 4,
+        fill: opColor,
+        fillOpacity: 0.15,
+        stroke: opColor,
+        strokeWidth: 1.5
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: opColor,
+        fontSize: size > 14 ? 10 : 8,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: name
+      }
+    )
+  ] });
+};
+AvlOperator.displayName = "AvlOperator";
+var AvlSExpr = ({
+  x = 0,
+  y = 0,
+  width = 140,
+  height = 80,
+  label,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x,
+        y,
+        width,
+        height,
+        rx: 6,
+        ry: 6,
+        fill: color,
+        fillOpacity: 0.05,
+        stroke: color,
+        strokeWidth: 1,
+        strokeDasharray: "6 3"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x + 12, cy: y + 12, r: 3, fill: color, opacity: 0.4 }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + 12, y1: y + 15, x2: x + 8, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: x + 12, y1: y + 15, x2: x + 16, y2: y + 22, stroke: color, strokeWidth: 0.8, opacity: 0.3 }),
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: x + width / 2,
+        y: y + height / 2,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 9,
+        fontFamily: "inherit",
+        opacity: 0.6,
+        children: label
+      }
+    )
+  ] });
+};
+AvlSExpr.displayName = "AvlSExpr";
+var AvlLiteral = ({
+  x = 0,
+  y = 0,
+  value,
+  size = 12,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: size,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1,
+        opacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: size > 10 ? 9 : 7,
+        fontFamily: "inherit",
+        children: value
+      }
+    )
+  ] });
+};
+AvlLiteral.displayName = "AvlLiteral";
+var AvlBindingRef = ({
+  x = 0,
+  y = 0,
+  path,
+  size = 12,
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) => {
+  const fullLabel = `@${path}`;
+  const autoR = Math.max(size, fullLabel.length * 3.5 + 4);
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className, opacity, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        cx: x,
+        cy: y,
+        r: autoR,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 1.5,
+        strokeDasharray: "3 2"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x,
+        y: y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        children: fullLabel
+      }
+    )
+  ] });
+};
+AvlBindingRef.displayName = "AvlBindingRef";
+
+// components/molecules/avl/avl-layout.ts
+function ringPositions(cx, cy, r, count, startAngle = -Math.PI / 2) {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + Math.PI * 2 * i / count;
+    return {
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle),
+      angle
+    };
+  });
+}
+function arcPath(cx, cy, r, startAngle, endAngle) {
+  const x1 = cx + r * Math.cos(startAngle);
+  const y1 = cy + r * Math.sin(startAngle);
+  const x2 = cx + r * Math.cos(endAngle);
+  const y2 = cy + r * Math.sin(endAngle);
+  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+  return `M${x1},${y1} A${r},${r} 0 ${largeArc},1 ${x2},${y2}`;
+}
+function radialPositions(cx, cy, innerR, outerR, count, startAngle = -Math.PI / 2) {
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + Math.PI * 2 * i / count;
+    return {
+      x1: cx + innerR * Math.cos(angle),
+      y1: cy + innerR * Math.sin(angle),
+      x2: cx + outerR * Math.cos(angle),
+      y2: cy + outerR * Math.sin(angle),
+      angle
+    };
+  });
+}
+function gridPositions(startX, startY, cols, cellWidth, cellHeight, count) {
+  return Array.from({ length: count }, (_, i) => {
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    return {
+      x: startX + col * cellWidth,
+      y: startY + row * cellHeight,
+      col,
+      row
+    };
+  });
+}
+function curveControlPoint(x1, y1, x2, y2, offset) {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  return {
+    cpx: mx + -dy / len * offset,
+    cpy: my + dx / len * offset
+  };
+}
+var avlSmId = 0;
+var AvlStateMachine = ({
+  states,
+  transitions,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlSmId += 1;
+    const base = `avl-sm-${avlSmId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const r = 150;
+  const stateWidth = 90;
+  const stateHeight = 36;
+  const positions = ringPositions(cx, cy, r, states.length);
+  const stateIndex = new Map(states.map((s, i) => [s.name, i]));
+  const pairCount = /* @__PURE__ */ new Map();
+  const pairSeen = /* @__PURE__ */ new Map();
+  for (const tr of transitions) {
+    const key = [tr.from, tr.to].sort().join("|");
+    pairCount.set(key, (pairCount.get(key) ?? 0) + 1);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-sm-dash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: r + 30, fill: `url(#${ids.grad})` }),
+    transitions.map((tr, i) => {
+      const fromIdx = stateIndex.get(tr.from);
+      const toIdx = stateIndex.get(tr.to);
+      if (fromIdx === void 0 || toIdx === void 0) return null;
+      const fp = positions[fromIdx];
+      const tp = positions[toIdx];
+      const dx = tp.x - fp.x;
+      const dy = tp.y - fp.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const nx = dx / dist;
+      const ny = dy / dist;
+      const pairKey = [tr.from, tr.to].sort().join("|");
+      const totalForPair = pairCount.get(pairKey) ?? 1;
+      const seenIdx = pairSeen.get(pairKey) ?? 0;
+      pairSeen.set(pairKey, seenIdx + 1);
+      const pairOffset = totalForPair > 1 ? (seenIdx - (totalForPair - 1) / 2) * 24 : 0;
+      const x1 = fp.x + nx * (stateWidth / 2 + 4);
+      const y1 = fp.y + ny * (stateHeight / 2 + 4);
+      const x2 = tp.x - nx * (stateWidth / 2 + 8);
+      const y2 = tp.y - ny * (stateHeight / 2 + 8);
+      const t = 0.3;
+      const labelX = x1 * (1 - t) + x2 * t;
+      const labelY = y1 * (1 - t) + y2 * t;
+      const perpX = -ny * (20 + Math.abs(pairOffset));
+      const perpY = nx * (20 + Math.abs(pairOffset));
+      const midToCenter = Math.sqrt((labelX - cx) ** 2 + (labelY - cy) ** 2);
+      const testX = labelX + perpX;
+      const testY = labelY + perpY;
+      const testToCenter = Math.sqrt((testX - cx) ** 2 + (testY - cy) ** 2);
+      const outSign = testToCenter > midToCenter ? 1 : -1;
+      const lx = labelX + perpX * outSign + -ny * pairOffset;
+      const ly = labelY + perpY * outSign + nx * pairOffset;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AvlTransition,
+          {
+            x1: x1 + -ny * pairOffset,
+            y1: y1 + nx * pairOffset,
+            x2: x2 + -ny * pairOffset,
+            y2: y2 + nx * pairOffset,
+            curved: states.length > 2,
+            curveAwayFrom: { x: cx, y: cy },
+            color,
+            opacity: 0.7
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: lx,
+            y: ly,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: 9,
+            fontFamily: "inherit",
+            fontWeight: "bold",
+            opacity: 0.8,
+            children: tr.event
+          }
+        ),
+        tr.guard && /* @__PURE__ */ jsxRuntime.jsxs(
+          "text",
+          {
+            x: lx,
+            y: ly + 12,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: 8,
+            fontFamily: "inherit",
+            opacity: 0.6,
+            children: [
+              "[",
+              tr.guard,
+              "]"
+            ]
+          }
+        ),
+        tr.effects?.map((eff, j) => /* @__PURE__ */ jsxRuntime.jsx(
+          AvlEffect,
+          {
+            x: lx + (j - ((tr.effects?.length ?? 1) - 1) / 2) * 14,
+            y: ly + (tr.guard ? 22 : 12),
+            effectType: eff,
+            size: 5,
+            color,
+            opacity: 0.7
+          },
+          j
+        ))
+      ] }, `tr-${i}`);
+    }),
+    states.map((state, i) => {
+      const pos = positions[i];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AvlState,
+        {
+          x: pos.x - stateWidth / 2,
+          y: pos.y - stateHeight / 2,
+          width: stateWidth,
+          height: stateHeight,
+          name: state.name,
+          isInitial: state.isInitial,
+          isTerminal: state.isTerminal,
+          color
+        },
+        state.name
+      );
+    })
+  ] });
+};
+AvlStateMachine.displayName = "AvlStateMachine";
+var avlOuId = 0;
+var AvlOrbitalUnit = ({
+  entityName,
+  fields = 4,
+  persistence = "persistent",
+  traits,
+  pages,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlOuId += 1;
+    const base = `avl-ou-${avlOuId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const entityR = 24;
+  const orbitalR = 130;
+  const traitBaseRx = 55;
+  const traitBaseRy = 24;
+  const traitRxStep = 20;
+  const traitRyStep = 8;
+  const traitAngleStep = traits.length > 1 ? 120 / (traits.length - 1) : 0;
+  const traitAngleStart = traits.length > 1 ? -60 : 0;
+  const pageAngleStart = -Math.PI / 3;
+  const pageAngleStep = pages.length > 1 ? Math.PI * 0.8 / (pages.length - 1) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: ids.grad, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-ou-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: orbitalR + 20, fill: `url(#${ids.grad})` }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvlOrbital, { cx, cy, r: orbitalR, label: entityName, color }),
+    traits.map((trait, i) => {
+      const rotation = traitAngleStart + i * traitAngleStep;
+      const traitColor = trait.color ?? color;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AvlTrait,
+        {
+          cx,
+          cy,
+          rx: traitBaseRx + i * traitRxStep,
+          ry: traitBaseRy + i * traitRyStep,
+          rotation,
+          label: trait.name,
+          color: traitColor,
+          opacity: 0.7
+        },
+        trait.name
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AvlEntity,
+      {
+        x: cx,
+        y: cy,
+        r: entityR,
+        fieldCount: fields,
+        persistence,
+        color
+      }
+    ),
+    pages.map((page, i) => {
+      const angle = pageAngleStart + i * pageAngleStep;
+      const px = cx + orbitalR * Math.cos(angle);
+      const py = cy + orbitalR * Math.sin(angle);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AvlPage,
+        {
+          x: px,
+          y: py,
+          size: 10,
+          label: page.name,
+          color
+        },
+        page.name
+      );
+    })
+  ] });
+};
+AvlOrbitalUnit.displayName = "AvlOrbitalUnit";
+var avlCcId = 0;
+var AvlClosedCircuit = ({
+  states,
+  transitions,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlCcId += 1;
+    const base = `avl-cc-${avlCcId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad`, arrow: `${base}-arrow` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const r = 120;
+  const stateW = 80;
+  const stateH = 32;
+  const positions = ringPositions(cx, cy, r, states.length);
+  const stateIndex = new Map(states.map((s, i) => [s.name, i]));
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      )
+    ] }),
+    animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-cc-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: r + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.06 }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 50, fill: "none", stroke: color, strokeWidth: 0.5, opacity: 0.08 }),
+    transitions.map((tr, i) => {
+      const fromIdx = stateIndex.get(tr.from);
+      const toIdx = stateIndex.get(tr.to);
+      if (fromIdx === void 0 || toIdx === void 0) return null;
+      const fp = positions[fromIdx];
+      const tp = positions[toIdx];
+      const dx = tp.x - fp.x;
+      const dy = tp.y - fp.y;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+      const nx = dx / dist;
+      const ny = dy / dist;
+      const x1 = fp.x + nx * (stateW / 2 + 4);
+      const y1 = fp.y + ny * (stateH / 2 + 4);
+      const x2 = tp.x - nx * (stateW / 2 + 8);
+      const y2 = tp.y - ny * (stateH / 2 + 8);
+      const mx = (x1 + x2) / 2;
+      const my = (y1 + y2) / 2;
+      const curvature = dist * 0.25;
+      let perpX = -ny;
+      let perpY = nx;
+      const testX = mx + perpX * curvature;
+      const testY = my + perpY * curvature;
+      const distTest = Math.sqrt((testX - cx) ** 2 + (testY - cy) ** 2);
+      const distMid = Math.sqrt((mx - cx) ** 2 + (my - cy) ** 2);
+      if (distTest < distMid) {
+        perpX = -perpX;
+        perpY = -perpY;
+      }
+      const cpx = mx + perpX * curvature;
+      const cpy = my + perpY * curvature;
+      const d = `M${x1},${y1} Q${cpx},${cpy} ${x2},${y2}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: `url(#${ids.grad})`,
+            strokeWidth: 1.5,
+            strokeDasharray: animated ? "8 6" : void 0,
+            markerEnd: `url(#${ids.arrow})`,
+            style: animated ? { animation: "avl-cc-flow 1.5s linear infinite" } : void 0
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsxRuntime.jsx(
+          AvlEvent,
+          {
+            x: cpx,
+            y: cpy - 14,
+            size: 8,
+            label: tr.event,
+            color,
+            opacity: 0.8
+          }
+        ),
+        tr.guard && /* @__PURE__ */ jsxRuntime.jsx(
+          AvlGuard,
+          {
+            x: mx,
+            y: my - 8,
+            size: 10,
+            label: tr.guard,
+            color,
+            opacity: 0.6
+          }
+        ),
+        tr.effects?.map((eff, j) => /* @__PURE__ */ jsxRuntime.jsx(
+          AvlEffect,
+          {
+            x: mx + (j - ((tr.effects?.length ?? 1) - 1) / 2) * 14,
+            y: my + 14,
+            effectType: eff,
+            size: 5,
+            color,
+            opacity: 0.7
+          },
+          j
+        ))
+      ] }, `cc-tr-${i}`);
+    }),
+    states.map((state, i) => {
+      const pos = positions[i];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AvlState,
+        {
+          x: pos.x - stateW / 2,
+          y: pos.y - stateH / 2,
+          width: stateW,
+          height: stateH,
+          name: state.name,
+          color
+        },
+        state.name
+      );
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx, cy, r: 3, fill: color, opacity: 0.4 })
+  ] });
+};
+AvlClosedCircuit.displayName = "AvlClosedCircuit";
+var avlElId = 0;
+var AvlEmitListen = ({
+  emitter,
+  listener,
+  eventName,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlElId += 1;
+    const base = `avl-el-${avlElId}`;
+    return { arrow: `${base}-arrow`, grad: `${base}-grad` };
+  }, []);
+  const leftCx = 180;
+  const rightCx = 420;
+  const cy = 200;
+  const orbR = 80;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-el-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvlOrbital, { cx: leftCx, cy, r: orbR, label: emitter.name, color }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvlEntity, { x: leftCx, y: cy, r: 18, fieldCount: emitter.fields ?? 3, color }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvlOrbital, { cx: rightCx, cy, r: orbR, label: listener.name, color }),
+    /* @__PURE__ */ jsxRuntime.jsx(AvlEntity, { x: rightCx, y: cy, r: 18, fieldCount: listener.fields ?? 3, color }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: `M${leftCx + orbR + 4},${cy} L${rightCx - orbR - 8},${cy}`,
+        fill: "none",
+        stroke: `url(#${ids.grad})`,
+        strokeWidth: 2,
+        strokeDasharray: "6 4",
+        markerEnd: `url(#${ids.arrow})`,
+        style: animated ? { animation: "avl-el-dash 1s linear infinite" } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AvlEffect,
+      {
+        x: leftCx + orbR + 20,
+        y: cy - 20,
+        effectType: "emit",
+        size: 6,
+        color,
+        opacity: 0.8
+      }
+    ),
+    eventName && /* @__PURE__ */ jsxRuntime.jsxs(
+      "text",
+      {
+        x: 300,
+        y: cy - 18,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        opacity: 0.8,
+        children: [
+          "~",
+          eventName
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: 300,
+        y: cy + 18,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 12,
+        fontFamily: "inherit",
+        opacity: 0.3,
+        letterSpacing: 4,
+        children: "~ ~ ~"
+      }
+    )
+  ] });
+};
+AvlEmitListen.displayName = "AvlEmitListen";
+var AvlSlotMap = ({
+  slots,
+  pageWidth = 360,
+  pageHeight = 280,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ox = (600 - pageWidth) / 2;
+  const oy = (400 - pageHeight) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    animated && /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+          @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
+        ` }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: pageHeight,
+        rx: 4,
+        ry: 4,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: 24,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        opacity: 0.1
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: ox + pageWidth / 2,
+        y: oy + 16,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: "Page Layout"
+      }
+    ),
+    slots.map((slot) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          x: ox + slot.x,
+          y: oy + 24 + slot.y,
+          width: slot.width,
+          height: slot.height,
+          rx: 3,
+          ry: 3,
+          fill: color,
+          opacity: 0.08,
+          stroke: color,
+          strokeWidth: 1,
+          strokeDasharray: "4 2",
+          style: animated ? { animation: "avl-slot-pulse 2s ease-in-out infinite" } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: ox + slot.x + slot.width / 2,
+          y: oy + 24 + slot.y + slot.height / 2,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          fill: color,
+          fontSize: 9,
+          fontFamily: "inherit",
+          opacity: 0.6,
+          children: slot.name
+        }
+      )
+    ] }, slot.name))
+  ] });
+};
+AvlSlotMap.displayName = "AvlSlotMap";
+var avlEtId = 0;
+function layoutTree(node, x, y, hSpacing, vSpacing) {
+  const children = node.children ?? [];
+  if (children.length === 0) {
+    return { label: node.label, type: node.type, x, y, children: [] };
+  }
+  const totalWidth = (children.length - 1) * hSpacing;
+  const startX = x - totalWidth / 2;
+  const layoutChildren = children.map(
+    (child, i) => layoutTree(child, startX + i * hSpacing, y + vSpacing, hSpacing * 0.65, vSpacing)
+  );
+  return { label: node.label, type: node.type, x, y, children: layoutChildren };
+}
+function nodeColor(type, baseColor) {
+  switch (type) {
+    case "operator":
+      return baseColor;
+    case "literal":
+      return baseColor;
+    case "binding":
+      return baseColor;
+  }
+}
+function renderNode(node, color, glowId) {
+  const labelLen = node.label.length;
+  const baseR = node.type === "operator" ? 20 : 16;
+  const r = Math.max(baseR, labelLen * 3.5 + 6);
+  const nc = nodeColor(node.type, color);
+  return /* @__PURE__ */ jsxRuntime.jsxs(React6__default.default.Fragment, { children: [
+    node.children.map((child, i) => {
+      const childR = Math.max(
+        child.type === "operator" ? 20 : 16,
+        child.label.length * 3.5 + 6
+      );
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: node.x,
+          y1: node.y + (node.type === "operator" ? r * 0.7 : r),
+          x2: child.x,
+          y2: child.y - (child.type === "operator" ? childR * 0.7 : childR),
+          stroke: color,
+          strokeWidth: 1,
+          opacity: 0.3
+        },
+        `line-${i}`
+      );
+    }),
+    node.type === "operator" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "rect",
+      {
+        x: node.x - r,
+        y: node.y - r * 0.6,
+        width: r * 2,
+        height: r * 1.2,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        fillOpacity: 0.15,
+        stroke: nc,
+        strokeWidth: 1.5
+      }
+    ) : node.type === "binding" ? /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1.5, strokeDasharray: "3 2" }) : /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: node.x, cy: node.y, r, fill: "none", stroke: nc, strokeWidth: 1, opacity: 0.5 }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: node.x,
+        y: node.y + 1,
+        textAnchor: "middle",
+        dominantBaseline: "central",
+        fill: nc,
+        fontSize: node.type === "operator" ? 11 : 10,
+        fontFamily: "inherit",
+        fontWeight: node.type === "operator" ? "bold" : "normal",
+        children: node.type === "binding" ? `@${node.label}` : node.label
+      }
+    ),
+    node.children.map((child) => renderNode(child, color))
+  ] }, `${node.label}-${node.x}-${node.y}`);
+}
+var AvlExprTree = ({
+  expression,
+  className,
+  color = "var(--color-primary)"
+}) => {
+  const ids = React6__default.default.useMemo(() => {
+    avlEtId += 1;
+    return { glow: `avl-et-${avlEtId}-glow` };
+  }, []);
+  const layout = layoutTree(expression, 300, 70, 150, 85);
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }) }),
+    renderNode(layout, color, ids.glow)
+  ] });
+};
+AvlExprTree.displayName = "AvlExprTree";
+
+exports.AVL_FIELD_TYPE_SHAPES = AVL_FIELD_TYPE_SHAPES;
+exports.AVL_OPERATOR_COLORS = AVL_OPERATOR_COLORS;
+exports.AvlApplication = AvlApplication;
+exports.AvlBinding = AvlBinding;
+exports.AvlBindingRef = AvlBindingRef;
+exports.AvlClosedCircuit = AvlClosedCircuit;
+exports.AvlEffect = AvlEffect;
+exports.AvlEmitListen = AvlEmitListen;
+exports.AvlEntity = AvlEntity;
+exports.AvlEvent = AvlEvent;
+exports.AvlExprTree = AvlExprTree;
+exports.AvlField = AvlField;
+exports.AvlFieldType = AvlFieldType;
+exports.AvlGuard = AvlGuard;
+exports.AvlLiteral = AvlLiteral;
+exports.AvlOperator = AvlOperator;
+exports.AvlOrbital = AvlOrbital;
+exports.AvlOrbitalUnit = AvlOrbitalUnit;
+exports.AvlPage = AvlPage;
+exports.AvlPersistence = AvlPersistence;
+exports.AvlSExpr = AvlSExpr;
+exports.AvlSlotMap = AvlSlotMap;
+exports.AvlState = AvlState;
+exports.AvlStateMachine = AvlStateMachine;
+exports.AvlTrait = AvlTrait;
+exports.AvlTransition = AvlTransition;
+exports.arcPath = arcPath;
+exports.curveControlPoint = curveControlPoint;
+exports.gridPositions = gridPositions;
+exports.radialPositions = radialPositions;
+exports.ringPositions = ringPositions;