@almadar/ui 2.20.0 → 2.20.6

package/dist/avl/index.js

@@ -1,5 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React6, { createContext, useCallback, useContext, useState, useMemo, useEffect, useReducer, useRef } from 'react';
+import React8, { createContext, useCallback, useContext, useState, useMemo, useEffect, useReducer, useRef } from 'react';
+import '@react-three/drei';
+import '@react-three/fiber';
+import 'three';
 import ELK from 'elkjs/lib/elk.bundled.js';
 
 // components/atoms/avl/types.ts
@@ -374,7 +377,7 @@ var AvlTransition = ({
   opacity = 1,
   className
 }) => {
-  const ids = React6.useMemo(() => {
+  const ids = React8.useMemo(() => {
     avlTransitionId += 1;
     return { arrow: `avl-tr-${avlTransitionId}-arrow` };
   }, []);
@@ -1048,1024 +1051,183 @@ var AvlBindingRef = ({
 };
 AvlBindingRef.displayName = "AvlBindingRef";
 
-// components/molecules/avl/avl-layout.ts
-function ringPositions(cx, cy, r2, count, startAngle = -Math.PI / 2) {
-  if (count === 0) return [];
-  if (count === 1) {
-    return [{ x: cx, y: cy, angle: 0 }];
+// node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// node_modules/.pnpm/tailwind-merge@2.6.1/node_modules/tailwind-merge/dist/bundle-mjs.mjs
+var CLASS_PART_SEPARATOR = "-";
+var createClassGroupUtils = (config) => {
+  const classMap = createClassMap(config);
+  const {
+    conflictingClassGroups,
+    conflictingClassGroupModifiers
+  } = config;
+  const getClassGroupId = (className) => {
+    const classParts = className.split(CLASS_PART_SEPARATOR);
+    if (classParts[0] === "" && classParts.length !== 1) {
+      classParts.shift();
+    }
+    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
+    const conflicts = conflictingClassGroups[classGroupId] || [];
+    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
+      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
+    }
+    return conflicts;
+  };
+  return {
+    getClassGroupId,
+    getConflictingClassGroupIds
+  };
+};
+var getGroupRecursive = (classParts, classPartObject) => {
+  if (classParts.length === 0) {
+    return classPartObject.classGroupId;
   }
-  if (count === 2) {
-    return [
-      { x: cx - r2 * 0.7, y: cy, angle: Math.PI },
-      { x: cx + r2 * 0.7, y: cy, angle: 0 }
-    ];
+  const currentClassPart = classParts[0];
+  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
+  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
+  if (classGroupFromNextClassPart) {
+    return classGroupFromNextClassPart;
   }
-  return Array.from({ length: count }, (_, i) => {
-    const angle = startAngle + Math.PI * 2 * i / count;
-    return {
-      x: cx + r2 * Math.cos(angle),
-      y: cy + r2 * Math.sin(angle),
-      angle
-    };
+  if (classPartObject.validators.length === 0) {
+    return void 0;
+  }
+  const classRest = classParts.join(CLASS_PART_SEPARATOR);
+  return classPartObject.validators.find(({
+    validator
+  }) => validator(classRest))?.classGroupId;
+};
+var arbitraryPropertyRegex = /^\[(.+)\]$/;
+var getGroupIdForArbitraryProperty = (className) => {
+  if (arbitraryPropertyRegex.test(className)) {
+    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
+    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
+    if (property) {
+      return "arbitrary.." + property;
+    }
+  }
+};
+var createClassMap = (config) => {
+  const {
+    theme,
+    prefix
+  } = config;
+  const classMap = {
+    nextPart: /* @__PURE__ */ new Map(),
+    validators: []
+  };
+  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
+  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
+    processClassesRecursively(classGroup, classMap, classGroupId, theme);
   });
-}
-function arcPath(cx, cy, r2, startAngle, endAngle) {
-  const x1 = cx + r2 * Math.cos(startAngle);
-  const y1 = cy + r2 * Math.sin(startAngle);
-  const x2 = cx + r2 * Math.cos(endAngle);
-  const y2 = cy + r2 * Math.sin(endAngle);
-  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
-  return `M${x1},${y1} A${r2},${r2} 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
-    };
+  return classMap;
+};
+var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
+  classGroup.forEach((classDefinition) => {
+    if (typeof classDefinition === "string") {
+      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
+      classPartObjectToEdit.classGroupId = classGroupId;
+      return;
+    }
+    if (typeof classDefinition === "function") {
+      if (isThemeGetter(classDefinition)) {
+        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
+        return;
+      }
+      classPartObject.validators.push({
+        validator: classDefinition,
+        classGroupId
+      });
+      return;
+    }
+    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
+      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
+    });
   });
-}
-function gridPositions(startX, startY, cols, cellWidth, cellHeight, count) {
-  return Array.from({ length: count }, (_, i) => {
-    const col = i % cols;
-    const row = Math.floor(i / cols);
+};
+var getPart = (classPartObject, path) => {
+  let currentClassPartObject = classPartObject;
+  path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
+    if (!currentClassPartObject.nextPart.has(pathPart)) {
+      currentClassPartObject.nextPart.set(pathPart, {
+        nextPart: /* @__PURE__ */ new Map(),
+        validators: []
+      });
+    }
+    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
+  });
+  return currentClassPartObject;
+};
+var isThemeGetter = (func) => func.isThemeGetter;
+var getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
+  if (!prefix) {
+    return classGroupEntries;
+  }
+  return classGroupEntries.map(([classGroupId, classGroup]) => {
+    const prefixedClassGroup = classGroup.map((classDefinition) => {
+      if (typeof classDefinition === "string") {
+        return prefix + classDefinition;
+      }
+      if (typeof classDefinition === "object") {
+        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
+      }
+      return classDefinition;
+    });
+    return [classGroupId, prefixedClassGroup];
+  });
+};
+var createLruCache = (maxCacheSize) => {
+  if (maxCacheSize < 1) {
     return {
-      x: startX + col * cellWidth,
-      y: startY + row * cellHeight,
-      col,
-      row
+      get: () => void 0,
+      set: () => {
+      }
     };
-  });
-}
-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;
+  }
+  let cacheSize = 0;
+  let cache = /* @__PURE__ */ new Map();
+  let previousCache = /* @__PURE__ */ new Map();
+  const update = (key, value) => {
+    cache.set(key, value);
+    cacheSize++;
+    if (cacheSize > maxCacheSize) {
+      cacheSize = 0;
+      previousCache = cache;
+      cache = /* @__PURE__ */ new Map();
+    }
+  };
   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.useMemo(() => {
-    avlSmId += 1;
-    const base = `avl-sm-${avlSmId}`;
-    return { glow: `${base}-glow`, grad: `${base}-grad` };
-  }, []);
-  const cx = 300;
-  const cy = 200;
-  const r2 = 150;
-  const stateWidth = 90;
-  const stateHeight = 36;
-  const positions = ringPositions(cx, cy, r2, 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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
-        /* @__PURE__ */ jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
-      ] })
-    ] }),
-    animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes avl-sm-dash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
-        ` }),
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 + 30, fill: `url(#${ids.grad})` }),
-    transitions.map((tr, i) => {
-      if (tr.from !== tr.to) return null;
-      const idx = stateIndex.get(tr.from);
-      if (idx === void 0) return null;
-      const pos = positions[idx];
-      const loopR = 20;
-      const loopY = pos.y - stateHeight / 2 - 4;
-      const d = `M${pos.x - 14},${loopY} C${pos.x - 14},${loopY - loopR * 2} ${pos.x + 14},${loopY - loopR * 2} ${pos.x + 14},${loopY}`;
-      return /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d,
-            fill: "none",
-            stroke: color,
-            strokeWidth: 1.5,
-            opacity: 0.7,
-            markerEnd: `url(#${ids.grad})`
-          }
-        ),
-        tr.event && /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: pos.x,
-            y: loopY - loopR * 2 + 4,
-            textAnchor: "middle",
-            fill: color,
-            fontSize: 9,
-            fontFamily: "inherit",
-            fontWeight: "bold",
-            opacity: 0.8,
-            children: tr.event
-          }
-        )
-      ] }, `self-${i}`);
-    }),
-    transitions.map((tr, i) => {
-      if (tr.from === tr.to) return null;
-      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__ */ jsxs("g", { children: [
-        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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.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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
-        /* @__PURE__ */ jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("radialGradient", { id: ids.grad, cx: "50%", cy: "50%", r: "50%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
-      ] })
-    ] }),
-    animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes avl-ou-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        ` }),
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitalR + 20, fill: `url(#${ids.grad})` }),
-    /* @__PURE__ */ 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__ */ jsx(
-        AvlTrait,
-        {
-          cx,
-          cy,
-          rx: traitBaseRx + i * traitRxStep,
-          ry: traitBaseRy + i * traitRyStep,
-          rotation,
-          label: trait.name,
-          color: traitColor,
-          opacity: 0.7
-        },
-        trait.name
-      );
-    }),
-    /* @__PURE__ */ 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__ */ 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.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 r2 = 120;
-  const stateW = 80;
-  const stateH = 32;
-  const positions = ringPositions(cx, cy, r2, states.length);
-  const stateIndex = new Map(states.map((s, i) => [s.name, i]));
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
-        /* @__PURE__ */ jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
-        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
-      ] }),
-      /* @__PURE__ */ jsx(
-        "marker",
-        {
-          id: ids.arrow,
-          markerWidth: "8",
-          markerHeight: "6",
-          refX: "7",
-          refY: "3",
-          orient: "auto",
-          markerUnits: "strokeWidth",
-          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
-        }
-      )
-    ] }),
-    animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes avl-cc-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
-        ` }),
-    /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.06 }),
-    /* @__PURE__ */ 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__ */ jsxs("g", { children: [
-        /* @__PURE__ */ 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__ */ jsx(
-          AvlEvent,
-          {
-            x: cpx,
-            y: cpy - 14,
-            size: 8,
-            label: tr.event,
-            color,
-            opacity: 0.8
-          }
-        ),
-        tr.guard && /* @__PURE__ */ jsx(
-          AvlGuard,
-          {
-            x: mx,
-            y: my - 8,
-            size: 10,
-            label: tr.guard,
-            color,
-            opacity: 0.6
-          }
-        ),
-        tr.effects?.map((eff, j) => /* @__PURE__ */ 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__ */ jsx(
-        AvlState,
-        {
-          x: pos.x - stateW / 2,
-          y: pos.y - stateH / 2,
-          width: stateW,
-          height: stateH,
-          name: state.name,
-          color
-        },
-        state.name
-      );
-    }),
-    /* @__PURE__ */ 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.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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsx(
-        "marker",
-        {
-          id: ids.arrow,
-          markerWidth: "8",
-          markerHeight: "6",
-          refX: "7",
-          refY: "3",
-          orient: "auto",
-          markerUnits: "strokeWidth",
-          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
-        }
-      ),
-      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
-      ] })
-    ] }),
-    animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes avl-el-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
-        ` }),
-    /* @__PURE__ */ jsx(AvlOrbital, { cx: leftCx, cy, r: orbR, label: emitter.name, color }),
-    /* @__PURE__ */ jsx(AvlEntity, { x: leftCx, y: cy, r: 18, fieldCount: emitter.fields ?? 3, color }),
-    /* @__PURE__ */ jsx(AvlOrbital, { cx: rightCx, cy, r: orbR, label: listener.name, color }),
-    /* @__PURE__ */ jsx(AvlEntity, { x: rightCx, y: cy, r: 18, fieldCount: listener.fields ?? 3, color }),
-    /* @__PURE__ */ 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__ */ jsx(
-      AvlEffect,
-      {
-        x: leftCx + orbR + 20,
-        y: cy - 20,
-        effectType: "emit",
-        size: 6,
-        color,
-        opacity: 0.8
-      }
-    ),
-    eventName && /* @__PURE__ */ jsxs(
-      "text",
-      {
-        x: 300,
-        y: cy - 18,
-        textAnchor: "middle",
-        fill: color,
-        fontSize: 11,
-        fontFamily: "inherit",
-        fontWeight: "bold",
-        opacity: 0.8,
-        children: [
-          "~",
-          eventName
-        ]
-      }
-    ),
-    /* @__PURE__ */ 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 SLOT_PRESETS = {
-  header: { x: 10, y: 5, width: 340, height: 35 },
-  main: { x: 120, y: 50, width: 230, height: 195 },
-  sidebar: { x: 10, y: 50, width: 100, height: 195 },
-  modal: { x: 80, y: 60, width: 200, height: 140 },
-  drawer: { x: 220, y: 50, width: 130, height: 195 },
-  toast: { x: 220, y: 210, width: 130, height: 35 },
-  footer: { x: 10, y: 220, width: 340, height: 30 },
-  center: { x: 60, y: 50, width: 240, height: 195 },
-  "hud-top": { x: 10, y: 5, width: 340, height: 30 },
-  "hud-bottom": { x: 10, y: 220, width: 340, height: 30 }
-};
-function resolveSlot(slot, fallbackIdx) {
-  if (slot.x !== void 0 && slot.y !== void 0 && slot.width !== void 0 && slot.height !== void 0) {
-    return slot;
-  }
-  const preset = SLOT_PRESETS[slot.name];
-  if (preset) {
-    return {
-      name: slot.name,
-      x: slot.x ?? preset.x,
-      y: slot.y ?? preset.y,
-      width: slot.width ?? preset.width,
-      height: slot.height ?? preset.height
-    };
-  }
-  const col = fallbackIdx % 2;
-  const row = Math.floor(fallbackIdx / 2);
-  return {
-    name: slot.name,
-    x: 10 + col * 175,
-    y: 50 + row * 100,
-    width: 165,
-    height: 90
-  };
-}
-var AvlSlotMap = ({
-  slots,
-  pageWidth = 360,
-  pageHeight = 280,
-  className,
-  color = "var(--color-primary)",
-  animated = false
-}) => {
-  const ox = (600 - pageWidth) / 2;
-  const oy = (400 - pageHeight) / 2;
-  let unknownIdx = 0;
-  const resolvedSlots = slots.map((slot) => {
-    const isUnknown = !SLOT_PRESETS[slot.name] && (slot.x === void 0 || slot.y === void 0);
-    const resolved = resolveSlot(slot, isUnknown ? unknownIdx : 0);
-    if (isUnknown) unknownIdx++;
-    return resolved;
-  });
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    animated && /* @__PURE__ */ jsx("style", { children: `
-          @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
-        ` }),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: ox,
-        y: oy,
-        width: pageWidth,
-        height: pageHeight,
-        rx: 4,
-        ry: 4,
-        fill: "none",
-        stroke: color,
-        strokeWidth: 2
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: ox,
-        y: oy,
-        width: pageWidth,
-        height: 24,
-        rx: 4,
-        ry: 4,
-        fill: color,
-        opacity: 0.1
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: ox + pageWidth / 2,
-        y: oy + 16,
-        textAnchor: "middle",
-        fill: color,
-        fontSize: 10,
-        fontFamily: "inherit",
-        fontWeight: "bold",
-        children: "Page Layout"
-      }
-    ),
-    resolvedSlots.map((slot) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ 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__ */ 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 r2 = Math.max(baseR, labelLen * 3.5 + 6);
-  const nc = nodeColor(node.type, color);
-  return /* @__PURE__ */ jsxs(React6.Fragment, { children: [
-    node.children.map((child, i) => {
-      const childR = Math.max(
-        child.type === "operator" ? 20 : 16,
-        child.label.length * 3.5 + 6
-      );
-      return /* @__PURE__ */ jsx(
-        "line",
-        {
-          x1: node.x,
-          y1: node.y + (node.type === "operator" ? r2 * 0.7 : r2),
-          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__ */ jsx(
-      "rect",
-      {
-        x: node.x - r2,
-        y: node.y - r2 * 0.6,
-        width: r2 * 2,
-        height: r2 * 1.2,
-        rx: 4,
-        ry: 4,
-        fill: color,
-        fillOpacity: 0.15,
-        stroke: nc,
-        strokeWidth: 1.5
-      }
-    ) : node.type === "binding" ? /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r: r2, fill: "none", stroke: nc, strokeWidth: 1.5, strokeDasharray: "3 2" }) : /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r: r2, fill: "none", stroke: nc, strokeWidth: 1, opacity: 0.5 }),
-    /* @__PURE__ */ 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.useMemo(() => {
-    avlEtId += 1;
-    return { glow: `avl-et-${avlEtId}-glow` };
-  }, []);
-  const layout = layoutTree(expression, 300, 70, 150, 85);
-  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
-      /* @__PURE__ */ jsxs("feMerge", { children: [
-        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
-        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-      ] })
-    ] }) }),
-    renderNode(layout, color, ids.glow)
-  ] });
-};
-AvlExprTree.displayName = "AvlExprTree";
-
-// node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-
-// node_modules/.pnpm/tailwind-merge@2.6.1/node_modules/tailwind-merge/dist/bundle-mjs.mjs
-var CLASS_PART_SEPARATOR = "-";
-var createClassGroupUtils = (config) => {
-  const classMap = createClassMap(config);
-  const {
-    conflictingClassGroups,
-    conflictingClassGroupModifiers
-  } = config;
-  const getClassGroupId = (className) => {
-    const classParts = className.split(CLASS_PART_SEPARATOR);
-    if (classParts[0] === "" && classParts.length !== 1) {
-      classParts.shift();
-    }
-    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
-  };
-  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
-    const conflicts = conflictingClassGroups[classGroupId] || [];
-    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
-      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
-    }
-    return conflicts;
-  };
-  return {
-    getClassGroupId,
-    getConflictingClassGroupIds
-  };
-};
-var getGroupRecursive = (classParts, classPartObject) => {
-  if (classParts.length === 0) {
-    return classPartObject.classGroupId;
-  }
-  const currentClassPart = classParts[0];
-  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
-  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
-  if (classGroupFromNextClassPart) {
-    return classGroupFromNextClassPart;
-  }
-  if (classPartObject.validators.length === 0) {
-    return void 0;
-  }
-  const classRest = classParts.join(CLASS_PART_SEPARATOR);
-  return classPartObject.validators.find(({
-    validator
-  }) => validator(classRest))?.classGroupId;
-};
-var arbitraryPropertyRegex = /^\[(.+)\]$/;
-var getGroupIdForArbitraryProperty = (className) => {
-  if (arbitraryPropertyRegex.test(className)) {
-    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
-    const property = arbitraryPropertyClassName?.substring(0, arbitraryPropertyClassName.indexOf(":"));
-    if (property) {
-      return "arbitrary.." + property;
-    }
-  }
-};
-var createClassMap = (config) => {
-  const {
-    theme,
-    prefix
-  } = config;
-  const classMap = {
-    nextPart: /* @__PURE__ */ new Map(),
-    validators: []
-  };
-  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
-  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
-    processClassesRecursively(classGroup, classMap, classGroupId, theme);
-  });
-  return classMap;
-};
-var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
-  classGroup.forEach((classDefinition) => {
-    if (typeof classDefinition === "string") {
-      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
-      classPartObjectToEdit.classGroupId = classGroupId;
-      return;
-    }
-    if (typeof classDefinition === "function") {
-      if (isThemeGetter(classDefinition)) {
-        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
-        return;
-      }
-      classPartObject.validators.push({
-        validator: classDefinition,
-        classGroupId
-      });
-      return;
-    }
-    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
-      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
-    });
-  });
-};
-var getPart = (classPartObject, path) => {
-  let currentClassPartObject = classPartObject;
-  path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
-    if (!currentClassPartObject.nextPart.has(pathPart)) {
-      currentClassPartObject.nextPart.set(pathPart, {
-        nextPart: /* @__PURE__ */ new Map(),
-        validators: []
-      });
-    }
-    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
-  });
-  return currentClassPartObject;
-};
-var isThemeGetter = (func) => func.isThemeGetter;
-var getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
-  if (!prefix) {
-    return classGroupEntries;
-  }
-  return classGroupEntries.map(([classGroupId, classGroup]) => {
-    const prefixedClassGroup = classGroup.map((classDefinition) => {
-      if (typeof classDefinition === "string") {
-        return prefix + classDefinition;
-      }
-      if (typeof classDefinition === "object") {
-        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
-      }
-      return classDefinition;
-    });
-    return [classGroupId, prefixedClassGroup];
-  });
-};
-var createLruCache = (maxCacheSize) => {
-  if (maxCacheSize < 1) {
-    return {
-      get: () => void 0,
-      set: () => {
-      }
-    };
-  }
-  let cacheSize = 0;
-  let cache = /* @__PURE__ */ new Map();
-  let previousCache = /* @__PURE__ */ new Map();
-  const update = (key, value) => {
-    cache.set(key, value);
-    cacheSize++;
-    if (cacheSize > maxCacheSize) {
-      cacheSize = 0;
-      previousCache = cache;
-      cache = /* @__PURE__ */ new Map();
-    }
-  };
-  return {
-    get(key) {
-      let value = cache.get(key);
-      if (value !== void 0) {
-        return value;
-      }
-      if ((value = previousCache.get(key)) !== void 0) {
-        update(key, value);
-        return value;
-      }
-    },
-    set(key, value) {
-      if (cache.has(key)) {
-        cache.set(key, value);
-      } else {
-        update(key, value);
-      }
-    }
+    get(key) {
+      let value = cache.get(key);
+      if (value !== void 0) {
+        return value;
+      }
+      if ((value = previousCache.get(key)) !== void 0) {
+        update(key, value);
+        return value;
+      }
+    },
+    set(key, value) {
+      if (cache.has(key)) {
+        cache.set(key, value);
+      } else {
+        update(key, value);
+      }
+    }
   };
 };
 var IMPORTANT_MODIFIER = "!";
