@almadar/ui 1.0.20 → 1.0.21

package/dist/components/index.js

@@ -11,7 +11,7 @@ export { DEFAULT_SLOTS, useUISlotManager } from '../chunk-7NEWMNNU.js';
 export { clearEntities, getAllEntities, getByType, getEntity, getSingleton, removeEntity, spawnEntity, updateEntity, updateSingleton } from '../chunk-N7MVUW4R.js';
 import '../chunk-PKBMQBKP.js';
 import * as React37 from 'react';
-import React37__default, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
+import React37__default, { useCallback, useMemo, useState, useEffect, useRef } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X, User, Sun, Moon, FileQuestion, Inbox, Search, Info, AlertCircle, XCircle, CheckCircle, AlertTriangle, ChevronRight, Filter, Plus, ChevronLeft, Check, ChevronUp, MoreHorizontal, TrendingUp, TrendingDown, Minus, ArrowLeft, Menu, ArrowUp, ArrowDown, MoreVertical, Package, Trash2, Circle, Clock, CheckCircle2, Image as Image$1, Upload, ZoomIn, Eraser, FileText, ZoomOut, Download, Printer, RotateCcw, Code, WrapText, Copy, Settings, Bell, LogOut, Pause, Play, RefreshCw, Eye, Edit, Calendar, Pencil, Undo2, Save, Tag, DollarSign, Send, ListTodo } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -88,11 +88,22 @@ var Button = React37__default.forwardRef(
     rightIcon,
     icon: IconComponent,
     iconRight: IconRightComponent,
+    action,
+    actionPayload,
+    label,
     children,
+    onClick,
     ...props
   }, ref) => {
+    const eventBus = useEventBus();
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: iconSizeStyles[size] });
     const resolvedRightIcon = rightIcon || IconRightComponent && /* @__PURE__ */ jsx(IconRightComponent, { className: iconSizeStyles[size] });
+    const handleClick = (e) => {
+      if (action) {
+        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      }
+      onClick?.(e);
+    };
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -109,10 +120,11 @@ var Button = React37__default.forwardRef(
           sizeStyles[size],
           className
         ),
+        onClick: handleClick,
         ...props,
         children: [
           isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-          children,
+          children || label,
           resolvedRightIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
         ]
       }
