@almadar/ui 2.42.0 → 2.45.0

package/dist/components/index.cjs

@@ -4086,9 +4086,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,
@@ -4353,11 +4353,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)
@@ -4385,7 +4385,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
       ),
@@ -4444,9 +4444,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",
@@ -4462,7 +4462,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
           }
@@ -4491,7 +4491,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
       ),
@@ -4527,7 +4527,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";
@@ -4548,7 +4548,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
@@ -4749,7 +4749,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
@@ -4828,7 +4828,7 @@ function DialogueBubble({
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
           speaker && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-yellow-400", children: speaker }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white leading-relaxed", children: text })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--color-foreground)] leading-relaxed", children: text })
         ] })
       ]
     }
@@ -4852,7 +4852,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
       ),
@@ -4908,7 +4908,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",
@@ -5881,27 +5881,27 @@ function useQuerySingleton(query) {
       store2.listeners.delete(listener);
     };
   }, [store2]);
-  const notifyListeners = React90.useCallback(() => {
+  const notifyListeners2 = React90.useCallback(() => {
     store2.listeners.forEach((listener) => listener());
   }, [store2]);
   const setSearch = React90.useCallback((value) => {
     store2.search = value;
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const setFilter = React90.useCallback((key, value) => {
     store2.filters = { ...store2.filters, [key]: value };
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const clearFilters = React90.useCallback(() => {
     store2.filters = {};
     store2.search = "";
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const setSort = React90.useCallback((field, direction) => {
     store2.sortField = field;
     store2.sortDirection = direction;
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   return {
     search: store2.search,
     setSearch,
@@ -8658,7 +8658,7 @@ var MarkdownContent = React90__namespace.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
                   }
                 );
@@ -8739,6 +8739,42 @@ var orbStyleOverrides = {
   "orb-op-async": { color: syntax.ORB_COLORS.dark.async }
 };
 var orbStyle = { ...dark__default.default, ...orbStyleOverrides };
+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 = React90__namespace.default.memo(
   ({
     code: rawCode,
@@ -8746,6 +8782,7 @@ var CodeBlock = React90__namespace.default.memo(
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
+    foldable: foldableProp,
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
@@ -8754,8 +8791,114 @@ var CodeBlock = React90__namespace.default.memo(
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = React90.useRef(null);
+    const codeRef = React90.useRef(null);
     const savedScrollLeftRef = React90.useRef(0);
     const [copied, setCopied] = React90.useState(false);
+    const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+    const [collapsed, setCollapsed] = React90.useState(() => /* @__PURE__ */ new Set());
+    const foldRegions = React90.useMemo(
+      () => isFoldable ? computeFoldRegions(code) : [],
+      [code, isFoldable]
+    );
+    const foldStartMap = React90.useMemo(() => {
+      const m = /* @__PURE__ */ new Map();
+      for (const r of foldRegions) m.set(r.start, r);
+      return m;
+    }, [foldRegions]);
+    const hiddenLines = React90.useMemo(() => {
+      const h = /* @__PURE__ */ new Set();
+      for (const r of foldRegions) {
+        if (!collapsed.has(r.start)) continue;
+        for (let i = r.start + 1; i <= r.end; i++) h.add(i);
+      }
+      return h;
+    }, [foldRegions, collapsed]);
+    const collapsedRef = React90.useRef(collapsed);
+    collapsedRef.current = collapsed;
+    const foldStartMapRef = React90.useRef(foldStartMap);
+    foldStartMapRef.current = foldStartMap;
+    const toggleFold = React90.useCallback((lineNum) => {
+      setCollapsed((prev) => {
+        const next = new Set(prev);
+        if (next.has(lineNum)) next.delete(lineNum);
+        else next.add(lineNum);
+        return next;
+      });
+    }, []);
+    const toggleFoldRef = React90.useRef(toggleFold);
+    toggleFoldRef.current = toggleFold;
+    React90.useEffect(() => {
+      setCollapsed(/* @__PURE__ */ new Set());
+    }, [code]);
+    const highlightedElement = React90.useMemo(
+      () => /* @__PURE__ */ jsxRuntime.jsx(
+        SyntaxHighlighter__default.default,
+        {
+          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]
+    );
+    React90.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]);
     React90.useLayoutEffect(() => {
       const el = scrollRef.current;
       return () => {
@@ -8786,13 +8929,14 @@ var CodeBlock = React90__namespace.default.memo(
         eventBus.emit("UI:COPY_CODE", { language, success: false });
       }
     };
+    const hasHeader = showLanguageBadge || showCopyButton;
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: `relative group ${className || ""}`, children: [
-      (showLanguageBadge || showCopyButton) && /* @__PURE__ */ jsxRuntime.jsxs(
+      hasHeader && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: language }),
             showCopyButton && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8822,31 +8966,14 @@ var CodeBlock = React90__namespace.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__ */ jsxRuntime.jsx(
-            SyntaxHighlighter__default.default,
-            {
-              PreTag: "div",
-              language,
-              style: activeStyle,
-              customStyle: {
-                backgroundColor: "transparent",
-                borderRadius: 0,
-                padding: 0,
-                margin: 0,
-                whiteSpace: "pre",
-                minWidth: "100%"
-              },
-              children: code
-            }
-          )
+          children: /* @__PURE__ */ jsxRuntime.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";
 var QuizBlock = ({
@@ -10034,7 +10161,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",
@@ -10095,7 +10222,7 @@ function StatBadge({
             animated: true
           }
         ),
-        format === "text" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-white", children: value })
+        format === "text" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-[var(--color-foreground)]", children: value })
       ]
     }
   );
@@ -10438,7 +10565,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
       ),
@@ -10540,7 +10667,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__ */ jsxRuntime.jsx(CardContent, { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex items-center gap-3 flex-wrap", children: [
@@ -10639,7 +10766,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: [
@@ -10686,7 +10813,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
       ),
@@ -10697,7 +10824,7 @@ function EnemyPlate({
             {
               variant: "caption",
               weight: "bold",
-              className: "text-white truncate",
+              className: "text-[var(--color-foreground)] truncate",
               children: name
             }
           ),
@@ -10764,7 +10891,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__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col items-center gap-0.5", children: [
@@ -10991,7 +11118,7 @@ function DialogueBox({
       tabIndex: 0,
       role: "dialog",
       "aria-label": "Dialogue",
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 my-4 bg-gray-900 bg-opacity-95 border-2 border-gray-600 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
         dialogue.portrait && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 p-4 border-r border-gray-700", children: /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
@@ -11003,7 +11130,7 @@ function DialogueBox({
         ) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-yellow-400 font-bold mb-2", children: dialogue.speaker }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-lg leading-relaxed min-h-[60px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--color-foreground)] text-lg leading-relaxed min-h-[60px]", children: [
             displayedText,
             isTyping && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "\u258C" })
           ] }),
@@ -11013,8 +11140,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();
@@ -11207,7 +11334,7 @@ function InventoryPanel({
     /* @__PURE__ */ jsxRuntime.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)`
@@ -11218,9 +11345,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),
@@ -11250,14 +11377,14 @@ function InventoryPanel({
     showTooltips && hoveredItem && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "font-semibold text-white", children: hoveredItem.name || hoveredItem.type }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold text-[var(--color-foreground)]", children: hoveredItem.name || hoveredItem.type }),
           hoveredItem.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-400 mt-1", children: hoveredItem.description }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
             "Quantity: ",
@@ -11269,9 +11396,9 @@ function InventoryPanel({
   ] });
 }
 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,
@@ -11328,7 +11455,7 @@ function GameMenu({
           /* @__PURE__ */ jsxRuntime.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)"
               },
@@ -11384,9 +11511,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);
@@ -11467,7 +11594,7 @@ function GameOverScreen({
               }
               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-400 text-sm mb-1", children: stat.label }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-2xl font-bold flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--color-foreground)] text-2xl font-bold flex items-center justify-center gap-2", children: [
                   stat.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { children: stat.icon }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: displayValue })
                 ] })
@@ -12661,7 +12788,7 @@ function IsometricCanvas({
         className: cn("relative w-full overflow-hidden rounded-lg", className),
         style: { height: viewportSize.height },
         "data-testid": "game-canvas-empty",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center h-full bg-slate-800 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
+        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center h-full bg-[var(--color-card)] rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { direction: "vertical", gap: "md", align: "center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "map", size: "xl" }),
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "text-slate-400", children: t("canvas.emptyMessage") || "No map data loaded" })
         ] }) })
@@ -13737,7 +13864,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"
             ),
@@ -13756,7 +13883,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"
             ),
@@ -13793,7 +13920,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"
             ),
@@ -13802,12 +13929,12 @@ var Lightbox = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-4 left-0 right-0 text-center", children: [
-          showCounter && safeImages.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white text-sm mb-1", children: [
+          showCounter && safeImages.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[var(--color-foreground)] text-sm mb-1", children: [
             index + 1,
             " of ",
             safeImages.length
           ] }),
-          currentImage?.caption && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white text-sm opacity-80 px-8", children: currentImage.caption })
+          currentImage?.caption && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--color-foreground)] text-sm opacity-80 px-8", children: currentImage.caption })
         ] })
       ]
     }
@@ -26880,7 +27007,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);
@@ -26911,10 +27038,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,
@@ -29026,25 +29153,92 @@ function generateCombatMessage(event) {
 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 r = record;
+  return String(r.id ?? r._id ?? r.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 entities2 = /* @__PURE__ */ new Map();
+  const ids = [];
+  for (const r of records) {
+    const rec = r;
+    const id = extractId(rec);
+    if (id) {
+      entities2.set(id, rec);
+      ids.push(id);
+    }
+  }
+  const prev = store.get(entityType);
+  store.set(entityType, { entities: entities2, 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 getSnapshot2(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;
@@ -29068,10 +29262,20 @@ function useEntityRef(entityType) {
   }, [entityType]);
   return React90.useSyncExternalStore(subscribeToStore, getSnapshotStable, () => []);
 }
-React90.createContext({
-  advance,
-  getSnapshot: getSnapshot2
-});
+var contextValue = {
+  setAll,
+  upsertOne,
+  addOne,
+  updateOne,
+  removeOne,
+  getSnapshot: getSnapshot2,
+  getById
+};
+React90.createContext(contextValue);
+var EntitySchemaContext = React90.createContext(null);
+function useEntitySchemaOptional() {
+  return React90.useContext(EntitySchemaContext);
+}
 var ClientEffectConfigContext = React90.createContext(null);
 ClientEffectConfigContext.Provider;
 
@@ -29598,11 +29802,11 @@ var AuthLayout = ({
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute inset-0 bg-gradient-to-br from-primary-600/90 to-primary-800/90" }),
           /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-3", children: [
-            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsx(
+            logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-xl flex items-center justify-center backdrop-blur", children: /* @__PURE__ */ jsxRuntime.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()
               }
             ) }),
@@ -29610,7 +29814,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-2xl font-bold text-white",
+                className: "text-2xl font-bold text-[var(--color-foreground)]",
                 children: appName
               }
             )
@@ -29620,7 +29824,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
@@ -29631,27 +29835,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__ */ jsxRuntime.jsxs(Box, { className: "mt-12 p-6 bg-white/10 rounded-xl backdrop-blur", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "mt-12 p-6 bg-[var(--color-card)]/10 rounded-xl backdrop-blur", children: [
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { className: "mt-4", gap: "sm", align: "center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-white/20 rounded-full" }),
+                /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-10 bg-[var(--color-card)]/20 rounded-full" }),
                 /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white font-medium",
+                      className: "text-[var(--color-foreground)] font-medium",
                       children: "Jane Doe"
                     }
                   ),
@@ -29659,7 +29863,7 @@ var AuthLayout = ({
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white/60 text-sm",
+                      className: "text-[var(--color-foreground)]/60 text-sm",
                       children: "CEO, Example Co."
                     }
                   )
@@ -29667,8 +29871,8 @@ var AuthLayout = ({
               ] })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-white/5 rounded-full" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-white/5 rounded-full" })
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -bottom-32 -right-32 w-96 h-96 bg-[var(--color-card)]/5 rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "absolute -top-16 -right-16 w-64 h-64 bg-[var(--color-card)]/5 rounded-full" })
         ]
       }
     ),
@@ -29685,7 +29889,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()
               }
             ) }),
@@ -32188,6 +32392,254 @@ function onDebugToggle(listener) {
   listeners5.add(listener);
   return () => listeners5.delete(listener);
 }
+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] = React90__namespace.useState(null);
+  const [traits2, setTraits] = React90__namespace.useState([]);
+  const [coveredEdges, setCoveredEdges] = React90__namespace.useState([]);
+  const [completedTraits, setCompletedTraits] = React90__namespace.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React90__namespace.useRef(null);
+  React90__namespace.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__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "w-64 flex-shrink-0 border-l border-border bg-[var(--color-card)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-2 py-1.5 border-b border-border overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "flex-1 flex items-center justify-center px-1 py-1", children: activeTrait && /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: graphW, height: graphH, viewBox: `0 0 ${graphW} ${graphH}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "mm-arrow", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#888" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "mm-arrow-green", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#22c55e" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "mm-arrow-cyan", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0,0 L6,2 L0,4", fill: "#06b6d4" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("marker", { id: "mm-arrow-yellow", markerWidth: "6", markerHeight: "4", refX: "6", refY: "2", orient: "auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1,
+              y1,
+              x2,
+              y2,
+              stroke,
+              strokeWidth,
+              opacity,
+              markerEnd,
+              children: isCurrent && /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "opacity", values: "1;0.4;1", dur: "0.8s", repeatCount: "indefinite" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+          isInitial && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: pos.x, cy: pos.y, r: nodeR + 3, fill: "none", stroke: "#3b82f6", strokeWidth: 1, opacity: 0.4 }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: pos.x,
+              cy: pos.y,
+              r: nodeR,
+              fill,
+              stroke: strokeColor,
+              strokeWidth: sw,
+              children: isCurrentState && /* @__PURE__ */ jsxRuntime.jsx("animate", { attributeName: "r", values: `${nodeR};${nodeR + 2};${nodeR}`, dur: "1s", repeatCount: "indefinite" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-green-500", children: [
+        "Engine: ",
+        engineCount,
+        "/",
+        totalTransitions
+      ] }),
+      domCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "caption", className: "text-[10px] font-mono text-cyan-500", children: [
+        "DOM: ",
+        domCount
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: walkStep.phase === "engine" ? "info" : "warning", size: "sm", className: "text-[9px]", children: walkStep.phase === "engine" ? "Engine" : "DOM" })
+    ] }) })
+  ] });
+}
+WalkMinimap.displayName = "WalkMinimap";
 function TraitsTab({ traits: traits2 }) {
   if (traits2.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -33011,25 +33463,25 @@ function EventDispatcherTab({ traits: traits2, schema }) {
 EventDispatcherTab.displayName = "EventDispatcherTab";
 function ServerResponseRow({ sr }) {
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-purple-700/50 py-0.5 text-[10px] font-mono", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-[10px] font-mono", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: sr.success ? "text-green-400" : "text-red-400", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-purple-300", children: sr.orbitalName }),
-      sr.clientEffects > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-purple-900/50 text-purple-300", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-300", children: sr.orbitalName }),
+      sr.clientEffects > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-blue-900/50 text-blue-300", children: [
+      sr.emittedEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-blue-500/15 text-blue-300", children: [
         "emit: ",
         sr.emittedEvents.join(", ")
       ] }),
-      sr.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1 rounded bg-red-900/50 text-red-400 truncate max-w-[300px]", children: sr.error })
+      sr.error && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-gray-800 text-gray-300", children: [
+    entityEntries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 mt-0.5", children: entityEntries.map(([name, count]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 rounded bg-[var(--color-card)] text-foreground", children: [
       name,
       ": ",
       count,
@@ -33042,24 +33494,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__ */ jsxRuntime.jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1.5 w-1.5 h-1.5 rounded-full flex-shrink-0 bg-purple-500" }),
         /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warning", size: "sm", className: "flex-shrink-0", children: trace.event }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-400 flex-shrink-0", children: "server response" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-purple-600 dark:text-purple-400 flex-shrink-0", children: "server response" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(ServerResponseRow, { sr: trace.serverResponse })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-0.5 border-b border-gray-800 last:border-0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-0.5 border-b border-border last:border-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2 text-xs font-mono", children: [
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant: "info", size: "sm", className: "flex-shrink-0", children: trace.event }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-300 flex-shrink-0", children: trace.traitName }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground flex-shrink-0", children: trace.traitName }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground/70 flex-shrink-0", children: [
         trace.from,
         " ",
         "\u2192",
@@ -33069,12 +33521,12 @@ function TransitionRow({ trace }) {
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-gray-500 ml-0.5", children: JSON.stringify(eff.args).slice(0, 40) })
+      eff.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground/50 ml-0.5", children: JSON.stringify(eff.args).slice(0, 40) })
     ] }, i)) }),
     trace.serverResponse && /* @__PURE__ */ jsxRuntime.jsx(ServerResponseRow, { sr: trace.serverResponse })
   ] });
@@ -33089,15 +33541,6 @@ function VerifyModePanel({
 }) {
   const scrollRef = React90__namespace.useRef(null);
   const prevCountRef = React90__namespace.useRef(0);
-  const [walkStep, setWalkStep] = React90__namespace.useState(null);
-  React90__namespace.useEffect(() => {
-    const interval = setInterval(() => {
-      const w = window;
-      const step = w.__orbitalWalkStep;
-      if (step) setWalkStep(step);
-    }, 300);
-    return () => clearInterval(interval);
-  }, []);
   React90__namespace.useEffect(() => {
     if (transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -33110,49 +33553,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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant: failedChecks > 0 ? "danger" : "success", size: "sm", children: failedChecks > 0 ? `${failedChecks} fail` : "OK" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-gray-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground/70", children: [
             localCount,
             " local"
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-purple-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-purple-600 dark:text-purple-400", children: [
             serverCount,
             " server"
           ] }),
-          traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-cyan-400 truncate max-w-[400px]", children: traitStates })
+          traitStates && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-cyan-600 dark:text-cyan-400 truncate max-w-[400px]", children: traitStates })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsxRuntime.jsx(TransitionRow, { trace }, trace.id)) }) }) }),
-          walkStep && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "text-cyan-400 font-bold mb-1", children: [
-              "Walk Step ",
-              walkStep.stepIndex,
-              "/",
-              walkStep.stepTotal
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-300 mb-1", children: walkStep.traitName }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.from }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "--" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-green-300", children: walkStep.event }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "-->" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-yellow-300", children: walkStep.to })
-            ] }),
-            walkStep.guardCase && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: walkStep.guardCase === "pass" ? "text-green-400" : "text-red-400", children: [
-              "guard: ",
-              walkStep.guardCase
-            ] }),
-            walkStep.isRepositioning && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-500 italic", children: "repositioning" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: walkStep.accepted ? "text-green-400 mt-1" : "text-red-400 mt-1", children: walkStep.accepted ? "\u2713 accepted" : "\u2717 rejected" })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1", children: transitions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground/50 text-xs font-mono py-2 text-center", children: "Waiting for transitions..." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: transitions.map((trace) => /* @__PURE__ */ jsxRuntime.jsx(TransitionRow, { trace }, trace.id)) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(WalkMinimap, {})
         ] })
       ]
     }
@@ -33377,7 +33799,7 @@ function RuntimeDebugger({
             className: "runtime-debugger__tabs"
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "runtime-debugger__footer", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-gray-500", children: "Press ` to toggle | window.__orbitalVerification for automation" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "runtime-debugger__footer", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "text-foreground/50", children: "Press ` to toggle | window.__orbitalVerification for automation" }) })
       ] })
     }
   );
@@ -34088,6 +34510,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",
@@ -34463,13 +34941,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,
@@ -34481,7 +34960,8 @@ function renderPatternChildren(children, onDismiss, parentId = "root") {
       SlotContentRenderer,
       {
         content: childContent,
-        onDismiss
+        onDismiss,
+        patternPath: childPath
       },
       childId
     );
@@ -34513,16 +34993,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;
@@ -34538,6 +35022,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__ */ jsxRuntime.jsx(
       Box,
       {
@@ -34546,6 +35038,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__ */ jsxRuntime.jsx(PatternComponent, { ...finalProps, children: renderedChildren })
       }
     );
@@ -37220,6 +37715,98 @@ function usePinchZoom(options = {}) {
     resetZoom
   };
 }
+var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+function useDraggable({ payload, disabled = false }) {
+  const [isDragging, setIsDragging] = React90.useState(false);
+  const eventBus = useEventBus();
+  const handleDragStart = React90.useCallback(
+    (e) => {
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      e.dataTransfer.setData(ALMADAR_DND_MIME, JSON.stringify(payload));
+      e.dataTransfer.effectAllowed = "copy";
+      setIsDragging(true);
+      eventBus.emit("UI:DRAG_START", { kind: payload.kind, data: payload.data });
+    },
+    [disabled, payload, eventBus]
+  );
+  const handleDragEnd = React90.useCallback(
+    (e) => {
+      setIsDragging(false);
+      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
+    },
+    [payload, eventBus]
+  );
+  const dragProps = React90.useMemo(
+    () => ({
+      draggable: !disabled,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      "aria-grabbed": isDragging
+    }),
+    [disabled, handleDragStart, handleDragEnd, isDragging]
+  );
+  return { dragProps, isDragging };
+}
+function parsePayload(e) {
+  try {
+    const raw = e.dataTransfer.getData(ALMADAR_DND_MIME);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (typeof parsed.kind !== "string" || !parsed.data) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function hasAlmadarPayload(e) {
+  return e.dataTransfer.types.includes(ALMADAR_DND_MIME);
+}
+function useDropZone({ accepts, onDrop, disabled = false }) {
+  const [isOver, setIsOver] = React90.useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = React90.useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = React90.useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = React90.useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsOver(false);
+      if (disabled) return;
+      const payload = parsePayload(e);
+      if (!payload) return;
+      if (!accepts.includes(payload.kind)) return;
+      const position = { x: e.clientX, y: e.clientY };
+      onDrop(payload, position);
+      eventBus.emit("UI:DROP", { kind: payload.kind, data: payload.data, ...position });
+    },
+    [disabled, accepts, onDrop, eventBus]
+  );
+  const dropProps = React90.useMemo(
+    () => ({
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop
+    }),
+    [handleDragOver, handleDragLeave, handleDrop]
+  );
+  return { dropProps, isOver };
+}
 var API_BASE = typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 function getUserId() {
   return localStorage.getItem("userId") || "anonymous";
@@ -37297,6 +37884,7 @@ function useGitHubBranches(owner, repo, enabled = true) {
 }
 
 exports.ALL_PRESETS = ALL_PRESETS;
+exports.ALMADAR_DND_MIME = ALMADAR_DND_MIME;
 exports.AR_BOOK_FIELDS = AR_BOOK_FIELDS;
 exports.AboutPageTemplate = AboutPageTemplate;
 exports.Accordion = Accordion;
@@ -37641,6 +38229,8 @@ exports.useDeepAgentGeneration = useDeepAgentGeneration;
 exports.useDeleteEntity = useDeleteEntity;
 exports.useDisconnectGitHub = useDisconnectGitHub;
 exports.useDragReorder = useDragReorder;
+exports.useDraggable = useDraggable;
+exports.useDropZone = useDropZone;
 exports.useEmitEvent = useEmitEvent;
 exports.useEntities = useEntities;
 exports.useEntitiesByType = useEntitiesByType;