@almadar/ui 5.47.0 → 5.49.0

package/dist/components/game/molecules/three/index.cjs

@@ -13,6 +13,7 @@ var OBJLoader_js = require('three/examples/jsm/loaders/OBJLoader.js');
 var providers = require('@almadar/ui/providers');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var LucideIcons = require('lucide-react');
 var postprocessing = require('@react-three/postprocessing');
 var hooks = require('@almadar/ui/hooks');
 
@@ -38,6 +39,7 @@ function _interopNamespace(e) {
 
 var React11__default = /*#__PURE__*/_interopDefault(React11);
 var THREE6__namespace = /*#__PURE__*/_interopNamespace(THREE6);
+var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -2280,6 +2282,9 @@ function preloadFeatures(urls) {
     }
   });
 }
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
 var DEFAULT_GRID_CONFIG = {
   cellSize: 1,
   offsetX: 0,
@@ -2713,11 +2718,10 @@ var GameCanvas3D = React11.forwardRef(
           "div",
           {
             ref: containerRef,
-            className: `game-canvas-3d ${className || ""}`,
+            className: cn("game-canvas-3d relative w-full h-full min-h-[85vh] overflow-hidden", className),
             "data-orientation": orientation,
             "data-camera-mode": cameraMode,
             "data-overlay": overlay,
-            style: { position: "relative", width: "100%", height: "100%", minHeight: "85vh", overflow: "hidden" },
             children: [
               /* @__PURE__ */ jsxRuntime.jsxs(
                 fiber.Canvas,
@@ -2831,276 +2835,940 @@ var GameCanvas3D = React11.forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
+var DEFAULT_FAMILY = "lucide";
+var VALID_FAMILIES = [
+  "lucide",
+  "phosphor-outline",
+  "phosphor-fill",
+  "phosphor-duotone",
+  "tabler",
+  "fa-solid"
+];
+function getCurrentIconFamily() {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return DEFAULT_FAMILY;
+  }
+  const raw = getComputedStyle(document.documentElement).getPropertyValue("--icon-family").trim().replace(/^["']|["']$/g, "");
+  return VALID_FAMILIES.includes(raw) ? raw : DEFAULT_FAMILY;
 }
-
-// components/core/atoms/Box.tsx
-var paddingStyles = {
-  none: "p-0",
-  xs: "p-1",
-  sm: "p-2",
-  md: "p-4",
-  lg: "p-6",
-  xl: "p-8",
-  "2xl": "p-12"
-};
-var paddingXStyles = {
-  none: "px-0",
-  xs: "px-1",
-  sm: "px-2",
-  md: "px-4",
-  lg: "px-6",
-  xl: "px-8",
-  "2xl": "px-12"
+var cachedFamily = null;
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+function ensureObserver() {
+  if (typeof window === "undefined" || observer) return;
+  observer = new MutationObserver(() => {
+    const next = getCurrentIconFamily();
+    if (next !== cachedFamily) {
+      cachedFamily = next;
+      listeners.forEach((fn) => fn());
+    }
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["data-theme", "style"]
+  });
+  cachedFamily = getCurrentIconFamily();
+}
+function subscribeIconFamily(notify) {
+  ensureObserver();
+  listeners.add(notify);
+  return () => {
+    listeners.delete(notify);
+  };
+}
+function getIconFamilySnapshot() {
+  if (cachedFamily !== null) return cachedFamily;
+  cachedFamily = getCurrentIconFamily();
+  return cachedFamily;
+}
+function getIconFamilyServerSnapshot() {
+  return DEFAULT_FAMILY;
+}
+function useIconFamily() {
+  return React11.useSyncExternalStore(
+    subscribeIconFamily,
+    getIconFamilySnapshot,
+    getIconFamilyServerSnapshot
+  );
+}
+function kebabToPascal(name) {
+  return name.split("-").map((part) => {
+    if (/^\d+$/.test(part)) return part;
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  }).join("");
+}
+var libPromises = /* @__PURE__ */ new Map();
+function loadLib(key, importer) {
+  let p = libPromises.get(key);
+  if (!p) {
+    p = importer().then((m) => m);
+    libPromises.set(key, p);
+  }
+  return p;
+}
+function lazyFamilyIcon(libKey, importer, pick, fallbackName, family) {
+  const Lazy = React11__default.default.lazy(async () => {
+    const lib = await loadLib(libKey, importer);
+    const Comp = pick(lib);
+    if (!Comp) {
+      warnFallback(fallbackName, family);
+      return { default: makeLucideAdapter(fallbackName, true) };
+    }
+    return { default: Comp };
+  });
+  const Wrapped = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+    React11__default.default.Suspense,
+    {
+      fallback: /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: props.className,
+          style: { display: "inline-block", ...props.style }
+        }
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(Lazy, { ...props })
+    }
+  );
+  Wrapped.displayName = `Lazy.${libKey}.${fallbackName}`;
+  return Wrapped;
+}
+var lucideAliases = {
+  close: LucideIcons__namespace.X,
+  trash: LucideIcons__namespace.Trash2,
+  loader: LucideIcons__namespace.Loader2,
+  stop: LucideIcons__namespace.Square,
+  volume: LucideIcons__namespace.Volume2,
+  "volume-off": LucideIcons__namespace.VolumeX,
+  refresh: LucideIcons__namespace.RefreshCw,
+  share: LucideIcons__namespace.Share2,
+  "sort-asc": LucideIcons__namespace.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons__namespace.ArrowDownNarrowWide
 };
-var paddingYStyles = {
-  none: "py-0",
-  xs: "py-1",
-  sm: "py-2",
-  md: "py-4",
-  lg: "py-6",
-  xl: "py-8",
-  "2xl": "py-12"
+function resolveLucide(name) {
+  if (lucideAliases[name]) return lucideAliases[name];
+  const pascal = kebabToPascal(name);
+  const lucideMap = LucideIcons__namespace;
+  const direct = lucideMap[pascal];
+  if (direct && typeof direct === "object") return direct;
+  const asIs = lucideMap[name];
+  if (asIs && typeof asIs === "object") return asIs;
+  return LucideIcons__namespace.HelpCircle;
+}
+var phosphorAliases = {
+  // lucide name → phosphor PascalCase name
+  // Actions
+  plus: "Plus",
+  minus: "Minus",
+  x: "X",
+  check: "Check",
+  close: "X",
+  edit: "PencilSimple",
+  pencil: "PencilSimple",
+  trash: "Trash",
+  save: "FloppyDisk",
+  copy: "Copy",
+  share: "Share",
+  send: "PaperPlaneRight",
+  download: "DownloadSimple",
+  upload: "UploadSimple",
+  archive: "Archive",
+  refresh: "ArrowsClockwise",
+  loader: "CircleNotch",
+  link: "Link",
+  paperclip: "Paperclip",
+  // Navigation
+  "chevron-down": "CaretDown",
+  "chevron-up": "CaretUp",
+  "chevron-left": "CaretLeft",
+  "chevron-right": "CaretRight",
+  "arrow-up": "ArrowUp",
+  "arrow-down": "ArrowDown",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  menu: "List",
+  more: "DotsThree",
+  "more-vertical": "DotsThreeVertical",
+  "more-horizontal": "DotsThree",
+  external: "ArrowSquareOut",
+  "external-link": "ArrowSquareOut",
+  // Files
+  file: "File",
+  "file-text": "FileText",
+  "file-plus": "FilePlus",
+  "file-minus": "FileMinus",
+  folder: "Folder",
+  "folder-open": "FolderOpen",
+  document: "FileText",
+  // Charts
+  "bar-chart": "ChartBar",
+  "bar-chart-2": "ChartBar",
+  "bar-chart-3": "ChartBar",
+  "line-chart": "ChartLine",
+  "pie-chart": "ChartPie",
+  activity: "Pulse",
+  "trending-up": "TrendUp",
+  "trending-down": "TrendDown",
+  // Messages
+  message: "ChatCircle",
+  "message-circle": "ChatCircle",
+  "message-square": "ChatText",
+  "messages-square": "ChatsCircle",
+  comment: "ChatCircle",
+  comments: "ChatsCircle",
+  inbox: "Tray",
+  mail: "Envelope",
+  envelope: "Envelope",
+  // Status
+  "alert-circle": "WarningCircle",
+  "alert-triangle": "Warning",
+  "check-circle": "CheckCircle",
+  "x-circle": "XCircle",
+  info: "Info",
+  "help-circle": "Question",
+  "life-buoy": "Lifebuoy",
+  lifebuoy: "Lifebuoy",
+  warning: "Warning",
+  error: "WarningCircle",
+  // Media
+  image: "Image",
+  video: "VideoCamera",
+  film: "FilmStrip",
+  camera: "Camera",
+  music: "MusicNote",
+  play: "Play",
+  pause: "Pause",
+  stop: "Stop",
+  "skip-forward": "SkipForward",
+  "skip-back": "SkipBack",
+  volume: "SpeakerHigh",
+  "volume-2": "SpeakerHigh",
+  "volume-x": "SpeakerX",
+  mic: "Microphone",
+  "mic-off": "MicrophoneSlash",
+  // People
+  user: "User",
+  users: "Users",
+  "user-plus": "UserPlus",
+  "user-check": "UserCheck",
+  // Time
+  calendar: "Calendar",
+  clock: "Clock",
+  timer: "Timer",
+  // Location
+  map: "MapTrifold",
+  "map-pin": "MapPin",
+  navigation: "NavigationArrow",
+  compass: "Compass",
+  globe: "Globe",
+  target: "Target",
+  // Project / layout
+  kanban: "Kanban",
+  list: "List",
+  table: "Table",
+  grid: "GridFour",
+  layout: "Layout",
+  columns: "Columns",
+  rows: "Rows",
+  // Misc
+  bell: "Bell",
+  bookmark: "Bookmark",
+  briefcase: "Briefcase",
+  flag: "Flag",
+  tag: "Tag",
+  tags: "Tag",
+  star: "Star",
+  heart: "Heart",
+  home: "House",
+  settings: "Gear",
+  eye: "Eye",
+  "eye-off": "EyeSlash",
+  lock: "Lock",
+  unlock: "LockOpen",
+  key: "Key",
+  shield: "Shield",
+  search: "MagnifyingGlass",
+  filter: "Funnel",
+  "sort-asc": "SortAscending",
+  "sort-desc": "SortDescending",
+  zap: "Lightning",
+  sparkles: "Sparkle",
+  // Code
+  code: "Code",
+  terminal: "Terminal",
+  database: "Database",
+  server: "HardDrives",
+  cloud: "Cloud",
+  wifi: "WifiHigh",
+  package: "Package",
+  box: "Package",
+  // Theme
+  sun: "Sun",
+  moon: "Moon",
+  // Phone
+  phone: "Phone",
+  printer: "Printer",
+  // Hierarchy
+  tree: "Tree",
+  network: "Network"
 };
-var marginStyles = {
-  none: "m-0",
-  xs: "m-1",
-  sm: "m-2",
-  md: "m-4",
-  lg: "m-6",
-  xl: "m-8",
-  "2xl": "m-12",
-  auto: "m-auto"
+function resolvePhosphor(name, weight, family) {
+  const target = phosphorAliases[name] ?? kebabToPascal(name);
+  return lazyFamilyIcon(
+    "phosphor",
+    () => import('@phosphor-icons/react'),
+    (lib) => {
+      const PhosphorComp = lib[target];
+      if (!PhosphorComp || typeof PhosphorComp !== "object") return null;
+      const Component2 = PhosphorComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component2,
+        {
+          weight,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Phosphor.${target}.${weight}`;
+      return Adapter;
+    },
+    name,
+    family
+  );
+}
+var tablerAliases = {
+  // lucide name → tabler suffix (after the `Icon` prefix)
+  // Actions
+  plus: "Plus",
+  minus: "Minus",
+  x: "X",
+  check: "Check",
+  close: "X",
+  edit: "Pencil",
+  pencil: "Pencil",
+  trash: "Trash",
+  save: "DeviceFloppy",
+  copy: "Copy",
+  share: "Share",
+  send: "Send",
+  download: "Download",
+  upload: "Upload",
+  archive: "Archive",
+  refresh: "Refresh",
+  loader: "Loader2",
+  link: "Link",
+  paperclip: "Paperclip",
+  external: "ExternalLink",
+  "external-link": "ExternalLink",
+  // Navigation
+  "chevron-down": "ChevronDown",
+  "chevron-up": "ChevronUp",
+  "chevron-left": "ChevronLeft",
+  "chevron-right": "ChevronRight",
+  "arrow-down": "ArrowDown",
+  "arrow-up": "ArrowUp",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  menu: "Menu2",
+  more: "Dots",
+  "more-vertical": "DotsVertical",
+  // Files
+  file: "File",
+  "file-text": "FileText",
+  "file-plus": "FilePlus",
+  "file-check": "FileCheck",
+  "file-minus": "FileMinus",
+  folder: "Folder",
+  "folder-open": "FolderOpen",
+  document: "FileText",
+  // Charts
+  "bar-chart": "ChartBar",
+  "bar-chart-2": "ChartBar",
+  "bar-chart-3": "ChartBar",
+  "line-chart": "ChartLine",
+  "pie-chart": "ChartPie",
+  activity: "Activity",
+  "trending-up": "TrendingUp",
+  "trending-down": "TrendingDown",
+  // Messages
+  message: "Message",
+  "message-circle": "MessageCircle",
+  "message-square": "Message2",
+  "messages-square": "Messages",
+  comment: "Message",
+  comments: "Messages",
+  inbox: "Inbox",
+  mail: "Mail",
+  envelope: "Mail",
+  // Status
+  "alert-circle": "AlertCircle",
+  "alert-triangle": "AlertTriangle",
+  "check-circle": "CircleCheck",
+  "x-circle": "CircleX",
+  info: "InfoCircle",
+  "help-circle": "HelpCircle",
+  "life-buoy": "Lifebuoy",
+  warning: "AlertTriangle",
+  error: "AlertOctagon",
+  // Media
+  image: "Photo",
+  video: "Video",
+  camera: "Camera",
+  music: "Music",
+  play: "PlayerPlay",
+  pause: "PlayerPause",
+  stop: "PlayerStop",
+  "skip-forward": "PlayerSkipForward",
+  "skip-back": "PlayerSkipBack",
+  volume: "Volume",
+  "volume-2": "Volume",
+  "volume-x": "VolumeOff",
+  mic: "Microphone",
+  "mic-off": "MicrophoneOff",
+  // People
+  user: "User",
+  users: "Users",
+  "user-plus": "UserPlus",
+  "user-check": "UserCheck",
+  // Time
+  calendar: "Calendar",
+  clock: "Clock",
+  timer: "Hourglass",
+  // Location
+  map: "Map",
+  "map-pin": "MapPin",
+  navigation: "Navigation",
+  compass: "Compass",
+  globe: "World",
+  target: "Target",
+  // Project / layout
+  kanban: "LayoutKanban",
+  list: "List",
+  table: "Table",
+  grid: "LayoutGrid",
+  layout: "Layout",
+  columns: "LayoutColumns",
+  rows: "LayoutRows",
+  // Misc
+  bell: "Bell",
+  bookmark: "Bookmark",
+  briefcase: "Briefcase",
+  flag: "Flag",
+  tag: "Tag",
+  tags: "Tags",
+  star: "Star",
+  heart: "Heart",
+  home: "Home",
+  settings: "Settings",
+  eye: "Eye",
+  "eye-off": "EyeOff",
+  lock: "Lock",
+  unlock: "LockOpen",
+  key: "Key",
+  shield: "Shield",
+  search: "Search",
+  filter: "Filter",
+  "sort-asc": "SortAscending",
+  "sort-desc": "SortDescending",
+  zap: "Bolt",
+  sparkles: "Sparkles",
+  // Code / data
+  code: "Code",
+  terminal: "Terminal",
+  database: "Database",
+  server: "Server",
+  cloud: "Cloud",
+  wifi: "Wifi",
+  package: "Package",
+  box: "Box",
+  // Theme
+  sun: "Sun",
+  moon: "Moon",
+  // Phone
+  phone: "Phone",
+  printer: "Printer",
+  // Hierarchy
+  tree: "Hierarchy",
+  network: "Network"
 };
-var marginXStyles = {
-  none: "mx-0",
-  xs: "mx-1",
-  sm: "mx-2",
-  md: "mx-4",
-  lg: "mx-6",
-  xl: "mx-8",
-  "2xl": "mx-12",
-  auto: "mx-auto"
+function resolveTabler(name, family) {
+  const suffix = tablerAliases[name] ?? kebabToPascal(name);
+  const target = `Icon${suffix}`;
+  return lazyFamilyIcon(
+    "tabler",
+    () => import('@tabler/icons-react'),
+    (lib) => {
+      const TablerComp = lib[target];
+      if (!TablerComp || typeof TablerComp !== "object") return null;
+      const Component2 = TablerComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component2,
+        {
+          stroke: props.strokeWidth ?? 1.5,
+          className: props.className,
+          style: props.style,
+          size: props.size ?? 24
+        }
+      );
+      Adapter.displayName = `Tabler.${target}`;
+      return Adapter;
+    },
+    name,
+    family
+  );
+}
+var faAliases = {
+  // lucide name → fa-solid suffix (after the `Fa` prefix).
+  // react-icons/fa ships FontAwesome 5 — names like `FaFileText` don't exist
+  // (FA renamed to `FaFileAlt`). When you see a console.warn from
+  // [iconFamily] about an unmapped lucide name in this family, add the
+  // closest FA5 sibling here so the fallback stays in-family.
+  search: "Search",
+  close: "Times",
+  x: "Times",
+  loader: "Spinner",
+  refresh: "Sync",
+  "sort-asc": "SortAmountUp",
+  "sort-desc": "SortAmountDown",
+  "chevron-down": "ChevronDown",
+  "chevron-up": "ChevronUp",
+  "chevron-left": "ChevronLeft",
+  "chevron-right": "ChevronRight",
+  "help-circle": "QuestionCircle",
+  "alert-triangle": "ExclamationTriangle",
+  "alert-circle": "ExclamationCircle",
+  "check-circle": "CheckCircle",
+  "x-circle": "TimesCircle",
+  edit: "Edit",
+  pencil: "PencilAlt",
+  trash: "Trash",
+  send: "PaperPlane",
+  share: "ShareAlt",
+  external: "ExternalLinkAlt",
+  plus: "Plus",
+  minus: "Minus",
+  check: "Check",
+  star: "Star",
+  heart: "Heart",
+  home: "Home",
+  user: "User",
+  users: "Users",
+  "user-plus": "UserPlus",
+  "user-check": "UserCheck",
+  settings: "Cog",
+  menu: "Bars",
+  "arrow-up": "ArrowUp",
+  "arrow-down": "ArrowDown",
+  "arrow-left": "ArrowLeft",
+  "arrow-right": "ArrowRight",
+  copy: "Copy",
+  download: "Download",
+  upload: "Upload",
+  filter: "Filter",
+  calendar: "Calendar",
+  clock: "Clock",
+  bell: "Bell",
+  mail: "Envelope",
+  envelope: "Envelope",
+  lock: "Lock",
+  unlock: "LockOpen",
+  eye: "Eye",
+  "eye-off": "EyeSlash",
+  more: "EllipsisH",
+  "more-vertical": "EllipsisV",
+  info: "InfoCircle",
+  warning: "ExclamationTriangle",
+  error: "ExclamationCircle",
+  // Time
+  timer: "Hourglass",
+  // Files (FA renamed FileText → FileAlt)
+  file: "File",
+  "file-text": "FileAlt",
+  "file-plus": "FileMedical",
+  "file-minus": "FileExcel",
+  "file-check": "FileSignature",
+  document: "FileAlt",
+  // Charts (lucide BarChart2 / BarChart3 → FA ChartBar)
+  "bar-chart": "ChartBar",
+  "bar-chart-2": "ChartBar",
+  "bar-chart-3": "ChartBar",
+  "line-chart": "ChartLine",
+  "pie-chart": "ChartPie",
+  activity: "ChartLine",
+  "trending-up": "ChartLine",
+  "trending-down": "ChartLine",
+  // Messages (lucide MessageCircle/MessageSquare → FA CommentDots/CommentAlt)
+  message: "Comment",
+  "message-circle": "CommentDots",
+  "message-square": "CommentAlt",
+  "messages-square": "Comments",
+  comment: "Comment",
+  comments: "Comments",
+  inbox: "Inbox",
+  // Support / help
+  "life-buoy": "LifeRing",
+  lifebuoy: "LifeRing",
+  // Project / kanban (FA has no kanban; closest semantic is Tasks/Columns)
+  kanban: "Tasks",
+  columns: "Columns",
+  rows: "Bars",
+  layout: "ThLarge",
+  grid: "Th",
+  list: "List",
+  table: "Table",
+  // Storage / folders
+  folder: "Folder",
+  "folder-open": "FolderOpen",
+  archive: "Archive",
+  bookmark: "Bookmark",
+  briefcase: "Briefcase",
+  package: "Box",
+  box: "Box",
+  // Map / location
+  map: "Map",
+  "map-pin": "MapMarkerAlt",
+  navigation: "LocationArrow",
+  compass: "Compass",
+  globe: "Globe",
+  target: "Bullseye",
+  // Media
+  image: "Image",
+  video: "Video",
+  film: "Film",
+  camera: "Camera",
+  music: "Music",
+  play: "Play",
+  pause: "Pause",
+  stop: "Stop",
+  "skip-forward": "Forward",
+  "skip-back": "Backward",
+  volume: "VolumeUp",
+  "volume-2": "VolumeUp",
+  "volume-x": "VolumeMute",
+  mic: "Microphone",
+  "mic-off": "MicrophoneSlash",
+  phone: "Phone",
+  // Code / data
+  code: "Code",
+  terminal: "Terminal",
+  database: "Database",
+  server: "Server",
+  cloud: "Cloud",
+  wifi: "Wifi",
+  // Security
+  shield: "ShieldAlt",
+  key: "Key",
+  // Misc actions
+  printer: "Print",
+  save: "Save",
+  link: "Link",
+  unlink: "Unlink",
+  paperclip: "Paperclip",
+  flag: "Flag",
+  tag: "Tag",
+  tags: "Tags",
+  zap: "Bolt",
+  sparkles: "Magic",
+  // Theme
+  sun: "Sun",
+  moon: "Moon",
+  // Hierarchy (FA has no Tree icon for hierarchies; Sitemap is the org-chart icon)
+  tree: "Sitemap",
+  network: "NetworkWired"
 };
-var marginYStyles = {
-  none: "my-0",
-  xs: "my-1",
-  sm: "my-2",
-  md: "my-4",
-  lg: "my-6",
-  xl: "my-8",
-  "2xl": "my-12",
-  auto: "my-auto"
+function resolveFa(name, family) {
+  const suffix = faAliases[name] ?? kebabToPascal(name);
+  const target = `Fa${suffix}`;
+  return lazyFamilyIcon(
+    "fa",
+    () => import('react-icons/fa'),
+    (lib) => {
+      const FaComp = lib[target];
+      if (!FaComp || typeof FaComp !== "function") return null;
+      const Component2 = FaComp;
+      const Adapter = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+        Component2,
+        {
+          className: props.className,
+          style: props.style,
+          size: props.size ?? "1em"
+        }
+      );
+      Adapter.displayName = `Fa.${target}`;
+      return Adapter;
+    },
+    name,
+    family
+  );
+}
+var warned = /* @__PURE__ */ new Set();
+function warnFallback(name, family) {
+  const key = `${family}::${name}`;
+  if (warned.has(key)) return;
+  warned.add(key);
+  if (typeof console !== "undefined") {
+    console.warn(
+      `[iconFamily] No '${name}' mapping in family '${family}'; falling back to lucide. Add an alias in lib/iconFamily.ts.`
+    );
+  }
+}
+function makeLucideAdapter(name, isFallback = false) {
+  const LucideComp = resolveLucide(name);
+  const Adapter = (props) => {
+    const stroke = props.strokeWidth ?? (isFallback ? 2 : void 0);
+    const style = isFallback ? { ...props.style ?? {}, strokeWidth: stroke ?? 2 } : props.style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      LucideComp,
+      {
+        className: props.className,
+        strokeWidth: stroke,
+        style,
+        size: props.size
+      }
+    );
+  };
+  Adapter.displayName = `Lucide.${name}${isFallback ? ".fallback" : ""}`;
+  return Adapter;
+}
+function resolveIconForFamily(name, family) {
+  switch (family) {
+    case "lucide":
+      return makeLucideAdapter(name, false);
+    // Non-lucide families resolve to a lazy, Suspense-wrapped component that
+    // dynamic-imports the library on first render and falls back to lucide
+    // internally when the family lacks the icon (see lazyFamilyIcon).
+    case "phosphor-outline":
+      return resolvePhosphor(name, "regular", family);
+    case "phosphor-fill":
+      return resolvePhosphor(name, "fill", family);
+    case "phosphor-duotone":
+      return resolvePhosphor(name, "duotone", family);
+    case "tabler":
+      return resolveTabler(name, family);
+    case "fa-solid":
+      return resolveFa(name, family);
+  }
+}
+var colorTokenClasses = {
+  primary: "text-primary",
+  secondary: "text-secondary",
+  success: "text-success",
+  warning: "text-warning",
+  error: "text-error",
+  muted: "text-muted-foreground"
 };
-var bgStyles = {
-  transparent: "bg-transparent",
-  primary: "bg-primary text-primary-foreground",
-  secondary: "bg-secondary text-secondary-foreground",
-  muted: "bg-muted text-foreground",
-  accent: "bg-accent text-accent-foreground",
-  surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
+var sizeClasses = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "h-icon-default w-icon-default",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
 };
-var roundedStyles = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  "2xl": "rounded-xl",
-  full: "rounded-full"
+var animationClasses = {
+  none: "",
+  spin: "animate-spin",
+  pulse: "animate-pulse"
 };
-var shadowStyles = {
-  none: "shadow-none",
-  sm: "shadow-sm",
-  md: "shadow",
-  lg: "shadow-lg",
-  xl: "shadow-lg"
+var Icon = ({
+  icon,
+  name,
+  size = "md",
+  color,
+  animation = "none",
+  className,
+  strokeWidth,
+  style
+}) => {
+  const directIcon = typeof icon === "string" ? void 0 : icon;
+  const effectiveName = typeof icon === "string" ? icon : name;
+  const family = useIconFamily();
+  const RenderedComponent = React11__default.default.useMemo(() => {
+    if (directIcon) return null;
+    return effectiveName ? resolveIconForFamily(effectiveName, family) : null;
+  }, [directIcon, effectiveName, family]);
+  const effectiveStrokeWidth = strokeWidth ?? void 0;
+  const inlineStyle = {
+    ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
+    ...style
+  };
+  const resolvedColor = color ? color in colorTokenClasses ? colorTokenClasses[color] : color : "text-current";
+  const composedClassName = cn(
+    sizeClasses[size],
+    animationClasses[animation],
+    resolvedColor,
+    className
+  );
+  if (directIcon) {
+    const Direct = directIcon;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Direct,
+      {
+        className: composedClassName,
+        strokeWidth: effectiveStrokeWidth,
+        style: inlineStyle
+      }
+    );
+  }
+  if (RenderedComponent) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RenderedComponent,
+      {
+        className: composedClassName,
+        strokeWidth: effectiveStrokeWidth,
+        style: inlineStyle
+      }
+    );
+  }
+  const Fallback = LucideIcons__namespace.HelpCircle;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Fallback,
+    {
+      className: composedClassName,
+      strokeWidth: effectiveStrokeWidth,
+      style: inlineStyle
+    }
+  );
 };
-var displayStyles = {
-  block: "block",
-  inline: "inline",
-  "inline-block": "inline-block",
-  flex: "flex",
-  "inline-flex": "inline-flex",
-  grid: "grid"
+Icon.displayName = "Icon";
+var variantStyles = {
+  primary: [
+    "bg-primary text-primary-foreground",
+    "border-none",
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
+  ].join(" "),
+  secondary: [
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
+    "active:scale-[var(--active-scale)]"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-muted-foreground",
+    "border border-transparent",
+    "hover:text-primary-foreground hover:bg-primary hover:border-primary",
+    "active:scale-[var(--active-scale)]"
+  ].join(" "),
+  danger: [
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
+  ].join(" "),
+  success: [
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
+  ].join(" "),
+  warning: [
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
+  ].join(" "),
+  // "default" is an alias for secondary
+  default: [
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
+    "active:scale-[var(--active-scale)]"
+  ].join(" ")
 };
-var overflowStyles = {
-  auto: "overflow-auto",
-  hidden: "overflow-hidden",
-  visible: "overflow-visible",
-  scroll: "overflow-scroll"
+variantStyles.destructive = variantStyles.danger;
+var sizeStyles = {
+  sm: "h-button-sm px-3 text-sm",
+  md: "h-button-md px-4 text-sm",
+  lg: "h-button-lg px-6 text-base"
 };
-var positionStyles = {
-  relative: "relative",
-  absolute: "absolute",
-  fixed: "fixed",
-  sticky: "sticky"
+var iconSizeStyles = {
+  sm: "h-icon-default w-icon-default",
+  md: "h-icon-default w-icon-default",
+  lg: "h-icon-default w-icon-default"
 };
-var Box = React11__default.default.forwardRef(
+function resolveIconProp(value, sizeClass) {
+  if (!value) return null;
+  if (typeof value === "string") {
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: value, className: sizeClass });
+  }
+  if (typeof value === "function") {
+    const IconComp = value;
+    return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
+  }
+  if (React11__default.default.isValidElement(value)) {
+    return value;
+  }
+  if (typeof value === "object" && value !== null && "render" in value) {
+    const IconComp = value;
+    return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
+  }
+  return value;
+}
+var Button = React11__default.default.forwardRef(
   ({
-    padding,
-    paddingX,
-    paddingY,
-    margin,
-    marginX,
-    marginY,
-    bg = "transparent",
-    border = false,
-    rounded = "none",
-    shadow = "none",
-    display,
-    fullWidth = false,
-    fullHeight = false,
-    overflow,
-    position,
     className,
-    children,
-    as: Component2 = "div",
+    variant = "primary",
+    size = "md",
+    isLoading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    icon: iconProp,
+    iconRight: iconRightProp,
     action,
     actionPayload,
-    hoverEvent,
-    maxWidth,
+    label,
+    children,
     onClick,
-    onMouseEnter,
-    onMouseLeave,
-    ...rest
+    ...props
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React11.useCallback((e) => {
+    const leftIconValue = leftIcon || iconProp;
+    const rightIconValue = rightIcon || iconRightProp;
+    const resolvedLeftIcon = resolveIconProp(leftIconValue, iconSizeStyles[size]);
+    const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
+    const handleClick = (e) => {
       if (action) {
-        e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
-    }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React11.useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
-      }
-      onMouseEnter?.(e);
-    }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React11.useCallback((e) => {
-      if (hoverEvent) {
-        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
-      }
-      onMouseLeave?.(e);
-    }, [hoverEvent, eventBus, onMouseLeave]);
-    const isClickable = action || onClick;
-    return React11__default.default.createElement(
-      Component2,
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
         ref,
+        disabled: disabled || isLoading,
         className: cn(
-          padding && paddingStyles[padding],
-          paddingX && paddingXStyles[paddingX],
-          paddingY && paddingYStyles[paddingY],
-          margin && marginStyles[margin],
-          marginX && marginXStyles[marginX],
-          marginY && marginYStyles[marginY],
-          bgStyles[bg],
-          border && "border-[length:var(--border-width)] border-border",
-          roundedStyles[rounded],
-          shadowStyles[shadow],
-          display && displayStyles[display],
-          fullWidth && "w-full",
-          fullHeight && "h-full",
-          overflow && overflowStyles[overflow],
-          position && positionStyles[position],
-          isClickable && "cursor-pointer",
+          "inline-flex items-center justify-center gap-2",
+          "font-medium",
+          "rounded-sm",
+          "cursor-pointer",
+          "transition-all duration-[var(--transition-normal)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variantStyles[variant],
+          sizeStyles[size],
           className
         ),
-        onClick: isClickable ? handleClick : void 0,
-        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
-        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
-        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
-        ...rest
-      },
-      children
+        onClick: handleClick,
+        ...props,
+        "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
+        children: [
+          isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          children || label,
+          resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
+        ]
+      }
     );
   }
 );
-Box.displayName = "Box";
-var gapStyles = {
-  none: "gap-0",
-  xs: "gap-1",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8",
-  "2xl": "gap-12"
-};
-var alignStyles = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var justifyStyles = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-var Stack = ({
-  direction = "vertical",
-  gap = "md",
-  align = "stretch",
-  justify = "start",
-  wrap = false,
-  reverse = false,
-  flex = false,
-  className,
-  style,
-  children,
-  as: Component2 = "div",
-  onClick,
-  onKeyDown,
-  role,
-  tabIndex,
-  action,
-  actionPayload,
-  responsive = false
-}) => {
-  const eventBus = useEventBus();
-  const handleClick = (e) => {
-    if (action) {
-      eventBus.emit(`UI:${action}`, actionPayload ?? {});
-    }
-    onClick?.(e);
-  };
-  const isHorizontal = direction === "horizontal";
-  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  const Comp = Component2;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      className: cn(
-        "flex",
-        directionClass,
-        gapStyles[gap],
-        alignStyles[align],
-        justifyStyles[justify],
-        wrap && "flex-wrap",
-        flex && "flex-1",
-        className
-      ),
-      style,
-      onClick: action || onClick ? handleClick : void 0,
-      onKeyDown,
-      role,
-      tabIndex,
-      children
-    }
-  );
-};
-var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
-var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
-var variantStyles = {
+Button.displayName = "Button";
+var variantStyles2 = {
   h1: "text-4xl font-bold tracking-tight text-foreground",
   h2: "text-3xl font-bold tracking-tight text-foreground",
   h3: "text-2xl font-bold text-foreground",
@@ -3161,7 +3829,7 @@ var typographySizeStyles = {
   "2xl": "text-2xl",
   "3xl": "text-3xl"
 };
-var overflowStyles2 = {
+var overflowStyles = {
   visible: "overflow-visible",
   hidden: "overflow-hidden",
   wrap: "break-words overflow-hidden",
@@ -3192,13 +3860,13 @@ var Typography = ({
     {
       id,
       className: cn(
-        variantStyles[variant],
+        variantStyles2[variant],
         colorStyles[color],
         weight && weightStyles[weight],
         size && typographySizeStyles[size],
         align && `text-${align}`,
         truncate && "truncate overflow-hidden text-ellipsis",
-        overflow && overflowStyles2[overflow],
+        overflow && overflowStyles[overflow],
         className
       ),
       style,
@@ -3207,6 +3875,459 @@ var Typography = ({
   );
 };
 Typography.displayName = "Typography";
+var gapStyles = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8",
+  "2xl": "gap-12"
+};
+var alignStyles = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+  baseline: "items-baseline"
+};
+var justifyStyles = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between",
+  around: "justify-around",
+  evenly: "justify-evenly"
+};
+var Stack = ({
+  direction = "vertical",
+  gap = "md",
+  align = "stretch",
+  justify = "start",
+  wrap = false,
+  reverse = false,
+  flex = false,
+  className,
+  style,
+  children,
+  as: Component2 = "div",
+  onClick,
+  onKeyDown,
+  role,
+  tabIndex,
+  action,
+  actionPayload,
+  responsive = false
+}) => {
+  const eventBus = useEventBus();
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.(e);
+  };
+  const isHorizontal = direction === "horizontal";
+  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  const Comp = Component2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: cn(
+        "flex",
+        directionClass,
+        gapStyles[gap],
+        alignStyles[align],
+        justifyStyles[justify],
+        wrap && "flex-wrap",
+        flex && "flex-1",
+        className
+      ),
+      style,
+      onClick: action || onClick ? handleClick : void 0,
+      onKeyDown,
+      role,
+      tabIndex,
+      children
+    }
+  );
+};
+var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
+var HStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "horizontal", ...props });
+
+// components/game/organisms/boardEntity.ts
+function boardEntity(entity) {
+  if (!entity) return void 0;
+  return Array.isArray(entity) ? entity[0] : entity;
+}
+function str(v) {
+  return v == null ? "" : String(v);
+}
+function num(v, fallback = 0) {
+  const n = Number(v);
+  return Number.isFinite(n) ? n : fallback;
+}
+function rows(v) {
+  return Array.isArray(v) ? v : [];
+}
+function vec2(v) {
+  const o = v ?? {};
+  return { x: num(o.x), y: num(o.y) };
+}
+function unitPosition(u) {
+  return vec2(u.position);
+}
+function unitTeam(u) {
+  return str(u.team);
+}
+function unitHealth(u) {
+  return num(u.health);
+}
+function GameBoard3D({
+  entity,
+  tiles = [],
+  features = [],
+  cameraMode = "perspective",
+  backgroundColor = "#2a1a1a",
+  tileClickEvent,
+  unitClickEvent,
+  attackEvent,
+  endTurnEvent,
+  cancelEvent,
+  playAgainEvent,
+  gameEndEvent,
+  className
+}) {
+  const row = boardEntity(entity);
+  const eventBus = useEventBus();
+  const entityUnits = row ? rows(row.units) : [];
+  const units = entityUnits;
+  const selectedUnitId = row ? str(row.selectedUnitId) || null : null;
+  const phase = row ? str(row.phase) : "observation";
+  const result = row ? str(row.result) : "none";
+  const validMoves = row && Array.isArray(row.validMoves) ? row.validMoves : [];
+  const attackTargets = row && Array.isArray(row.attackTargets) ? row.attackTargets : [];
+  const turn = row ? num(row.turn) : 0;
+  const currentTeam = row ? str(row.currentTeam) : "player";
+  const isGameOver = result !== "none";
+  const gameEndEmittedRef = React11.useRef(false);
+  React11.useEffect(() => {
+    if ((result === "victory" || result === "defeat") && gameEndEvent) {
+      if (!gameEndEmittedRef.current) {
+        gameEndEmittedRef.current = true;
+        eventBus.emit(`UI:${gameEndEvent}`, { result });
+      }
+    } else {
+      gameEndEmittedRef.current = false;
+    }
+  }, [result, gameEndEvent, eventBus]);
+  const checkGameEnd = React11.useCallback(() => {
+    const alivePlayer = entityUnits.filter((u) => unitTeam(u) === "player" && unitHealth(u) > 0);
+    const aliveEnemy = entityUnits.filter((u) => unitTeam(u) === "enemy" && unitHealth(u) > 0);
+    if (alivePlayer.length === 0 && gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result: "defeat" });
+    } else if (aliveEnemy.length === 0 && gameEndEvent) {
+      eventBus.emit(`UI:${gameEndEvent}`, { result: "victory" });
+    }
+  }, [entityUnits, gameEndEvent, eventBus]);
+  const handleUnitClickCallback = React11.useCallback((isoUnit) => {
+    if (phase !== "action" || !selectedUnitId || !attackEvent) return;
+    const attackerRow = entityUnits.find((u) => str(u.id) === selectedUnitId);
+    const targetRow = entityUnits.find((u) => str(u.id) === isoUnit.id);
+    if (!attackerRow || !targetRow) return;
+    if (unitTeam(targetRow) !== "enemy" || unitHealth(targetRow) <= 0) return;
+    const ap = unitPosition(attackerRow);
+    const tp = unitPosition(targetRow);
+    const dx = Math.abs(ap.x - tp.x);
+    const dy = Math.abs(ap.y - tp.y);
+    if (dx <= 1 && dy <= 1 && dx + dy > 0) {
+      const damage = Math.max(1, num(attackerRow.attack) - num(targetRow.defense));
+      eventBus.emit(`UI:${attackEvent}`, {
+        attackerId: str(attackerRow.id),
+        targetId: str(targetRow.id),
+        damage
+      });
+      setTimeout(checkGameEnd, 100);
+    }
+  }, [phase, selectedUnitId, entityUnits, attackEvent, eventBus, checkGameEnd]);
+  const handleEndTurn = React11.useCallback(() => {
+    if (endTurnEvent) eventBus.emit(`UI:${endTurnEvent}`, {});
+  }, [endTurnEvent, eventBus]);
+  const handleCancel = React11.useCallback(() => {
+    if (cancelEvent) eventBus.emit(`UI:${cancelEvent}`, {});
+  }, [cancelEvent, eventBus]);
+  const handlePlayAgain = React11.useCallback(() => {
+    if (playAgainEvent) eventBus.emit(`UI:${playAgainEvent}`, {});
+  }, [playAgainEvent, eventBus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: cn("game-board-3d block w-full min-h-[85vh] relative", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "game-board-3d__status absolute top-3 left-3 z-10 flex gap-2 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "status__phase capitalize", children: phase.replace("_", " ") }),
+      currentTeam && !isGameOver && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", className: "status__team", children: [
+        "\u2014 ",
+        currentTeam === "player" ? "Your Turn" : "Enemy's Turn"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", color: "muted", className: "status__turn", children: [
+        "Turn ",
+        turn
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GameCanvas3D,
+      {
+        tiles,
+        units,
+        features,
+        cameraMode,
+        showGrid: true,
+        showCoordinates: false,
+        showTileInfo: false,
+        shadows: true,
+        backgroundColor,
+        tileClickEvent,
+        unitClickEvent,
+        onUnitClick: handleUnitClickCallback,
+        selectedUnitId,
+        validMoves,
+        attackTargets,
+        className: "game-board-3d__canvas w-full min-h-[85vh]"
+      }
+    ),
+    !isGameOver && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "fixed bottom-6 right-6 z-50", gap: "sm", children: [
+      (phase === "selection" || phase === "movement" || phase === "action") && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "secondary",
+          className: "shadow-xl",
+          onClick: handleCancel,
+          children: "Cancel"
+        }
+      ),
+      phase !== "enemy_turn" && /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "shadow-xl",
+          onClick: handleEndTurn,
+          children: "End Turn"
+        }
+      )
+    ] }),
+    isGameOver && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "game-board-3d__overlay absolute inset-0 z-20 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { align: "center", gap: "md", className: "overlay__card p-8 rounded-xl bg-gray-900/90 shadow-2xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Typography,
+        {
+          variant: "h2",
+          className: cn(
+            "overlay__result",
+            result === "victory" ? "text-yellow-400" : "text-red-500"
+          ),
+          children: result === "victory" ? "Victory!" : "Defeat"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", color: "muted", className: "overlay__turn-count", children: [
+        "Completed in ",
+        turn,
+        " turn",
+        turn !== 1 ? "s" : ""
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          variant: "primary",
+          className: "px-8 py-3 font-semibold",
+          onClick: handlePlayAgain,
+          children: "Play Again"
+        }
+      )
+    ] }) })
+  ] });
+}
+GameBoard3D.displayName = "GameBoard3D";
+var paddingStyles = {
+  none: "p-0",
+  xs: "p-1",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6",
+  xl: "p-8",
+  "2xl": "p-12"
+};
+var paddingXStyles = {
+  none: "px-0",
+  xs: "px-1",
+  sm: "px-2",
+  md: "px-4",
+  lg: "px-6",
+  xl: "px-8",
+  "2xl": "px-12"
+};
+var paddingYStyles = {
+  none: "py-0",
+  xs: "py-1",
+  sm: "py-2",
+  md: "py-4",
+  lg: "py-6",
+  xl: "py-8",
+  "2xl": "py-12"
+};
+var marginStyles = {
+  none: "m-0",
+  xs: "m-1",
+  sm: "m-2",
+  md: "m-4",
+  lg: "m-6",
+  xl: "m-8",
+  "2xl": "m-12",
+  auto: "m-auto"
+};
+var marginXStyles = {
+  none: "mx-0",
+  xs: "mx-1",
+  sm: "mx-2",
+  md: "mx-4",
+  lg: "mx-6",
+  xl: "mx-8",
+  "2xl": "mx-12",
+  auto: "mx-auto"
+};
+var marginYStyles = {
+  none: "my-0",
+  xs: "my-1",
+  sm: "my-2",
+  md: "my-4",
+  lg: "my-6",
+  xl: "my-8",
+  "2xl": "my-12",
+  auto: "my-auto"
+};
+var bgStyles = {
+  transparent: "bg-transparent",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
+};
+var roundedStyles = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
+};
+var shadowStyles = {
+  none: "shadow-none",
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
+};
+var displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid"
+};
+var overflowStyles2 = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React11__default.default.forwardRef(
+  ({
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    bg = "transparent",
+    border = false,
+    rounded = "none",
+    shadow = "none",
+    display,
+    fullWidth = false,
+    fullHeight = false,
+    overflow,
+    position,
+    className,
+    children,
+    as: Component2 = "div",
+    action,
+    actionPayload,
+    hoverEvent,
+    maxWidth,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = React11.useCallback((e) => {
+      if (action) {
+        e.stopPropagation();
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = React11.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = React11.useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const isClickable = action || onClick;
+    return React11__default.default.createElement(
+      Component2,
+      {
+        ref,
+        className: cn(
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          bgStyles[bg],
+          border && "border-[length:var(--border-width)] border-border",
+          roundedStyles[rounded],
+          shadowStyles[shadow],
+          display && displayStyles[display],
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          overflow && overflowStyles2[overflow],
+          position && positionStyles[position],
+          isClickable && "cursor-pointer",
+          className
+        ),
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
+        ...rest
+      },
+      children
+    );
+  }
+);
+Box.displayName = "Box";
 var DEFAULT_3D_BATTLE_TILES = [
   { id: "t00", x: 0, y: 0, z: 0, type: "stone", passable: false },
   { id: "t10", x: 1, y: 0, z: 0, type: "stone", passable: false },
@@ -3234,10 +4355,6 @@ var DEFAULT_3D_BATTLE_TILES = [
   { id: "t34", x: 3, y: 4, z: 4, type: "stone", passable: false },
   { id: "t44", x: 4, y: 4, z: 4, type: "stone", passable: false }
 ];
-var DEFAULT_3D_BATTLE_UNITS = [
-  { id: "u1", x: 1, y: 1, z: 1, unitType: "warrior", name: "Worker", faction: "player", health: 10, maxHealth: 10 },
-  { id: "u2", x: 3, y: 3, z: 3, unitType: "enemy", name: "Guardian", faction: "enemy", health: 8, maxHealth: 10 }
-];
 var DEFAULT_3D_BATTLE_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "gold_mine", color: "#f4c542" },
   { id: "f2", x: 3, y: 1, z: 1, type: "portal", color: "#8b5cf6" }
@@ -3245,53 +4362,44 @@ var DEFAULT_3D_BATTLE_FEATURES = [
 function GameCanvas3DBattleTemplate({
   entity,
   tiles: propTiles = DEFAULT_3D_BATTLE_TILES,
-  units: propUnits = DEFAULT_3D_BATTLE_UNITS,
   features: propFeatures = DEFAULT_3D_BATTLE_FEATURES,
   cameraMode = "perspective",
-  showGrid = true,
-  shadows = true,
   backgroundColor = "#2a1a1a",
   tileClickEvent,
   unitClickEvent,
-  unitAttackEvent,
-  unitMoveEvent,
   endTurnEvent,
-  exitEvent,
-  selectedUnitId,
-  validMoves,
-  attackTargets,
+  cancelEvent,
+  attackEvent,
+  playAgainEvent,
+  gameEndEvent,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const tiles = resolved ? Array.isArray(resolved.tiles) ? resolved.tiles : [] : propTiles;
-  const units = resolved ? Array.isArray(resolved.units) ? resolved.units : [] : propUnits;
   const features = resolved ? Array.isArray(resolved.features) ? resolved.features : [] : propFeatures;
-  const currentTurn = resolved?.currentTurn;
-  const round = resolved?.round == null ? void 0 : Number(resolved.round);
+  const currentTurn = resolved?.currentTeam;
+  const round = resolved?.turn == null ? void 0 : Number(resolved.turn);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
-      className: cn("game-canvas-3d-battle-template", className),
-      style: { display: "block", position: "relative", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-battle-template block relative w-full min-h-[85vh]", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          GameCanvas3D,
+          GameBoard3D,
           {
+            entity,
             tiles,
-            units,
             features,
             cameraMode,
-            showGrid,
-            showCoordinates: false,
-            showTileInfo: false,
-            shadows,
             backgroundColor,
             tileClickEvent,
             unitClickEvent,
-            selectedUnitId,
-            validMoves,
-            attackTargets,
-            className: "game-canvas-3d-battle-template__canvas"
+            endTurnEvent,
+            cancelEvent,
+            attackEvent,
+            playAgainEvent,
+            gameEndEvent,
+            className: "game-canvas-3d-battle-template__board"
           }
         ),
         currentTurn && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3299,8 +4407,7 @@ function GameCanvas3DBattleTemplate({
           {
             gap: "sm",
             align: "center",
-            className: cn("battle-template__turn-indicator", `battle-template__turn-indicator--${currentTurn}`),
-            style: { position: "absolute", top: "12px", right: "12px", zIndex: 10 },
+            className: cn("battle-template__turn-indicator absolute top-3 right-3 z-10", `battle-template__turn-indicator--${currentTurn}`),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "turn-indicator__label", children: currentTurn === "player" ? "Your Turn" : "Enemy's Turn" }),
               round != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "turn-indicator__round", children: [
@@ -3342,10 +4449,6 @@ var DEFAULT_3D_CASTLE_TILES = [
   { id: "t34", x: 3, y: 4, z: 4, type: "wall", passable: false },
   { id: "t44", x: 4, y: 4, z: 4, type: "wall", passable: false }
 ];
-var DEFAULT_3D_CASTLE_UNITS = [
-  { id: "u1", x: 1, y: 1, z: 1, unitType: "worker", name: "Worker", faction: "player", health: 10, maxHealth: 10 },
-  { id: "u2", x: 3, y: 3, z: 3, unitType: "guardian", name: "Guardian", faction: "player", health: 10, maxHealth: 10 }
-];
 var DEFAULT_3D_CASTLE_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "chest", color: "#f4c542" },
   { id: "f2", x: 3, y: 1, z: 1, type: "crystal", color: "#8b5cf6" }
@@ -3353,35 +4456,30 @@ var DEFAULT_3D_CASTLE_FEATURES = [
 function GameCanvas3DCastleTemplate({
   entity,
   tiles: propTiles = DEFAULT_3D_CASTLE_TILES,
-  units: propUnits = DEFAULT_3D_CASTLE_UNITS,
   features: propFeatures = DEFAULT_3D_CASTLE_FEATURES,
   cameraMode = "isometric",
-  showGrid = true,
-  shadows = true,
   backgroundColor = "#1e1e2e",
   buildingClickEvent,
   unitClickEvent,
-  buildEvent,
-  recruitEvent,
-  exitEvent,
-  selectedBuildingId,
-  selectedTileIds = [],
-  availableBuildSites,
+  endTurnEvent,
+  cancelEvent,
+  attackEvent,
+  playAgainEvent,
+  gameEndEvent,
   showHeader = true,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const tiles = resolved ? Array.isArray(resolved.tiles) ? resolved.tiles : [] : propTiles;
-  const units = resolved ? Array.isArray(resolved.units) ? resolved.units : [] : propUnits;
   const features = resolved ? Array.isArray(resolved.features) ? resolved.features : [] : propFeatures;
   const name = resolved?.name == null ? void 0 : String(resolved.name);
   const level = resolved?.level == null ? void 0 : Number(resolved.level);
   const owner = resolved?.owner == null ? void 0 : String(resolved.owner);
+  const unitCount = resolved && Array.isArray(resolved.units) ? resolved.units.length : 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     VStack,
     {
-      className: cn("game-canvas-3d-castle-template", className),
-      style: { display: "block", width: "100%", minHeight: "85vh" },
+      className: cn("game-canvas-3d-castle-template block w-full min-h-[85vh]", className),
       children: [
         showHeader && name && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", className: "castle-template__header", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", className: "header__name", children: name }),
@@ -3392,28 +4490,27 @@ function GameCanvas3DCastleTemplate({
           owner && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "header__owner", children: owner })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          GameCanvas3D,
+          GameBoard3D,
           {
+            entity,
             tiles,
-            units,
             features,
             cameraMode,
-            showGrid,
-            showCoordinates: false,
-            showTileInfo: false,
-            shadows,
             backgroundColor,
-            featureClickEvent: buildingClickEvent,
+            tileClickEvent: buildingClickEvent,
             unitClickEvent,
-            selectedTileIds,
-            validMoves: availableBuildSites,
-            className: "game-canvas-3d-castle-template__canvas"
+            endTurnEvent,
+            cancelEvent,
+            attackEvent,
+            playAgainEvent,
+            gameEndEvent,
+            className: "game-canvas-3d-castle-template__board"
           }
         ),
-        units.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
+        unitCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "center", className: "castle-template__garrison-info", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "garrison-info__label", children: "Garrison:" }),
           /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", weight: "bold", className: "garrison-info__count", children: [
-            units.length,
+            unitCount,
             " units"
           ] })
         ] })
@@ -3449,10 +4546,6 @@ var DEFAULT_3D_WORLDMAP_TILES = [
   { id: "t34", x: 3, y: 4, z: 4, type: "mountain", passable: false },
   { id: "t44", x: 4, y: 4, z: 4, type: "mountain", passable: false }
 ];
-var DEFAULT_3D_WORLDMAP_UNITS = [
-  { id: "h1", x: 1, y: 1, z: 1, unitType: "hero", name: "Amir", faction: "player", health: 10, maxHealth: 10 },
-  { id: "h2", x: 3, y: 3, z: 3, unitType: "scout", name: "Archivist", faction: "player", health: 10, maxHealth: 10 }
-];
 var DEFAULT_3D_WORLDMAP_FEATURES = [
   { id: "f1", x: 2, y: 2, z: 2, type: "capital", color: "#f4c542" },
   { id: "f2", x: 4, y: 2, z: 2, type: "power_node", color: "#8b5cf6" }
@@ -3460,52 +4553,41 @@ var DEFAULT_3D_WORLDMAP_FEATURES = [
 function GameCanvas3DWorldMapTemplate({
   entity,
   tiles: propTiles = DEFAULT_3D_WORLDMAP_TILES,
-  units: propUnits = DEFAULT_3D_WORLDMAP_UNITS,
   features: propFeatures = DEFAULT_3D_WORLDMAP_FEATURES,
   cameraMode = "isometric",
-  showGrid = true,
-  showCoordinates = true,
-  showTileInfo = true,
-  shadows = true,
   backgroundColor = "#1a1a2e",
   tileClickEvent,
   unitClickEvent,
-  featureClickEvent,
-  tileHoverEvent,
-  tileLeaveEvent,
-  cameraChangeEvent,
-  selectedUnitId,
-  validMoves,
-  attackTargets,
+  endTurnEvent,
+  cancelEvent,
+  attackEvent,
+  playAgainEvent,
+  gameEndEvent,
   className
 }) {
   const resolved = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const tiles = resolved ? Array.isArray(resolved.tiles) ? resolved.tiles : [] : propTiles;
-  const units = resolved ? Array.isArray(resolved.units) ? resolved.units : [] : propUnits;
   const features = resolved ? Array.isArray(resolved.features) ? resolved.features : [] : propFeatures;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    GameCanvas3D,
-    {
-      tiles,
-      units,
-      features,
-      cameraMode,
-      showGrid,
-      showCoordinates,
-      showTileInfo,
-      shadows,
-      backgroundColor,
-      tileClickEvent,
-      unitClickEvent,
-      featureClickEvent,
-      tileHoverEvent,
-      tileLeaveEvent,
-      cameraChangeEvent,
-      selectedUnitId,
-      validMoves,
-      attackTargets,
-      className
-    }
+  return (
+    /* GameBoard3D reads selectedUnitId/validMoves/attackTargets from entity */
+    /* @__PURE__ */ jsxRuntime.jsx(
+      GameBoard3D,
+      {
+        entity,
+        tiles,
+        features,
+        cameraMode,
+        backgroundColor,
+        tileClickEvent,
+        unitClickEvent,
+        endTurnEvent,
+        cancelEvent,
+        attackEvent,
+        playAgainEvent,
+        gameEndEvent,
+        className
+      }
+    )
   );
 }
 GameCanvas3DWorldMapTemplate.displayName = "GameCanvas3DWorldMapTemplate";
@@ -3697,10 +4779,10 @@ function parseApplicationLevel(schema) {
   }
   const count = schema.orbitals.length;
   const cols = Math.ceil(Math.sqrt(count));
-  const rows = Math.ceil(count / cols);
+  const rows2 = Math.ceil(count / cols);
   const spacing = 200;
   const gridW = cols * spacing;
-  const gridH = rows * spacing;
+  const gridH = rows2 * spacing;
   const originX = (600 - gridW) / 2 + spacing / 2;
   const originY = (400 - gridH) / 2 + spacing / 2;
   schema.orbitals.forEach((orbital, i) => {
@@ -4232,7 +5314,7 @@ Avl3DLabel.displayName = "Avl3DLabel";
 var Avl3DTooltip = ({
   position,
   title,
-  rows,
+  rows: rows2,
   accentColor = "#5b9bd5"
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4270,7 +5352,7 @@ var Avl3DTooltip = ({
                 children: title
               }
             ),
-            rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
+            rows2.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
               Box,
               {
                 style: {