@almadar/ui 2.42.0 → 2.45.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, useLayoutEffect, lazy, useContext, useMemo, 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';
@@ -44,7 +44,7 @@ import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
 import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
 import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
 import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
-import { schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
+import { FieldTypeSchema, schemaToIR, getPage, isCircuitEvent } from '@almadar/core';
 import '@tanstack/react-query';
 import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
 
@@ -2914,7 +2914,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       }
     };
   }, [debug2]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       emit,
       on,
@@ -2927,12 +2927,12 @@ function EventBusProvider({ children, debug: debug2 = false }) {
     [emit, on, once, hasListeners, onAny, getSelectedEntity, clearSelectedEntity]
   );
   useEffect(() => {
-    setGlobalEventBus(contextValue);
+    setGlobalEventBus(contextValue2);
     return () => {
       setGlobalEventBus(null);
     };
-  }, [contextValue]);
-  return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue, children });
+  }, [contextValue2]);
+  return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue2, children });
 }
 var EventBusContext;
 var init_EventBusProvider = __esm({
@@ -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,
           {
@@ -13229,7 +13229,7 @@ var ThemeProvider = ({
     const newMode = resolvedMode === "dark" ? "light" : "dark";
     setMode(newMode);
   }, [resolvedMode, setMode]);
-  const contextValue = useMemo(
+  const contextValue2 = useMemo(
     () => ({
       theme,
       mode,
@@ -13251,7 +13251,7 @@ var ThemeProvider = ({
       appliedTheme
     ]
   );
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue2, children });
 };
 function useTheme() {
   const context = useContext(ThemeContext);
@@ -13275,25 +13275,92 @@ function useTheme() {
 var store = /* @__PURE__ */ new Map();
 var storeListeners = /* @__PURE__ */ new Set();
 var watchCallbacks = /* @__PURE__ */ new Map();
-function advance(entityType, data) {
-  const prev = store.get(entityType);
-  const oldData = prev?.data ?? [];
-  store.set(entityType, { data, version: (prev?.version ?? 0) + 1 });
+function extractId(record) {
+  const r2 = record;
+  return String(r2.id ?? r2._id ?? r2.key ?? "");
+}
+function materialize(snap) {
+  return snap.ids.map((id) => snap.entities.get(id));
+}
+function notifyListeners(entityType, prev) {
   for (const listener of storeListeners) {
     listener();
   }
   const cbs = watchCallbacks.get(entityType);
   if (cbs) {
+    const oldData = prev ? materialize(prev) : [];
+    const cur = store.get(entityType);
+    const newData = cur ? materialize(cur) : [];
     for (const cb of cbs) {
       try {
-        cb(oldData, data);
+        cb(oldData, newData);
       } catch {
       }
     }
   }
 }
+function setAll(entityType, records) {
+  const entities = /* @__PURE__ */ new Map();
+  const ids = [];
+  for (const r2 of records) {
+    const rec = r2;
+    const id = extractId(rec);
+    if (id) {
+      entities.set(id, rec);
+      ids.push(id);
+    }
+  }
+  const prev = store.get(entityType);
+  store.set(entityType, { entities, ids, version: (prev?.version ?? 0) + 1 });
+  notifyListeners(entityType, prev);
+}
+function upsertOne(entityType, record) {
+  const id = extractId(record);
+  if (!id) return;
+  const prev = store.get(entityType);
+  const snapshot = prev ? { entities: new Map(prev.entities), ids: [...prev.ids], version: prev.version } : { entities: /* @__PURE__ */ new Map(), ids: [], version: 0 };
+  snapshot.entities.set(id, record);
+  if (!snapshot.ids.includes(id)) snapshot.ids.push(id);
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
+function addOne(entityType, record) {
+  upsertOne(entityType, record);
+}
+function updateOne(entityType, id, changes) {
+  const prev = store.get(entityType);
+  if (!prev?.entities.has(id)) return;
+  const snapshot = {
+    entities: new Map(prev.entities),
+    ids: [...prev.ids],
+    version: prev.version
+  };
+  snapshot.entities.set(id, { ...snapshot.entities.get(id), ...changes });
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
+function removeOne(entityType, id) {
+  const prev = store.get(entityType);
+  if (!prev) return;
+  const snapshot = {
+    entities: new Map(prev.entities),
+    ids: prev.ids.filter((i) => i !== id),
+    version: prev.version
+  };
+  snapshot.entities.delete(id);
+  snapshot.version++;
+  store.set(entityType, snapshot);
+  notifyListeners(entityType, prev);
+}
 function getSnapshot(entityType) {
-  return store.get(entityType)?.data ?? [];
+  const snap = store.get(entityType);
+  if (!snap) return [];
+  return materialize(snap);
+}
+function getById(entityType, id) {
+  return store.get(entityType)?.entities.get(id) ?? null;
 }
 function getVersion(entityType) {
   return store.get(entityType)?.version ?? 0;
@@ -13307,7 +13374,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;
@@ -13317,15 +13384,21 @@ function useEntityRef(entityType) {
   }, [entityType]);
   return useSyncExternalStore(subscribeToStore, getSnapshotStable, () => []);
 }
-var EntityStoreContext = createContext({
-  advance,
-  getSnapshot
-});
+var contextValue = {
+  setAll,
+  upsertOne,
+  addOne,
+  updateOne,
+  removeOne,
+  getSnapshot,
+  getById
+};
+var EntityStoreContext = createContext(contextValue);
 function useEntityStore() {
   return useContext(EntityStoreContext);
 }
 function EntityStoreProvider({ children }) {
-  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: { advance, getSnapshot }, children });
+  return /* @__PURE__ */ jsx(EntityStoreContext.Provider, { value: contextValue, children });
 }
 
 // providers/OrbitalProvider.tsx
@@ -13401,13 +13474,43 @@ function SelectionProvider({
       unsubCancel();
     };
   }, [eventBus, setSelected, clearSelection, debug2]);
-  const contextValue = {
+  const contextValue2 = {
     selected,
     setSelected,
     clearSelection,
     isSelected
   };
-  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue, children });
+  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,
@@ -13556,8 +13659,8 @@ function useUISlotManager() {
 var UISlotContext = createContext(null);
 function UISlotProvider({ children }) {
   const slotManager = useUISlotManager();
-  const contextValue = useMemo(() => slotManager, [slotManager]);
-  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue, children });
+  const contextValue2 = useMemo(() => slotManager, [slotManager]);
+  return /* @__PURE__ */ jsx(UISlotContext.Provider, { value: contextValue2, children });
 }
 function useUISlots() {
   const context = useContext(UISlotContext);
@@ -14138,7 +14241,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) {
@@ -14147,7 +14250,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React124__default.forwardRef(
+var Button = React125__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -14246,7 +14349,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" ? (() => {
@@ -14387,7 +14490,7 @@ init_cn();
 
 // components/atoms/Input.tsx
 init_cn();
-var Input = React124__default.forwardRef(
+var Input = React125__default.forwardRef(
   ({
     className,
     inputType,
@@ -14502,7 +14605,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",
@@ -14525,7 +14628,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",
@@ -14551,7 +14654,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(
@@ -14590,7 +14693,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: [
@@ -14669,7 +14772,7 @@ var shadowStyles2 = {
   md: "shadow",
   lg: "shadow-lg"
 };
-var Card = React124__default.forwardRef(
+var Card = React125__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -14705,9 +14808,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,
@@ -14720,11 +14823,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,
@@ -14742,7 +14845,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",
@@ -15177,7 +15280,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // components/atoms/Radio.tsx
 init_cn();
-var Radio = React124__default.forwardRef(
+var Radio = React125__default.forwardRef(
   ({
     label,
     helperText,
@@ -15284,7 +15387,7 @@ Radio.displayName = "Radio";
 
 // components/atoms/Switch.tsx
 init_cn();
-var Switch = React124.forwardRef(
+var Switch = React125.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -15295,10 +15398,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);
       }
@@ -15614,8 +15717,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);
@@ -15624,7 +15727,7 @@ var LawReferenceTooltip = ({
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
-  React124__default.useEffect(() => {
+  React125__default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -15824,7 +15927,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",
@@ -15874,7 +15977,7 @@ var iconMap2 = {
   down: TrendingDown,
   flat: ArrowRight
 };
-var TrendIndicator = React124__default.forwardRef(
+var TrendIndicator = React125__default.forwardRef(
   ({
     className,
     value,
@@ -15937,7 +16040,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,
@@ -16451,7 +16554,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,
@@ -16493,7 +16596,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",
@@ -16649,7 +16752,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,
@@ -16672,7 +16775,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);
@@ -16849,9 +16952,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;
@@ -16909,9 +17012,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,
@@ -16928,9 +17031,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;
@@ -16940,7 +17043,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React124.useCallback(
+  const handlePointerUp = React125.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -16950,7 +17053,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React124.useCallback(
+  const handlePointerLeave = React125.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -17150,11 +17253,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)
@@ -17185,7 +17288,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
       ),
@@ -17247,9 +17350,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",
@@ -17265,7 +17368,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
           }
@@ -17297,7 +17400,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
       ),
@@ -17336,7 +17439,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";
@@ -17357,7 +17460,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
@@ -17567,7 +17670,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
@@ -17652,7 +17755,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 })
         ] })
       ]
     }
@@ -17679,7 +17782,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
       ),
@@ -17738,7 +17841,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",
@@ -17786,9 +17889,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");
@@ -18024,7 +18127,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", () => {
@@ -18427,8 +18530,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,
@@ -18545,8 +18648,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,
@@ -18653,8 +18756,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,
@@ -19374,7 +19477,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) {
@@ -19411,7 +19514,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) {
@@ -19442,7 +19545,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) {
@@ -19471,7 +19574,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) {
@@ -19676,8 +19779,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 });
@@ -19685,7 +19788,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React124.useCallback(
+  const handleRelease = React125.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -19882,11 +19985,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()
               }
             ) }),
@@ -19894,7 +19997,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-2xl font-bold text-white",
+                className: "text-2xl font-bold text-[var(--color-foreground)]",
                 children: appName
               }
             )
@@ -19904,7 +20007,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
@@ -19915,27 +20018,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"
                     }
                   ),
@@ -19943,7 +20046,7 @@ var AuthLayout = ({
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white/60 text-sm",
+                      className: "text-[var(--color-foreground)]/60 text-sm",
                       children: "CEO, Example Co."
                     }
                   )
@@ -19951,8 +20054,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" })
         ]
       }
     ),