@@ -567,13 +579,23 @@ var Avatar = ({
   status,
   badge,
   className,
-  onClick
+  onClick,
+  action,
+  actionPayload
 }) => {
+  const eventBus = useEventBus();
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
   const hasImage = !!src;
   const hasInitials = !!initials;
   const hasIcon = !!Icon2;
   const getInitialsBackground = () => "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+  const isClickable = action || onClick;
+  const handleClick = () => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.();
+  };
   return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -583,12 +605,12 @@ var Avatar = ({
           "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
           "overflow-hidden",
           sizeClasses[size],
-          onClick && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
+          isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
           className
         ),
-        onClick,
-        role: onClick ? "button" : void 0,
-        tabIndex: onClick ? 0 : void 0,
+        onClick: isClickable ? handleClick : void 0,
+        role: isClickable ? "button" : void 0,
+        tabIndex: isClickable ? 0 : void 0,
         children: hasImage ? /* @__PURE__ */ jsx(
           "img",
           {
@@ -777,9 +799,34 @@ var Box = React37__default.forwardRef(
     className,
     children,
     as: Component = "div",
+    action,
+    actionPayload,
+    hoverEvent,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
     ...rest
   }, ref) => {
+    const eventBus = useEventBus();
+    const handleClick = useCallback((e) => {
+      if (action) {
+        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;
     return /* @__PURE__ */ jsx(
       Component,
       {
@@ -811,10 +858,12 @@ var Box = React37__default.forwardRef(
           // Position
           position && positionStyles[position],
           // Cursor for clickable
-          onClick && "cursor-pointer",
+          isClickable && "cursor-pointer",
           className
         ),
-        onClick,
+        onClick: isClickable ? handleClick : void 0,
+        onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
+        onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         ...rest,
         children
       }
@@ -1474,8 +1523,17 @@ var Stack = ({
   onClick,
   onKeyDown,
   role,
-  tabIndex
+  tabIndex,
+  action,
+  actionPayload
 }) => {
+  const eventBus = useEventBus();
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, actionPayload ?? {});
+    }
+    onClick?.(e);
+  };
   const directionClass = direction === "horizontal" ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
   return /* @__PURE__ */ jsx(
     Component,
@@ -1491,7 +1549,7 @@ var Stack = ({
         className
       ),
       style,
-      onClick,
+      onClick: action || onClick ? handleClick : void 0,
       onKeyDown,
       role,
       tabIndex,
@@ -1509,8 +1567,11 @@ var TextHighlight = ({
   onMouseLeave,
   annotationId,
   className,
-  children
+  children,
+  action,
+  hoverEvent
 }) => {
+  const eventBus = useEventBus();
   const baseStyles = "cursor-pointer transition-all duration-150";
   const typeStyles = {
     question: cn(
@@ -1533,14 +1594,24 @@ var TextHighlight = ({
       "data-highlight-type": highlightType,
       "data-annotation-id": annotationId,
       className: cn(baseStyles, typeStyles[highlightType], className),
-      onClick,
-      onMouseEnter,
-      onMouseLeave,
+      onClick: () => {
+        if (action) eventBus.emit(`UI:${action}`, { annotationId });
+        onClick?.();
+      },
+      onMouseEnter: () => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true, annotationId });
+        onMouseEnter?.();
+      },
+      onMouseLeave: () => {
+        if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false, annotationId });
+        onMouseLeave?.();
+      },
       role: "button",
       tabIndex: 0,
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === " ") {
           e.preventDefault();
+          if (action) eventBus.emit(`UI:${action}`, { annotationId });
           onClick?.();
         }
       },
@@ -1837,9 +1908,17 @@ var Overlay = ({
   isVisible = true,
   onClick,
   className,
-  blur = true
+  blur = true,
+  action
 }) => {
+  const eventBus = useEventBus();
   if (!isVisible) return null;
+  const handleClick = (e) => {
+    if (action) {
+      eventBus.emit(`UI:${action}`, {});
+    }
+    onClick?.(e);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1848,7 +1927,7 @@ var Overlay = ({
         blur && "backdrop-blur-sm",
         className
       ),
-      onClick,
+      onClick: action || onClick ? handleClick : void 0,
       "aria-hidden": "true"
     }
   );
@@ -2163,10 +2242,13 @@ function ControlButton({
   variant = "secondary",
   onPress,
   onRelease,
+  pressEvent,
+  releaseEvent,
   pressed,
   disabled,
   className
 }) {
+  const eventBus = useEventBus();
   const [isPressed, setIsPressed] = React37.useState(false);
   const actualPressed = pressed ?? isPressed;
   const handlePointerDown = React37.useCallback(
@@ -2174,27 +2256,30 @@ function ControlButton({
       e.preventDefault();
       if (disabled) return;
       setIsPressed(true);
+      if (pressEvent) eventBus.emit(`UI:${pressEvent}`, {});
       onPress?.();
     },
-    [disabled, onPress]
+    [disabled, pressEvent, eventBus, onPress]
   );
   const handlePointerUp = React37.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
       setIsPressed(false);
+      if (releaseEvent) eventBus.emit(`UI:${releaseEvent}`, {});
       onRelease?.();
     },
-    [disabled, onRelease]
+    [disabled, releaseEvent, eventBus, onRelease]
   );
   const handlePointerLeave = React37.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
+        if (releaseEvent) eventBus.emit(`UI:${releaseEvent}`, {});
         onRelease?.();
       }
     },
-    [isPressed, onRelease]
+    [isPressed, releaseEvent, eventBus, onRelease]
   );
   return /* @__PURE__ */ jsxs(
     "button",
@@ -2240,8 +2325,10 @@ function Sprite({
   zIndex = 0,
   columns = 16,
   className,
-  onClick
+  onClick,
+  action
 }) {
+  const eventBus = useEventBus();
   const sourcePosition = useMemo(() => {
     const frameX = frame % columns;
     const frameY = Math.floor(frame / columns);
@@ -2266,11 +2353,15 @@ function Sprite({
     return transforms.join(" ");
   }, [x, y, scale, flipX, flipY, rotation]);
   const backgroundPosition = `-${sourcePosition.x}px -${sourcePosition.y}px`;
+  const handleClick = () => {
+    if (action) eventBus.emit(`UI:${action}`, {});
+    onClick?.();
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       className,
-      onClick,
+      onClick: action || onClick ? handleClick : void 0,
       style: {
         position: "absolute",
         width: frameWidth,
@@ -2283,7 +2374,7 @@ function Sprite({
         transformOrigin: "center center",
         opacity,
         zIndex,
-        pointerEvents: onClick ? "auto" : "none"
+        pointerEvents: action || onClick ? "auto" : "none"
       }
     }
   );
@@ -2361,8 +2452,14 @@ var EmptyState = ({
   onAction,
   className,
   destructive,
-  variant
+  variant,
+  actionEvent
 }) => {
+  const eventBus = useEventBus();
+  const handleAction = () => {
+    if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
+    onAction?.();
+  };
   const Icon2 = typeof icon === "string" ? ICON_MAP[icon] : icon;
   const isDestructive = destructive || variant === "error";
   const isSuccess = variant === "success";
@@ -2404,12 +2501,12 @@ var EmptyState = ({
           }
         ),
         description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-muted-foreground)] max-w-sm", children: description }),
-        actionLabel && onAction && /* @__PURE__ */ jsx(
+        actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx(
           Button,
           {
             className: "mt-4",
             variant: isDestructive ? "danger" : "primary",
-            onClick: onAction,
+            onClick: handleAction,
             children: actionLabel
           }
         )
@@ -2451,8 +2548,14 @@ var ErrorState = ({
   message,
   description,
   onRetry,
-  className
+  className,
+  retryEvent
 }) => {
+  const eventBus = useEventBus();
+  const handleRetry = () => {
+    if (retryEvent) eventBus.emit(`UI:${retryEvent}`, {});
+    onRetry?.();
+  };
   const resolvedMessage = message ?? description ?? "An error occurred";
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2465,7 +2568,7 @@ var ErrorState = ({
         /* @__PURE__ */ jsx("div", { 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("h3", { className: "text-lg font-medium text-[var(--color-foreground)]", children: title }),
         /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[var(--color-muted-foreground)] max-w-sm", children: resolvedMessage }),
-        onRetry && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "mt-4", onClick: onRetry, children: "Try again" })
+        (onRetry || retryEvent) && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "mt-4", onClick: handleRetry, children: "Try again" })
       ]
     }
   );
@@ -2492,8 +2595,10 @@ var Accordion = ({
   defaultOpen,
   openItems: controlledOpenItems,
   onItemToggle,
-  className
+  className,
+  toggleEvent
 }) => {
+  const eventBus = useEventBus();
   const normalizedItems = items.map(
     (item, index) => normalizeItem(item, index)
   );
@@ -2523,6 +2628,7 @@ var Accordion = ({
       setInternalOpenItems(newOpenItems);
     }
     onItemToggle?.(itemId, !isOpen);
+    if (toggleEvent) eventBus.emit(`UI:${toggleEvent}`, { itemId, isOpen: !isOpen });
   };
   return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: normalizedItems.map((item, index) => {
     const isOpen = openItemsSet.has(item.id);
@@ -2600,9 +2706,15 @@ var Alert = ({
   onDismiss,
   onClose,
   actions,
-  className
+  className,
+  dismissEvent
 }) => {
-  const handleDismiss = onDismiss || onClose;
+  const eventBus = useEventBus();
+  const handleDismissCallback = onDismiss || onClose;
+  const handleDismiss = () => {
+    if (dismissEvent) eventBus.emit(`UI:${dismissEvent}`, {});
+    handleDismissCallback?.();
+  };
   const content = children ?? message;
   return /* @__PURE__ */ jsx(
     Box,
@@ -2628,7 +2740,7 @@ var Alert = ({
           /* @__PURE__ */ jsx(Typography, { variant: "body2", children: content }),
           actions && /* @__PURE__ */ jsx("div", { className: "mt-3 flex gap-2", children: actions })
         ] }),
-        (dismissible || handleDismiss) && /* @__PURE__ */ jsx(
+        (dismissible || dismissEvent || handleDismissCallback) && /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -2652,6 +2764,7 @@ var Breadcrumb = ({
   maxItems,
   className
 }) => {
+  const eventBus = useEventBus();
   const displayItems = maxItems && items.length > maxItems ? [
     ...items.slice(0, 1),
     { label: "...", isCurrent: false },
@@ -2691,7 +2804,10 @@ var Breadcrumb = ({
             "button",
             {
               type: "button",
-              onClick: item.onClick,
+              onClick: () => {
+                if (item.event) eventBus.emit(`UI:${item.event}`, { label: item.label });
+                item.onClick?.();
+              },
               className: cn(
                 "flex items-center gap-1.5 transition-colors",
                 "focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2",
@@ -3223,9 +3339,15 @@ function Card2({
   actions,
   children,
   onClick,
-  className = ""
+  className = "",
+  action
 }) {
-  const isClickable = !!onClick;
+  const eventBus = useEventBus();
+  const isClickable = !!onClick || !!action;
+  const handleClick = () => {
+    if (action) eventBus.emit(`UI:${action}`, {});
+    onClick?.();
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3236,10 +3358,10 @@ function Card2({
         ${isClickable ? "cursor-pointer hover:shadow-[var(--shadow-hover)] transition-shadow" : ""}
         ${className}
       `,
-      onClick,
+      onClick: isClickable ? handleClick : void 0,
       role: isClickable ? "button" : void 0,
       tabIndex: isClickable ? 0 : void 0,
-      onKeyDown: isClickable ? (e) => e.key === "Enter" && onClick?.() : void 0,
+      onKeyDown: isClickable ? (e) => e.key === "Enter" && handleClick() : void 0,
       children: [
         image && /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsx(
           "img",
@@ -3255,21 +3377,22 @@ function Card2({
             subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-[var(--color-muted-foreground)] mt-1", children: subtitle })
           ] }),
           children && /* @__PURE__ */ jsx("div", { className: "text-[var(--color-card-foreground)]", children }),
-          actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--color-border)]", children: actions.map((action, index) => /* @__PURE__ */ jsx(
+          actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--color-border)]", children: actions.map((action2, index) => /* @__PURE__ */ jsx(
             "button",
             {
               onClick: (e) => {
                 e.stopPropagation();
-                action.onClick();
+                if (action2.event) eventBus.emit(`UI:${action2.event}`, { label: action2.label });
+                action2.onClick?.();
               },
-              disabled: action.disabled,
+              disabled: action2.disabled,
               className: `
                   px-3 py-1.5 text-sm font-medium rounded-[var(--radius-sm)]
                   transition-colors
-                  ${action.variant === "primary" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] hover:bg-[var(--color-primary-hover)] disabled:opacity-50" : action.variant === "danger" ? "bg-[var(--color-error)] text-[var(--color-error-foreground)] hover:opacity-90 disabled:opacity-50" : "bg-[var(--color-muted)] text-[var(--color-foreground)] hover:bg-[var(--color-surface-hover)]"}
+                  ${action2.variant === "primary" ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] hover:bg-[var(--color-primary-hover)] disabled:opacity-50" : action2.variant === "danger" ? "bg-[var(--color-error)] text-[var(--color-error-foreground)] hover:opacity-90 disabled:opacity-50" : "bg-[var(--color-muted)] text-[var(--color-foreground)] hover:bg-[var(--color-surface-hover)]"}
                   disabled:cursor-not-allowed
                 `,
-              children: action.label
+              children: action2.label
             },
             index
           )) })
@@ -3418,6 +3541,7 @@ var FloatingActionButton = ({
   position = "bottom-right",
   className
 }) => {
+  const eventBus = useEventBus();
   const resolvedAction = action ?? (icon ? {
     icon: resolveIcon2(icon),
     onClick: onClick ?? (() => {
@@ -3461,7 +3585,8 @@ var FloatingActionButton = ({
   if (actions && actions.length > 0) {
     const handleMainClick = () => {
       if (actions.length === 1) {
-        actions[0].onClick();
+        if (actions[0].event) eventBus.emit(`UI:${actions[0].event}`, { actionId: actions[0].id });
+        actions[0].onClick?.();
       } else {
         setIsExpanded(!isExpanded);
       }
@@ -3503,7 +3628,8 @@ var FloatingActionButton = ({
                         icon: actionItem.icon,
                         onClick: () => {
                           setIsExpanded(false);
-                          actionItem.onClick();
+                          if (actionItem.event) eventBus.emit(`UI:${actionItem.event}`, { actionId: actionItem.id });
+                          actionItem.onClick?.();
                         },
                         className: "rounded-[var(--radius-full)] shadow-[var(--shadow-lg)]",
                         "aria-label": actionItem.label,
@@ -3717,6 +3843,7 @@ var Menu2 = ({
   position = "bottom-left",
   className
 }) => {
+  const eventBus = useEventBus();
   const [isOpen, setIsOpen] = useState(false);
   const [activeSubMenu, setActiveSubMenu] = useState(null);
   const [triggerRect, setTriggerRect] = useState(null);
@@ -3739,6 +3866,7 @@ var Menu2 = ({
     if (item.subMenu && item.subMenu.length > 0) {
       setActiveSubMenu(item.id ?? null);
     } else {
+      if (item.event) eventBus.emit(`UI:${item.event}`, { itemId: item.id, label: item.label });
       item.onClick?.();
       setIsOpen(false);
     }
@@ -3884,8 +4012,10 @@ var Modal = ({
   showCloseButton = true,
   closeOnOverlayClick = true,
   closeOnEscape = true,
-  className
+  className,
+  closeEvent
 }) => {
+  const eventBus = useEventBus();
   const modalRef = useRef(null);
   const previousActiveElement = useRef(null);
   useEffect(() => {
@@ -3903,11 +4033,14 @@ var Modal = ({
   useEffect(() => {
     if (!isOpen || !closeOnEscape) return;
     const handleEscape = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") {
+        if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
+        onClose();
+      }
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
+  }, [isOpen, closeOnEscape, onClose, closeEvent, eventBus]);
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -3919,9 +4052,13 @@ var Modal = ({
     };
   }, [isOpen]);
   if (!isOpen) return null;
+  const handleClose = () => {
+    if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
+    onClose();
+  };
   const handleOverlayClick = (e) => {
     if (closeOnOverlayClick && e.target === e.currentTarget) {
-      onClose();
+      handleClose();
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3963,7 +4100,7 @@ var Modal = ({
                   "button",
                   {
                     type: "button",
-                    onClick: onClose,
+                    onClick: handleClose,
                     className: cn(
                       "p-1 transition-colors rounded-[var(--radius-sm)]",
                       "hover:bg-[var(--color-muted)]"
@@ -4005,13 +4142,24 @@ var Pagination = ({
   showTotal = false,
   totalItems,
   maxVisiblePages = 7,
-  className
+  className,
+  pageChangeEvent,
+  pageSizeChangeEvent
 }) => {
+  const eventBus = useEventBus();
   const [jumpToPage, setJumpToPage] = useState("");
+  const handlePageChange = (page) => {
+    if (pageChangeEvent) eventBus.emit(`UI:${pageChangeEvent}`, { page });
+    onPageChange(page);
+  };
+  const handlePageSizeChange = (size) => {
+    if (pageSizeChangeEvent) eventBus.emit(`UI:${pageSizeChangeEvent}`, { pageSize: size });
+    onPageSizeChange?.(size);
+  };
   const handleJumpToPage = () => {
     const page = parseInt(jumpToPage, 10);
     if (page >= 1 && page <= totalPages) {
-      onPageChange(page);
+      handlePageChange(page);
       setJumpToPage("");
     }
   };
@@ -4060,7 +4208,7 @@ var Pagination = ({
           "select",
           {
             value: pageSize,
-            onChange: (e) => onPageSizeChange(Number(e.target.value)),
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             className: "px-2 py-1 text-sm border-[length:var(--border-width)] border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)] font-medium focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)]",
             children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
           }
@@ -4073,7 +4221,7 @@ var Pagination = ({
         {
           variant: "secondary",
           size: "sm",
-          onClick: () => onPageChange(currentPage - 1),
+          onClick: () => handlePageChange(currentPage - 1),
           disabled: currentPage === 1,
           icon: ChevronLeft,
           children: "Previous"
@@ -4098,7 +4246,7 @@ var Pagination = ({
           {
             variant: isActive ? "primary" : "ghost",
             size: "sm",
-            onClick: () => onPageChange(page),
+            onClick: () => handlePageChange(page),
             className: "min-w-[2.5rem]",
             children: page
           },
@@ -4110,7 +4258,7 @@ var Pagination = ({
         {
           variant: "secondary",
           size: "sm",
-          onClick: () => onPageChange(currentPage + 1),
+          onClick: () => handlePageChange(currentPage + 1),
           disabled: currentPage === totalPages,
           iconRight: ChevronRight,
           children: "Next"
@@ -4551,15 +4699,21 @@ var SidePanel = ({
   width = "w-96",
   position = "right",
   showOverlay = true,
-  className
+  className,
+  closeEvent
 }) => {
+  const eventBus = useEventBus();
+  const handleClose = () => {
+    if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
+    onClose();
+  };
   if (!isOpen) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     showOverlay && /* @__PURE__ */ jsx(
       "div",
       {
         className: "fixed inset-0 bg-white/80 backdrop-blur-sm z-40 lg:hidden",
-        onClick: onClose
+        onClick: handleClose
       }
     ),
     /* @__PURE__ */ jsxs(
@@ -4585,7 +4739,7 @@ var SidePanel = ({
                 variant: "ghost",
                 size: "sm",
                 icon: X,
-                onClick: onClose,
+                onClick: handleClose,
                 "aria-label": "Close panel",
                 children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
               }
@@ -4794,17 +4948,28 @@ var Toast = ({
   actionLabel,
   onAction,
   badge,
-  className
+  className,
+  dismissEvent,
+  actionEvent
 }) => {
+  const eventBus = useEventBus();
+  const handleDismiss = () => {
+    if (dismissEvent) eventBus.emit(`UI:${dismissEvent}`, {});
+    onDismiss?.();
+  };
+  const handleAction = () => {
+    if (actionEvent) eventBus.emit(`UI:${actionEvent}`, {});
+    onAction?.();
+  };
   useEffect(() => {
-    if (duration <= 0 || !onDismiss) {
+    if (duration <= 0 || !onDismiss && !dismissEvent) {
       return;
     }
     const timer = setTimeout(() => {
-      onDismiss();
+      handleDismiss();
     }, duration);
     return () => clearTimeout(timer);
-  }, [duration, onDismiss]);
+  }, [duration, onDismiss, dismissEvent]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -4827,7 +4992,7 @@ var Toast = ({
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           title && /* @__PURE__ */ jsx(Typography, { variant: "h6", className: "mb-1", children: title }),
           /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-sm", children: message }),
-          actionLabel && onAction && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onAction, children: actionLabel }) })
+          actionLabel && (onAction || actionEvent) && /* @__PURE__ */ jsx("div", { className: "mt-3", children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleAction, children: actionLabel }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 flex-shrink-0", children: [
           badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: badge }),
@@ -4835,7 +5000,7 @@ var Toast = ({
             "button",
             {
               type: "button",
-              onClick: onDismiss,
+              onClick: handleDismiss,
               className: cn(
                 "flex-shrink-0 p-1 transition-colors rounded-[var(--radius-sm)]",
                 "hover:bg-[var(--color-muted)]",
@@ -4982,8 +5147,10 @@ var Drawer = ({
   showCloseButton = true,
   closeOnOverlayClick = true,
   closeOnEscape = true,
-  className
+  className,
+  closeEvent
 }) => {
+  const eventBus = useEventBus();
   const drawerRef = useRef(null);
   const previousActiveElement = useRef(null);
   useEffect(() => {
@@ -5002,12 +5169,13 @@ var Drawer = ({
     if (!isOpen || !closeOnEscape) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
+        if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
       }
     };
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
+  }, [isOpen, closeOnEscape, onClose, closeEvent, eventBus]);
   useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
@@ -5019,9 +5187,13 @@ var Drawer = ({
     };
   }, [isOpen]);
   if (!isOpen) return null;
+  const handleClose = () => {
+    if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
+    onClose();
+  };
   const handleOverlayClick = (e) => {
     if (closeOnOverlayClick && e.target === e.currentTarget) {
-      onClose();
+      handleClose();
     }
   };
   const widthClass = width in sizeWidths ? sizeWidths[width] : "";
@@ -5070,7 +5242,7 @@ var Drawer = ({
                   "button",
                   {
                     type: "button",
-                    onClick: onClose,
+                    onClick: handleClose,
                     className: cn(
                       "p-1 transition-colors rounded-[var(--radius-sm)]",
                       "hover:bg-[var(--color-muted)]",
@@ -5130,13 +5302,16 @@ var WizardProgress = ({
   onStepClick,
   allowNavigation = true,
   compact = false,
-  className
+  className,
+  stepClickEvent
 }) => {
+  const eventBus = useEventBus();
   const totalSteps = steps.length;
   const handleStepClick = (index) => {
     const isCompleted = index < currentStep;
-    if (isCompleted && allowNavigation && onStepClick) {
-      onStepClick(index);
+    if (isCompleted && allowNavigation) {
+      if (stepClickEvent) eventBus.emit(`UI:${stepClickEvent}`, { stepIndex: index });
+      onStepClick?.(index);
     }
   };
   return /* @__PURE__ */ jsx(
@@ -10035,6 +10210,11 @@ function IsometricCanvas({
   onUnitClick,
   onTileHover,
   onTileLeave,
+  // Declarative event props
+  tileClickEvent,
+  unitClickEvent,
+  tileHoverEvent,
+  tileLeaveEvent,
   // Rendering options
   scale = 0.4,
   debug: debug2 = false,
@@ -10054,6 +10234,7 @@ function IsometricCanvas({
   assetBaseUrl,
   assetManifest
 }) {
+  const eventBus = useEventBus();
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   const minimapRef = useRef(null);
@@ -10590,20 +10771,22 @@ function IsometricCanvas({
       const wasPanning = handleMouseMove(e, () => draw(animTimeRef.current));
       if (wasPanning) return;
     }
-    if (!onTileHover || !canvasRef.current) return;
+    if (!onTileHover && !tileHoverEvent || !canvasRef.current) return;
     const world = screenToWorld(e.clientX, e.clientY, canvasRef.current, viewportSize);
     const adjustedX = world.x - scaledTileWidth / 2;
     const adjustedY = world.y - (scaledTileHeight - scaledFloorHeight) - scaledFloorHeight / 2;
     const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
     const tileExists = tilesProp.some((t) => t.x === isoPos.x && t.y === isoPos.y);
     if (tileExists) {
-      onTileHover(isoPos.x, isoPos.y);
+      if (tileHoverEvent) eventBus.emit(`UI:${tileHoverEvent}`, { x: isoPos.x, y: isoPos.y });
+      onTileHover?.(isoPos.x, isoPos.y);
     }
-  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, tilesProp]);
+  }, [enableCamera, handleMouseMove, draw, onTileHover, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, tilesProp, tileHoverEvent, eventBus]);
   const handleMouseLeaveWithCamera = useCallback(() => {
     handleMouseLeave();
+    if (tileLeaveEvent) eventBus.emit(`UI:${tileLeaveEvent}`, {});
     onTileLeave?.();
-  }, [handleMouseLeave, onTileLeave]);
+  }, [handleMouseLeave, onTileLeave, tileLeaveEvent, eventBus]);
   const handleWheelWithCamera = useCallback((e) => {
     if (enableCamera) {
       handleWheel(e, () => draw(animTimeRef.current));
@@ -10617,15 +10800,17 @@ function IsometricCanvas({
     const adjustedY = world.y - (scaledTileHeight - scaledFloorHeight) - scaledFloorHeight / 2;
     const isoPos = screenToIso(adjustedX, adjustedY, scale, baseOffsetX);
     const clickedUnit = units.find((u) => u.position.x === isoPos.x && u.position.y === isoPos.y);
-    if (clickedUnit && onUnitClick) {
-      onUnitClick(clickedUnit.id);
-    } else if (onTileClick) {
+    if (clickedUnit && (onUnitClick || unitClickEvent)) {
+      if (unitClickEvent) eventBus.emit(`UI:${unitClickEvent}`, { unitId: clickedUnit.id });
+      onUnitClick?.(clickedUnit.id);
+    } else if (onTileClick || tileClickEvent) {
       const tileExists = tilesProp.some((t) => t.x === isoPos.x && t.y === isoPos.y);
       if (tileExists) {
-        onTileClick(isoPos.x, isoPos.y);
+        if (tileClickEvent) eventBus.emit(`UI:${tileClickEvent}`, { x: isoPos.x, y: isoPos.y });
+        onTileClick?.(isoPos.x, isoPos.y);
       }
     }
-  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick]);
+  }, [dragDistance, screenToWorld, viewportSize, scaledTileWidth, scaledTileHeight, scaledFloorHeight, scale, baseOffsetX, units, tilesProp, onUnitClick, onTileClick, unitClickEvent, tileClickEvent, eventBus]);
   if (error) {
     return /* @__PURE__ */ jsx(ErrorState, { title: "Canvas Error", message: error.message, className });
   }
@@ -11897,10 +12082,17 @@ function EmojiEffect({
   );
 }
 function CanvasEffect(props) {
+  const eventBus = useEventBus();
+  const { completeEvent, onComplete, ...rest } = props;
+  const handleComplete = useCallback(() => {
+    if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
+    onComplete?.();
+  }, [completeEvent, eventBus, onComplete]);
+  const enhancedProps = { ...rest, onComplete: handleComplete };
   if (props.assetManifest) {
-    return /* @__PURE__ */ jsx(CanvasEffectEngine, { ...props, assetManifest: props.assetManifest });
+    return /* @__PURE__ */ jsx(CanvasEffectEngine, { ...enhancedProps, assetManifest: props.assetManifest });
   }
-  return /* @__PURE__ */ jsx(EmojiEffect, { ...props });
+  return /* @__PURE__ */ jsx(EmojiEffect, { ...enhancedProps });
 }
 CanvasEffect.displayName = "CanvasEffect";
 
@@ -12465,10 +12657,14 @@ function InventoryPanel({
   onSelectSlot,
   onUseItem,
   onDropItem,
+  selectSlotEvent,
+  useItemEvent,
+  dropItemEvent,
   showTooltips = true,
   className,
   slotSize = 48
 }) {
+  const eventBus = useEventBus();
   const [hoveredSlot, setHoveredSlot] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const slotArray = Array.from({ length: slots }, (_, index) => {
@@ -12476,49 +12672,53 @@ function InventoryPanel({
   });
   const rows = Math.ceil(slots / columns);
   const handleSlotClick = useCallback((index) => {
-    onSelectSlot(index);
-  }, [onSelectSlot]);
+    if (selectSlotEvent) eventBus.emit(`UI:${selectSlotEvent}`, { index });
+    onSelectSlot?.(index);
+  }, [onSelectSlot, selectSlotEvent, eventBus]);
   const handleSlotDoubleClick = useCallback((index) => {
     const item = slotArray[index];
-    if (item && onUseItem) {
-      onUseItem(item);
+    if (item) {
+      if (useItemEvent) eventBus.emit(`UI:${useItemEvent}`, { item });
+      onUseItem?.(item);
     }
-  }, [slotArray, onUseItem]);
+  }, [slotArray, onUseItem, useItemEvent, eventBus]);
   const handleKeyDown = useCallback((e, index) => {
     const item = slotArray[index];
     switch (e.key) {
       case "Enter":
       case " ":
-        if (item && onUseItem) {
+        if (item) {
           e.preventDefault();
-          onUseItem(item);
+          if (useItemEvent) eventBus.emit(`UI:${useItemEvent}`, { item });
+          onUseItem?.(item);
         }
         break;
       case "Delete":
       case "Backspace":
-        if (item && onDropItem) {
+        if (item) {
           e.preventDefault();
-          onDropItem(item);
+          if (dropItemEvent) eventBus.emit(`UI:${dropItemEvent}`, { item });
+          onDropItem?.(item);
         }
         break;
       case "ArrowRight":
         e.preventDefault();
-        onSelectSlot(Math.min(index + 1, slots - 1));
+        onSelectSlot?.(Math.min(index + 1, slots - 1));
         break;
       case "ArrowLeft":
         e.preventDefault();
-        onSelectSlot(Math.max(index - 1, 0));
+        onSelectSlot?.(Math.max(index - 1, 0));
         break;
       case "ArrowDown":
         e.preventDefault();
-        onSelectSlot(Math.min(index + columns, slots - 1));
+        onSelectSlot?.(Math.min(index + columns, slots - 1));
         break;
       case "ArrowUp":
         e.preventDefault();
-        onSelectSlot(Math.max(index - columns, 0));
+        onSelectSlot?.(Math.max(index - columns, 0));
         break;
     }
-  }, [slotArray, onUseItem, onDropItem, onSelectSlot, columns, slots]);
+  }, [slotArray, onUseItem, onDropItem, onSelectSlot, columns, slots, useItemEvent, dropItemEvent, eventBus]);
   const handleMouseEnter = useCallback((e, index) => {
     if (showTooltips && slotArray[index]) {
       setHoveredSlot(index);
@@ -12604,8 +12804,12 @@ function DialogueBox({
   onComplete,
   onChoice,
   onAdvance,
+  completeEvent,
+  choiceEvent,
+  advanceEvent,
   className
 }) {
+  const eventBus = useEventBus();
   const [displayedText, setDisplayedText] = useState("");
   const [isTyping, setIsTyping] = useState(false);
   const [selectedChoice, setSelectedChoice] = useState(0);
@@ -12620,6 +12824,7 @@ function DialogueBox({
     if (typewriterSpeed === 0) {
       setDisplayedText(dialogue.text);
       setIsTyping(false);
+      if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
       onComplete?.();
     } else {
       setIsTyping(true);
@@ -12639,9 +12844,11 @@ function DialogueBox({
       } else {
         setIsTyping(false);
         clearInterval(interval);
+        if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
         onComplete?.();
         if (dialogue.autoAdvance && !dialogue.choices?.length) {
           autoAdvanceTimerRef.current = setTimeout(() => {
+            if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
             onAdvance?.();
           }, dialogue.autoAdvance);
         }
@@ -12654,16 +12861,18 @@ function DialogueBox({
       charIndexRef.current = textRef.current.length;
       setDisplayedText(textRef.current);
       setIsTyping(false);
+      if (completeEvent) eventBus.emit(`UI:${completeEvent}`, {});
       onComplete?.();
     }
-  }, [isTyping, onComplete]);
+  }, [isTyping, onComplete, completeEvent, eventBus]);
   const handleClick = useCallback(() => {
     if (isTyping) {
       skipTypewriter();
     } else if (!dialogue.choices?.length) {
+      if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
       onAdvance?.();
     }
-  }, [isTyping, skipTypewriter, dialogue.choices, onAdvance]);
+  }, [isTyping, skipTypewriter, dialogue.choices, onAdvance, advanceEvent, eventBus]);
   const handleKeyDown = useCallback((e) => {
     if (isTyping) {
       if (e.key === " " || e.key === "Enter") {
@@ -12688,6 +12897,7 @@ function DialogueBox({
           e.preventDefault();
           const choice = enabledChoices2[selectedChoice];
           if (choice) {
+            if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice });
             onChoice?.(choice);
           }
           break;
@@ -12698,6 +12908,7 @@ function DialogueBox({
           const choiceIndex = parseInt(e.key) - 1;
           if (choiceIndex < enabledChoices2.length) {
             e.preventDefault();
+            if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice: enabledChoices2[choiceIndex] });
             onChoice?.(enabledChoices2[choiceIndex]);
           }
           break;
@@ -12705,10 +12916,11 @@ function DialogueBox({
     } else {
       if (e.key === " " || e.key === "Enter") {
         e.preventDefault();
+        if (advanceEvent) eventBus.emit(`UI:${advanceEvent}`, {});
         onAdvance?.();
       }
     }
-  }, [isTyping, skipTypewriter, dialogue.choices, selectedChoice, onChoice, onAdvance]);
+  }, [isTyping, skipTypewriter, dialogue.choices, selectedChoice, onChoice, onAdvance, choiceEvent, advanceEvent, eventBus]);
   const enabledChoices = dialogue.choices?.filter((c) => !c.disabled) ?? [];
   return /* @__PURE__ */ jsx(
     "div",
@@ -12750,6 +12962,7 @@ function DialogueBox({
               ),
               onClick: (e) => {
                 e.stopPropagation();
+                if (choiceEvent) eventBus.emit(`UI:${choiceEvent}`, { choice });
                 onChoice?.(choice);
               },
               children: [