@@ -4368,6 +3530,113 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var variantStyles = {
+  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h3: "text-2xl font-bold text-[var(--color-foreground)]",
+  h4: "text-xl font-bold text-[var(--color-foreground)]",
+  h5: "text-lg font-bold text-[var(--color-foreground)]",
+  h6: "text-base font-bold text-[var(--color-foreground)]",
+  heading: "text-2xl font-bold text-[var(--color-foreground)]",
+  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
+  body1: "text-base font-normal text-[var(--color-foreground)]",
+  body2: "text-sm font-normal text-[var(--color-foreground)]",
+  body: "text-base font-normal text-[var(--color-foreground)]",
+  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
+  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
+  small: "text-sm font-normal text-[var(--color-foreground)]",
+  large: "text-lg font-medium text-[var(--color-foreground)]",
+  label: "text-sm font-medium text-[var(--color-foreground)]"
+};
+var colorStyles = {
+  primary: "text-[var(--color-foreground)]",
+  secondary: "text-[var(--color-muted-foreground)]",
+  muted: "text-[var(--color-muted-foreground)]",
+  error: "text-[var(--color-error)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  inherit: "text-inherit"
+};
+var weightStyles = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var defaultElements = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  heading: "h2",
+  subheading: "h3",
+  body1: "p",
+  body2: "p",
+  body: "p",
+  caption: "span",
+  overline: "span",
+  small: "span",
+  large: "p",
+  label: "span"
+};
+var typographySizeStyles = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+var overflowStyles = {
+  visible: "overflow-visible",
+  hidden: "overflow-hidden",
+  wrap: "break-words overflow-hidden",
+  "clamp-2": "overflow-hidden line-clamp-2",
+  "clamp-3": "overflow-hidden line-clamp-3"
+};
+var Typography = ({
+  variant: variantProp,
+  level,
+  color = "primary",
+  align,
+  weight,
+  size,
+  truncate = false,
+  overflow,
+  as,
+  id,
+  className,
+  style,
+  content,
+  children
+}) => {
+  const variant = variantProp ?? (level ? `h${level}` : "body1");
+  const Component = as || defaultElements[variant];
+  const Comp = Component;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      id,
+      className: cn(
+        variantStyles[variant],
+        colorStyles[color],
+        weight && weightStyles[weight],
+        size && typographySizeStyles[size],
+        align && `text-${align}`,
+        truncate && "truncate overflow-hidden text-ellipsis",
+        overflow && overflowStyles[overflow],
+        className
+      ),
+      style,
+      children: children ?? content
+    }
+  );
+};
+Typography.displayName = "Typography";
 var EventBusContext = createContext(null);
 
 // hooks/useEventBus.ts