@@ -19969,7 +20072,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()
               }
             ) }),
@@ -20060,13 +20163,13 @@ function getState() {
   }
   return { checks: /* @__PURE__ */ new Map(), transitions: [], bridgeHealth: null, listeners: /* @__PURE__ */ new Set() };
 }
-function notifyListeners() {
+function notifyListeners2() {
   getState().listeners.forEach((l) => l());
   exposeOnWindow();
 }
 function registerCheck(id, label, status = "pending", details) {
   getState().checks.set(id, { id, label, status, details, updatedAt: Date.now() });
-  notifyListeners();
+  notifyListeners2();
 }
 function getAllChecks() {
   return Array.from(getState().checks.values());
@@ -20110,7 +20213,7 @@ function recordTransition(trace) {
       failedEffects.map((e) => `${e.type}: ${e.error}`).join("; ")
     );
   }
-  notifyListeners();
+  notifyListeners2();
 }
 function getTransitions2() {
   return [...getState().transitions];
@@ -20143,7 +20246,7 @@ function recordServerResponse(orbitalName, event, response) {
       response.error
     );
   }
-  notifyListeners();
+  notifyListeners2();
 }
 function getBridgeHealth() {
   const bh = getState().bridgeHealth;
@@ -21075,7 +21178,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" })
         ] }) })
@@ -21607,7 +21710,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 ?? "");
@@ -21673,7 +21776,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
                   }
                 );
@@ -21759,13 +21862,50 @@ var orbStyleOverrides = {
   "orb-op-async": { color: ORB_COLORS.dark.async }
 };
 var orbStyle = { ...dark, ...orbStyleOverrides };
