@almadar/ui 2.2.0 → 2.5.0

package/dist/{chunk-CC3UOKHI.js → chunk-FYYU3CHN.js}

@@ -1,13 +1,14 @@
-import { useTheme, useUISlots } from './chunk-DKQN5FVU.js';
+import { useTheme, useUISlots } from './chunk-YLKXEXBP.js';
 import { useTranslate, useQuerySingleton } from './chunk-GOZKH7QW.js';
 import { useEventBus } from './chunk-YXZM3WCF.js';
 import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from './chunk-KKCVDUK7.js';
+import { isPortalSlot } from './chunk-K2D5D3WK.js';
 import { __publicField } from './chunk-PKBMQBKP.js';
-import * as React41 from 'react';
-import React41__default, { useCallback, useRef, useState, useLayoutEffect, useEffect, createContext, useMemo, useContext, Suspense } from 'react';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, ChevronDown, X, Check, Copy, AlertCircle, User, Sun, Moon, FileQuestion, Inbox, Search, Info, XCircle, CheckCircle, AlertTriangle, ChevronRight, Filter, Plus, ChevronLeft, HelpCircle, ChevronUp, MoreHorizontal, TrendingUp, TrendingDown, Minus, ArrowLeft, Calendar, Tag, Clock, CheckCircle2, DollarSign, FileText, Package } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React50 from 'react';
+import React50__default, { useCallback, useRef, useState, useLayoutEffect, useEffect, lazy, createContext, useMemo, useId, useContext, Suspense } from 'react';
 import { evaluate, createMinimalContext } from '@almadar/evaluator';
 import { createPortal } from 'react-dom';
 import ReactMarkdown from 'react-markdown';
@@ -16,7 +17,88 @@ import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism';
 import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
 
+var iconAliases = {
+  "close": LucideIcons.X,
+  "trash": LucideIcons.Trash2,
+  "loader": LucideIcons.Loader2,
+  "stop": LucideIcons.Square,
+  "volume": LucideIcons.Volume2,
+  "volume-off": LucideIcons.VolumeX,
+  "refresh": LucideIcons.RefreshCw,
+  "share": LucideIcons.Share2,
+  "sort-asc": LucideIcons.ArrowUpNarrowWide,
+  "sort-desc": LucideIcons.ArrowDownNarrowWide
+};
+function kebabToPascal(name) {
+  return name.split("-").map((part) => {
+    if (/^\d+$/.test(part)) return part;
+    return part.charAt(0).toUpperCase() + part.slice(1);
+  }).join("");
+}
+var resolvedCache = /* @__PURE__ */ new Map();
+function resolveIcon(name) {
+  const cached = resolvedCache.get(name);
+  if (cached) return cached;
+  const resolved = doResolve(name);
+  resolvedCache.set(name, resolved);
+  return resolved;
+}
+function doResolve(name) {
+  if (iconAliases[name]) return iconAliases[name];
+  const pascalName = kebabToPascal(name);
+  const directLookup = LucideIcons[pascalName];
+  if (directLookup && typeof directLookup === "object") return directLookup;
+  const asIs = LucideIcons[name];
+  if (asIs && typeof asIs === "object") return asIs;
+  return LucideIcons.HelpCircle;
+}
+var sizeClasses = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8"
+};
+var animationClasses = {
+  none: "",
+  spin: "animate-spin",
+  pulse: "animate-pulse"
+};
+var Icon = ({
+  icon,
+  name,
+  size = "md",
+  color,
+  animation = "none",
+  className,
+  strokeWidth,
+  style
+}) => {
+  const IconComponent = icon ?? (name ? resolveIcon(name) : LucideIcons.HelpCircle);
+  const effectiveStrokeWidth = strokeWidth ?? void 0;
+  return /* @__PURE__ */ jsx(
+    IconComponent,
+    {
+      className: cn(
+        sizeClasses[size],
+        animationClasses[animation],
+        // Use theme's icon color or provided color
+        color ? color : "text-[var(--icon-color,currentColor)]",
+        className
+      ),
+      strokeWidth: effectiveStrokeWidth,
+      style: {
+        ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
+        ...style
+      }
+    }
+  );
+};
+Icon.displayName = "Icon";
 var variantStyles = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
@@ -75,7 +157,7 @@ var iconSizeStyles = {
   md: "h-4 w-4",
   lg: "h-5 w-5"
 };
