@almadar/ui 2.15.8 → 2.15.10

package/dist/runtime/index.js

@@ -1,22 +1,3574 @@
-import '../chunk-SD3KVCY6.js';
-import '../chunk-N7MVUW4R.js';
-import '../chunk-3HJHHULT.js';
-import { useFetchedDataContext } from '../chunk-JJHCOO34.js';
-import '../chunk-ACUO2BBW.js';
-import '../chunk-4N3BAPDB.js';
-import '../chunk-DKQN5FVU.js';
-import { registerTrait, unregisterTrait, updateTraitState, recordTransition } from '../chunk-XL7WB2O5.js';
-import '../chunk-CDIOHSKG.js';
-import { useEventBus } from '../chunk-YXZM3WCF.js';
-import '../chunk-3JGAROCW.js';
-import '../chunk-QIABKRCN.js';
-import '../chunk-K2D5D3WK.js';
-import '../chunk-PKBMQBKP.js';
-import { createContext, useMemo, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import * as React113 from 'react';
+import React113__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, forwardRef, useImperativeHandle, lazy, useMemo, useContext, Component } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import '@tanstack/react-query';
+import 'react-dom';
+import '@almadar/ui/context';
+import * as LucideIcons from 'lucide-react';
+import { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import '@almadar/evaluator';
+import { isEntityAwarePattern } from '@almadar/patterns';
+import 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import 'react-router-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+import rehypeKatex from 'rehype-katex';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
+import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { useThree, useFrame, Canvas } from '@react-three/fiber';
+import { OrbitControls, Grid } from '@react-three/drei';
+import * as THREE from 'three';
+import { GLTFLoader as GLTFLoader$1 } from 'three/examples/jsm/loaders/GLTFLoader';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
 import { isCircuitEvent, schemaToIR, getPage, clearSchemaCache as clearSchemaCache$1 } from '@almadar/core';
 import { StateMachineManager, createContextFromBindings, interpolateValue, EffectExecutor } from '@almadar/runtime';
-import { isEntityAwarePattern } from '@almadar/patterns';
-import { jsx } from 'react/jsx-runtime';
+
+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;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var EventBusContext = createContext(null);
+function getGlobalEventBus() {
+  if (typeof window !== "undefined") {
+    return window.__kflowEventBus ?? null;
+  }
+  return null;
+}
+var fallbackListeners = /* @__PURE__ */ new Map();
+var fallbackAnyListeners = /* @__PURE__ */ new Set();
+var fallbackEventBus = {
+  emit: (type, payload) => {
+    const event = {
+      type,
+      payload,
+      timestamp: Date.now()
+    };
+    const handlers = fallbackListeners.get(type);
+    if (handlers) {
+      handlers.forEach((handler) => {
+        try {
+          handler(event);
+        } catch (error) {
+          console.error(`[EventBus] Error in listener for '${type}':`, error);
+        }
+      });
+    }
+    fallbackAnyListeners.forEach((handler) => {
+      try {
+        handler(event);
+      } catch (error) {
+        console.error(`[EventBus] Error in onAny listener for '${type}':`, error);
+      }
+    });
+  },
+  on: (type, listener) => {
+    if (!fallbackListeners.has(type)) {
+      fallbackListeners.set(type, /* @__PURE__ */ new Set());
+    }
+    fallbackListeners.get(type).add(listener);
+    return () => {
+      const handlers = fallbackListeners.get(type);
+      if (handlers) {
+        handlers.delete(listener);
+        if (handlers.size === 0) {
+          fallbackListeners.delete(type);
+        }
+      }
+    };
+  },
+  once: (type, listener) => {
+    const wrappedListener = (event) => {
+      fallbackListeners.get(type)?.delete(wrappedListener);
+      listener(event);
+    };
+    return fallbackEventBus.on(type, wrappedListener);
+  },
+  hasListeners: (type) => {
+    const handlers = fallbackListeners.get(type);
+    return handlers !== void 0 && handlers.size > 0;
+  },
+  onAny: (listener) => {
+    fallbackAnyListeners.add(listener);
+    return () => {
+      fallbackAnyListeners.delete(listener);
+    };
+  }
+};
+function useEventBus() {
+  const context = useContext(EventBusContext);
+  return context ?? getGlobalEventBus() ?? fallbackEventBus;
+}
+function useEmitEvent() {
+  const eventBus = useEventBus();
+  return useCallback(
+    (type, payload) => {
+      eventBus.emit(type, payload);
+    },
+    [eventBus]
+  );
+}
+createContext(null);
+createContext(null);
+
+// lib/api-client.ts
+typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "/api";
+
+// locales/en.json
+var en_default = {
+  $meta: { locale: "en", direction: "ltr" },
+  "common.save": "Save",
+  "common.cancel": "Cancel",
+  "common.delete": "Delete",
+  "common.close": "Close",
+  "common.confirm": "Are you sure?",
+  "common.create": "Create",
+  "common.edit": "Edit",
+  "common.view": "View",
+  "common.add": "Add",
+  "common.remove": "Remove",
+  "common.search": "Search...",
+  "common.filter": "Filter",
+  "common.actions": "Actions",
+  "common.yes": "Yes",
+  "common.no": "No",
+  "common.selected": "selected",
+  "common.ok": "OK",
+  "common.done": "Done",
+  "common.apply": "Apply",
+  "common.reset": "Reset",
+  "common.refresh": "Refresh",
+  "common.export": "Export",
+  "common.import": "Import",
+  "common.copy": "Copy",
+  "common.settings": "Settings",
+  "nav.previous": "Previous",
+  "nav.next": "Next",
+  "nav.back": "Back",
+  "nav.home": "Home",
+  "form.submit": "Submit",
+  "form.saving": "Saving...",
+  "form.required": "This field is required",
+  "form.invalidEmail": "Enter a valid email address",
+  "form.selectPlaceholder": "Select {{label}}...",
+  "form.searchPlaceholder": "Search {{entity}}...",
+  "table.empty.title": "No items found",
+  "table.empty.description": "No items to display.",
+  "table.search.placeholder": "Search...",
+  "table.pagination.showing": "Showing {{start}} to {{end}} of {{total}} results",
+  "table.pagination.page": "Page {{page}} of {{totalPages}}",
+  "table.bulk.selected": "{{count}} selected",
+  "table.loading": "Loading...",
+  "status.loading": "Loading...",
+  "status.scheduled": "Scheduled",
+  "status.inProgress": "In Progress",
+  "status.completed": "Completed",
+  "status.cancelled": "Cancelled",
+  "status.pending": "Pending",
+  "status.active": "Active",
+  "status.inactive": "Inactive",
+  "status.draft": "Draft",
+  "status.archived": "Archived",
+  "error.generic": "Something went wrong",
+  "error.retry": "Try again",
+  "error.notFound": "Not found",
+  "error.loadFailed": "Failed to load: {{message}}",
+  "error.configMissing": "Configuration not found for: {{id}}",
+  "common.loading": "Loading...",
+  "common.showMore": "Show More",
+  "common.showLess": "Show Less",
+  "common.noResults": "No results found",
+  "common.saveChanges": "Save Changes",
+  "common.retry": "Retry",
+  "common.open": "Open",
+  "common.back": "Back",
+  "empty.noItems": "No items",
+  "empty.noData": "No data available",
+  "empty.noItemsYet": "No items yet",
+  "empty.noItemsAdded": "No items added yet",
+  "empty.noOptionsFound": "No options found",
+  "list.addItemPlaceholder": "Add new item...",
+  "error.occurred": "An error occurred",
+  "error.failedToLoad": "Failed to load data",
+  "wizard.back": "Back",
+  "wizard.next": "Next",
+  "wizard.complete": "Complete",
+  "wizard.stepOf": "Step {{current}} of {{total}}",
+  "pagination.previous": "Previous",
+  "pagination.next": "Next",
+  "pagination.total": "Total:",
+  "pagination.show": "Show:",
+  "pagination.goTo": "Go to:",
+  "pagination.go": "Go",
+  "auth.signIn": "Sign in",
+  "auth.signOut": "Sign out",
+  "dialog.confirm": "Confirm",
+  "dialog.cancel": "Cancel",
+  "dialog.loading": "Loading...",
+  "dialog.delete.title": "Delete {{item}}?",
+  "dialog.delete.message": "This action cannot be undone.",
+  "trait.availableActions": "Available Actions",
+  "trait.transitions": "Transitions",
+  "trait.availableNow": "Available now",
+  "book.startReading": "Start Reading",
+  "book.tableOfContents": "Table of Contents",
+  "book.partNumber": "Part {{number}}",
+  "book.print": "Print",
+  "book.previousPage": "Previous page",
+  "book.nextPage": "Next page",
+  "quiz.showAnswer": "Show answer",
+  "quiz.hideAnswer": "Hide answer"
+};
+
+// hooks/useTranslate.ts
+var { $meta: _meta, ...coreMessages } = en_default;
+var coreLocale = coreMessages;
+var I18nContext = createContext({
+  locale: "en",
+  direction: "ltr",
+  t: (key) => coreLocale[key] ?? key
+  // core locale fallback
+});
+I18nContext.displayName = "I18nContext";
+I18nContext.Provider;
+function useTranslate() {
+  return useContext(I18nContext);
+}
+typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
+createContext(void 0);
+var FetchedDataContext = createContext(null);
+function useFetchedDataContext() {
+  return useContext(FetchedDataContext);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var iconAliases = {
+  "close": LucideIcons.X,
+  "trash": LucideIcons.Trash2,
+  "loader": LucideIcons.Loader2,
+  "stop": LucideIcons.Square,
+  "volume": LucideIcons.Volume2,
+  "volume-off": LucideIcons.VolumeX,
+  "refresh": LucideIcons.RefreshCw,
+  "share": LucideIcons.Share2,
+  "sort-asc": LucideIcons.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons.ArrowDownNarrowWide
+};
+function kebabToPascal(name) {
+  return name.split("-").map((part) => {
+    if (/^\d+$/.test(part)) return part;
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  }).join("");
+}
+var resolvedCache = /* @__PURE__ */ new Map();
+function resolveIcon(name) {
+  const cached = resolvedCache.get(name);
+  if (cached) return cached;
+  const resolved = doResolve(name);
+  resolvedCache.set(name, resolved);
+  return resolved;
+}
+function doResolve(name) {
+  if (iconAliases[name]) return iconAliases[name];
+  const pascalName = kebabToPascal(name);
+  const directLookup = LucideIcons[pascalName];
+  if (directLookup && typeof directLookup === "object") return directLookup;
+  const asIs = LucideIcons[name];
+  if (asIs && typeof asIs === "object") return asIs;
+  return LucideIcons.HelpCircle;
+}
+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-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
+  surface: "bg-[var(--color-card)]",
+  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+};
+var roundedStyles = {
+  none: "rounded-none",
+  sm: "rounded-[var(--radius-sm)]",
+  md: "rounded-[var(--radius-md)]",
+  lg: "rounded-[var(--radius-lg)]",
+  xl: "rounded-[var(--radius-xl)]",
+  "2xl": "rounded-[var(--radius-xl)]",
+  full: "rounded-[var(--radius-full)]"
+};
+var shadowStyles = {
+  none: "shadow-none",
+  sm: "shadow-[var(--shadow-sm)]",
+  md: "shadow-[var(--shadow-main)]",
+  lg: "shadow-[var(--shadow-lg)]",
+  xl: "shadow-[var(--shadow-lg)]"
+};
+var displayStyles = {
+  block: "block",
+  inline: "inline",
+  "inline-block": "inline-block",
+  flex: "flex",
+  "inline-flex": "inline-flex",
+  grid: "grid"
+};
+var overflowStyles = {
+  auto: "overflow-auto",
+  hidden: "overflow-hidden",
+  visible: "overflow-visible",
+  scroll: "overflow-scroll"
+};
+var positionStyles = {
+  relative: "relative",
+  absolute: "absolute",
+  fixed: "fixed",
+  sticky: "sticky"
+};
+var Box = React113__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,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...rest
+  }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = useCallback((e) => {
+      if (action) {
+        e.stopPropagation();
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    }, [action, actionPayload, eventBus, onClick]);
+    const handleMouseEnter = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
+      }
+      onMouseEnter?.(e);
+    }, [hoverEvent, eventBus, onMouseEnter]);
+    const handleMouseLeave = useCallback((e) => {
+      if (hoverEvent) {
+        eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
+      }
+      onMouseLeave?.(e);
+    }, [hoverEvent, eventBus, onMouseLeave]);
+    const isClickable = action || onClick;
+    const Comp = Component2;
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          // Padding
+          padding && paddingStyles[padding],
+          paddingX && paddingXStyles[paddingX],
+          paddingY && paddingYStyles[paddingY],
+          // Margin
+          margin && marginStyles[margin],
+          marginX && marginXStyles[marginX],
+          marginY && marginYStyles[marginY],
+          // Background
+          bgStyles[bg],
+          // Border - uses theme variables
+          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          // Rounded
+          roundedStyles[rounded],
+          // Shadow
+          shadowStyles[shadow],
+          // Display
+          display && displayStyles[display],
+          // Dimensions
+          fullWidth && "w-full",
+          fullHeight && "h-full",
+          // Overflow
+          overflow && overflowStyles[overflow],
+          // Position
+          position && positionStyles[position],
+          // Cursor for clickable
+          isClickable && "cursor-pointer",
+          className
+        ),
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var variantStyles = {
+  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
+  h3: "text-2xl font-bold text-[var(--color-foreground)]",
+  h4: "text-xl font-bold text-[var(--color-foreground)]",
+  h5: "text-lg font-bold text-[var(--color-foreground)]",
+  h6: "text-base font-bold text-[var(--color-foreground)]",
+  heading: "text-2xl font-bold text-[var(--color-foreground)]",
+  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
+  body1: "text-base font-normal text-[var(--color-foreground)]",
+  body2: "text-sm font-normal text-[var(--color-foreground)]",
+  body: "text-base font-normal text-[var(--color-foreground)]",
+  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
+  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
+  small: "text-sm font-normal text-[var(--color-foreground)]",
+  large: "text-lg font-medium text-[var(--color-foreground)]",
+  label: "text-sm font-medium text-[var(--color-foreground)]"
+};
+var colorStyles = {
+  primary: "text-[var(--color-foreground)]",
+  secondary: "text-[var(--color-muted-foreground)]",
+  muted: "text-[var(--color-muted-foreground)]",
+  error: "text-[var(--color-error)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-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__ */ 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 variantStyles2 = {
+  primary: [
+    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+  ].join(" "),
+  secondary: [
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+    "hover:bg-[var(--color-secondary-hover)]",
+    "active:scale-[var(--active-scale)]"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-[var(--color-muted-foreground)]",
+    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "active:scale-[var(--active-scale)]"
+  ].join(" "),
+  danger: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-error)] hover:text-[var(--color-error-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+  ].join(" "),
+  success: [
+    "bg-[var(--color-surface)] text-[var(--color-success)]",
+    "border-[length:var(--border-width)] border-[var(--color-success)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-success)] hover:text-[var(--color-success-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+  ].join(" "),
+  warning: [
+    "bg-[var(--color-surface)] text-[var(--color-warning)]",
+    "border-[length:var(--border-width)] border-[var(--color-warning)]",
+    "shadow-[var(--shadow-sm)]",
+    "hover:bg-[var(--color-warning)] hover:text-[var(--color-warning-foreground)] hover:shadow-[var(--shadow-hover)]",
+    "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
+  ].join(" "),
+  // "default" is an alias for secondary
+  default: [
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+    "hover:bg-[var(--color-secondary-hover)]",
+    "active:scale-[var(--active-scale)]"
+  ].join(" ")
+};
+variantStyles2.destructive = variantStyles2.danger;
+var sizeStyles2 = {
+  sm: "px-3 py-1.5 text-sm",
+  md: "px-4 py-2 text-sm",
+  lg: "px-6 py-3 text-base"
+};
+var iconSizeStyles = {
+  sm: "h-3.5 w-3.5",
+  md: "h-4 w-4",
+  lg: "h-5 w-5"
+};
+function resolveIconProp(value, sizeClass) {
+  if (!value) return null;
+  if (typeof value === "string") {
+    const Resolved = resolveIcon(value);
+    return Resolved ? /* @__PURE__ */ jsx(Resolved, { className: sizeClass }) : null;
+  }
+  if (typeof value === "function") {
+    const IconComp = value;
+    return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
+  }
+  if (React113__default.isValidElement(value)) {
+    return value;
+  }
+  if (typeof value === "object" && value !== null && "render" in value) {
+    const IconComp = value;
+    return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
+  }
+  return value;
+}
+var Button = React113__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__ */ jsxs(
+      "button",
+      {
+        ref,
+        disabled: disabled || isLoading,
+        className: cn(
+          "inline-flex items-center justify-center gap-2",
+          "font-[var(--font-weight-medium)]",
+          "rounded-[var(--radius-sm)]",
+          "transition-all duration-[var(--transition-normal)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-offset-[length:var(--focus-ring-offset)]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          variantStyles2[variant],
+          sizeStyles2[size],
+          className
+        ),
+        onClick: handleClick,
+        ...props,
+        "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
+        children: [
+          isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+          children || label,
+          resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var variantStyles3 = {
+  default: [
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+  ].join(" "),
+  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  success: [
+    "bg-[var(--color-surface)] text-[var(--color-success)]",
+    "border-[length:var(--border-width)] border-[var(--color-success)]"
+  ].join(" "),
+  warning: [
+    "bg-[var(--color-surface)] text-[var(--color-warning)]",
+    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+  ].join(" "),
+  danger: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]"
+  ].join(" "),
+  error: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]"
+  ].join(" "),
+  info: [
+    "bg-[var(--color-surface)] text-[var(--color-info)]",
+    "border-[length:var(--border-width)] border-[var(--color-info)]"
+  ].join(" "),
+  neutral: [
+    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+  ].join(" ")
+};
+var sizeStyles3 = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base"
+};
+var Badge = React113__default.forwardRef(
+  ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
+    const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
+    const resolvedIcon = typeof icon === "string" ? (() => {
+      const I = resolveIcon(icon);
+      return I ? /* @__PURE__ */ jsx(I, { className: iconSizes2[size] }) : null;
+    })() : icon;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          variantStyles3[variant],
+          sizeStyles3[size],
+          className
+        ),
+        ...props,
+        children: [
+          resolvedIcon,
+          children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label)
+        ]
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+var Input = React113__default.forwardRef(
+  ({
+    className,
+    inputType,
+    type: htmlType,
+    error,
+    leftIcon,
+    rightIcon,
+    icon: IconComponent,
+    clearable,
+    onClear,
+    value,
+    options,
+    rows = 3,
+    onChange,
+    ...props
+  }, ref) => {
+    const type = inputType || htmlType || "text";
+    const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-4 w-4" });
+    const showClearButton = clearable && value && String(value).length > 0;
+    const baseClassName = cn(
+      "block w-full rounded-[var(--radius-sm)] transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+      "px-3 py-2 text-sm",
+      "bg-[var(--color-card)] hover:bg-[var(--color-muted)] focus:bg-[var(--color-card)]",
+      "text-[var(--color-foreground)] placeholder:text-[var(--color-muted-foreground)]",
+      "focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)] focus:border-[var(--color-ring)]",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[var(--color-muted)]",
+      error ? "border-[var(--color-error)] focus:border-[var(--color-error)] focus:ring-[var(--color-error)]" : "",
+      resolvedLeftIcon && "pl-10",
+      (rightIcon || showClearButton) && "pr-10",
+      className
+    );
+    if (type === "select") {
+      return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            ref,
+            value,
+            onChange,
+            className: cn(baseClassName, "appearance-none pr-10", className),
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "Select..." }),
+              options?.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+      ] });
+    }
+    if (type === "textarea") {
+      return /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref,
+          value,
+          onChange,
+          rows,
+          className: baseClassName,
+          ...props
+        }
+      ) });
+    }
+    if (type === "checkbox") {
+      return /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          checked: props.checked,
+          onChange,
+          className: cn(
+            "h-4 w-4 rounded-[var(--radius-sm)]",
+            "border-[var(--color-border)]",
+            "text-[var(--color-primary)] focus:ring-[var(--color-ring)]",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            className
+          ),
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type,
+          value,
+          onChange,
+          className: baseClassName,
+          ...props
+        }
+      ),
+      showClearButton && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClear,
+          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)]",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      ),
+      rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]", children: rightIcon })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var Label = React113__default.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        ref,
+        className: cn(
+          "block text-sm font-bold text-[var(--color-foreground)]",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx("span", { className: "text-[var(--color-error)] ml-1", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var Textarea = React113__default.forwardRef(
+  ({ className, error, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: cn(
+          "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)]",
+          "px-3 py-2 text-sm text-[var(--color-foreground)]",
+          "bg-[var(--color-card)]",
+          "placeholder:text-[var(--color-placeholder)]",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
+          "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
+          "resize-y min-h-[80px]",
+          error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+var Select = React113__default.forwardRef(
+  ({ className, options, placeholder, error, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          className: cn(
+            "block w-full border-[length:var(--border-width)] shadow-[var(--shadow-sm)] appearance-none",
+            "px-3 py-2 pr-10 text-sm text-[var(--color-foreground)] font-medium",
+            "bg-[var(--color-card)]",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-[var(--color-ring)]",
+            "disabled:bg-[var(--color-muted)] disabled:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed",
+            error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--color-border)] focus:border-[var(--color-primary)]",
+            className
+          ),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx(
+              "option",
+              {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[var(--color-foreground)]" }) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+var Checkbox = React113__default.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: inputId,
+          className: cn(
+            "peer h-4 w-4 border-[length:var(--border-width)] border-[var(--color-border)]",
+            "accent-[var(--color-primary)] focus:ring-[var(--color-ring)] focus:ring-offset-0",
+            "bg-[var(--color-card)] checked:bg-[var(--color-primary)]",
+            "disabled:opacity-50 disabled:cursor-not-allowed",
+            className
+          ),
+          ...props
+        }
+      ) }),
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "ml-2 text-sm text-[var(--color-foreground)] font-medium cursor-pointer select-none",
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var variantStyles4 = {
+  default: [
+    "bg-[var(--color-card)] border-none",
+    "transition-all duration-[var(--transition-normal)]",
+    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+  ].join(" "),
+  bordered: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-none",
+    "transition-all duration-[var(--transition-normal)]",
+    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+  ].join(" "),
+  elevated: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-main)]",
+    "transition-all duration-[var(--transition-normal)]",
+    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+  ].join(" "),
+  // Interactive variant with theme-specific hover effects
+  interactive: [
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-main)]",
+    "cursor-pointer",
+    "transition-all duration-[var(--transition-normal)]",
+    "hover:shadow-[var(--shadow-hover)]"
+  ].join(" ")
+};
+var paddingStyles2 = {
+  none: "",
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+var shadowStyles2 = {
+  none: "shadow-none",
+  sm: "shadow-[var(--shadow-sm)]",
+  md: "shadow-[var(--shadow-main)]",
+  lg: "shadow-[var(--shadow-lg)]"
+};
+var Card = React113__default.forwardRef(
+  ({
+    className,
+    variant = "bordered",
+    padding = "md",
+    title,
+    subtitle,
+    shadow,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-[var(--radius-md)]",
+          "transition-all duration-[var(--transition-normal)]",
+          variantStyles4[variant],
+          paddingStyles2[padding],
+          shadow && shadowStyles2[shadow],
+          className
+        ),
+        ...props,
+        children: [
+          (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+            title && /* @__PURE__ */ jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-lg text-[var(--color-card-foreground)]",
+      "font-[var(--font-weight-bold)]",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardContent = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardBody = CardContent;
+CardBody.displayName = "CardBody";
+var CardFooter = React113__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("mt-4 flex items-center", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var sizeStyles4 = {
+  xs: "h-3 w-3",
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8"
+};
+var Spinner = React113__default.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("text-[var(--color-foreground)]", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Loader2, { className: cn("animate-spin", sizeStyles4[size]) })
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+var Radio = React113__default.forwardRef(
+  ({
+    label,
+    helperText,
+    error,
+    size = "md",
+    className,
+    id,
+    checked,
+    disabled,
+    ...props
+  }, ref) => {
+    const radioId = id || `radio-${Math.random().toString(36).substr(2, 9)}`;
+    const hasError = !!error;
+    const sizeClasses6 = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6"
+    };
+    const dotSizeClasses = {
+      sm: "w-2 h-2",
+      md: "w-2.5 h-2.5",
+      lg: "w-3 h-3"
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0 mt-0.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "radio",
+              id: radioId,
+              checked,
+              disabled,
+              className: cn("sr-only peer", className),
+              "aria-invalid": hasError,
+              "aria-describedby": error ? `${radioId}-error` : helperText ? `${radioId}-helper` : void 0,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: radioId,
+              className: cn(
+                "flex items-center justify-center",
+                "border-[length:var(--border-width)] transition-all cursor-pointer",
+                sizeClasses6[size],
+                hasError ? "border-[var(--color-error)] peer-focus:ring-[var(--color-error)]/20" : "border-[var(--color-border)] peer-focus:ring-[var(--color-ring)]/20",
+                checked ? hasError ? "border-[var(--color-error)]" : "border-[var(--color-primary)] bg-[var(--color-primary)]" : "",
+                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                disabled && "opacity-50 cursor-not-allowed",
+                !disabled && "hover:border-[var(--color-border-hover)]"
+              ),
+              children: checked && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "transition-all",
+                    dotSizeClasses[size],
+                    hasError ? "bg-[var(--color-error)]" : "bg-[var(--color-primary-foreground)]"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        label && /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: radioId,
+            className: cn(
+              "block text-sm font-medium cursor-pointer select-none",
+              hasError ? "text-[var(--color-error)]" : "text-[var(--color-foreground)]",
+              disabled && "opacity-50 cursor-not-allowed"
+            ),
+            children: label
+          }
+        ) })
+      ] }),
+      (helperText || error) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 ml-8", children: [
+        error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${radioId}-error`,
+            className: "text-sm text-[var(--color-error)] font-medium",
+            role: "alert",
+            children: error
+          }
+        ),
+        !error && helperText && /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${radioId}-helper`,
+            className: "text-sm text-[var(--color-muted-foreground)]",
+            children: helperText
+          }
+        )
+      ] })
+    ] });
+  }
+);
+Radio.displayName = "Radio";
+var Switch = React113.forwardRef(
+  ({
+    checked,
+    defaultChecked = false,
+    onChange,
+    disabled = false,
+    label,
+    id,
+    name,
+    className
+  }, ref) => {
+    const [isChecked, setIsChecked] = React113.useState(
+      checked !== void 0 ? checked : defaultChecked
+    );
+    React113.useEffect(() => {
+      if (checked !== void 0) {
+        setIsChecked(checked);
+      }
+    }, [checked]);
+    const handleClick = () => {
+      if (disabled) return;
+      const newValue = !isChecked;
+      if (checked === void 0) {
+        setIsChecked(newValue);
+      }
+      onChange?.(newValue);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref,
+          type: "button",
+          role: "switch",
+          "aria-checked": isChecked,
+          "aria-label": label,
+          id,
+          name,
+          disabled,
+          onClick: handleClick,
+          className: cn(
+            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            isChecked ? "bg-primary" : "bg-muted",
+            disabled && "cursor-not-allowed opacity-50"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
+                isChecked ? "translate-x-5" : "translate-x-0"
+              )
+            }
+          )
+        }
+      ),
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: id,
+          className: cn(
+            "text-sm font-medium leading-none cursor-pointer",
+            disabled && "cursor-not-allowed opacity-70"
+          ),
+          onClick: handleClick,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+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__ */ 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__ */ jsx(Stack, { direction: "vertical", ...props });
+var HStack = (props) => /* @__PURE__ */ jsx(Stack, { direction: "horizontal", ...props });
+var statusColors = {
+  online: "bg-[var(--color-success)]",
+  offline: "bg-[var(--color-muted-foreground)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+  warning: "bg-[var(--color-warning)]",
+  critical: "bg-[var(--color-error)]"
+};
+var pulseRingColors = {
+  online: "ring-[var(--color-success)]",
+  offline: "ring-[var(--color-muted-foreground)]",
+  away: "ring-[var(--color-warning)]",
+  busy: "ring-[var(--color-error)]",
+  warning: "ring-[var(--color-warning)]",
+  critical: "ring-[var(--color-error)]"
+};
+var sizeStyles5 = {
+  sm: "w-2 h-2",
+  md: "w-2.5 h-2.5",
+  lg: "w-3 h-3"
+};
+var StatusDot = React113__default.forwardRef(
+  ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-block rounded-full flex-shrink-0",
+          statusColors[status],
+          sizeStyles5[size],
+          pulse && [
+            "animate-pulse",
+            "ring-2 ring-offset-1",
+            pulseRingColors[status],
+            "ring-opacity-40"
+          ],
+          className
+        ),
+        role: "status",
+        "aria-label": label ?? status,
+        ...props
+      }
+    );
+  }
+);
+StatusDot.displayName = "StatusDot";
+var sizeStyles6 = {
+  sm: { icon: "w-3 h-3", text: "text-xs" },
+  md: { icon: "w-4 h-4", text: "text-sm" },
+  lg: { icon: "w-5 h-5", text: "text-base" }
+};
+function resolveDirection(value, direction) {
+  if (direction) return direction;
+  if (value === void 0 || value === 0) return "flat";
+  return value > 0 ? "up" : "down";
+}
+function resolveColor(dir, invert) {
+  if (dir === "flat") return "text-[var(--color-muted-foreground)]";
+  const isPositive = dir === "up";
+  const isGood = invert ? !isPositive : isPositive;
+  return isGood ? "text-[var(--color-success)]" : "text-[var(--color-error)]";
+}
+var iconMap2 = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: ArrowRight
+};
+var TrendIndicator = React113__default.forwardRef(
+  ({
+    className,
+    value,
+    direction,
+    showValue = true,
+    invert = false,
+    label,
+    size = "md",
+    ...props
+  }, ref) => {
+    const dir = resolveDirection(value, direction);
+    const colorClass = resolveColor(dir, invert);
+    const IconComponent = iconMap2[dir];
+    const styles = sizeStyles6[size];
+    const formattedValue = value !== void 0 ? `${value > 0 ? "+" : ""}${value}%` : void 0;
+    const ariaLabel = label ?? (formattedValue ? `${dir} ${formattedValue}` : dir);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center gap-1 font-medium",
+          colorClass,
+          styles.text,
+          className
+        ),
+        role: "status",
+        "aria-label": ariaLabel,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(IconComponent, { className: styles.icon }),
+          showValue && formattedValue && /* @__PURE__ */ jsx("span", { children: formattedValue })
+        ]
+      }
+    );
+  }
+);
+TrendIndicator.displayName = "TrendIndicator";
+function useSafeEventBus() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var trackSizes = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2"
+};
+var thumbSizes = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+var RangeSlider = React113__default.forwardRef(
+  ({
+    className,
+    min = 0,
+    max = 100,
+    value = 0,
+    step = 1,
+    showTooltip = false,
+    showTicks = false,
+    buffered,
+    size = "md",
+    disabled = false,
+    action,
+    actionPayload,
+    onChange,
+    formatValue: formatValue5,
+    ...props
+  }, ref) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [showTip, setShowTip] = useState(false);
+    const inputRef = useRef(null);
+    const eventBus = useSafeEventBus();
+    const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
+    const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
+    const displayValue = formatValue5 ? formatValue5(value) : String(value);
+    const handleChange = useCallback(
+      (e) => {
+        const newValue = Number(e.target.value);
+        onChange?.(newValue);
+        if (action) {
+          eventBus.emit(`UI:${action}`, { ...actionPayload, value: newValue });
+        }
+      },
+      [onChange, action, actionPayload, eventBus]
+    );
+    const tickCount = showTicks ? Math.min(Math.floor((max - min) / step), 20) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-full",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full py-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-x-0 rounded-full bg-[var(--color-muted)]",
+                  trackSizes[size]
+                ),
+                style: { top: "50%", transform: "translateY(-50%)" }
+              }
+            ),
+            bufferedPercentage !== void 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-muted-foreground)] opacity-30",
+                  trackSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  left: 0,
+                  width: `${bufferedPercentage}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-primary)]",
+                  trackSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  left: 0,
+                  width: `${percentage}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "range",
+                min,
+                max,
+                step,
+                value,
+                disabled,
+                onChange: handleChange,
+                onMouseDown: () => {
+                  setIsDragging(true);
+                  setShowTip(true);
+                },
+                onMouseUp: () => {
+                  setIsDragging(false);
+                  setShowTip(false);
+                },
+                onTouchStart: () => {
+                  setIsDragging(true);
+                  setShowTip(true);
+                },
+                onTouchEnd: () => {
+                  setIsDragging(false);
+                  setShowTip(false);
+                },
+                onFocus: () => setShowTip(true),
+                onBlur: () => {
+                  if (!isDragging) setShowTip(false);
+                },
+                className: cn(
+                  "absolute inset-0 w-full opacity-0 cursor-pointer",
+                  disabled && "cursor-not-allowed",
+                  // Thumb sizing via pseudo-element
+                  "[&::-webkit-slider-thumb]:appearance-none",
+                  "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
+                  "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5"
+                ),
+                style: { height: "100%", margin: 0 },
+                "aria-label": props["aria-label"] ?? "Range slider",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": value,
+                "aria-valuetext": displayValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-primary-foreground)]",
+                  "border-2 border-[var(--color-primary)]",
+                  "shadow-[var(--shadow-sm)]",
+                  "pointer-events-none",
+                  "transition-transform duration-100",
+                  isDragging && "scale-110",
+                  thumbSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(1.1)" : ""}`,
+                  left: `${percentage}%`
+                }
+              }
+            ),
+            showTooltip && showTip && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -top-8 px-2 py-0.5 rounded",
+                  "bg-[var(--color-foreground)] text-[var(--color-background)]",
+                  "text-xs font-medium whitespace-nowrap",
+                  "pointer-events-none"
+                ),
+                style: {
+                  left: `${percentage}%`,
+                  transform: "translateX(-50%)"
+                },
+                children: displayValue
+              }
+            )
+          ] }),
+          showTicks && tickCount > 0 && /* @__PURE__ */ jsx("div", { className: "relative w-full h-2 mt-1", children: Array.from({ length: tickCount + 1 }, (_, i) => {
+            const tickPercent = i / tickCount * 100;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute w-px h-1.5 bg-[var(--color-muted-foreground)]",
+                style: { left: `${tickPercent}%` }
+              },
+              i
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+RangeSlider.displayName = "RangeSlider";
+var backgroundClasses = {
+  default: "",
+  alt: "bg-[var(--color-surface)]",
+  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  gradient: [
+    "bg-gradient-to-b",
+    "from-[var(--color-primary)]/5",
+    "to-[var(--color-secondary)]/5"
+  ].join(" ")
+};
+var paddingClasses = {
+  sm: "py-12",
+  md: "py-16",
+  lg: "py-24"
+};
+var ContentSection = React113__default.forwardRef(
+  ({ children, background = "default", padding = "lg", id, className }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        as: "section",
+        id,
+        className: cn(
+          backgroundClasses[background],
+          paddingClasses[padding],
+          className
+        ),
+        children: /* @__PURE__ */ jsx(Box, { className: "mx-auto max-w-7xl px-4 sm:px-6 lg:px-8", children })
+      }
+    );
+  }
+);
+ContentSection.displayName = "ContentSection";
+var ErrorState = ({
+  title,
+  message,
+  description,
+  onRetry,
+  className,
+  retryEvent
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const handleRetry = () => {
+    if (retryEvent) eventBus.emit(`UI:${retryEvent}`, {});
+    onRetry?.();
+  };
+  const resolvedTitle = title ?? t("error.generic");
+  const resolvedMessage = message ?? description ?? t("error.occurred");
+  return /* @__PURE__ */ jsxs(
+    VStack,
+    {
+      align: "center",
+      className: cn(
+        "justify-center py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Box, { className: "mb-4 rounded-[var(--radius-full)] bg-[var(--color-error)]/10 p-3", children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-[var(--color-error)]" }) }),
+        /* @__PURE__ */ jsx(Typography, { variant: "h3", className: "text-lg font-medium text-[var(--color-foreground)]", children: resolvedTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "small", className: "mt-1 text-[var(--color-muted-foreground)] max-w-sm", children: resolvedMessage }),
+        (onRetry || retryEvent) && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "mt-4", onClick: handleRetry, children: t("error.retry") })
+      ]
+    }
+  );
+};
+ErrorState.displayName = "ErrorState";
+var ErrorBoundary = class extends React113__default.Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "reset", () => {
+      this.setState({ error: null });
+    });
+    this.state = { error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.props.onError?.(error, errorInfo);
+  }
+  render() {
+    const { error } = this.state;
+    const { children, fallback, className } = this.props;
+    if (error) {
+      const wrapper = className ? /* @__PURE__ */ jsx("div", { className: cn(className), children: this.renderFallback(error, fallback) }) : this.renderFallback(error, fallback);
+      return wrapper;
+    }
+    return children;
+  }
+  renderFallback(error, fallback) {
+    if (typeof fallback === "function") {
+      return fallback(error, this.reset);
+    }
+    if (fallback) {
+      return fallback;
+    }
+    return /* @__PURE__ */ jsx(
+      ErrorState,
+      {
+        title: "Something went wrong",
+        message: error.message,
+        onRetry: this.reset
+      }
+    );
+  }
+};
+__publicField(ErrorBoundary, "displayName", "ErrorBoundary");
+var ClientEffectConfigContext = createContext(null);
+ClientEffectConfigContext.Provider;
+createContext(null);
+var defaultIcon = L.icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+L.Marker.prototype.options.icon = defaultIcon;
+
+// lib/verificationRegistry.ts
+var checks = /* @__PURE__ */ new Map();
+var transitions = [];
+var MAX_TRANSITIONS = 500;
+var listeners = /* @__PURE__ */ new Set();
+function notifyListeners() {
+  listeners.forEach((l) => l());
+  exposeOnWindow();
+}
+function registerCheck(id, label, status = "pending", details) {
+  checks.set(id, { id, label, status, details, updatedAt: Date.now() });
+  notifyListeners();
+}
+function getAllChecks() {
+  return Array.from(checks.values());
+}
+function recordTransition(trace) {
+  const entry = {
+    ...trace,
+    id: `t-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+  };
+  transitions.push(entry);
+  if (transitions.length > MAX_TRANSITIONS) {
+    transitions.shift();
+  }
+  if (entry.event === "INIT") {
+    const hasFetch = entry.effects.some((e) => e.type === "fetch");
+    const checkId = `init-fetch-${entry.traitName}`;
+    if (hasFetch) {
+      registerCheck(
+        checkId,
+        `INIT transition for "${entry.traitName}" has fetch effect`,
+        "pass"
+      );
+    } else {
+      const hasRenderUI = entry.effects.some((e) => e.type === "render-ui");
+      if (hasRenderUI) {
+        registerCheck(
+          checkId,
+          `INIT transition for "${entry.traitName}" missing fetch effect`,
+          "fail",
+          "Entity-bound render-ui without a fetch effect will show empty data"
+        );
+      }
+    }
+  }
+  const failedEffects = entry.effects.filter((e) => e.status === "failed");
+  if (failedEffects.length > 0) {
+    registerCheck(
+      `effects-${entry.id}`,
+      `Effects failed in ${entry.traitName}: ${entry.from} -> ${entry.to}`,
+      "fail",
+      failedEffects.map((e) => `${e.type}: ${e.error}`).join("; ")
+    );
+  }
+  notifyListeners();
+}
+function getTransitions() {
+  return [...transitions];
+}
+function getBridgeHealth() {
+  return null;
+}
+function getSummary() {
+  const allChecks = getAllChecks();
+  return {
+    totalChecks: allChecks.length,
+    passed: allChecks.filter((c) => c.status === "pass").length,
+    failed: allChecks.filter((c) => c.status === "fail").length,
+    warnings: allChecks.filter((c) => c.status === "warn").length,
+    pending: allChecks.filter((c) => c.status === "pending").length
+  };
+}
+function getSnapshot2() {
+  return {
+    checks: getAllChecks(),
+    transitions: getTransitions(),
+    bridge: getBridgeHealth(),
+    summary: getSummary()
+  };
+}
+function subscribeToVerification(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+function exposeOnWindow() {
+  if (typeof window === "undefined") return;
+  if (!window.__orbitalVerification) {
+    window.__orbitalVerification = {
+      getSnapshot: getSnapshot2,
+      getChecks: getAllChecks,
+      getTransitions,
+      getBridge: getBridgeHealth,
+      getSummary,
+      waitForTransition
+    };
+  }
+}
+function waitForTransition(event, timeoutMs = 1e4) {
+  return new Promise((resolve) => {
+    const existing = transitions.find((t) => t.event === event);
+    if (existing) {
+      resolve(existing);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      unsub();
+      resolve(null);
+    }, timeoutMs);
+    const unsub = subscribeToVerification(() => {
+      const found = transitions.find((t) => t.event === event);
+      if (found) {
+        clearTimeout(timeout);
+        unsub();
+        resolve(found);
+      }
+    });
+  });
+}
+exposeOnWindow();
+var MarkdownContent = React113__default.memo(
+  ({ content, direction, className }) => {
+    const { t: _t } = useTranslate();
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: cn("prose prose-slate dark:prose-invert max-w-none", className),
+        style: { direction },
+        children: /* @__PURE__ */ jsx(
+          ReactMarkdown,
+          {
+            remarkPlugins: [remarkMath, remarkGfm],
+            rehypePlugins: [
+              [rehypeKatex, { strict: false, throwOnError: false }]
+            ],
+            components: {
+              // Handle inline code only — fenced code blocks are parsed out separately
+              code({ className: codeClassName, children, ...props }) {
+                return /* @__PURE__ */ jsx(
+                  "code",
+                  {
+                    ...props,
+                    className: codeClassName,
+                    style: {
+                      backgroundColor: "#1f2937",
+                      color: "#e5e7eb",
+                      padding: "0.125rem 0.375rem",
+                      borderRadius: "0.25rem",
+                      fontSize: "0.875em",
+                      fontFamily: "ui-monospace, monospace"
+                    },
+                    children
+                  }
+                );
+              },
+              // Style links
+              a({ href, children, ...props }) {
+                return /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href,
+                    ...props,
+                    className: "text-blue-600 dark:text-blue-400 hover:underline",
+                    target: href?.startsWith("http") ? "_blank" : void 0,
+                    rel: href?.startsWith("http") ? "noopener noreferrer" : void 0,
+                    children
+                  }
+                );
+              },
+              // Style tables
+              table({ children, ...props }) {
+                return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto my-4", children: /* @__PURE__ */ jsx(
+                  "table",
+                  {
+                    ...props,
+                    className: "min-w-full border-collapse border border-gray-300 dark:border-gray-600",
+                    children
+                  }
+                ) });
+              },
+              th({ children, ...props }) {
+                return /* @__PURE__ */ jsx(
+                  "th",
+                  {
+                    ...props,
+                    className: "border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 px-4 py-2 text-left font-semibold",
+                    children
+                  }
+                );
+              },
+              td({ children, ...props }) {
+                return /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    ...props,
+                    className: "border border-gray-300 dark:border-gray-600 px-4 py-2",
+                    children
+                  }
+                );
+              },
+              // Style blockquotes
+              blockquote({ children, ...props }) {
+                return /* @__PURE__ */ jsx(
+                  "blockquote",
+                  {
+                    ...props,
+                    className: "border-l-4 border-blue-500 pl-4 italic text-[var(--color-foreground)] my-4",
+                    children
+                  }
+                );
+              }
+            },
+            children: content
+          }
+        )
+      }
+    );
+  },
+  (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
+);
+MarkdownContent.displayName = "MarkdownContent";
+var CodeBlock = React113__default.memo(
+  ({
+    code,
+    language = "text",
+    showCopyButton = true,
+    showLanguageBadge = true,
+    maxHeight = "60vh",
+    className
+  }) => {
+    const eventBus = useEventBus();
+    const { t: _t } = useTranslate();
+    const scrollRef = useRef(null);
+    const savedScrollLeftRef = useRef(0);
+    const [copied, setCopied] = useState(false);
+    useLayoutEffect(() => {
+      const el = scrollRef.current;
+      return () => {
+        if (el) savedScrollLeftRef.current = el.scrollLeft;
+      };
+    }, [language, code]);
+    useLayoutEffect(() => {
+      const el = scrollRef.current;
+      if (el) el.scrollLeft = savedScrollLeftRef.current;
+    }, [language, code]);
+    useEffect(() => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const handle = () => {
+        savedScrollLeftRef.current = el.scrollLeft;
+      };
+      el.addEventListener("scroll", handle, { passive: true });
+      return () => el.removeEventListener("scroll", handle);
+    }, [language, code]);
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(code);
+        setCopied(true);
+        eventBus.emit("UI:COPY_CODE", { language, success: true });
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (err) {
+        console.error("Failed to copy code:", err);
+        eventBus.emit("UI:COPY_CODE", { language, success: false });
+      }
+    };
+    return /* @__PURE__ */ jsxs(Box, { className: `relative group ${className || ""}`, children: [
+      (showLanguageBadge || showCopyButton) && /* @__PURE__ */ jsxs(
+        HStack,
+        {
+          justify: "between",
+          align: "center",
+          className: "px-3 py-2 bg-gray-800 rounded-t-lg border-b border-gray-700",
+          children: [
+            showLanguageBadge && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: language }),
+            showCopyButton && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleCopy,
+                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-[var(--color-muted-foreground)] hover:text-white",
+                "aria-label": "Copy code",
+                children: copied ? /* @__PURE__ */ jsx(Check, { size: 16, className: "text-green-400" }) : /* @__PURE__ */ jsx(Copy, { size: 16 })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          style: {
+            overflowX: "auto",
+            overflowY: "auto",
+            WebkitOverflowScrolling: "touch",
+            maxHeight,
+            overscrollBehavior: "auto",
+            touchAction: "pan-x pan-y",
+            contain: "paint",
+            backgroundColor: "#1e1e1e",
+            borderRadius: showLanguageBadge || showCopyButton ? "0 0 0.5rem 0.5rem" : "0.5rem",
+            padding: "1rem"
+          },
+          children: /* @__PURE__ */ jsx(
+            SyntaxHighlighter,
+            {
+              PreTag: "div",
+              language,
+              style: dark,
+              customStyle: {
+                backgroundColor: "transparent",
+                borderRadius: 0,
+                padding: 0,
+                margin: 0,
+                whiteSpace: "pre",
+                minWidth: "100%"
+              },
+              children: code
+            }
+          )
+        }
+      )
+    ] });
+  },
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight
+);
+CodeBlock.displayName = "CodeBlock";
+var Camera3D = forwardRef(
+  ({
+    mode = "isometric",
+    position = [10, 10, 10],
+    target = [0, 0, 0],
+    zoom = 1,
+    fov = 45,
+    enableOrbit = true,
+    minDistance = 2,
+    maxDistance = 100,
+    onChange
+  }, ref) => {
+    const { camera, set, viewport } = useThree();
+    const controlsRef = useRef(null);
+    const initialPosition = useRef(new THREE.Vector3(...position));
+    const initialTarget = useRef(new THREE.Vector3(...target));
+    useEffect(() => {
+      let newCamera;
+      if (mode === "isometric") {
+        const aspect = viewport.aspect;
+        const size = 10 / zoom;
+        newCamera = new THREE.OrthographicCamera(
+          -size * aspect,
+          size * aspect,
+          size,
+          -size,
+          0.1,
+          1e3
+        );
+      } else {
+        newCamera = new THREE.PerspectiveCamera(fov, viewport.aspect, 0.1, 1e3);
+      }
+      newCamera.position.copy(initialPosition.current);
+      newCamera.lookAt(initialTarget.current);
+      set({ camera: newCamera });
+      if (mode === "top-down") {
+        newCamera.position.set(0, 20 / zoom, 0);
+        newCamera.lookAt(0, 0, 0);
+      }
+      return () => {
+      };
+    }, [mode, fov, zoom, viewport.aspect, set]);
+    useFrame(() => {
+      if (onChange) {
+        onChange(camera);
+      }
+    });
+    useImperativeHandle(ref, () => ({
+      getCamera: () => camera,
+      setPosition: (x, y, z) => {
+        camera.position.set(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.update();
+        }
+      },
+      lookAt: (x, y, z) => {
+        camera.lookAt(x, y, z);
+        if (controlsRef.current) {
+          controlsRef.current.target.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      reset: () => {
+        camera.position.copy(initialPosition.current);
+        camera.lookAt(initialTarget.current);
+        if (controlsRef.current) {
+          controlsRef.current.target.copy(initialTarget.current);
+          controlsRef.current.update();
+        }
+      },
+      getViewBounds: () => {
+        const min = new THREE.Vector3(-10, -10, -10);
+        const max = new THREE.Vector3(10, 10, 10);
+        return { min, max };
+      }
+    }));
+    const maxPolarAngle = mode === "top-down" ? 0.1 : Math.PI / 2 - 0.1;
+    return /* @__PURE__ */ jsx(
+      OrbitControls,
+      {
+        ref: controlsRef,
+        camera,
+        enabled: enableOrbit,
+        target: initialTarget.current,
+        minDistance,
+        maxDistance,
+        maxPolarAngle,
+        enableDamping: true,
+        dampingFactor: 0.05
+      }
+    );
+  }
+);
+Camera3D.displayName = "Camera3D";
+var Canvas3DErrorBoundary = class extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "handleReset", () => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null
+      });
+      this.props.onReset?.();
+    });
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      error,
+      errorInfo: null
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    this.props.onError?.(error, errorInfo);
+    console.error("[Canvas3DErrorBoundary] Error caught:", error);
+    console.error("[Canvas3DErrorBoundary] Component stack:", errorInfo.componentStack);
+  }
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return /* @__PURE__ */ jsx("div", { className: "canvas-3d-error", children: /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__content", children: [
+        /* @__PURE__ */ jsx("div", { className: "canvas-3d-error__icon", children: "\u26A0\uFE0F" }),
+        /* @__PURE__ */ jsx("h2", { className: "canvas-3d-error__title", children: "3D Scene Error" }),
+        /* @__PURE__ */ jsx("p", { className: "canvas-3d-error__message", children: "Something went wrong while rendering the 3D scene." }),
+        this.state.error && /* @__PURE__ */ jsxs("details", { className: "canvas-3d-error__details", children: [
+          /* @__PURE__ */ jsx("summary", { children: "Error Details" }),
+          /* @__PURE__ */ jsxs("pre", { className: "error__stack", children: [
+            this.state.error.message,
+            "\n",
+            this.state.error.stack
+          ] }),
+          this.state.errorInfo && /* @__PURE__ */ jsx("pre", { className: "error__component-stack", children: this.state.errorInfo.componentStack })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "canvas-3d-error__actions", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "error__button error__button--primary",
+              onClick: this.handleReset,
+              children: "Try Again"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "error__button error__button--secondary",
+              onClick: () => window.location.reload(),
+              children: "Reload Page"
+            }
+          )
+        ] })
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+function Canvas3DLoadingState({
+  progress = 0,
+  loaded = 0,
+  total = 0,
+  message = "Loading 3D Scene...",
+  details,
+  showSpinner = true,
+  className
+}) {
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+  const hasProgress = total > 0;
+  return /* @__PURE__ */ jsxs("div", { className: `canvas-3d-loading ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__content", children: [
+      showSpinner && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__spinner", children: [
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring" }),
+        /* @__PURE__ */ jsx("div", { className: "spinner__ring spinner__ring--secondary" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__message", children: message }),
+      details && /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__details", children: details }),
+      hasProgress && /* @__PURE__ */ jsxs("div", { className: "canvas-3d-loading__progress", children: [
+        /* @__PURE__ */ jsx("div", { className: "progress__bar", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "progress__fill",
+            style: { width: `${clampedProgress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "progress__text", children: [
+          /* @__PURE__ */ jsxs("span", { className: "progress__percentage", children: [
+            clampedProgress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "progress__count", children: [
+            "(",
+            loaded,
+            "/",
+            total,
+            ")"
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "canvas-3d-loading__background", children: /* @__PURE__ */ jsx("div", { className: "bg__grid" }) })
+  ] });
+}
+
+// lib/debug.ts
+typeof window !== "undefined" && (localStorage.getItem("debug") === "true" || process.env.NODE_ENV === "development");
+lazy(() => import('react-markdown'));
+var GameAudioContext = createContext(null);
+GameAudioContext.displayName = "GameAudioContext";
+function detectAssetRoot2(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function createGLTFLoaderForUrl(url) {
+  const loader = new GLTFLoader();
+  loader.setResourcePath(detectAssetRoot2(url));
+  return loader;
+}
+var AssetLoader = class {
+  constructor() {
+    __publicField(this, "objLoader");
+    __publicField(this, "textureLoader");
+    __publicField(this, "modelCache");
+    __publicField(this, "textureCache");
+    __publicField(this, "loadingPromises");
+    this.objLoader = new OBJLoader();
+    this.textureLoader = new THREE.TextureLoader();
+    this.modelCache = /* @__PURE__ */ new Map();
+    this.textureCache = /* @__PURE__ */ new Map();
+    this.loadingPromises = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Load a GLB/GLTF model
+   * @param url - URL to the .glb or .gltf file
+   * @returns Promise with loaded model scene and animations
+   */
+  async loadModel(url) {
+    if (this.modelCache.has(url)) {
+      return this.modelCache.get(url);
+    }
+    if (this.loadingPromises.has(url)) {
+      return this.loadingPromises.get(url);
+    }
+    const loader = createGLTFLoaderForUrl(url);
+    const loadPromise = loader.loadAsync(url).then((gltf) => {
+      const result = {
+        scene: gltf.scene,
+        animations: gltf.animations || []
+      };
+      this.modelCache.set(url, result);
+      this.loadingPromises.delete(url);
+      return result;
+    }).catch((error) => {
+      this.loadingPromises.delete(url);
+      throw new Error(`Failed to load model ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(url, loadPromise);
+    return loadPromise;
+  }
+  /**
+   * Load an OBJ model (fallback for non-GLB assets)
+   * @param url - URL to the .obj file
+   * @returns Promise with loaded object group
+   */
+  async loadOBJ(url) {
+    if (this.modelCache.has(url)) {
+      return this.modelCache.get(url).scene;
+    }
+    if (this.loadingPromises.has(url)) {
+      const result = await this.loadingPromises.get(url);
+      return result.scene;
+    }
+    const loadPromise = this.objLoader.loadAsync(url).then((group) => {
+      const result = {
+        scene: group,
+        animations: []
+      };
+      this.modelCache.set(url, result);
+      this.loadingPromises.delete(url);
+      return result;
+    }).catch((error) => {
+      this.loadingPromises.delete(url);
+      throw new Error(`Failed to load OBJ ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(url, loadPromise);
+    return (await loadPromise).scene;
+  }
+  /**
+   * Load a texture
+   * @param url - URL to the texture image
+   * @returns Promise with loaded texture
+   */
+  async loadTexture(url) {
+    if (this.textureCache.has(url)) {
+      return this.textureCache.get(url);
+    }
+    if (this.loadingPromises.has(`texture:${url}`)) {
+      return this.loadingPromises.get(`texture:${url}`);
+    }
+    const loadPromise = this.textureLoader.loadAsync(url).then((texture) => {
+      texture.colorSpace = THREE.SRGBColorSpace;
+      this.textureCache.set(url, texture);
+      this.loadingPromises.delete(`texture:${url}`);
+      return texture;
+    }).catch((error) => {
+      this.loadingPromises.delete(`texture:${url}`);
+      throw new Error(`Failed to load texture ${url}: ${error.message}`);
+    });
+    this.loadingPromises.set(`texture:${url}`, loadPromise);
+    return loadPromise;
+  }
+  /**
+   * Preload multiple assets
+   * @param urls - Array of asset URLs to preload
+   * @returns Promise that resolves when all assets are loaded
+   */
+  async preload(urls) {
+    const promises = urls.map((url) => {
+      if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+        return this.loadModel(url).catch(() => null);
+      } else if (url.endsWith(".obj")) {
+        return this.loadOBJ(url).catch(() => null);
+      } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+        return this.loadTexture(url).catch(() => null);
+      }
+      return Promise.resolve(null);
+    });
+    await Promise.all(promises);
+  }
+  /**
+   * Check if a model is cached
+   * @param url - Model URL
+   */
+  hasModel(url) {
+    return this.modelCache.has(url);
+  }
+  /**
+   * Check if a texture is cached
+   * @param url - Texture URL
+   */
+  hasTexture(url) {
+    return this.textureCache.has(url);
+  }
+  /**
+   * Get cached model (throws if not cached)
+   * @param url - Model URL
+   */
+  getModel(url) {
+    const model = this.modelCache.get(url);
+    if (!model) {
+      throw new Error(`Model ${url} not in cache`);
+    }
+    return model;
+  }
+  /**
+   * Get cached texture (throws if not cached)
+   * @param url - Texture URL
+   */
+  getTexture(url) {
+    const texture = this.textureCache.get(url);
+    if (!texture) {
+      throw new Error(`Texture ${url} not in cache`);
+    }
+    return texture;
+  }
+  /**
+   * Clear all caches
+   */
+  clearCache() {
+    this.textureCache.forEach((texture) => {
+      texture.dispose();
+    });
+    this.modelCache.forEach((model) => {
+      model.scene.traverse((child) => {
+        if (child instanceof THREE.Mesh) {
+          child.geometry.dispose();
+          if (Array.isArray(child.material)) {
+            child.material.forEach((m) => m.dispose());
+          } else {
+            child.material.dispose();
+          }
+        }
+      });
+    });
+    this.modelCache.clear();
+    this.textureCache.clear();
+    this.loadingPromises.clear();
+  }
+  /**
+   * Get cache statistics
+   */
+  getStats() {
+    return {
+      models: this.modelCache.size,
+      textures: this.textureCache.size,
+      loading: this.loadingPromises.size
+    };
+  }
+};
+new AssetLoader();
+function useAssetLoader(options = {}) {
+  const { preloadUrls = [], loader: customLoader } = options;
+  const loaderRef = useRef(customLoader || new AssetLoader());
+  const [state, setState] = useState({
+    isLoading: false,
+    progress: 0,
+    loaded: 0,
+    total: 0,
+    errors: []
+  });
+  useEffect(() => {
+    if (preloadUrls.length > 0) {
+      preload(preloadUrls);
+    }
+  }, []);
+  const updateProgress = useCallback((loaded, total) => {
+    setState((prev) => ({
+      ...prev,
+      loaded,
+      total,
+      progress: total > 0 ? Math.round(loaded / total * 100) : 0
+    }));
+  }, []);
+  const loadModel = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadModel(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadOBJ = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const model = await loaderRef.current.loadOBJ(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return model;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const loadTexture = useCallback(
+    async (url) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const texture = await loaderRef.current.loadTexture(url);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          loaded: prev.loaded + 1
+        }));
+        return texture;
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        setState((prev) => ({
+          ...prev,
+          isLoading: false,
+          errors: [...prev.errors, errorMsg]
+        }));
+        throw error;
+      }
+    },
+    []
+  );
+  const preload = useCallback(
+    async (urls) => {
+      setState((prev) => ({
+        ...prev,
+        isLoading: true,
+        total: urls.length,
+        loaded: 0,
+        errors: []
+      }));
+      let completed = 0;
+      const errors = [];
+      await Promise.all(
+        urls.map(async (url) => {
+          try {
+            if (url.endsWith(".glb") || url.endsWith(".gltf")) {
+              await loaderRef.current.loadModel(url);
+            } else if (url.endsWith(".obj")) {
+              await loaderRef.current.loadOBJ(url);
+            } else if (/\.(png|jpg|jpeg|webp)$/i.test(url)) {
+              await loaderRef.current.loadTexture(url);
+            }
+            completed++;
+            updateProgress(completed, urls.length);
+          } catch (error) {
+            const errorMsg = error instanceof Error ? error.message : String(error);
+            errors.push(`${url}: ${errorMsg}`);
+            completed++;
+            updateProgress(completed, urls.length);
+          }
+        })
+      );
+      setState((prev) => ({
+        ...prev,
+        isLoading: false,
+        errors
+      }));
+    },
+    [updateProgress]
+  );
+  const hasModel = useCallback((url) => {
+    return loaderRef.current.hasModel(url);
+  }, []);
+  const hasTexture = useCallback((url) => {
+    return loaderRef.current.hasTexture(url);
+  }, []);
+  const getModel = useCallback((url) => {
+    try {
+      return loaderRef.current.getModel(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const getTexture = useCallback((url) => {
+    try {
+      return loaderRef.current.getTexture(url);
+    } catch {
+      return void 0;
+    }
+  }, []);
+  const clearCache = useCallback(() => {
+    loaderRef.current.clearCache();
+    setState({
+      isLoading: false,
+      progress: 0,
+      loaded: 0,
+      total: 0,
+      errors: []
+    });
+  }, []);
+  return {
+    ...state,
+    loadModel,
+    loadOBJ,
+    loadTexture,
+    preload,
+    hasModel,
+    hasTexture,
+    getModel,
+    getTexture,
+    clearCache
+  };
+}
+function useGameCanvas3DEvents(options) {
+  const {
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    onTileClick,
+    onUnitClick,
+    onFeatureClick,
+    onCanvasClick,
+    onTileHover,
+    onUnitAnimation
+  } = options;
+  const emit = useEmitEvent();
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  const handleTileClick = useCallback(
+    (tile, event) => {
+      if (tileClickEvent) {
+        emit(tileClickEvent, {
+          tileId: tile.id,
+          x: tile.x,
+          z: tile.z ?? tile.y ?? 0,
+          type: tile.type,
+          terrain: tile.terrain,
+          elevation: tile.elevation
+        });
+      }
+      optionsRef.current.onTileClick?.(tile, event);
+    },
+    [tileClickEvent, emit]
+  );
+  const handleUnitClick = useCallback(
+    (unit, event) => {
+      if (unitClickEvent) {
+        emit(unitClickEvent, {
+          unitId: unit.id,
+          x: unit.x,
+          z: unit.z ?? unit.y ?? 0,
+          unitType: unit.unitType,
+          name: unit.name,
+          team: unit.team,
+          faction: unit.faction,
+          health: unit.health,
+          maxHealth: unit.maxHealth
+        });
+      }
+      optionsRef.current.onUnitClick?.(unit, event);
+    },
+    [unitClickEvent, emit]
+  );
+  const handleFeatureClick = useCallback(
+    (feature, event) => {
+      if (featureClickEvent) {
+        emit(featureClickEvent, {
+          featureId: feature.id,
+          x: feature.x,
+          z: feature.z ?? feature.y ?? 0,
+          type: feature.type,
+          elevation: feature.elevation
+        });
+      }
+      optionsRef.current.onFeatureClick?.(feature, event);
+    },
+    [featureClickEvent, emit]
+  );
+  const handleCanvasClick = useCallback(
+    (event) => {
+      if (canvasClickEvent) {
+        emit(canvasClickEvent, {
+          clientX: event.clientX,
+          clientY: event.clientY,
+          button: event.button
+        });
+      }
+      optionsRef.current.onCanvasClick?.(event);
+    },
+    [canvasClickEvent, emit]
+  );
+  const handleTileHover = useCallback(
+    (tile, event) => {
+      if (tile) {
+        if (tileHoverEvent) {
+          emit(tileHoverEvent, {
+            tileId: tile.id,
+            x: tile.x,
+            z: tile.z ?? tile.y ?? 0,
+            type: tile.type
+          });
+        }
+      } else {
+        if (tileLeaveEvent) {
+          emit(tileLeaveEvent, {});
+        }
+      }
+      optionsRef.current.onTileHover?.(tile, event);
+    },
+    [tileHoverEvent, tileLeaveEvent, emit]
+  );
+  const handleUnitAnimation = useCallback(
+    (unitId, state) => {
+      if (unitAnimationEvent) {
+        emit(unitAnimationEvent, {
+          unitId,
+          state,
+          timestamp: Date.now()
+        });
+      }
+      optionsRef.current.onUnitAnimation?.(unitId, state);
+    },
+    [unitAnimationEvent, emit]
+  );
+  const handleCameraChange = useCallback(
+    (position) => {
+      if (cameraChangeEvent) {
+        emit(cameraChangeEvent, {
+          position,
+          timestamp: Date.now()
+        });
+      }
+    },
+    [cameraChangeEvent, emit]
+  );
+  return {
+    handleTileClick,
+    handleUnitClick,
+    handleFeatureClick,
+    handleCanvasClick,
+    handleTileHover,
+    handleUnitAnimation,
+    handleCameraChange
+  };
+}
+function detectAssetRoot3(modelUrl) {
+  const idx = modelUrl.indexOf("/3d/");
+  if (idx !== -1) {
+    return modelUrl.substring(0, idx + 4);
+  }
+  return modelUrl.substring(0, modelUrl.lastIndexOf("/") + 1);
+}
+function useGLTFModel2(url, resourceBasePath) {
+  const [state, setState] = useState({
+    model: null,
+    isLoading: false,
+    error: null
+  });
+  useEffect(() => {
+    if (!url) {
+      setState({ model: null, isLoading: false, error: null });
+      return;
+    }
+    console.log("[ModelLoader] Loading:", url);
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    const assetRoot = resourceBasePath || detectAssetRoot3(url);
+    const loader = new GLTFLoader$1();
+    loader.setResourcePath(assetRoot);
+    loader.load(
+      url,
+      (gltf) => {
+        console.log("[ModelLoader] Loaded:", url);
+        setState({
+          model: gltf.scene,
+          isLoading: false,
+          error: null
+        });
+      },
+      void 0,
+      (err) => {
+        const errorMsg = err instanceof Error ? err.message : String(err);
+        console.warn("[ModelLoader] Failed:", url, errorMsg);
+        setState({
+          model: null,
+          isLoading: false,
+          error: err instanceof Error ? err : new Error(String(err))
+        });
+      }
+    );
+  }, [url, resourceBasePath]);
+  return state;
+}
+function ModelLoader({
+  url,
+  position = [0, 0, 0],
+  scale = 1,
+  rotation = [0, 0, 0],
+  isSelected = false,
+  isHovered = false,
+  onClick,
+  onHover,
+  fallbackGeometry = "box",
+  castShadow = true,
+  receiveShadow = true,
+  resourceBasePath
+}) {
+  const { model: loadedModel, isLoading, error } = useGLTFModel2(url, resourceBasePath);
+  const model = useMemo(() => {
+    if (!loadedModel) return null;
+    const cloned = loadedModel.clone();
+    cloned.traverse((child) => {
+      if (child instanceof THREE.Mesh) {
+        child.castShadow = castShadow;
+        child.receiveShadow = receiveShadow;
+      }
+    });
+    return cloned;
+  }, [loadedModel, castShadow, receiveShadow]);
+  const scaleArray = useMemo(() => {
+    if (typeof scale === "number") {
+      return [scale, scale, scale];
+    }
+    return scale;
+  }, [scale]);
+  const rotationRad = useMemo(() => {
+    return [
+      rotation[0] * Math.PI / 180,
+      rotation[1] * Math.PI / 180,
+      rotation[2] * Math.PI / 180
+    ];
+  }, [rotation]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("group", { position, children: /* @__PURE__ */ jsxs("mesh", { rotation: [Math.PI / 2, 0, 0], children: [
+      /* @__PURE__ */ jsx("ringGeometry", { args: [0.3, 0.35, 16] }),
+      /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#4a90d9", transparent: true, opacity: 0.8 })
+    ] }) });
+  }
+  if (error || !model) {
+    if (fallbackGeometry === "none") {
+      return /* @__PURE__ */ jsx("group", { position });
+    }
+    const fallbackProps = {
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false)
+    };
+    return /* @__PURE__ */ jsxs("group", { position, children: [
+      (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+        /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+        /* @__PURE__ */ jsx(
+          "meshBasicMaterial",
+          {
+            color: isSelected ? 16755200 : 16777215,
+            transparent: true,
+            opacity: 0.5
+          }
+        )
+      ] }),
+      fallbackGeometry === "box" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("boxGeometry", { args: [0.8, 0.8, 0.8] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "sphere" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("sphereGeometry", { args: [0.4, 16, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] }),
+      fallbackGeometry === "cylinder" && /* @__PURE__ */ jsxs("mesh", { ...fallbackProps, position: [0, 0.5, 0], children: [
+        /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.8, 16] }),
+        /* @__PURE__ */ jsx("meshStandardMaterial", { color: error ? 16729156 : 8947848 })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "group",
+    {
+      position,
+      rotation: rotationRad,
+      onClick,
+      onPointerOver: () => onHover?.(true),
+      onPointerOut: () => onHover?.(false),
+      children: [
+        (isSelected || isHovered) && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.02, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+          /* @__PURE__ */ jsx("ringGeometry", { args: [0.6, 0.7, 32] }),
+          /* @__PURE__ */ jsx(
+            "meshBasicMaterial",
+            {
+              color: isSelected ? 16755200 : 16777215,
+              transparent: true,
+              opacity: 0.5
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("primitive", { object: model, scale: scaleArray })
+      ]
+    }
+  );
+}
+var DEFAULT_GRID_CONFIG = {
+  cellSize: 1,
+  offsetX: 0,
+  offsetZ: 0
+};
+function CameraController({
+  onCameraChange
+}) {
+  const { camera } = useThree();
+  useEffect(() => {
+    if (onCameraChange) {
+      onCameraChange({
+        x: camera.position.x,
+        y: camera.position.y,
+        z: camera.position.z
+      });
+    }
+  }, [camera.position, onCameraChange]);
+  return null;
+}
+var GameCanvas3D = forwardRef(
+  ({
+    tiles = [],
+    units = [],
+    features = [],
+    events: events2 = [],
+    orientation = "standard",
+    cameraMode = "isometric",
+    showGrid = true,
+    showCoordinates = false,
+    showTileInfo = false,
+    overlay = "default",
+    shadows = true,
+    backgroundColor = "#1a1a2e",
+    onTileClick,
+    onUnitClick,
+    onFeatureClick,
+    onCanvasClick,
+    onTileHover,
+    onUnitAnimation,
+    assetLoader: customAssetLoader,
+    tileRenderer: CustomTileRenderer,
+    unitRenderer: CustomUnitRenderer,
+    featureRenderer: CustomFeatureRenderer,
+    className,
+    isLoading: externalLoading,
+    error: externalError,
+    entity,
+    preloadAssets = [],
+    tileClickEvent,
+    unitClickEvent,
+    featureClickEvent,
+    canvasClickEvent,
+    tileHoverEvent,
+    tileLeaveEvent,
+    unitAnimationEvent,
+    cameraChangeEvent,
+    loadingMessage = "Loading 3D Scene...",
+    useInstancing = true,
+    validMoves = [],
+    attackTargets = [],
+    selectedTileIds = [],
+    selectedUnitId = null,
+    children
+  }, ref) => {
+    const containerRef = useRef(null);
+    const controlsRef = useRef(null);
+    const [hoveredTile, setHoveredTile] = useState(null);
+    const [internalError, setInternalError] = useState(null);
+    const { isLoading: assetsLoading, progress, loaded, total } = useAssetLoader({
+      preloadUrls: preloadAssets,
+      loader: customAssetLoader
+    });
+    const eventHandlers = useGameCanvas3DEvents({
+      tileClickEvent,
+      unitClickEvent,
+      featureClickEvent,
+      canvasClickEvent,
+      tileHoverEvent,
+      tileLeaveEvent,
+      unitAnimationEvent,
+      cameraChangeEvent,
+      onTileClick,
+      onUnitClick,
+      onFeatureClick,
+      onCanvasClick,
+      onTileHover,
+      onUnitAnimation
+    });
+    const gridBounds = useMemo(() => {
+      if (tiles.length === 0) {
+        return { minX: 0, maxX: 10, minZ: 0, maxZ: 10 };
+      }
+      const xs = tiles.map((t) => t.x);
+      const zs = tiles.map((t) => t.z || t.y || 0);
+      return {
+        minX: Math.min(...xs),
+        maxX: Math.max(...xs),
+        minZ: Math.min(...zs),
+        maxZ: Math.max(...zs)
+      };
+    }, [tiles]);
+    const cameraTarget = useMemo(() => {
+      return [
+        (gridBounds.minX + gridBounds.maxX) / 2,
+        0,
+        (gridBounds.minZ + gridBounds.maxZ) / 2
+      ];
+    }, [gridBounds]);
+    const gridConfig = useMemo(
+      () => ({
+        ...DEFAULT_GRID_CONFIG,
+        offsetX: -(gridBounds.maxX - gridBounds.minX) / 2,
+        offsetZ: -(gridBounds.maxZ - gridBounds.minZ) / 2
+      }),
+      [gridBounds]
+    );
+    const gridToWorld = useCallback(
+      (x, z, y = 0) => {
+        const worldX = (x - gridBounds.minX) * gridConfig.cellSize;
+        const worldZ = (z - gridBounds.minZ) * gridConfig.cellSize;
+        return [worldX, y * gridConfig.cellSize, worldZ];
+      },
+      [gridBounds, gridConfig]
+    );
+    useImperativeHandle(ref, () => ({
+      getCameraPosition: () => {
+        if (controlsRef.current) {
+          const pos = controlsRef.current.object.position;
+          return new THREE.Vector3(pos.x, pos.y, pos.z);
+        }
+        return null;
+      },
+      setCameraPosition: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.object.position.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      lookAt: (x, y, z) => {
+        if (controlsRef.current) {
+          controlsRef.current.target.set(x, y, z);
+          controlsRef.current.update();
+        }
+      },
+      resetCamera: () => {
+        if (controlsRef.current) {
+          controlsRef.current.reset();
+        }
+      },
+      screenshot: () => {
+        const canvas = containerRef.current?.querySelector("canvas");
+        if (canvas) {
+          return canvas.toDataURL("image/png");
+        }
+        return null;
+      },
+      export: () => ({
+        tiles,
+        units,
+        features
+      })
+    }));
+    const handleTileClick = useCallback(
+      (tile, event) => {
+        eventHandlers.handleTileClick(tile, event);
+      },
+      [eventHandlers]
+    );
+    const handleUnitClick = useCallback(
+      (unit, event) => {
+        eventHandlers.handleUnitClick(unit, event);
+      },
+      [eventHandlers]
+    );
+    const handleFeatureClick = useCallback(
+      (feature, event) => {
+        if (event) {
+          eventHandlers.handleFeatureClick(feature, event);
+        }
+      },
+      [eventHandlers]
+    );
+    const handleTileHover = useCallback(
+      (tile, event) => {
+        setHoveredTile(tile);
+        if (event) {
+          eventHandlers.handleTileHover(tile, event);
+        }
+      },
+      [eventHandlers]
+    );
+    const cameraConfig = useMemo(() => {
+      const size = Math.max(
+        gridBounds.maxX - gridBounds.minX,
+        gridBounds.maxZ - gridBounds.minZ
+      );
+      const distance = size * 1.5;
+      switch (cameraMode) {
+        case "isometric":
+          return {
+            position: [distance, distance * 0.8, distance],
+            fov: 45
+          };
+        case "top-down":
+          return {
+            position: [0, distance * 2, 0],
+            fov: 45
+          };
+        case "perspective":
+        default:
+          return {
+            position: [distance, distance, distance],
+            fov: 45
+          };
+      }
+    }, [cameraMode, gridBounds]);
+    const DefaultTileRenderer = useCallback(
+      ({ tile, position }) => {
+        const isSelected = tile.id ? selectedTileIds.includes(tile.id) : false;
+        const isHovered = hoveredTile?.id === tile.id;
+        const isValidMove = validMoves.some(
+          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+        );
+        const isAttackTarget = attackTargets.some(
+          (m) => m.x === tile.x && m.z === (tile.z ?? tile.y ?? 0)
+        );
+        let color = 8421504;
+        if (tile.type === "water") color = 4491468;
+        else if (tile.type === "grass") color = 4500036;
+        else if (tile.type === "sand") color = 14535816;
+        else if (tile.type === "rock") color = 8947848;
+        else if (tile.type === "snow") color = 15658734;
+        let emissive = 0;
+        if (isSelected) emissive = 4473924;
+        else if (isAttackTarget) emissive = 4456448;
+        else if (isValidMove) emissive = 17408;
+        else if (isHovered) emissive = 2236962;
+        return /* @__PURE__ */ jsxs(
+          "mesh",
+          {
+            position,
+            onClick: (e) => handleTileClick(tile, e),
+            onPointerEnter: (e) => handleTileHover(tile, e),
+            onPointerLeave: (e) => handleTileHover(null, e),
+            userData: { type: "tile", tileId: tile.id, gridX: tile.x, gridZ: tile.z ?? tile.y },
+            children: [
+              /* @__PURE__ */ jsx("boxGeometry", { args: [0.95, 0.2, 0.95] }),
+              /* @__PURE__ */ jsx("meshStandardMaterial", { color, emissive })
+            ]
+          }
+        );
+      },
+      [selectedTileIds, hoveredTile, validMoves, attackTargets, handleTileClick, handleTileHover]
+    );
+    const DefaultUnitRenderer = useCallback(
+      ({ unit, position }) => {
+        const isSelected = selectedUnitId === unit.id;
+        const color = unit.faction === "player" ? 4491519 : unit.faction === "enemy" ? 16729156 : 16777028;
+        return /* @__PURE__ */ jsxs(
+          "group",
+          {
+            position,
+            onClick: (e) => handleUnitClick(unit, e),
+            userData: { type: "unit", unitId: unit.id },
+            children: [
+              isSelected && /* @__PURE__ */ jsxs("mesh", { position: [0, 0.05, 0], rotation: [-Math.PI / 2, 0, 0], children: [
+                /* @__PURE__ */ jsx("ringGeometry", { args: [0.4, 0.5, 32] }),
+                /* @__PURE__ */ jsx("meshBasicMaterial", { color: "#ffff00", transparent: true, opacity: 0.8 })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.3, 0], children: [
+                /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.3, 0.3, 0.1, 8] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.6, 0], children: [
+                /* @__PURE__ */ jsx("capsuleGeometry", { args: [0.2, 0.4, 4, 8] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+              ] }),
+              /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+                /* @__PURE__ */ jsx("sphereGeometry", { args: [0.12, 8, 8] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color })
+              ] }),
+              unit.health !== void 0 && unit.maxHealth !== void 0 && /* @__PURE__ */ jsxs("group", { position: [0, 1.2, 0], children: [
+                /* @__PURE__ */ jsxs("mesh", { position: [-0.25, 0, 0], children: [
+                  /* @__PURE__ */ jsx("planeGeometry", { args: [0.5, 0.05] }),
+                  /* @__PURE__ */ jsx("meshBasicMaterial", { color: 3355443 })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "mesh",
+                  {
+                    position: [
+                      -0.25 + 0.5 * (unit.health / unit.maxHealth) / 2,
+                      0,
+                      0.01
+                    ],
+                    children: [
+                      /* @__PURE__ */ jsx("planeGeometry", { args: [0.5 * (unit.health / unit.maxHealth), 0.05] }),
+                      /* @__PURE__ */ jsx(
+                        "meshBasicMaterial",
+                        {
+                          color: unit.health / unit.maxHealth > 0.5 ? 4500036 : unit.health / unit.maxHealth > 0.25 ? 11184708 : 16729156
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        );
+      },
+      [selectedUnitId, handleUnitClick]
+    );
+    const DefaultFeatureRenderer = useCallback(
+      ({
+        feature,
+        position
+      }) => {
+        if (feature.assetUrl) {
+          return /* @__PURE__ */ jsx(
+            ModelLoader,
+            {
+              url: feature.assetUrl,
+              position,
+              scale: 0.5,
+              rotation: [0, feature.rotation ?? 0, 0],
+              onClick: () => handleFeatureClick(feature, null),
+              fallbackGeometry: "box"
+            },
+            feature.id
+          );
+        }
+        if (feature.type === "tree") {
+          return /* @__PURE__ */ jsxs(
+            "group",
+            {
+              position,
+              onClick: (e) => handleFeatureClick(feature, e),
+              userData: { type: "feature", featureId: feature.id },
+              children: [
+                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.4, 0], children: [
+                  /* @__PURE__ */ jsx("cylinderGeometry", { args: [0.1, 0.15, 0.8, 6] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color: 9127187 })
+                ] }),
+                /* @__PURE__ */ jsxs("mesh", { position: [0, 0.9, 0], children: [
+                  /* @__PURE__ */ jsx("coneGeometry", { args: [0.5, 0.8, 8] }),
+                  /* @__PURE__ */ jsx("meshStandardMaterial", { color: 2263842 })
+                ] })
+              ]
+            }
+          );
+        }
+        if (feature.type === "rock") {
+          return /* @__PURE__ */ jsxs(
+            "mesh",
+            {
+              position: [position[0], position[1] + 0.3, position[2]],
+              onClick: (e) => handleFeatureClick(feature, e),
+              userData: { type: "feature", featureId: feature.id },
+              children: [
+                /* @__PURE__ */ jsx("dodecahedronGeometry", { args: [0.3, 0] }),
+                /* @__PURE__ */ jsx("meshStandardMaterial", { color: 8421504 })
+              ]
+            }
+          );
+        }
+        return null;
+      },
+      [handleFeatureClick]
+    );
+    if (externalLoading || assetsLoading && preloadAssets.length > 0) {
+      return /* @__PURE__ */ jsx(
+        Canvas3DLoadingState,
+        {
+          progress,
+          loaded,
+          total,
+          message: loadingMessage,
+          className
+        }
+      );
+    }
+    const displayError = externalError || internalError;
+    if (displayError) {
+      return /* @__PURE__ */ jsx(Canvas3DErrorBoundary, { children: /* @__PURE__ */ jsx("div", { className: "game-canvas-3d game-canvas-3d--error", children: /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__error", children: [
+        "Error: ",
+        displayError
+      ] }) }) });
+    }
+    return /* @__PURE__ */ jsx(
+      Canvas3DErrorBoundary,
+      {
+        onError: (err) => setInternalError(err.message),
+        onReset: () => setInternalError(null),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: `game-canvas-3d ${className || ""}`,
+            "data-orientation": orientation,
+            "data-camera-mode": cameraMode,
+            "data-overlay": overlay,
+            children: [
+              /* @__PURE__ */ jsxs(
+                Canvas,
+                {
+                  shadows,
+                  camera: {
+                    position: cameraConfig.position,
+                    fov: cameraConfig.fov,
+                    near: 0.1,
+                    far: 1e3
+                  },
+                  style: { background: backgroundColor },
+                  onClick: (e) => {
+                    if (e.target === e.currentTarget) {
+                      eventHandlers.handleCanvasClick(e);
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(CameraController, { onCameraChange: eventHandlers.handleCameraChange }),
+                    /* @__PURE__ */ jsx("ambientLight", { intensity: 0.6 }),
+                    /* @__PURE__ */ jsx(
+                      "directionalLight",
+                      {
+                        position: [10, 20, 10],
+                        intensity: 0.8,
+                        castShadow: shadows,
+                        "shadow-mapSize": [2048, 2048]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("hemisphereLight", { intensity: 0.3, color: "#87ceeb", groundColor: "#362d1d" }),
+                    showGrid && /* @__PURE__ */ jsx(
+                      Grid,
+                      {
+                        args: [
+                          Math.max(gridBounds.maxX - gridBounds.minX + 2, 10),
+                          Math.max(gridBounds.maxZ - gridBounds.minZ + 2, 10)
+                        ],
+                        position: [
+                          (gridBounds.maxX - gridBounds.minX) / 2 - 0.5,
+                          0,
+                          (gridBounds.maxZ - gridBounds.minZ) / 2 - 0.5
+                        ],
+                        cellSize: 1,
+                        cellThickness: 1,
+                        cellColor: "#444444",
+                        sectionSize: 5,
+                        sectionThickness: 1.5,
+                        sectionColor: "#666666",
+                        fadeDistance: 50,
+                        fadeStrength: 1
+                      }
+                    ),
+                    tiles.map((tile, index) => {
+                      const position = gridToWorld(
+                        tile.x,
+                        tile.z ?? tile.y ?? 0,
+                        tile.elevation ?? 0
+                      );
+                      const Renderer = CustomTileRenderer || DefaultTileRenderer;
+                      return /* @__PURE__ */ jsx(Renderer, { tile, position }, tile.id ?? `tile-${index}`);
+                    }),
+                    features.map((feature, index) => {
+                      const position = gridToWorld(
+                        feature.x,
+                        feature.z ?? feature.y ?? 0,
+                        (feature.elevation ?? 0) + 0.5
+                      );
+                      const Renderer = CustomFeatureRenderer || DefaultFeatureRenderer;
+                      return /* @__PURE__ */ jsx(Renderer, { feature, position }, feature.id ?? `feature-${index}`);
+                    }),
+                    units.map((unit) => {
+                      const position = gridToWorld(
+                        unit.x ?? 0,
+                        unit.z ?? unit.y ?? 0,
+                        (unit.elevation ?? 0) + 0.5
+                      );
+                      const Renderer = CustomUnitRenderer || DefaultUnitRenderer;
+                      return /* @__PURE__ */ jsx(Renderer, { unit, position }, unit.id);
+                    }),
+                    children,
+                    /* @__PURE__ */ jsx(
+                      OrbitControls,
+                      {
+                        ref: controlsRef,
+                        target: cameraTarget,
+                        enableDamping: true,
+                        dampingFactor: 0.05,
+                        minDistance: 2,
+                        maxDistance: 100,
+                        maxPolarAngle: Math.PI / 2 - 0.1
+                      }
+                    )
+                  ]
+                }
+              ),
+              showCoordinates && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__coordinates", children: [
+                "X: ",
+                hoveredTile.x,
+                ", Z: ",
+                hoveredTile.z ?? hoveredTile.y ?? 0
+              ] }),
+              showTileInfo && hoveredTile && /* @__PURE__ */ jsxs("div", { className: "game-canvas-3d__tile-info", children: [
+                /* @__PURE__ */ jsx("div", { className: "tile-info__type", children: hoveredTile.type }),
+                hoveredTile.terrain && /* @__PURE__ */ jsx("div", { className: "tile-info__terrain", children: hoveredTile.terrain })
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+GameCanvas3D.displayName = "GameCanvas3D";
+
+// lib/traitRegistry.ts
+var traits = /* @__PURE__ */ new Map();
+var listeners2 = /* @__PURE__ */ new Set();
+function notifyListeners2() {
+  listeners2.forEach((listener) => listener());
+}
+function registerTrait(info) {
+  traits.set(info.id, info);
+  notifyListeners2();
+}
+function updateTraitState(id, newState) {
+  const trait = traits.get(id);
+  if (trait) {
+    trait.currentState = newState;
+    trait.transitionCount++;
+    notifyListeners2();
+  }
+}
+function unregisterTrait(id) {
+  traits.delete(id);
+  notifyListeners2();
+}
+createContext({ enabled: false });
+createContext(false);
+createContext(null);
 
 // runtime/createClientEffectHandlers.ts
 function createClientEffectHandlers(options) {
@@ -467,6 +4019,50 @@ function useTraitStateMachine(traitBindings, slotsActions, options) {
               fetchedDataContext.setData({ [linkedEntity]: updated });
             }
           }
+          if (fetchedDataContext) {
+            for (const effect of result.effects) {
+              if (!Array.isArray(effect) || effect[0] !== "persist") continue;
+              const action = effect[1];
+              const entityType = effect[2] || linkedEntity;
+              if (!entityType) continue;
+              const records = fetchedDataContext.getData(entityType);
+              if (action === "create") {
+                const evalCtx = createContextFromBindings(bindingCtx);
+                const rawData = effect[3];
+                const newRecord = { id: `${entityType}-${Date.now()}` };
+                if (rawData) {
+                  for (const [k, v] of Object.entries(rawData)) {
+                    newRecord[k] = interpolateValue(v, evalCtx);
+                  }
+                }
+                for (const [k, v] of entityMutations) {
+                  newRecord[k] = v;
+                }
+                fetchedDataContext.setData({ [entityType]: [...records, newRecord] });
+              } else if (action === "delete") {
+                const deleteId = effect[3];
+                if (deleteId) {
+                  const filtered = records.filter((r) => r.id !== deleteId);
+                  fetchedDataContext.setData({ [entityType]: filtered });
+                }
+              } else if (action === "update") {
+                const updateId = effect[3];
+                const updateData = effect[4];
+                if (updateId && updateData) {
+                  const evalCtx = createContextFromBindings(bindingCtx);
+                  const updated = records.map((r) => {
+                    if (r.id !== updateId) return r;
+                    const patched = { ...r };
+                    for (const [k, v] of Object.entries(updateData)) {
+                      patched[k] = interpolateValue(v, evalCtx);
+                    }
+                    return patched;
+                  });
+                  fetchedDataContext.setData({ [entityType]: updated });
+                }
+              }
+            }
+          }
         } catch (error) {
           console.error(
             "[TraitStateMachine] Effect execution error:",
@@ -630,7 +4226,7 @@ function useResolvedSchema(schema, pageName) {
     }
     const page = getPage(ir, pageName);
     console.log("[useResolvedSchema] Resolved page:", page?.name, "| path:", page?.path, "| traits:", page?.traits.length);
-    const traits = page?.traits || [];
+    const traits2 = page?.traits || [];
     const entities = /* @__PURE__ */ new Map();
     if (page) {
       for (const binding of page.entityBindings) {
@@ -639,7 +4235,7 @@ function useResolvedSchema(schema, pageName) {
     }
     return {
       page,
-      traits,
+      traits: traits2,
       entities,
       allEntities: ir.entities,
       allTraits: ir.traits,