-var CodeBlock = React124__default.memo(
+function computeFoldRegions(code) {
+  const lines = code.split("\n");
+  const regions = [];
+  const stack = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let inString = false;
+    for (let j = 0; j < line.length; j++) {
+      const ch = line[j];
+      if (ch === "\\" && inString) {
+        j++;
+        continue;
+      }
+      if (ch === '"') {
+        inString = !inString;
+        continue;
+      }
+      if (inString) continue;
+      if (ch === "{" || ch === "[") {
+        stack.push({ line: i, bracket: ch });
+      } else if (ch === "}" || ch === "]") {
+        const open = stack.pop();
+        if (open && open.line < i) {
+          regions.push({
+            start: open.line,
+            end: i,
+            closeBracket: ch
+          });
+        }
+      }
+    }
+  }
+  return regions.sort((a, b) => a.start - b.start);
+}
+var LINE_PROPS_FN = (n) => ({ "data-line": String(n - 1) });
+var HIDDEN_LINE_NUMBERS = { display: "none" };
+var CodeBlock = React125__default.memo(
   ({
     code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
+    foldable: foldableProp,
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
@@ -21774,8 +21914,114 @@ var CodeBlock = React124__default.memo(
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);
+    const codeRef = useRef(null);
     const savedScrollLeftRef = useRef(0);
     const [copied, setCopied] = useState(false);
+    const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+    const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+    const foldRegions = useMemo(
+      () => isFoldable ? computeFoldRegions(code) : [],
+      [code, isFoldable]
+    );
+    const foldStartMap = useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      for (const r2 of foldRegions) m.set(r2.start, r2);
+      return m;
+    }, [foldRegions]);
+    const hiddenLines = useMemo(() => {
+      const h = /* @__PURE__ */ new Set();
+      for (const r2 of foldRegions) {
+        if (!collapsed.has(r2.start)) continue;
+        for (let i = r2.start + 1; i <= r2.end; i++) h.add(i);
+      }
+      return h;
+    }, [foldRegions, collapsed]);
+    const collapsedRef = useRef(collapsed);
+    collapsedRef.current = collapsed;
+    const foldStartMapRef = useRef(foldStartMap);
+    foldStartMapRef.current = foldStartMap;
+    const toggleFold = useCallback((lineNum) => {
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (next.has(lineNum)) next.delete(lineNum);
+        else next.add(lineNum);
+        return next;
+      });
+    }, []);
+    const toggleFoldRef = useRef(toggleFold);
+    toggleFoldRef.current = toggleFold;
+    useEffect(() => {
+      setCollapsed(/* @__PURE__ */ new Set());
+    }, [code]);
+    const highlightedElement = useMemo(
+      () => /* @__PURE__ */ jsx(
+        SyntaxHighlighter,
+        {
+          PreTag: "div",
+          language,
+          style: activeStyle,
+          wrapLines: true,
+          showLineNumbers: true,
+          showInlineLineNumbers: false,
+          lineNumberContainerStyle: HIDDEN_LINE_NUMBERS,
+          lineProps: LINE_PROPS_FN,
+          customStyle: {
+            backgroundColor: "transparent",
+            borderRadius: 0,
+            padding: 0,
+            margin: 0,
+            whiteSpace: "pre",
+            minWidth: "100%"
+          },
+          children: code
+        }
+      ),
+      [code, language, activeStyle]
+    );
+    useLayoutEffect(() => {
+      const container = codeRef.current;
+      if (!container) return;
+      container.querySelectorAll(".fold-toggle, .fold-summary").forEach((el) => el.remove());
+      const lineEls = container.querySelectorAll("[data-line]");
+      if (!isFoldable || foldRegions.length === 0) {
+        lineEls.forEach((el) => {
+          el.style.display = "";
+          el.style.position = "";
+          el.style.paddingLeft = "";
+        });
+        return;
+      }
+      lineEls.forEach((el) => {
+        const num = parseInt(el.getAttribute("data-line") ?? "-1", 10);
+        if (hiddenLines.has(num)) {
+          el.style.display = "none";
+          return;
+        }
+        el.style.display = "";
+        el.style.position = "relative";
+        el.style.paddingLeft = "1.2em";
+        const region = foldStartMap.get(num);
+        if (!region) return;
+        const isCollapsed = collapsed.has(num);
+        const toggle = document.createElement("span");
+        toggle.className = "fold-toggle";
+        toggle.textContent = isCollapsed ? "\u25B6" : "\u25BC";
+        toggle.style.cssText = "position:absolute;left:0;top:0;width:1.2em;text-align:center;cursor:pointer;color:#858585;font-size:10px;user-select:none;line-height:inherit;height:100%";
+        toggle.addEventListener("click", (e) => {
+          e.stopPropagation();
+          toggleFoldRef.current(num);
+        });
+        el.insertBefore(toggle, el.firstChild);
+        if (isCollapsed) {
+          const summary = document.createElement("span");
+          summary.className = "fold-summary";
+          summary.style.cssText = "color:#858585;font-style:italic";
+          const count = region.end - region.start - 1;
+          summary.textContent = ` ... ${count} line${count !== 1 ? "s" : ""} ${region.closeBracket}`;
+          el.appendChild(summary);
+        }
+      });
+    }, [collapsed, hiddenLines, foldStartMap, foldRegions, isFoldable]);
     useLayoutEffect(() => {
       const el = scrollRef.current;
       return () => {
@@ -21806,13 +22052,14 @@ var CodeBlock = React124__default.memo(
         eventBus.emit("UI:COPY_CODE", { language, success: false });
       }
     };
+    const hasHeader = showLanguageBadge || showCopyButton;
     return /* @__PURE__ */ jsxs(Box, { className: `relative group ${className || ""}`, children: [
-      (showLanguageBadge || showCopyButton) && /* @__PURE__ */ jsxs(
+      hasHeader && /* @__PURE__ */ jsxs(
         HStack,
         {
           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(
@@ -21842,31 +22089,14 @@ var CodeBlock = React124__default.memo(
             touchAction: "pan-x pan-y",
             contain: "paint",
             backgroundColor: "#1e1e1e",
-            borderRadius: showLanguageBadge || showCopyButton ? "0 0 0.5rem 0.5rem" : "0.5rem",
-            padding: "1rem"
+            borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem"
           },
-          children: /* @__PURE__ */ jsx(
-            SyntaxHighlighter,
-            {
-              PreTag: "div",
-              language,
-              style: activeStyle,
-              customStyle: {
-                backgroundColor: "transparent",
-                borderRadius: 0,
-                padding: 0,
-                margin: 0,
-                whiteSpace: "pre",
-                minWidth: "100%"
-              },
-              children: code
-            }
-          )
+          children: /* @__PURE__ */ jsx("div", { ref: codeRef, style: { padding: "1rem" }, children: highlightedElement })
         }
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
 );
 CodeBlock.displayName = "CodeBlock";
 
@@ -22787,7 +23017,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,
@@ -28313,7 +28543,7 @@ function CraftingRecipe({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCraft = React124.useCallback(() => {
+  const handleCraft = React125.useCallback(() => {
     onCraft?.();
     if (craftEvent) {
       eventBus.emit(craftEvent, { output: output.label });
@@ -28330,7 +28560,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,
               {
@@ -28619,8 +28849,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 });
@@ -28628,7 +28858,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React124.useCallback(
+  const handleRelease = React125.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -29439,7 +29669,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;
@@ -29476,7 +29706,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}`;
@@ -29679,7 +29909,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)
@@ -29770,27 +30000,27 @@ function useQuerySingleton(query) {
       store2.listeners.delete(listener);
     };
   }, [store2]);
-  const notifyListeners3 = useCallback(() => {
+  const notifyListeners4 = useCallback(() => {
     store2.listeners.forEach((listener) => listener());
   }, [store2]);
   const setSearch = useCallback((value) => {
     store2.search = value;
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const setFilter = useCallback((key, value) => {
     store2.filters = { ...store2.filters, [key]: value };
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const clearFilters = useCallback(() => {
     store2.filters = {};
     store2.search = "";
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   const setSort = useCallback((field, direction) => {
     store2.sortField = field;
     store2.sortDirection = direction;
-    notifyListeners3();
-  }, [store2, notifyListeners3]);
+    notifyListeners4();
+  }, [store2, notifyListeners4]);
   return {
     search: store2.search,
     setSearch,
@@ -30746,7 +30976,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",
             {
@@ -31522,7 +31752,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",
@@ -31583,7 +31813,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 })
       ]
     }
   );
@@ -31616,7 +31846,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) {
@@ -31805,15 +32035,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");
@@ -31882,7 +32112,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
       ),
@@ -31988,7 +32218,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: [
@@ -32084,7 +32314,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 });
@@ -32096,7 +32326,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: [
@@ -32148,7 +32378,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
       ),
@@ -32159,7 +32389,7 @@ function EnemyPlate({
             {
               variant: "caption",
               weight: "bold",
-              className: "text-white truncate",
+              className: "text-[var(--color-foreground)] truncate",
               children: name
             }
           ),
@@ -32220,7 +32450,7 @@ function UnitCommandBar({
   className
 }) {
   const eventBus = useEventBus();
-  const handleCommand = React124.useCallback(
+  const handleCommand = React125.useCallback(
     (event) => {
       if (event) {
         eventBus.emit(event, { unitId: selectedUnitId });
@@ -32232,7 +32462,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: [
@@ -32466,7 +32696,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",
           {
@@ -32478,7 +32708,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" })
           ] }),
@@ -32488,8 +32718,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();
@@ -32606,7 +32836,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)`
@@ -32617,9 +32847,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),
@@ -32649,14 +32879,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: ",
@@ -32672,9 +32902,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,
@@ -32694,7 +32924,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 });
@@ -32731,7 +32961,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)"
               },
@@ -32791,9 +33021,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);
@@ -32821,7 +33051,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 });
@@ -32874,7 +33104,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 })
                 ] })