-var Button = React41__default.forwardRef(
+var Button = React50__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -84,8 +166,8 @@ var Button = React41__default.forwardRef(
     disabled,
     leftIcon,
     rightIcon,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
+    icon: iconProp,
+    iconRight: iconRightProp,
     action,
     actionPayload,
     label,
@@ -94,6 +176,8 @@ var Button = React41__default.forwardRef(
     ...props
   }, ref) => {
     const eventBus = useEventBus();
+    const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
+    const IconRightComponent = typeof iconRightProp === "string" ? resolveIcon(iconRightProp) : iconRightProp;
     const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: iconSizeStyles[size] });
     const resolvedRightIcon = rightIcon || IconRightComponent && /* @__PURE__ */ jsx(IconRightComponent, { className: iconSizeStyles[size] });
     const handleClick = (e) => {
@@ -120,6 +204,7 @@ var Button = React41__default.forwardRef(
         ),
         onClick: handleClick,
         ...props,
+        "data-testid": props["data-testid"] ?? (action ? `action-${action}` : void 0),
         children: [
           isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
           children || label,
@@ -130,7 +215,7 @@ var Button = React41__default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React41__default.forwardRef(
+var Input = React50__default.forwardRef(
   ({
     className,
     inputType,
@@ -242,7 +327,7 @@ var Input = React41__default.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Label = React41__default.forwardRef(
+var Label = React50__default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "label",
@@ -262,7 +347,7 @@ var Label = React41__default.forwardRef(
   }
 );
 Label.displayName = "Label";
-var Textarea = React41__default.forwardRef(
+var Textarea = React50__default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -285,7 +370,7 @@ var Textarea = React41__default.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Select = React41__default.forwardRef(
+var Select = React50__default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxs(
@@ -321,7 +406,7 @@ var Select = React41__default.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React41__default.forwardRef(
+var Checkbox = React50__default.forwardRef(
   ({ className, label, id, ...props }, ref) => {
     const inputId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -387,7 +472,7 @@ var shadowStyles = {
   md: "shadow-[var(--shadow-main)]",
   lg: "shadow-[var(--shadow-lg)]"
 };
-var Card = React41__default.forwardRef(
+var Card = React50__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -423,9 +508,9 @@ var Card = React41__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React41__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React41__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -438,11 +523,11 @@ var CardTitle = React41__default.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React41__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React41__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -488,19 +573,28 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React41__default.forwardRef(
-  ({ className, variant = "default", size = "sm", ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+var Badge = React50__default.forwardRef(
+  ({ className, variant = "default", size = "sm", label, icon, children, ...props }, ref) => {
+    const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
+    const resolvedIcon = typeof icon === "string" ? (() => {
+      const I = resolveIcon(icon);
+      return I ? /* @__PURE__ */ jsx(I, { className: iconSizes2[size] }) : null;
+    })() : icon;
+    return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         className: cn(
-          "inline-flex items-center font-bold rounded-[var(--radius-sm)]",
+          "inline-flex items-center gap-1 font-bold rounded-[var(--radius-sm)]",
           variantStyles3[variant],
           sizeStyles2[size],
           className
         ),
-        ...props
+        ...props,
+        children: [
+          resolvedIcon,
+          children || label
+        ]
       }
     );
   }
@@ -512,7 +606,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React41__default.forwardRef(
+var Spinner = React50__default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -526,7 +620,7 @@ var Spinner = React41__default.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var sizeClasses = {
+var sizeClasses2 = {
   xs: "w-6 h-6 text-xs",
   sm: "w-8 h-8 text-sm",
   md: "w-10 h-10 text-base",
@@ -602,7 +696,7 @@ var Avatar = ({
           "relative inline-flex items-center justify-center",
           "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
           "overflow-hidden",
-          sizeClasses[size],
+          sizeClasses2[size],
           isClickable && "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
           className
         ),
@@ -777,7 +871,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React41__default.forwardRef(
+var Box = React50__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -969,157 +1063,6 @@ var Divider = ({
   );
 };
 Divider.displayName = "Divider";
-var iconMap = {
-  // Navigation & Actions
-  "chevron-right": LucideIcons.ChevronRight,
-  "chevron-left": LucideIcons.ChevronLeft,
-  "chevron-down": LucideIcons.ChevronDown,
-  "chevron-up": LucideIcons.ChevronUp,
-  "arrow-right": LucideIcons.ArrowRight,
-  "arrow-left": LucideIcons.ArrowLeft,
-  "arrow-up": LucideIcons.ArrowUp,
-  "arrow-down": LucideIcons.ArrowDown,
-  "x": LucideIcons.X,
-  "close": LucideIcons.X,
-  "menu": LucideIcons.Menu,
-  "more-vertical": LucideIcons.MoreVertical,
-  "more-horizontal": LucideIcons.MoreHorizontal,
-  // Status & Feedback
-  "check": LucideIcons.Check,
-  "check-circle": LucideIcons.CheckCircle,
-  "alert-circle": LucideIcons.AlertCircle,
-  "alert-triangle": LucideIcons.AlertTriangle,
-  "info": LucideIcons.Info,
-  "help-circle": LucideIcons.HelpCircle,
-  "loader": LucideIcons.Loader2,
-  // CRUD Operations
-  "plus": LucideIcons.Plus,
-  "minus": LucideIcons.Minus,
-  "edit": LucideIcons.Edit,
-  "pencil": LucideIcons.Pencil,
-  "trash": LucideIcons.Trash2,
-  "trash-2": LucideIcons.Trash2,
-  "save": LucideIcons.Save,
-  "copy": LucideIcons.Copy,
-  "clipboard": LucideIcons.Clipboard,
-  // Files & Documents
-  "file": LucideIcons.File,
-  "file-text": LucideIcons.FileText,
-  "folder": LucideIcons.Folder,
-  "folder-open": LucideIcons.FolderOpen,
-  "download": LucideIcons.Download,
-  "upload": LucideIcons.Upload,
-  "image": LucideIcons.Image,
-  // Communication
-  "mail": LucideIcons.Mail,
-  "message-circle": LucideIcons.MessageCircle,
-  "send": LucideIcons.Send,
-  "phone": LucideIcons.Phone,
-  // User & Profile
-  "user": LucideIcons.User,
-  "users": LucideIcons.Users,
-  "user-plus": LucideIcons.UserPlus,
-  "settings": LucideIcons.Settings,
-  "log-out": LucideIcons.LogOut,
-  "log-in": LucideIcons.LogIn,
-  // Search & Filter
-  "search": LucideIcons.Search,
-  "filter": LucideIcons.Filter,
-  "sort-asc": LucideIcons.ArrowUpNarrowWide,
-  "sort-desc": LucideIcons.ArrowDownNarrowWide,
-  // Layout & View
-  "grid": LucideIcons.Grid,
-  "list": LucideIcons.List,
-  "layout": LucideIcons.Layout,
-  "maximize": LucideIcons.Maximize,
-  "minimize": LucideIcons.Minimize,
-  "eye": LucideIcons.Eye,
-  "eye-off": LucideIcons.EyeOff,
-  // Media & Playback
-  "play": LucideIcons.Play,
-  "pause": LucideIcons.Pause,
-  "stop": LucideIcons.Square,
-  "volume": LucideIcons.Volume2,
-  "volume-off": LucideIcons.VolumeX,
-  // Time & Calendar
-  "calendar": LucideIcons.Calendar,
-  "clock": LucideIcons.Clock,
-  // Misc
-  "star": LucideIcons.Star,
-  "heart": LucideIcons.Heart,
-  "home": LucideIcons.Home,
-  "link": LucideIcons.Link,
-  "external-link": LucideIcons.ExternalLink,
-  "refresh": LucideIcons.RefreshCw,
-  "refresh-cw": LucideIcons.RefreshCw,
-  "zap": LucideIcons.Zap,
-  "bell": LucideIcons.Bell,
-  "bookmark": LucideIcons.Bookmark,
-  "share": LucideIcons.Share2,
-  "lock": LucideIcons.Lock,
-  "unlock": LucideIcons.Unlock,
-  "globe": LucideIcons.Globe,
-  "database": LucideIcons.Database,
-  "code": LucideIcons.Code,
-  "terminal": LucideIcons.Terminal
-};
-function resolveIcon(name) {
-  if (iconMap[name]) {
-    return iconMap[name];
-  }
-  const lowerName = name.toLowerCase();
-  if (iconMap[lowerName]) {
-    return iconMap[lowerName];
-  }
-  const kebabName = name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-  if (iconMap[kebabName]) {
-    return iconMap[kebabName];
-  }
-  return LucideIcons.HelpCircle;
-}
-var sizeClasses2 = {
-  xs: "w-3 h-3",
-  sm: "w-4 h-4",
-  md: "w-5 h-5",
-  lg: "w-6 h-6",
-  xl: "w-8 h-8"
-};
-var animationClasses = {
-  none: "",
-  spin: "animate-spin",
-  pulse: "animate-pulse"
-};
-var Icon = ({
-  icon,
-  name,
-  size = "md",
-  color,
-  animation = "none",
-  className,
-  strokeWidth,
-  style
-}) => {
-  const IconComponent = icon ?? (name ? resolveIcon(name) : LucideIcons.HelpCircle);
-  const effectiveStrokeWidth = strokeWidth ?? void 0;
-  return /* @__PURE__ */ jsx(
-    IconComponent,
-    {
-      className: cn(
-        sizeClasses2[size],
-        animationClasses[animation],
-        // Use theme's icon color or provided color
-        color ? color : "text-[var(--icon-color,currentColor)]",
-        className
-      ),
-      strokeWidth: effectiveStrokeWidth,
-      style: {
-        ...effectiveStrokeWidth === void 0 ? { strokeWidth: "var(--icon-stroke-width, 2)" } : {},
-        ...style
-      }
-    }
-  );
-};
-Icon.displayName = "Icon";
 var colorClasses = {
   default: "bg-[var(--color-primary)]",
   primary: "bg-[var(--color-primary)]",
@@ -1273,7 +1216,7 @@ var ProgressBar = ({
   return null;
 };
 ProgressBar.displayName = "ProgressBar";
-var Radio = React41__default.forwardRef(
+var Radio = React50__default.forwardRef(
   ({
     label,
     helperText,
@@ -1377,7 +1320,7 @@ var Radio = React41__default.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React41.forwardRef(
+var Switch = React50.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -1388,10 +1331,10 @@ var Switch = React41.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React41.useState(
+    const [isChecked, setIsChecked] = React50.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React41.useEffect(() => {
+    React50.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -1626,6 +1569,8 @@ var variantStyles5 = {
   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)]",
@@ -1658,6 +1603,8 @@ var defaultElements = {
   h4: "h4",
   h5: "h5",
   h6: "h6",
+  heading: "h2",
+  subheading: "h3",
   body1: "p",
   body2: "p",
   body: "p",
@@ -1951,7 +1898,7 @@ var Overlay = ({
   isVisible = true,
   onClick,
   className,
-  blur = true,
+  blur = false,
   action
 }) => {
   const eventBus = useEventBus();
@@ -1966,7 +1913,7 @@ var Overlay = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-40 bg-[var(--color-background)]/80",
+        "fixed inset-0 z-40 bg-black/50",
         blur && "backdrop-blur-sm",
         className
       ),
@@ -1975,6 +1922,33 @@ var Overlay = ({
     }
   );
 };
+var FlipContainer = ({
+  flipped,
+  className,
+  children,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn("relative w-full cursor-pointer", className),
+      style: { perspective: "1000px" },
+      onClick,
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: "relative w-full h-full transition-transform duration-500",
+          style: {
+            transformStyle: "preserve-3d",
+            transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)"
+          },
+          children
+        }
+      )
+    }
+  );
+};
+FlipContainer.displayName = "FlipContainer";
 function toSharedContext(ctx) {
   return createMinimalContext(
     {
@@ -2031,8 +2005,8 @@ var LawReferenceTooltip = ({
   position = "top",
   className
 }) => {
-  const [isVisible, setIsVisible] = React41__default.useState(false);
-  const timeoutRef = React41__default.useRef(null);
+  const [isVisible, setIsVisible] = React50__default.useState(false);
+  const timeoutRef = React50__default.useRef(null);
   const handleMouseEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -2041,7 +2015,7 @@ var LawReferenceTooltip = ({
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
-  React41__default.useEffect(() => {
+  React50__default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -2135,6 +2109,79 @@ var LawReferenceTooltip = ({
   );
 };
 LawReferenceTooltip.displayName = "LawReferenceTooltip";
+var DAY_ABBREVIATIONS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function DayCell({
+  date,
+  isToday = false,
+  onClick,
+  className
+}) {
+  const handleClick = useCallback(() => {
+    onClick?.(date);
+  }, [onClick, date]);
+  const dayAbbr = DAY_ABBREVIATIONS[date.getDay()];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn(
+        "p-2 text-center cursor-pointer hover:bg-[var(--color-muted)] transition-colors",
+        isToday && "bg-blue-500/10",
+        className
+      ),
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "small",
+            className: cn(
+              "font-medium",
+              isToday ? "text-blue-600" : "text-[var(--color-muted-foreground)]"
+            ),
+            children: dayAbbr
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            display: "flex",
+            rounded: "full",
+            className: cn(
+              "h-8 w-8 mx-auto items-center justify-center",
+              isToday && "bg-blue-600 text-white"
+            ),
+            children: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "font-semibold", children: date.getDate() })
+          }
+        )
+      ]
+    }
+  );
+}
+DayCell.displayName = "DayCell";
+function TimeSlotCell({
+  time,
+  onClick,
+  className,
+  children,
+  isOccupied = false
+}) {
+  const handleClick = useCallback(() => {
+    onClick?.(time);
+  }, [onClick, time]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn(
+        "p-1 min-h-[60px] cursor-pointer hover:bg-[var(--color-muted)] transition-colors",
+        isOccupied && "bg-[var(--color-muted)]/30",
+        className
+      ),
+      onClick: handleClick,
+      children
+    }
+  );
+}
+TimeSlotCell.displayName = "TimeSlotCell";
 var heartIcon = (filled, size) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -2217,9 +2264,9 @@ function ScoreDisplay({
   animated = true,
   locale = "en-US"
 }) {
-  const [displayValue, setDisplayValue] = React41.useState(value);
-  const [isAnimating, setIsAnimating] = React41.useState(false);
-  React41.useEffect(() => {
+  const [displayValue, setDisplayValue] = React50.useState(value);
+  const [isAnimating, setIsAnimating] = React50.useState(false);
+  React50.useEffect(() => {
     if (!animated || displayValue === value) {
       setDisplayValue(value);
       return;
@@ -2292,9 +2339,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React41.useState(false);
+  const [isPressed, setIsPressed] = React50.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React41.useCallback(
+  const handlePointerDown = React50.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -2304,7 +2351,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React41.useCallback(
+  const handlePointerUp = React50.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -2314,7 +2361,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React41.useCallback(
+  const handlePointerLeave = React50.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -2542,7 +2589,7 @@ var ErrorState = ({
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React41__default.Component {
+var ErrorBoundary = class extends React50__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -2946,7 +2993,7 @@ var variantIconColors = {
   warning: "text-[var(--color-warning)]",
   error: "text-[var(--color-error)]"
 };
-var iconMap2 = {
+var iconMap = {
   info: Info,
   success: CheckCircle,
   warning: AlertTriangle,
@@ -2985,7 +3032,7 @@ var Alert = ({
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
           Icon,
           {
-            icon: iconMap2[variant],
+            icon: iconMap[variant],
             size: "md",
             className: variantIconColors[variant]
           }
@@ -3997,7 +4044,7 @@ function getColsClass(cols) {
   }
   return classes.join(" ");
 }
-var Grid2 = ({
+var Grid = ({
   cols = 1,
   rows,
   gap = "md",
@@ -4034,7 +4081,7 @@ var Grid2 = ({
     }
   );
 };
-Grid2.displayName = "Grid";
+Grid.displayName = "Grid";
 var InputGroup = ({
   leftAddon,
   rightAddon,
@@ -4089,7 +4136,7 @@ var InputGroup = ({
   ] });
 };
 InputGroup.displayName = "InputGroup";
-var Menu2 = ({
+var Menu = ({
   trigger,
   items,
   position = "bottom-left",
@@ -4150,8 +4197,8 @@ var Menu2 = ({
     "bottom-start": "top-full left-0 mt-2",
     "bottom-end": "top-full right-0 mt-2"
   };
-  const triggerChild = React41__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
-  const triggerElement = React41__default.cloneElement(
+  const triggerChild = React50__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
+  const triggerElement = React50__default.cloneElement(
     triggerChild,
     {
       ref: triggerRef,
@@ -4247,7 +4294,7 @@ var Menu2 = ({
     )
   ] });
 };
-Menu2.displayName = "Menu";
+Menu.displayName = "Menu";
 var sizeClasses4 = {
   sm: "max-w-md",
   md: "max-w-lg",
@@ -4355,6 +4402,7 @@ var Modal = ({
                   {
                     type: "button",
                     onClick: handleClose,
+                    "data-event": "CLOSE",
                     className: cn(
                       "p-1 transition-colors rounded-[var(--radius-sm)]",
                       "hover:bg-[var(--color-muted)]"
@@ -4612,8 +4660,8 @@ var Popover = ({
     onMouseEnter: handleOpen,
     onMouseLeave: handleClose
   };
-  const childElement = React41__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const triggerElement = React41__default.cloneElement(
+  const childElement = React50__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const triggerElement = React50__default.cloneElement(
     childElement,
     {
       ref: triggerRef,
@@ -5193,7 +5241,7 @@ var variantClasses = {
   info: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-info)]",
   warning: "bg-[var(--color-card)] border-[length:var(--border-width)] border-[var(--color-warning)]"
 };
-var iconMap3 = {
+var iconMap2 = {
   success: CheckCircle,
   error: AlertCircle,
   info: Info,
@@ -5251,7 +5299,7 @@ var Toast = ({
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
           Icon,
           {
-            icon: iconMap3[variant],
+            icon: iconMap2[variant],
             size: "md",
             className: iconColors[variant]
           }
@@ -5343,8 +5391,8 @@ var Tooltip = ({
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const triggerElement = React41__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const trigger = React41__default.cloneElement(triggerElement, {
+  const triggerElement = React50__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const trigger = React50__default.cloneElement(triggerElement, {
     ref: triggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -5593,7 +5641,7 @@ var WizardProgress = ({
       children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: steps.map((step, index) => {
         const isActive = index === currentStep;
         const isCompleted = index < currentStep;
-        return /* @__PURE__ */ jsxs(React41__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React50__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -5723,7 +5771,7 @@ var WizardNavigation = ({
   );
 };
 WizardNavigation.displayName = "WizardNavigation";
-var MarkdownContent = React41__default.memo(
+var MarkdownContent = React50__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     return /* @__PURE__ */ jsx(
@@ -5824,7 +5872,7 @@ var MarkdownContent = React41__default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
-var CodeBlock = React41__default.memo(
+var CodeBlock = React50__default.memo(
   ({
     code,
     language = "text",
@@ -6049,6 +6097,156 @@ var ScaledDiagram = ({
   );
 };
 ScaledDiagram.displayName = "ScaledDiagram";
+function getStartOfWeek(date) {
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+  d.setDate(diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+function getWeekDays(start) {
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(start);
+    day.setDate(start.getDate() + i);
+    days.push(day);
+  }
+  return days;
+}
+function generateDefaultTimeSlots() {
+  const slots = [];
+  for (let hour = 9; hour <= 17; hour++) {
+    slots.push(`${hour.toString().padStart(2, "0")}:00`);
+  }
+  return slots;
+}
+function eventInSlot(event, day, slotTime) {
+  const eventStart = new Date(event.startTime);
+  const [slotHour, slotMinute] = slotTime.split(":").map(Number);
+  return eventStart.toDateString() === day.toDateString() && eventStart.getHours() === slotHour && eventStart.getMinutes() === slotMinute;
+}
+function CalendarGrid({
+  weekStart,
+  timeSlots,
+  events = [],
+  onSlotClick,
+  onDayClick,
+  onEventClick,
+  className
+}) {
+  const resolvedWeekStart = useMemo(
+    () => weekStart ? getStartOfWeek(weekStart) : getStartOfWeek(/* @__PURE__ */ new Date()),
+    [weekStart]
+  );
+  const weekDays = useMemo(
+    () => getWeekDays(resolvedWeekStart),
+    [resolvedWeekStart]
+  );
+  const resolvedTimeSlots = useMemo(
+    () => timeSlots ?? generateDefaultTimeSlots(),
+    [timeSlots]
+  );
+  const handleSlotClick = useCallback(
+    (day, time) => {
+      onSlotClick?.(day, time);
+    },
+    [onSlotClick]
+  );
+  const handleEventClick = useCallback(
+    (event, e) => {
+      e.stopPropagation();
+      onEventClick?.(event);
+    },
+    [onEventClick]
+  );
+  const eventsForDayCount = useCallback(
+    (day) => events.filter(
+      (ev) => new Date(ev.startTime).toDateString() === day.toDateString()
+    ).length,
+    [events]
+  );
+  const renderEvent = (event) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      rounded: "md",
+      padding: "xs",
+      border: true,
+      className: cn(
+        "cursor-pointer hover:shadow-sm transition-shadow text-xs truncate",
+        event.color ? event.color : "bg-blue-500/15 border-blue-500/30 text-blue-600"
+      ),
+      onClick: (e) => handleEventClick(event, e),
+      children: /* @__PURE__ */ jsx(Typography, { variant: "small", className: "truncate font-medium", children: event.title })
+    },
+    event.id
+  );
+  return /* @__PURE__ */ jsx(Box, { className: cn("overflow-x-auto", className), children: /* @__PURE__ */ jsxs(Box, { className: "min-w-[800px]", children: [
+    /* @__PURE__ */ jsxs(Box, { className: "grid grid-cols-8 border-b border-[var(--color-border)]", children: [
+      /* @__PURE__ */ jsx(Box, { className: "p-2" }),
+      weekDays.map((day) => {
+        const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+        const count = eventsForDayCount(day);
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            className: "border-l border-[var(--color-border)]",
+            children: [
+              /* @__PURE__ */ jsx(
+                DayCell,
+                {
+                  date: day,
+                  isToday,
+                  onClick: onDayClick
+                }
+              ),
+              count > 0 && /* @__PURE__ */ jsx(Box, { className: "text-center pb-1", children: /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: count }) })
+            ]
+          },
+          day.toISOString()
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "max-h-[500px] overflow-y-auto", children: resolvedTimeSlots.map((time) => /* @__PURE__ */ jsxs(
+      Box,
+      {
+        className: "grid grid-cols-8 border-b border-[var(--color-border)]",
+        children: [
+          /* @__PURE__ */ jsx(Box, { className: "p-2 text-right pr-3", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "small",
+              className: "text-[var(--color-muted-foreground)]",
+              children: time
+            }
+          ) }),
+          weekDays.map((day) => {
+            const slotEvents = events.filter(
+              (ev) => eventInSlot(ev, day, time)
+            );
+            const isToday = day.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
+            return /* @__PURE__ */ jsx(
+              TimeSlotCell,
+              {
+                time,
+                isOccupied: slotEvents.length > 0,
+                onClick: () => handleSlotClick(day, time),
+                className: cn(
+                  "border-l border-[var(--color-border)]",
+                  isToday && "bg-blue-50/30"
+                ),
+                children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
+              },
+              `${day.toISOString()}-${time}`
+            );
+          })
+        ]
+      },
+      time
+    )) })
+  ] }) });
+}
+CalendarGrid.displayName = "CalendarGrid";
 var RepeatableFormSection = ({
   sectionType,
   title,
@@ -6423,26 +6621,1356 @@ var FormSectionHeader = ({
   );
 };
 FormSectionHeader.displayName = "FormSectionHeader";
-
-// components/organisms/types.ts
-var EntityDisplayEvents = {
-  SORT: "SORT",
-  PAGINATE: "PAGINATE",
-  SEARCH: "SEARCH",
-  FILTER: "FILTER",
-  CLEAR_FILTERS: "CLEAR_FILTERS",
-  SELECT: "SELECT",
+var FlipCard = ({
+  front,
+  back,
+  flipped = false,
+  onFlip,
+  className,
+  height = "h-64"
+}) => {
+  return /* @__PURE__ */ jsxs(
+    FlipContainer,
+    {
+      flipped,
+      className: cn(height, className),
+      onClick: onFlip,
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "absolute inset-0 w-full h-full rounded-lg shadow-lg flex items-center justify-center p-6",
+            style: { backfaceVisibility: "hidden", transform: "rotateY(0deg)" },
+            children: front
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "absolute inset-0 w-full h-full rounded-lg shadow-lg flex items-center justify-center p-6",
+            style: { backfaceVisibility: "hidden", transform: "rotateY(180deg)" },
+            children: back
+          }
+        )
+      ]
+    }
+  );
+};
+FlipCard.displayName = "FlipCard";
+var DEFAULT_OPTIONS = [
+  { label: "1W", value: "week" },
+  { label: "1M", value: "month" },
+  { label: "3M", value: "3months" },
+  { label: "1Y", value: "year" }
+];
+var DateRangeSelector = ({
+  options = DEFAULT_OPTIONS,
+  selected = "month",
+  onSelect,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", className: cn(className), children: options.map((option) => /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: selected === option.value ? "primary" : "ghost",
+      size: "sm",
+      onClick: () => onSelect?.(option.value),
+      children: option.label
+    },
+    option.value
+  )) });
+};
+DateRangeSelector.displayName = "DateRangeSelector";
+var ChartLegend = ({
+  items,
+  className,
+  direction = "horizontal"
+}) => {
+  const Wrapper = direction === "horizontal" ? HStack : VStack;
+  return /* @__PURE__ */ jsx(Wrapper, { gap: "md", className: cn("flex-wrap", className), children: items.map((item) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "rounded-full shrink-0",
+        style: {
+          width: 10,
+          height: 10,
+          backgroundColor: item.color
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-[var(--color-muted-foreground)]", children: item.label })
+  ] }, item.label)) });
+};
+ChartLegend.displayName = "ChartLegend";
+var LineChart = ({
+  data,
+  width = 400,
+  height = 200,
+  showGrid = true,
+  showValues = false,
+  showArea = true,
+  lineColor = "var(--color-primary)",
+  areaColor = "var(--color-primary)",
+  className
+}) => {
+  const gradientId = useId();
+  const sortedData = useMemo(() => {
+    return [...data].sort(
+      (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+    );
+  }, [data]);
+  const points = useMemo(() => {
+    if (sortedData.length === 0) return [];
+    const values = sortedData.map((d) => d.value);
+    const minVal = Math.min(...values);
+    const maxVal = Math.max(...values);
+    const range = maxVal - minVal || 1;
+    const padding = 20;
+    const chartWidth = width - padding * 2;
+    const chartHeight = height - padding * 2;
+    return sortedData.map((point, index) => ({
+      x: padding + index / (sortedData.length - 1 || 1) * chartWidth,
+      y: padding + chartHeight - (point.value - minVal) / range * chartHeight,
+      value: point.value,
+      label: point.label
+    }));
+  }, [sortedData, width, height]);
+  const linePath = useMemo(() => {
+    if (points.length === 0) return "";
+    return points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+  }, [points]);
+  const areaPath = useMemo(() => {
+    if (points.length === 0 || !showArea) return "";
+    const bottom = height - 20;
+    const first = points[0];
+    const last = points[points.length - 1];
+    return `${linePath} L ${last.x} ${bottom} L ${first.x} ${bottom} Z`;
+  }, [linePath, points, height, showArea]);
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center justify-center text-[var(--color-muted-foreground)]", className), style: { width, height }, children: "No data" });
+  }
+  return /* @__PURE__ */ jsx(Box, { className: cn(className), children: /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${width} ${height}`,
+      width: "100%",
+      height: "100%",
+      preserveAspectRatio: "xMidYMid meet",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: areaColor, stopOpacity: "0.3" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: areaColor, stopOpacity: "0" })
+        ] }) }),
+        showGrid && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("line", { x1: "20", y1: height * 0.25, x2: width - 20, y2: height * 0.25, stroke: "var(--color-border, #e5e7eb)", strokeWidth: "1" }),
+          /* @__PURE__ */ jsx("line", { x1: "20", y1: height * 0.5, x2: width - 20, y2: height * 0.5, stroke: "var(--color-border, #e5e7eb)", strokeWidth: "1" }),
+          /* @__PURE__ */ jsx("line", { x1: "20", y1: height * 0.75, x2: width - 20, y2: height * 0.75, stroke: "var(--color-border, #e5e7eb)", strokeWidth: "1" })
+        ] }),
+        showArea && areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: `url(#${gradientId})` }),
+        linePath && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: linePath,
+            fill: "none",
+            stroke: lineColor,
+            strokeWidth: "2",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        points.map((point, index) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: point.x,
+            cy: point.y,
+            r: "4",
+            fill: lineColor,
+            stroke: "var(--color-background, white)",
+            strokeWidth: "2"
+          },
+          index
+        )),
+        showValues && points.map((point, index) => /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: point.x,
+            y: point.y - 10,
+            textAnchor: "middle",
+            fontSize: "11",
+            fill: "var(--color-foreground, currentColor)",
+            children: point.label ?? point.value
+          },
+          `label-${index}`
+        ))
+      ]
+    }
+  ) });
+};
+LineChart.displayName = "LineChart";
+var sizeMap4 = {
+  sm: { dot: 6, active: 8 },
+  md: { dot: 8, active: 10 },
+  lg: { dot: 10, active: 14 }
+};
+var stateColors = {
+  active: "var(--color-primary)",
+  complete: "var(--color-success, #22c55e)",
+  pending: "var(--color-muted, #d4d4d8)"
+};
+var ProgressDots = ({
+  count,
+  currentIndex,
+  getState,
+  onDotClick,
+  className,
+  size = "md"
+}) => {
+  const defaultGetState = useCallback(
+    (index) => {
+      if (index === currentIndex) return "active";
+      return "pending";
+    },
+    [currentIndex]
+  );
+  const resolveState = getState ?? defaultGetState;
+  const dims = sizeMap4[size];
+  return /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", className: cn(className), children: Array.from({ length: count }, (_, index) => {
+    const state = resolveState(index);
+    const isActive = state === "active";
+    const dotSize = isActive ? dims.active : dims.dot;
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: cn(
+          "rounded-full transition-all duration-200",
+          onDotClick && "cursor-pointer"
+        ),
+        style: {
+          width: dotSize,
+          height: dotSize,
+          backgroundColor: stateColors[state],
+          transform: isActive ? "scale(1.2)" : "scale(1)"
+        },
+        onClick: onDotClick ? () => onDotClick(index) : void 0
+      },
+      index
+    );
+  }) });
+};
+ProgressDots.displayName = "ProgressDots";
+var sizeMap5 = {
+  sm: { button: "sm", gap: "gap-0.5", container: "w-28" },
+  md: { button: "md", gap: "gap-1", container: "w-40" },
+  lg: { button: "lg", gap: "gap-1.5", container: "w-52" }
+};
+var arrowIcons = {
+  up: "\u25B2",
+  down: "\u25BC",
+  left: "\u25C0",
+  right: "\u25B6"
+};
+function DPad({
+  onDirection,
+  directionEvent,
+  size = "md",
+  includeDiagonals = false,
+  className,
+  disabled
+}) {
+  const eventBus = useEventBus();
+  const sizes = sizeMap5[size];
+  const [activeDirections, setActiveDirections] = React50.useState(/* @__PURE__ */ new Set());
+  const handlePress = React50.useCallback(
+    (direction) => {
+      setActiveDirections((prev) => new Set(prev).add(direction));
+      if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
+      onDirection?.(direction, true);
+    },
+    [directionEvent, eventBus, onDirection]
+  );
+  const handleRelease = React50.useCallback(
+    (direction) => {
+      setActiveDirections((prev) => {
+        const next = new Set(prev);
+        next.delete(direction);
+        return next;
+      });
+      if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: false });
+      onDirection?.(direction, false);
+    },
+    [directionEvent, eventBus, onDirection]
+  );
+  const createButton = (direction) => /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon: arrowIcons[direction],
+      size: sizes.button,
+      variant: "secondary",
+      pressed: activeDirections.has(direction),
+      onPress: () => handlePress(direction),
+      onRelease: () => handleRelease(direction),
+      disabled
+    },
+    direction
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-grid grid-cols-3", sizes.gap, sizes.container, className), children: [
+    /* @__PURE__ */ jsx("div", {}),
+    createButton("up"),
+    /* @__PURE__ */ jsx("div", {}),
+    createButton("left"),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-gray-700 border-2 border-gray-600" }) }),
+    createButton("right"),
+    /* @__PURE__ */ jsx("div", {}),
+    createButton("down"),
+    /* @__PURE__ */ jsx("div", {})
+  ] });
+}
+DPad.displayName = "DPad";
+var sizeMap6 = {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+};
+var layoutMap = {
+  horizontal: "flex flex-row gap-2",
+  vertical: "flex flex-col gap-2",
+  diamond: "grid grid-cols-3 gap-1"
+};
+function ActionButtons({
+  buttons,
+  onAction,
+  actionEvent,
+  layout = "horizontal",
+  size = "md",
+  className,
+  disabled
+}) {
+  const eventBus = useEventBus();
+  const [activeButtons, setActiveButtons] = React50.useState(/* @__PURE__ */ new Set());
+  const handlePress = React50.useCallback(
+    (id) => {
+      setActiveButtons((prev) => new Set(prev).add(id));
+      if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
+      onAction?.(id, true);
+    },
+    [actionEvent, eventBus, onAction]
+  );
+  const handleRelease = React50.useCallback(
+    (id) => {
+      setActiveButtons((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+      if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: false });
+      onAction?.(id, false);
+    },
+    [actionEvent, eventBus, onAction]
+  );
+  if (layout === "diamond" && buttons.length === 4) {
+    const [top, right, bottom, left] = buttons;
+    return /* @__PURE__ */ jsxs("div", { className: cn(layoutMap[layout], className), children: [
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          icon: top.icon,
+          label: top.label,
+          size: sizeMap6[size],
+          variant: top.variant,
+          pressed: activeButtons.has(top.id),
+          onPress: () => handlePress(top.id),
+          onRelease: () => handleRelease(top.id),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          icon: left.icon,
+          label: left.label,
+          size: sizeMap6[size],
+          variant: left.variant,
+          pressed: activeButtons.has(left.id),
+          onPress: () => handlePress(left.id),
+          onRelease: () => handleRelease(left.id),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          icon: right.icon,
+          label: right.label,
+          size: sizeMap6[size],
+          variant: right.variant,
+          pressed: activeButtons.has(right.id),
+          onPress: () => handlePress(right.id),
+          onRelease: () => handleRelease(right.id),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(
+        ControlButton,
+        {
+          icon: bottom.icon,
+          label: bottom.label,
+          size: sizeMap6[size],
+          variant: bottom.variant,
+          pressed: activeButtons.has(bottom.id),
+          onPress: () => handlePress(bottom.id),
+          onRelease: () => handleRelease(bottom.id),
+          disabled
+        }
+      ),
+      /* @__PURE__ */ jsx("div", {})
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(layoutMap[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      icon: button.icon,
+      label: button.label,
+      size: sizeMap6[size],
+      variant: button.variant,
+      pressed: activeButtons.has(button.id),
+      onPress: () => handlePress(button.id),
+      onRelease: () => handleRelease(button.id),
+      disabled
+    },
+    button.id
+  )) });
+}
+ActionButtons.displayName = "ActionButtons";
+var sizeMap7 = {
+  sm: "text-xs px-2 py-1",
+  md: "text-sm px-3 py-1.5",
+  lg: "text-base px-4 py-2"
+};
+var variantMap2 = {
+  default: "bg-gray-800/80 border-gray-700",
+  primary: "bg-blue-900/80 border-blue-700",
+  success: "bg-green-900/80 border-green-700",
+  warning: "bg-yellow-900/80 border-yellow-700",
+  danger: "bg-red-900/80 border-red-700"
+};
+function StatBadge({
+  label,
+  value = 0,
+  max,
+  format = "number",
+  icon,
+  size = "md",
+  variant = "default",
+  className,
+  // Ignored config props (used for schema binding)
+  source: _source,
+  field: _field
+}) {
+  const numValue = typeof value === "number" ? value : parseInt(String(value), 10) || 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 rounded-lg border backdrop-blur-sm",
+        sizeMap7[size] ?? sizeMap7.md,
+        variantMap2[variant] ?? variantMap2.default,
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? (() => {
+          const I = resolveIcon(icon);
+          return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : icon;
+        })() : icon }),
+        /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-medium", children: label }),
+        format === "hearts" && max && /* @__PURE__ */ jsx(
+          HealthBar,
+          {
+            current: numValue,
+            max,
+            format: "hearts",
+            size: size === "lg" ? "md" : "sm"
+          }
+        ),
+        format === "bar" && max && /* @__PURE__ */ jsx(
+          HealthBar,
+          {
+            current: numValue,
+            max,
+            format: "bar",
+            size: size === "lg" ? "md" : "sm"
+          }
+        ),
+        format === "number" && /* @__PURE__ */ jsx(
+          ScoreDisplay,
+          {
+            value: numValue,
+            size: size === "lg" ? "md" : "sm",
+            animated: true
+          }
+        ),
+        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-white", children: value })
+      ]
+    }
+  );
+}
+StatBadge.displayName = "StatBadge";
+var GROUP_COLORS = [
+  "#3b82f6",
+  // blue-500
+  "#10b981",
+  // emerald-500
+  "#f59e0b",
+  // amber-500
+  "#ef4444",
+  // red-500
+  "#8b5cf6",
+  // violet-500
+  "#ec4899",
+  // pink-500
+  "#06b6d4",
+  // cyan-500
+  "#84cc16"
+  // lime-500
+];
+var DEFAULT_NODE_COLOR = "#3b82f6";
+var DEFAULT_EDGE_COLOR = "#9ca3af";
+var DEFAULT_NODE_SIZE = 8;
+function resolveNodeColor(node, groups) {
+  if (node.color) return node.color;
+  if (node.group) {
+    const idx = groups.indexOf(node.group);
+    return GROUP_COLORS[idx % GROUP_COLORS.length];
+  }
+  return DEFAULT_NODE_COLOR;
+}
+var GraphView = ({
+  nodes,
+  edges,
+  onNodeClick,
+  onNodeHover,
+  width: propWidth,
+  height: propHeight,
+  className,
+  showLabels = true,
+  zoomToFit = true
+}) => {
+  const containerRef = useRef(null);
+  const animRef = useRef(0);
+  const [simNodes, setSimNodes] = useState([]);
+  const [settled, setSettled] = useState(false);
+  const [hoveredId, setHoveredId] = useState(null);
+  const [dimensions, setDimensions] = useState({ width: propWidth ?? 600, height: propHeight ?? 400 });
+  const w = propWidth ?? dimensions.width;
+  const h = propHeight ?? dimensions.height;
+  const groups = useMemo(
+    () => [...new Set(nodes.map((n) => n.group).filter((g) => Boolean(g)))],
+    [nodes]
+  );
+  const connectedIds = useMemo(() => {
+    if (!hoveredId) return /* @__PURE__ */ new Set();
+    const connected = /* @__PURE__ */ new Set([hoveredId]);
+    for (const edge of edges) {
+      if (edge.source === hoveredId) connected.add(edge.target);
+      if (edge.target === hoveredId) connected.add(edge.source);
+    }
+    return connected;
+  }, [hoveredId, edges]);
+  useEffect(() => {
+    if (propWidth && propHeight) return;
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      setDimensions({
+        width: el.clientWidth || 600,
+        height: el.clientHeight || 400
+      });
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, [propWidth, propHeight]);
+  useEffect(() => {
+    if (nodes.length === 0) {
+      setSimNodes([]);
+      setSettled(true);
+      return;
+    }
+    const initialNodes = nodes.map((n, idx) => {
+      const angle = idx / nodes.length * 2 * Math.PI;
+      const radius = Math.min(w, h) * 0.3;
+      return {
+        id: n.id,
+        label: n.label,
+        color: resolveNodeColor(n, groups),
+        size: n.size ?? DEFAULT_NODE_SIZE,
+        group: n.group,
+        x: w / 2 + radius * Math.cos(angle) + (Math.random() - 0.5) * 20,
+        y: h / 2 + radius * Math.sin(angle) + (Math.random() - 0.5) * 20,
+        vx: 0,
+        vy: 0,
+        fx: 0,
+        fy: 0
+      };
+    });
+    let iterations = 0;
+    const maxIterations = 120;
+    let currentNodes = initialNodes;
+    const tick = () => {
+      const centerX = w / 2;
+      const centerY = h / 2;
+      for (const node of currentNodes) {
+        node.fx = 0;
+        node.fy = 0;
+      }
+      for (let i = 0; i < currentNodes.length; i++) {
+        for (let j = i + 1; j < currentNodes.length; j++) {
+          const a = currentNodes[i];
+          const b = currentNodes[j];
+          const dx = b.x - a.x;
+          const dy = b.y - a.y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const force = 800 / (dist * dist);
+          const fx = dx / dist * force;
+          const fy = dy / dist * force;
+          a.fx -= fx;
+          a.fy -= fy;
+          b.fx += fx;
+          b.fy += fy;
+        }
+      }
+      for (const edge of edges) {
+        const source = currentNodes.find((n) => n.id === edge.source);
+        const target = currentNodes.find((n) => n.id === edge.target);
+        if (!source || !target) continue;
+        const dx = target.x - source.x;
+        const dy = target.y - source.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        const force = (dist - 100) * 0.05;
+        const fx = dx / dist * force;
+        const fy = dy / dist * force;
+        source.fx += fx;
+        source.fy += fy;
+        target.fx -= fx;
+        target.fy -= fy;
+      }
+      for (const node of currentNodes) {
+        node.fx += (centerX - node.x) * 0.01;
+        node.fy += (centerY - node.y) * 0.01;
+      }
+      const damping = 0.85;
+      const margin = 40;
+      for (const node of currentNodes) {
+        node.vx = (node.vx + node.fx) * damping;
+        node.vy = (node.vy + node.fy) * damping;
+        node.x += node.vx;
+        node.y += node.vy;
+        node.x = Math.max(margin, Math.min(w - margin, node.x));
+        node.y = Math.max(margin, Math.min(h - margin, node.y));
+      }
+      iterations++;
+      setSimNodes([...currentNodes]);
+      if (iterations < maxIterations) {
+        animRef.current = requestAnimationFrame(tick);
+      } else {
+        setSettled(true);
+      }
+    };
+    setSettled(false);
+    animRef.current = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(animRef.current);
+    };
+  }, [nodes, edges, w, h, groups]);
+  const viewBox = useMemo(() => {
+    if (!zoomToFit || !settled || simNodes.length === 0) {
+      return `0 0 ${w} ${h}`;
+    }
+    const pad = 60;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of simNodes) {
+      minX = Math.min(minX, node.x - node.size);
+      minY = Math.min(minY, node.y - node.size);
+      maxX = Math.max(maxX, node.x + node.size);
+      maxY = Math.max(maxY, node.y + node.size);
+    }
+    const fitW = maxX - minX + pad * 2;
+    const fitH = maxY - minY + pad * 2;
+    return `${minX - pad} ${minY - pad} ${fitW} ${fitH}`;
+  }, [zoomToFit, settled, simNodes, w, h]);
+  const nodeMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const n of simNodes) {
+      map.set(n.id, n);
+    }
+    return map;
+  }, [simNodes]);
+  const handleNodeMouseEnter = useCallback(
+    (node) => {
+      setHoveredId(node.id);
+      if (onNodeHover) {
+        onNodeHover({ id: node.id, label: node.label, color: node.color, size: node.size, group: node.group });
+      }
+    },
+    [onNodeHover]
+  );
+  const handleNodeMouseLeave = useCallback(() => {
+    setHoveredId(null);
+    if (onNodeHover) {
+      onNodeHover(null);
+    }
+  }, [onNodeHover]);
+  const handleNodeClickInternal = useCallback(
+    (node) => {
+      if (onNodeClick) {
+        onNodeClick({ id: node.id, label: node.label, color: node.color, size: node.size, group: node.group });
+      }
+    },
+    [onNodeClick]
+  );
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center justify-center", className), style: { width: w, height: h }, children: /* @__PURE__ */ jsx(Box, { className: "text-[var(--color-muted-foreground)] text-sm", children: "No graph data" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: containerRef,
+      className: cn("relative overflow-hidden rounded-lg border border-[var(--color-border)] bg-[var(--color-card)]", className),
+      style: { width: propWidth ?? "100%", height: h },
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "100%",
+          height: "100%",
+          viewBox,
+          preserveAspectRatio: "xMidYMid meet",
+          children: [
+            edges.map((edge, idx) => {
+              const source = nodeMap.get(edge.source);
+              const target = nodeMap.get(edge.target);
+              if (!source || !target) return null;
+              const isHighlighted = hoveredId ? connectedIds.has(edge.source) && connectedIds.has(edge.target) : true;
+              return /* @__PURE__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: source.x,
+                    y1: source.y,
+                    x2: target.x,
+                    y2: target.y,
+                    stroke: edge.color ?? DEFAULT_EDGE_COLOR,
+                    strokeWidth: 1.5,
+                    opacity: isHighlighted ? 0.8 : 0.15
+                  }
+                ),
+                showLabels && edge.label && /* @__PURE__ */ jsx(
+                  "text",
+                  {
+                    x: (source.x + target.x) / 2,
+                    y: (source.y + target.y) / 2 - 6,
+                    textAnchor: "middle",
+                    fill: "var(--color-muted-foreground)",
+                    fontSize: 9,
+                    opacity: isHighlighted ? 0.9 : 0.2,
+                    children: edge.label
+                  }
+                )
+              ] }, `edge-${idx}`);
+            }),
+            simNodes.map((node) => {
+              const isHighlighted = hoveredId ? connectedIds.has(node.id) : true;
+              const isHovered = hoveredId === node.id;
+              return /* @__PURE__ */ jsxs(
+                "g",
+                {
+                  style: { cursor: onNodeClick ? "pointer" : "default" },
+                  onMouseEnter: () => handleNodeMouseEnter(node),
+                  onMouseLeave: handleNodeMouseLeave,
+                  onClick: () => handleNodeClickInternal(node),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: node.x,
+                        cy: node.y,
+                        r: isHovered ? node.size * 1.4 : node.size,
+                        fill: node.color,
+                        opacity: isHighlighted ? 1 : 0.3,
+                        stroke: isHovered ? "#ffffff" : "none",
+                        strokeWidth: isHovered ? 2 : 0
+                      }
+                    ),
+                    showLabels && /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: node.x,
+                        y: node.y + node.size + 12,
+                        textAnchor: "middle",
+                        fill: "var(--color-foreground)",
+                        fontSize: 11,
+                        fontWeight: isHovered ? "bold" : "normal",
+                        opacity: isHighlighted ? 0.9 : 0.2,
+                        children: node.label ?? node.id
+                      }
+                    )
+                  ]
+                },
+                node.id
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+GraphView.displayName = "GraphView";
+var defaultIcon = L.icon({
+  iconUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png",
+  iconRetinaUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png",
+  shadowUrl: "https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png",
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41]
+});
+L.Marker.prototype.options.icon = defaultIcon;
+function MapUpdater({ centerLat, centerLng, zoom }) {
+  const map = useMap();
+  const prevRef = useRef({ centerLat, centerLng, zoom });
+  useEffect(() => {
+    const prev = prevRef.current;
+    if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
+      map.setView([centerLat, centerLng], zoom);
+      prevRef.current = { centerLat, centerLng, zoom };
+    }
+  }, [map, centerLat, centerLng, zoom]);
+  return null;
+}
+function MapClickHandler({ onMapClick }) {
+  const map = useMap();
+  useEffect(() => {
+    if (!onMapClick) return;
+    const handler = (e) => {
+      onMapClick(e.latlng.lat, e.latlng.lng);
+    };
+    map.on("click", handler);
+    return () => {
+      map.off("click", handler);
+    };
+  }, [map, onMapClick]);
+  return null;
+}
+function MapView({
+  markers = [],
+  centerLat = 51.505,
+  centerLng = -0.09,
+  zoom = 13,
+  height = "400px",
+  onMarkerClick,
+  onMapClick,
+  mapClickEvent,
+  markerClickEvent,
+  showClickedPin = false,
+  className,
+  showAttribution = true
+}) {
+  const eventBus = useEventBus();
+  const [clickedPosition, setClickedPosition] = useState(null);
+  const handleMapClick = useCallback((lat, lng) => {
+    if (showClickedPin) {
+      setClickedPosition({ lat, lng });
+    }
+    onMapClick?.(lat, lng);
+    if (mapClickEvent) {
+      eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
+    }
+  }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
+  const handleMarkerClick = useCallback((marker) => {
+    onMarkerClick?.(marker);
+    if (markerClickEvent) {
+      eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
+    }
+  }, [onMarkerClick, markerClickEvent, eventBus]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn("relative w-full overflow-hidden rounded-lg", className),
+      style: { height },
+      "data-testid": "map-view",
+      children: /* @__PURE__ */ jsxs(
+        MapContainer,
+        {
+          center: [centerLat, centerLng],
+          zoom,
+          style: { height: "100%", width: "100%" },
+          attributionControl: showAttribution,
+          children: [
+            /* @__PURE__ */ jsx(
+              TileLayer,
+              {
+                url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+                attribution: showAttribution ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' : void 0
+              }
+            ),
+            /* @__PURE__ */ jsx(MapUpdater, { centerLat, centerLng, zoom }),
+            /* @__PURE__ */ jsx(MapClickHandler, { onMapClick: handleMapClick }),
+            showClickedPin && clickedPosition && /* @__PURE__ */ jsx(Marker, { position: [clickedPosition.lat, clickedPosition.lng], children: /* @__PURE__ */ jsx(Popup, { children: /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              clickedPosition.lat.toFixed(5),
+              ", ",
+              clickedPosition.lng.toFixed(5)
+            ] }) }) }),
+            markers.map((marker) => /* @__PURE__ */ jsx(
+              Marker,
+              {
+                position: [marker.lat, marker.lng],
+                eventHandlers: onMarkerClick || markerClickEvent ? { click: () => handleMarkerClick(marker) } : void 0,
+                children: marker.label ? /* @__PURE__ */ jsxs(Popup, { children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", children: marker.label }),
+                  marker.category ? /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-muted-foreground", children: marker.category }) : null
+                ] }) : null
+              },
+              marker.id
+            ))
+          ]
+        }
+      )
+    }
+  );
+}
+function fieldLabel(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  if (["new", "created", "scheduled", "queued", "info"].includes(v)) return "info";
+  return "default";
+}
+function formatDate(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function formatValue(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date":
+      return formatDate(value);
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+var gapStyles5 = {
+  none: "gap-0",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+var DataGrid = ({
+  entity,
+  fields: fieldsProp,
+  columns: columnsProp,
+  itemActions,
+  cols,
+  gap = "md",
+  minCardWidth = 280,
+  className,
+  isLoading = false,
+  error = null,
+  imageField
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const fields = fieldsProp ?? columnsProp ?? [];
+  const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const titleField = fields.find((f) => f.variant === "h3" || f.variant === "h4") ?? fields[0];
+  const badgeFields = fields.filter((f) => f.variant === "badge" && f !== titleField);
+  const bodyFields = fields.filter((f) => f !== titleField && !badgeFields.includes(f));
+  const primaryActions = itemActions?.filter((a) => a.variant !== "danger") ?? [];
+  const dangerActions = itemActions?.filter((a) => a.variant === "danger") ?? [];
+  const handleActionClick = (action, itemData) => (e) => {
+    e.stopPropagation();
+    eventBus.emit(`UI:${action.event}`, { row: itemData });
+  };
+  const gridTemplateColumns = cols ? void 0 : `repeat(auto-fit, minmax(min(${minCardWidth}px, 100%), 1fr))`;
+  const colsClass = cols ? {
+    1: "grid-cols-1",
+    2: "sm:grid-cols-2",
+    3: "sm:grid-cols-2 lg:grid-cols-3",
+    4: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+    5: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5",
+    6: "sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6"
+  }[cols] : void 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("empty.noItems") || "No items found" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn("grid", gapStyles5[gap], colsClass, className),
+      style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
+      children: data.map((item, index) => {
+        const itemData = item;
+        const id = itemData.id || String(index);
+        const titleValue = getNestedValue(itemData, titleField?.name ?? "");
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            "data-entity-row": true,
+            className: cn(
+              "bg-[var(--color-card)] rounded-[var(--radius-lg)]",
+              "border border-[var(--color-border)]",
+              "shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-hover)]",
+              "hover:border-[var(--color-primary)] transition-all",
+              "flex flex-col"
+            ),
+            children: [
+              imageField && (() => {
+                const imgUrl = getNestedValue(itemData, imageField);
+                if (!imgUrl || typeof imgUrl !== "string") return null;
+                return /* @__PURE__ */ jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-[var(--radius-lg)]", children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: imgUrl,
+                    alt: titleValue !== void 0 ? String(titleValue) : "",
+                    className: "w-full h-full object-cover",
+                    loading: "lazy"
+                  }
+                ) });
+              })(),
+              /* @__PURE__ */ jsx(Box, { className: "p-4 pb-0", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
+                /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+                  titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                    titleField?.icon && /* @__PURE__ */ jsx(Icon, { name: titleField.icon, size: "sm", className: "text-[var(--color-primary)] flex-shrink-0" }),
+                    /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: titleField?.variant === "h3" ? "h3" : "h4",
+                        className: "font-semibold truncate",
+                        children: String(titleValue)
+                      }
+                    )
+                  ] }),
+                  badgeFields.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-wrap", children: badgeFields.map((field) => {
+                    const val = getNestedValue(itemData, field.name);
+                    if (val === void 0 || val === null) return null;
+                    return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                      field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs" }),
+                      /* @__PURE__ */ jsx(Badge, { variant: statusVariant(String(val)), children: String(val) })
+                    ] }, field.name);
+                  }) })
+                ] }),
+                dangerActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: handleActionClick(action, itemData),
+                    "data-testid": `action-${action.event}`,
+                    className: "text-[var(--color-error)] hover:bg-[var(--color-error)]/10 px-2",
+                    children: [
+                      action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs" }),
+                      action.label
+                    ]
+                  },
+                  idx
+                )) })
+              ] }) }),
+              bodyFields.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 flex-1", children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: bodyFields.map((field) => {
+                const value = getNestedValue(itemData, field.name);
+                if (value === void 0 || value === null || value === "") return null;
+                if (field.format === "boolean") {
+                  return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
+                    /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                      field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel(field.name) })
+                    ] }),
+                    /* @__PURE__ */ jsx(Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
+                  ] }, field.name);
+                }
+                return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
+                  /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                    field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel(field.name) })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: field.variant === "caption" ? "caption" : "small",
+                      className: "text-right truncate max-w-[60%]",
+                      children: formatValue(value, field.format)
+                    }
+                  )
+                ] }, field.name);
+              }) }) }),
+              primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: action.variant === "primary" ? "primary" : "ghost",
+                  size: "sm",
+                  onClick: handleActionClick(action, itemData),
+                  "data-testid": `action-${action.event}`,
+                  children: [
+                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                    action.label
+                  ]
+                },
+                idx
+              )) }) })
+            ]
+          },
+          id
+        );
+      })
+    }
+  );
+};
+DataGrid.displayName = "DataGrid";
+function fieldLabel2(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function statusVariant2(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open", "online"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing", "warning"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed", "offline"].includes(v)) return "error";
+  if (["new", "created", "scheduled", "queued", "info"].includes(v)) return "info";
+  return "default";
+}
+function formatDate2(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function formatValue2(value, format) {
+  if (value === void 0 || value === null) return "";
+  switch (format) {
+    case "date":
+      return formatDate2(value);
+    case "currency":
+      return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
+    case "number":
+      return typeof value === "number" ? value.toLocaleString() : String(value);
+    case "percent":
+      return typeof value === "number" ? `${Math.round(value)}%` : String(value);
+    case "boolean":
+      return value ? "Yes" : "No";
+    default:
+      return String(value);
+  }
+}
+var DataList = ({
+  entity,
+  fields: fieldsProp,
+  columns: columnsProp,
+  itemActions,
+  gap = "none",
+  variant = "default",
+  className,
+  isLoading = false,
+  error = null
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const fields = fieldsProp ?? columnsProp ?? [];
+  const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const titleField = fields.find((f) => f.variant === "h3" || f.variant === "h4") ?? fields[0];
+  const badgeFields = fields.filter((f) => f.variant === "badge" && f !== titleField);
+  const progressFields = fields.filter((f) => f.variant === "progress");
+  const bodyFields = fields.filter(
+    (f) => f !== titleField && !badgeFields.includes(f) && !progressFields.includes(f)
+  );
+  const handleActionClick = (action, itemData) => (e) => {
+    e.stopPropagation();
+    eventBus.emit(`UI:${action.event}`, { row: itemData });
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") || "Loading..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "error", children: error.message }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Box, { className: "text-center py-12", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("empty.noItems") || "No items found" }) });
+  }
+  const gapClass = {
+    none: "",
+    sm: "gap-1",
+    md: "gap-2",
+    lg: "gap-4"
+  }[gap];
+  const isCard = variant === "card";
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn(
+        isCard && "bg-[var(--color-card)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-[var(--shadow-lg)] overflow-hidden",
+        !isCard && gapClass,
+        className
+      ),
+      children: data.map((item, index) => {
+        const itemData = item;
+        const id = itemData.id || String(index);
+        const titleValue = getNestedValue(itemData, titleField?.name ?? "");
+        const isLast = index === data.length - 1;
+        return /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              className: cn(
+                "group flex items-center gap-4 transition-all duration-200",
+                isCompact ? "px-4 py-2" : "px-6 py-4",
+                "hover:bg-[var(--color-muted)]/80",
+                !isCard && !isCompact && "rounded-[var(--radius-lg)] border border-transparent hover:border-[var(--color-border)]"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center", children: [
+                    titleField?.icon && /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: titleField.icon,
+                        size: isCompact ? "xs" : "sm",
+                        className: "text-[var(--color-primary)] flex-shrink-0"
+                      }
+                    ),
+                    titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: titleField?.variant === "h3" ? "h3" : "h4",
+                        className: cn("font-semibold truncate flex-1", isCompact && "text-sm"),
+                        children: String(titleValue)
+                      }
+                    ),
+                    badgeFields.map((field) => {
+                      const val = getNestedValue(itemData, field.name);
+                      if (val === void 0 || val === null) return null;
+                      return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center flex-shrink-0", children: [
+                        field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs" }),
+                        /* @__PURE__ */ jsx(Badge, { variant: statusVariant2(String(val)), children: String(val) })
+                      ] }, field.name);
+                    })
+                  ] }),
+                  bodyFields.length > 0 && !isCompact && /* @__PURE__ */ jsx(HStack, { gap: "md", className: "mt-1.5 flex-wrap", children: bodyFields.map((field) => {
+                    const value = getNestedValue(itemData, field.name);
+                    if (value === void 0 || value === null || value === "") return null;
+                    return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                      field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
+                        field.label ?? fieldLabel2(field.name),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ jsx(Typography, { variant: "small", children: formatValue2(value, field.format) })
+                    ] }, field.name);
+                  }) }),
+                  progressFields.map((field) => {
+                    const value = getNestedValue(itemData, field.name);
+                    if (typeof value !== "number") return null;
+                    return /* @__PURE__ */ jsxs(Box, { className: "mt-2 max-w-xs", children: [
+                      /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "items-center mb-1", children: [
+                        field.icon && /* @__PURE__ */ jsx(Icon, { name: field.icon, size: "xs", className: "text-[var(--color-muted-foreground)]" }),
+                        /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
+                      ] }),
+                      /* @__PURE__ */ jsx(ProgressBar, { value, max: 100 })
+                    ] }, field.name);
+                  })
+                ] }),
+                itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
+                  HStack,
+                  {
+                    gap: "xs",
+                    className: cn(
+                      "flex-shrink-0 transition-opacity duration-200",
+                      "opacity-0 group-hover:opacity-100"
+                    ),
+                    children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: action.variant ?? "ghost",
+                        size: "sm",
+                        onClick: handleActionClick(action, itemData),
+                        "data-testid": `action-${action.event}`,
+                        className: cn(
+                          action.variant === "danger" && "text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
+                        ),
+                        children: [
+                          action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                          action.label
+                        ]
+                      },
+                      idx
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-[var(--color-border)]/40" })
+        ] }, id);
+      })
+    }
+  );
+};
+DataList.displayName = "DataList";
+
+// components/organisms/types.ts
+var EntityDisplayEvents = {
+  SORT: "SORT",
+  PAGINATE: "PAGINATE",
+  SEARCH: "SEARCH",
+  FILTER: "FILTER",
+  CLEAR_FILTERS: "CLEAR_FILTERS",
+  SELECT: "SELECT",
   DESELECT: "DESELECT"
 };