@@ -4531,296 +3800,1049 @@ var displayStyles = {
   "inline-flex": "inline-flex",
   grid: "grid"
 };
-var overflowStyles = {
-  auto: "overflow-auto",
-  hidden: "overflow-hidden",
-  visible: "overflow-visible",
-  scroll: "overflow-scroll"
+var overflowStyles2 = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React8.forwardRef(
+  ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
+    className,
+    children,
+    as: Component = "div",
+    action,
+    actionPayload,
+    hoverEvent,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = useCallback((e) => {
+      if (action) {
+        e.stopPropagation();
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const isClickable = action || onClick;
+    const Comp = Component;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          // Padding
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          // Margin
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          // Background
+          bgStyles[bg],
+          // Border - uses theme variables
+          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          // Rounded
+          roundedStyles[rounded],
+          // Shadow
+          shadowStyles[shadow],
+          // Display
+          display && displayStyles[display],
+          // Dimensions
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          // Overflow
+          overflow && overflowStyles2[overflow],
+          // Position
+          position && positionStyles[position],
+          // Cursor for clickable
+          isClickable && "cursor-pointer",
+          className
+        ),
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var gapStyles = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
+};
+var alignStyles = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyStyles = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = ({
+  direction = "vertical",
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  reverse = false,
+  flex = false,
+  className,
+  style,
+  children,
+  as: Component = "div",
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  action,
+  actionPayload,
+  responsive = false
+}) => {
+  const eventBus = useEventBus();
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.(e);
+  };
+  const isHorizontal = direction === "horizontal";
+  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  const Comp = Component;
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      className: cn(
+        "flex",
+        directionClass,
+        gapStyles[gap],
+        alignStyles[align],
+        justifyStyles[justify],
+        wrap && "flex-wrap",
+        flex && "flex-1",
+        className
+      ),
+      style,
+      onClick: action || onClick ? handleClick : void 0,
+      onKeyDown,
+      role,
+      tabIndex,
+      children
+    }
+  );
+};
+var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
+
+// components/molecules/avl/avl-layout.ts
+function ringPositions(cx, cy, r2, count, startAngle = -Math.PI / 2) {
+  if (count === 0) return [];
+  if (count === 1) {
+    return [{ x: cx, y: cy, angle: 0 }];
+  }
+  if (count === 2) {
+    return [
+      { x: cx - r2 * 0.7, y: cy, angle: Math.PI },
+      { x: cx + r2 * 0.7, y: cy, angle: 0 }
+    ];
+  }
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + Math.PI * 2 * i / count;
+    return {
+      x: cx + r2 * Math.cos(angle),
+      y: cy + r2 * Math.sin(angle),
+      angle
+    };
+  });
+}
+function arcPath(cx, cy, r2, startAngle, endAngle) {
+  const x1 = cx + r2 * Math.cos(startAngle);
+  const y1 = cy + r2 * Math.sin(startAngle);
+  const x2 = cx + r2 * Math.cos(endAngle);
+  const y2 = cy + r2 * Math.sin(endAngle);
+  const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+  return `M${x1},${y1} A${r2},${r2} 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 = React8.useMemo(() => {
+    avlSmId += 1;
+    const base = `avl-sm-${avlSmId}`;
+    return { glow: `${base}-glow`, grad: `${base}-grad` };
+  }, []);
+  const cx = 300;
+  const cy = 200;
+  const r2 = 150;
+  const stateWidth = 90;
+  const stateHeight = 36;
+  const positions = ringPositions(cx, cy, r2, 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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.1 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-sm-dash { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 + 30, fill: `url(#${ids.grad})` }),
+    transitions.map((tr, i) => {
+      if (tr.from !== tr.to) return null;
+      const idx = stateIndex.get(tr.from);
+      if (idx === void 0) return null;
+      const pos = positions[idx];
+      const loopR = 20;
+      const loopY = pos.y - stateHeight / 2 - 4;
+      const d = `M${pos.x - 14},${loopY} C${pos.x - 14},${loopY - loopR * 2} ${pos.x + 14},${loopY - loopR * 2} ${pos.x + 14},${loopY}`;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d,
+            fill: "none",
+            stroke: color,
+            strokeWidth: 1.5,
+            opacity: 0.7,
+            markerEnd: `url(#${ids.grad})`
+          }
+        ),
+        tr.event && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: pos.x,
+            y: loopY - loopR * 2 + 4,
+            textAnchor: "middle",
+            fill: color,
+            fontSize: 9,
+            fontFamily: "inherit",
+            fontWeight: "bold",
+            opacity: 0.8,
+            children: tr.event
+          }
+        )
+      ] }, `self-${i}`);
+    }),
+    transitions.map((tr, i) => {
+      if (tr.from === tr.to) return null;
+      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__ */ jsxs("g", { children: [
+        /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = React8.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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
+        /* @__PURE__ */ jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("radialGradient", { id: ids.grad, cx: "50%", cy: "50%", r: "50%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.08 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-ou-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+        ` }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: orbitalR + 20, fill: `url(#${ids.grad})` }),
+    /* @__PURE__ */ 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__ */ jsx(
+        AvlTrait,
+        {
+          cx,
+          cy,
+          rx: traitBaseRx + i * traitRxStep,
+          ry: traitBaseRy + i * traitRyStep,
+          rotation,
+          label: trait.name,
+          color: traitColor,
+          opacity: 0.7
+        },
+        trait.name
+      );
+    }),
+    /* @__PURE__ */ 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__ */ jsx(
+        AvlPage,
+        {
+          x: px,
+          y: py,
+          size: 10,
+          label: page.name,
+          color
+        },
+        page.name
+      );
+    })
+  ] });
 };
-var positionStyles = {
-  relative: "relative",
-  absolute: "absolute",
-  fixed: "fixed",
-  sticky: "sticky"
+AvlOrbitalUnit.displayName = "AvlOrbitalUnit";
+var avlCcId = 0;
+var AvlClosedCircuit = ({
+  states,
+  transitions,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React8.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 r2 = 120;
+  const stateW = 80;
+  const stateH = 32;
+  const positions = ringPositions(cx, cy, r2, states.length);
+  const stateIndex = new Map(states.map((s, i) => [s.name, i]));
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
+        /* @__PURE__ */ jsxs("feMerge", { children: [
+          /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.15 }),
+        /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: color, stopOpacity: 0.4 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.15 })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      )
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-cc-flow { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: r2 + 30, fill: "none", stroke: color, strokeWidth: 0.3, opacity: 0.06 }),
+    /* @__PURE__ */ 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__ */ jsxs("g", { children: [
+        /* @__PURE__ */ 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__ */ jsx(
+          AvlEvent,
+          {
+            x: cpx,
+            y: cpy - 14,
+            size: 8,
+            label: tr.event,
+            color,
+            opacity: 0.8
+          }
+        ),
+        tr.guard && /* @__PURE__ */ jsx(
+          AvlGuard,
+          {
+            x: mx,
+            y: my - 8,
+            size: 10,
+            label: tr.guard,
+            color,
+            opacity: 0.6
+          }
+        ),
+        tr.effects?.map((eff, j) => /* @__PURE__ */ 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__ */ jsx(
+        AvlState,
+        {
+          x: pos.x - stateW / 2,
+          y: pos.y - stateH / 2,
+          width: stateW,
+          height: stateH,
+          name: state.name,
+          color
+        },
+        state.name
+      );
+    }),
+    /* @__PURE__ */ jsx("circle", { cx, cy, r: 3, fill: color, opacity: 0.4 })
+  ] });
 };