@@ -34069,7 +34299,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"
             ),
@@ -34088,7 +34318,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"
             ),
@@ -34125,7 +34355,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"
             ),
@@ -34134,12 +34364,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 })
         ] })
       ]
     }
@@ -36226,7 +36456,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;
@@ -36286,7 +36516,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,
           {
@@ -36962,7 +37192,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(
@@ -36981,14 +37211,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 ?? {},
@@ -36997,13 +37227,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 = {
@@ -37028,7 +37258,7 @@ var Form = ({
     },
     [hiddenCalculations, externalContext, eventBus]
   );
-  const checkViolations = React124__default.useCallback(
+  const checkViolations = React125__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!violationTriggers.length) return;
       const context = {
@@ -37065,7 +37295,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;
@@ -37073,7 +37303,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));
@@ -37105,7 +37335,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;
@@ -37126,7 +37356,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") {
@@ -37148,7 +37378,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"}`);
@@ -37158,7 +37388,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)) {
@@ -38596,7 +38826,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") {
@@ -39031,7 +39261,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) => ({
@@ -39194,7 +39424,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;
@@ -39880,7 +40110,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",
@@ -39972,24 +40202,24 @@ init_cn();
 // lib/traitRegistry.ts
 var traits = /* @__PURE__ */ new Map();
 var listeners = /* @__PURE__ */ new Set();
-function notifyListeners2() {
+function notifyListeners3() {
   listeners.forEach((listener) => listener());
 }
 function registerTrait(info) {
   traits.set(info.id, info);
-  notifyListeners2();
+  notifyListeners3();
 }
 function updateTraitState(id, newState) {
   const trait = traits.get(id);
   if (trait) {
     trait.currentState = newState;
     trait.transitionCount++;
-    notifyListeners2();
+    notifyListeners3();
   }
 }
 function unregisterTrait(id) {
   traits.delete(id);
-  notifyListeners2();
+  notifyListeners3();
 }
 function getAllTraits() {
   return Array.from(traits.values());
@@ -40039,7 +40269,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: [],
@@ -40053,7 +40283,7 @@ function useDebugData() {
     },
     lastUpdate: Date.now()
   }));
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     const updateData = () => {
       setData({
         traits: getAllTraits(),
@@ -40110,6 +40340,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();
@@ -40338,15 +40821,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]);
@@ -40447,7 +40930,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,
@@ -40460,7 +40943,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);
@@ -40609,10 +41092,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;
     }
@@ -40880,9 +41363,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) {
@@ -40959,25 +41442,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,
@@ -40990,24 +41473,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",
@@ -41017,12 +41500,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 })
   ] });
@@ -41035,18 +41518,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;
     }
@@ -41058,49 +41532,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, {})
         ] })
       ]
     }
@@ -41115,10 +41568,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);
@@ -41127,7 +41580,7 @@ function RuntimeDebugger({
       }
     });
   }, [mode]);
-  React124.useEffect(() => {
+  React125.useEffect(() => {
     if (mode === "inline") return;
     const handleKeyDown = (e) => {
       if (e.key === "`" && isVisible) {
@@ -41325,7 +41778,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" }) })
       ] })
     }
   );
@@ -41645,7 +42098,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,
       {
@@ -41768,7 +42221,7 @@ function SequencerBoard({
     setPlayState("playing");
     setCurrentStep(0);
     let step = 0;
-    const advance2 = () => {
+    const advance = () => {
       step++;
       if (step >= entity.maxSlots) {
         const playerSeq = slots.map((s) => s?.id);
@@ -41799,10 +42252,10 @@ function SequencerBoard({
         }
       } else {
         setCurrentStep(step);
-        timerRef.current = setTimeout(advance2, stepDurationMs);
+        timerRef.current = setTimeout(advance, stepDurationMs);
       }
     };
-    timerRef.current = setTimeout(advance2, stepDurationMs);
+    timerRef.current = setTimeout(advance, stepDurationMs);
   }, [canPlay, slots, entity.maxSlots, entity.solutions, stepDurationMs, playEvent, completeEvent, emit]);
   const machine = {
     name: entity.title,
@@ -42914,7 +43367,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}`, {});
     }
@@ -42925,7 +43378,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;
@@ -42964,7 +43417,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,
@@ -42972,7 +43425,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;
@@ -43907,7 +44360,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) => {
@@ -44011,7 +44464,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 };
     }
@@ -44042,7 +44495,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,
     {
@@ -44296,7 +44749,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,
               {
@@ -44667,12 +45120,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})`;
@@ -44960,7 +45413,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React124__default.createElement(
+  return React125__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -44987,6 +45440,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",
@@ -45362,13 +45871,14 @@ function getToastPosition(position) {
       return "top-4 right-4";
   }
 }
-function renderPatternChildren(children, onDismiss, parentId = "root") {
+function renderPatternChildren(children, onDismiss, parentId = "root", parentPath = "root") {
   if (!children || !Array.isArray(children) || children.length === 0) {
     return null;
   }
   return children.map((child, index) => {
     if (!child || typeof child !== "object") return null;
     const childId = `${parentId}-${index}`;
+    const childPath = parentPath === "root" ? `root.children.${index}` : `${parentPath}.children.${index}`;
     const childContent = {
       id: childId,
       pattern: child.type,
@@ -45380,7 +45890,8 @@ function renderPatternChildren(children, onDismiss, parentId = "root") {
       SlotContentRenderer,
       {
         content: childContent,
-        onDismiss
+        onDismiss,
+        patternPath: childPath
       },
       childId
     );
@@ -45412,16 +45923,20 @@ function renderPatternProps(props, onDismiss) {
 }
 function SlotContentRenderer({
   content,
-  onDismiss
+  onDismiss,
+  patternPath
 }) {
   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;
     const hasChildren = PATTERNS_WITH_CHILDREN.has(content.pattern) || Array.isArray(childrenConfig) && childrenConfig.length > 0;
-    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id) : void 0;
+    const myPath = patternPath ?? "root";
+    const renderedChildren = hasChildren ? renderPatternChildren(childrenConfig, onDismiss, content.id, myPath) : void 0;
     const { children: _childrenConfig, ...restProps } = content.props;
     const renderedProps = renderPatternProps(restProps, onDismiss);
     let finalProps;
@@ -45437,6 +45952,14 @@ 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,
       {
@@ -45445,6 +45968,9 @@ function SlotContentRenderer({
         "data-id": content.id,
         "data-node-id": content.nodeId,
         "data-source-trait": content.sourceTrait,
+        "data-pattern-path": myPath,
+        "data-pattern-type": content.pattern,
+        "data-accepts-children": acceptsChildren ? "true" : void 0,
         children: /* @__PURE__ */ jsx(PatternComponent, { ...finalProps, children: renderedChildren })
       }
     );
@@ -45797,6 +46323,13 @@ createContext(null);
 
 // lib/api-client.ts
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "/api";
+
+// hooks/useDraggable.ts
+init_useEventBus();
+var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+
+// hooks/useDropZone.ts
+init_useEventBus();
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 
 // runtime/createClientEffectHandlers.ts
@@ -45832,33 +46365,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 contextValue = useMemo(
-    () => ({
-      entities: entitiesMap
-    }),
-    [entitiesMap]
-  );
-  return /* @__PURE__ */ jsx(EntitySchemaContext.Provider, { value: contextValue, 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) {
@@ -46449,7 +46955,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
       if (responseData) {
         for (const [entityType, records] of Object.entries(responseData)) {
           if (Array.isArray(records)) {
-            entityStore.advance(entityType, records);
+            entityStore.setAll(entityType, records);
           }
         }
       }
@@ -46508,7 +47014,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
         if (initResponseData) {
           for (const [entityType, records] of Object.entries(initResponseData)) {
             if (Array.isArray(records)) {
-              entityStore.advance(entityType, records);
+              entityStore.setAll(entityType, records);
             }
           }
         }
@@ -46557,7 +47063,7 @@ function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
     if (!serverUrl && mockData) {
       for (const [entityType, records] of Object.entries(mockData)) {
         if (Array.isArray(records)) {
-          entityStore.advance(entityType, records);
+          entityStore.setAll(entityType, records);
         }
       }
     }
@@ -46638,6 +47144,9 @@ function OrbPreview({
   );
 }
 OrbPreview.displayName = "OrbPreview";
+
+// components/molecules/avl/OrbPreviewNode.tsx
+init_useEventBus();
 var ScreenSizeContext = createContext("tablet");
 var PatternSelectionContext = createContext({ selected: null, select: () => {
 } });
@@ -46665,12 +47174,12 @@ function eventHandleStyle(source) {
   };
 }
 function buildOrbitalSchema(fullSchema, orbitalName) {
-  const orbital = fullSchema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   return { ...fullSchema, name: `${fullSchema.name}__${orbitalName}`, orbitals: [orbital] };
 }
 function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEvent, fromState, toState) {
-  const orbital = fullSchema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (fullSchema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return fullSchema;
   const clonedOrbital = JSON.parse(JSON.stringify(orbital));
   const traits2 = clonedOrbital.traits ?? [];
@@ -46703,7 +47212,9 @@ function buildTransitionSchema(fullSchema, orbitalName, traitName, transitionEve
   }
   const targetTrait = traits2.find((t) => {
     if (typeof t === "string") return t === traitName;
-    return t.name === traitName;
+    if ("name" in t) return t.name === traitName;
+    if ("ref" in t) return t.ref === traitName;
+    return false;
   });
   if (targetTrait) {
     clonedOrbital.traits = [targetTrait];
@@ -46720,6 +47231,21 @@ var SELECTION_STYLES = `
     outline: 2px solid var(--color-primary);
     outline-offset: 1px;
   }
+  .orb-preview-live.drag-active [data-accepts-children="true"] {
+    outline: 2px dashed var(--color-primary);
+    outline-offset: -2px;
+    transition: outline-color 0.15s, background-color 0.15s;
+  }
+  .orb-preview-live.drag-active [data-accepts-children="true"].drag-hover {
+    outline-color: var(--color-primary);
+    background-color: color-mix(in srgb, var(--color-primary) 5%, transparent);
+  }
+  .orb-preview-live .drop-indicator {
+    height: 2px;
+    background: var(--color-primary);
+    border-radius: 1px;
+    pointer-events: none;
+  }
 `;
 var OrbPreviewNodeInner = (props) => {
   const data = props.data;
@@ -46779,6 +47305,88 @@ var OrbPreviewNodeInner = (props) => {
       select(null);
     }
   }, [data, select]);
+  const eventBus = useEventBus();
+  const [dragActive, setDragActive] = useState(false);
+  useEffect(() => {
+    const unsub1 = eventBus.on("UI:DRAG_START", (e) => {
+      const kind = e.payload?.kind;
+      if (kind === "pattern") setDragActive(true);
+    });
+    const unsub2 = eventBus.on("UI:DRAG_END", () => setDragActive(false));
+    return () => {
+      unsub1();
+      unsub2();
+    };
+  }, [eventBus]);
+  const handlePreviewDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    contentRef.current?.querySelectorAll(".drag-hover, .drop-indicator").forEach((el2) => {
+      el2.classList.remove("drag-hover");
+      if (el2.classList.contains("drop-indicator")) el2.remove();
+    });
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return;
+    let payload;
+    try {
+      payload = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    if (payload.kind !== "pattern") return;
+    let el = e.target;
+    while (el && el.dataset.acceptsChildren !== "true") {
+      el = el.parentElement;
+      if (!el || el === contentRef.current) break;
+    }
+    const containerPath = el?.dataset?.patternPath;
+    if (!containerPath) {
+      eventBus.emit("UI:PATTERN_INSERT", {
+        parentPath: "root",
+        patternType: payload.data.type,
+        index: 0
+      });
+      return;
+    }
+    const pathChildren = el.querySelectorAll(":scope > [data-pattern-path]");
+    let insertIndex = pathChildren.length;
+    for (let i = 0; i < pathChildren.length; i++) {
+      const rect = pathChildren[i].getBoundingClientRect();
+      const style = el.firstElementChild ? getComputedStyle(el.firstElementChild) : null;
+      const isVertical = style?.flexDirection !== "row";
+      const mid = isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+      const cursor = isVertical ? e.clientY : e.clientX;
+      if (cursor < mid) {
+        insertIndex = i;
+        break;
+      }
+    }
+    eventBus.emit("UI:PATTERN_INSERT", {
+      parentPath: containerPath,
+      patternType: payload.data.type,
+      index: insertIndex
+    });
+  }, [eventBus]);
+  const handlePreviewDragOver = useCallback((e) => {
+    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;
+      if (!el || el === contentRef.current) break;
+    }
+    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
+    if (el?.dataset?.acceptsChildren === "true") {
+      el.classList.add("drag-hover");
+    }
+  }, [dragActive]);
+  const handlePreviewDragLeave = useCallback((e) => {
+    contentRef.current?.querySelectorAll(".drag-hover").forEach((c) => c.classList.remove("drag-hover"));
+  }, []);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -46823,8 +47431,11 @@ var OrbPreviewNodeInner = (props) => {
           Box,
           {
             ref: contentRef,
-            className: "orb-preview-live nodrag",
+            className: `orb-preview-live nodrag${dragActive ? " drag-active" : ""}`,
             onClick: handleContentClick,
+            onDrop: handlePreviewDrop,
+            onDragOver: handlePreviewDragOver,
+            onDragLeave: handlePreviewDragLeave,
             children: orbitalSchema ? /* @__PURE__ */ jsx(Box, { style: { minHeight: preset.minHeight }, children: /* @__PURE__ */ jsx(
               OrbPreview,
               {
@@ -46852,7 +47463,7 @@ var OrbPreviewNodeInner = (props) => {
     }
   );
 };
-var OrbPreviewNode = React124__default.memo(OrbPreviewNodeInner);
+var OrbPreviewNode = React125__default.memo(OrbPreviewNodeInner);
 OrbPreviewNode.displayName = "OrbPreviewNode";
 var EventFlowEdgeInner = (props) => {
   const {
@@ -46929,7 +47540,7 @@ var EventFlowEdgeInner = (props) => {
     ) })
   ] });
 };
-var EventFlowEdge = React124__default.memo(EventFlowEdgeInner);
+var EventFlowEdge = React125__default.memo(EventFlowEdgeInner);
 EventFlowEdge.displayName = "EventFlowEdge";
 
 // components/molecules/avl/index.ts
@@ -46943,7 +47554,9 @@ init_Avl3DExprTree();
 // components/organisms/avl/OrbInspector.tsx
 init_Box();
 init_Typography();
+init_Stack();
 init_types();
+init_useEventBus();
 function formatExpression(expr) {
   if (!expr) return "";
   if (typeof expr === "string") return expr;
@@ -46978,7 +47591,7 @@ var FIELD_TYPE_MAP = {
   array: "array"
 };
 function findEntity(schema, orbitalName) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital || typeof orbital.entity === "string") return null;
   const e = orbital.entity;
   const fields = (e.fields ?? []).map((f3) => ({
@@ -46989,7 +47602,7 @@ function findEntity(schema, orbitalName) {
   return { name: e.name ?? orbitalName, persistence: e.persistence ?? "runtime", fields };
 }
 function findTransition(schema, orbitalName, traitName, event) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return null;
   const traits2 = orbital.traits ?? [];
   const trait = traits2.find((t) => typeof t !== "string" && t.name === traitName);
@@ -46999,16 +47612,39 @@ function findTransition(schema, orbitalName, traitName, event) {
   return sm.transitions?.find((t) => t.event === event) ?? null;
 }
 function findTraits(schema, orbitalName) {
-  const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+  const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
   if (!orbital) return [];
   return (orbital.traits ?? []).filter((t) => typeof t !== "string").map((t) => ({
     name: t.name,
     stateCount: t.stateMachine?.states?.length ?? 0
   }));
 }
+function findPatternInTree(root, path) {
+  if (!path || path === "root") return root;
+  const parts = path.split(".");
+  let current = root;
+  for (const part of parts) {
+    if (current === null || current === void 0 || typeof current !== "object") return null;
+    const record = current;
+    if (part === "children" && Array.isArray(record.children)) {
+      current = record.children;
+    } else if (Array.isArray(current)) {
+      const idx = parseInt(part, 10);
+      if (isNaN(idx) || idx < 0 || idx >= current.length) return null;
+      current = current[idx];
+    } else {
+      current = record[part];
+    }
+  }
+  return typeof current === "object" && current !== null ? current : null;
+}
+var FIELD_TYPE_OPTIONS = FieldTypeSchema.options.map((v) => ({ value: v, label: v }));
+var EFFECT_TYPE_OPTIONS = Object.keys(EFFECT_TYPE_TO_CATEGORY).map((v) => ({ value: v, label: v }));
 function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose }) {
   const { selected: selectedPattern } = useContext(PatternSelectionContext);
   const [activeTab, setActiveTab] = useState("inspector");
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
   const orbitalName = node.orbitalName ?? "";
   const traitName = node.traitName ?? "";
   const transitionEvent = node.transitionEvent ?? "";
@@ -47028,25 +47664,56 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
     return findTransition(schema, orbitalName, traitName, transitionEvent);
   }, [schema, orbitalName, traitName, transitionEvent]);
   const traits2 = useMemo(() => findTraits(schema, orbitalName), [schema, orbitalName]);
+  const patternConfig = useMemo(() => {
+    if (!selectedPattern || !transition) return null;
+    const patternId = selectedPattern.patternId ?? "root";
+    for (const eff of transition.effects ?? []) {
+      if (Array.isArray(eff) && eff[0] === "render-ui" && eff[2]) {
+        const found = findPatternInTree(eff[2], patternId);
+        if (found) return found;
+      }
+    }
+    return null;
+  }, [selectedPattern, transition]);
   const orbCode = useMemo(() => {
-    const orbital = schema.orbitals?.find((o) => o.name === orbitalName);
+    const orbital = (schema.orbitals ?? []).find((o) => o.name === orbitalName);
     if (!orbital) return "{}";
     if (isExpanded && traitName) {
-      const traits3 = orbital.traits ?? [];
-      const trait = traits3.find((t) => typeof t !== "string" && t.name === traitName);
+      const traitList = orbital.traits ?? [];
+      const trait = traitList.find((tr) => typeof tr !== "string" && tr.name === traitName);
       if (trait && typeof trait !== "string" && trait.stateMachine) {
         if (transitionEvent) {
-          const t = trait.stateMachine.transitions?.find((tx) => tx.event === transitionEvent);
-          if (t) return JSON.stringify(t, null, 2);
+          const tx = trait.stateMachine.transitions?.find((txn) => txn.event === transitionEvent);
+          if (tx) return JSON.stringify(tx, null, 2);
         }
         return JSON.stringify({ name: trait.name, stateMachine: trait.stateMachine }, null, 2);
       }
     }
     return JSON.stringify(orbital, null, 2);
   }, [schema, orbitalName, traitName, transitionEvent, isExpanded]);
-  const handlePropChange = useCallback((prop, value) => {
-    if (!editable || !onSchemaChange) return;
-  }, [editable, onSchemaChange]);
+  const handlePropChange = useCallback((propName, value) => {
+    if (!editable) return;
+    eventBus.emit("UI:PROP_CHANGE", { propName, value });
+  }, [editable, eventBus]);
+  const handleAddField = useCallback(() => {
+    eventBus.emit("UI:ADD_FIELD", {});
+  }, [eventBus]);
+  const handleUpdateField = useCallback((fieldName, updates) => {
+    eventBus.emit("UI:UPDATE_FIELD", { fieldName, updates });
+  }, [eventBus]);
+  const handleRemoveField = useCallback((fieldName) => {
+    eventBus.emit("UI:REMOVE_FIELD", { fieldName });
+  }, [eventBus]);
+  const handleGuardChange = useCallback((guardExpr) => {
+    if (!editable) return;
+    eventBus.emit("UI:GUARD_CHANGE", { guard: guardExpr || null });
+  }, [editable, eventBus]);
+  const handleAddEffect = useCallback((effectType) => {
+    eventBus.emit("UI:ADD_EFFECT", { effectType });
+  }, [eventBus]);
+  const handleRemoveEffect = useCallback((effectIndex) => {
+    eventBus.emit("UI:REMOVE_EFFECT", { effectIndex });
+  }, [eventBus]);
   const headerTitle = selectedPattern ? selectedPattern.patternType : isExpanded ? transitionEvent || "Transition" : orbitalName;
   return /* @__PURE__ */ jsxs(Box, { className: "flex flex-col bg-card border-l border-border h-full", style: { width: 340 }, children: [
     /* @__PURE__ */ jsxs(Box, { className: "shrink-0 border-b border-border", children: [
@@ -47104,48 +47771,98 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
       /* ── Inspector Tab ── */
       /* @__PURE__ */ jsxs(Fragment, { children: [
         selectedPattern && patternDef?.propsSchema && /* @__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: "Props" }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 8).map(([propName, propSchema]) => {
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Props") }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1.5", children: Object.entries(patternDef.propsSchema).slice(0, 12).map(([propName, propSchema]) => {
             const ps = propSchema;
+            const currentValue = patternConfig ? patternConfig[propName] : void 0;
+            const displayValue = currentValue !== void 0 ? typeof currentValue === "object" ? JSON.stringify(currentValue) : String(currentValue) : "";
             return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-20 shrink-0 font-mono", children: propName }),
               editable ? /* @__PURE__ */ jsx(
                 Input,
                 {
+                  defaultValue: displayValue,
                   placeholder: ps.types?.join(" | ") ?? "string",
                   className: "flex-1 text-[11px] h-6",
-                  onChange: (e) => handlePropChange(propName, e.target.value)
+                  onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
               ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
-                ps.types?.join(" | ") ?? "string",
+                displayValue || (ps.types?.join(" | ") ?? "string"),
                 ps.required ? " *" : ""
               ] })
             ] }, propName);
           }) })
         ] }),
         (selectedPattern && isEntityPattern || !selectedPattern && !isExpanded) && entity && /* @__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: "Entity" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: t("Entity") }),
           /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx("circle", { cx: 7, cy: 7, r: 5, fill: "var(--color-primary)" }) }),
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: entity.name }),
             /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: entity.persistence })
           ] }),
-          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: entity.fields.map((f3) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
             /* @__PURE__ */ jsx("svg", { width: 12, height: 12, children: /* @__PURE__ */ jsx(AvlFieldType, { x: 6, y: 6, kind: FIELD_TYPE_MAP[f3.type] ?? "string", size: 4 }) }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
-            f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: "req" })
-          ] }, f3.name)) })
+            editable ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  defaultValue: f3.name,
+                  className: "flex-1 text-[11px] font-mono h-6",
+                  onBlur: (e) => {
+                    if (e.target.value !== f3.name) {
+                      handleUpdateField(f3.name, { name: e.target.value });
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  value: f3.type,
+                  options: FIELD_TYPE_OPTIONS,
+                  onChange: (e) => handleUpdateField(f3.name, { type: e.target.value }),
+                  className: "w-20 text-[10px] h-6"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemoveField(f3.name),
+                  className: "shrink-0 p-0.5 h-6 w-6",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs" })
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-mono flex-1", children: f3.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: f3.type }),
+              f3.required && /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-primary text-[9px]", children: t("req") })
+            ] })
+          ] }, f3.name)) }),
+          editable && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleAddField,
+              className: "mt-2 text-[11px] w-full",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
+                t("Add Field")
+              ]
+            }
+          )
         ] }),
         !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((t) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t.name }),
+          /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-1", children: traits2.map((t2) => /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] font-semibold", children: t2.name }),
             /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px]", children: [
-              t.stateCount,
+              t2.stateCount,
               " states"
             ] })
-          ] }, t.name)) })
+          ] }, t2.name)) })
         ] }),
         isExpanded && fromState && toState && /* @__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: "Transition" }),
@@ -47164,19 +47881,22 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEvent, { x: 8, y: 8, size: 12 }) }),
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-semibold text-[12px]", children: transitionEvent })
         ] }) }),
-        (transition?.guard ?? guard) && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+        (transition?.guard ?? guard ?? editable) && isExpanded && /* @__PURE__ */ jsx(Box, { className: "px-4 py-2 border-b border-border/40", children: /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
           /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlGuard, { x: 8, y: 8, size: 12 }) }),
           editable ? /* @__PURE__ */ jsx(
             Input,
             {
               defaultValue: formatExpression(transition?.guard ?? guard),
-              className: "flex-1 text-[11px] font-mono h-6"
+              placeholder: t("Guard expression"),
+              className: "flex-1 text-[11px] font-mono h-6",
+              onBlur: (e) => handleGuardChange(e.target.value)
             }
           ) : /* @__PURE__ */ jsx(Typography, { variant: "small", className: "font-mono text-[11px] text-muted-foreground", children: formatExpression(transition?.guard ?? guard) })
         ] }) }),