+function humanizeFieldName(name) {
+  return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()).replace(/\b([A-Z])([A-Z]+)\b/g, (_, first, rest) => first + rest.toLowerCase()).trim();
+}
 function normalizeColumns(columns) {
   return columns.map((col) => {
     if (typeof col === "string") {
-      const header = col.replace(/([A-Z])/g, " $1").replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase()).trim();
-      return { key: col, header };
+      const header2 = humanizeFieldName(col);
+      return { key: col, header: header2 };
     }
-    return col;
+    const key = col.key ?? col.name ?? "";
+    const header = col.header ?? col.label ?? humanizeFieldName(String(key));
+    return { ...col, key, header };
   });
 }
+function asBooleanValue(value) {
+  if (typeof value === "boolean") return value;
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return null;
+}
 function DataTable({
   fields,
   columns,
@@ -6739,7 +8267,13 @@ function DataTable({
                     {
                       "data-column": String(col.key),
                       className: "px-4 py-3 text-sm text-[var(--color-foreground)] whitespace-nowrap sm:whitespace-normal",
-                      children: col.render ? col.render(cellValue, row, rowIndex) : String(cellValue ?? "")
+                      children: col.render ? col.render(cellValue, row, rowIndex) : (() => {
+                        const boolVal = asBooleanValue(cellValue);
+                        if (boolVal !== null) {
+                          return boolVal ? /* @__PURE__ */ jsx(Badge, { variant: "success", children: t("common.yes") }) : /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("common.no") });
+                        }
+                        return String(cellValue ?? "");
+                      })()
                     },
                     String(col.key)
                   );
@@ -6825,7 +8359,7 @@ var StatCard = ({
   trend: manualTrend,
   trendDirection: manualDirection,
   invertTrend = false,
-  icon: Icon2,
+  icon: iconProp,
   iconBg = "bg-[var(--color-muted)]",
   iconColor = "text-[var(--color-foreground)]",
   subtitle,
@@ -6837,10 +8371,11 @@ var StatCard = ({
   isLoading: externalLoading,
   error: externalError
 }) => {
+  const Icon2 = typeof iconProp === "string" ? resolveIcon(iconProp) ?? void 0 : iconProp;
   const labelToUse = propLabel ?? propTitle;
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const handleActionClick = React41__default.useCallback(() => {
+  const handleActionClick = React50__default.useCallback(() => {
     if (action?.event) {
       eventBus.emit(`UI:${action.event}`, {});
     }
@@ -6851,7 +8386,7 @@ var StatCard = ({
   const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const isLoading = externalLoading ?? false;
   const error = externalError;
-  const computeMetricValue = React41__default.useCallback(
+  const computeMetricValue = React50__default.useCallback(
     (metric, items) => {
       if (metric.value !== void 0) {
         return metric.value;
@@ -6890,7 +8425,7 @@ var StatCard = ({
     },
     []
   );
-  const schemaStats = React41__default.useMemo(() => {
+  const schemaStats = React50__default.useMemo(() => {
     if (!metrics || metrics.length === 0) return null;
     return metrics.map((metric) => ({
       label: metric.label,
@@ -6898,7 +8433,7 @@ var StatCard = ({
       format: metric.format
     }));
   }, [metrics, data, computeMetricValue]);
-  const calculatedTrend = React41__default.useMemo(() => {
+  const calculatedTrend = React50__default.useMemo(() => {
     if (manualTrend !== void 0) return manualTrend;
     if (previousValue === void 0 || currentValue === void 0)
       return void 0;
@@ -7034,7 +8569,7 @@ var PageHeader = ({
     info: "bg-[var(--color-info)]/10 text-[var(--color-info)]"
   };
   return /* @__PURE__ */ jsxs(Box, { className: cn("mb-6", className), children: [
-    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React41__default.Fragment, { children: [
+    breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Box, { as: "nav", className: "mb-4", children: /* @__PURE__ */ jsx(Box, { as: "ol", className: "flex items-center gap-2 text-sm", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs(React50__default.Fragment, { children: [
       idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
@@ -7170,9 +8705,68 @@ function formatFieldValue(value, fieldName) {
   }
   return String(value);
 }
+var ReactMarkdown2 = lazy(() => import('react-markdown'));
+function renderRichFieldValue(value, fieldName, fieldType) {
+  if (value === void 0 || value === null) return "\u2014";
+  const str = String(value);
+  switch (fieldType) {
+    case "image":
+    case "url": {
+      if (str.match(/\.(png|jpe?g|gif|svg|webp|avif)(\?|$)/i) || str.startsWith("data:image/")) {
+        return /* @__PURE__ */ jsx(Box, { className: "mt-1 max-w-full", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: str,
+            alt: formatFieldLabel(fieldName),
+            className: "max-w-full max-h-64 rounded-[var(--radius-md)] object-contain",
+            loading: "lazy"
+          }
+        ) });
+      }
+      return str;
+    }
+    case "markdown":
+    case "richtext":
+      return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(Typography, { variant: "body", className: "break-words", children: str }), children: /* @__PURE__ */ jsx(Box, { className: "prose prose-sm max-w-none dark:prose-invert", children: /* @__PURE__ */ jsx(ReactMarkdown2, { children: str }) }) });
+    case "code":
+      return /* @__PURE__ */ jsx(Box, { className: "mt-1 rounded-[var(--radius-md)] bg-[var(--color-muted)] p-3 overflow-x-auto", children: /* @__PURE__ */ jsx("pre", { className: "text-sm font-mono whitespace-pre-wrap break-words m-0", children: /* @__PURE__ */ jsx("code", { children: str }) }) });
+    case "html":
+      return /* @__PURE__ */ jsx(Box, { className: "mt-1 prose prose-sm max-w-none dark:prose-invert break-words", children: /* @__PURE__ */ jsx(Typography, { variant: "body", children: str }) });
+    case "date":
+    case "datetime": {
+      const d = new Date(str);
+      if (!isNaN(d.getTime())) {
+        return d.toLocaleDateString(void 0, {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+          ...fieldType === "datetime" ? { hour: "2-digit", minute: "2-digit" } : {}
+        });
+      }
+      return str;
+    }
+    default:
+      return formatFieldValue(value, fieldName);
+  }
+}
 function normalizeFieldDefs(fields) {
   if (!fields) return [];
-  return fields.map((f) => typeof f === "string" ? f : f.key);
+  return fields.map((f) => {
+    if (typeof f === "string") return f;
+    if ("key" in f) return f.key;
+    if ("name" in f) return f.name;
+    return String(f);
+  });
+}
+function buildFieldTypeMap(fields) {
+  const map = {};
+  if (!fields) return map;
+  for (const f of fields) {
+    if (typeof f === "object" && "name" in f && "type" in f) {
+      map[f.name] = f.type;
+    }
+  }
+  return map;
 }
 var DetailPanel = ({
   title: propTitle,
@@ -7196,9 +8790,10 @@ var DetailPanel = ({
   const isFieldDefArray = (arr) => {
     if (!arr || arr.length === 0) return false;
     const first = arr[0];
-    return typeof first === "string" || typeof first === "object" && first !== null && "key" in first;
+    return typeof first === "string" || typeof first === "object" && first !== null && ("key" in first || "name" in first);
   };
   const effectiveFieldNames = isFieldDefArray(propFields) ? normalizeFieldDefs(propFields) : fieldNames;
+  const fieldTypeMap = isFieldDefArray(propFields) ? buildFieldTypeMap(propFields) : {};
   useCallback(
     (action, data2) => {
       if (action.navigatesTo) {
@@ -7273,7 +8868,7 @@ var DetailPanel = ({
         if (value !== void 0 && value !== null) {
           overviewFields.push({
             label: formatFieldLabel(field),
-            value: formatFieldValue(value, field),
+            value: renderRichFieldValue(value, field, fieldTypeMap[field]),
             icon: getFieldIcon(field)
           });
         }
@@ -7289,7 +8884,7 @@ var DetailPanel = ({
         if (value !== void 0 && value !== null) {
           metricsFields.push({
             label: formatFieldLabel(field),
-            value: formatFieldValue(value, field),
+            value: renderRichFieldValue(value, field, fieldTypeMap[field]),
             icon: getFieldIcon(field)
           });
         }
@@ -7305,7 +8900,7 @@ var DetailPanel = ({
         if (value !== void 0 && value !== null) {
           timelineFields.push({
             label: formatFieldLabel(field),
-            value: formatFieldValue(value, field),
+            value: renderRichFieldValue(value, field, fieldTypeMap[field]),
             icon: getFieldIcon(field)
           });
         }
@@ -7321,7 +8916,7 @@ var DetailPanel = ({
         if (value !== void 0 && value !== null) {
           descFields.push({
             label: formatFieldLabel(field),
-            value: String(value),
+            value: renderRichFieldValue(value, field, fieldTypeMap[field]),
             icon: getFieldIcon(field)
           });
         }
@@ -7361,96 +8956,123 @@ var DetailPanel = ({
       }
     );
   }
-  const content = /* @__PURE__ */ jsxs(VStack, { gap: "lg", children: [
-    /* @__PURE__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
-      /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "start", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "sm", flex: true, className: "min-w-0", children: [
-          avatar,
-          /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
-          subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: subtitle }),
-          normalizedData && effectiveFieldNames && /* @__PURE__ */ jsx(HStack, { gap: "xs", wrap: true, children: effectiveFieldNames.filter(
-            (f) => f.toLowerCase().includes("status") || f.toLowerCase().includes("priority")
-          ).map((field) => {
-            const value = getNestedValue(normalizedData, field);
-            if (!value) return null;
-            return /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: getBadgeVariant(field, String(value)),
-                children: String(value)
-              },
-              field
-            );
-          }) }),
-          status && /* @__PURE__ */ jsx(Badge, { variant: status.variant ?? "default", children: status.label })
-        ] }),
-        slideOver && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, icon: X })
-      ] }),
+  const allFields = [];
+  if (sections) {
+    for (const section of sections) {
+      for (const field of section.fields) {
+        if (typeof field === "string") {
+          const value = normalizedData ? getNestedValue(normalizedData, field) : void 0;
+          allFields.push({
+            label: formatFieldLabel(field),
+            value: renderRichFieldValue(value, field, fieldTypeMap[field]),
+            icon: getFieldIcon(field)
+          });
+        } else {
+          allFields.push(field);
+        }
+      }
+    }
+  }
+  const closeAction = actions?.find(
+    (a) => a.event === "CLOSE" || a.event === "CANCEL" || a.label?.toLowerCase() === "close"
+  );
+  const otherActions = actions?.filter((a) => a !== closeAction) ?? [];
+  const effectiveCloseAction = closeAction ?? { event: void 0};
+  const content = /* @__PURE__ */ jsx(Card, { variant: "elevated", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
+    /* @__PURE__ */ jsxs(HStack, { justify: "end", align: "center", gap: "xs", children: [
+      otherActions.map((action, idx) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: action.variant || "secondary",
+          size: "sm",
+          action: action.event,
+          actionPayload: { row: normalizedData },
+          icon: action.icon,
+          "data-testid": action.event ? `action-${action.event}` : void 0,
+          children: action.label
+        },
+        idx
+      )),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          action: effectiveCloseAction.event,
+          actionPayload: { row: normalizedData },
+          onClick: effectiveCloseAction.event ? void 0 : handleClose,
+          icon: X,
+          "data-testid": effectiveCloseAction.event ? `action-${effectiveCloseAction.event}` : "action-close"
+        }
+      )
+    ] }),
+    avatar,
+    /* @__PURE__ */ jsx(Typography, { variant: "h2", weight: "bold", children: title || "Details" }),
+    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: subtitle }),
+    /* @__PURE__ */ jsxs(HStack, { gap: "xs", wrap: true, children: [
       normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
-        (f) => f.toLowerCase().includes("progress") || f.toLowerCase().includes("percent")
+        (f) => f.toLowerCase().includes("status") || f.toLowerCase().includes("priority")
       ).map((field) => {
         const value = getNestedValue(normalizedData, field);
-        if (value === void 0 || value === null || typeof value !== "number")
-          return null;
-        return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "w-full", children: [
-          /* @__PURE__ */ jsxs(HStack, { justify: "between", children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatFieldLabel(field) }),
-            /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", children: [
-              value,
-              "%"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx(ProgressBar, { value })
-        ] }, field);
-      }),
-      actions && actions.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(HStack, { gap: "sm", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
-          Button,
+        if (!value) return null;
+        return /* @__PURE__ */ jsx(
+          Badge,
           {
-            variant: action.variant || "secondary",
-            action: action.event,
-            actionPayload: { row: normalizedData },
-            icon: action.icon,
-            "data-testid": action.event ? `action-${action.event}` : void 0,
-            children: action.label
+            variant: getBadgeVariant(field, String(value)),
+            children: String(value)
           },
-          idx
-        )) })
-      ] })
-    ] }) }),
-    sections && sections.map((section, sectionIdx) => /* @__PURE__ */ jsx(Card, { variant: "bordered", children: /* @__PURE__ */ jsxs(VStack, { gap: "md", className: "p-6", children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "h4", weight: "semibold", children: section.title }),
+          field
+        );
+      }),
+      status && /* @__PURE__ */ jsx(Badge, { variant: status.variant ?? "default", children: status.label })
+    ] }),
+    normalizedData && effectiveFieldNames && effectiveFieldNames.filter(
+      (f) => f.toLowerCase().includes("progress") || f.toLowerCase().includes("percent")
+    ).map((field) => {
+      const value = getNestedValue(normalizedData, field);
+      if (value === void 0 || value === null || typeof value !== "number")
+        return null;
+      return /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "w-full", children: [
+        /* @__PURE__ */ jsxs(HStack, { justify: "between", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: formatFieldLabel(field) }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "small", weight: "medium", children: [
+            value,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ProgressBar, { value })
+      ] }, field);
+    }),
+    allFields.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Divider, {}),
-      /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "250px", maxCols: 2, gap: "lg", children: section.fields.map((field, fieldIdx) => {
-        const fieldKey = typeof field === "string" ? field : void 0;
-        const resolved = typeof field === "string" ? { label: formatFieldLabel(field), value: normalizedData ? formatFieldValue(getNestedValue(normalizedData, field), field) : "\u2014", icon: getFieldIcon(field) } : field;
-        return /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", "data-field": fieldKey, children: [
-          resolved.icon && /* @__PURE__ */ jsx(
-            Icon,
+      /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "250px", maxCols: 2, gap: "lg", children: allFields.map((field, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "start", children: [
+        field.icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            icon: field.icon,
+            size: "md",
+            className: "text-[var(--color-muted-foreground)] mt-1"
+          }
+        ),
+        /* @__PURE__ */ jsxs(VStack, { gap: "xs", flex: true, className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
             {
-              icon: resolved.icon,
-              size: "md",
-              className: "text-[var(--color-muted-foreground)] mt-1"
+              variant: "small",
+              color: "secondary",
+              weight: "medium",
+              children: field.label
             }
           ),
-          /* @__PURE__ */ jsxs(VStack, { gap: "xs", flex: true, className: "min-w-0", children: [
-            /* @__PURE__ */ jsx(
-              Typography,
-              {
-                variant: "small",
-                color: "secondary",
-                weight: "medium",
-                children: resolved.label
-              }
-            ),
-            /* @__PURE__ */ jsx(Typography, { variant: "body", className: "break-words", children: resolved.value || "\u2014" })
-          ] })
-        ] }, fieldIdx);
-      }) })
-    ] }) }, sectionIdx)),
-    footer && /* @__PURE__ */ jsx(Card, { variant: "bordered", children: footer })
-  ] });
+          /* @__PURE__ */ jsx(Typography, { variant: "body", className: "break-words", children: field.value || "\u2014" })
+        ] })
+      ] }, idx)) })
+    ] }),
+    footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      footer
+    ] })
+  ] }) });
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -7484,7 +9106,7 @@ var layoutStyles = {
   horizontal: "flex flex-row flex-wrap items-end",
   inline: "flex flex-row flex-wrap items-center"
 };