-var Box = React6.forwardRef(
-  ({
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    bg = "transparent",
-    border = false,
-    rounded = "none",
-    shadow = "none",
-    display,
-    fullWidth = false,
-    fullHeight = false,
-    overflow,
-    position,
-    className,
-    children,
-    as: Component = "div",
-    action,
-    actionPayload,
-    hoverEvent,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...rest
-  }, ref) => {
-    const eventBus = useEventBus();
-    const handleClick = useCallback((e) => {
-      if (action) {
-        e.stopPropagation();
-        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+AvlClosedCircuit.displayName = "AvlClosedCircuit";
+var avlElId = 0;
+var AvlEmitListen = ({
+  emitter,
+  listener,
+  eventName,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ids = React8.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__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx(
+        "marker",
+        {
+          id: ids.arrow,
+          markerWidth: "8",
+          markerHeight: "6",
+          refX: "7",
+          refY: "3",
+          orient: "auto",
+          markerUnits: "strokeWidth",
+          children: /* @__PURE__ */ jsx("path", { d: "M0,0 L8,3 L0,6 Z", fill: color, opacity: 0.6 })
+        }
+      ),
+      /* @__PURE__ */ jsxs("linearGradient", { id: ids.grad, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.5 }),
+        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.2 })
+      ] })
+    ] }),
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-el-dash { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
+        ` }),
+    /* @__PURE__ */ jsx(AvlOrbital, { cx: leftCx, cy, r: orbR, label: emitter.name, color }),
+    /* @__PURE__ */ jsx(AvlEntity, { x: leftCx, y: cy, r: 18, fieldCount: emitter.fields ?? 3, color }),
+    /* @__PURE__ */ jsx(AvlOrbital, { cx: rightCx, cy, r: orbR, label: listener.name, color }),
+    /* @__PURE__ */ jsx(AvlEntity, { x: rightCx, y: cy, r: 18, fieldCount: listener.fields ?? 3, color }),
+    /* @__PURE__ */ 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
       }
-      onClick?.(e);
-    }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+    ),
+    /* @__PURE__ */ jsx(
+      AvlEffect,
+      {
+        x: leftCx + orbR + 20,
+        y: cy - 20,
+        effectType: "emit",
+        size: 6,
+        color,
+        opacity: 0.8
       }
-      onMouseEnter?.(e);
-    }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+    ),
+    eventName && /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: 300,
+        y: cy - 18,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 11,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        opacity: 0.8,
+        children: [
+          "~",
+          eventName
+        ]
       }
-      onMouseLeave?.(e);
-    }, [hoverEvent, eventBus, onMouseLeave]);
-    const isClickable = action || onClick;
-    const Comp = Component;
-    return /* @__PURE__ */ jsx(
-      Comp,
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
       {
-        ref,
-        className: cn(
-          // Padding
-          padding && paddingStyles[padding],
-          paddingX && paddingXStyles[paddingX],
-          paddingY && paddingYStyles[paddingY],
-          // Margin
-          margin && marginStyles[margin],
-          marginX && marginXStyles[marginX],
-          marginY && marginYStyles[marginY],
-          // Background
-          bgStyles[bg],
-          // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
-          // Rounded
-          roundedStyles[rounded],
-          // Shadow
-          shadowStyles[shadow],
-          // Display
-          display && displayStyles[display],
-          // Dimensions
-          fullWidth && "w-full",
-          fullHeight && "h-full",
-          // Overflow
-          overflow && overflowStyles[overflow],
-          // Position
-          position && positionStyles[position],
-          // Cursor for clickable
-          isClickable && "cursor-pointer",
-          className
-        ),
-        onClick: isClickable ? handleClick : void 0,
-        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
-        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
-        ...rest,
-        children
+        x: 300,
+        y: cy + 18,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 12,
+        fontFamily: "inherit",
+        opacity: 0.3,
+        letterSpacing: 4,
+        children: "~ ~ ~"
       }
-    );
-  }
-);
-Box.displayName = "Box";
-var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
-};
-var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
-  inherit: "text-inherit"
-};
-var weightStyles = {
-  light: "font-light",
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var defaultElements = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  heading: "h2",
-  subheading: "h3",
-  body1: "p",
-  body2: "p",
-  body: "p",
-  caption: "span",
-  overline: "span",
-  small: "span",
-  large: "p",
-  label: "span"
+    )
+  ] });
 };
-var typographySizeStyles = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  "2xl": "text-2xl",
-  "3xl": "text-3xl"
+AvlEmitListen.displayName = "AvlEmitListen";
+var SLOT_PRESETS = {
+  header: { x: 10, y: 5, width: 340, height: 35 },
+  main: { x: 120, y: 50, width: 230, height: 195 },
+  sidebar: { x: 10, y: 50, width: 100, height: 195 },
+  modal: { x: 80, y: 60, width: 200, height: 140 },
+  drawer: { x: 220, y: 50, width: 130, height: 195 },
+  toast: { x: 220, y: 210, width: 130, height: 35 },
+  footer: { x: 10, y: 220, width: 340, height: 30 },
+  center: { x: 60, y: 50, width: 240, height: 195 },
+  "hud-top": { x: 10, y: 5, width: 340, height: 30 },
+  "hud-bottom": { x: 10, y: 220, width: 340, height: 30 }
 };
-var overflowStyles2 = {
-  visible: "overflow-visible",
-  hidden: "overflow-hidden",
-  wrap: "break-words overflow-hidden",
-  "clamp-2": "overflow-hidden line-clamp-2",
-  "clamp-3": "overflow-hidden line-clamp-3"
+function resolveSlot(slot, fallbackIdx) {
+  if (slot.x !== void 0 && slot.y !== void 0 && slot.width !== void 0 && slot.height !== void 0) {
+    return slot;
+  }
+  const preset = SLOT_PRESETS[slot.name];
+  if (preset) {
+    return {
+      name: slot.name,
+      x: slot.x ?? preset.x,
+      y: slot.y ?? preset.y,
+      width: slot.width ?? preset.width,
+      height: slot.height ?? preset.height
+    };
+  }
+  const col = fallbackIdx % 2;
+  const row = Math.floor(fallbackIdx / 2);
+  return {
+    name: slot.name,
+    x: 10 + col * 175,
+    y: 50 + row * 100,
+    width: 165,
+    height: 90
+  };
+}
+var AvlSlotMap = ({
+  slots,
+  pageWidth = 360,
+  pageHeight = 280,
+  className,
+  color = "var(--color-primary)",
+  animated = false
+}) => {
+  const ox = (600 - pageWidth) / 2;
+  const oy = (400 - pageHeight) / 2;
+  let unknownIdx = 0;
+  const resolvedSlots = slots.map((slot) => {
+    const isUnknown = !SLOT_PRESETS[slot.name] && (slot.x === void 0 || slot.y === void 0);
+    const resolved = resolveSlot(slot, isUnknown ? unknownIdx : 0);
+    if (isUnknown) unknownIdx++;
+    return resolved;
+  });
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    animated && /* @__PURE__ */ jsx("style", { children: `
+          @keyframes avl-slot-pulse { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.25; } }
+        ` }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: pageHeight,
+        rx: 4,
+        ry: 4,
+        fill: "none",
+        stroke: color,
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: ox,
+        y: oy,
+        width: pageWidth,
+        height: 24,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        opacity: 0.1
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: ox + pageWidth / 2,
+        y: oy + 16,
+        textAnchor: "middle",
+        fill: color,
+        fontSize: 10,
+        fontFamily: "inherit",
+        fontWeight: "bold",
+        children: "Page Layout"
+      }
+    ),
+    resolvedSlots.map((slot) => {
+      const isOverlay = ["modal", "drawer", "toast"].includes(slot.name);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        isOverlay && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: ox + slot.x + 3,
+            y: oy + 24 + slot.y + 3,
+            width: slot.width,
+            height: slot.height,
+            rx: 3,
+            ry: 3,
+            fill: "black",
+            opacity: 0.06
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: ox + slot.x,
+            y: oy + 24 + slot.y,
+            width: slot.width,
+            height: slot.height,
+            rx: 3,
+            ry: 3,
+            fill: isOverlay ? "var(--color-surface, #fff)" : color,
+            opacity: isOverlay ? 0.9 : 0.08,
+            stroke: color,
+            strokeWidth: isOverlay ? 1.5 : 1,
+            strokeDasharray: isOverlay ? "6 3" : "4 2",
+            style: animated ? { animation: "avl-slot-pulse 2s ease-in-out infinite" } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "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,
+              isOverlay ? " (overlay)" : ""
+            ]
+          }
+        )
+      ] }, slot.name);
+    })
+  ] });
 };
-var Typography = ({
-  variant: variantProp,
-  level,
-  color = "primary",
-  align,
-  weight,
-  size,
-  truncate = false,
-  overflow,
-  as,
-  id,
-  className,
-  style,
-  content,
-  children
-}) => {
-  const variant = variantProp ?? (level ? `h${level}` : "body1");
-  const Component = as || defaultElements[variant];
-  const Comp = Component;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      id,
-      className: cn(
-        variantStyles[variant],
-        colorStyles[color],
-        weight && weightStyles[weight],
-        size && typographySizeStyles[size],
-        align && `text-${align}`,
-        truncate && "truncate overflow-hidden text-ellipsis",
-        overflow && overflowStyles2[overflow],
-        className
-      ),
-      style,
-      children: children ?? content
-    }
+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.75, vSpacing)
   );
-};
-Typography.displayName = "Typography";
-var gapStyles = {
-  none: "gap-0",
-  xs: "gap-1",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12"
-};
-var alignStyles = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var justifyStyles = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-var Stack = ({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = false,
-  reverse = false,
-  flex = false,
+  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 r2 = Math.max(baseR, labelLen * 3.5 + 6);
+  const nc = nodeColor(node.type, color);
+  return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+    node.children.map((child, i) => {
+      const childR = Math.max(
+        child.type === "operator" ? 20 : 16,
+        child.label.length * 3.5 + 6
+      );
+      return /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: node.x,
+          y1: node.y + (node.type === "operator" ? r2 * 0.7 : r2),
+          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__ */ jsx(
+      "rect",
+      {
+        x: node.x - r2,
+        y: node.y - r2 * 0.6,
+        width: r2 * 2,
+        height: r2 * 1.2,
+        rx: 4,
+        ry: 4,
+        fill: color,
+        fillOpacity: 0.15,
+        stroke: nc,
+        strokeWidth: 1.5
+      }
+    ) : node.type === "binding" ? /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r: r2, fill: "none", stroke: nc, strokeWidth: 1.5, strokeDasharray: "3 2" }) : /* @__PURE__ */ jsx("circle", { cx: node.x, cy: node.y, r: r2, fill: "none", stroke: nc, strokeWidth: 1, opacity: 0.5 }),
+    /* @__PURE__ */ 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,
-  style,
-  children,
-  as: Component = "div",
-  onClick,
-  onKeyDown,
-  role,
-  tabIndex,
-  action,
-  actionPayload,
-  responsive = false
+  color = "var(--color-primary)"
 }) => {
-  const eventBus = useEventBus();
-  const handleClick = (e) => {
-    if (action) {
-      eventBus.emit(`UI:${action}`, actionPayload ?? {});
-    }
-    onClick?.(e);
-  };
-  const isHorizontal = direction === "horizontal";
-  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  const Comp = Component;
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: cn(
-        "flex",
-        directionClass,
-        gapStyles[gap],
-        alignStyles[align],
-        justifyStyles[justify],
-        wrap && "flex-wrap",
-        flex && "flex-1",
-        className
-      ),
-      style,
-      onClick: action || onClick ? handleClick : void 0,
-      onKeyDown,
-      role,
-      tabIndex,
-      children
-    }
-  );
+  const ids = React8.useMemo(() => {
+    avlEtId += 1;
+    return { glow: `avl-et-${avlEtId}-glow` };
+  }, []);
+  const layout = layoutTree(expression, 300, 60, 200, 90);
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 600 400", xmlns: "http://www.w3.org/2000/svg", className, children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: ids.glow, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+      /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "2", result: "blur" }),
+      /* @__PURE__ */ jsxs("feMerge", { children: [
+        /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+        /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+      ] })
+    ] }) }),
+    renderNode(layout, color, ids.glow)
+  ] });
 };
-var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
+AvlExprTree.displayName = "AvlExprTree";
 
 // components/organisms/avl/avl-schema-parser.ts
 function getEntity(orbital) {
@@ -5164,6 +5186,14 @@ function zoomReducer(state, action) {
       }
       return state;
     }
+    case "SWITCH_TRAIT": {
+      if (state.level !== "trait" || state.animating) return state;
+      return {
+        ...state,
+        selectedTrait: action.trait,
+        selectedTransition: null
+      };
+    }
     case "RESET": {
       return initialZoomState;
     }
@@ -5371,12 +5401,15 @@ var AvlApplicationScene = ({
 AvlApplicationScene.displayName = "AvlApplicationScene";
 var CX = 300;
 var CY = 200;
+var VIEWBOX_H = 400;
 var ORBITAL_R2 = 130;
 var ENTITY_R2 = 24;
 var AvlOrbitalScene = ({
   data,
   color = "var(--color-primary)",
-  onTraitClick
+  highlightedTrait,
+  onTraitClick,
+  onTraitHighlight
 }) => {
   const traitAngleStart = -Math.PI / 3;
   const traitAngleStep = data.traits.length > 1 ? Math.PI * 1.2 / (data.traits.length - 1) : 0;
@@ -5402,7 +5435,7 @@ var AvlOrbitalScene = ({
             rotation: rotationDeg,
             label: trait.name,
             color,
-            opacity: 0.7
+            opacity: highlightedTrait ? highlightedTrait === trait.name ? 1 : 0.25 : 0.7
           }
         ),
         onTraitClick && /* @__PURE__ */ jsx(
@@ -5475,6 +5508,54 @@ var AvlOrbitalScene = ({
       const py = CY + (ORBITAL_R2 + 15) * Math.sin(angle);
       return /* @__PURE__ */ jsx(AvlPage, { x: px, y: py, label: page.route, color }, page.name);
     }),
+    data.traits.length > 1 && /* @__PURE__ */ jsx("g", { children: data.traits.map((trait, i) => {
+      const pillW = 70;
+      const gap = 8;
+      const totalW = data.traits.length * pillW + (data.traits.length - 1) * gap;
+      const startX = CX - totalW / 2;
+      const px = startX + i * (pillW + gap);
+      const py = VIEWBOX_H - 30;
+      const isHighlighted = highlightedTrait === trait.name;
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          style: { cursor: "pointer" },
+          onClick: () => onTraitClick?.(trait.name, { x: CX, y: CY }),
+          onMouseEnter: () => onTraitHighlight?.(trait.name),
+          onMouseLeave: () => onTraitHighlight?.(null),
+          children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: px,
+                y: py,
+                width: pillW,
+                height: 22,
+                rx: 11,
+                fill: isHighlighted ? color : "transparent",
+                stroke: color,
+                strokeWidth: isHighlighted ? 1.5 : 0.8,
+                opacity: isHighlighted ? 0.15 : 0.3
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: px + pillW / 2,
+                y: py + 14,
+                textAnchor: "middle",
+                fill: color,
+                fontSize: 8,
+                fontWeight: isHighlighted ? "bold" : "normal",
+                opacity: isHighlighted ? 1 : 0.6,
+                children: trait.name.length > 10 ? trait.name.slice(0, 9) + "\u2026" : trait.name
+              }
+            )
+          ]
+        },
+        `tab-${trait.name}`
+      );
+    }) }),
     data.externalLinks.map((link, i) => {
       const isOut = link.direction === "out";
       const edgeX = isOut ? 580 : 20;
@@ -6140,7 +6221,7 @@ var AvlLegend = ({
 };
 AvlLegend.displayName = "AvlLegend";
 var VIEWBOX_W = 600;
-var VIEWBOX_H = 400;
+var VIEWBOX_H2 = 400;
 var ANIMATION_DURATION = 600;
 var AvlCosmicZoom = ({
   schema: schemaProp,
@@ -6169,11 +6250,11 @@ var AvlCosmicZoom = ({
   const [transitionStyle, setTransitionStyle] = useState({});
   useEffect(() => {
     if (initialOrbital) {
-      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+      dispatch({ type: "ZOOM_INTO_ORBITAL", orbital: initialOrbital, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
       setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
       if (initialTrait) {
         setTimeout(() => {
-          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H / 2 } });
+          dispatch({ type: "ZOOM_INTO_TRAIT", trait: initialTrait, targetPosition: { x: VIEWBOX_W / 2, y: VIEWBOX_H2 / 2 } });
           setTimeout(() => dispatch({ type: "ANIMATION_COMPLETE" }), 0);
         }, 10);
       }
@@ -6197,7 +6278,7 @@ var AvlCosmicZoom = ({
     if (!target) return;
     if (state.animationDirection === "in") {
       setTransitionStyle({
-        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H / 2)}px)`,
+        transform: `scale(${target.scale}) translate(${-(target.x - VIEWBOX_W / 2)}px, ${-(target.y - VIEWBOX_H2 / 2)}px)`,
         transformOrigin: `${target.x}px ${target.y}px`,
         transition: `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${ANIMATION_DURATION}ms ease`,
         opacity: 0.3