-        effectTypes.length > 0 && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
+        (effectTypes.length > 0 || editable) && isExpanded && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3 border-b border-border/40", children: [
           /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: [
-            "Effects (",
+            t("Effects"),
+            " (",
             effectTypes.length,
             ")"
           ] }),
@@ -47184,15 +47904,26 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
             const isKnown = KNOWN_EFFECTS.has(type);
             const category = EFFECT_TYPE_TO_CATEGORY[type];
             const catColor = category ? EFFECT_CATEGORY_COLORS[category] : void 0;
-            return /* @__PURE__ */ jsxs(Box, { className: "flex items-center gap-2", children: [
+            return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
               /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-muted-foreground text-[11px] w-4 text-right shrink-0", children: [
                 i + 1,
                 "."
               ] }),
               isKnown && /* @__PURE__ */ jsx("svg", { width: 16, height: 16, children: /* @__PURE__ */ jsx(AvlEffect, { x: 8, y: 8, effectType: type, size: 6, showBackground: true }) }),
-              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", style: { color: catColor?.color }, children: effectSummary(type) })
+              /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px] flex-1", style: { color: catColor?.color }, children: effectSummary(type) }),
+              editable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => handleRemoveEffect(i),
+                  className: "shrink-0 p-0.5 h-6 w-6",
+                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: "xs" })
+                }
+              )
             ] }, i);