-var gapStyles5 = {
+var gapStyles6 = {
   sm: "gap-2",
   md: "gap-4",
   lg: "gap-6"
@@ -7580,7 +9202,7 @@ var Form = ({
   const normalizedInitialData = initialData ?? {};
   const resolvedEntity = entity && typeof entity === "object" && !Array.isArray(entity) ? entity : void 0;
   const entityName = typeof entity === "string" ? entity : resolvedEntity?.name;
-  const entityDerivedFields = React41__default.useMemo(() => {
+  const entityDerivedFields = React50__default.useMemo(() => {
     if (fields && fields.length > 0) return void 0;
     if (!resolvedEntity) return void 0;
     return resolvedEntity.fields.map(
@@ -7599,14 +9221,14 @@ var Form = ({
   const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
   const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
   const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-  const [formData, setFormData] = React41__default.useState(
+  const [formData, setFormData] = React50__default.useState(
     normalizedInitialData
   );
-  const [collapsedSections, setCollapsedSections] = React41__default.useState(
+  const [collapsedSections, setCollapsedSections] = React50__default.useState(
     /* @__PURE__ */ new Set()
   );
   const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-  const evalContext = React41__default.useMemo(
+  const evalContext = React50__default.useMemo(
     () => ({
       formValues: formData,
       globalVariables: externalContext?.globalVariables ?? {},
@@ -7615,13 +9237,13 @@ var Form = ({
     }),
     [formData, externalContext]
   );
-  React41__default.useEffect(() => {
+  React50__default.useEffect(() => {
     const data = initialData;
     if (data && Object.keys(data).length > 0) {
       setFormData(data);
     }
   }, [initialData]);
-  const processCalculations = React41__default.useCallback(
+  const processCalculations = React50__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!hiddenCalculations.length) return;
       const context = {
@@ -7646,7 +9268,7 @@ var Form = ({
     },
     [hiddenCalculations, externalContext, eventBus]
   );
-  const checkViolations = React41__default.useCallback(
+  const checkViolations = React50__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!violationTriggers.length) return;
       const context = {
@@ -7683,7 +9305,7 @@ var Form = ({
     processCalculations(name, newFormData);
     checkViolations(name, newFormData);
   };
-  const isFieldVisible = React41__default.useCallback(
+  const isFieldVisible = React50__default.useCallback(
     (fieldName) => {
       const condition = conditionalFields[fieldName];
       if (!condition) return true;
@@ -7691,7 +9313,7 @@ var Form = ({
     },
     [conditionalFields, evalContext]
   );
-  const isSectionVisible = React41__default.useCallback(
+  const isSectionVisible = React50__default.useCallback(
     (section) => {
       if (!section.condition) return true;
       return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -7723,7 +9345,7 @@ var Form = ({
       eventBus.emit(`UI:${onCancel}`);
     }
   };
-  const renderField = React41__default.useCallback(
+  const renderField = React50__default.useCallback(
     (field) => {
       const fieldName = field.name || field.field;
       if (!fieldName) return null;
@@ -7744,7 +9366,7 @@ var Form = ({
     [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
   );
   const effectiveFields = entityDerivedFields ?? fields;
-  const normalizedFields = React41__default.useMemo(() => {
+  const normalizedFields = React50__default.useMemo(() => {
     if (!effectiveFields || effectiveFields.length === 0) return [];
     return effectiveFields.map((field) => {
       if (typeof field === "string") {
@@ -7753,7 +9375,7 @@ var Form = ({
       return field;
     });
   }, [effectiveFields]);
-  const schemaFields = React41__default.useMemo(() => {
+  const schemaFields = React50__default.useMemo(() => {
     if (normalizedFields.length === 0) return null;
     if (isDebugEnabled()) {
       debugGroup(`Form: ${entityName || "unknown"}`);
@@ -7763,7 +9385,7 @@ var Form = ({
     }
     return normalizedFields.map(renderField).filter(Boolean);
   }, [normalizedFields, renderField, entityName, conditionalFields]);
-  const sectionElements = React41__default.useMemo(() => {
+  const sectionElements = React50__default.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return sections.map((section) => {
       if (!isSectionVisible(section)) {
@@ -7943,7 +9565,7 @@ var Form = ({
   return /* @__PURE__ */ jsxs(
     "form",
     {
-      className: cn(layoutStyles[layout], gapStyles5[gap], className),
+      className: cn(layoutStyles[layout], gapStyles6[gap], className),
       onSubmit: handleSubmit,
       ...props,
       children: [
@@ -8011,9 +9633,37 @@ function formatDateTimeValue(value) {
 Form.displayName = "Form";
 function normalizeFields(fields) {
   if (!fields) return [];
-  return fields.map((f) => typeof f === "string" ? f : f.key);
+  return fields.map((f) => typeof f === "string" ? f : f.key ?? f.name ?? "");
 }
-var gapStyles6 = {
+function fieldLabel3(key) {
+  return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function asBooleanValue2(value) {
+  if (typeof value === "boolean") return value;
+  if (value === "true") return true;
+  if (value === "false") return false;
+  return null;
+}
+var STATUS_FIELDS = /* @__PURE__ */ new Set(["status", "state", "priority", "type", "category", "role", "level", "tier"]);
+function isDateField(key) {
+  const lower = key.toLowerCase();
+  return lower.includes("date") || lower.includes("time") || lower.endsWith("at") || lower.endsWith("_at");
+}
+function formatDate3(value) {
+  if (!value) return "";
+  const d = new Date(String(value));
+  if (isNaN(d.getTime())) return String(value);
+  return d.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function statusVariant3(value) {
+  const v = value.toLowerCase();
+  if (["active", "completed", "done", "approved", "published", "resolved", "open"].includes(v)) return "success";
+  if (["pending", "in_progress", "in-progress", "review", "draft", "processing"].includes(v)) return "warning";
+  if (["inactive", "deleted", "rejected", "failed", "error", "blocked", "closed"].includes(v)) return "error";
+  if (["new", "created", "scheduled", "queued"].includes(v)) return "info";
+  return "default";
+}
+var gapStyles7 = {
   none: "gap-0",
   sm: "gap-2",
   md: "gap-4",
@@ -8045,7 +9695,8 @@ var CardGrid = ({
   fieldNames,
   columns,
   itemActions,
-  showTotal = true
+  showTotal = true,
+  imageField
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
@@ -8057,6 +9708,28 @@ var CardGrid = ({
   const handlePageChange = (newPage) => {
     eventBus.emit("UI:PAGINATE", { page: newPage, pageSize });
   };
+  const titleField = effectiveFieldNames?.[0];
+  const statusField = effectiveFieldNames?.find((f) => STATUS_FIELDS.has(f.toLowerCase()));
+  const bodyFields = effectiveFieldNames?.filter((f) => f !== titleField && f !== statusField) ?? [];
+  const primaryActions = itemActions?.filter((a) => a.variant !== "danger") ?? [];
+  const dangerActions = itemActions?.filter((a) => a.variant === "danger") ?? [];
+  const handleActionClick = (action, itemData) => (e) => {
+    e.stopPropagation();
+    if (action.navigatesTo) {
+      const url = action.navigatesTo.replace(/\{\{row\.(\w+(?:\.\w+)*)\}\}/g, (_, field) => {
+        const value = getNestedValue(itemData, field);
+        return value !== void 0 && value !== null ? String(value) : "";
+      });
+      eventBus.emit("UI:NAVIGATE", { url, row: itemData });
+      return;
+    }
+    if (action.event) {
+      eventBus.emit(`UI:${action.event}`, { row: itemData });
+    }
+    if (action.onClick) {
+      action.onClick(itemData);
+    }
+  };
   const renderContent = () => {
     if (children) {
       return children;
@@ -8071,62 +9744,85 @@ var CardGrid = ({
       ] }) });
     }
     if (normalizedData.length === 0) {
-      return /* @__PURE__ */ jsx(Box, { className: "col-span-full text-center py-8 text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: "No items found" }) });
+      return /* @__PURE__ */ jsx(Box, { className: "col-span-full text-center py-12 text-[var(--color-muted-foreground)]", children: /* @__PURE__ */ jsx(Typography, { variant: "body", color: "secondary", children: t("empty.noItems") || "No items found" }) });
     }
     return normalizedData.map((item, index) => {
       const itemData = item;
       const id = itemData.id || String(index);
-      const cardFields = effectiveFieldNames || Object.keys(itemData).slice(0, 3);
-      const handleActionClick = (action) => (e) => {
-        e.stopPropagation();
-        if (action.navigatesTo) {
-          const url = action.navigatesTo.replace(/\{\{row\.(\w+(?:\.\w+)*)\}\}/g, (_, field) => {
-            const value = getNestedValue(itemData, field);
-            return value !== void 0 && value !== null ? String(value) : "";
-          });
-          eventBus.emit("UI:NAVIGATE", { url, row: itemData });
-          return;
-        }
-        if (action.event) {
-          eventBus.emit(`UI:${action.event}`, { row: itemData });
-        }
-        if (action.onClick) {
-          action.onClick(itemData);
-        }
-      };
+      const titleValue = titleField ? getNestedValue(itemData, titleField) : void 0;
+      const statusValue = statusField ? getNestedValue(itemData, statusField) : void 0;
       return /* @__PURE__ */ jsxs(
         Box,
         {
           "data-entity-row": true,
           className: cn(
-            "bg-[var(--color-card)] rounded-[var(--radius-lg)] border border-[var(--color-border)] p-4 shadow-[var(--shadow-sm)]",
-            "cursor-pointer hover:border-[var(--color-primary)] transition-colors"
+            "bg-[var(--color-card)] rounded-[var(--radius-lg)] border border-[var(--color-border)]",
+            "shadow-[var(--shadow-sm)] hover:shadow-[var(--shadow-hover)]",
+            "cursor-pointer hover:border-[var(--color-primary)] transition-all",
+            "flex flex-col"
           ),
           action: "VIEW",
           actionPayload: { row: itemData },
           children: [
-            cardFields.map((field) => {
-              const value = getNestedValue(itemData, field);
-              if (value === void 0 || value === null) return null;
-              return /* @__PURE__ */ jsxs(Box, { className: "mb-2 last:mb-0", children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "uppercase", children: field }),
-                /* @__PURE__ */ jsx(Typography, { variant: "small", children: String(value) })
-              ] }, field);
-            }),
-            itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "sm", className: "mt-3 pt-3 border-t border-[var(--color-border)]", children: itemActions.map((action, actionIdx) => {
-              const buttonVariant = action.variant || "secondary";
-              return /* @__PURE__ */ jsx(
+            imageField && (() => {
+              const imgUrl = getNestedValue(itemData, imageField);
+              if (!imgUrl || typeof imgUrl !== "string") return null;
+              return /* @__PURE__ */ jsx(Box, { className: "w-full aspect-video overflow-hidden rounded-t-[var(--radius-lg)]", children: /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: imgUrl,
+                  alt: titleValue !== void 0 ? String(titleValue) : "",
+                  className: "w-full h-full object-cover",
+                  loading: "lazy"
+                }
+              ) });
+            })(),
+            /* @__PURE__ */ jsx(Box, { className: "p-4 pb-0", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
+              /* @__PURE__ */ jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+                titleValue !== void 0 && titleValue !== null && /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "font-semibold truncate", children: String(titleValue) }),
+                statusValue !== void 0 && statusValue !== null && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Badge, { variant: statusVariant3(String(statusValue)), children: String(statusValue) }) })
+              ] }),
+              dangerActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, actionIdx) => /* @__PURE__ */ jsx(
                 Button,
                 {
-                  variant: buttonVariant,
+                  variant: "ghost",
                   size: "sm",
-                  onClick: handleActionClick(action),
+                  onClick: handleActionClick(action, itemData),
                   "data-testid": action.event ? `action-${action.event}` : void 0,
+                  className: "text-[var(--color-error)] hover:bg-[var(--color-error)]/10 px-2",
                   children: action.label
                 },
                 actionIdx
-              );
-            }) })
+              )) })
+            ] }) }),
+            bodyFields.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 flex-1", children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: bodyFields.map((field) => {
+              const value = getNestedValue(itemData, field);
+              if (value === void 0 || value === null || value === "") return null;
+              const boolVal = asBooleanValue2(value);
+              if (boolVal !== null) {
+                return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between", children: [
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldLabel3(field) }),
+                  boolVal ? /* @__PURE__ */ jsx(Badge, { variant: "success", children: t("common.yes") || "Yes" }) : /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: t("common.no") || "No" })
+                ] }, field);
+              }
+              const displayValue = isDateField(field) ? formatDate3(value) : STATUS_FIELDS.has(field.toLowerCase()) ? void 0 : String(value);
+              if (!displayValue) return null;
+              return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-between", children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: fieldLabel3(field) }),
+                /* @__PURE__ */ jsx(Typography, { variant: "small", className: "text-right truncate max-w-[60%]", children: displayValue })
+              ] }, field);
+            }) }) }),
+            primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-[var(--color-border)]", children: /* @__PURE__ */ jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, actionIdx) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: action.variant === "primary" ? "primary" : "ghost",
+                size: "sm",
+                onClick: handleActionClick(action, itemData),
+                "data-testid": action.event ? `action-${action.event}` : void 0,
+                children: action.label
+              },
+              actionIdx
+            )) }) })
           ]
         },
         id
@@ -8139,7 +9835,7 @@ var CardGrid = ({
       {
         className: cn(
           "grid",
-          gapStyles6[gap],
+          gapStyles7[gap],
           alignStyles4[alignItems],
           maxCols === 1 && "grid-cols-1",
           maxCols === 2 && "sm:grid-cols-2",
@@ -8168,7 +9864,7 @@ var CardGrid = ({
 CardGrid.displayName = "CardGrid";
 function MasterDetail({
   entity,
-  masterFields = [],
+  masterFields,
   detailFields: _detailFields,
   // Captured but not used here - detail handled separately
   loading: externalLoading,
@@ -8183,6 +9879,7 @@ function MasterDetail({
   return /* @__PURE__ */ jsx(
     DataTable,
     {
+      fields: masterFields,
       columns: masterFields,
       entity,
       isLoading: loading || isLoading,
@@ -8254,7 +9951,7 @@ function GridPattern({
   style,
   children
 }) {
-  return /* @__PURE__ */ jsx(Grid2, { cols, gap, rowGap, colGap, className, style, children });
+  return /* @__PURE__ */ jsx(Grid, { cols, gap, rowGap, colGap, className, style, children });
 }
 GridPattern.displayName = "GridPattern";
 function CenterPattern({
@@ -8271,14 +9968,14 @@ function SpacerPattern({ size = "flex" }) {
   if (size === "flex") {
     return /* @__PURE__ */ jsx(Spacer, {});
   }
-  const sizeMap4 = {
+  const sizeMap8 = {
     xs: "0.25rem",
     sm: "0.5rem",
     md: "1rem",
     lg: "1.5rem",
     xl: "2rem"
   };
-  return /* @__PURE__ */ jsx(Box, { style: { width: sizeMap4[size], height: sizeMap4[size], flexShrink: 0 } });
+  return /* @__PURE__ */ jsx(Box, { style: { width: sizeMap8[size], height: sizeMap8[size], flexShrink: 0 } });
 }
 SpacerPattern.displayName = "SpacerPattern";
 function DividerPattern({
@@ -8539,7 +10236,7 @@ function InputPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React41__default.useState(value);
+  const [localValue, setLocalValue] = React50__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8576,7 +10273,7 @@ function TextareaPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React41__default.useState(value);
+  const [localValue, setLocalValue] = React50__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8607,7 +10304,7 @@ function SelectPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React41__default.useState(value);
+  const [localValue, setLocalValue] = React50__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -8636,7 +10333,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React41__default.useState(checked);
+  const [localChecked, setLocalChecked] = React50__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -8750,7 +10447,7 @@ function MenuPattern({
     ...item,
     onClick: () => emit(`UI:${item.event}`, {})
   }));
-  return /* @__PURE__ */ jsx(Menu2, { items: menuItems, trigger, position, className });
+  return /* @__PURE__ */ jsx(Menu, { items: menuItems, trigger, position, className });
 }
 MenuPattern.displayName = "MenuPattern";
 function AccordionPattern({
@@ -8813,6 +10510,35 @@ function FloatButtonPattern({
   );
 }
 FloatButtonPattern.displayName = "FloatButtonPattern";
+function MapViewPattern({
+  markers,
+  centerLat,
+  centerLng,
+  zoom,
+  height,
+  mapClickEvent,
+  markerClickEvent,
+  showClickedPin,
+  className,
+  showAttribution
+}) {
+  return /* @__PURE__ */ jsx(
+    MapView,
+    {
+      markers,
+      centerLat,
+      centerLng,
+      zoom,
+      height,
+      mapClickEvent,
+      markerClickEvent,
+      showClickedPin,
+      className,
+      showAttribution
+    }
+  );
+}
+MapViewPattern.displayName = "MapViewPattern";
 var ALLOWED_CUSTOM_COMPONENTS = [
   "div",
   "span",
@@ -9037,7 +10763,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React41__default.createElement(
+  return React50__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -9113,6 +10839,8 @@ var COMPONENT_REGISTRY = {
   ContainerPattern,
   SimpleGridPattern,
   FloatButtonPattern,
+  // Map patterns
+  MapViewPattern,
   // Custom pattern
   CustomPattern
 };
@@ -9175,7 +10903,9 @@ var PATTERN_TO_COMPONENT = {
   "simple-grid": "SimpleGridPattern",
   "float-button": "FloatButtonPattern",
   // Custom pattern
-  custom: "CustomPattern"
+  custom: "CustomPattern",
+  // Map patterns
+  "map-view": "MapViewPattern"
 };
 function getComponentForPattern(patternType) {
   const componentName = PATTERN_TO_COMPONENT[patternType];
@@ -9214,6 +10944,9 @@ function UISlotComponent({
     if (pattern === "clear") {
       return null;
     }
+    if (isPortalSlot(slot)) {
+      return /* @__PURE__ */ jsx(CompiledPortal, { slot, className, pattern, sourceTrait, children });
+    }
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -9264,6 +10997,70 @@ function UISlotComponent({
     }
   );
 }
+function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
+  const [portalRoot, setPortalRoot] = useState(null);
+  const eventBus = useUISlots();
+  useEffect(() => {
+    let root = document.getElementById("ui-slot-portal-root");
+    if (!root) {
+      root = document.createElement("div");
+      root.id = "ui-slot-portal-root";
+      document.body.appendChild(root);
+    }
+    setPortalRoot(root);
+  }, []);
+  const handleDismiss = () => {
+    eventBus.clear(slot);
+  };
+  if (!portalRoot) return null;
+  let wrapper;
+  switch (slot) {
+    case "modal":
+      wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-pattern": pattern,
+          "data-source-trait": sourceTrait,
+          children
+        }
+      ) });
+      break;
+    case "drawer":
+      wrapper = /* @__PURE__ */ jsx(Drawer, { isOpen: true, onClose: handleDismiss, position: "right", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-pattern": pattern,
+          "data-source-trait": sourceTrait,
+          children
+        }
+      ) });
+      break;
+    case "toast":
+      wrapper = /* @__PURE__ */ jsx(Box, { className: "fixed top-4 right-4 z-50", children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-pattern": pattern,
+          "data-source-trait": sourceTrait,
+          children
+        }
+      ) });
+      break;
+    default:
+      wrapper = /* @__PURE__ */ jsx(
+        Box,
+        {
+          className: cn("ui-slot", `ui-slot-${slot}`, className),
+          "data-pattern": pattern,
+          "data-source-trait": sourceTrait,
+          children
+        }
+      );
+  }
+  return createPortal(wrapper, portalRoot);
+}
 function SlotPortal({
   slot,
   content,
@@ -9451,4 +11248,4 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
-export { Accordion, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DataTable, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FloatingActionButton, Form, FormField, FormSectionHeader, Grid2 as Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LoadingState, MarkdownContent, MasterDetail, Menu2 as Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatCard, StateIndicator, SuspenseConfigProvider, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite };
+export { Accordion, ActionButtons, Alert, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Center, ChartLegend, Checkbox, CodeBlock, ConditionalWrapper, Container, ControlButton, DPad, DataGrid, DataList, DataTable, DateRangeSelector, DayCell, DetailPanel, Divider, Drawer, EmptyState, EntityDisplayEvents, ErrorBoundary, ErrorState, FilterGroup, Flex, FlipCard, FlipContainer, FloatingActionButton, Form, FormField, FormSectionHeader, GraphView, Grid, HStack, Heading, HealthBar, Icon, Input, InputGroup, Label, LawReferenceTooltip, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Modal, Overlay, PageHeader, Pagination, Popover, ProgressBar, ProgressDots, QuizBlock, Radio, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, Spacer, Spinner, Sprite, Stack, StatBadge, StatCard, StateIndicator, SuspenseConfigProvider, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Toast, Tooltip, Typography, UISlotComponent, UISlotRenderer, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite };