@almadar/ui 2.43.0 → 2.46.0

package/dist/avl/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { OrbitControls, Grid as Grid$1, Stars, Sparkles, Html, RoundedBox } from '@react-three/drei';
-import * as React124 from 'react';
-import React124__default, { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, lazy, useContext, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
+import * as React125 from 'react';
+import React125__default, { createContext, useState, useRef, useCallback, useEffect, useMemo, useLayoutEffect, lazy, useContext, Suspense, useSyncExternalStore, useId, forwardRef, useImperativeHandle, useReducer, Component } from 'react';
 import { useThree, useFrame, Canvas } from '@react-three/fiber';
 import * as THREE6 from 'three';
 import { MathUtils, Vector3, Quaternion, QuadraticBezierCurve3 } from 'three';
@@ -3155,7 +3155,7 @@ var init_Box = __esm({
       fixed: "fixed",
       sticky: "sticky"
     };
-    Box = React124__default.forwardRef(
+    Box = React125__default.forwardRef(
       ({
         padding,
         paddingX,
@@ -5495,7 +5495,7 @@ function UnitRenderer({
   onAnimationStateChange,
   animationSpeed = 1
 }) {
-  const handleUnitClick = React124__default.useCallback(
+  const handleUnitClick = React125__default.useCallback(
     (unit) => {
       onUnitClick?.(unit);
     },
@@ -8689,7 +8689,7 @@ var init_Avl3DViewer = __esm({
       const handleTraitClick = useCallback((name) => {
         dispatch({ type: "ZOOM_INTO_TRAIT", trait: name, targetPosition: { x: 0, y: 0 } });
       }, []);
-      const [highlightedTrait, setHighlightedTrait] = React124__default.useState(null);
+      const [highlightedTrait, setHighlightedTrait] = React125__default.useState(null);
       const handleTransitionClick = useCallback((index) => {
         dispatch({ type: "ZOOM_INTO_TRANSITION", transitionIndex: index, targetPosition: { x: 0, y: 0 } });
       }, []);
@@ -8776,7 +8776,7 @@ var init_Avl3DViewer = __esm({
                 gap: "xs",
                 align: "center",
                 className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
-                children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+                children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
                   i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
                   i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
                     Box,
@@ -9527,7 +9527,7 @@ var AvlTransition = ({
   opacity = 1,
   className
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlTransitionId += 1;
     return { arrow: `avl-tr-${avlTransitionId}-arrow` };
   }, []);
@@ -10292,7 +10292,7 @@ var AvlStateMachine = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlSmId += 1;
     const base = `avl-sm-${avlSmId}`;
     return { glow: `${base}-glow`, grad: `${base}-grad` };
@@ -10487,7 +10487,7 @@ var AvlOrbitalUnit = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlOuId += 1;
     const base = `avl-ou-${avlOuId}`;
     return { glow: `${base}-glow`, grad: `${base}-grad` };
@@ -10579,7 +10579,7 @@ var AvlClosedCircuit = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlCcId += 1;
     const base = `avl-cc-${avlCcId}`;
     return { glow: `${base}-glow`, grad: `${base}-grad`, arrow: `${base}-arrow` };
@@ -10732,7 +10732,7 @@ var AvlEmitListen = ({
   color = "var(--color-primary)",
   animated = false
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlElId += 1;
     const base = `avl-el-${avlElId}`;
     return { arrow: `${base}-arrow`, grad: `${base}-grad` };
@@ -11005,7 +11005,7 @@ function renderNode(node, color, glowId) {
   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(React124__default.Fragment, { children: [
+  return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
     node.children.map((child, i) => {
       const childR = Math.max(
         child.type === "operator" ? 20 : 16,
@@ -11062,7 +11062,7 @@ var AvlExprTree = ({
   className,
   color = "var(--color-primary)"
 }) => {
-  const ids = React124__default.useMemo(() => {
+  const ids = React125__default.useMemo(() => {
     avlEtId += 1;
     return { glow: `avl-et-${avlEtId}-glow` };
   }, []);
@@ -12036,7 +12036,7 @@ var SystemNode = ({ data }) => {
           stateChain.length > 0 && /* @__PURE__ */ jsx("svg", { width: stateChain.length * 14 + 2, height: 10, viewBox: `0 0 ${stateChain.length * 14 + 2} 10`, children: stateChain.map((s, i) => {
             const tc = transitionCounts[s.name] ?? 0;
             const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
-            return /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+            return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
               /* @__PURE__ */ jsx(AvlState, { x: i * 14 + 1, y: 1, width: 10, height: 8, name: "", role, isInitial: s.isInitial, isTerminal: s.isTerminal }),
               i < stateChain.length - 1 && /* @__PURE__ */ jsx("line", { x1: i * 14 + 12, y1: 5, x2: i * 14 + 15, y2: 5, stroke: "var(--color-border)", strokeWidth: 0.5 })
             ] }, s.name);
@@ -12076,7 +12076,7 @@ var MiniStateMachine = ({ data, className }) => {
       const x = 2 + i * (NODE_W + GAP + ARROW_W + GAP);
       const tc = transitionCounts[s.name] ?? 0;
       const role = getStateRole(s.name, s.isInitial, s.isTerminal, tc, maxTC);
-      return /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
         /* @__PURE__ */ jsx(
           AvlState,
           {
@@ -12830,12 +12830,12 @@ function findCrossLinks(orbitals) {
   }
   return links;
 }
-function schemaToOverviewGraph(schema, mockData) {
+function schemaToOverviewGraph(schema, mockData, behaviorMeta, layoutHint) {
   const orbitals = getOrbitals(schema);
   const nodes = [];
   const edges = [];
   const count = orbitals.length;
-  const cols = Math.ceil(Math.sqrt(count));
+  const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
   for (let i = 0; i < orbitals.length; i++) {
     const orb = orbitals[i];
     const entityInfo = getEntityInfo(orb);
@@ -12874,6 +12874,22 @@ function schemaToOverviewGraph(schema, mockData) {
       }
     }
     const eventSources = collectEventSources(initPatterns);
+    for (const source of eventSources) {
+      for (const trait of traits2) {
+        const sm = getStateMachine2(trait);
+        if (!sm) continue;
+        const smEvents = trait.stateMachine?.events ?? [];
+        const matchingEvent = smEvents.find((ev) => ev.key === source.event);
+        if (matchingEvent?.payload && Array.isArray(matchingEvent.payload)) {
+          source.payloadFields = matchingEvent.payload.map((p2) => ({
+            name: String(p2.name ?? ""),
+            type: String(p2.type ?? "string"),
+            ...p2.required ? { required: true } : {}
+          }));
+          break;
+        }
+      }
+    }
     const col = i % cols;
     const row = Math.floor(i / cols);
     nodes.push({
@@ -12885,6 +12901,7 @@ function schemaToOverviewGraph(schema, mockData) {
         patterns: initPatterns,
         eventSources,
         effectTypes: initEffectTypes,
+        layer: behaviorMeta?.[orb.name]?.layer,
         stateRole: "initial",
         entityName: entityInfo.name,
         persistence: entityInfo.persistence,
@@ -13374,7 +13391,7 @@ function subscribeToStore(listener) {
 function useEntityRef(entityType) {
   const versionRef = useRef(0);
   const dataRef = useRef([]);
-  const getSnapshotStable = React124__default.useCallback(() => {
+  const getSnapshotStable = React125__default.useCallback(() => {
     const currentVersion = getVersion(entityType);
     if (currentVersion !== versionRef.current) {
       versionRef.current = currentVersion;
@@ -13482,6 +13499,36 @@ function SelectionProvider({
   };
   return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue2, children });
 }
+var EntitySchemaContext = createContext(null);
+function EntitySchemaProvider({
+  entities,
+  children
+}) {
+  const entitiesMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entity of entities) {
+      map.set(entity.name, entity);
+    }
+    return map;
+  }, [entities]);
+  const contextValue2 = useMemo(
+    () => ({
+      entities: entitiesMap
+    }),
+    [entitiesMap]
+  );
+  return /* @__PURE__ */ jsx(EntitySchemaContext.Provider, { value: contextValue2, children });
+}
+function useEntitySchema() {
+  const context = useContext(EntitySchemaContext);
+  if (!context) {
+    throw new Error("useEntitySchema must be used within an EntitySchemaProvider");
+  }
+  return context;
+}
+function useEntitySchemaOptional() {
+  return useContext(EntitySchemaContext);
+}
 var DEFAULT_SLOTS = {
   main: null,
   sidebar: null,
@@ -14211,7 +14258,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React124__default.isValidElement(value)) {
+  if (React125__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -14220,7 +14267,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React124__default.forwardRef(
+var Button = React125__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -14319,7 +14366,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React124__default.forwardRef(
+var Badge = React125__default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -14460,7 +14507,7 @@ init_cn();
 
 // components/atoms/Input.tsx
 init_cn();
-var Input = React124__default.forwardRef(
+var Input = React125__default.forwardRef(
   ({
     className,
     inputType,
@@ -14575,7 +14622,7 @@ Input.displayName = "Input";
 
 // components/atoms/Label.tsx
 init_cn();
-var Label = React124__default.forwardRef(
+var Label = React125__default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "label",
@@ -14598,7 +14645,7 @@ Label.displayName = "Label";
 
 // components/atoms/Textarea.tsx
 init_cn();
-var Textarea = React124__default.forwardRef(
+var Textarea = React125__default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -14624,7 +14671,7 @@ Textarea.displayName = "Textarea";
 
 // components/atoms/Select.tsx
 init_cn();
-var Select = React124__default.forwardRef(
+var Select = React125__default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxs(
@@ -14663,7 +14710,7 @@ Select.displayName = "Select";
 
 // components/atoms/Checkbox.tsx
 init_cn();
-var Checkbox = React124__default.forwardRef(
+var Checkbox = React125__default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -14742,7 +14789,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React124__default.forwardRef(
+var Card = React125__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -14778,9 +14825,9 @@ var Card = React124__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React124__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React125__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React124__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React125__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -14793,11 +14840,11 @@ var CardTitle = React124__default.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React124__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React125__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React124__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React125__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -14815,7 +14862,7 @@ var sizeStyles4 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React124__default.forwardRef(
+var Spinner = React125__default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -15250,7 +15297,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // components/atoms/Radio.tsx
 init_cn();
-var Radio = React124__default.forwardRef(
+var Radio = React125__default.forwardRef(
   ({
     label,
     helperText,
@@ -15357,7 +15404,7 @@ Radio.displayName = "Radio";
 
 // components/atoms/Switch.tsx
 init_cn();
-var Switch = React124.forwardRef(
+var Switch = React125.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -15368,10 +15415,10 @@ var Switch = React124.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React124.useState(
+    const [isChecked, setIsChecked] = React125.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React124.useEffect(() => {
+    React125.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -15687,8 +15734,8 @@ var LawReferenceTooltip = ({
   position = "top",
   className
 }) => {
-  const [isVisible, setIsVisible] = React124__default.useState(false);
-  const timeoutRef = React124__default.useRef(null);
+  const [isVisible, setIsVisible] = React125__default.useState(false);
+  const timeoutRef = React125__default.useRef(null);
   const handleMouseEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -15697,7 +15744,7 @@ var LawReferenceTooltip = ({
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
-  React124__default.useEffect(() => {
+  React125__default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -15897,7 +15944,7 @@ var sizeStyles5 = {
   md: "w-2.5 h-2.5",
   lg: "w-3 h-3"
 };
-var StatusDot = React124__default.forwardRef(
+var StatusDot = React125__default.forwardRef(
   ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "span",
@@ -15947,7 +15994,7 @@ var iconMap2 = {
   down: TrendingDown,
   flat: ArrowRight
 };
-var TrendIndicator = React124__default.forwardRef(
+var TrendIndicator = React125__default.forwardRef(
   ({
     className,
     value,
@@ -16010,7 +16057,7 @@ var thumbSizes = {
   md: "w-4 h-4",
   lg: "w-5 h-5"
 };
-var RangeSlider = React124__default.forwardRef(
+var RangeSlider = React125__default.forwardRef(
   ({
     className,
     min = 0,
@@ -16524,7 +16571,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React124__default.forwardRef(
+var ContentSection = React125__default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -16566,7 +16613,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React124__default.forwardRef(
+var AnimatedReveal = React125__default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -16722,7 +16769,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React124__default.forwardRef(
+var AnimatedGraphic = React125__default.forwardRef(
   ({
     src,
     svgContent,
@@ -16745,7 +16792,7 @@ var AnimatedGraphic = React124__default.forwardRef(
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
     const prevAnimateRef = useRef(animate);
-    const setRef = React124__default.useCallback(
+    const setRef = React125__default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -16922,9 +16969,9 @@ function ScoreDisplay({
   ...rest
 }) {
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof rest.score === "number" && !Number.isNaN(rest.score) ? rest.score : 0;
-  const [displayValue, setDisplayValue] = React124.useState(resolvedValue);
-  const [isAnimating, setIsAnimating] = React124.useState(false);
-  React124.useEffect(() => {
+  const [displayValue, setDisplayValue] = React125.useState(resolvedValue);
+  const [isAnimating, setIsAnimating] = React125.useState(false);
+  React125.useEffect(() => {
     if (!animated || displayValue === resolvedValue) {
       setDisplayValue(resolvedValue);
       return;
@@ -16982,9 +17029,9 @@ var shapeMap = {
   square: "rounded-md"
 };
 var variantMap = {
-  primary: "bg-blue-600 text-white border-blue-400 hover:bg-blue-500",
-  secondary: "bg-gray-700 text-white border-gray-500 hover:bg-gray-600",
-  ghost: "bg-transparent text-white border-white/30 hover:bg-white/10"
+  primary: "bg-blue-600 text-[var(--color-foreground)] border-blue-400 hover:bg-blue-500",
+  secondary: "bg-[var(--color-surface,#374151)] text-[var(--color-foreground)] border-gray-500 hover:bg-gray-600",
+  ghost: "bg-transparent text-[var(--color-foreground)] border-white/30 hover:bg-white/10"
 };
 function ControlButton({
   label,
@@ -17001,9 +17048,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React124.useState(false);
+  const [isPressed, setIsPressed] = React125.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React124.useCallback(
+  const handlePointerDown = React125.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -17013,7 +17060,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React124.useCallback(
+  const handlePointerUp = React125.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -17023,7 +17070,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React124.useCallback(
+  const handlePointerLeave = React125.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -17223,11 +17270,11 @@ function TimerDisplay({
     {
       className: cn(
         "inline-flex items-center justify-center rounded-lg",
-        "bg-gray-800/80 border border-gray-600 font-mono font-bold tabular-nums",
+        "bg-[var(--color-card)]/80 border border-gray-600 font-mono font-bold tabular-nums",
         sizeMap4[size],
         running && "border-green-500/50",
         isLow && "text-red-400 border-red-500/50 animate-pulse",
-        !isLow && "text-white",
+        !isLow && "text-[var(--color-foreground)]",
         className
       ),
       children: formatTime(seconds, format)
@@ -17258,7 +17305,7 @@ function ResourceCounter({
     {
       className: cn(
         "inline-flex items-center rounded-md",
-        "bg-gray-800/80 border border-gray-600 font-medium text-white",
+        "bg-[var(--color-card)]/80 border border-gray-600 font-medium text-[var(--color-foreground)]",
         sizes.wrapper,
         className
       ),
@@ -17320,9 +17367,9 @@ function ItemSlot({
       title: label,
       className: cn(
         "relative flex items-center justify-center rounded-lg border-2",
-        "bg-gray-800/80 transition-all duration-150",
+        "bg-[var(--color-card)]/80 transition-all duration-150",
         sizeMap6[size],
-        empty ? "border-gray-700 bg-gray-900/50" : rarityBorderMap[rarity],
+        empty ? "border-gray-700 bg-[var(--color-card)]/50" : rarityBorderMap[rarity],
         !empty && rarityGlowMap[rarity],
         selected && "ring-2 ring-white ring-offset-1 ring-offset-gray-900",
         isClickable && !empty && "hover:brightness-125 cursor-pointer",
@@ -17338,7 +17385,7 @@ function ItemSlot({
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
-              "bg-gray-700 border border-gray-500 text-[10px] font-bold text-white"
+              "bg-[var(--color-surface,#374151)] border border-gray-500 text-[10px] font-bold text-[var(--color-foreground)]"
             ),
             children: quantity
           }
@@ -17370,7 +17417,7 @@ function TurnIndicator({
     {
       className: cn(
         "inline-flex items-center rounded-lg",
-        "bg-gray-800/80 border border-gray-600 font-medium text-white",
+        "bg-[var(--color-card)]/80 border border-gray-600 font-medium text-[var(--color-foreground)]",
         sizes.wrapper,
         className
       ),
@@ -17409,7 +17456,7 @@ function getComboIntensity(combo) {
   if (combo >= 10) return "text-red-400 animate-pulse";
   if (combo >= 7) return "text-orange-400";
   if (combo >= 4) return "text-yellow-400";
-  return "text-white";
+  return "text-[var(--color-foreground)]";
 }
 function getComboScale(combo) {
   if (combo >= 10) return "scale-110";
@@ -17430,7 +17477,7 @@ function ComboCounter({
     {
       className: cn(
         "inline-flex flex-col items-center justify-center",
-        "rounded-xl bg-gray-800/80 border border-gray-600 px-3 py-1.5",
+        "rounded-xl bg-[var(--color-card)]/80 border border-gray-600 px-3 py-1.5",
         "transition-transform duration-200",
         getComboScale(combo),
         className
@@ -17640,7 +17687,7 @@ function StatusEffect({
       "span",
       {
         className: cn(
-          "absolute flex items-center justify-center rounded-full bg-white text-black font-bold leading-none",
+          "absolute flex items-center justify-center rounded-full bg-[var(--color-card)] text-[var(--color-foreground)] font-bold leading-none",
           sizes.badge
         ),
         children: stacks
@@ -17725,7 +17772,7 @@ function DialogueBubble({
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
           speaker && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-yellow-400", children: speaker }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-white leading-relaxed", children: text })
+          /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--color-foreground)] leading-relaxed", children: text })
         ] })
       ]
     }
@@ -17752,7 +17799,7 @@ function ChoiceButton({
       className: cn(
         "w-full text-left px-4 py-2.5 rounded-md border transition-all duration-150",
         "flex items-center gap-2",
-        selected ? "bg-yellow-500/20 border-yellow-400 text-yellow-300" : "bg-white/5 border-white/10 text-white hover:bg-white/10 hover:border-white/30",
+        selected ? "bg-yellow-500/20 border-yellow-400 text-yellow-300" : "bg-white/5 border-white/10 text-[var(--color-foreground)] hover:bg-white/10 hover:border-white/30",
         disabled && "opacity-40 cursor-not-allowed hover:bg-white/5 hover:border-white/10",
         className
       ),
@@ -17811,7 +17858,7 @@ function ActionButton({
       disabled: isDisabled,
       onClick,
       className: cn(
-        "relative inline-flex items-center gap-1.5 rounded-md border font-medium text-white overflow-hidden transition-colors duration-150",
+        "relative inline-flex items-center gap-1.5 rounded-md border font-medium text-[var(--color-foreground)] overflow-hidden transition-colors duration-150",
         sizes.button,
         variantStyles7[variant],
         isDisabled && "opacity-60 cursor-not-allowed",
@@ -17859,9 +17906,9 @@ function MiniMap({
   viewportRect,
   className
 }) {
-  const canvasRef = React124.useRef(null);
-  const frameRef = React124.useRef(0);
-  React124.useEffect(() => {
+  const canvasRef = React125.useRef(null);
+  const frameRef = React125.useRef(0);
+  React125.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -18097,7 +18144,7 @@ var ErrorState = ({
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React124__default.Component {
+var ErrorBoundary = class extends React125__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -18500,8 +18547,8 @@ var Tooltip = ({
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const triggerElement = React124__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const trigger = React124__default.cloneElement(triggerElement, {
+  const triggerElement = React125__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const trigger = React125__default.cloneElement(triggerElement, {
     ref: triggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -18618,8 +18665,8 @@ var Popover = ({
     onMouseEnter: handleOpen,
     onMouseLeave: handleClose
   };
-  const childElement = React124__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const triggerElement = React124__default.cloneElement(
+  const childElement = React125__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const triggerElement = React125__default.cloneElement(
     childElement,
     {
       ref: triggerRef,
@@ -18726,8 +18773,8 @@ var Menu = ({
     "bottom-start": "top-full left-0 mt-2",
     "bottom-end": "top-full right-0 mt-2"
   };
-  const triggerChild = React124__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
-  const triggerElement = React124__default.cloneElement(
+  const triggerChild = React125__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
+  const triggerElement = React125__default.cloneElement(
     triggerChild,
     {
       ref: triggerRef,
@@ -19447,7 +19494,7 @@ function InputPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React124__default.useState(value);
+  const [localValue, setLocalValue] = React125__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -19484,7 +19531,7 @@ function TextareaPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React124__default.useState(value);
+  const [localValue, setLocalValue] = React125__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -19515,7 +19562,7 @@ function SelectPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React124__default.useState(value);
+  const [localValue, setLocalValue] = React125__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -19544,7 +19591,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React124__default.useState(checked);
+  const [localChecked, setLocalChecked] = React125__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -19749,8 +19796,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React124.useState(/* @__PURE__ */ new Set());
-  const handlePress = React124.useCallback(
+  const [activeButtons, setActiveButtons] = React125.useState(/* @__PURE__ */ new Set());
+  const handlePress = React125.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -19758,7 +19805,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React124.useCallback(
+  const handleRelease = React125.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -19955,11 +20002,11 @@ var AuthLayout = ({
         children: [
           /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
           /* @__PURE__ */ jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxs(Link, { to: "/", className: "flex items-center gap-3", children: [
-            logo || /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsx(
+            logo || /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsx(
               Typography,
               {
                 variant: "body1",
-                className: "text-white font-bold text-lg",
+                className: "text-[var(--color-foreground)] font-bold text-lg",
                 children: appName.charAt(0).toUpperCase()
               }
             ) }),
@@ -19967,7 +20014,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-2xl font-bold text-white",
+                className: "text-2xl font-bold text-[var(--color-foreground)]",
                 children: appName
               }
             )
@@ -19977,7 +20024,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "h1",
-                className: "text-4xl font-bold text-white leading-tight",
+                className: "text-4xl font-bold text-[var(--color-foreground)] leading-tight",
                 children: [
                   "Welcome to ",
                   appName
@@ -19988,27 +20035,27 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-lg text-white/80 max-w-md",
+                className: "text-lg text-[var(--color-foreground)]/80 max-w-md",
                 children: "Sign in to access your dashboard and manage your account."
               }
             ),
-            /* @__PURE__ */ jsxs(Box, { className: "mt-12 p-6 bg-white/10 rounded-xl backdrop-blur", children: [
+            /* @__PURE__ */ jsxs(Box, { className: "mt-12 p-6 bg-[var(--color-card)]/10 rounded-xl backdrop-blur", children: [
               /* @__PURE__ */ jsx(
                 Typography,
                 {
                   variant: "body1",
-                  className: "text-white/90 italic",
+                  className: "text-[var(--color-foreground)]/90 italic",
                   children: '"This platform has transformed how we work. Highly recommended!"'
                 }
               ),
               /* @__PURE__ */ jsxs(HStack, { className: "mt-4", gap: "sm", align: "center", children: [
-                /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-full" }),
+                /* @__PURE__ */ jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-full" }),
                 /* @__PURE__ */ jsxs(VStack, { gap: "none", children: [
                   /* @__PURE__ */ jsx(
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white font-medium",
+                      className: "text-[var(--color-foreground)] font-medium",
                       children: "Jane Doe"
                     }
                   ),
@@ -20016,7 +20063,7 @@ var AuthLayout = ({
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white/60 text-sm",
+                      className: "text-[var(--color-foreground)]/60 text-sm",
                       children: "CEO, Example Co."
                     }
                   )
@@ -20024,8 +20071,8 @@ var AuthLayout = ({
               ] })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-white/5 rounded-full" }),
-          /* @__PURE__ */ jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-white/5 rounded-full" })
+          /* @__PURE__ */ jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-[var(--color-card)]/5 rounded-full" }),
+          /* @__PURE__ */ jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-[var(--color-card)]/5 rounded-full" })
         ]
       }
     ),
@@ -20042,7 +20089,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-white font-bold text-xl",
+                className: "text-[var(--color-foreground)] font-bold text-xl",
                 children: appName.charAt(0).toUpperCase()
               }
             ) }),
@@ -21148,7 +21195,7 @@ function IsometricCanvas({
         className: cn("relative w-full overflow-hidden rounded-lg", className),
         style: { height: viewportSize.height },
         "data-testid": "game-canvas-empty",
-        children: /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-full bg-slate-800 rounded-lg", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center h-full bg-[var(--color-card)] rounded-lg", children: /* @__PURE__ */ jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
           /* @__PURE__ */ jsx(Icon, { name: "map", size: "xl" }),
           /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-slate-400", children: t("canvas.emptyMessage") || "No map data loaded" })
         ] }) })
@@ -21680,7 +21727,7 @@ ScaledDiagram.displayName = "ScaledDiagram";
 init_Stack();
 init_Box();
 init_cn();
-var MarkdownContent = React124__default.memo(
+var MarkdownContent = React125__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -21746,7 +21793,7 @@ var MarkdownContent = React124__default.memo(
                   "th",
                   {
                     ...props,
-                    className: "border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-4 py-2 text-left font-semibold",
+                    className: "border border-gray-300 dark:border-gray-600 bg-[var(--color-muted)] px-4 py-2 text-left font-semibold",
                     children
                   }
                 );
@@ -21868,7 +21915,7 @@ function computeFoldRegions(code) {
 }
 var LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
 var HIDDEN_LINE_NUMBERS = { display: "none" };
-var CodeBlock = React124__default.memo(
+var CodeBlock = React125__default.memo(
   ({
     code: rawCode,
     language = "text",
@@ -22029,7 +22076,7 @@ var CodeBlock = React124__default.memo(
         {
           justify: "between",
           align: "center",
-          className: "px-3 py-2 bg-gray-800 rounded-t-lg border-b border-gray-700",
+          className: "px-3 py-2 bg-[var(--color-card)] rounded-t-lg border-b border-gray-700",
           children: [
             showLanguageBadge && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: language }),
             showCopyButton && /* @__PURE__ */ jsx(
@@ -22987,7 +23034,7 @@ var StateMachineView = ({
             style: { top: title ? 30 : 0 },
             children: [
               entity && /* @__PURE__ */ jsx(EntityBox, { entity, config }),
-              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React124__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
+              states.map((state) => renderStateNode ? /* @__PURE__ */ jsx(React125__default.Fragment, { children: renderStateNode(state, config) }, state.id) : /* @__PURE__ */ jsx(
                 StateNode,
                 {
                   state,
@@ -28513,7 +28560,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React124.useCallback(() => {
+  const handleCraft = React125.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -28530,7 +28577,7 @@ function CraftingRecipe({
       children: [
         /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap items-center", children: inputs.map((ingredient, index) => {
           const hasSufficient = ingredient.available >= ingredient.required;
-          return /* @__PURE__ */ jsxs(React124.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React125.Fragment, { children: [
             /* @__PURE__ */ jsx(Box, { className: "relative", children: /* @__PURE__ */ jsx(
               ItemSlot,
               {
@@ -28819,8 +28866,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap15[size];
-  const [activeDirections, setActiveDirections] = React124.useState(/* @__PURE__ */ new Set());
-  const handlePress = React124.useCallback(
+  const [activeDirections, setActiveDirections] = React125.useState(/* @__PURE__ */ new Set());
+  const handlePress = React125.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -28828,7 +28875,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React124.useCallback(
+  const handleRelease = React125.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -29639,7 +29686,7 @@ var DataList = ({
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [visibleCount, setVisibleCount] = React124__default.useState(pageSize || Infinity);
+  const [visibleCount, setVisibleCount] = React125__default.useState(pageSize || Infinity);
   const fields = fieldsProp ?? columnsProp ?? [];
   const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
@@ -29676,7 +29723,7 @@ var DataList = ({
     const items2 = data.map((item) => item);
     const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
     const contentField = titleField?.name ?? fields[0]?.name ?? "";
-    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
       group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
       group.items.map((itemData, index) => {
         const id = itemData.id || `${gi}-${index}`;
@@ -29879,7 +29926,7 @@ var DataList = ({
         className
       ),
       children: [
-        groups.map((group, gi) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+        groups.map((group, gi) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
           group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
           group.items.map(
             (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
@@ -30946,7 +30993,7 @@ var WizardProgress = ({
       children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((step, index) => {
         const isActive = index === currentStep;
         const isCompleted = index < currentStep;
-        return /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -31722,7 +31769,7 @@ var sizeMap17 = {
   lg: "text-base px-4 py-2"
 };
 var variantMap2 = {
-  default: "bg-gray-800/80 border-gray-700",
+  default: "bg-[var(--color-card)]/80 border-gray-700",
   primary: "bg-blue-900/80 border-blue-700",
   success: "bg-green-900/80 border-green-700",
   warning: "bg-yellow-900/80 border-yellow-700",
@@ -31783,7 +31830,7 @@ function StatBadge({
             animated: true
           }
         ),
-        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-white", children: value })
+        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-[var(--color-foreground)]", children: value })
       ]
     }
   );
@@ -31816,7 +31863,7 @@ function InventoryGrid({
   const eventBus = useEventBus();
   const slotCount = totalSlots ?? items.length;
   const emptySlotCount = Math.max(0, slotCount - items.length);
-  const handleSelect = React124.useCallback(
+  const handleSelect = React125.useCallback(
     (id) => {
       onSelect?.(id);
       if (selectEvent) {
@@ -32005,15 +32052,15 @@ function GameCanvas2D({
   fps = 60,
   className
 }) {
-  const canvasRef = React124.useRef(null);
-  const rafRef = React124.useRef(0);
-  const frameRef = React124.useRef(0);
-  const lastTimeRef = React124.useRef(0);
-  const onDrawRef = React124.useRef(onDraw);
+  const canvasRef = React125.useRef(null);
+  const rafRef = React125.useRef(0);
+  const frameRef = React125.useRef(0);
+  const lastTimeRef = React125.useRef(0);
+  const onDrawRef = React125.useRef(onDraw);
   onDrawRef.current = onDraw;
-  const onTickRef = React124.useRef(onTick);
+  const onTickRef = React125.useRef(onTick);
   onTickRef.current = onTick;
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -32082,7 +32129,7 @@ function HealthPanel({
     Box,
     {
       className: cn(
-        "rounded-lg bg-gray-900/90 border border-gray-700 backdrop-blur-sm",
+        "rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm",
         sizes.padding,
         className
       ),
@@ -32188,7 +32235,7 @@ function ScoreBoard({
     Card,
     {
       className: cn(
-        "bg-gray-900/90 border-gray-700 backdrop-blur-sm",
+        "bg-[var(--color-card)]/90 border-gray-700 backdrop-blur-sm",
         className
       ),
       children: /* @__PURE__ */ jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-3 flex-wrap", children: [
@@ -32284,7 +32331,7 @@ function TurnPanel({
   className
 }) {
   const eventBus = useEventBus();
-  const handleAction = React124.useCallback(
+  const handleAction = React125.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { turn: currentTurn, phase, activeTeam });
@@ -32296,7 +32343,7 @@ function TurnPanel({
     Box,
     {
       className: cn(
-        "flex items-center gap-3 rounded-lg bg-gray-900/90 border border-gray-700 backdrop-blur-sm px-3 py-2",
+        "flex items-center gap-3 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-3 py-2",
         className
       ),
       children: [
@@ -32348,7 +32395,7 @@ function EnemyPlate({
     Box,
     {
       className: cn(
-        "inline-flex flex-col gap-1 rounded-lg bg-gray-900/90 border border-gray-700 backdrop-blur-sm px-3 py-1.5",
+        "inline-flex flex-col gap-1 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-3 py-1.5",
         "min-w-[120px]",
         className
       ),
@@ -32359,7 +32406,7 @@ function EnemyPlate({
             {
               variant: "caption",
               weight: "bold",
-              className: "text-white truncate",
+              className: "text-[var(--color-foreground)] truncate",
               children: name
             }
           ),
@@ -32420,7 +32467,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React124.useCallback(
+  const handleCommand = React125.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -32432,7 +32479,7 @@ function UnitCommandBar({
     Box,
     {
       className: cn(
-        "flex items-center gap-1.5 rounded-lg bg-gray-900/90 border border-gray-700 backdrop-blur-sm px-2 py-1.5",
+        "flex items-center gap-1.5 rounded-lg bg-[var(--color-card)]/90 border border-gray-700 backdrop-blur-sm px-2 py-1.5",
         className
       ),
       children: commands.map((command, i) => /* @__PURE__ */ jsxs(Box, { className: "flex flex-col items-center gap-0.5", children: [
@@ -32666,7 +32713,7 @@ function DialogueBox({
       tabIndex: 0,
       role: "dialog",
       "aria-label": "Dialogue",
-      children: /* @__PURE__ */ jsx("div", { className: "mx-4 my-4 bg-gray-900 bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+      children: /* @__PURE__ */ jsx("div", { className: "mx-4 my-4 bg-[var(--color-card)] bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
         dialogue.portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-r border-gray-700", children: /* @__PURE__ */ jsx(
           "img",
           {
@@ -32678,7 +32725,7 @@ function DialogueBox({
         ) }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4", children: [
           /* @__PURE__ */ jsx("div", { className: "text-yellow-400 font-bold mb-2", children: dialogue.speaker }),
-          /* @__PURE__ */ jsxs("div", { className: "text-white text-lg leading-relaxed min-h-[60px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[var(--color-foreground)] text-lg leading-relaxed min-h-[60px]", children: [
             displayedText,
             isTyping && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "\u258C" })
           ] }),
@@ -32688,8 +32735,8 @@ function DialogueBox({
               type: "button",
               className: cn(
                 "block w-full text-left px-4 py-2 rounded transition-colors",
-                "hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400",
-                selectedChoice === index ? "bg-gray-700 text-yellow-400" : "bg-gray-800 text-white"
+                "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-yellow-400",
+                selectedChoice === index ? "bg-[var(--color-surface,#374151)] text-yellow-400" : "bg-[var(--color-card)] text-[var(--color-foreground)]"
               ),
               onClick: (e) => {
                 e.stopPropagation();
@@ -32806,7 +32853,7 @@ function InventoryPanel({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "grid gap-1 bg-gray-900 p-2 rounded-lg border border-gray-700",
+        className: "grid gap-1 bg-[var(--color-card)] p-2 rounded-lg border border-gray-700",
         style: {
           gridTemplateColumns: `repeat(${safeColumns}, ${slotSize}px)`,
           gridTemplateRows: `repeat(${rows}, ${slotSize}px)`
@@ -32817,9 +32864,9 @@ function InventoryPanel({
             type: "button",
             className: cn(
               "relative flex items-center justify-center",
-              "bg-gray-800 border rounded transition-colors",
-              "hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500",
-              selectedSlot === index ? "border-yellow-400 bg-gray-700" : "border-gray-600"
+              "bg-[var(--color-card)] border rounded transition-colors",
+              "hover:bg-[var(--color-surface,#374151)] focus:outline-none focus:ring-2 focus:ring-blue-500",
+              selectedSlot === index ? "border-yellow-400 bg-[var(--color-surface,#374151)]" : "border-gray-600"
             ),
             style: { width: slotSize, height: slotSize },
             onClick: () => handleSlotClick(index),
@@ -32849,14 +32896,14 @@ function InventoryPanel({
     showTooltips && hoveredItem && /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "fixed z-50 bg-gray-900 border border-gray-600 rounded-lg p-2 shadow-lg pointer-events-none",
+        className: "fixed z-50 bg-[var(--color-card)] border border-gray-600 rounded-lg p-2 shadow-lg pointer-events-none",
         style: {
           left: tooltipPosition.x,
           top: tooltipPosition.y,
           maxWidth: 200
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "font-semibold text-white", children: hoveredItem.name || hoveredItem.type }),
+          /* @__PURE__ */ jsx("div", { className: "font-semibold text-[var(--color-foreground)]", children: hoveredItem.name || hoveredItem.type }),
           hoveredItem.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-400 mt-1", children: hoveredItem.description }),
           /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
             "Quantity: ",
@@ -32872,9 +32919,9 @@ function InventoryPanel({
 init_cn();
 init_useEventBus();
 var variantMap3 = {
-  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400 shadow-lg shadow-blue-500/25",
-  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
-  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20"
+  primary: "bg-[var(--color-primary)] hover:bg-blue-500 text-[var(--color-primary-foreground)] border-blue-400 shadow-lg shadow-blue-500/25",
+  secondary: "bg-[var(--color-surface,#374151)] hover:bg-gray-600 text-[var(--color-foreground)] border-gray-500",
+  ghost: "bg-transparent hover:bg-white/10 text-[var(--color-foreground)] border-white/20"
 };
 function GameMenu({
   title,
@@ -32894,7 +32941,7 @@ function GameMenu({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleOptionClick = React124.useCallback(
+  const handleOptionClick = React125.useCallback(
     (option) => {
       if (option.event && eventBus) {
         eventBus.emit(`UI:${option.event}`, { option });
@@ -32931,7 +32978,7 @@ function GameMenu({
           /* @__PURE__ */ jsx(
             "h1",
             {
-              className: "text-5xl md:text-7xl font-bold text-white tracking-tight",
+              className: "text-5xl md:text-7xl font-bold text-[var(--color-foreground)] tracking-tight",
               style: {
                 textShadow: "0 4px 12px rgba(0,0,0,0.5)"
               },
@@ -32991,9 +33038,9 @@ var variantColors = {
   }
 };
 var buttonVariants = {
-  primary: "bg-blue-600 hover:bg-blue-500 text-white border-blue-400",
-  secondary: "bg-gray-700 hover:bg-gray-600 text-white border-gray-500",
-  ghost: "bg-transparent hover:bg-white/10 text-white border-white/20"
+  primary: "bg-[var(--color-primary)] hover:bg-blue-500 text-[var(--color-primary-foreground)] border-blue-400",
+  secondary: "bg-[var(--color-surface,#374151)] hover:bg-gray-600 text-[var(--color-foreground)] border-gray-500",
+  ghost: "bg-transparent hover:bg-white/10 text-[var(--color-foreground)] border-white/20"
 };
 function formatTime3(ms) {
   const seconds = Math.floor(ms / 1e3);
@@ -33021,7 +33068,7 @@ function GameOverScreen({
   } catch {
   }
   const eventBus = eventBusProp || eventBusFromHook;
-  const handleActionClick = React124.useCallback(
+  const handleActionClick = React125.useCallback(
     (action) => {
       if (action.event && eventBus) {
         eventBus.emit(`UI:${action.event}`, { action });
@@ -33074,7 +33121,7 @@ function GameOverScreen({
               }
               return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
                 /* @__PURE__ */ jsx("div", { className: "text-gray-400 text-sm mb-1", children: stat.label }),
-                /* @__PURE__ */ jsxs("div", { className: "text-white text-2xl font-bold flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxs("div", { className: "text-[var(--color-foreground)] text-2xl font-bold flex items-center justify-center gap-2", children: [
                   stat.icon && /* @__PURE__ */ jsx("span", { children: stat.icon }),
                   /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: displayValue })
                 ] })
@@ -34269,7 +34316,7 @@ var Lightbox = ({
             className: cn(
               "absolute top-4 right-4 z-10",
               "p-2 rounded-full",
-              "text-white bg-black bg-opacity-50",
+              "text-[var(--color-foreground)] bg-[var(--color-card)]",
               "hover:bg-opacity-70 transition-opacity",
               "focus:outline-none focus:ring-2 focus:ring-white"
             ),
@@ -34288,7 +34335,7 @@ var Lightbox = ({
             className: cn(
               "absolute left-4 z-10",
               "p-2 rounded-full",
-              "text-white bg-black bg-opacity-50",
+              "text-[var(--color-foreground)] bg-[var(--color-card)]",
               "hover:bg-opacity-70 transition-opacity",
               "focus:outline-none focus:ring-2 focus:ring-white"
             ),
@@ -34325,7 +34372,7 @@ var Lightbox = ({
             className: cn(
               "absolute right-4 z-10",
               "p-2 rounded-full",
-              "text-white bg-black bg-opacity-50",
+              "text-[var(--color-foreground)] bg-[var(--color-card)]",
               "hover:bg-opacity-70 transition-opacity",
               "focus:outline-none focus:ring-2 focus:ring-white"
             ),
@@ -34334,12 +34381,12 @@ var Lightbox = ({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-0 right-0 text-center", children: [
-          showCounter && safeImages.length > 1 && /* @__PURE__ */ jsxs("div", { className: "text-white text-sm mb-1", children: [
+          showCounter && safeImages.length > 1 && /* @__PURE__ */ jsxs("div", { className: "text-[var(--color-foreground)] text-sm mb-1", children: [
             index + 1,
             " of ",
             safeImages.length
           ] }),
-          currentImage?.caption && /* @__PURE__ */ jsx("div", { className: "text-white text-sm opacity-80 px-8", children: currentImage.caption })
+          currentImage?.caption && /* @__PURE__ */ jsx("div", { className: "text-[var(--color-foreground)] text-sm opacity-80 px-8", children: currentImage.caption })
         ] })
       ]
     }
@@ -36426,7 +36473,7 @@ var DocumentViewer = ({
 DocumentViewer.displayName = "DocumentViewer";
 init_useEventBus();
 function extractTitle(children) {
-  if (!React124__default.isValidElement(children)) return void 0;
+  if (!React125__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -36486,7 +36533,7 @@ function LinearView({
     /* @__PURE__ */ jsx(HStack, { className: "flex-wrap items-center", gap: "xs", children: trait.states.map((state, i) => {
       const isDone = i < currentIdx;
       const isCurrent = i === currentIdx;
-      return /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
         i > 0 && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -37162,7 +37209,7 @@ var Form = ({
   const normalizedInitialData = initialData ?? {};
   const resolvedEntity = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-  const entityDerivedFields = React124__default.useMemo(() => {
+  const entityDerivedFields = React125__default.useMemo(() => {
     if (fields && fields.length > 0) return void 0;
     if (!resolvedEntity) return void 0;
     return resolvedEntity.fields.map(
@@ -37181,14 +37228,14 @@ var Form = ({
   const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
   const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
   const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-  const [formData, setFormData] = React124__default.useState(
+  const [formData, setFormData] = React125__default.useState(
     normalizedInitialData
   );
-  const [collapsedSections, setCollapsedSections] = React124__default.useState(
+  const [collapsedSections, setCollapsedSections] = React125__default.useState(
     /* @__PURE__ */ new Set()
   );
   const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-  const evalContext = React124__default.useMemo(
+  const evalContext = React125__default.useMemo(
     () => ({
       formValues: formData,
       globalVariables: externalContext?.globalVariables ?? {},
@@ -37197,13 +37244,13 @@ var Form = ({
     }),
     [formData, externalContext]
   );
-  React124__default.useEffect(() => {
+  React125__default.useEffect(() => {
     const data = initialData;
     if (data && Object.keys(data).length > 0) {
       setFormData(data);
     }
   }, [initialData]);
-  const processCalculations = React124__default.useCallback(
+  const processCalculations = React125__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!hiddenCalculations.length) return;
       const context = {
@@ -37228,7 +37275,7 @@ var Form = ({
     },
     [hiddenCalculations, externalContext, eventBus]
   );
-  const checkViolations = React124__default.useCallback(
+  const checkViolations = React125__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!violationTriggers.length) return;
       const context = {
@@ -37265,7 +37312,7 @@ var Form = ({
     processCalculations(name, newFormData);
     checkViolations(name, newFormData);
   };
-  const isFieldVisible = React124__default.useCallback(
+  const isFieldVisible = React125__default.useCallback(
     (fieldName) => {
       const condition = conditionalFields[fieldName];
       if (!condition) return true;
@@ -37273,7 +37320,7 @@ var Form = ({
     },
     [conditionalFields, evalContext]
   );
-  const isSectionVisible = React124__default.useCallback(
+  const isSectionVisible = React125__default.useCallback(
     (section) => {
       if (!section.condition) return true;
       return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -37305,7 +37352,7 @@ var Form = ({
       eventBus.emit(`UI:${onCancel}`);
     }
   };
-  const renderField = React124__default.useCallback(
+  const renderField = React125__default.useCallback(
     (field) => {
       const fieldName = field.name || field.field;
       if (!fieldName) return null;
@@ -37326,7 +37373,7 @@ var Form = ({
     [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
   );
   const effectiveFields = entityDerivedFields ?? fields;
-  const normalizedFields = React124__default.useMemo(() => {
+  const normalizedFields = React125__default.useMemo(() => {
     if (!effectiveFields || effectiveFields.length === 0) return [];
     return effectiveFields.map((field) => {
       if (typeof field === "string") {
@@ -37348,7 +37395,7 @@ var Form = ({
       return field;
     });
   }, [effectiveFields, resolvedEntity]);
-  const schemaFields = React124__default.useMemo(() => {
+  const schemaFields = React125__default.useMemo(() => {
     if (normalizedFields.length === 0) return null;
     if (isDebugEnabled()) {
       debugGroup(`Form: ${entityName || "unknown"}`);
@@ -37358,7 +37405,7 @@ var Form = ({
     }
     return normalizedFields.map(renderField).filter(Boolean);
   }, [normalizedFields, renderField, entityName, conditionalFields]);
-  const sectionElements = React124__default.useMemo(() => {
+  const sectionElements = React125__default.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return sections.map((section) => {
       if (!isSectionVisible(section)) {
@@ -38796,7 +38843,7 @@ var List2 = ({
     if (entity && typeof entity === "object" && "id" in entity) return [entity];
     return [];
   }, [entity]);
-  const getItemActions = React124__default.useCallback(
+  const getItemActions = React125__default.useCallback(
     (item) => {
       if (!itemActions) return [];
       if (typeof itemActions === "function") {
@@ -39231,7 +39278,7 @@ var MediaGallery = ({
     [selectable, selectedItems, selectionEvent, eventBus]
   );
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React124__default.useMemo(() => {
+  const items = React125__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => ({
@@ -39394,7 +39441,7 @@ var MediaGallery = ({
 MediaGallery.displayName = "MediaGallery";
 init_useEventBus();
 function extractTitle2(children) {
-  if (!React124__default.isValidElement(children)) return void 0;
+  if (!React125__default.isValidElement(children)) return void 0;
   const props = children.props;
   if (typeof props.title === "string") {
     return props.title;
@@ -40080,7 +40127,7 @@ var PageHeader = ({
     info: "bg-info/10 text-info"
   };
   return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
       idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
@@ -40239,7 +40286,7 @@ function subscribeToDebugEvents(listener) {
 
 // components/organisms/debug/hooks/useDebugData.ts
 function useDebugData() {
-  const [data, setData] = React124.useState(() => ({
+  const [data, setData] = React125.useState(() => ({
     traits: [],
     ticks: [],
     guards: [],
@@ -40253,7 +40300,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -40310,6 +40357,259 @@ function onDebugToggle(listener) {
 // components/organisms/debug/RuntimeDebugger.tsx
 init_Typography();
 
+// components/organisms/debug/WalkMinimap.tsx
+init_Box();
+init_Stack();
+init_Typography();
+function layoutGraph(states, transitions, initialState, width, height) {
+  if (states.length === 0) return [];
+  const layers = /* @__PURE__ */ new Map();
+  const queue = [initialState];
+  layers.set(initialState, 0);
+  while (queue.length > 0) {
+    const current = queue.shift();
+    const layer = layers.get(current);
+    for (const tr of transitions) {
+      if (tr.from === current && !layers.has(tr.to)) {
+        layers.set(tr.to, layer + 1);
+        queue.push(tr.to);
+      }
+    }
+  }
+  for (const s of states) {
+    if (!layers.has(s)) layers.set(s, layers.size > 0 ? Math.max(...layers.values()) + 1 : 0);
+  }
+  const layerGroups = /* @__PURE__ */ new Map();
+  for (const [state, layer] of layers) {
+    const group = layerGroups.get(layer) ?? [];
+    group.push(state);
+    layerGroups.set(layer, group);
+  }
+  const maxLayer = Math.max(...layerGroups.keys(), 0);
+  const padX = 24;
+  const padY = 20;
+  const usableW = width - padX * 2;
+  const usableH = height - padY * 2;
+  const positions = [];
+  for (const [layer, group] of layerGroups) {
+    const y = maxLayer === 0 ? usableH / 2 + padY : padY + layer / maxLayer * usableH;
+    for (let i = 0; i < group.length; i++) {
+      const x = group.length === 1 ? width / 2 : padX + i / (group.length - 1) * usableW;
+      positions.push({ x, y, state: group[i] });
+    }
+  }
+  return positions;
+}
+function WalkMinimap() {
+  const [walkStep, setWalkStep] = React125.useState(null);
+  const [traits2, setTraits] = React125.useState([]);
+  const [coveredEdges, setCoveredEdges] = React125.useState([]);
+  const [completedTraits, setCompletedTraits] = React125.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React125.useRef(null);
+  React125.useEffect(() => {
+    const interval = setInterval(() => {
+      const w = window;
+      const step = w.__orbitalWalkStep;
+      const traitConfigs = w.__orbitalWalkTraits;
+      const edges = w.__orbitalCoveredEdges;
+      if (step) setWalkStep(step);
+      if (traitConfigs) setTraits(traitConfigs);
+      if (edges) setCoveredEdges(edges);
+      if (step && prevTraitRef.current && prevTraitRef.current !== step.traitName) {
+        setCompletedTraits((prev) => new Set(prev).add(prevTraitRef.current));
+      }
+      if (step) prevTraitRef.current = step.traitName;
+    }, 250);
+    return () => clearInterval(interval);
+  }, []);
+  if (!walkStep || traits2.length === 0) return null;
+  const activeTrait = traits2.find((t) => t.name === walkStep.traitName);
+  const engineCount = coveredEdges.filter((e) => e.phase === "engine").length;
+  const domCount = coveredEdges.filter((e) => e.phase === "dom").length;
+  const totalTransitions = traits2.reduce((sum, t) => sum + t.transitions.length, 0);
+  const activeEdgeKeys = new Set(
+    coveredEdges.filter((e) => e.trait === walkStep.traitName).map((e) => `${e.from}+${e.event}->${e.to}`)
+  );
+  const activeEdgePhases = new Map(
+    coveredEdges.filter((e) => e.trait === walkStep.traitName).map((e) => [`${e.from}+${e.event}->${e.to}`, e.phase])
+  );
+  const currentEdgeKey = `${walkStep.from}+${walkStep.event}->${walkStep.to}`;
+  const graphW = 260;
+  const graphH = 120;
+  const nodeR = 10;
+  const positions = activeTrait ? layoutGraph(activeTrait.states, activeTrait.transitions, activeTrait.initialState, graphW, graphH) : [];
+  const posMap = new Map(positions.map((p2) => [p2.state, p2]));
+  const visitedStates = new Set(
+    coveredEdges.filter((e) => e.trait === walkStep.traitName).flatMap((e) => [e.from, e.to])
+  );
+  return /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "w-64 flex-shrink-0 border-l border-border bg-[var(--color-card)] overflow-hidden", children: [
+    /* @__PURE__ */ jsx(Box, { className: "px-2 py-1.5 border-b border-border overflow-x-auto", children: /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-nowrap", children: traits2.map((t) => {
+      const isDone = completedTraits.has(t.name);
+      const isActive = t.name === walkStep.traitName;
+      const variant = isDone ? "success" : isActive ? "info" : "neutral";
+      const shortName = t.name.replace(/^[A-Z][a-z]+/, "");
+      return /* @__PURE__ */ jsxs(
+        Badge,
+        {
+          variant,
+          size: "sm",
+          className: `flex-shrink-0 text-[9px] ${isActive ? "ring-1 ring-cyan-400" : ""}`,
+          children: [
+            isDone ? "\u2713" : isActive ? "\u25CF" : "\u25CB",
+            " ",
+            shortName || t.name
+          ]
+        },
+        t.name
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx(Box, { className: "flex-1 flex items-center justify-center px-1 py-1", children: activeTrait && /* @__PURE__ */ jsxs("svg", { width: graphW, height: graphH, viewBox: `0 0 ${graphW} ${graphH}`, children: [
+      /* @__PURE__ */ jsxs("defs", { children: [
+        /* @__PURE__ */ jsx("marker", { id: "mm-arrow", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#888" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "mm-arrow-green", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#22c55e" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "mm-arrow-cyan", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#06b6d4" }) }),
+        /* @__PURE__ */ jsx("marker", { id: "mm-arrow-yellow", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#eab308" }) })
+      ] }),
+      activeTrait.transitions.map((tr, i) => {
+        const fromPos = posMap.get(tr.from);
+        const toPos = posMap.get(tr.to);
+        if (!fromPos || !toPos) return null;
+        const key = `${tr.from}+${tr.event}->${tr.to}`;
+        const isCurrent = key === currentEdgeKey && !walkStep.isRepositioning;
+        const isCovered = activeEdgeKeys.has(key);
+        const phase = activeEdgePhases.get(key);
+        let stroke = "#555";
+        let markerEnd = "url(#mm-arrow)";
+        let strokeWidth = 1;
+        let opacity = 0.4;
+        if (isCurrent) {
+          stroke = "#eab308";
+          markerEnd = "url(#mm-arrow-yellow)";
+          strokeWidth = 2.5;
+          opacity = 1;
+        } else if (isCovered && phase === "dom") {
+          stroke = "#06b6d4";
+          markerEnd = "url(#mm-arrow-cyan)";
+          strokeWidth = 1.5;
+          opacity = 0.9;
+        } else if (isCovered) {
+          stroke = "#22c55e";
+          markerEnd = "url(#mm-arrow-green)";
+          strokeWidth = 1.5;
+          opacity = 0.9;
+        }
+        if (tr.from === tr.to) {
+          const cx = fromPos.x;
+          const cy = fromPos.y - nodeR - 8;
+          return /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: `M${cx - 5},${fromPos.y - nodeR} C${cx - 18},${cy - 14} ${cx + 18},${cy - 14} ${cx + 5},${fromPos.y - nodeR}`,
+                fill: "none",
+                stroke,
+                strokeWidth,
+                opacity,
+                markerEnd
+              }
+            ),
+            /* @__PURE__ */ jsx("text", { x: cx, y: cy - 12, textAnchor: "middle", fontSize: "7", fill: stroke, opacity, children: tr.event.length > 10 ? tr.event.slice(0, 8) + ".." : tr.event })
+          ] }, `e-${i}`);
+        }
+        const dx = toPos.x - fromPos.x;
+        const dy = toPos.y - fromPos.y;
+        const len = Math.sqrt(dx * dx + dy * dy) || 1;
+        const nx = -dy / len;
+        const ny = dx / len;
+        const hasReverse = activeTrait.transitions.some(
+          (t2) => t2.from === tr.to && t2.to === tr.from
+        );
+        const offset = hasReverse ? 4 : 0;
+        const x1 = fromPos.x + dx / len * nodeR + nx * offset;
+        const y1 = fromPos.y + dy / len * nodeR + ny * offset;
+        const x2 = toPos.x - dx / len * (nodeR + 6) + nx * offset;
+        const y2 = toPos.y - dy / len * (nodeR + 6) + ny * offset;
+        const mx = (x1 + x2) / 2 + nx * 8;
+        const my = (y1 + y2) / 2 + ny * 8;
+        return /* @__PURE__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1,
+              y1,
+              x2,
+              y2,
+              stroke,
+              strokeWidth,
+              opacity,
+              markerEnd,
+              children: isCurrent && /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "1;0.4;1", dur: "0.8s", repeatCount: "indefinite" })
+            }
+          ),
+          /* @__PURE__ */ jsx("text", { x: mx, y: my, textAnchor: "middle", fontSize: "7", fill: stroke, opacity: Math.min(opacity + 0.2, 1), children: tr.event.length > 12 ? tr.event.slice(0, 10) + ".." : tr.event })
+        ] }, `e-${i}`);
+      }),
+      positions.map((pos) => {
+        const isCurrentState = pos.state === walkStep.from || pos.state === walkStep.to;
+        const isVisited = visitedStates.has(pos.state);
+        const isInitial = pos.state === activeTrait.initialState;
+        let fill = "#333";
+        let strokeColor = "#555";
+        let sw = 1;
+        if (isCurrentState) {
+          fill = "#1e40af";
+          strokeColor = "#3b82f6";
+          sw = 2;
+        } else if (isVisited) {
+          fill = "#166534";
+          strokeColor = "#22c55e";
+          sw = 1.5;
+        }
+        return /* @__PURE__ */ jsxs("g", { children: [
+          isInitial && /* @__PURE__ */ jsx("circle", { cx: pos.x, cy: pos.y, r: nodeR + 3, fill: "none", stroke: "#3b82f6", strokeWidth: 1, opacity: 0.4 }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: pos.x,
+              cy: pos.y,
+              r: nodeR,
+              fill,
+              stroke: strokeColor,
+              strokeWidth: sw,
+              children: isCurrentState && /* @__PURE__ */ jsx("animate", { attributeName: "r", values: `${nodeR};${nodeR + 2};${nodeR}`, dur: "1s", repeatCount: "indefinite" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: pos.x,
+              y: pos.y + nodeR + 10,
+              textAnchor: "middle",
+              fontSize: "8",
+              fill: "#aaa",
+              children: pos.state.length > 10 ? pos.state.slice(0, 8) + ".." : pos.state
+            }
+          )
+        ] }, pos.state);
+      })
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-green-500", children: [
+        "Engine: ",
+        engineCount,
+        "/",
+        totalTransitions
+      ] }),
+      domCount > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-cyan-500", children: [
+        "DOM: ",
+        domCount
+      ] }),
+      /* @__PURE__ */ jsx(Badge, { variant: walkStep.phase === "engine" ? "info" : "warning", size: "sm", className: "text-[9px]", children: walkStep.phase === "engine" ? "Engine" : "DOM" })
+    ] }) })
+  ] });
+}
+WalkMinimap.displayName = "WalkMinimap";
+
 // components/organisms/debug/tabs/TraitsTab.tsx
 init_Typography();
 init_Stack();
@@ -40538,15 +40838,15 @@ var TYPE_BADGES = {
   state: { variant: "danger", icon: "\u{1F4CA}" }
 };
 function EventFlowTab({ events: events2 }) {
-  const [filter, setFilter] = React124.useState("all");
-  const containerRef = React124.useRef(null);
-  const [autoScroll, setAutoScroll] = React124.useState(true);
-  React124.useEffect(() => {
+  const [filter, setFilter] = React125.useState("all");
+  const containerRef = React125.useRef(null);
+  const [autoScroll, setAutoScroll] = React125.useState(true);
+  React125.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
   }, [events2.length, autoScroll]);
-  const filteredEvents = React124.useMemo(() => {
+  const filteredEvents = React125.useMemo(() => {
     if (filter === "all") return events2;
     return events2.filter((e) => e.type === filter);
   }, [events2, filter]);
@@ -40647,7 +40947,7 @@ EventFlowTab.displayName = "EventFlowTab";
 init_Typography();
 init_Stack();
 function GuardsPanel({ guards }) {
-  const [filter, setFilter] = React124.useState("all");
+  const [filter, setFilter] = React125.useState("all");
   if (guards.length === 0) {
     return /* @__PURE__ */ jsx(
       EmptyState,
@@ -40660,7 +40960,7 @@ function GuardsPanel({ guards }) {
   }
   const passedCount = guards.filter((g) => g.result).length;
   const failedCount = guards.length - passedCount;
-  const filteredGuards = React124.useMemo(() => {
+  const filteredGuards = React125.useMemo(() => {
     if (filter === "all") return guards;
     if (filter === "passed") return guards.filter((g) => g.result);
     return guards.filter((g) => !g.result);
@@ -40809,10 +41109,10 @@ function EffectBadge({ effect }) {
   ] });
 }
 function TransitionTimeline({ transitions }) {
-  const containerRef = React124.useRef(null);
-  const [autoScroll, setAutoScroll] = React124.useState(true);
-  const [expandedId, setExpandedId] = React124.useState(null);
-  React124.useEffect(() => {
+  const containerRef = React125.useRef(null);
+  const [autoScroll, setAutoScroll] = React125.useState(true);
+  const [expandedId, setExpandedId] = React125.useState(null);
+  React125.useEffect(() => {
     if (autoScroll && containerRef.current) {
       containerRef.current.scrollTop = containerRef.current.scrollHeight;
     }
@@ -41080,9 +41380,9 @@ function getAllEvents(traits2) {
 }
 function EventDispatcherTab({ traits: traits2, schema }) {
   const eventBus = useEventBus();
-  const [log, setLog] = React124.useState([]);
-  const prevStatesRef = React124.useRef(/* @__PURE__ */ new Map());
-  React124.useEffect(() => {
+  const [log, setLog] = React125.useState([]);
+  const prevStatesRef = React125.useRef(/* @__PURE__ */ new Map());
+  React125.useEffect(() => {
     for (const trait of traits2) {
       const prev = prevStatesRef.current.get(trait.id);
       if (prev && prev !== trait.currentState) {
@@ -41159,25 +41459,25 @@ function EventDispatcherTab({ traits: traits2, schema }) {
 EventDispatcherTab.displayName = "EventDispatcherTab";
 function ServerResponseRow({ sr }) {
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-700/50 py-0.5 text-[10px] font-mono", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-[10px] font-mono", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-green-400" : "text-red-400", children: [
+      /* @__PURE__ */ jsxs("span", { className: sr.success ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", children: [
         sr.success ? "\u2713" : "\u2717",
         " server"
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-purple-300", children: sr.orbitalName }),
-      sr.clientEffects > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-purple-900/50 text-purple-300", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-300", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-purple-500/15 text-purple-600 dark:text-purple-300", children: [
         sr.clientEffects,
         " clientEffect",
         sr.clientEffects !== 1 ? "s" : ""
       ] }),
-      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-blue-900/50 text-blue-300", children: [
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-blue-500/15 text-blue-300", children: [
         "emit: ",
         sr.emittedEvents.join(", ")
       ] }),
-      sr.error && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-red-900/50 text-red-400 truncate max-w-[300px]", children: sr.error })
+      sr.error && /* @__PURE__ */ jsx("span", { className: "px-1 rounded bg-red-500/15 text-red-600 dark:text-red-400 truncate max-w-[300px]", children: sr.error })
     ] }),
-    entityEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-gray-800 text-gray-300", children: [
+    entityEntries.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxs("span", { className: "px-1 rounded bg-[var(--color-card)] text-foreground", children: [
       name,
       ": ",
       count,
@@ -41190,24 +41490,24 @@ function TransitionRow({ trace }) {
   const isServerEntry = !!trace.serverResponse && trace.traitName.startsWith("server:");
   const hasFailedEffects = trace.effects.some((e) => e.status === "failed");
   if (isServerEntry && trace.serverResponse) {
-    return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
         /* @__PURE__ */ jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
         /* @__PURE__ */ jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
-        /* @__PURE__ */ jsx("span", { className: "text-purple-400 flex-shrink-0", children: "server response" })
+        /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400 flex-shrink-0", children: "server response" })
       ] }),
       /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
       /* @__PURE__ */ jsx("span", { className: cn(
         "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0",
         hasFailedEffects ? "bg-red-500" : "bg-green-500"
       ) }),
       /* @__PURE__ */ jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
-      /* @__PURE__ */ jsx("span", { className: "text-gray-300 flex-shrink-0", children: trace.traitName }),
-      /* @__PURE__ */ jsxs("span", { className: "text-gray-400 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-foreground flex-shrink-0", children: trace.traitName }),
+      /* @__PURE__ */ jsxs("span", { className: "text-foreground/70 flex-shrink-0", children: [
         trace.from,
         " ",
         "\u2192",
@@ -41217,12 +41517,12 @@ function TransitionRow({ trace }) {
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxs("span", { className: cn(
       "px-1 rounded text-[10px]",
-      eff.status === "executed" ? "bg-green-900/50 text-green-400" : eff.status === "failed" ? "bg-red-900/50 text-red-400" : "bg-yellow-900/50 text-yellow-400"
+      eff.status === "executed" ? "bg-green-500/15 text-green-600 dark:text-green-400" : eff.status === "failed" ? "bg-red-500/15 text-red-600 dark:text-red-400" : "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400"
     ), children: [
       eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
       " ",
       eff.type,
-      eff.args.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-500 ml-0.5", children: JSON.stringify(eff.args).slice(0, 40) })
+      eff.args.length > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground/50 ml-0.5", children: JSON.stringify(eff.args).slice(0, 40) })
     ] }, i)) }),
     trace.serverResponse && /* @__PURE__ */ jsx(ServerResponseRow, { sr: trace.serverResponse })
   ] });
@@ -41235,18 +41535,9 @@ function VerifyModePanel({
   serverCount,
   localCount
 }) {
-  const scrollRef = React124.useRef(null);
-  const prevCountRef = React124.useRef(0);
-  const [walkStep, setWalkStep] = React124.useState(null);
-  React124.useEffect(() => {
-    const interval = setInterval(() => {
-      const w = window;
-      const step = w.__orbitalWalkStep;
-      if (step) setWalkStep(step);
-    }, 300);
-    return () => clearInterval(interval);
-  }, []);
-  React124.useEffect(() => {
+  const scrollRef = React125.useRef(null);
+  const prevCountRef = React125.useRef(0);
+  React125.useEffect(() => {
     if (transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -41258,49 +41549,28 @@ function VerifyModePanel({
     {
       className: cn(
         "runtime-debugger runtime-debugger--verify",
-        "flex flex-col bg-gray-900 text-white border-t-2 border-cyan-500",
+        "flex flex-col bg-[var(--color-card)] text-[var(--color-foreground)] border-t-2 border-cyan-500",
         hudBottom ? "" : "fixed bottom-0 left-0 right-0",
         className
       ),
       "data-testid": "debugger-verify",
       style: { height: "25vh", zIndex: hudBottom ? void 0 : 40 },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-3 text-xs font-mono border-b border-gray-700 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 flex items-center gap-3 text-xs font-mono border-b border-border flex-shrink-0", children: [
           /* @__PURE__ */ jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
-          /* @__PURE__ */ jsxs("span", { className: "text-gray-400", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-foreground/70", children: [
             localCount,
             " local"
           ] }),
-          /* @__PURE__ */ jsxs("span", { className: "text-purple-400", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-purple-600 dark:text-purple-400", children: [
             serverCount,
             " server"
           ] }),
-          traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
+          traitStates && /* @__PURE__ */ jsx("span", { className: "text-cyan-600 dark:text-cyan-400 truncate max-w-[400px]", children: traitStates })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsx(TransitionRow, { trace }, trace.id)) }) }) }),
-          walkStep && /* @__PURE__ */ jsxs("div", { className: "w-56 flex-shrink-0 border-l border-gray-700 px-2 py-1 text-xs font-mono overflow-y-auto", children: [
-            /* @__PURE__ */ jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
-              "Walk Step ",
-              walkStep.stepIndex,
-              "/",
-              walkStep.stepTotal
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.from }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "--" }),
-              /* @__PURE__ */ jsx("span", { className: "text-green-300", children: walkStep.event }),
-              /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: "-->" }),
-              /* @__PURE__ */ jsx("span", { className: "text-yellow-300", children: walkStep.to })
-            ] }),
-            walkStep.guardCase && /* @__PURE__ */ jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
-              "guard: ",
-              walkStep.guardCase
-            ] }),
-            walkStep.isRepositioning && /* @__PURE__ */ jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
-            /* @__PURE__ */ jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
-          ] })
+          /* @__PURE__ */ jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-foreground/50 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsx(TransitionRow, { trace }, trace.id)) }) }) }),
+          /* @__PURE__ */ jsx(WalkMinimap, {})
         ] })
       ]
     }
@@ -41315,10 +41585,10 @@ function RuntimeDebugger({
   defaultTab,
   schema
 }) {
-  const [isCollapsed, setIsCollapsed] = React124.useState(mode === "verify" ? true : defaultCollapsed);
-  const [isVisible, setIsVisible] = React124.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
+  const [isCollapsed, setIsCollapsed] = React125.useState(mode === "verify" ? true : defaultCollapsed);
+  const [isVisible, setIsVisible] = React125.useState(mode === "inline" || mode === "verify" || isDebugEnabled2());
   const debugData = useDebugData();
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     if (mode === "inline") return;
     return onDebugToggle((enabled) => {
       setIsVisible(enabled);
@@ -41327,7 +41597,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -41525,7 +41795,7 @@ function RuntimeDebugger({
             className: "runtime-debugger__tabs"
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: "runtime-debugger__footer", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-gray-500", children: "Press ` to toggle | window.__orbitalVerification for automation" }) })
+        /* @__PURE__ */ jsx("div", { className: "runtime-debugger__footer", children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-foreground/50", children: "Press ` to toggle | window.__orbitalVerification for automation" }) })
       ] })
     }
   );
@@ -41845,7 +42115,7 @@ function SequenceBar({
     onSlotRemove(index);
   }, [onSlotRemove, playing]);
   const paddedSlots = Array.from({ length: maxSlots }, (_, i) => slots[i]);
-  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx(HStack, { className: cn("items-center", className), gap: "sm", children: paddedSlots.map((slot, i) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx(
       Typography,
       {
@@ -43114,7 +43384,7 @@ var StatCard = ({
   const labelToUse = propLabel ?? propTitle;
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const handleActionClick = React124__default.useCallback(() => {
+  const handleActionClick = React125__default.useCallback(() => {
     if (action?.event) {
       eventBus.emit(`UI:${action.event}`, {});
     }
@@ -43125,7 +43395,7 @@ var StatCard = ({
   const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const isLoading = externalLoading ?? false;
   const error = externalError;
-  const computeMetricValue = React124__default.useCallback(
+  const computeMetricValue = React125__default.useCallback(
     (metric, items) => {
       if (metric.value !== void 0) {
         return metric.value;
@@ -43164,7 +43434,7 @@ var StatCard = ({
     },
     []
   );
-  const schemaStats = React124__default.useMemo(() => {
+  const schemaStats = React125__default.useMemo(() => {
     if (!metrics || metrics.length === 0) return null;
     return metrics.map((metric) => ({
       label: metric.label,
@@ -43172,7 +43442,7 @@ var StatCard = ({
       format: metric.format
     }));
   }, [metrics, data, computeMetricValue]);
-  const calculatedTrend = React124__default.useMemo(() => {
+  const calculatedTrend = React125__default.useMemo(() => {
     if (manualTrend !== void 0) return manualTrend;
     if (previousValue === void 0 || currentValue === void 0)
       return void 0;
@@ -44107,7 +44377,7 @@ var Timeline = ({
 }) => {
   const { t } = useTranslate();
   const entityData = Array.isArray(entity) ? entity : [];
-  const items = React124__default.useMemo(() => {
+  const items = React125__default.useMemo(() => {
     if (propItems) return propItems;
     if (entityData.length === 0) return [];
     return entityData.map((record, idx) => {
@@ -44211,7 +44481,7 @@ Timeline.displayName = "Timeline";
 init_Box();
 init_useEventBus();
 function extractToastProps(children) {
-  if (!React124__default.isValidElement(children)) {
+  if (!React125__default.isValidElement(children)) {
     if (typeof children === "string") {
       return { message: children };
     }
@@ -44242,7 +44512,7 @@ var ToastSlot = ({
     eventBus.emit("UI:CLOSE");
   };
   if (!isVisible) return null;
-  const isCustomContent = React124__default.isValidElement(children) && !message;
+  const isCustomContent = React125__default.isValidElement(children) && !message;
   return /* @__PURE__ */ jsx(Box, { className: "fixed bottom-4 right-4 z-50", children: isCustomContent ? children : /* @__PURE__ */ jsx(
     Toast,
     {
@@ -44496,7 +44766,7 @@ var WizardContainer = ({
           const isCompleted = index < currentStep;
           const stepKey = step.id ?? step.tabId ?? `step-${index}`;
           const stepTitle = step.title ?? step.name ?? `Step ${index + 1}`;
-          return /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
             /* @__PURE__ */ jsx(
               Button,
               {
@@ -44867,12 +45137,12 @@ WorldMapTemplate.displayName = "WorldMapTemplate";
 
 // components/organisms/component-registry.generated.ts
 function lazyThree(name, loader) {
-  const Lazy = React124__default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React125__default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React124__default.createElement(
-      React124__default.Suspense,
+    return React125__default.createElement(
+      React125__default.Suspense,
       { fallback: null },
-      React124__default.createElement(Lazy, props)
+      React125__default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -45160,7 +45430,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React124__default.createElement(
+  return React125__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -45187,6 +45457,62 @@ function getComponentForPattern(patternType) {
   if (!name) return null;
   return COMPONENT_REGISTRY[name] ?? null;
 }
+var FORM_PATTERNS = /* @__PURE__ */ new Set([
+  "form",
+  "form-section",
+  "inline-edit-form",
+  "wizard-step"
+]);
+function enrichFormFields(fields, entityDef) {
+  const fieldMap = new Map(entityDef.fields.map((f3) => [f3.name, f3]));
+  return fields.map((field) => {
+    if (typeof field === "string") {
+      const entityField = fieldMap.get(field);
+      if (entityField) {
+        const enriched = {
+          name: field,
+          label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()),
+          type: entityField.type,
+          required: entityField.required
+        };
+        if (entityField.values && entityField.values.length > 0) {
+          enriched.values = entityField.values;
+        } else if (entityField.enumValues && entityField.enumValues.length > 0) {
+          enriched.values = entityField.enumValues;
+        }
+        if (entityField.relation) {
+          enriched.relation = entityField.relation;
+        }
+        return enriched;
+      }
+      return { name: field, label: field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (c) => c.toUpperCase()) };
+    }
+    if (field && typeof field === "object" && !Array.isArray(field)) {
+      const obj = field;
+      const fieldName = obj.name ?? obj.field;
+      if (!fieldName) return field;
+      if (obj.type || obj.inputType) return field;
+      const entityField = fieldMap.get(fieldName);
+      if (!entityField) return field;
+      const enriched = { ...obj, type: entityField.type };
+      if (entityField.required && !("required" in obj)) {
+        enriched.required = true;
+      }
+      if (!obj.values && !obj.options) {
+        if (entityField.values && entityField.values.length > 0) {
+          enriched.values = entityField.values;
+        } else if (entityField.enumValues && entityField.enumValues.length > 0) {
+          enriched.values = entityField.enumValues;
+        }
+      }
+      if (!obj.relation && entityField.relation) {
+        enriched.relation = entityField.relation;
+      }
+      return enriched;
+    }
+    return field;
+  });
+}
 var PATTERNS_WITH_CHILDREN = /* @__PURE__ */ new Set([
   "stack",
   "vstack",
@@ -45620,6 +45946,8 @@ function SlotContentRenderer({
   const entityProp = content.props.entity;
   const entityType = typeof entityProp === "string" ? entityProp : "";
   const storeData = useEntityRef(entityType);
+  const schemaCtx = useEntitySchemaOptional();
+  const entityDef = entityType && schemaCtx ? schemaCtx.entities.get(entityType) : void 0;
   const PatternComponent = getComponentForPattern(content.pattern);
   if (PatternComponent) {
     const childrenConfig = content.props.children;
@@ -45641,6 +45969,13 @@ function SlotContentRenderer({
     } else {
       finalProps = renderedProps;
     }
+    const isFormPattern = FORM_PATTERNS.has(content.pattern) || content.pattern.includes("form");
+    if (isFormPattern && entityDef && Array.isArray(finalProps.fields)) {
+      finalProps.fields = enrichFormFields(finalProps.fields, entityDef);
+      if (finalProps.mode === "edit" && !finalProps.initialData && storeData.length > 0) {
+        finalProps.initialData = storeData[0];
+      }
+    }
     const acceptsChildren = PATTERNS_WITH_CHILDREN.has(content.pattern);
     return /* @__PURE__ */ jsx(
       Box,
@@ -46047,33 +46382,6 @@ function createClientEffectHandlers(options) {
     })
   };
 }
-var EntitySchemaContext = createContext(null);
-function EntitySchemaProvider({
-  entities,
-  children
-}) {
-  const entitiesMap = useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const entity of entities) {
-      map.set(entity.name, entity);
-    }
-    return map;
-  }, [entities]);
-  const contextValue2 = useMemo(
-    () => ({
-      entities: entitiesMap
-    }),
-    [entitiesMap]
-  );
-  return /* @__PURE__ */ jsx(EntitySchemaContext.Provider, { value: contextValue2, children });
-}
-function useEntitySchema() {
-  const context = useContext(EntitySchemaContext);
-  if (!context) {
-    throw new Error("useEntitySchema must be used within an EntitySchemaProvider");
-  }
-  return context;
-}
 
 // runtime/useTraitStateMachine.ts
 function toTraitDefinition(binding) {
@@ -46856,6 +47164,43 @@ OrbPreview.displayName = "OrbPreview";
 
 // components/molecules/avl/OrbPreviewNode.tsx
 init_useEventBus();
+
+// components/molecules/avl/wire-validation.ts
+function validateWire(sourcePayload, targetPayload) {
+  const warnings = [];
+  if (!sourcePayload?.length && !targetPayload?.length) {
+    return { valid: true, warnings };
+  }
+  if (sourcePayload?.length && !targetPayload?.length) {
+    return { valid: true, warnings };
+  }
+  if (!sourcePayload?.length && targetPayload?.length) {
+    const requiredFields = targetPayload.filter((f3) => f3.required);
+    if (requiredFields.length > 0) {
+      warnings.push(`Missing required fields: ${requiredFields.map((f3) => f3.name).join(", ")}`);
+    }
+    return { valid: warnings.length === 0, warnings };
+  }
+  const sourceFields = new Map(sourcePayload.map((f3) => [f3.name, f3]));
+  for (const targetField of targetPayload) {
+    const sourceField = sourceFields.get(targetField.name);
+    if (!sourceField) {
+      if (targetField.required) {
+        warnings.push(`Missing required field: ${targetField.name} (${targetField.type})`);
+      }
+    } else if (sourceField.type !== targetField.type) {
+      warnings.push(`Type mismatch: ${targetField.name} (source: ${sourceField.type}, target: ${targetField.type})`);
+    }
+  }
+  return { valid: warnings.length === 0, warnings };
+}
+function formatPayloadTooltip(fields) {
+  if (fields.length === 0) return "";
+  const parts = fields.map(
+    (f3) => `${f3.name}: ${f3.type}${f3.required ? " (req)" : ""}`
+  );
+  return `{ ${parts.join(", ")} }`;
+}
 var ScreenSizeContext = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -46866,6 +47211,15 @@ var ROLE_COLORS = {
   error: { border: "#D97706", dot: "#F59E0B" },
   default: { border: "var(--color-border)", dot: "#6B7280" }
 };
+var LAYER_COLORS = {
+  Infrastructure: "#3B82F6",
+  Services: "#F59E0B",
+  "UI Patterns": "#8B5CF6",
+  Game: "#22C55E",
+  ML: "#EC4899",
+  Domain: "#6366F1",
+  Community: "#6B7280"
+};
 var TARGET_HANDLE_STYLE = {
   background: "var(--color-primary)",
   width: 8,
@@ -46968,6 +47322,7 @@ var OrbPreviewNodeInner = (props) => {
   const role = data.stateRole ?? "default";
   const colors = ROLE_COLORS[role] ?? ROLE_COLORS.default;
   const eventSources = data.eventSources ?? [];
+  const layerColor = data.layer ? LAYER_COLORS[data.layer] : void 0;
   const isExpanded = Boolean(data.traitName);
   const label = isExpanded ? `${data.transitionEvent ?? ""}` : data.orbitalName;
   const sublabel = isExpanded ? `${data.fromState ?? ""} \u2192 ${data.toState ?? ""}` : data.entityName ?? "";
@@ -47078,10 +47433,11 @@ var OrbPreviewNodeInner = (props) => {
     });
   }, [eventBus]);
   const handlePreviewDragOver = useCallback((e) => {
-    if (!dragActive) return;
+    if (!e.dataTransfer.types.includes(ALMADAR_DND_MIME)) return;
     e.preventDefault();
     e.stopPropagation();
     e.dataTransfer.dropEffect = "copy";
+    if (!dragActive) setDragActive(true);
     let el = e.target;
     while (el && el.dataset.acceptsChildren !== "true") {
       el = el.parentElement;
@@ -47108,6 +47464,13 @@ var OrbPreviewNodeInner = (props) => {
       onMouseLeave: handleMouseLeave,
       children: [
         /* @__PURE__ */ jsx("style", { children: SELECTION_STYLES }),
+        layerColor && /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
         /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
           /* @__PURE__ */ jsx(
             Box,
@@ -47129,7 +47492,7 @@ var OrbPreviewNodeInner = (props) => {
                 color: "#F97316",
                 border: "1px solid #F9731630"
               },
-              title: `${src.label ?? src.patternType} \u2192 ${src.event}`,
+              title: `${src.label ?? src.patternType} \u2192 ${src.event}${src.payloadFields?.length ? ` ${formatPayloadTooltip(src.payloadFields)}` : ""}`,
               children: src.label ?? src.event
             },
             src.event
@@ -47163,7 +47526,7 @@ var OrbPreviewNodeInner = (props) => {
             type: "source",
             position: Position.Right,
             style: eventHandleStyle(src),
-            title: `${src.label ?? src.patternType}: ${src.event}`
+            title: `${src.label ?? src.patternType}: ${src.event}${src.payloadFields?.length ? ` ${formatPayloadTooltip(src.payloadFields)}` : ""}`
           },
           `event-${src.event}`
         ))
@@ -47171,7 +47534,7 @@ var OrbPreviewNodeInner = (props) => {
     }
   );
 };
-var OrbPreviewNode = React124__default.memo(OrbPreviewNodeInner);
+var OrbPreviewNode = React125__default.memo(OrbPreviewNodeInner);
 OrbPreviewNode.displayName = "OrbPreviewNode";
 var EventFlowEdgeInner = (props) => {
   const {
@@ -47248,9 +47611,214 @@ var EventFlowEdgeInner = (props) => {
     ) })
   ] });
 };
-var EventFlowEdge = React124__default.memo(EventFlowEdgeInner);
+var EventFlowEdge = React125__default.memo(EventFlowEdgeInner);
 EventFlowEdge.displayName = "EventFlowEdge";
 
+// components/molecules/avl/BehaviorComposeNode.tsx
+init_Box();
+init_Typography();
+var LAYER_COLORS2 = {
+  Infrastructure: "#3B82F6",
+  Services: "#F59E0B",
+  "UI Patterns": "#8B5CF6",
+  Game: "#22C55E",
+  ML: "#EC4899",
+  Domain: "#6366F1",
+  Community: "#6B7280"
+};
+var NODE_WIDTH = 220;
+var TARGET_HANDLE_STYLE2 = {
+  background: "var(--color-primary)",
+  width: 8,
+  height: 8,
+  border: "2px solid var(--color-card)"
+};
+function eventHandleStyle2(source) {
+  return {
+    background: "#F97316",
+    width: 10,
+    height: 10,
+    border: "2px solid var(--color-card)",
+    top: `${source.positionHint * 100}%`,
+    right: -5
+  };
+}
+var BehaviorComposeNodeInner = (props) => {
+  const data = props.data;
+  const [hovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const layerColor = data.layer ? LAYER_COLORS2[data.layer] : void 0;
+  const connectableEvents = data.connectableEvents ?? [];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: "rounded-lg border shadow-sm bg-card transition-all duration-200 overflow-hidden",
+      style: {
+        borderColor: hovered ? "var(--color-primary)" : "var(--color-border)",
+        borderWidth: "1.5px",
+        width: NODE_WIDTH
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: [
+        layerColor && /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: { height: 3, backgroundColor: layerColor },
+            title: data.layer
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border/40 drag-handle cursor-grab", children: [
+          /* @__PURE__ */ jsxs(Box, { className: "flex flex-col min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold truncate leading-tight text-[12px]", children: data.behaviorName }),
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground truncate text-[10px] leading-tight", children: data.entityName })
+          ] }),
+          /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "shrink-0", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[9px] text-inherit", children: data.level }) })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center py-3", children: /* @__PURE__ */ jsx(
+          AvlBehaviorGlyph,
+          {
+            name: data.behaviorName,
+            level: data.level,
+            domain: data.domain,
+            stateCount: data.stateCount,
+            fieldCount: data.fieldCount,
+            persistence: data.persistence,
+            effectTypes: data.effectTypes,
+            children: data.children,
+            connections: data.connections,
+            size: "sm",
+            showLabels: false
+          }
+        ) }),
+        connectableEvents.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "flex flex-wrap gap-0.5 px-2 pb-2", children: [
+          connectableEvents.slice(0, 4).map((ev) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              style: {
+                backgroundColor: "#F9731615",
+                color: "#F97316",
+                border: "1px solid #F9731630"
+              },
+              title: `${ev.event}${ev.payloadFields?.length ? ` ${formatPayloadTooltip(ev.payloadFields)}` : ""}`,
+              children: ev.event
+            },
+            ev.event
+          )),
+          connectableEvents.length > 4 && /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: "rounded-full px-1.5 py-0 text-[8px] font-medium leading-tight",
+              style: { color: "var(--color-muted-foreground)" },
+              children: [
+                "+",
+                connectableEvents.length - 4
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { className: "flex items-center justify-between px-2 pb-1.5", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[9px]", children: [
+            data.stateCount,
+            " states"
+          ] }),
+          data.layer && /* @__PURE__ */ jsx(Badge, { variant: "neutral", className: "text-[8px]", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[8px] text-inherit", children: data.layer }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Left,
+            style: TARGET_HANDLE_STYLE2
+          }
+        ),
+        connectableEvents.map((ev) => /* @__PURE__ */ jsx(
+          Handle,
+          {
+            id: `event-${ev.event}`,
+            type: "source",
+            position: Position.Right,
+            style: eventHandleStyle2(ev),
+            title: `${ev.event}${ev.payloadFields?.length ? ` ${formatPayloadTooltip(ev.payloadFields)}` : ""}`
+          },
+          `event-${ev.event}`
+        ))
+      ]
+    }
+  );
+};
+var BehaviorComposeNode = React125__default.memo(BehaviorComposeNodeInner);
+BehaviorComposeNode.displayName = "BehaviorComposeNode";
+
+// components/molecules/avl/avl-behavior-compose-converter.ts
+var COMPOSE_SPACING = 320;
+function behaviorsToComposeGraph(entries, wires, layoutHint) {
+  const nodes = [];
+  const edges = [];
+  const count = entries.length;
+  const cols = layoutHint === "pipeline" ? count : Math.ceil(Math.sqrt(count));
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i];
+    const col = i % cols;
+    const row = Math.floor(i / cols);
+    nodes.push({
+      id: entry.behaviorName,
+      type: "behaviorCompose",
+      position: { x: col * COMPOSE_SPACING, y: row * COMPOSE_SPACING },
+      data: {
+        behaviorName: entry.behaviorName,
+        level: entry.level,
+        domain: entry.domain,
+        layer: entry.layer,
+        entityName: entry.entityName,
+        stateCount: entry.stateCount,
+        fieldCount: entry.fieldCount,
+        persistence: entry.persistence,
+        effectTypes: entry.effectTypes,
+        children: entry.children,
+        connections: entry.connections,
+        connectableEvents: entry.connectableEvents,
+        composableWith: entry.composableWith,
+        orbitalNames: entry.orbitalNames
+      }
+    });
+  }
+  for (const wire of wires) {
+    edges.push({
+      id: `bw-${wire.sourceBehavior}-${wire.targetBehavior}-${wire.event}`,
+      source: wire.sourceBehavior,
+      target: wire.targetBehavior,
+      sourceHandle: `event-${wire.event}`,
+      type: "eventFlow",
+      data: wire
+    });
+  }
+  return { nodes, edges };
+}
+function registryEntryToCanvasEntry(entry, orbitalNames) {
+  const events2 = entry.connectableEvents;
+  const connectableEvents = events2.map((eventName, i) => ({
+    event: eventName,
+    payloadFields: entry.eventPayloads[eventName],
+    positionHint: events2.length > 1 ? 0.1 + i * 0.8 / (events2.length - 1) : 0.5
+  }));
+  return {
+    behaviorName: entry.name,
+    level: entry.level,
+    domain: entry.family,
+    layer: entry.layer,
+    entityName: entry.defaultEntity.name,
+    stateCount: entry.complexity.states,
+    fieldCount: entry.defaultEntity.fields.length,
+    persistence: entry.defaultEntity.persistence,
+    connectableEvents,
+    composableWith: entry.composableWith,
+    orbitalNames
+  };
+}
+
 // components/molecules/avl/index.ts
 init_Avl3DOrbitalNode();
 init_Avl3DCrossWire();
@@ -47363,6 +47931,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
   const effectTypes = node.effectTypes ?? [];
   const guard = node.guard;
   const isExpanded = Boolean(traitName);
+  const hasRenderUi = effectTypes.includes("render-ui");
   const patternType = selectedPattern?.patternType;
   const patternDef = useMemo(() => patternType ? getPatternDefinition(patternType) : null, [patternType]);
   const isEntityPattern = patternType ? isEntityAwarePattern(patternType) : false;
@@ -47562,6 +48131,42 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             }
           )
         ] }),
+        editable && !selectedPattern && !isExpanded && node.layer === "Services" && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Service Mode") }),
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: hasRenderUi ? "primary" : "ghost",
+                size: "sm",
+                className: "flex-1 text-[11px]",
+                onClick: () => {
+                  if (!hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: true });
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "monitor", size: "xs", className: "mr-1" }),
+                  t("Standalone")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: hasRenderUi ? "ghost" : "primary",
+                size: "sm",
+                className: "flex-1 text-[11px]",
+                onClick: () => {
+                  if (hasRenderUi) eventBus.emit("UI:SERVICE_MODE_TOGGLE", { orbitalName: node.orbitalName, standalone: false });
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Icon, { name: "cpu", size: "xs", className: "mr-1" }),
+                  t("Embedded")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] mt-1", children: hasRenderUi ? t("Renders its own UI") : t("Headless, wired to other behaviors") })
+        ] }),
         !selectedPattern && !isExpanded && traits2.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "Traits" }),
           /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
@@ -47710,8 +48315,10 @@ OrbInspector.displayName = "OrbInspector";
 // components/organisms/avl/FlowCanvas.tsx
 init_Box();
 init_Typography();
+init_useEventBus();
 var NODE_TYPES = {
-  preview: OrbPreviewNode
+  preview: OrbPreviewNode,
+  behaviorCompose: BehaviorComposeNode
 };
 var EDGE_TYPES = {
   eventFlow: EventFlowEdge
@@ -47728,21 +48335,31 @@ function FlowCanvasInner({
   onNodeClick,
   onLevelChange,
   initialOrbital,
+  initialLevel,
+  initialSelectedNode,
   editable,
   onSchemaChange,
   onPatternDelete,
-  onEventWire
+  onEventWire,
+  behaviorMeta,
+  layoutHint,
+  onNodeSelect,
+  composeLevel,
+  behaviorEntries,
+  behaviorWires
 }) {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
     return schemaProp;
   }, [schemaProp]);
-  const [level, setLevel] = useState("overview");
+  const [level, setLevel] = useState(
+    initialLevel ?? (initialOrbital ? "expanded" : "overview")
+  );
   const [expandedOrbital, setExpandedOrbital] = useState(
     initialOrbital
   );
   const [screenSize, setScreenSize] = useState("tablet");
-  const [selectedNode, setSelectedNode] = useState(null);
+  const [selectedNode, setSelectedNode] = useState(initialSelectedNode ?? null);
   const [selectedPattern, setSelectedPattern] = useState(null);
   const patternSelectionValue = useMemo(() => ({
     selected: selectedPattern,
@@ -47751,18 +48368,22 @@ function FlowCanvasInner({
       if (p2) setSelectedNode(p2.nodeData);
     }
   }), [selectedPattern]);
-  const { overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
-    const overview = schemaToOverviewGraph(parsedSchema, mockData);
+  const [atBehaviorLevel, setAtBehaviorLevel] = useState(composeLevel === "behavior");
+  const { composeNodes, composeEdges, overviewNodes, overviewEdges, expandedNodes, expandedEdges } = useMemo(() => {
+    const compose = composeLevel === "behavior" && behaviorEntries?.length ? behaviorsToComposeGraph(behaviorEntries, behaviorWires ?? [], layoutHint) : { nodes: [], edges: [] };
+    const overview = schemaToOverviewGraph(parsedSchema, mockData, behaviorMeta, layoutHint);
     const expanded = expandedOrbital ? orbitalToExpandedGraph(parsedSchema, expandedOrbital, mockData) : { nodes: [], edges: [] };
     return {
+      composeNodes: compose.nodes,
+      composeEdges: compose.edges,
       overviewNodes: overview.nodes,
       overviewEdges: overview.edges,
       expandedNodes: expanded.nodes,
       expandedEdges: expanded.edges
     };
-  }, [parsedSchema, expandedOrbital]);
-  const activeNodes = level === "overview" ? overviewNodes : expandedNodes;
-  const activeEdges = level === "overview" ? overviewEdges : expandedEdges;
+  }, [parsedSchema, expandedOrbital, behaviorMeta, layoutHint, composeLevel, behaviorEntries, behaviorWires]);
+  const activeNodes = atBehaviorLevel && composeNodes.length > 0 ? composeNodes : level === "overview" ? overviewNodes : expandedNodes;
+  const activeEdges = atBehaviorLevel && composeEdges.length > 0 ? composeEdges : level === "overview" ? overviewEdges : expandedEdges;
   const [nodes, setNodes, onNodesChange] = useNodesState(activeNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(activeEdges);
   const reactFlow = useReactFlow();
@@ -47774,13 +48395,23 @@ function FlowCanvasInner({
     });
   }, [activeNodes, activeEdges, setNodes, setEdges, reactFlow]);
   const handleNodeDoubleClick = useCallback((_, node) => {
+    if (atBehaviorLevel && composeLevel === "behavior") {
+      const d = node.data;
+      if (d.orbitalNames?.length) {
+        setExpandedOrbital(d.orbitalNames[0]);
+      }
+      setAtBehaviorLevel(false);
+      setLevel("overview");
+      onLevelChange?.("overview", d.behaviorName);
+      return;
+    }
     if (level === "overview") {
       const d = node.data;
       setExpandedOrbital(d.orbitalName ?? node.id);
       setLevel("expanded");
       onLevelChange?.("expanded", d.orbitalName ?? node.id);
     }
-  }, [level, onLevelChange]);
+  }, [level, onLevelChange, atBehaviorLevel, composeLevel]);
   const handleNodeClick = useCallback((_, node) => {
     const nodeData = node.data;
     if (level === "expanded") {
@@ -47796,6 +48427,7 @@ function FlowCanvasInner({
         level: "overview",
         orbital: nodeData.orbitalName ?? node.id
       });
+      onNodeSelect?.(nodeData.orbitalName ?? node.id);
     }
   }, [level, expandedOrbital, onNodeClick]);
   const handleClosePanel = useCallback(() => {
@@ -47809,6 +48441,9 @@ function FlowCanvasInner({
         setLevel("overview");
         setExpandedOrbital(void 0);
         onLevelChange?.("overview");
+      } else if (level === "overview" && composeLevel === "behavior" && !atBehaviorLevel) {
+        setAtBehaviorLevel(true);
+        setExpandedOrbital(void 0);
       }
     } else if (e.key === "Delete" || e.key === "Backspace") {
       const target = e.target;
@@ -47831,8 +48466,13 @@ function FlowCanvasInner({
       setExpandedOrbital(void 0);
       setSelectedNode(null);
       onLevelChange?.("overview");
+    } else if (level === "overview" && composeLevel === "behavior" && !atBehaviorLevel) {
+      setAtBehaviorLevel(true);
+      setExpandedOrbital(void 0);
+      setSelectedNode(null);
     }
-  }, [level, onLevelChange, selectedNode]);
+  }, [level, onLevelChange, selectedNode, composeLevel, atBehaviorLevel]);
+  const eventBus = useEventBus();
   const handleConnect = useCallback((connection) => {
     if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;
     const eventName = connection.sourceHandle.replace("event-", "");
@@ -47841,6 +48481,19 @@ function FlowCanvasInner({
     if (!sourceNode || !targetNode) return;
     const srcData = sourceNode.data;
     const tgtData = targetNode.data;
+    const sourceEventSource = srcData.eventSources?.find((es) => es.event === eventName);
+    const sourcePayload = sourceEventSource?.payloadFields;
+    const targetEventSource = tgtData.eventSources?.find((es) => es.event === eventName);
+    const targetPayload = targetEventSource?.payloadFields;
+    const validation = validateWire(sourcePayload, targetPayload);
+    if (validation.warnings.length > 0) {
+      eventBus.emit("UI:WIRE_VALIDATION_WARNING", {
+        eventName,
+        sourceOrbital: srcData.orbitalName,
+        targetOrbital: tgtData.orbitalName,
+        warnings: validation.warnings
+      });
+    }
     onEventWire({
       eventName,
       sourceOrbital: srcData.orbitalName ?? "",
@@ -47848,7 +48501,7 @@ function FlowCanvasInner({
       sourceTraitName: srcData.traitName,
       targetTraitName: tgtData.traitName
     });
-  }, [nodes, onEventWire]);
+  }, [nodes, onEventWire, eventBus]);
   const screenSizeKeys = ["mobile", "tablet", "desktop"];
   return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
@@ -48007,7 +48660,7 @@ var ZoomBreadcrumb = ({
   if (eventName && band === "detail") {
     segments.push({ icon: "\u26A1", label: eventName });
   }
-  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-[var(--color-card)]/90 border border-[var(--color-border)] text-[11px] text-[var(--color-muted-foreground)] backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React124__default.Fragment, { children: [
+  return /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1 px-2 py-1 rounded-md bg-card/90 border border-border text-[11px] text-muted-foreground backdrop-blur-sm", children: segments.map((seg, i) => /* @__PURE__ */ jsxs(React125__default.Fragment, { children: [
     i > 0 && /* @__PURE__ */ jsx("span", { className: "opacity-40", children: ">" }),
     /* @__PURE__ */ jsx("span", { className: "opacity-60", children: seg.icon }),
     /* @__PURE__ */ jsx("span", { children: seg.label })
@@ -48059,11 +48712,11 @@ var ZoomLegend = ({ band }) => {
       "button",
       {
         onClick: () => setCollapsed(!collapsed),
-        className: "px-2 py-1 text-[10px] rounded-md bg-[var(--color-card)]/90 border border-[var(--color-border)] text-[var(--color-muted-foreground)] backdrop-blur-sm cursor-pointer hover:bg-[var(--color-card)]",
+        className: "px-2 py-1 text-[10px] rounded-md bg-card/90 border border-border text-muted-foreground backdrop-blur-sm cursor-pointer hover:bg-card",
         children: collapsed ? "Legend" : "Hide"
       }
     ),
-    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-[var(--color-card)]/95 border border-[var(--color-border)] backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-[var(--color-muted-foreground)]", children: [
+    !collapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 px-2 py-1.5 rounded-md bg-card/95 border border-border backdrop-blur-sm space-y-0.5", children: items.map((item, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[10px] text-muted-foreground", children: [
       /* @__PURE__ */ jsx("span", { className: "opacity-70 w-6 text-center", children: item.icon }),
       /* @__PURE__ */ jsx("span", { children: item.label })
     ] }, i)) })
@@ -48498,4 +49151,4 @@ AvlClickTarget.displayName = "AvlClickTarget";
 init_avl_schema_parser();
 init_avl_zoom_state();
 
-export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalNode, AvlOrbitalUnit, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };
+export { AVL_FIELD_TYPE_SHAPES, AVL_OPERATOR_COLORS, AvlApplication, AvlBackwardEdge, AvlBehaviorGlyph, AvlBinding, AvlBindingEdge, AvlBindingRef, AvlClickTarget, AvlClosedCircuit, AvlCosmicZoom, AvlEffect, AvlEmitListen, AvlEntity, AvlEvent, AvlEventWireEdge, AvlExprTree, AvlField, AvlFieldType, AvlGuard, AvlLiteral, AvlOperator, AvlOrbital, AvlOrbitalNode, AvlOrbitalUnit, AvlPage, AvlPageEdge, AvlPersistence, AvlSExpr, AvlSlotMap, AvlState, AvlStateMachine, AvlSwimLane, AvlTrait, AvlTraitScene, AvlTransition, AvlTransitionEdge, AvlTransitionLane, AvlTransitionScene, BehaviorComposeNode, BehaviorView, CONNECTION_COLORS, DOMAIN_COLORS, DetailView, EFFECT_CATEGORY_COLORS, EFFECT_TYPE_TO_CATEGORY, EventFlowEdge, FlowCanvas, MiniStateMachine, ModuleCard, OrbInspector, OrbPreviewNode, STATE_COLORS, SystemNode, ZOOM_BAND_THRESHOLDS, ZoomBandContext, ZoomBreadcrumb, ZoomLegend, arcPath, behaviorsToComposeGraph, computeTraitLayout, computeZoomBand, curveControlPoint, edgePath, getStateRole, gridPositions, orbitalToExpandedGraph, parseApplicationLevel, parseOrbitalLevel, parseTraitLevel, parseTransitionLevel, radialPositions, registryEntryToCanvasEntry, ringPositions, schemaToFlowGraph, schemaToOverviewGraph, useZoomBand, zoomProgress };