-          }) })
+          }) }),
+          editable && /* @__PURE__ */ jsx(AddEffectButton, { onAdd: handleAddEffect })
         ] }),
         patterns.length > 0 && !selectedPattern && /* @__PURE__ */ jsxs(Box, { className: "px-4 py-3", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-muted-foreground text-[10px] uppercase tracking-wider mb-2", children: "render-ui" }),
@@ -47208,6 +47939,40 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
     ) })
   ] });
 }
+function AddEffectButton({ onAdd }) {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslate();
+  return /* @__PURE__ */ jsxs(Box, { className: "relative mt-2", children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setOpen((prev) => !prev),
+        className: "text-[11px] w-full",
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "plus", size: "xs", className: "mr-1" }),
+          t("Add Effect")
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx(Box, { className: "absolute z-20 top-full left-0 right-0 mt-1 bg-card border border-border rounded-md shadow-lg overflow-hidden", children: EFFECT_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "px-3 py-1.5 text-[11px] cursor-pointer hover:bg-muted/50 flex items-center gap-2",
+        onClick: () => {
+          onAdd(opt.value);
+          setOpen(false);
+        },
+        children: [
+          KNOWN_EFFECTS.has(opt.value) && /* @__PURE__ */ jsx("svg", { width: 14, height: 14, children: /* @__PURE__ */ jsx(AvlEffect, { x: 7, y: 7, effectType: opt.value, size: 5, showBackground: true }) }),
+          /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[11px]", children: opt.label })
+        ]
+      },
+      opt.value
+    )) })
+  ] });
+}
 function OrbPatternTree({ config, depth }) {
   if (!config || typeof config !== "object") return null;
   const { type, children, ...props } = config;
@@ -47255,19 +48020,25 @@ function FlowCanvasInner({
   onNodeClick,
   onLevelChange,
   initialOrbital,
+  initialLevel,
+  initialSelectedNode,
   editable,
-  onSchemaChange
+  onSchemaChange,
+  onPatternDelete,
+  onEventWire
 }) {
   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,
@@ -47335,8 +48106,15 @@ function FlowCanvasInner({
         setExpandedOrbital(void 0);
         onLevelChange?.("overview");
       }
+    } else if (e.key === "Delete" || e.key === "Backspace") {
+      const target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) return;
+      if (selectedPattern && selectedPattern.nodeData) {
+        onPatternDelete?.({ patternId: selectedPattern.patternId ?? "", nodeData: selectedPattern.nodeData });
+        setSelectedPattern(null);
+      }
     }
-  }, [level, onLevelChange, selectedNode]);
+  }, [level, onLevelChange, selectedNode, selectedPattern, onPatternDelete]);
   useEffect(() => {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
@@ -47351,6 +48129,22 @@ function FlowCanvasInner({
       onLevelChange?.("overview");
     }
   }, [level, onLevelChange, selectedNode]);
+  const handleConnect = useCallback((connection) => {
+    if (!connection.sourceHandle?.startsWith("event-") || !onEventWire) return;
+    const eventName = connection.sourceHandle.replace("event-", "");
+    const sourceNode = nodes.find((n) => n.id === connection.source);
+    const targetNode = nodes.find((n) => n.id === connection.target);
+    if (!sourceNode || !targetNode) return;
+    const srcData = sourceNode.data;
+    const tgtData = targetNode.data;
+    onEventWire({
+      eventName,
+      sourceOrbital: srcData.orbitalName ?? "",
+      targetOrbital: tgtData.orbitalName ?? "",
+      sourceTraitName: srcData.traitName,
+      targetTraitName: tgtData.traitName
+    });
+  }, [nodes, onEventWire]);
   const screenSizeKeys = ["mobile", "tablet", "desktop"];
   return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
@@ -47371,6 +48165,7 @@ function FlowCanvasInner({
               onEdgesChange,
               onNodeDoubleClick: handleNodeDoubleClick,
               onNodeClick: handleNodeClick,
+              onConnect: handleConnect,
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,
@@ -47508,7 +48303,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 })
@@ -47560,11 +48355,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)) })