@almadar/ui 5.48.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;
@@ -2833,6 +2835,1313 @@ var GameCanvas3D = React11.forwardRef(
   }
 );
 GameCanvas3D.displayName = "GameCanvas3D";
+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;
+}
+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
+};
+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"
+};
+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"
+};
+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"
+};
+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 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 animationClasses = {
+  none: "",
+  spin: "animate-spin",
+  pulse: "animate-pulse"
+};
+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
+    }
+  );
+};
+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(" ")
+};
+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 iconSizeStyles = {
+  sm: "h-icon-default w-icon-default",
+  md: "h-icon-default w-icon-default",
+  lg: "h-icon-default w-icon-default"
+};
+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(
+  ({
+    className,
+    variant = "primary",
+    size = "md",
+    isLoading = false,
+    disabled,
+    leftIcon,
+    rightIcon,
+    icon: iconProp,
+    iconRight: iconRightProp,
+    action,
+    actionPayload,
+    label,
+    children,
+    onClick,
+    ...props
+  }, ref) => {
+    const eventBus = useEventBus();
+    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) {
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: cn(
+          "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: 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 })
+        ]
+      }
+    );
+  }
+);
+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",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
+};
+var colorStyles = {
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
+  inherit: "text-inherit"
+};
+var weightStyles = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var defaultElements = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  heading: "h2",
+  subheading: "h3",
+  body1: "p",
+  body2: "p",
+  body: "p",
+  caption: "span",
+  overline: "span",
+  small: "span",
+  large: "p",
+  label: "span"
+};
+var typographySizeStyles = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl"
+};
+var overflowStyles = {
+  visible: "overflow-visible",
+  hidden: "overflow-hidden",
+  wrap: "break-words overflow-hidden",
+  "clamp-2": "overflow-hidden line-clamp-2",
+  "clamp-3": "overflow-hidden line-clamp-3"
+};
+var Typography = ({
+  variant: variantProp,
+  level,
+  color = "primary",
+  align,
+  weight,
+  size,
+  truncate = false,
+  overflow,
+  as,
+  id,
+  className,
+  style,
+  content,
+  children
+}) => {
+  const variant = variantProp ?? (level ? `h${level}` : "body1");
+  const Component2 = as || defaultElements[variant];
+  const Comp = Component2;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      id,
+      className: cn(
+        variantStyles2[variant],
+        colorStyles[color],
+        weight && weightStyles[weight],
+        size && typographySizeStyles[size],
+        align && `text-${align}`,
+        truncate && "truncate overflow-hidden text-ellipsis",
+        overflow && overflowStyles[overflow],
+        className
+      ),
+      style,
+      children: children ?? content
+    }
+  );
+};
+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",
@@ -2923,7 +4232,7 @@ var displayStyles = {
   "inline-flex": "inline-flex",
   grid: "grid"
 };
-var overflowStyles = {
+var overflowStyles2 = {
   auto: "overflow-auto",
   hidden: "overflow-hidden",
   visible: "overflow-visible",
@@ -3003,7 +4312,7 @@ var Box = React11__default.default.forwardRef(
           display && displayStyles[display],
           fullWidth && "w-full",
           fullHeight && "h-full",
-          overflow && overflowStyles[overflow],
+          overflow && overflowStyles2[overflow],
           position && positionStyles[position],
           isClickable && "cursor-pointer",
           className
@@ -3019,191 +4328,6 @@ var Box = React11__default.default.forwardRef(
   }
 );
 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 = {
-  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",
-  h4: "text-xl font-bold text-foreground",
-  h5: "text-lg font-bold text-foreground",
-  h6: "text-base font-bold text-foreground",
-  heading: "text-2xl font-bold text-foreground",
-  subheading: "text-lg font-semibold text-foreground",
-  body1: "text-base font-normal text-foreground",
-  body2: "text-sm font-normal text-foreground",
-  body: "text-base font-normal text-foreground",
-  caption: "text-xs font-normal text-muted-foreground",
-  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
-  small: "text-sm font-normal text-foreground",
-  large: "text-lg font-medium text-foreground",
-  label: "text-sm font-medium text-foreground"
-};
-var colorStyles = {
-  primary: "text-foreground",
-  secondary: "text-muted-foreground",
-  muted: "text-muted-foreground",
-  error: "text-error",
-  success: "text-success",
-  warning: "text-warning",
-  inherit: "text-inherit"
-};
-var weightStyles = {
-  light: "font-light",
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var defaultElements = {
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  h4: "h4",
-  h5: "h5",
-  h6: "h6",
-  heading: "h2",
-  subheading: "h3",
-  body1: "p",
-  body2: "p",
-  body: "p",
-  caption: "span",
-  overline: "span",
-  small: "span",
-  large: "p",
-  label: "span"
-};
-var typographySizeStyles = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-base",
-  lg: "text-lg",
-  xl: "text-xl",
-  "2xl": "text-2xl",
-  "3xl": "text-3xl"
-};
-var overflowStyles2 = {
-  visible: "overflow-visible",
-  hidden: "overflow-hidden",
-  wrap: "break-words overflow-hidden",
-  "clamp-2": "overflow-hidden line-clamp-2",
-  "clamp-3": "overflow-hidden line-clamp-3"
-};
-var Typography = ({
-  variant: variantProp,
-  level,
-  color = "primary",
-  align,
-  weight,
-  size,
-  truncate = false,
-  overflow,
-  as,
-  id,
-  className,
-  style,
-  content,
-  children
-}) => {
-  const variant = variantProp ?? (level ? `h${level}` : "body1");
-  const Component2 = as || defaultElements[variant];
-  const Comp = Component2;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      id,
-      className: cn(
-        variantStyles[variant],
-        colorStyles[color],
-        weight && weightStyles[weight],
-        size && typographySizeStyles[size],
-        align && `text-${align}`,
-        truncate && "truncate overflow-hidden text-ellipsis",
-        overflow && overflowStyles2[overflow],
-        className
-      ),
-      style,
-      children: children ?? content
-    }
-  );
-};
-Typography.displayName = "Typography";
 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 },
@@ -3231,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" }
@@ -3242,52 +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 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(
@@ -3337,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" }
@@ -3348,30 +4456,26 @@ 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,
     {
@@ -3386,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"
           ] })
         ] })
@@ -3443,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" }
@@ -3454,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";
@@ -3691,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) => {
@@ -4226,7 +5314,7 @@ Avl3DLabel.displayName = "Avl3DLabel";
 var Avl3DTooltip = ({
   position,
   title,
-  rows,
+  rows: rows2,
   accentColor = "#5b9bd5"
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4264,7 +5352,7 @@ var Avl3DTooltip = ({
                 children: title
               }
             ),
-            rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
+            rows2.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
               Box,
               {
                 style: {