@almadar/ui 2.25.4 → 2.27.0

package/dist/providers/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React110 = require('react');
+var React112 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var providers = require('@almadar/ui/providers');
 require('react-dom');
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React110__namespace = /*#__PURE__*/_interopNamespace(React110);
+var React112__namespace = /*#__PURE__*/_interopNamespace(React112);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 var L__default = /*#__PURE__*/_interopDefault(L);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
@@ -153,7 +153,7 @@ var BUILT_IN_THEMES = [
     hasDarkMode: true
   }
 ];
-var ThemeContext = React110.createContext(void 0);
+var ThemeContext = React112.createContext(void 0);
 var THEME_STORAGE_KEY = "theme";
 var MODE_STORAGE_KEY = "theme-mode";
 function getSystemMode() {
@@ -173,14 +173,14 @@ var ThemeProvider = ({
   defaultMode = "system",
   targetRef
 }) => {
-  const availableThemes = React110.useMemo(() => {
+  const availableThemes = React112.useMemo(() => {
     const themeMap = /* @__PURE__ */ new Map();
     BUILT_IN_THEMES.forEach((t) => themeMap.set(t.name, t));
     themes.forEach((t) => themeMap.set(t.name, t));
     return Array.from(themeMap.values());
   }, [themes]);
   const isScoped = !!targetRef;
-  const [theme, setThemeState] = React110.useState(() => {
+  const [theme, setThemeState] = React112.useState(() => {
     if (isScoped || typeof window === "undefined") return defaultTheme;
     const stored = localStorage.getItem(THEME_STORAGE_KEY);
     const validThemes = [
@@ -192,7 +192,7 @@ var ThemeProvider = ({
     }
     return defaultTheme;
   });
-  const [mode, setModeState] = React110.useState(() => {
+  const [mode, setModeState] = React112.useState(() => {
     if (isScoped || typeof window === "undefined") return defaultMode;
     const stored = localStorage.getItem(MODE_STORAGE_KEY);
     if (stored === "light" || stored === "dark" || stored === "system") {
@@ -200,14 +200,14 @@ var ThemeProvider = ({
     }
     return defaultMode;
   });
-  const [resolvedMode, setResolvedMode] = React110.useState(
+  const [resolvedMode, setResolvedMode] = React112.useState(
     () => resolveMode(mode)
   );
-  const appliedTheme = React110.useMemo(
+  const appliedTheme = React112.useMemo(
     () => `${theme}-${resolvedMode}`,
     [theme, resolvedMode]
   );
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     const updateResolved = () => {
       setResolvedMode(resolveMode(mode));
     };
@@ -220,7 +220,7 @@ var ThemeProvider = ({
     }
     return void 0;
   }, [mode]);
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     if (isScoped) {
       if (targetRef?.current) {
         targetRef.current.setAttribute("data-theme", appliedTheme);
@@ -234,7 +234,7 @@ var ThemeProvider = ({
     root.classList.remove("light", "dark");
     root.classList.add(resolvedMode);
   }, [appliedTheme, resolvedMode, targetRef, isScoped]);
-  const setTheme = React110.useCallback(
+  const setTheme = React112.useCallback(
     (newTheme) => {
       const validTheme = availableThemes.find((t) => t.name === newTheme);
       if (validTheme) {
@@ -250,17 +250,17 @@ var ThemeProvider = ({
     },
     [availableThemes]
   );
-  const setMode = React110.useCallback((newMode) => {
+  const setMode = React112.useCallback((newMode) => {
     setModeState(newMode);
     if (!isScoped && typeof window !== "undefined") {
       localStorage.setItem(MODE_STORAGE_KEY, newMode);
     }
   }, []);
-  const toggleMode = React110.useCallback(() => {
+  const toggleMode = React112.useCallback(() => {
     const newMode = resolvedMode === "dark" ? "light" : "dark";
     setMode(newMode);
   }, [resolvedMode, setMode]);
-  const contextValue = React110.useMemo(
+  const contextValue = React112.useMemo(
     () => ({
       theme,
       mode,
@@ -356,15 +356,15 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React110.useContext(providers.EventBusContext);
+  const context = React112.useContext(providers.EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
-var EventBusContext2 = React110.createContext(null);
+var EventBusContext2 = React112.createContext(null);
 function EventBusProvider({ children, debug: debug2 = false }) {
-  const listenersRef = React110.useRef(/* @__PURE__ */ new Map());
-  const anyListenersRef = React110.useRef(/* @__PURE__ */ new Set());
-  const deprecationWarningShown = React110.useRef(false);
-  const getSelectedEntity = React110.useCallback(() => {
+  const listenersRef = React112.useRef(/* @__PURE__ */ new Map());
+  const anyListenersRef = React112.useRef(/* @__PURE__ */ new Set());
+  const deprecationWarningShown = React112.useRef(false);
+  const getSelectedEntity = React112.useCallback(() => {
     if (!deprecationWarningShown.current) {
       console.warn(
         "[EventBus] getSelectedEntity is deprecated. Use SelectionProvider and useSelection hook instead. See SelectionProvider.tsx for migration guide."
@@ -373,7 +373,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
     }
     return null;
   }, []);
-  const clearSelectedEntity = React110.useCallback(() => {
+  const clearSelectedEntity = React112.useCallback(() => {
     if (!deprecationWarningShown.current) {
       console.warn(
         "[EventBus] clearSelectedEntity is deprecated. Use SelectionProvider and useSelection hook instead. See SelectionProvider.tsx for migration guide."
@@ -381,14 +381,14 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       deprecationWarningShown.current = true;
     }
   }, []);
-  const emit = React110.useCallback((type, payload) => {
+  const emit = React112.useCallback((type, payload) => {
     const event = {
       type,
       payload,
       timestamp: Date.now()
     };
-    const listeners7 = listenersRef.current.get(type);
-    const listenerCount = listeners7?.size ?? 0;
+    const listeners6 = listenersRef.current.get(type);
+    const listenerCount = listeners6?.size ?? 0;
     if (debug2) {
       if (listenerCount > 0) {
         console.log(`[EventBus] Emit: ${type} \u2192 ${listenerCount} listener(s)`, payload);
@@ -396,8 +396,8 @@ function EventBusProvider({ children, debug: debug2 = false }) {
         console.warn(`[EventBus] Emit: ${type} (NO LISTENERS - event may be lost!)`, payload);
       }
     }
-    if (listeners7) {
-      const listenersCopy = Array.from(listeners7);
+    if (listeners6) {
+      const listenersCopy = Array.from(listeners6);
       for (const listener of listenersCopy) {
         try {
           listener(event);
@@ -415,37 +415,37 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       }
     }
   }, [debug2]);
-  const on = React110.useCallback((type, listener) => {
+  const on = React112.useCallback((type, listener) => {
     if (!listenersRef.current.has(type)) {
       listenersRef.current.set(type, /* @__PURE__ */ new Set());
     }
-    const listeners7 = listenersRef.current.get(type);
-    listeners7.add(listener);
+    const listeners6 = listenersRef.current.get(type);
+    listeners6.add(listener);
     if (debug2) {
-      console.log(`[EventBus] Subscribed to '${type}', total: ${listeners7.size}`);
+      console.log(`[EventBus] Subscribed to '${type}', total: ${listeners6.size}`);
     }
     return () => {
-      listeners7.delete(listener);
+      listeners6.delete(listener);
       if (debug2) {
-        console.log(`[EventBus] Unsubscribed from '${type}', remaining: ${listeners7.size}`);
+        console.log(`[EventBus] Unsubscribed from '${type}', remaining: ${listeners6.size}`);
       }
-      if (listeners7.size === 0) {
+      if (listeners6.size === 0) {
         listenersRef.current.delete(type);
       }
     };
   }, [debug2]);
-  const once = React110.useCallback((type, listener) => {
+  const once = React112.useCallback((type, listener) => {
     const wrappedListener = (event) => {
       listenersRef.current.get(type)?.delete(wrappedListener);
       listener(event);
     };
     return on(type, wrappedListener);
   }, [on]);
-  const hasListeners = React110.useCallback((type) => {
-    const listeners7 = listenersRef.current.get(type);
-    return listeners7 !== void 0 && listeners7.size > 0;
+  const hasListeners = React112.useCallback((type) => {
+    const listeners6 = listenersRef.current.get(type);
+    return listeners6 !== void 0 && listeners6.size > 0;
   }, []);
-  const onAny = React110.useCallback((listener) => {
+  const onAny = React112.useCallback((listener) => {
     anyListenersRef.current.add(listener);
     if (debug2) {
       console.log(`[EventBus] onAny subscribed, total: ${anyListenersRef.current.size}`);
@@ -457,7 +457,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       }
     };
   }, [debug2]);
-  const contextValue = React110.useMemo(
+  const contextValue = React112.useMemo(
     () => ({
       emit,
       on,
@@ -469,7 +469,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
     }),
     [emit, on, once, hasListeners, onAny, getSelectedEntity, clearSelectedEntity]
   );
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     setGlobalEventBus(contextValue);
     return () => {
       setGlobalEventBus(null);
@@ -477,7 +477,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
   }, [contextValue]);
   return /* @__PURE__ */ jsxRuntime.jsx(EventBusContext2.Provider, { value: contextValue, children });
 }
-var SelectionContext = React110.createContext(null);
+var SelectionContext = React112.createContext(null);
 var defaultCompareEntities = (a, b) => {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -494,8 +494,8 @@ function SelectionProvider({
   compareEntities = defaultCompareEntities
 }) {
   const eventBus = useEventBus();
-  const [selected, setSelectedState] = React110.useState(null);
-  const setSelected = React110.useCallback(
+  const [selected, setSelectedState] = React112.useState(null);
+  const setSelected = React112.useCallback(
     (entity) => {
       setSelectedState(entity);
       if (debug2) {
@@ -504,19 +504,19 @@ function SelectionProvider({
     },
     [debug2]
   );
-  const clearSelection = React110.useCallback(() => {
+  const clearSelection = React112.useCallback(() => {
     setSelectedState(null);
     if (debug2) {
       console.log("[SelectionProvider] Selection cleared");
     }
   }, [debug2]);
-  const isSelected = React110.useCallback(
+  const isSelected = React112.useCallback(
     (entity) => {
       return compareEntities(selected, entity);
     },
     [selected, compareEntities]
   );
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     const handleSelect = (event) => {
       const row = event.payload?.row;
       if (row) {
@@ -554,14 +554,14 @@ function SelectionProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(SelectionContext.Provider, { value: contextValue, children });
 }
 function useSelection() {
-  const context = React110.useContext(SelectionContext);
+  const context = React112.useContext(SelectionContext);
   if (!context) {
     throw new Error("useSelection must be used within a SelectionProvider");
   }
   return context;
 }
 function useSelectionOptional() {
-  const context = React110.useContext(SelectionContext);
+  const context = React112.useContext(SelectionContext);
   return context;
 }
 function cn(...inputs) {
@@ -661,28 +661,28 @@ var marginYStyles = {
 };
 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"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[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)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -704,7 +704,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React110__namespace.default.forwardRef(
+var Box = React112__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -733,20 +733,20 @@ var Box = React110__namespace.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React110.useCallback((e) => {
+    const handleClick = React112.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React110.useCallback((e) => {
+    const handleMouseEnter = React112.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React110.useCallback((e) => {
+    const handleMouseLeave = React112.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -770,7 +770,7 @@ var Box = React110__namespace.default.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -799,30 +799,30 @@ var Box = React110__namespace.default.forwardRef(
 );
 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)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[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)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -907,49 +907,49 @@ var Typography = ({
 Typography.displayName = "Typography";
 var variantStyles2 = {
   primary: [
-    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+    "bg-primary text-primary-foreground",
     "border-none",
-    "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)]"
+    "shadow-sm",
+    "hover:bg-primary-hover hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white hover:border-[var(--color-accent)]",
+    "bg-transparent text-accent",
+    "border border-accent",
+    "hover:bg-accent hover:text-white hover:border-accent",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
-    "bg-transparent text-[var(--color-muted-foreground)]",
-    "hover:text-[var(--color-foreground)] hover:bg-[var(--color-muted)]",
+    "bg-transparent text-muted-foreground",
+    "hover:text-foreground hover:bg-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)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error",
+    "shadow-sm",
+    "hover:bg-error hover:text-error-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   success: [
-    "bg-[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)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success",
+    "shadow-sm",
+    "hover:bg-success hover:text-success-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   warning: [
-    "bg-[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)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning",
+    "shadow-sm",
+    "hover:bg-warning hover:text-warning-foreground hover:shadow-lg",
+    "active:scale-[var(--active-scale)] active:shadow-sm"
   ].join(" "),
   // "default" is an alias for secondary
   default: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-secondary text-secondary-foreground",
+    "border-[length:var(--border-width-thin)] border-border",
+    "hover:bg-secondary-hover",
     "active:scale-[var(--active-scale)]"
   ].join(" ")
 };
@@ -974,7 +974,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React110__namespace.default.isValidElement(value)) {
+  if (React112__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -983,7 +983,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React110__namespace.default.forwardRef(
+var Button = React112__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -1020,10 +1020,10 @@ var Button = React110__namespace.default.forwardRef(
         className: cn(
           "inline-flex items-center justify-center gap-2",
           "font-[var(--font-weight-medium)]",
-          "rounded-[var(--radius-sm)]",
+          "rounded-sm",
           "cursor-pointer",
           "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)]",
+          "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           variantStyles2[variant],
           sizeStyles2[size],
@@ -1044,34 +1044,34 @@ var Button = React110__namespace.default.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" "),
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
   success: [
-    "bg-[var(--color-surface)] text-[var(--color-success)]",
-    "border-[length:var(--border-width)] border-[var(--color-success)]"
+    "bg-surface text-success",
+    "border-[length:var(--border-width)] border-success"
   ].join(" "),
   warning: [
-    "bg-[var(--color-surface)] text-[var(--color-warning)]",
-    "border-[length:var(--border-width)] border-[var(--color-warning)]"
+    "bg-surface text-warning",
+    "border-[length:var(--border-width)] border-warning"
   ].join(" "),
   danger: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   error: [
-    "bg-[var(--color-surface)] text-[var(--color-error)]",
-    "border-[length:var(--border-width)] border-[var(--color-error)]"
+    "bg-surface text-error",
+    "border-[length:var(--border-width)] border-error"
   ].join(" "),
   info: [
-    "bg-[var(--color-surface)] text-[var(--color-info)]",
-    "border-[length:var(--border-width)] border-[var(--color-info)]"
+    "bg-surface text-info",
+    "border-[length:var(--border-width)] border-info"
   ].join(" "),
   neutral: [
-    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]"
+    "bg-muted text-muted-foreground",
+    "border-[length:var(--border-width-thin)] border-border"
   ].join(" ")
 };
 var sizeStyles3 = {
@@ -1079,7 +1079,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React110__namespace.default.forwardRef(
+var Badge = React112__namespace.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" ? (() => {
@@ -1091,7 +1091,7 @@ var Badge = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-sm",
           variantStyles3[variant],
           sizeStyles3[size],
           className
@@ -1106,7 +1106,7 @@ var Badge = React110__namespace.default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var Input = React110__namespace.default.forwardRef(
+var Input = React112__namespace.default.forwardRef(
   ({
     className,
     inputType,
@@ -1127,21 +1127,21 @@ var Input = React110__namespace.default.forwardRef(
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.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)]",
+      "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
+      "border-[length:var(--border-width-thin)] border-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)]" : "",
+      "bg-card hover:bg-muted focus:bg-card",
+      "text-foreground placeholder:text-muted-foreground",
+      "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
+      "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-muted",
+      error ? "border-error focus:border-error focus:ring-error" : "",
       resolvedLeftIcon && "pl-10",
       (rightIcon || showClearButton) && "pr-10",
       className
     );
     if (type === "select") {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
@@ -1156,7 +1156,7 @@ var Input = React110__namespace.default.forwardRef(
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4" }) })
       ] });
     }
     if (type === "textarea") {
@@ -1181,9 +1181,9 @@ var Input = React110__namespace.default.forwardRef(
           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)]",
+            "h-4 w-4 rounded-sm",
+            "border-border",
+            "text-primary focus:ring-ring",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -1192,7 +1192,7 @@ var Input = React110__namespace.default.forwardRef(
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-[var(--color-muted-foreground)]", children: resolvedLeftIcon }),
+      resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -1209,50 +1209,50 @@ var Input = React110__namespace.default.forwardRef(
         {
           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)]",
+          className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
           children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4" })
         }
       ),
-      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--color-muted-foreground)]", children: rightIcon })
+      rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
     ] });
   }
 );
 Input.displayName = "Input";
-var Label = React110__namespace.default.forwardRef(
+var Label = React112__namespace.default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
         ref,
         className: cn(
-          "block text-sm font-bold text-[var(--color-foreground)]",
+          "block text-sm font-bold text-foreground",
           className
         ),
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--color-error)] ml-1", children: "*" })
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error ml-1", children: "*" })
         ]
       }
     );
   }
 );
 Label.displayName = "Label";
-var Textarea = React110__namespace.default.forwardRef(
+var Textarea = React112__namespace.default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.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)]",
+          "block w-full border-[length:var(--border-width)] shadow-sm",
+          "px-3 py-2 text-sm text-foreground",
+          "bg-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",
+          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "disabled:bg-muted disabled:text-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)]",
+          error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
         ),
         ...props
@@ -1261,7 +1261,7 @@ var Textarea = React110__namespace.default.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Select = React110__namespace.default.forwardRef(
+var Select = React112__namespace.default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1269,12 +1269,12 @@ var Select = React110__namespace.default.forwardRef(
         {
           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)]",
+            "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
+            "px-3 py-2 pr-10 text-sm text-foreground font-medium",
+            "bg-card",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+            "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
+            error ? "border-error focus:border-error" : "border-border focus:border-primary",
             className
           ),
           ...props,
@@ -1292,12 +1292,12 @@ var Select = React110__namespace.default.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-[var(--color-foreground)]" }) })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronDown, { className: "h-4 w-4 text-foreground" }) })
     ] });
   }
 );
 Select.displayName = "Select";
-var Checkbox = React110__namespace.default.forwardRef(
+var Checkbox = React112__namespace.default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -1308,9 +1308,9 @@ var Checkbox = React110__namespace.default.forwardRef(
           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)]",
+            "peer h-4 w-4 border-[length:var(--border-width)] border-border",
+            "accent-primary focus:ring-ring focus:ring-offset-0",
+            "bg-card checked:bg-primary",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             className
           ),
@@ -1321,7 +1321,7 @@ var Checkbox = React110__namespace.default.forwardRef(
         "label",
         {
           htmlFor: inputId,
-          className: "ml-2 text-sm text-[var(--color-foreground)] font-medium cursor-pointer select-none",
+          className: "ml-2 text-sm text-foreground font-medium cursor-pointer select-none",
           children: label
         }
       )
@@ -1331,34 +1331,34 @@ var Checkbox = React110__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-sm)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow-sm",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg hover:-translate-y-0.5"
   ].join(" "),
   elevated: [
-    "bg-[var(--color-card)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-[var(--shadow-main)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
+    "hover:shadow-lg 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)]",
+    "bg-card",
+    "border-[length:var(--border-width)] border-border",
+    "shadow",
     "cursor-pointer",
     "transition-all duration-[var(--transition-normal)]",
-    "hover:shadow-[var(--shadow-hover)]"
+    "hover:shadow-lg"
   ].join(" ")
 };
 var paddingStyles2 = {
@@ -1369,11 +1369,11 @@ var paddingStyles2 = {
 };
 var shadowStyles2 = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg"
 };
-var Card = React110__namespace.default.forwardRef(
+var Card = React112__namespace.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -1389,7 +1389,7 @@ var Card = React110__namespace.default.forwardRef(
       {
         ref,
         className: cn(
-          "rounded-[var(--radius-md)]",
+          "rounded-md",
           "transition-all duration-[var(--transition-normal)]",
           variantStyles4[variant],
           paddingStyles2[padding],
@@ -1399,8 +1399,8 @@ var Card = React110__namespace.default.forwardRef(
         ...props,
         children: [
           (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-[var(--color-card-foreground)] font-[var(--font-weight-bold)]", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
+            title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
           children
         ]
@@ -1409,14 +1409,14 @@ var Card = React110__namespace.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React110__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React112__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React110__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React112__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
     className: cn(
-      "text-lg text-[var(--color-card-foreground)]",
+      "text-lg text-card-foreground",
       "font-[var(--font-weight-bold)]",
       className
     ),
@@ -1424,11 +1424,11 @@ var CardTitle = React110__namespace.default.forwardRef(({ className, ...props },
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React110__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React112__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React110__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React112__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -1443,13 +1443,13 @@ var sizeStyles4 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React110__namespace.default.forwardRef(
+var Spinner = React112__namespace.default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: cn("text-[var(--color-foreground)]", className),
+        className: cn("text-foreground", className),
         ...props,
         children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: cn("animate-spin", sizeStyles4[size]) })
       }
@@ -1457,7 +1457,7 @@ var Spinner = React110__namespace.default.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var Radio = React110__namespace.default.forwardRef(
+var Radio = React112__namespace.default.forwardRef(
   ({
     label,
     helperText,
@@ -1506,8 +1506,8 @@ var Radio = React110__namespace.default.forwardRef(
                 "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)]" : "",
+                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                checked ? hasError ? "border-error" : "border-primary bg-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)]"
@@ -1518,7 +1518,7 @@ var Radio = React110__namespace.default.forwardRef(
                   className: cn(
                     "transition-all",
                     dotSizeClasses[size],
-                    hasError ? "bg-[var(--color-error)]" : "bg-[var(--color-primary-foreground)]"
+                    hasError ? "bg-error" : "bg-primary-foreground"
                   )
                 }
               )
@@ -1531,7 +1531,7 @@ var Radio = React110__namespace.default.forwardRef(
             htmlFor: radioId,
             className: cn(
               "block text-sm font-medium cursor-pointer select-none",
-              hasError ? "text-[var(--color-error)]" : "text-[var(--color-foreground)]",
+              hasError ? "text-error" : "text-foreground",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: label
@@ -1543,7 +1543,7 @@ var Radio = React110__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-error`,
-            className: "text-sm text-[var(--color-error)] font-medium",
+            className: "text-sm text-error font-medium",
             role: "alert",
             children: error
           }
@@ -1552,7 +1552,7 @@ var Radio = React110__namespace.default.forwardRef(
           "p",
           {
             id: `${radioId}-helper`,
-            className: "text-sm text-[var(--color-muted-foreground)]",
+            className: "text-sm text-muted-foreground",
             children: helperText
           }
         )
@@ -1561,7 +1561,7 @@ var Radio = React110__namespace.default.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React110__namespace.forwardRef(
+var Switch = React112__namespace.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -1572,10 +1572,10 @@ var Switch = React110__namespace.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React110__namespace.useState(
+    const [isChecked, setIsChecked] = React112__namespace.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React110__namespace.useEffect(() => {
+    React112__namespace.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -1713,27 +1713,27 @@ var Stack = ({
 var VStack = (props) => /* @__PURE__ */ jsxRuntime.jsx(Stack, { direction: "vertical", ...props });
 var HStack = (props) => /* @__PURE__ */ jsxRuntime.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)]"
+  online: "bg-success",
+  offline: "bg-muted-foreground",
+  away: "bg-warning",
+  busy: "bg-error",
+  warning: "bg-warning",
+  critical: "bg-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)]"
+  online: "ring-success",
+  offline: "ring-muted-foreground",
+  away: "ring-warning",
+  busy: "ring-error",
+  warning: "ring-warning",
+  critical: "ring-error"
 };
 var sizeStyles5 = {
   sm: "w-2 h-2",
   md: "w-2.5 h-2.5",
   lg: "w-3 h-3"
 };
-var StatusDot = React110__namespace.default.forwardRef(
+var StatusDot = React112__namespace.default.forwardRef(
   ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "span",
@@ -1770,17 +1770,17 @@ function resolveDirection(value, direction) {
   return value > 0 ? "up" : "down";
 }
 function resolveColor(dir, invert) {
-  if (dir === "flat") return "text-[var(--color-muted-foreground)]";
+  if (dir === "flat") return "text-muted-foreground";
   const isPositive = dir === "up";
   const isGood = invert ? !isPositive : isPositive;
-  return isGood ? "text-[var(--color-success)]" : "text-[var(--color-error)]";
+  return isGood ? "text-success" : "text-error";
 }
 var iconMap2 = {
   up: LucideIcons.TrendingUp,
   down: LucideIcons.TrendingDown,
   flat: LucideIcons.ArrowRight
 };
-var TrendIndicator = React110__namespace.default.forwardRef(
+var TrendIndicator = React112__namespace.default.forwardRef(
   ({
     className,
     value,
@@ -1839,7 +1839,7 @@ var thumbSizes = {
   md: "w-4 h-4",
   lg: "w-5 h-5"
 };
-var RangeSlider = React110__namespace.default.forwardRef(
+var RangeSlider = React112__namespace.default.forwardRef(
   ({
     className,
     min = 0,
@@ -1857,14 +1857,14 @@ var RangeSlider = React110__namespace.default.forwardRef(
     formatValue: formatValue5,
     ...props
   }, ref) => {
-    const [isDragging, setIsDragging] = React110.useState(false);
-    const [showTip, setShowTip] = React110.useState(false);
-    const inputRef = React110.useRef(null);
+    const [isDragging, setIsDragging] = React112.useState(false);
+    const [showTip, setShowTip] = React112.useState(false);
+    const inputRef = React112.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 = React110.useCallback(
+    const handleChange = React112.useCallback(
       (e) => {
         const newValue = Number(e.target.value);
         onChange?.(newValue);
@@ -1891,7 +1891,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute inset-x-0 rounded-full bg-[var(--color-muted)]",
+                  "absolute inset-x-0 rounded-full bg-muted",
                   trackSizes[size]
                 ),
                 style: { top: "50%", transform: "translateY(-50%)" }
@@ -1901,7 +1901,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-muted-foreground)] opacity-30",
+                  "absolute rounded-full bg-muted-foreground opacity-30",
                   trackSizes[size]
                 ),
                 style: {
@@ -1916,7 +1916,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary)]",
+                  "absolute rounded-full bg-primary",
                   trackSizes[size]
                 ),
                 style: {
@@ -1978,9 +1978,9 @@ var RangeSlider = React110__namespace.default.forwardRef(
               "div",
               {
                 className: cn(
-                  "absolute rounded-full bg-[var(--color-primary-foreground)]",
-                  "border-2 border-[var(--color-primary)]",
-                  "shadow-[var(--shadow-sm)]",
+                  "absolute rounded-full bg-primary-foreground",
+                  "border-2 border-primary",
+                  "shadow-sm",
                   "pointer-events-none",
                   "transition-transform duration-100",
                   isDragging && "scale-110",
@@ -1998,7 +1998,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
               {
                 className: cn(
                   "absolute -top-8 px-2 py-0.5 rounded",
-                  "bg-[var(--color-foreground)] text-[var(--color-background)]",
+                  "bg-foreground text-background",
                   "text-xs font-medium whitespace-nowrap",
                   "pointer-events-none"
                 ),
@@ -2015,7 +2015,7 @@ var RangeSlider = React110__namespace.default.forwardRef(
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: "absolute w-px h-1.5 bg-[var(--color-muted-foreground)]",
+                className: "absolute w-px h-1.5 bg-muted-foreground",
                 style: { left: `${tickPercent}%` }
               },
               i
@@ -2029,8 +2029,8 @@ var RangeSlider = React110__namespace.default.forwardRef(
 RangeSlider.displayName = "RangeSlider";
 var backgroundClasses = {
   default: "",
-  alt: "bg-[var(--color-surface)]",
-  dark: "bg-[var(--color-foreground)] text-[var(--color-background)]",
+  alt: "bg-surface",
+  dark: "bg-foreground text-background",
   gradient: [
     "bg-gradient-to-b",
     "from-[var(--color-primary)]/5",
@@ -2042,7 +2042,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React110__namespace.default.forwardRef(
+var ContentSection = React112__namespace.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -2061,6 +2061,289 @@ var ContentSection = React110__namespace.default.forwardRef(
   }
 );
 ContentSection.displayName = "ContentSection";
+var initialStyles = {
+  "fade-up": { opacity: 0, transform: "translateY(24px)" },
+  "fade-down": { opacity: 0, transform: "translateY(-24px)" },
+  "fade-in": { opacity: 0 },
+  "fade-left": { opacity: 0, transform: "translateX(24px)" },
+  "fade-right": { opacity: 0, transform: "translateX(-24px)" },
+  "scale": { opacity: 0, transform: "scale(0.92)" },
+  "scale-up": { opacity: 0, transform: "scale(0.92) translateY(16px)" },
+  "none": {}
+};
+var animatedStyles = {
+  "fade-up": { opacity: 1, transform: "translateY(0)" },
+  "fade-down": { opacity: 1, transform: "translateY(0)" },
+  "fade-in": { opacity: 1 },
+  "fade-left": { opacity: 1, transform: "translateX(0)" },
+  "fade-right": { opacity: 1, transform: "translateX(0)" },
+  "scale": { opacity: 1, transform: "scale(1)" },
+  "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
+  "none": {}
+};
+var AnimatedReveal = React112__namespace.default.forwardRef(
+  ({
+    trigger = "scroll",
+    animation = "fade-up",
+    duration = 600,
+    delay = 0,
+    threshold = 0.15,
+    once = true,
+    animate: manualAnimate,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    children,
+    className,
+    style,
+    ...props
+  }, forwardedRef) => {
+    const [isAnimated, setIsAnimated] = React112.useState(false);
+    const internalRef = React112.useRef(null);
+    const hasAnimated = React112.useRef(false);
+    const setRef = React112.useCallback(
+      (node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React112.useEffect(() => {
+      if (trigger !== "scroll") return;
+      const el = internalRef.current;
+      if (!el) return;
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            if (once && hasAnimated.current) return;
+            hasAnimated.current = true;
+            setIsAnimated(true);
+          } else if (!once) {
+            setIsAnimated(false);
+          }
+        },
+        { threshold }
+      );
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [trigger, threshold, once]);
+    const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
+    const handleMouseLeave = trigger === "hover" ? () => {
+      if (!once || !hasAnimated.current) {
+        hasAnimated.current = true;
+        setIsAnimated(false);
+      }
+    } : void 0;
+    React112.useEffect(() => {
+      if (trigger === "manual" && manualAnimate !== void 0) {
+        setIsAnimated(manualAnimate);
+      }
+    }, [trigger, manualAnimate]);
+    const active = isAnimated;
+    const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: setRef,
+        className: cn("will-change-[opacity,transform]", className),
+        style: {
+          ...currentStyle,
+          transitionProperty: "opacity, transform",
+          transitionDuration: `${duration}ms`,
+          transitionDelay: `${delay}ms`,
+          transitionTimingFunction: easing,
+          ...style
+        },
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        ...props,
+        children: typeof children === "function" ? children(active) : children
+      }
+    );
+  }
+);
+AnimatedReveal.displayName = "AnimatedReveal";
+function useFetchedSvg(src) {
+  const [svg, setSvg] = React112.useState(null);
+  const cache = React112.useRef({});
+  React112.useEffect(() => {
+    if (!src) {
+      setSvg(null);
+      return;
+    }
+    if (cache.current[src]) {
+      setSvg(cache.current[src]);
+      return;
+    }
+    let cancelled = false;
+    fetch(src).then((res) => {
+      if (!res.ok) throw new Error(`Failed to fetch SVG: ${res.status}`);
+      return res.text();
+    }).then((text) => {
+      if (cancelled) return;
+      cache.current[src] = text;
+      setSvg(text);
+    }).catch(() => {
+      if (!cancelled) setSvg(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  return svg;
+}
+function applyDrawAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = `${len}`;
+      el.style.strokeDashoffset = animate ? "0" : `${len}`;
+      el.style.transition = `stroke-dashoffset ${duration}ms ${easing} ${delay}ms`;
+    }
+  });
+}
+function applyFillAnimation(container, animate, duration, delay, easing, fillColor) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    if ("getTotalLength" in el && typeof el.getTotalLength === "function") {
+      const geom = el;
+      const len = geom.getTotalLength();
+      geom.style.strokeDasharray = `${len}`;
+      geom.style.strokeDashoffset = animate ? "0" : `${len}`;
+      geom.style.transition = `stroke-dashoffset ${duration * 0.6}ms ${easing} ${delay}ms, fill-opacity ${duration * 0.4}ms ${easing} ${delay + duration * 0.6}ms`;
+    }
+    if (fillColor) el.style.fill = fillColor;
+    el.style.fillOpacity = animate ? "1" : "0";
+  });
+}
+function applyPulseAnimation(container, animate, duration) {
+  const svg = container.querySelector("svg");
+  if (!svg) return;
+  if (animate) {
+    svg.style.animation = `ag-pulse ${duration}ms ease-in-out infinite`;
+  } else {
+    svg.style.animation = "none";
+  }
+}
+function applyMorphAnimation(container, animate, duration, delay, easing) {
+  const paths = container.querySelectorAll("path, circle, ellipse, rect, polygon");
+  paths.forEach((el) => {
+    el.style.transition = `all ${duration}ms ${easing} ${delay}ms`;
+    el.style.transform = animate ? "scale(1)" : "scale(0)";
+    el.style.transformOrigin = "center";
+    el.style.opacity = animate ? "1" : "0";
+  });
+}
+var AnimatedGraphic = React112__namespace.default.forwardRef(
+  ({
+    src,
+    svgContent,
+    animation = "draw",
+    animate = false,
+    duration = 1200,
+    delay = 0,
+    easing = "cubic-bezier(0.16, 1, 0.3, 1)",
+    width,
+    height,
+    strokeColor,
+    fillColor,
+    alt,
+    className,
+    style,
+    children,
+    ...props
+  }, ref) => {
+    const containerRef = React112.useRef(null);
+    const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
+    const resolvedSvg = svgContent ?? fetchedSvg;
+    const prevAnimateRef = React112.useRef(animate);
+    const setRef = React112__namespace.default.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    React112.useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !strokeColor) return;
+      const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+      paths.forEach((p2) => {
+        p2.style.stroke = strokeColor;
+      });
+    }, [resolvedSvg, strokeColor]);
+    React112.useEffect(() => {
+      const el = containerRef.current;
+      if (!el || !resolvedSvg) return;
+      if (animation === "draw" || animation === "fill") {
+        const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
+        paths.forEach((p2) => {
+          if ("getTotalLength" in p2 && typeof p2.getTotalLength === "function") {
+            const len = p2.getTotalLength();
+            p2.style.strokeDasharray = `${len}`;
+            p2.style.strokeDashoffset = `${len}`;
+          }
+          if (animation === "fill") {
+            p2.style.fillOpacity = "0";
+          }
+        });
+      }
+      if (animation === "morph") {
+        const paths = el.querySelectorAll("path, circle, ellipse, rect, polygon");
+        paths.forEach((p2) => {
+          p2.style.transform = "scale(0)";
+          p2.style.transformOrigin = "center";
+          p2.style.opacity = "0";
+        });
+      }
+    }, [resolvedSvg, animation]);
+    React112.useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const id = requestAnimationFrame(() => {
+        switch (animation) {
+          case "draw":
+            applyDrawAnimation(el, animate, duration, delay, easing);
+            break;
+          case "fill":
+            applyFillAnimation(el, animate, duration, delay, easing, fillColor);
+            break;
+          case "pulse":
+            applyPulseAnimation(el, animate, duration);
+            break;
+          case "morph":
+            applyMorphAnimation(el, animate, duration, delay, easing);
+            break;
+        }
+      });
+      prevAnimateRef.current = animate;
+      return () => cancelAnimationFrame(id);
+    }, [animate, animation, duration, delay, easing, fillColor, resolvedSvg]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes ag-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.04); opacity: 0.85; } }` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: setRef,
+          className: cn("inline-flex items-center justify-center", className),
+          style: { width, height, ...style },
+          role: alt ? "img" : void 0,
+          "aria-label": alt,
+          ...props,
+          children: resolvedSvg ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "w-full h-full [&>svg]:w-full [&>svg]:h-full",
+              dangerouslySetInnerHTML: { __html: resolvedSvg }
+            }
+          ) : children
+        }
+      )
+    ] });
+  }
+);
+AnimatedGraphic.displayName = "AnimatedGraphic";
 
 // locales/en.json
 var en_default = {
@@ -2171,7 +2454,7 @@ var en_default = {
 // hooks/useTranslate.ts
 var { $meta: _meta, ...coreMessages } = en_default;
 var coreLocale = coreMessages;
-var I18nContext = React110.createContext({
+var I18nContext = React112.createContext({
   locale: "en",
   direction: "ltr",
   t: (key) => coreLocale[key] ?? key
@@ -2180,7 +2463,7 @@ var I18nContext = React110.createContext({
 I18nContext.displayName = "I18nContext";
 I18nContext.Provider;
 function useTranslate() {
-  return React110.useContext(I18nContext);
+  return React112.useContext(I18nContext);
 }
 var ErrorState = ({
   title,
@@ -2207,16 +2490,16 @@ var ErrorState = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-[var(--radius-full)] bg-[var(--color-error)]/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-[var(--color-error)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-[var(--color-foreground)]", children: resolvedTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-[var(--color-muted-foreground)] max-w-sm", children: resolvedMessage }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mb-4 rounded-full bg-error/10 p-3", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.AlertCircle, { className: "h-8 w-8 text-error" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h3", className: "text-lg font-medium text-foreground", children: resolvedTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "mt-1 text-muted-foreground max-w-sm", children: resolvedMessage }),
         (onRetry || retryEvent) && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: "mt-4", onClick: handleRetry, children: t("error.retry") })
       ]
     }
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React110__namespace.default.Component {
+var ErrorBoundary = class extends React112__namespace.default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -2315,7 +2598,7 @@ function executeNotify(message, options, config) {
 function executeEmit(event, payload, config) {
   config.eventBus.emit(event, payload);
 }
-var ClientEffectConfigContext = React110.createContext(null);
+var ClientEffectConfigContext = React112.createContext(null);
 ClientEffectConfigContext.Provider;
 var effectIdCounter = 0;
 function generateEffectId() {
@@ -2554,14 +2837,14 @@ var OfflineExecutor = class {
   }
 };
 function useOfflineExecutor(options) {
-  const executorRef = React110.useRef(null);
-  const [state, setState] = React110.useState({
+  const executorRef = React112.useRef(null);
+  const [state, setState] = React112.useState({
     isOffline: false,
     syncQueue: [],
     localEffectsProcessed: 0,
     effectsSynced: 0
   });
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     const executor = new OfflineExecutor({
       ...options,
       onQueueChange: (queue) => {
@@ -2576,7 +2859,7 @@ function useOfflineExecutor(options) {
       executorRef.current = null;
     };
   }, []);
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     if (!options.autoSync || !options.serverUrl) return;
     const handleOnline = async () => {
       if (executorRef.current) {
@@ -2590,13 +2873,13 @@ function useOfflineExecutor(options) {
     window.addEventListener("online", handleOnline);
     return () => window.removeEventListener("online", handleOnline);
   }, [options.autoSync, options.serverUrl, options.authToken]);
-  const executeEffects = React110.useCallback((effects) => {
+  const executeEffects = React112.useCallback((effects) => {
     executorRef.current?.executeClientEffects(effects);
     if (executorRef.current) {
       setState(executorRef.current.getState());
     }
   }, []);
-  const processEventOffline = React110.useCallback(
+  const processEventOffline = React112.useCallback(
     (event, payload, effects) => {
       const result = executorRef.current?.processEventOffline(event, payload, effects);
       if (executorRef.current) {
@@ -2606,7 +2889,7 @@ function useOfflineExecutor(options) {
     },
     []
   );
-  const sync = React110.useCallback(async () => {
+  const sync = React112.useCallback(async () => {
     if (!executorRef.current || !options.serverUrl) return 0;
     const count = await executorRef.current.syncPendingEffects(
       options.serverUrl,
@@ -2615,7 +2898,7 @@ function useOfflineExecutor(options) {
     setState(executorRef.current.getState());
     return count;
   }, [options.serverUrl, options.authToken]);
-  const clearQueue = React110.useCallback(() => {
+  const clearQueue = React112.useCallback(() => {
     executorRef.current?.clearQueue();
     if (executorRef.current) {
       setState(executorRef.current.getState());
@@ -2631,7 +2914,7 @@ function useOfflineExecutor(options) {
     clearQueue
   };
 }
-React110.createContext(null);
+React112.createContext(null);
 var defaultIcon = L__default.default.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",
@@ -2644,29 +2927,41 @@ var defaultIcon = L__default.default.icon({
 L__default.default.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 getState() {
+  if (typeof window !== "undefined") {
+    const w = window;
+    if (!w.__verificationRegistryState) {
+      w.__verificationRegistryState = {
+        checks: /* @__PURE__ */ new Map(),
+        transitions: [],
+        bridgeHealth: null,
+        listeners: /* @__PURE__ */ new Set()
+      };
+    }
+    return w.__verificationRegistryState;
+  }
+  return { checks: /* @__PURE__ */ new Map(), transitions: [], bridgeHealth: null, listeners: /* @__PURE__ */ new Set() };
+}
 function notifyListeners() {
-  listeners.forEach((l) => l());
+  getState().listeners.forEach((l) => l());
   exposeOnWindow();
 }
 function registerCheck(id, label, status = "pending", details) {
-  checks.set(id, { id, label, status, details, updatedAt: Date.now() });
+  getState().checks.set(id, { id, label, status, details, updatedAt: Date.now() });
   notifyListeners();
 }
 function getAllChecks() {
-  return Array.from(checks.values());
+  return Array.from(getState().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();
+  getState().transitions.push(entry);
+  if (getState().transitions.length > MAX_TRANSITIONS) {
+    getState().transitions.shift();
   }
   if (entry.event === "INIT") {
     const hasFetch = entry.effects.some((e) => e.type === "fetch");
@@ -2701,10 +2996,11 @@ function recordTransition(trace) {
   notifyListeners();
 }
 function getTransitions() {
-  return [...transitions];
+  return [...getState().transitions];
 }
 function getBridgeHealth() {
-  return null;
+  const bh = getState().bridgeHealth;
+  return bh ? { ...bh } : null;
 }
 function getSummary() {
   const allChecks = getAllChecks();
@@ -2725,8 +3021,8 @@ function getSnapshot() {
   };
 }
 function subscribeToVerification(listener) {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
+  getState().listeners.add(listener);
+  return () => getState().listeners.delete(listener);
 }
 function exposeOnWindow() {
   if (typeof window === "undefined") return;
@@ -2743,7 +3039,7 @@ function exposeOnWindow() {
 }
 function waitForTransition(event, timeoutMs = 1e4) {
   return new Promise((resolve) => {
-    const existing = transitions.find((t) => t.event === event);
+    const existing = getState().transitions.find((t) => t.event === event);
     if (existing) {
       resolve(existing);
       return;
@@ -2753,7 +3049,7 @@ function waitForTransition(event, timeoutMs = 1e4) {
       resolve(null);
     }, timeoutMs);
     const unsub = subscribeToVerification(() => {
-      const found = transitions.find((t) => t.event === event);
+      const found = getState().transitions.find((t) => t.event === event);
       if (found) {
         clearTimeout(timeout);
         unsub();
@@ -2796,7 +3092,7 @@ function bindTraitStateGetter(getter) {
   }
 }
 exposeOnWindow();
-var MarkdownContent = React110__namespace.default.memo(
+var MarkdownContent = React112__namespace.default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     const safeContent = typeof content === "string" ? content : String(content ?? "");
@@ -2883,7 +3179,7 @@ var MarkdownContent = React110__namespace.default.memo(
                   "blockquote",
                   {
                     ...props,
-                    className: "border-l-4 border-blue-500 pl-4 italic text-[var(--color-foreground)] my-4",
+                    className: "border-l-4 border-blue-500 pl-4 italic text-foreground my-4",
                     children
                   }
                 );
@@ -2898,7 +3194,7 @@ var MarkdownContent = React110__namespace.default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
-var CodeBlock = React110__namespace.default.memo(
+var CodeBlock = React112__namespace.default.memo(
   ({
     code: rawCode,
     language = "text",
@@ -2910,20 +3206,20 @@ var CodeBlock = React110__namespace.default.memo(
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
-    const scrollRef = React110.useRef(null);
-    const savedScrollLeftRef = React110.useRef(0);
-    const [copied, setCopied] = React110.useState(false);
-    React110.useLayoutEffect(() => {
+    const scrollRef = React112.useRef(null);
+    const savedScrollLeftRef = React112.useRef(0);
+    const [copied, setCopied] = React112.useState(false);
+    React112.useLayoutEffect(() => {
       const el = scrollRef.current;
       return () => {
         if (el) savedScrollLeftRef.current = el.scrollLeft;
       };
     }, [language, code]);
-    React110.useLayoutEffect(() => {
+    React112.useLayoutEffect(() => {
       const el = scrollRef.current;
       if (el) el.scrollLeft = savedScrollLeftRef.current;
     }, [language, code]);
-    React110.useEffect(() => {
+    React112.useEffect(() => {
       const el = scrollRef.current;
       if (!el) return;
       const handle = () => {
@@ -2958,7 +3254,7 @@ var CodeBlock = React110__namespace.default.memo(
                 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",
+                className: "opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity text-muted-foreground hover:text-white",
                 "aria-label": "Copy code",
                 children: copied ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { size: 16, className: "text-green-400" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { size: 16 })
               }
@@ -3009,18 +3305,18 @@ CodeBlock.displayName = "CodeBlock";
 
 // lib/debug.ts
 typeof window !== "undefined" && (localStorage.getItem("debug") === "true" || process.env.NODE_ENV === "development");
-React110.lazy(() => import('react-markdown'));
-var GameAudioContext = React110.createContext(null);
+React112.lazy(() => import('react-markdown'));
+var GameAudioContext = React112.createContext(null);
 GameAudioContext.displayName = "GameAudioContext";
 
 // components/organisms/component-registry.generated.ts
 function lazyThree(name, loader) {
-  const Lazy = React110__namespace.default.lazy(() => loader().then((m) => ({ default: m[name] })));
+  const Lazy = React112__namespace.default.lazy(() => loader().then((m) => ({ default: m[name] })));
   function ThreeWrapper(props) {
-    return React110__namespace.default.createElement(
-      React110__namespace.default.Suspense,
+    return React112__namespace.default.createElement(
+      React112__namespace.default.Suspense,
       { fallback: null },
-      React110__namespace.default.createElement(Lazy, props)
+      React112__namespace.default.createElement(Lazy, props)
     );
   }
   ThreeWrapper.displayName = `Lazy(${name})`;
@@ -3041,13 +3337,13 @@ lazyThree("PhysicsObject3D", () => import('@almadar/ui/components/organisms/game
 lazyThree("Scene3D", () => import('@almadar/ui/components/organisms/game/three'));
 lazyThree("TileRenderer", () => import('@almadar/ui/components/organisms/game/three'));
 lazyThree("UnitRenderer", () => import('@almadar/ui/components/organisms/game/three'));
-var SuspenseConfigContext = React110.createContext({ enabled: false });
-React110.createContext(false);
+var SuspenseConfigContext = React112.createContext({ enabled: false });
+React112.createContext(false);
 function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React110__namespace.default.createElement(
+  return React112__namespace.default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -3092,8 +3388,8 @@ function VerificationProvider({
 }) {
   const isEnabled = enabled ?? (typeof process !== "undefined" && process.env?.NODE_ENV !== "production");
   const eventBus = useEventBus();
-  const pendingRef = React110.useRef(/* @__PURE__ */ new Map());
-  React110.useEffect(() => {
+  const pendingRef = React112.useRef(/* @__PURE__ */ new Map());
+  React112.useEffect(() => {
     if (!isEnabled) return;
     if (!eventBus.onAny) return;
     const unsub = eventBus.onAny((evt) => {
@@ -3120,7 +3416,7 @@ function VerificationProvider({
         })) : [];
         recordTransition({
           traitName: parsed.traitName,
-          from: pending?.from ?? "unknown",
+          from: pending?.from ?? (parsed.event === "INIT" ? "init" : "unknown"),
           to: newState,
           event: parsed.event,
           effects,
@@ -3154,7 +3450,7 @@ function VerificationProvider({
     );
     return unsub;
   }, [isEnabled, eventBus]);
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     if (!isEnabled) return;
     if (!runtimeManager) return;
     runtimeManager.setObserver({
@@ -3176,11 +3472,11 @@ function VerificationProvider({
       "pass"
     );
   }, [isEnabled, runtimeManager]);
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     if (!isEnabled) return;
     bindEventBus(eventBus);
   }, [isEnabled, eventBus]);
-  React110.useEffect(() => {
+  React112.useEffect(() => {
     if (!isEnabled) return;
     if (traitStateGetter) {
       bindTraitStateGetter(traitStateGetter);
@@ -3204,7 +3500,7 @@ function OrbitalProvider({
   suspense = false,
   verification
 }) {
-  const suspenseConfig = React110.useMemo(
+  const suspenseConfig = React112.useMemo(
     () => ({ enabled: suspense }),
     [suspense]
   );
@@ -3224,43 +3520,43 @@ function OrbitalProvider({
   );
 }
 OrbitalProvider.displayName = "OrbitalProvider";
-var FetchedDataContext = React110.createContext(null);
+var FetchedDataContext = React112.createContext(null);
 function FetchedDataProvider({
   initialData,
   children
 }) {
-  const [state, setState] = React110.useState(() => ({
+  const [state, setState] = React112.useState(() => ({
     data: initialData || {},
     fetchedAt: {},
     loading: false,
     error: null
   }));
-  const getData = React110.useCallback(
+  const getData = React112.useCallback(
     (entityName) => {
       return state.data[entityName] || [];
     },
     [state.data]
   );
-  const getById = React110.useCallback(
+  const getById = React112.useCallback(
     (entityName, id) => {
       const records = state.data[entityName];
       return records?.find((r) => r.id === id);
     },
     [state.data]
   );
-  const hasData = React110.useCallback(
+  const hasData = React112.useCallback(
     (entityName) => {
       return entityName in state.data && state.data[entityName].length > 0;
     },
     [state.data]
   );
-  const getFetchedAt = React110.useCallback(
+  const getFetchedAt = React112.useCallback(
     (entityName) => {
       return state.fetchedAt[entityName];
     },
     [state.fetchedAt]
   );
-  const setData = React110.useCallback((data) => {
+  const setData = React112.useCallback((data) => {
     const now = Date.now();
     setState((prev) => ({
       ...prev,
@@ -3279,14 +3575,14 @@ function FetchedDataProvider({
       error: null
     }));
   }, []);
-  const clearData = React110.useCallback(() => {
+  const clearData = React112.useCallback(() => {
     setState((prev) => ({
       ...prev,
       data: {},
       fetchedAt: {}
     }));
   }, []);
-  const clearEntity = React110.useCallback((entityName) => {
+  const clearEntity = React112.useCallback((entityName) => {
     setState((prev) => {
       const newData = { ...prev.data };
       const newFetchedAt = { ...prev.fetchedAt };
@@ -3299,13 +3595,13 @@ function FetchedDataProvider({
       };
     });
   }, []);
-  const setLoading = React110.useCallback((loading) => {
+  const setLoading = React112.useCallback((loading) => {
     setState((prev) => ({ ...prev, loading }));
   }, []);
-  const setError = React110.useCallback((error) => {
+  const setError = React112.useCallback((error) => {
     setState((prev) => ({ ...prev, error, loading: false }));
   }, []);
-  const contextValue = React110.useMemo(
+  const contextValue = React112.useMemo(
     () => ({
       getData,
       getById,
@@ -3336,10 +3632,10 @@ function FetchedDataProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(FetchedDataContext.Provider, { value: contextValue, children });
 }
 function useFetchedDataContext() {
-  return React110.useContext(FetchedDataContext);
+  return React112.useContext(FetchedDataContext);
 }
 function useFetchedData() {
-  const context = React110.useContext(FetchedDataContext);
+  const context = React112.useContext(FetchedDataContext);
   if (!context) {
     return {
       getData: () => [],
@@ -3379,15 +3675,15 @@ function useFetchedEntity(entityName) {
     error: context.error
   };
 }
-var OfflineModeContext = React110.createContext(null);
+var OfflineModeContext = React112.createContext(null);
 function OfflineModeProvider({
   children,
   ...executorOptions
 }) {
-  const [forceOffline, setForceOffline] = React110.useState(false);
+  const [forceOffline, setForceOffline] = React112.useState(false);
   const executor = useOfflineExecutor(executorOptions);
   const effectivelyOffline = executor.isOffline || forceOffline;
-  const contextValue = React110.useMemo(
+  const contextValue = React112.useMemo(
     () => ({
       ...executor,
       forceOffline,
@@ -3399,14 +3695,14 @@ function OfflineModeProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(OfflineModeContext.Provider, { value: contextValue, children });
 }
 function useOfflineMode() {
-  const context = React110.useContext(OfflineModeContext);
+  const context = React112.useContext(OfflineModeContext);
   if (!context) {
     throw new Error("useOfflineMode must be used within OfflineModeProvider");
   }
   return context;
 }
 function useOptionalOfflineMode() {
-  return React110.useContext(OfflineModeContext);
+  return React112.useContext(OfflineModeContext);
 }
 
 exports.EventBusContext = EventBusContext2;