@almadar/ui 2.42.0 → 2.45.0

package/dist/components/index.js

@@ -1,5 +1,5 @@
 import * as React90 from 'react';
-import React90__default, { useCallback, createContext, useState, useRef, useEffect, useLayoutEffect, lazy, useContext, useMemo, useId, Suspense, useSyncExternalStore } from 'react';
+import React90__default, { useCallback, createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, lazy, useContext, useId, Suspense, useSyncExternalStore } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as LucideIcons from 'lucide-react';
@@ -4040,9 +4040,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,
@@ -4307,11 +4307,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)
@@ -4339,7 +4339,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
       ),
@@ -4398,9 +4398,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",
@@ -4416,7 +4416,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
           }
@@ -4445,7 +4445,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
       ),
@@ -4481,7 +4481,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";
@@ -4502,7 +4502,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
@@ -4703,7 +4703,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
@@ -4782,7 +4782,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 })
         ] })
       ]
     }
@@ -4806,7 +4806,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
       ),
@@ -4862,7 +4862,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",
@@ -5835,27 +5835,27 @@ function useQuerySingleton(query) {
       store2.listeners.delete(listener);
     };
   }, [store2]);
-  const notifyListeners = useCallback(() => {
+  const notifyListeners2 = useCallback(() => {
     store2.listeners.forEach((listener) => listener());
   }, [store2]);
   const setSearch = useCallback((value) => {
     store2.search = value;
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const setFilter = useCallback((key, value) => {
     store2.filters = { ...store2.filters, [key]: value };
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const clearFilters = useCallback(() => {
     store2.filters = {};
     store2.search = "";
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   const setSort = useCallback((field, direction) => {
     store2.sortField = field;
     store2.sortDirection = direction;
-    notifyListeners();
-  }, [store2, notifyListeners]);
+    notifyListeners2();
+  }, [store2, notifyListeners2]);
   return {
     search: store2.search,
     setSearch,
@@ -8612,7 +8612,7 @@ var MarkdownContent = React90__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
                   }
                 );
@@ -8693,6 +8693,42 @@ var orbStyleOverrides = {
   "orb-op-async": { color: ORB_COLORS.dark.async }
 };
 var orbStyle = { ...dark, ...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__default.memo(
   ({
     code: rawCode,
@@ -8700,6 +8736,7 @@ var CodeBlock = React90__default.memo(
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
+    foldable: foldableProp,
     className
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
@@ -8708,8 +8745,114 @@ var CodeBlock = React90__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 r of foldRegions) m.set(r.start, r);
+      return m;
+    }, [foldRegions]);
+    const hiddenLines = 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 = 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 () => {
@@ -8740,13 +8883,14 @@ var CodeBlock = React90__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(
@@ -8776,31 +8920,14 @@ var CodeBlock = React90__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";
 var QuizBlock = ({
@@ -9988,7 +10115,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",
@@ -10049,7 +10176,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 })
       ]
     }
   );
@@ -10392,7 +10519,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
       ),
@@ -10494,7 +10621,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: [
@@ -10593,7 +10720,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: [
@@ -10640,7 +10767,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
       ),
@@ -10651,7 +10778,7 @@ function EnemyPlate({
             {
               variant: "caption",
               weight: "bold",
-              className: "text-white truncate",
+              className: "text-[var(--color-foreground)] truncate",
               children: name
             }
           ),
@@ -10718,7 +10845,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: [
@@ -10945,7 +11072,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",
           {
@@ -10957,7 +11084,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" })
           ] }),
@@ -10967,8 +11094,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();
@@ -11161,7 +11288,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)`
@@ -11172,9 +11299,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),
@@ -11204,14 +11331,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: ",
@@ -11223,9 +11350,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,
@@ -11282,7 +11409,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)"
               },
@@ -11338,9 +11465,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);
@@ -11421,7 +11548,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 })
                 ] })
@@ -12615,7 +12742,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" })
         ] }) })
@@ -13691,7 +13818,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"
             ),
@@ -13710,7 +13837,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"
             ),
@@ -13747,7 +13874,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"
             ),
@@ -13756,12 +13883,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 })
         ] })
       ]
     }
@@ -26834,7 +26961,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);
@@ -26865,10 +26992,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,
@@ -28980,25 +29107,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;
@@ -29022,10 +29216,20 @@ function useEntityRef(entityType) {
   }, [entityType]);
   return useSyncExternalStore(subscribeToStore, getSnapshotStable, () => []);
 }
-createContext({
-  advance,
-  getSnapshot: getSnapshot2
-});
+var contextValue = {
+  setAll,
+  upsertOne,
+  addOne,
+  updateOne,
+  removeOne,
+  getSnapshot: getSnapshot2,
+  getById
+};
+createContext(contextValue);
+var EntitySchemaContext = createContext(null);
+function useEntitySchemaOptional() {
+  return useContext(EntitySchemaContext);
+}
 var ClientEffectConfigContext = createContext(null);
 ClientEffectConfigContext.Provider;
 
@@ -29552,11 +29756,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()
               }
             ) }),
@@ -29564,7 +29768,7 @@ var AuthLayout = ({
               Typography,
               {
                 variant: "body1",
-                className: "text-2xl font-bold text-white",
+                className: "text-2xl font-bold text-[var(--color-foreground)]",
                 children: appName
               }
             )
@@ -29574,7 +29778,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
@@ -29585,27 +29789,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"
                     }
                   ),
@@ -29613,7 +29817,7 @@ var AuthLayout = ({
                     Typography,
                     {
                       variant: "body1",
-                      className: "text-white/60 text-sm",
+                      className: "text-[var(--color-foreground)]/60 text-sm",
                       children: "CEO, Example Co."
                     }
                   )
@@ -29621,8 +29825,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" })
         ]
       }
     ),
@@ -29639,7 +29843,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()
               }
             ) }),
@@ -32142,6 +32346,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.useState(null);
+  const [traits2, setTraits] = React90.useState([]);
+  const [coveredEdges, setCoveredEdges] = React90.useState([]);
+  const [completedTraits, setCompletedTraits] = React90.useState(/* @__PURE__ */ new Set());
+  const prevTraitRef = React90.useRef(null);
+  React90.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";
 function TraitsTab({ traits: traits2 }) {
   if (traits2.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -32965,25 +33417,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,
@@ -32996,24 +33448,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",
@@ -33023,12 +33475,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 })
   ] });
@@ -33043,15 +33495,6 @@ function VerifyModePanel({
 }) {
   const scrollRef = React90.useRef(null);
   const prevCountRef = React90.useRef(0);
-  const [walkStep, setWalkStep] = React90.useState(null);
-  React90.useEffect(() => {
-    const interval = setInterval(() => {
-      const w = window;
-      const step = w.__orbitalWalkStep;
-      if (step) setWalkStep(step);
-    }, 300);
-    return () => clearInterval(interval);
-  }, []);
   React90.useEffect(() => {
     if (transitions.length > prevCountRef.current && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -33064,49 +33507,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, {})
         ] })
       ]
     }
@@ -33331,7 +33753,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" }) })
       ] })
     }
   );
@@ -34042,6 +34464,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",
@@ -34417,13 +34895,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,
@@ -34435,7 +34914,8 @@ function renderPatternChildren(children, onDismiss, parentId = "root") {
       SlotContentRenderer,
       {
         content: childContent,
-        onDismiss
+        onDismiss,
+        patternPath: childPath
       },
       childId
     );
@@ -34467,16 +34947,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;
@@ -34492,6 +34976,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,
       {
@@ -34500,6 +34992,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 })
       }
     );
@@ -37174,6 +37669,98 @@ function usePinchZoom(options = {}) {
     resetZoom
   };
 }
+var ALMADAR_DND_MIME = "application/x-almadar-dnd";
+function useDraggable({ payload, disabled = false }) {
+  const [isDragging, setIsDragging] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragStart = 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 = useCallback(
+    (e) => {
+      setIsDragging(false);
+      eventBus.emit("UI:DRAG_END", { kind: payload.kind, data: payload.data });
+    },
+    [payload, eventBus]
+  );
+  const dragProps = 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] = useState(false);
+  const eventBus = useEventBus();
+  const handleDragOver = useCallback(
+    (e) => {
+      if (disabled) return;
+      if (!hasAlmadarPayload(e)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsOver(true);
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      setIsOver(false);
+    },
+    []
+  );
+  const handleDrop = 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 = 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";
@@ -37250,4 +37837,4 @@ function useGitHubBranches(owner, repo, enabled = true) {
   });
 }
 
-export { ALL_PRESETS, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, DialogueBox, DialogueBubble, Divider, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ENTITY_EVENTS, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDataProvider, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LineChart, List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, ViolationAlert, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, entityDataKeys, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useDragReorder, useEmitEvent, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntityMutations, useEntitySuspense, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, useOrbitalMutations, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTranslate, useUIEvents, useUISlotManager, useUpdateEntity, useValidation };
+export { ALL_PRESETS, ALMADAR_DND_MIME, AR_BOOK_FIELDS, AboutPageTemplate, Accordion, ActionButton, ActionButtons, Card2 as ActionCard, ActionPalette, ActionTile, Alert, AnimatedCounter, AnimatedGraphic, AnimatedReveal, ArticleSection, AuthLayout, Avatar, Badge, BattleBoard, BattleTemplate, BookChapterView, BookCoverPage, BookNavBar, BookTableOfContents, BookViewer, Box, Breadcrumb, BuilderBoard, Button, ButtonGroup, CTABanner, CalendarGrid, CanvasEffect, Card, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, CaseStudyCard, CaseStudyOrganism, CastleBoard, CastleTemplate, Center, Chart, ChartLegend, Checkbox, ChoiceButton, ClassifierBoard, CodeBlock, CodeExample, CodeView, CodeViewer, CollapsibleSection, CombatLog, ComboCounter, CommunityLinks, ConditionalWrapper, ConfettiEffect, ConfirmDialog, Container, ContentRenderer, ContentSection, ControlButton, CounterTemplate, CraftingRecipe, DEFAULT_SLOTS, DIAMOND_TOP_Y, DPad, DamageNumber, DashboardGrid, DashboardLayout, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DebuggerBoard, DetailPanel, DialogueBox, DialogueBubble, Divider, DocumentViewer, StateMachineView as DomStateMachineVisualizer, Drawer, DrawerSlot, ENTITY_EVENTS, EdgeDecoration, EditorCheckbox, EditorSelect, EditorSlider, EditorTextInput, EditorToolbar, EmptyState, EnemyPlate, EntityDataProvider, EntityDisplayEvents, ErrorBoundary, ErrorState, EventHandlerBoard, EventLog, FEATURE_COLORS, FEATURE_TYPES, FLOOR_HEIGHT, FeatureCard, FeatureDetailPageTemplate, FeatureGrid, FeatureGridOrganism, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormActions, FormField, FormLayout, FormSection, FormSectionHeader, GameAudioContext, GameAudioProvider, GameAudioToggle, GameCanvas2D, GameHud, GameMenu, GameOverScreen, GameShell, GameTemplate, GenericAppTemplate, GeometricPattern, GraphCanvas, GraphView, Grid, HStack, Header, Heading, HealthBar, HealthPanel, HeroOrganism, HeroSection, I18nProvider, IDENTITY_BOOK_FIELDS, Icon, InfiniteScrollSentinel, Input, InputGroup, InstallBox, InventoryGrid, InventoryPanel, IsometricCanvas, ItemSlot, JazariStateMachine, Label, LandingPageTemplate, LawReferenceTooltip, Lightbox, LineChart, List, LoadingState, MapView, MarkdownContent, MarketingStatCard, MasterDetail, MediaGallery, Menu, Meter, MiniMap, Modal, ModalSlot, Navigation, NegotiatorBoard, NotifyListener, NumberStepper, ObjectRulePanel, StateMachineView as OrbitalStateMachineView, OrbitalVisualization, Overlay, PageHeader, Pagination, PatternTile, PhysicsManager, PlatformerCanvas, Popover, PowerupSlots, PricingCard, PricingGrid, PricingOrganism, PricingPageTemplate, ProgressBar, ProgressDots, PullToRefresh, QuestTracker, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ResourceBar, ResourceCounter, RuleEditor, RuntimeDebugger, SHEET_COLUMNS, SPRITE_SHEET_LAYOUT, ScaledDiagram, ScoreBoard, ScoreDisplay, SearchInput, Section, SectionHeader, Select, SequenceBar, SequencerBoard, ServiceCatalog, ShowcaseCard, ShowcaseOrganism, SidePanel, Sidebar, SignaturePad, SimpleGrid, SimulationCanvas, SimulationControls, SimulationGraph, SimulatorBoard, Skeleton, SlotContentRenderer, SocialProof, SortableList, Spacer, Spinner, Split, SplitPane, SplitSection, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateArchitectBoard, StateIndicator, StateMachineView, StateNode2 as StateNode, StatsGrid, StatsOrganism, StatusBar, StatusDot, StatusEffect, StepFlow, StepFlowOrganism, SwipeableRow, Switch, TERRAIN_COLORS, TILE_HEIGHT, TILE_WIDTH, TabbedContainer, Table, Tabs, TagCloud, TeamCard, TeamOrganism, TerrainPalette, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Timeline, TimerDisplay, Toast, ToastSlot, Tooltip, TraitSlot, TraitStateViewer, TransitionArrow, TrendIndicator, TurnIndicator, TurnPanel, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UncontrolledBattleBoard, UnitCommandBar, UploadDropZone, VStack, VariablePanel, ViolationAlert, WaypointMarker, WizardContainer, WizardNavigation, WizardProgress, WorldMapBoard, WorldMapTemplate, XPBar, applyTemporaryEffect, calculateAttackTargets, calculateDamage, calculateValidMoves, clearEntities, cn, combatAnimations, combatClasses, combatEffects, createInitialGameState, createTranslate, createUnitAnimationState, drawSprite, entityDataKeys, generateCombatMessage, getAllEntities, getByType, getCurrentFrame, getEntity, getSingleton, getTileDimensions, inferDirection, isoToScreen, mapBookData, parseQueryBinding, pendulum, projectileMotion, removeEntity, resolveFieldMap, resolveFrame, resolveSheetDirection, screenToIso, spawnEntity, springOscillator, tickAnimationState, transitionAnimation, updateEntity, updateSingleton, useAgentChat, useAuthContext, useBattleState, useCamera, useCompile, useConnectGitHub, useCreateEntity, useDeepAgentGeneration, useDeleteEntity, useDisconnectGitHub, useDragReorder, useDraggable, useDropZone, useEmitEvent, useEntities, useEntitiesByType, useEntity, useEntity2 as useEntityById, useEntityDataAdapter, useEntityDetail, useEntityList, useEntityListSuspense, useEntityMutations, useEntitySuspense, useEventBus, useEventListener, useExtensions, useFileEditor, useFileSystem, useGameAudio, useGameAudioContext, useGitHubBranches, useGitHubRepo, useGitHubRepos, useGitHubStatus, useImageCache, useInfiniteScroll, useInput, useLongPress, useOrbitalHistory, useOrbitalMutations, usePhysics, usePhysics2D, usePinchZoom, usePlayer, usePreview, usePullToRefresh, useQuerySingleton, useResolvedEntity, useSelectedEntity, useSendOrbitalEvent, useSingletonEntity, useSpriteAnimations, useSwipeGesture, useTranslate, useUIEvents, useUISlotManager, useUpdateEntity, useValidation };