@@ -6227,6 +6308,10 @@ var AvlCosmicZoom = ({
   const handleTraitClick = useCallback((name, pos) => {
     dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: pos });
   }, []);
+  const handleTraitSwitch = useCallback((name) => {
+    dispatch({ type: "SWITCH_TRAIT", trait: name });
+  }, []);
+  const [highlightedTrait, setHighlightedTrait] = React8.useState(null);
   const handleTransitionClick = useCallback((index, pos) => {
     dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: pos });
   }, []);
@@ -6260,7 +6345,9 @@ var AvlCosmicZoom = ({
           {
             data,
             color,
-            onTraitClick: handleTraitClick
+            highlightedTrait,
+            onTraitClick: handleTraitClick,
+            onTraitHighlight: setHighlightedTrait
           }
         );
       }
@@ -6292,7 +6379,7 @@ var AvlCosmicZoom = ({
       default:
         return null;
     }
-  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick]);
+  }, [state.level, state.selectedOrbital, state.selectedTrait, state.selectedTransition, schema, color, handleOrbitalClick, handleTraitClick, handleTransitionClick, highlightedTrait, setHighlightedTrait]);
   const breadcrumbs = getBreadcrumbs(state);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -6308,7 +6395,7 @@ var AvlCosmicZoom = ({
             gap: "xs",
             align: "center",
             className: "absolute top-2 left-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-3 py-1.5",
-            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
+            children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                 Box,
@@ -6322,6 +6409,28 @@ var AvlCosmicZoom = ({
             ] }, crumb.level))
           }
         ),
+        state.level === "trait" && state.selectedOrbital && (() => {
+          const orbData = parseOrbitalLevel(schema, state.selectedOrbital);
+          if (!orbData || orbData.traits.length <= 1) return null;
+          return /* @__PURE__ */ jsx(
+            HStack,
+            {
+              gap: "xs",
+              align: "center",
+              className: "absolute top-2 right-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-1.5 py-1",
+              children: orbData.traits.map((t) => /* @__PURE__ */ jsx(
+                Box,
+                {
+                  as: "button",
+                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"}`,
+                  onClick: () => handleTraitSwitch(t.name),
+                  children: t.name
+                },
+                t.name
+              ))
+            }
+          );
+        })(),
         state.level !== "application" && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -6334,7 +6443,7 @@ var AvlCosmicZoom = ({
         /* @__PURE__ */ jsxs(
           "svg",
           {
-            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H}`,
+            viewBox: `0 0 ${VIEWBOX_W} ${VIEWBOX_H2}`,
             xmlns: "http://www.w3.org/2000/svg",
             className: "w-full h-full",
             role: "img",