@almadar/ui 2.5.2 → 2.7.0

package/dist/{chunk-AL6BLHMG.js → chunk-VJP2HCLY.js}

@@ -1,14 +1,14 @@
 import { useTheme, useUISlots } from './chunk-DKQN5FVU.js';
-import { useTranslate, useQuerySingleton } from './chunk-GOZKH7QW.js';
+import { useTranslate, useInfiniteScroll, useQuerySingleton, useLongPress, useSwipeGesture, useDragReorder, usePullToRefresh } from './chunk-WGJIL4YR.js';
 import { useEventBus } from './chunk-YXZM3WCF.js';
-import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from './chunk-KKCVDUK7.js';
+import { cn, debugGroup, debug, debugGroupEnd, getNestedValue, isDebugEnabled } from './chunk-RPYMP7ZC.js';
 import { isPortalSlot } from './chunk-K2D5D3WK.js';
 import { __publicField } from './chunk-PKBMQBKP.js';
 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 { Loader2, ChevronDown, X, ArrowRight, TrendingDown, TrendingUp, Check, Copy, AlertCircle, User, Sun, Moon, FileQuestion, Inbox, Search, Info, XCircle, CheckCircle, AlertTriangle, ChevronRight, Filter, Plus, ChevronLeft, HelpCircle, ChevronUp, Minus, Star, FileWarning, Upload, MoreHorizontal, 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 * as React69 from 'react';
+import React69__default, { useCallback, useState, useRef, 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';
@@ -157,7 +157,7 @@ var iconSizeStyles = {
   md: "h-4 w-4",
   lg: "h-5 w-5"
 };
-var Button = React50__default.forwardRef(
+var Button = React69__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -215,7 +215,7 @@ var Button = React50__default.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React50__default.forwardRef(
+var Input = React69__default.forwardRef(
   ({
     className,
     inputType,
@@ -327,7 +327,7 @@ var Input = React50__default.forwardRef(
   }
 );
 Input.displayName = "Input";
-var Label = React50__default.forwardRef(
+var Label = React69__default.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "label",
@@ -347,7 +347,7 @@ var Label = React50__default.forwardRef(
   }
 );
 Label.displayName = "Label";
-var Textarea = React50__default.forwardRef(
+var Textarea = React69__default.forwardRef(
   ({ className, error, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -370,7 +370,7 @@ var Textarea = React50__default.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var Select = React50__default.forwardRef(
+var Select = React69__default.forwardRef(
   ({ className, options, placeholder, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsxs(
@@ -406,7 +406,7 @@ var Select = React50__default.forwardRef(
   }
 );
 Select.displayName = "Select";
-var Checkbox = React50__default.forwardRef(
+var Checkbox = React69__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: [
@@ -472,7 +472,7 @@ var shadowStyles = {
   md: "shadow-[var(--shadow-main)]",
   lg: "shadow-[var(--shadow-lg)]"
 };
-var Card = React50__default.forwardRef(
+var Card = React69__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -508,9 +508,9 @@ var Card = React50__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React69__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React69__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -523,11 +523,11 @@ var CardTitle = React50__default.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React69__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React50__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React69__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -573,8 +573,8 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React50__default.forwardRef(
-  ({ className, variant = "default", size = "sm", label, icon, children, ...props }, ref) => {
+var Badge = React69__default.forwardRef(
+  ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes2 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
       const I = resolveIcon(icon);
@@ -593,7 +593,7 @@ var Badge = React50__default.forwardRef(
         ...props,
         children: [
           resolvedIcon,
-          children || label
+          children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label)
         ]
       }
     );
@@ -606,7 +606,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React50__default.forwardRef(
+var Spinner = React69__default.forwardRef(
   ({ className, size = "md", ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -871,7 +871,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React50__default.forwardRef(
+var Box = React69__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -1216,7 +1216,7 @@ var ProgressBar = ({
   return null;
 };
 ProgressBar.displayName = "ProgressBar";
-var Radio = React50__default.forwardRef(
+var Radio = React69__default.forwardRef(
   ({
     label,
     helperText,
@@ -1320,7 +1320,7 @@ var Radio = React50__default.forwardRef(
   }
 );
 Radio.displayName = "Radio";
-var Switch = React50.forwardRef(
+var Switch = React69.forwardRef(
   ({
     checked,
     defaultChecked = false,
@@ -1331,10 +1331,10 @@ var Switch = React50.forwardRef(
     name,
     className
   }, ref) => {
-    const [isChecked, setIsChecked] = React50.useState(
+    const [isChecked, setIsChecked] = React69.useState(
       checked !== void 0 ? checked : defaultChecked
     );
-    React50.useEffect(() => {
+    React69.useEffect(() => {
       if (checked !== void 0) {
         setIsChecked(checked);
       }
@@ -1467,7 +1467,8 @@ var Stack = ({
   role,
   tabIndex,
   action,
-  actionPayload
+  actionPayload,
+  responsive = false
 }) => {
   const eventBus = useEventBus();
   const handleClick = (e) => {
@@ -1476,7 +1477,8 @@ var Stack = ({
     }
     onClick?.(e);
   };
-  const directionClass = direction === "horizontal" ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
+  const isHorizontal = direction === "horizontal";
+  const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
   return /* @__PURE__ */ jsx(
     Component,
     {
@@ -2005,8 +2007,8 @@ var LawReferenceTooltip = ({
   position = "top",
   className
 }) => {
-  const [isVisible, setIsVisible] = React50__default.useState(false);
-  const timeoutRef = React50__default.useRef(null);
+  const [isVisible, setIsVisible] = React69__default.useState(false);
+  const timeoutRef = React69__default.useRef(null);
   const handleMouseEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => setIsVisible(true), 200);
@@ -2015,7 +2017,7 @@ var LawReferenceTooltip = ({
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setIsVisible(false);
   };
-  React50__default.useEffect(() => {
+  React69__default.useEffect(() => {
     return () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
@@ -2182,6 +2184,567 @@ function TimeSlotCell({
   );
 }
 TimeSlotCell.displayName = "TimeSlotCell";
+var statusColors = {
+  online: "bg-[var(--color-success)]",
+  offline: "bg-[var(--color-muted-foreground)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+  warning: "bg-[var(--color-warning)]",
+  critical: "bg-[var(--color-error)]"
+};
+var pulseRingColors = {
+  online: "ring-[var(--color-success)]",
+  offline: "ring-[var(--color-muted-foreground)]",
+  away: "ring-[var(--color-warning)]",
+  busy: "ring-[var(--color-error)]",
+  warning: "ring-[var(--color-warning)]",
+  critical: "ring-[var(--color-error)]"
+};
+var sizeStyles5 = {
+  sm: "w-2 h-2",
+  md: "w-2.5 h-2.5",
+  lg: "w-3 h-3"
+};
+var StatusDot = React69__default.forwardRef(
+  ({ className, status = "offline", pulse = false, size = "md", label, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-block rounded-full flex-shrink-0",
+          statusColors[status],
+          sizeStyles5[size],
+          pulse && [
+            "animate-pulse",
+            "ring-2 ring-offset-1",
+            pulseRingColors[status],
+            "ring-opacity-40"
+          ],
+          className
+        ),
+        role: "status",
+        "aria-label": label ?? status,
+        ...props
+      }
+    );
+  }
+);
+StatusDot.displayName = "StatusDot";
+var sizeStyles6 = {
+  sm: { icon: "w-3 h-3", text: "text-xs" },
+  md: { icon: "w-4 h-4", text: "text-sm" },
+  lg: { icon: "w-5 h-5", text: "text-base" }
+};
+function resolveDirection(value, direction) {
+  if (direction) return direction;
+  if (value === void 0 || value === 0) return "flat";
+  return value > 0 ? "up" : "down";
+}
+function resolveColor(dir, invert) {
+  if (dir === "flat") return "text-[var(--color-muted-foreground)]";
+  const isPositive = dir === "up";
+  const isGood = invert ? !isPositive : isPositive;
+  return isGood ? "text-[var(--color-success)]" : "text-[var(--color-error)]";
+}
+var iconMap = {
+  up: TrendingUp,
+  down: TrendingDown,
+  flat: ArrowRight
+};
+var TrendIndicator = React69__default.forwardRef(
+  ({
+    className,
+    value,
+    direction,
+    showValue = true,
+    invert = false,
+    label,
+    size = "md",
+    ...props
+  }, ref) => {
+    const dir = resolveDirection(value, direction);
+    const colorClass = resolveColor(dir, invert);
+    const IconComponent = iconMap[dir];
+    const styles = sizeStyles6[size];
+    const formattedValue = value !== void 0 ? `${value > 0 ? "+" : ""}${value}%` : void 0;
+    const ariaLabel = label ?? (formattedValue ? `${dir} ${formattedValue}` : dir);
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        className: cn(
+          "inline-flex items-center gap-1 font-medium",
+          colorClass,
+          styles.text,
+          className
+        ),
+        role: "status",
+        "aria-label": ariaLabel,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(IconComponent, { className: styles.icon }),
+          showValue && formattedValue && /* @__PURE__ */ jsx("span", { children: formattedValue })
+        ]
+      }
+    );
+  }
+);
+TrendIndicator.displayName = "TrendIndicator";
+function useSafeEventBus() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var trackSizes = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2"
+};
+var thumbSizes = {
+  sm: "w-3 h-3",
+  md: "w-4 h-4",
+  lg: "w-5 h-5"
+};
+var RangeSlider = React69__default.forwardRef(
+  ({
+    className,
+    min = 0,
+    max = 100,
+    value = 0,
+    step = 1,
+    showTooltip = false,
+    showTicks = false,
+    buffered,
+    size = "md",
+    disabled = false,
+    action,
+    actionPayload,
+    onChange,
+    formatValue: formatValue4,
+    ...props
+  }, ref) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const [showTip, setShowTip] = useState(false);
+    const inputRef = useRef(null);
+    const eventBus = useSafeEventBus();
+    const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
+    const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
+    const displayValue = formatValue4 ? formatValue4(value) : String(value);
+    const handleChange = useCallback(
+      (e) => {
+        const newValue = Number(e.target.value);
+        onChange?.(newValue);
+        if (action) {
+          eventBus.emit(`UI:${action}`, { ...actionPayload, value: newValue });
+        }
+      },
+      [onChange, action, actionPayload, eventBus]
+    );
+    const tickCount = showTicks ? Math.min(Math.floor((max - min) / step), 20) : 0;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "relative w-full",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full py-2", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-x-0 rounded-full bg-[var(--color-muted)]",
+                  trackSizes[size]
+                ),
+                style: { top: "50%", transform: "translateY(-50%)" }
+              }
+            ),
+            bufferedPercentage !== void 0 && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-muted-foreground)] opacity-30",
+                  trackSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  left: 0,
+                  width: `${bufferedPercentage}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-primary)]",
+                  trackSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  left: 0,
+                  width: `${percentage}%`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "range",
+                min,
+                max,
+                step,
+                value,
+                disabled,
+                onChange: handleChange,
+                onMouseDown: () => {
+                  setIsDragging(true);
+                  setShowTip(true);
+                },
+                onMouseUp: () => {
+                  setIsDragging(false);
+                  setShowTip(false);
+                },
+                onTouchStart: () => {
+                  setIsDragging(true);
+                  setShowTip(true);
+                },
+                onTouchEnd: () => {
+                  setIsDragging(false);
+                  setShowTip(false);
+                },
+                onFocus: () => setShowTip(true),
+                onBlur: () => {
+                  if (!isDragging) setShowTip(false);
+                },
+                className: cn(
+                  "absolute inset-0 w-full opacity-0 cursor-pointer",
+                  disabled && "cursor-not-allowed",
+                  // Thumb sizing via pseudo-element
+                  "[&::-webkit-slider-thumb]:appearance-none",
+                  "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
+                  "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5"
+                ),
+                style: { height: "100%", margin: 0 },
+                "aria-label": props["aria-label"] ?? "Range slider",
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": value,
+                "aria-valuetext": displayValue
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute rounded-full bg-[var(--color-primary-foreground)]",
+                  "border-2 border-[var(--color-primary)]",
+                  "shadow-[var(--shadow-sm)]",
+                  "pointer-events-none",
+                  "transition-transform duration-100",
+                  isDragging && "scale-110",
+                  thumbSizes[size]
+                ),
+                style: {
+                  top: "50%",
+                  transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(1.1)" : ""}`,
+                  left: `${percentage}%`
+                }
+              }
+            ),
+            showTooltip && showTip && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -top-8 px-2 py-0.5 rounded",
+                  "bg-[var(--color-foreground)] text-[var(--color-background)]",
+                  "text-xs font-medium whitespace-nowrap",
+                  "pointer-events-none"
+                ),
+                style: {
+                  left: `${percentage}%`,
+                  transform: "translateX(-50%)"
+                },
+                children: displayValue
+              }
+            )
+          ] }),
+          showTicks && tickCount > 0 && /* @__PURE__ */ jsx("div", { className: "relative w-full h-2 mt-1", children: Array.from({ length: tickCount + 1 }, (_, i) => {
+            const tickPercent = i / tickCount * 100;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute w-px h-1.5 bg-[var(--color-muted-foreground)]",
+                style: { left: `${tickPercent}%` }
+              },
+              i
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+RangeSlider.displayName = "RangeSlider";
+function easeOut(t) {
+  return t * (2 - t);
+}
+var AnimatedCounter = ({
+  value,
+  duration = 600,
+  prefix,
+  suffix,
+  className
+}) => {
+  const [displayValue, setDisplayValue] = useState(value);
+  const previousValueRef = useRef(value);
+  const animationFrameRef = useRef(null);
+  useEffect(() => {
+    const from = previousValueRef.current;
+    const to = value;
+    previousValueRef.current = value;
+    if (from === to) {
+      setDisplayValue(to);
+      return;
+    }
+    const startTime = performance.now();
+    const diff = to - from;
+    function animate(currentTime) {
+      const elapsed = currentTime - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easeOut(progress);
+      setDisplayValue(from + diff * easedProgress);
+      if (progress < 1) {
+        animationFrameRef.current = requestAnimationFrame(animate);
+      } else {
+        setDisplayValue(to);
+      }
+    }
+    animationFrameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [value, duration]);
+  const decimalPlaces = Number.isInteger(value) ? 0 : String(value).split(".")[1]?.length ?? 0;
+  const formattedValue = displayValue.toFixed(decimalPlaces);
+  return /* @__PURE__ */ jsxs(Typography, { variant: "h3", className: cn("tabular-nums", className), children: [
+    prefix,
+    formattedValue,
+    suffix
+  ] });
+};
+AnimatedCounter.displayName = "AnimatedCounter";
+var InfiniteScrollSentinel = ({
+  loadMoreEvent,
+  loadMorePayload,
+  isLoading = false,
+  hasMore = true,
+  threshold = "200px",
+  className
+}) => {
+  const eventBus = useEventBus();
+  const onLoadMore = useCallback(() => {
+    eventBus.emit(`UI:${loadMoreEvent}`, loadMorePayload ?? {});
+  }, [eventBus, loadMoreEvent, loadMorePayload]);
+  const { sentinelRef } = useInfiniteScroll(onLoadMore, {
+    rootMargin: threshold,
+    hasMore,
+    isLoading
+  });
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className: cn("flex items-center justify-center py-4", className),
+      children: [
+        /* @__PURE__ */ jsx(Box, { ref: sentinelRef, className: "h-1 w-full", "aria-hidden": "true" }),
+        isLoading && /* @__PURE__ */ jsx(Spinner, { size: "sm" })
+      ]
+    }
+  );
+};
+InfiniteScrollSentinel.displayName = "InfiniteScrollSentinel";
+var CONFETTI_COLORS = [
+  "var(--color-primary)",
+  "var(--color-success)",
+  "var(--color-warning)",
+  "var(--color-error)",
+  "gold",
+  "dodgerblue"
+];
+var particleIdCounter = 0;
+function createParticles(count) {
+  return Array.from({ length: count }, () => {
+    particleIdCounter += 1;
+    return {
+      id: particleIdCounter,
+      color: CONFETTI_COLORS[Math.floor(Math.random() * CONFETTI_COLORS.length)],
+      left: 30 + Math.random() * 40,
+      delay: Math.random() * 300,
+      angle: Math.random() * 360,
+      distance: 40 + Math.random() * 80,
+      rotation: Math.random() * 720 - 360,
+      size: 4 + Math.random() * 6
+    };
+  });
+}
+var ConfettiEffect = ({
+  trigger,
+  duration = 2e3,
+  particleCount = 30,
+  className
+}) => {
+  const [particles, setParticles] = useState([]);
+  const previousTriggerRef = useRef(false);
+  useEffect(() => {
+    const wasFalse = !previousTriggerRef.current;
+    previousTriggerRef.current = trigger;
+    if (trigger && wasFalse) {
+      const newParticles = createParticles(particleCount);
+      setParticles(newParticles);
+      const timer = window.setTimeout(() => {
+        setParticles([]);
+      }, duration);
+      return () => {
+        window.clearTimeout(timer);
+      };
+    }
+    return void 0;
+  }, [trigger, particleCount, duration]);
+  if (particles.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      position: "absolute",
+      className: cn(
+        "inset-0 pointer-events-none overflow-hidden z-50",
+        className
+      ),
+      "aria-hidden": "true",
+      children: [
+        particles.map((p) => {
+          const rad = p.angle * Math.PI / 180;
+          const tx = Math.cos(rad) * p.distance;
+          const ty = Math.sin(rad) * p.distance - 20;
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "absolute rounded-sm",
+              style: {
+                left: `${p.left}%`,
+                top: "50%",
+                width: p.size,
+                height: p.size,
+                backgroundColor: p.color,
+                animation: `confetti-burst ${duration - p.delay}ms ease-out ${p.delay}ms forwards`,
+                opacity: 0,
+                // Use CSS custom properties for the animation endpoint
+                // @ts-expect-error -- CSS custom properties are not typed in CSSProperties
+                "--confetti-tx": `${tx}px`,
+                "--confetti-ty": `${ty}px`,
+                "--confetti-rotate": `${p.rotation}deg`
+              }
+            },
+            p.id
+          );
+        }),
+        /* @__PURE__ */ jsx("style", { children: `
+        @keyframes confetti-burst {
+          0% {
+            opacity: 1;
+            transform: translate(0, 0) rotate(0deg) scale(1);
+          }
+          70% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+            transform: translate(var(--confetti-tx), var(--confetti-ty)) rotate(var(--confetti-rotate)) scale(0.5);
+          }
+        }
+      ` })
+      ]
+    }
+  );
+};
+ConfettiEffect.displayName = "ConfettiEffect";
+var TypewriterText = ({
+  text,
+  speed = 40,
+  startDelay = 0,
+  className,
+  onComplete
+}) => {
+  const [charCount, setCharCount] = useState(0);
+  const [started, setStarted] = useState(startDelay === 0);
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+  useEffect(() => {
+    if (startDelay <= 0) {
+      setStarted(true);
+      return void 0;
+    }
+    setStarted(false);
+    setCharCount(0);
+    const delayTimer = window.setTimeout(() => {
+      setStarted(true);
+    }, startDelay);
+    return () => {
+      window.clearTimeout(delayTimer);
+    };
+  }, [startDelay, text]);
+  useEffect(() => {
+    setCharCount(0);
+  }, [text]);
+  useEffect(() => {
+    if (!started) return void 0;
+    if (charCount >= text.length) {
+      onCompleteRef.current?.();
+      return void 0;
+    }
+    const interval = window.setInterval(() => {
+      setCharCount((prev) => {
+        const next = prev + 1;
+        if (next >= text.length) {
+          window.clearInterval(interval);
+        }
+        return next;
+      });
+    }, speed);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [started, text, speed, charCount]);
+  const isComplete = charCount >= text.length;
+  const displayedText = text.slice(0, charCount);
+  return /* @__PURE__ */ jsxs(Typography, { variant: "body", className: cn("inline", className), children: [
+    displayedText,
+    !isComplete && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "inline-block w-[2px] h-[1em] bg-[var(--color-foreground)] ml-[1px] align-text-bottom animate-pulse",
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+};
+TypewriterText.displayName = "TypewriterText";
 var heartIcon = (filled, size) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -2264,9 +2827,9 @@ function ScoreDisplay({
   animated = true,
   locale = "en-US"
 }) {
-  const [displayValue, setDisplayValue] = React50.useState(value);
-  const [isAnimating, setIsAnimating] = React50.useState(false);
-  React50.useEffect(() => {
+  const [displayValue, setDisplayValue] = React69.useState(value);
+  const [isAnimating, setIsAnimating] = React69.useState(false);
+  React69.useEffect(() => {
     if (!animated || displayValue === value) {
       setDisplayValue(value);
       return;
@@ -2339,9 +2902,9 @@ function ControlButton({
   className
 }) {
   const eventBus = useEventBus();
-  const [isPressed, setIsPressed] = React50.useState(false);
+  const [isPressed, setIsPressed] = React69.useState(false);
   const actualPressed = pressed ?? isPressed;
-  const handlePointerDown = React50.useCallback(
+  const handlePointerDown = React69.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -2351,7 +2914,7 @@ function ControlButton({
     },
     [disabled, pressEvent, eventBus, onPress]
   );
-  const handlePointerUp = React50.useCallback(
+  const handlePointerUp = React69.useCallback(
     (e) => {
       e.preventDefault();
       if (disabled) return;
@@ -2361,7 +2924,7 @@ function ControlButton({
     },
     [disabled, releaseEvent, eventBus, onRelease]
   );
-  const handlePointerLeave = React50.useCallback(
+  const handlePointerLeave = React69.useCallback(
     (e) => {
       if (isPressed) {
         setIsPressed(false);
@@ -2589,7 +3152,7 @@ var ErrorState = ({
   );
 };
 ErrorState.displayName = "ErrorState";
-var ErrorBoundary = class extends React50__default.Component {
+var ErrorBoundary = class extends React69__default.Component {
   constructor(props) {
     super(props);
     __publicField(this, "reset", () => {
@@ -2993,7 +3556,7 @@ var variantIconColors = {
   warning: "text-[var(--color-warning)]",
   error: "text-[var(--color-error)]"
 };
-var iconMap = {
+var iconMap2 = {
   info: Info,
   success: CheckCircle,
   warning: AlertTriangle,
@@ -3032,7 +3595,7 @@ var Alert = ({
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
           Icon,
           {
-            icon: iconMap[variant],
+            icon: iconMap2[variant],
             size: "md",
             className: variantIconColors[variant]
           }
@@ -3144,7 +3707,7 @@ var Breadcrumb = ({
   );
 };
 Breadcrumb.displayName = "Breadcrumb";
-function useSafeEventBus() {
+function useSafeEventBus2() {
   try {
     return useEventBus();
   } catch {
@@ -3165,7 +3728,7 @@ var ButtonGroup = ({
   entity: _entity,
   filters
 }) => {
-  const eventBus = useSafeEventBus();
+  const eventBus = useSafeEventBus2();
   const variantClasses2 = {
     default: "gap-0",
     segmented: "gap-0 [&>button]:rounded-none [&>button:first-child]:rounded-l-lg [&>button:last-child]:rounded-r-lg [&>button:not(:first-child)]:border-l-0",
@@ -3631,11 +4194,19 @@ function Card2({
   children,
   onClick,
   className = "",
-  action
+  action,
+  longPressEvent,
+  longPressPayload
 }) {
   const eventBus = useEventBus();
   const { t } = useTranslate();
   const isClickable = !!onClick || !!action;
+  const handleLongPress = useCallback(() => {
+    if (longPressEvent) {
+      eventBus.emit(`UI:${longPressEvent}`, longPressPayload ?? {});
+    }
+  }, [longPressEvent, longPressPayload, eventBus]);
+  const longPress = useLongPress(handleLongPress);
   const handleClick = () => {
     if (action) eventBus.emit(`UI:${action}`, {});
     onClick?.();
@@ -3654,6 +4225,12 @@ function Card2({
       role: isClickable ? "button" : void 0,
       tabIndex: isClickable ? 0 : void 0,
       onKeyDown: isClickable ? (e) => e.key === "Enter" && handleClick() : void 0,
+      ...longPressEvent ? {
+        onPointerDown: longPress.onPointerDown,
+        onPointerMove: longPress.onPointerMove,
+        onPointerUp: longPress.onPointerUp,
+        onPointerCancel: longPress.onPointerCancel
+      } : {},
       children: [
         image && /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-t-lg", children: /* @__PURE__ */ jsx(
           "img",
@@ -3694,7 +4271,7 @@ function Card2({
   );
 }
 Card2.displayName = "Card";
-var sizeStyles5 = {
+var sizeStyles7 = {
   xs: "max-w-xs",
   // 320px
   sm: "max-w-screen-sm",
@@ -3731,7 +4308,7 @@ var Container = ({
     {
       className: cn(
         "w-full",
-        sizeStyles5[resolvedSize],
+        sizeStyles7[resolvedSize],
         paddingStyles3[padding],
         center && "mx-auto",
         className
@@ -4197,8 +4774,8 @@ var Menu = ({
     "bottom-start": "top-full left-0 mt-2",
     "bottom-end": "top-full right-0 mt-2"
   };
-  const triggerChild = React50__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
-  const triggerElement = React50__default.cloneElement(
+  const triggerChild = React69__default.isValidElement(trigger) ? trigger : /* @__PURE__ */ jsx("span", { children: trigger });
+  const triggerElement = React69__default.cloneElement(
     triggerChild,
     {
       ref: triggerRef,
@@ -4314,11 +4891,15 @@ var Modal = ({
   closeOnOverlayClick = true,
   closeOnEscape = true,
   className,
-  closeEvent
+  closeEvent,
+  swipeDownToClose = true
 }) => {
   const eventBus = useEventBus();
   const modalRef = useRef(null);
   const previousActiveElement = useRef(null);
+  const [dragY, setDragY] = useState(0);
+  const dragStartY = useRef(0);
+  const isDragging = useRef(false);
   useEffect(() => {
     if (isOpen) {
       previousActiveElement.current = document.activeElement;
@@ -4371,7 +4952,11 @@ var Modal = ({
         className: "z-40"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "fixed inset-0 z-50 pointer-events-none",
+      "flex items-center justify-center p-4",
+      "max-sm:items-end max-sm:p-0"
+    ), children: /* @__PURE__ */ jsxs(
       Box,
       {
         ref: modalRef,
@@ -4382,12 +4967,47 @@ var Modal = ({
         className: cn(
           "pointer-events-auto w-full flex flex-col max-h-[90vh]",
           sizeClasses4[size],
+          "max-sm:max-w-full max-sm:max-h-[85vh] max-sm:rounded-b-none max-sm:rounded-t-2xl",
           className
         ),
+        style: dragY > 0 ? {
+          transform: `translateY(${dragY}px)`,
+          transition: isDragging.current ? "none" : "transform 200ms ease-out"
+        } : void 0,
         role: "dialog",
         "aria-modal": "true",
         ...title && { "aria-labelledby": "modal-title" },
         children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+              onPointerDown: (e) => {
+                if (!swipeDownToClose) return;
+                dragStartY.current = e.clientY;
+                isDragging.current = true;
+                e.target.setPointerCapture(e.pointerId);
+              },
+              onPointerMove: (e) => {
+                if (!isDragging.current) return;
+                const dy = Math.max(0, e.clientY - dragStartY.current);
+                setDragY(dy);
+              },
+              onPointerUp: () => {
+                if (!isDragging.current) return;
+                isDragging.current = false;
+                if (dragY > 100) {
+                  handleClose();
+                }
+                setDragY(0);
+              },
+              onPointerCancel: () => {
+                isDragging.current = false;
+                setDragY(0);
+              },
+              children: /* @__PURE__ */ jsx("div", { className: "w-10 h-1 rounded-full bg-[var(--color-border)]" })
+            }
+          ),
           (title || showCloseButton) && /* @__PURE__ */ jsxs(
             "div",
             {
@@ -4660,8 +5280,8 @@ var Popover = ({
     onMouseEnter: handleOpen,
     onMouseLeave: handleClose
   };
-  const childElement = React50__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const triggerElement = React50__default.cloneElement(
+  const childElement = React69__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const triggerElement = React69__default.cloneElement(
     childElement,
     {
       ref: triggerRef,
@@ -5241,7 +5861,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 iconMap2 = {
+var iconMap3 = {
   success: CheckCircle,
   error: AlertCircle,
   info: Info,
@@ -5299,7 +5919,7 @@ var Toast = ({
         /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mt-0.5", children: /* @__PURE__ */ jsx(
           Icon,
           {
-            icon: iconMap2[variant],
+            icon: iconMap3[variant],
             size: "md",
             className: iconColors[variant]
           }
@@ -5391,8 +6011,8 @@ var Tooltip = ({
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const triggerElement = React50__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
-  const trigger = React50__default.cloneElement(triggerElement, {
+  const triggerElement = React69__default.isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children });
+  const trigger = React69__default.cloneElement(triggerElement, {
     ref: triggerRef,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
@@ -5641,7 +6261,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(React50__default.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React69__default.Fragment, { children: [
           /* @__PURE__ */ jsx(
             "button",
             {
@@ -5690,7 +6310,7 @@ var WizardProgress = ({
   );
 };
 WizardProgress.displayName = "WizardProgress";
-function useSafeEventBus2() {
+function useSafeEventBus3() {
   try {
     return useEventBus();
   } catch {
@@ -5719,7 +6339,7 @@ var WizardNavigation = ({
   compact = false,
   className
 }) => {
-  const eventBus = useSafeEventBus2();
+  const eventBus = useSafeEventBus3();
   const { t } = useTranslate();
   const resolvedBackLabel = backLabel ?? t("wizard.back");
   const resolvedNextLabel = nextLabel ?? t("wizard.next");
@@ -5771,7 +6391,7 @@ var WizardNavigation = ({
   );
 };
 WizardNavigation.displayName = "WizardNavigation";
-var MarkdownContent = React50__default.memo(
+var MarkdownContent = React69__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
     return /* @__PURE__ */ jsx(
@@ -5872,7 +6492,7 @@ var MarkdownContent = React50__default.memo(
   (prev, next) => prev.content === next.content && prev.className === next.className && prev.direction === next.direction
 );
 MarkdownContent.displayName = "MarkdownContent";
-var CodeBlock = React50__default.memo(
+var CodeBlock = React69__default.memo(
   ({
     code,
     language = "text",
@@ -6133,8 +6753,14 @@ function CalendarGrid({
   onSlotClick,
   onDayClick,
   onEventClick,
-  className
+  className,
+  longPressEvent,
+  longPressPayload,
+  swipeLeftEvent,
+  swipeRightEvent
 }) {
+  const eventBus = useEventBus();
+  const longPressTimer = useRef(null);
   const resolvedWeekStart = useMemo(
     () => weekStart ? getStartOfWeek(weekStart) : getStartOfWeek(/* @__PURE__ */ new Date()),
     [weekStart]
@@ -6166,6 +6792,23 @@ function CalendarGrid({
     ).length,
     [events]
   );
+  const swipeCallbacks = useMemo(() => ({
+    onSwipeLeft: swipeLeftEvent ? () => eventBus.emit(`UI:${swipeLeftEvent}`, {}) : void 0,
+    onSwipeRight: swipeRightEvent ? () => eventBus.emit(`UI:${swipeRightEvent}`, {}) : void 0
+  }), [swipeLeftEvent, swipeRightEvent, eventBus]);
+  const swipe = useSwipeGesture(swipeCallbacks);
+  const clearLongPress = useCallback(() => {
+    if (longPressTimer.current) {
+      clearTimeout(longPressTimer.current);
+      longPressTimer.current = null;
+    }
+  }, []);
+  const startLongPress = useCallback((day, time) => {
+    if (!longPressEvent) return;
+    longPressTimer.current = setTimeout(() => {
+      eventBus.emit(`UI:${longPressEvent}`, { date: day.toISOString(), time, ...longPressPayload });
+    }, 500);
+  }, [longPressEvent, longPressPayload, eventBus]);
   const renderEvent = (event) => /* @__PURE__ */ jsx(
     Box,
     {
@@ -6181,70 +6824,87 @@ function CalendarGrid({
     },
     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(
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: cn("overflow-x-auto", className),
+      ...swipeLeftEvent || swipeRightEvent ? {
+        onPointerDown: swipe.onPointerDown,
+        onPointerMove: swipe.onPointerMove,
+        onPointerUp: swipe.onPointerUp,
+        onPointerCancel: swipe.onPointerCancel
+      } : {},
+      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: "border-l border-[var(--color-border)]",
+            className: "grid grid-cols-8 border-b border-[var(--color-border)]",
             children: [
-              /* @__PURE__ */ jsx(
-                DayCell,
+              /* @__PURE__ */ jsx(Box, { className: "p-2 text-right pr-3", children: /* @__PURE__ */ jsx(
+                Typography,
                 {
-                  date: day,
-                  isToday,
-                  onClick: onDayClick
+                  variant: "small",
+                  className: "text-[var(--color-muted-foreground)]",
+                  children: time
                 }
-              ),
-              count > 0 && /* @__PURE__ */ jsx(Box, { className: "text-center pb-1", children: /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: count }) })
+              ) }),
+              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"
+                    ),
+                    ...longPressEvent ? {
+                      onPointerDown: () => startLongPress(day, time),
+                      onPointerUp: clearLongPress,
+                      onPointerCancel: clearLongPress
+                    } : {},
+                    children: /* @__PURE__ */ jsx(VStack, { gap: "xs", children: slotEvents.map(renderEvent) })
+                  },
+                  `${day.toISOString()}-${time}`
+                );
+              })
             ]
           },
-          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
-    )) })
-  ] }) });
+          time
+        )) })
+      ] })
+    }
+  );
 }
 CalendarGrid.displayName = "CalendarGrid";
 var RepeatableFormSection = ({
@@ -6880,8 +7540,8 @@ function DPad({
 }) {
   const eventBus = useEventBus();
   const sizes = sizeMap5[size];
-  const [activeDirections, setActiveDirections] = React50.useState(/* @__PURE__ */ new Set());
-  const handlePress = React50.useCallback(
+  const [activeDirections, setActiveDirections] = React69.useState(/* @__PURE__ */ new Set());
+  const handlePress = React69.useCallback(
     (direction) => {
       setActiveDirections((prev) => new Set(prev).add(direction));
       if (directionEvent) eventBus.emit(`UI:${directionEvent}`, { direction, pressed: true });
@@ -6889,7 +7549,7 @@ function DPad({
     },
     [directionEvent, eventBus, onDirection]
   );
-  const handleRelease = React50.useCallback(
+  const handleRelease = React69.useCallback(
     (direction) => {
       setActiveDirections((prev) => {
         const next = new Set(prev);
@@ -6947,8 +7607,8 @@ function ActionButtons({
   disabled
 }) {
   const eventBus = useEventBus();
-  const [activeButtons, setActiveButtons] = React50.useState(/* @__PURE__ */ new Set());
-  const handlePress = React50.useCallback(
+  const [activeButtons, setActiveButtons] = React69.useState(/* @__PURE__ */ new Set());
+  const handlePress = React69.useCallback(
     (id) => {
       setActiveButtons((prev) => new Set(prev).add(id));
       if (actionEvent) eventBus.emit(`UI:${actionEvent}`, { id, pressed: true });
@@ -6956,7 +7616,7 @@ function ActionButtons({
     },
     [actionEvent, eventBus, onAction]
   );
-  const handleRelease = React50.useCallback(
+  const handleRelease = React69.useCallback(
     (id) => {
       setActiveButtons((prev) => {
         const next = new Set(prev);
@@ -7545,217 +8205,667 @@ function MapView({
     }
   );
 }
-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);
+function useSafeEventBus4() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
   }
 }
-var gapStyles5 = {
-  none: "gap-0",
-  sm: "gap-2",
-  md: "gap-4",
-  lg: "gap-6",
-  xl: "gap-8"
+var sizeStyles8 = {
+  sm: {
+    button: "w-7 h-7",
+    text: "text-sm min-w-[2rem]",
+    icon: "w-3 h-3"
+  },
+  md: {
+    button: "w-9 h-9",
+    text: "text-base min-w-[2.5rem]",
+    icon: "w-4 h-4"
+  },
+  lg: {
+    button: "w-11 h-11",
+    text: "text-lg min-w-[3rem]",
+    icon: "w-5 h-5"
+  }
 };
-var DataGrid = ({
-  entity,
-  fields: fieldsProp,
-  columns: columnsProp,
-  itemActions,
-  cols,
-  gap = "md",
-  minCardWidth = 280,
+var LONG_PRESS_DELAY = 400;
+var LONG_PRESS_INTERVAL = 100;
+var NumberStepper = ({
+  value = 0,
+  min,
+  max,
+  step = 1,
+  size = "md",
+  disabled = false,
+  onChange,
+  action,
+  actionPayload,
   className,
-  isLoading = false,
-  error = null,
-  imageField
+  label
 }) => {
-  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 eventBus = useSafeEventBus4();
+  const intervalRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const isAtMin = min !== void 0 && value <= min;
+  const isAtMax = max !== void 0 && value >= max;
+  const styles = sizeStyles8[size];
+  const emitChange = useCallback(
+    (newValue) => {
+      const clamped = Math.round(newValue / step) * step;
+      const finalValue = Math.max(min ?? -Infinity, Math.min(max ?? Infinity, clamped));
+      onChange?.(finalValue);
+      if (action) {
+        eventBus.emit(`UI:${action}`, { ...actionPayload, value: finalValue });
+      }
+    },
+    [onChange, action, actionPayload, eventBus, min, max, step]
+  );
+  const startLongPress = useCallback(
+    (delta) => {
+      timeoutRef.current = setTimeout(() => {
+        intervalRef.current = setInterval(() => {
+          emitChange(value + delta);
+        }, LONG_PRESS_INTERVAL);
+      }, LONG_PRESS_DELAY);
+    },
+    [emitChange, value]
+  );
+  const stopLongPress = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      stopLongPress();
+    };
+  }, [stopLongPress]);
+  const handleDecrement = () => {
+    if (!isAtMin) emitChange(value - step);
   };
-  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" }) });
+  const handleIncrement = () => {
+    if (!isAtMax) emitChange(value + step);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "inline-flex items-center",
+        "rounded-[var(--radius-sm)]",
+        "border-[length:var(--border-width)] border-[var(--color-border)]",
+        "bg-[var(--color-surface)]",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      role: "group",
+      "aria-label": label ?? "Number stepper",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleDecrement,
+            onMouseDown: () => !isAtMin && startLongPress(-step),
+            onMouseUp: stopLongPress,
+            onMouseLeave: stopLongPress,
+            onTouchStart: () => !isAtMin && startLongPress(-step),
+            onTouchEnd: stopLongPress,
+            disabled: disabled || isAtMin,
+            className: cn(
+              "inline-flex items-center justify-center",
+              "rounded-l-[var(--radius-sm)]",
+              "text-[var(--color-foreground)]",
+              "hover:bg-[var(--color-muted)]",
+              "active:bg-[var(--color-muted)]",
+              "transition-colors duration-100",
+              "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-inset",
+              styles.button
+            ),
+            "aria-label": "Decrease",
+            children: /* @__PURE__ */ jsx(Minus, { className: styles.icon })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-center font-medium tabular-nums",
+              "text-[var(--color-foreground)]",
+              "border-x-[length:var(--border-width)] border-[var(--color-border)]",
+              "px-1 select-none",
+              styles.text
+            ),
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleIncrement,
+            onMouseDown: () => !isAtMax && startLongPress(step),
+            onMouseUp: stopLongPress,
+            onMouseLeave: stopLongPress,
+            onTouchStart: () => !isAtMax && startLongPress(step),
+            onTouchEnd: stopLongPress,
+            disabled: disabled || isAtMax,
+            className: cn(
+              "inline-flex items-center justify-center",
+              "rounded-r-[var(--radius-sm)]",
+              "text-[var(--color-foreground)]",
+              "hover:bg-[var(--color-muted)]",
+              "active:bg-[var(--color-muted)]",
+              "transition-colors duration-100",
+              "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
+              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-[var(--color-ring)] focus:ring-inset",
+              styles.button
+            ),
+            "aria-label": "Increase",
+            children: /* @__PURE__ */ jsx(Plus, { className: styles.icon })
+          }
+        )
+      ]
+    }
+  );
+};
+NumberStepper.displayName = "NumberStepper";
+function useSafeEventBus5() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
   }
+}
+var sizeStyles9 = {
+  sm: { star: "w-4 h-4", gap: "gap-0.5" },
+  md: { star: "w-6 h-6", gap: "gap-1" },
+  lg: { star: "w-8 h-8", gap: "gap-1.5" }
+};
+var StarRating = ({
+  value = 0,
+  max = 5,
+  readOnly = false,
+  precision = "full",
+  size = "md",
+  action,
+  actionPayload,
+  onChange,
+  className,
+  label
+}) => {
+  const [hoverValue, setHoverValue] = useState(null);
+  const eventBus = useSafeEventBus5();
+  const styles = sizeStyles9[size];
+  const displayValue = hoverValue ?? value;
+  const emitChange = useCallback(
+    (newValue) => {
+      onChange?.(newValue);
+      if (action) {
+        eventBus.emit(`UI:${action}`, { ...actionPayload, value: newValue });
+      }
+    },
+    [onChange, action, actionPayload, eventBus]
+  );
+  const handleStarClick = (starIndex, isHalf) => {
+    if (readOnly) return;
+    const newValue = isHalf && precision === "half" ? starIndex + 0.5 : starIndex + 1;
+    emitChange(newValue);
+  };
+  const handleStarHover = (starIndex, isHalf) => {
+    if (readOnly) return;
+    const newValue = isHalf && precision === "half" ? starIndex + 0.5 : starIndex + 1;
+    setHoverValue(newValue);
+  };
+  const handleKeyDown = (e) => {
+    if (readOnly) return;
+    const stepSize = precision === "half" ? 0.5 : 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      emitChange(Math.min(max, value + stepSize));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      emitChange(Math.max(0, value - stepSize));
+    }
+  };
   return /* @__PURE__ */ jsx(
-    Box,
+    "div",
     {
-      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 ?? "");
+      className: cn(
+        "inline-flex items-center",
+        styles.gap,
+        !readOnly && "cursor-pointer",
+        className
+      ),
+      role: readOnly ? "img" : "slider",
+      "aria-label": label ?? `Rating: ${value} out of ${max}`,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      tabIndex: readOnly ? void 0 : 0,
+      onKeyDown: handleKeyDown,
+      onMouseLeave: () => setHoverValue(null),
+      children: Array.from({ length: max }, (_, i) => {
+        const fillLevel = Math.max(0, Math.min(1, displayValue - i));
+        const isFull = fillLevel >= 1;
+        const isHalf = fillLevel >= 0.5 && fillLevel < 1;
         return /* @__PURE__ */ jsxs(
-          Box,
+          "span",
           {
-            "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"
-            ),
+            className: "relative inline-block",
+            onClick: () => handleStarClick(i, false),
+            onMouseMove: (e) => {
+              if (readOnly) return;
+              const rect = e.currentTarget.getBoundingClientRect();
+              const isLeftHalf = e.clientX - rect.left < rect.width / 2;
+              handleStarHover(i, isLeftHalf);
+            },
             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);
+              /* @__PURE__ */ jsx(
+                Star,
+                {
+                  className: cn(
+                    styles.star,
+                    "text-[var(--color-muted)]",
+                    "transition-colors duration-100"
+                  ),
+                  strokeWidth: 1.5
                 }
-                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,
+              ),
+              (isFull || isHalf) && /* @__PURE__ */ jsx(
+                Star,
                 {
-                  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
-              )) }) })
+                  className: cn(
+                    styles.star,
+                    "absolute inset-0",
+                    "text-[var(--color-warning)] fill-[var(--color-warning)]",
+                    "transition-colors duration-100"
+                  ),
+                  strokeWidth: 1.5,
+                  style: isHalf ? { clipPath: "inset(0 50% 0 0)" } : void 0
+                }
+              ),
+              !readOnly && precision === "half" && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "absolute inset-0 w-1/2",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleStarClick(i, true);
+                  }
+                }
+              )
             ]
           },
-          id
+          i
         );
       })
     }
   );
 };
-DataGrid.displayName = "DataGrid";
-function fieldLabel2(key) {
+StarRating.displayName = "StarRating";
+function useSafeEventBus6() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024)}KB`;
+  return `${Math.round(bytes / (1024 * 1024))}MB`;
+}
+var UploadDropZone = ({
+  accept,
+  maxSize,
+  maxFiles = 1,
+  label = "Drop files here or click to browse",
+  description,
+  disabled = false,
+  action,
+  actionPayload,
+  onFiles,
+  className
+}) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  const eventBus = useSafeEventBus6();
+  const defaultDescription = [
+    accept ? `Accepted: ${accept}` : null,
+    maxSize ? `Max size: ${formatFileSize(maxSize)}` : null,
+    maxFiles > 1 ? `Up to ${maxFiles} files` : null
+  ].filter(Boolean).join(". ");
+  const validateFiles = useCallback(
+    (files) => {
+      if (files.length > maxFiles) {
+        return { valid: [], error: `Maximum ${maxFiles} file${maxFiles > 1 ? "s" : ""} allowed` };
+      }
+      if (accept) {
+        const acceptedTypes = accept.split(",").map((t) => t.trim());
+        const invalid = files.filter((file) => {
+          return !acceptedTypes.some((type) => {
+            if (type.endsWith("/*")) {
+              return file.type.startsWith(type.replace("/*", "/"));
+            }
+            return file.type === type || file.name.endsWith(type);
+          });
+        });
+        if (invalid.length > 0) {
+          return { valid: [], error: `Invalid file type: ${invalid[0].name}` };
+        }
+      }
+      if (maxSize) {
+        const tooLarge = files.filter((file) => file.size > maxSize);
+        if (tooLarge.length > 0) {
+          return {
+            valid: [],
+            error: `File too large: ${tooLarge[0].name} (max ${formatFileSize(maxSize)})`
+          };
+        }
+      }
+      return { valid: files, error: null };
+    },
+    [accept, maxSize, maxFiles]
+  );
+  const handleFiles = useCallback(
+    (files) => {
+      const { valid, error: validationError } = validateFiles(files);
+      setError(validationError);
+      if (valid.length > 0) {
+        onFiles?.(valid);
+        if (action) {
+          eventBus.emit(`UI:${action}`, {
+            ...actionPayload,
+            files: valid.map((f) => ({ name: f.name, size: f.size, type: f.type }))
+          });
+        }
+      }
+    },
+    [validateFiles, onFiles, action, actionPayload, eventBus]
+  );
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) setIsDragOver(true);
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+    if (disabled) return;
+    const files = Array.from(e.dataTransfer.files);
+    handleFiles(files);
+  };
+  const handleClick = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleInputChange = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    if (files.length > 0) handleFiles(files);
+    e.target.value = "";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative flex flex-col items-center justify-center",
+        "p-8 rounded-[var(--radius-sm)]",
+        "border-2 border-dashed",
+        "transition-colors duration-150",
+        "cursor-pointer",
+        isDragOver ? "border-[var(--color-primary)] bg-[var(--color-primary)] bg-opacity-5" : "border-[var(--color-border)] bg-[var(--color-surface)]",
+        error && "border-[var(--color-error)]",
+        disabled && "opacity-50 cursor-not-allowed",
+        "hover:border-[var(--color-primary)] hover:bg-[var(--color-muted)]",
+        className
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: handleClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple: maxFiles > 1,
+            onChange: handleInputChange,
+            className: "hidden",
+            disabled,
+            "aria-hidden": "true"
+          }
+        ),
+        error ? /* @__PURE__ */ jsx(Icon, { icon: FileWarning, size: "lg", className: "text-[var(--color-error)] mb-2" }) : /* @__PURE__ */ jsx(Icon, { icon: Upload, size: "lg", className: "text-[var(--color-muted-foreground)] mb-2" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "text-center font-medium mb-1", children: isDragOver ? "Drop files here" : label }),
+        error ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", className: "text-center", children: error }) : /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "muted", className: "text-center", children: description ?? defaultDescription })
+      ]
+    }
+  );
+};
+UploadDropZone.displayName = "UploadDropZone";
+function useSafeEventBus7() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var Lightbox = ({
+  images,
+  currentIndex = 0,
+  isOpen = false,
+  showCounter = true,
+  closeAction,
+  onClose,
+  onIndexChange,
+  className
+}) => {
+  const [index, setIndex] = useState(currentIndex);
+  const [touchStartX, setTouchStartX] = useState(null);
+  const eventBus = useSafeEventBus7();
+  useEffect(() => {
+    setIndex(currentIndex);
+  }, [currentIndex]);
+  const handleClose = useCallback(() => {
+    if (closeAction) {
+      eventBus.emit(`UI:${closeAction}`, {});
+    }
+    onClose?.();
+  }, [closeAction, eventBus, onClose]);
+  const goTo = useCallback(
+    (newIndex) => {
+      const clamped = Math.max(0, Math.min(images.length - 1, newIndex));
+      setIndex(clamped);
+      onIndexChange?.(clamped);
+    },
+    [images.length, onIndexChange]
+  );
+  const goPrev = useCallback(() => goTo(index - 1), [goTo, index]);
+  const goNext = useCallback(() => goTo(index + 1), [goTo, index]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case "Escape":
+          handleClose();
+          break;
+        case "ArrowLeft":
+          goPrev();
+          break;
+        case "ArrowRight":
+          goNext();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleClose, goPrev, goNext]);
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }
+  }, [isOpen]);
+  if (!isOpen || images.length === 0) return null;
+  const currentImage = images[index];
+  const hasPrev = index > 0;
+  const hasNext = index < images.length - 1;
+  const handleTouchStart = (e) => {
+    setTouchStartX(e.touches[0].clientX);
+  };
+  const handleTouchEnd = (e) => {
+    if (touchStartX === null) return;
+    const diff = e.changedTouches[0].clientX - touchStartX;
+    const threshold = 50;
+    if (diff > threshold && hasPrev) goPrev();
+    if (diff < -threshold && hasNext) goNext();
+    setTouchStartX(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        "bg-black bg-opacity-90",
+        className
+      ),
+      onClick: handleClose,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": currentImage?.alt ?? "Image viewer",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            },
+            className: cn(
+              "absolute top-4 right-4 z-10",
+              "p-2 rounded-full",
+              "text-white bg-black bg-opacity-50",
+              "hover:bg-opacity-70 transition-opacity",
+              "focus:outline-none focus:ring-2 focus:ring-white"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(X, { className: "w-6 h-6" })
+          }
+        ),
+        hasPrev && images.length > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              goPrev();
+            },
+            className: cn(
+              "absolute left-4 z-10",
+              "p-2 rounded-full",
+              "text-white bg-black bg-opacity-50",
+              "hover:bg-opacity-70 transition-opacity",
+              "focus:outline-none focus:ring-2 focus:ring-white"
+            ),
+            "aria-label": "Previous image",
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-8 h-8" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex items-center justify-center w-full h-full p-12",
+            onClick: (e) => e.stopPropagation(),
+            onTouchStart: handleTouchStart,
+            onTouchEnd: handleTouchEnd,
+            children: currentImage && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: currentImage.src,
+                alt: currentImage.alt ?? "",
+                className: "max-w-full max-h-full object-contain select-none",
+                draggable: false
+              }
+            )
+          }
+        ),
+        hasNext && images.length > 1 && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              goNext();
+            },
+            className: cn(
+              "absolute right-4 z-10",
+              "p-2 rounded-full",
+              "text-white bg-black bg-opacity-50",
+              "hover:bg-opacity-70 transition-opacity",
+              "focus:outline-none focus:ring-2 focus:ring-white"
+            ),
+            "aria-label": "Next image",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-8 h-8" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-4 left-0 right-0 text-center", children: [
+          showCounter && images.length > 1 && /* @__PURE__ */ jsxs("div", { className: "text-white text-sm mb-1", children: [
+            index + 1,
+            " of ",
+            images.length
+          ] }),
+          currentImage?.caption && /* @__PURE__ */ jsx("div", { className: "text-white text-sm opacity-80 px-8", children: currentImage.caption })
+        ] })
+      ]
+    }
+  );
+};
+Lightbox.displayName = "Lightbox";
+function fieldLabel(key) {
   return key.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_-]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
 }
-function statusVariant2(value) {
+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";
@@ -7763,17 +8873,17 @@ function statusVariant2(value) {
   if (["new", "created", "scheduled", "queued", "info"].includes(v)) return "info";
   return "default";
 }
-function formatDate2(value) {
+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 formatValue2(value, format) {
+function formatValue(value, format) {
   if (value === void 0 || value === null) return "";
   switch (format) {
     case "date":
-      return formatDate2(value);
+      return formatDate(value);
     case "currency":
       return typeof value === "number" ? `$${value.toFixed(2)}` : String(value);
     case "number":
@@ -7786,31 +8896,81 @@ function formatValue2(value, format) {
       return String(value);
   }
 }
-var DataList = ({
+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,
-  gap = "none",
-  variant = "default",
+  cols,
+  gap = "md",
+  minCardWidth = 280,
   className,
   isLoading = false,
-  error = null
+  error = null,
+  imageField,
+  selectable = false,
+  selectionEvent,
+  infiniteScroll,
+  loadMoreEvent,
+  hasMore,
+  children,
+  pageSize = 0
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
+  const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const [visibleCount, setVisibleCount] = useState(pageSize || Infinity);
   const fields = fieldsProp ?? columnsProp ?? [];
-  const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
+  const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
+  const toggleSelection = useCallback((id) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      if (selectionEvent) {
+        eventBus.emit(`UI:${selectionEvent}`, { selectedIds: Array.from(next) });
+      }
+      return next;
+    });
+  }, [selectionEvent, eventBus]);
+  const toggleAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      const allIds2 = data.map((item, i) => item.id || String(i));
+      const allSelected2 = allIds2.length > 0 && allIds2.every((id) => prev.has(id));
+      const next = allSelected2 ? /* @__PURE__ */ new Set() : new Set(allIds2);
+      if (selectionEvent) {
+        eventBus.emit(`UI:${selectionEvent}`, { selectedIds: Array.from(next) });
+      }
+      return next;
+    });
+  }, [data, selectionEvent, eventBus]);
   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 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 });
+    eventBus.emit(`UI:${action.event}`, { id: itemData.id, 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..." }) });
   }
@@ -7820,126 +8980,1428 @@ var DataList = ({
   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(
+  const hasRenderProp = typeof children === "function";
+  const allIds = data.map((item, i) => item.id || String(i));
+  const allSelected = allIds.length > 0 && allIds.every((id) => selectedIds.has(id));
+  const someSelected = selectedIds.size > 0;
+  return /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+    selectable && someSelected && /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "items-center px-2 py-2 bg-[var(--color-muted)] rounded-[var(--radius-sm)]", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allSelected,
+          onChange: toggleAll,
+          className: "w-4 h-4 accent-[var(--color-primary)]",
+          "aria-label": "Select all"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "font-semibold", children: [
+        selectedIds.size,
+        " ",
+        t("common.selected") || "selected"
+      ] })
+    ] }),
+    /* @__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 isSelected = selectedIds.has(id);
+          if (hasRenderProp) {
+            return /* @__PURE__ */ jsx(
+              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",
+                  "p-4",
+                  isSelected && "ring-2 ring-[var(--color-primary)] border-[var(--color-primary)]"
+                ),
+                children: children(itemData, index)
+              },
+              id
+            );
+          }
+          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",
+                isSelected && "ring-2 ring-[var(--color-primary)] border-[var(--color-primary)]"
+              ),
+              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: [
+                  selectable && /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: isSelected,
+                      onChange: () => toggleSelection(id),
+                      onClick: (e) => e.stopPropagation(),
+                      className: "w-4 h-4 mt-1 flex-shrink-0 accent-[var(--color-primary)]",
+                      "aria-label": `Select ${titleValue !== void 0 ? String(titleValue) : "item"}`
+                    }
+                  ),
+                  /* @__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
+          );
+        })
+      }
+    ),
+    hasMoreLocal && /* @__PURE__ */ jsx(Box, { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setVisibleCount((prev) => prev + (pageSize || 5)),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "xs", className: "mr-1" }),
+          t("common.showMore") || "Show More",
+          " (",
+          allData.length - visibleCount,
+          " remaining)"
+        ]
+      }
+    ) }),
+    infiniteScroll && loadMoreEvent && /* @__PURE__ */ jsx(
+      InfiniteScrollSentinel,
+      {
+        loadMoreEvent,
+        isLoading,
+        hasMore
+      }
+    )
+  ] });
+};
+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);
+  }
+}
+function groupData(items, field) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = String(getNestedValue(item, field) ?? "");
+    const group = groups.get(key);
+    if (group) group.push(item);
+    else groups.set(key, [item]);
+  }
+  return Array.from(groups.entries()).map(([label, groupItems]) => ({ label, items: groupItems }));
+}
+var DataList = ({
+  entity,
+  fields: fieldsProp,
+  columns: columnsProp,
+  itemActions,
+  gap = "none",
+  variant = "default",
+  groupBy,
+  senderField,
+  currentUser,
+  className,
+  isLoading = false,
+  error = null,
+  // Gesture props: reorderable, swipeLeftEvent, swipeRightEvent, longPressEvent
+  // are consumed by the compiler to wrap items in SwipeableRow/SortableList.
+  // DataList destructures them here to prevent DOM passthrough.
+  reorderable: _reorderable,
+  reorderEvent: _reorderEvent,
+  swipeLeftEvent: _swipeLeftEvent,
+  swipeLeftActions: _swipeLeftActions,
+  swipeRightEvent: _swipeRightEvent,
+  swipeRightActions: _swipeRightActions,
+  longPressEvent: _longPressEvent,
+  infiniteScroll,
+  loadMoreEvent,
+  hasMore,
+  children,
+  pageSize = 5
+}) => {
+  const eventBus = useEventBus();
+  const { t } = useTranslate();
+  const [visibleCount, setVisibleCount] = React69__default.useState(pageSize || Infinity);
+  const fields = fieldsProp ?? columnsProp ?? [];
+  const allData = Array.isArray(entity) ? entity : entity ? [entity] : [];
+  const data = pageSize > 0 ? allData.slice(0, visibleCount) : allData;
+  const hasMoreLocal = pageSize > 0 && visibleCount < allData.length;
+  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}`, { id: itemData.id, 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";
+  const isMessage = variant === "message";
+  if (isMessage) {
+    const items2 = data.map((item) => item);
+    const groups2 = groupBy ? groupData(items2, groupBy) : [{ label: "", items: items2 }];
+    const contentField = titleField?.name ?? fields[0]?.name ?? "";
+    return /* @__PURE__ */ jsx(VStack, { gap: "sm", className: cn("py-2", className), children: groups2.map((group, gi) => /* @__PURE__ */ jsxs(React69__default.Fragment, { children: [
+      group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: "my-2" }),
+      group.items.map((itemData, index) => {
+        const id = itemData.id || `${gi}-${index}`;
+        const sender = senderField ? String(getNestedValue(itemData, senderField) ?? "") : "";
+        const isSent = Boolean(currentUser && sender === currentUser);
+        const content = getNestedValue(itemData, contentField);
+        const timestampField = fields.find((f) => f.format === "date");
+        const timestamp = timestampField ? getNestedValue(itemData, timestampField.name) : null;
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "flex px-4",
+              isSent ? "justify-end" : "justify-start"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                className: cn(
+                  "max-w-[75%] px-4 py-2",
+                  isSent ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-2xl rounded-br-sm" : "bg-[var(--color-muted)] text-[var(--color-foreground)] rounded-2xl rounded-bl-sm"
+                ),
+                children: [
+                  !isSent && senderField && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-semibold mb-0.5", children: sender }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "body", children: content !== void 0 && content !== null ? String(content) : "" }),
+                  timestamp != null ? /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "caption",
+                      className: cn(
+                        "mt-1 text-[0.65rem]",
+                        isSent ? "opacity-70" : "text-[var(--color-muted-foreground)]"
+                      ),
+                      children: formatDate2(timestamp)
+                    }
+                  ) : null
+                ]
+              }
+            )
+          },
+          id
+        );
+      })
+    ] }, gi)) });
+  }
+  const hasRenderProp = typeof children === "function";
+  const items = data.map((item) => item);
+  const groups = groupBy ? groupData(items, groupBy) : [{ label: "", items }];
+  const renderItem = (itemData, index, isLast) => {
+    if (hasRenderProp) {
+      const id2 = itemData.id || String(index);
+      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__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
+              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" })
+      ] }, id2);
+    }
+    const id = itemData.id || String(index);
+    const titleValue = getNestedValue(itemData, titleField?.name ?? "");
+    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);
+  };
+  return /* @__PURE__ */ jsxs(
+    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: [
+        groups.map((group, gi) => /* @__PURE__ */ jsxs(React69__default.Fragment, { children: [
+          group.label && /* @__PURE__ */ jsx(Divider, { label: group.label, className: gi > 0 ? "mt-4" : "mt-0" }),
+          group.items.map(
+            (itemData, index) => renderItem(itemData, index, gi === groups.length - 1 && index === group.items.length - 1)
+          )
+        ] }, gi)),
+        hasMoreLocal && /* @__PURE__ */ jsx(Box, { className: "flex justify-center py-3", children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setVisibleCount((prev) => prev + (pageSize || 5)),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "xs", className: "mr-1" }),
+              t("common.showMore") || "Show More",
+              " (",
+              allData.length - visibleCount,
+              " remaining)"
+            ]
+          }
+        ) }),
+        infiniteScroll && loadMoreEvent && /* @__PURE__ */ jsx(
+          InfiniteScrollSentinel,
+          {
+            loadMoreEvent,
+            isLoading,
+            hasMore
+          }
+        )
+      ]
+    }
+  );
+};
+DataList.displayName = "DataList";
+function formatValue3(value, format, max) {
+  if (value == null) return "0";
+  const v = typeof value === "number" ? value : value;
+  let formatted;
+  switch (format) {
+    case "currency":
+      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
+      break;
+    case "percent":
+      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
+      break;
+    case "number":
+      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
+      break;
+    default:
+      formatted = String(v);
+  }
+  if (max != null) return `${formatted} / ${max}`;
+  return formatted;
+}
+var variantColor = {
+  default: "text-[var(--color-foreground)]",
+  primary: "text-[var(--color-primary)]",
+  success: "text-[var(--color-success)]",
+  warning: "text-[var(--color-warning)]",
+  error: "text-[var(--color-error)]",
+  info: "text-[var(--color-info)]"
+};
+var StatDisplay = ({
+  label,
+  value,
+  max,
+  icon: iconProp,
+  iconBg = "bg-[var(--color-muted)]",
+  iconColor = "text-[var(--color-foreground)]",
+  format,
+  size = "md",
+  variant = "default",
+  compact = false,
+  className,
+  isLoading = false,
+  error = null
+}) => {
+  const ResolvedIcon = typeof iconProp === "string" ? resolveIcon(iconProp) : null;
+  const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
+  const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
+  const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
+  const displayValue = formatValue3(value, format, max);
+  if (error) {
+    return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "animate-pulse", children: [
+      /* @__PURE__ */ jsx(Box, { className: "h-3 bg-[var(--color-muted)] rounded w-16" }),
+      /* @__PURE__ */ jsx(Box, { className: "h-6 bg-[var(--color-muted)] rounded w-12" })
+    ] }) });
+  }
+  if (compact) {
+    return /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: cn("items-center", className), children: [
+      ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
+      typeof iconProp !== "string" && iconProp,
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
+    /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
+      /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+    ] }),
+    (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-[var(--radius-md)]", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
+  ] }) });
+};
+StatDisplay.displayName = "StatDisplay";
+var DEFAULT_THRESHOLDS = [
+  { value: 30, color: "var(--color-error)" },
+  { value: 70, color: "var(--color-warning)" },
+  { value: 100, color: "var(--color-success)" }
+];
+function getColorForValue(value, max, thresholds) {
+  const percentage = value / max * 100;
+  for (const threshold of thresholds) {
+    if (percentage <= threshold.value) {
+      return threshold.color;
+    }
+  }
+  return thresholds[thresholds.length - 1]?.color ?? "var(--color-primary)";
+}
+var radialSizes = {
+  sm: { size: 80, stroke: 6, fontSize: "12px" },
+  md: { size: 120, stroke: 8, fontSize: "16px" },
+  lg: { size: 160, stroke: 10, fontSize: "20px" }
+};
+var Meter = ({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  unit,
+  variant = "linear",
+  thresholds = DEFAULT_THRESHOLDS,
+  segments = 5,
+  showValue = true,
+  size = "md",
+  actions,
+  isLoading = false,
+  error,
+  className
+}) => {
+  const eventBus = useEventBus();
+  const handleAction = useCallback(
+    (action) => {
+      if (action.event) {
+        eventBus.emit(`UI:${action.event}`, { value });
+      }
+    },
+    [eventBus, value]
+  );
+  const percentage = useMemo(() => {
+    const range = max - min;
+    if (range <= 0) return 0;
+    return Math.min(Math.max((value - min) / range * 100, 0), 100);
+  }, [value, min, max]);
+  const activeColor = useMemo(
+    () => getColorForValue(value, max, thresholds),
+    [value, max, thresholds]
+  );
+  const displayValue = useMemo(() => {
+    const formatted = Number.isInteger(value) ? value : value.toFixed(1);
+    return unit ? `${formatted}${unit}` : `${formatted}`;
+  }, [value, unit]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(LoadingState, { message: "Loading meter...", className });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      ErrorState,
+      {
+        title: "Meter error",
+        message: error.message,
+        className
+      }
+    );
+  }
+  if (variant === "radial") {
+    const dims = radialSizes[size];
+    const radius = (dims.size - dims.stroke * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - percentage / 100 * circumference;
+    const center = dims.size / 2;
+    return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", children: [
+      label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
+      /* @__PURE__ */ jsxs(Box, { className: "relative inline-flex items-center justify-center", children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: dims.size,
+            height: dims.size,
+            viewBox: `0 0 ${dims.size} ${dims.size}`,
+            className: "transform -rotate-90",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: "var(--color-muted)",
+                  strokeWidth: dims.stroke
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: center,
+                  cy: center,
+                  r: radius,
+                  fill: "none",
+                  stroke: activeColor,
+                  strokeWidth: dims.stroke,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: offset,
+                  strokeLinecap: "round",
+                  className: "transition-all duration-500 ease-out"
+                }
+              )
+            ]
+          }
+        ),
+        showValue && /* @__PURE__ */ jsx(Box, { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "h5",
+            weight: "bold",
+            className: "tabular-nums",
+            style: { fontSize: dims.fontSize },
+            children: displayValue
+          }
+        ) })
+      ] }),
+      actions && actions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "default",
+          className: "cursor-pointer hover:opacity-80 transition-opacity",
+          onClick: () => handleAction(action),
+          children: action.label
+        },
+        idx
+      )) })
+    ] }) });
+  }
+  if (variant === "segmented") {
+    const activeSegments = Math.round(percentage / 100 * segments);
+    return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+      (label || showValue) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
+        label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
+        showValue && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", className: "tabular-nums", children: displayValue })
+      ] }),
+      /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "w-full", children: Array.from({ length: segments }).map((_, idx) => {
+        const isActive = idx < activeSegments;
+        const segColor = isActive ? getColorForValue((idx + 1) / segments * max, max, thresholds) : void 0;
+        return /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "h-2 flex-1 rounded-[var(--radius-sm)] transition-all duration-300",
+              !isActive && "bg-[var(--color-muted)]"
+            ),
+            style: isActive ? { backgroundColor: segColor } : void 0
+          },
+          idx
+        );
+      }) }),
+      thresholds.some((t) => t.label) && /* @__PURE__ */ jsx(HStack, { justify: "between", className: "w-full", children: thresholds.map((t, idx) => /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: t.label || "" }, idx)) })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Card, { className: cn("p-4", className), children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+    (label || showValue) && /* @__PURE__ */ jsxs(HStack, { justify: "between", align: "center", children: [
+      label && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", weight: "medium", children: label }),
+      showValue && /* @__PURE__ */ jsx(Typography, { variant: "small", weight: "bold", className: "tabular-nums", children: displayValue })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { className: "w-full h-3 bg-[var(--color-muted)] rounded-[var(--radius-full)] overflow-hidden", children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: "h-full rounded-[var(--radius-full)] transition-all duration-500 ease-out",
+        style: {
+          width: `${percentage}%`,
+          backgroundColor: activeColor
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(HStack, { justify: "between", className: "w-full", children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
+        min,
+        unit ? ` ${unit}` : ""
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
+        max,
+        unit ? ` ${unit}` : ""
+      ] })
+    ] }),
+    actions && actions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", children: actions.map((action, idx) => /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "default",
+        className: "cursor-pointer hover:opacity-80 transition-opacity",
+        onClick: () => handleAction(action),
+        children: action.label
+      },
+      idx
+    )) })
+  ] }) });
+};
+Meter.displayName = "Meter";
+function useSafeEventBus8() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var SwipeableRow = ({
+  leftActions = [],
+  rightActions = [],
+  threshold = 80,
+  children,
+  itemData,
+  className
+}) => {
+  const eventBus = useSafeEventBus8();
+  const [revealState, setRevealState] = useState("closed");
+  const [offsetX, setOffsetX] = useState(0);
+  const [isSwiping, setIsSwiping] = useState(false);
+  const startXRef = useRef(0);
+  const startYRef = useRef(0);
+  const trackingRef = useRef(false);
+  const lockedAxisRef = useRef(null);
+  const actionsWidth = threshold;
+  const handleActionClick = useCallback(
+    (action) => {
+      eventBus.emit(`UI:${action.event}`, {
+        ...action.eventPayload,
+        row: itemData
+      });
+      setRevealState("closed");
+      setOffsetX(0);
+    },
+    [eventBus, itemData]
+  );
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      startXRef.current = e.clientX;
+      startYRef.current = e.clientY;
+      trackingRef.current = true;
+      lockedAxisRef.current = null;
+      setIsSwiping(false);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    []
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!trackingRef.current) return;
+      const dx = e.clientX - startXRef.current;
+      const dy = e.clientY - startYRef.current;
+      if (lockedAxisRef.current === null && (Math.abs(dx) > 5 || Math.abs(dy) > 5)) {
+        lockedAxisRef.current = Math.abs(dx) > Math.abs(dy) ? "horizontal" : "vertical";
+      }
+      if (lockedAxisRef.current !== "horizontal") return;
+      setIsSwiping(true);
+      let newOffset = dx;
+      if (revealState === "left") {
+        newOffset = actionsWidth + dx;
+      } else if (revealState === "right") {
+        newOffset = -actionsWidth + dx;
+      }
+      const maxLeft = leftActions.length > 0 ? actionsWidth : 0;
+      const maxRight = rightActions.length > 0 ? actionsWidth : 0;
+      const clamped = Math.max(-maxRight, Math.min(maxLeft, newOffset));
+      setOffsetX(clamped);
+    },
+    [revealState, actionsWidth, leftActions.length, rightActions.length]
+  );
+  const handlePointerUp = useCallback(
+    () => {
+      trackingRef.current = false;
+      if (!isSwiping) {
+        if (revealState !== "closed") {
+          setRevealState("closed");
+          setOffsetX(0);
+        }
+        setIsSwiping(false);
+        return;
+      }
+      setIsSwiping(false);
+      if (offsetX > threshold / 2 && leftActions.length > 0) {
+        setRevealState("right");
+        setOffsetX(actionsWidth);
+      } else if (offsetX < -(threshold / 2) && rightActions.length > 0) {
+        setRevealState("left");
+        setOffsetX(-actionsWidth);
+      } else {
+        setRevealState("closed");
+        setOffsetX(0);
+      }
+    },
+    [isSwiping, offsetX, threshold, leftActions.length, rightActions.length, actionsWidth, revealState]
+  );
+  const handlePointerCancel = useCallback(() => {
+    trackingRef.current = false;
+    setIsSwiping(false);
+    setRevealState("closed");
+    setOffsetX(0);
+  }, []);
+  const renderActions = (actions, side) => {
+    if (actions.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      HStack,
+      {
+        gap: "xs",
+        align: "stretch",
+        className: cn(
+          "absolute top-0 bottom-0",
+          side === "left" ? "left-0" : "right-0"
+        ),
+        style: {
+          width: `${actionsWidth}px`
+        },
+        children: actions.map((action, idx) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: action.variant ?? "secondary",
+            size: "sm",
+            icon: action.icon,
+            onClick: () => handleActionClick(action),
+            className: "flex-1 rounded-none h-full",
+            children: [
+              action.icon ? /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "sm" }) : null,
+              action.label
+            ]
+          },
+          `${action.event}-${idx}`
+        ))
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
     Box,
     {
+      overflow: "hidden",
+      position: "relative",
       className: cn(
-        isCard && "bg-[var(--color-card)] rounded-[var(--radius-xl)] border border-[var(--color-border)] shadow-[var(--shadow-lg)] overflow-hidden",
-        !isCard && gapClass,
+        "touch-pan-y",
         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(
+      children: [
+        renderActions(leftActions, "left"),
+        renderActions(rightActions, "right"),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              transform: `translateX(${offsetX}px)`,
+              transition: isSwiping ? "none" : "transform 200ms ease-out"
+            },
+            className: cn(
+              "relative bg-[var(--color-surface)]",
+              "select-none"
+            ),
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerCancel,
+            children
+          }
+        )
+      ]
+    }
+  );
+};
+SwipeableRow.displayName = "SwipeableRow";
+function useSafeEventBus9() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+function SortableListInner({
+  items: initialItems,
+  renderItem,
+  reorderEvent,
+  reorderPayload,
+  dragHandlePosition = "left",
+  className
+}) {
+  const eventBus = useSafeEventBus9();
+  const handleReorder = useCallback(
+    (fromIndex, toIndex, item) => {
+      eventBus.emit(`UI:${reorderEvent}`, {
+        fromIndex,
+        toIndex,
+        item,
+        ...reorderPayload
+      });
+    },
+    [eventBus, reorderEvent, reorderPayload]
+  );
+  const {
+    items,
+    dragIndex,
+    dragOverIndex,
+    isDragging,
+    getDragHandleProps,
+    getItemProps
+  } = useDragReorder(initialItems, handleReorder);
+  return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: items.map((item, index) => {
+    const { "aria-dropeffect": ariaDropEffect, ...itemProps } = getItemProps(index);
+    const { "aria-grabbed": ariaGrabbed, ...handleRest } = getDragHandleProps(index);
+    const isBeingDragged = dragIndex === index;
+    const showDropIndicator = isDragging && dragOverIndex === index && dragOverIndex !== dragIndex;
+    const dragHandle = /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: cn(
+          "flex items-center justify-center",
+          "text-[var(--color-muted-foreground)]",
+          "hover:text-[var(--color-foreground)]",
+          "transition-colors duration-100",
+          "px-1"
+        ),
+        "aria-grabbed": ariaGrabbed,
+        ...handleRest,
+        children: /* @__PURE__ */ jsx(Icon, { name: "grip-vertical", size: "sm" })
+      }
+    );
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        "aria-dropeffect": ariaDropEffect,
+        ...itemProps,
+        children: [
+          showDropIndicator && /* @__PURE__ */ jsx(
             Box,
             {
+              className: "h-0.5 bg-[var(--color-primary)] rounded-full",
+              style: { margin: "0 8px" }
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            HStack,
+            {
+              gap: "sm",
+              align: "center",
               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)]"
+                "transition-opacity duration-150",
+                isBeingDragged && "opacity-50"
               ),
               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
-                    ))
-                  }
-                )
+                dragHandlePosition === "left" && dragHandle,
+                /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: renderItem(item, index) }),
+                dragHandlePosition === "right" && dragHandle
               ]
             }
-          ),
-          isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-[var(--color-border)]/40" })
-        ] }, id);
-      })
-    }
+          )
+        ]
+      },
+      index
+    );
+  }) });
+}
+var SortableList = SortableListInner;
+SortableList.displayName = "SortableList";
+function useSafeEventBus10() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var Carousel = ({
+  items,
+  renderItem,
+  autoPlay = false,
+  autoPlayInterval = 5e3,
+  showDots = true,
+  showArrows = true,
+  loop = false,
+  slideChangeEvent,
+  slideChangePayload,
+  className
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const scrollRef = useRef(null);
+  const autoPlayRef = useRef(null);
+  const eventBus = useSafeEventBus10();
+  const totalSlides = items.length;
+  const emitSlideChange = useCallback(
+    (newIndex) => {
+      if (slideChangeEvent) {
+        eventBus.emit(`UI:${slideChangeEvent}`, {
+          index: newIndex,
+          ...slideChangePayload
+        });
+      }
+    },
+    [slideChangeEvent, slideChangePayload, eventBus]
+  );
+  const scrollToSlide = useCallback(
+    (index) => {
+      const container = scrollRef.current;
+      if (!container) return;
+      const slideWidth = container.offsetWidth;
+      container.scrollTo({
+        left: slideWidth * index,
+        behavior: "smooth"
+      });
+    },
+    []
+  );
+  const goToSlide = useCallback(
+    (index) => {
+      let targetIndex = index;
+      if (loop) {
+        if (targetIndex < 0) targetIndex = totalSlides - 1;
+        if (targetIndex >= totalSlides) targetIndex = 0;
+      } else {
+        targetIndex = Math.max(0, Math.min(totalSlides - 1, targetIndex));
+      }
+      setActiveIndex(targetIndex);
+      scrollToSlide(targetIndex);
+      emitSlideChange(targetIndex);
+    },
+    [loop, totalSlides, scrollToSlide, emitSlideChange]
+  );
+  const goNext = useCallback(() => {
+    goToSlide(activeIndex + 1);
+  }, [goToSlide, activeIndex]);
+  const goPrev = useCallback(() => {
+    goToSlide(activeIndex - 1);
+  }, [goToSlide, activeIndex]);
+  const swipeHandlers = useSwipeGesture(
+    {
+      onSwipeLeft: goNext,
+      onSwipeRight: goPrev
+    },
+    { threshold: 40 }
   );
+  useEffect(() => {
+    if (!autoPlay || totalSlides <= 1) return;
+    autoPlayRef.current = setInterval(() => {
+      setActiveIndex((prev) => {
+        const next = loop ? (prev + 1) % totalSlides : Math.min(prev + 1, totalSlides - 1);
+        setTimeout(() => {
+          scrollToSlide(next);
+          emitSlideChange(next);
+        }, 0);
+        return next;
+      });
+    }, autoPlayInterval);
+    return () => {
+      if (autoPlayRef.current) {
+        clearInterval(autoPlayRef.current);
+        autoPlayRef.current = null;
+      }
+    };
+  }, [autoPlay, autoPlayInterval, loop, totalSlides, scrollToSlide, emitSlideChange]);
+  const handleScroll = useCallback(() => {
+    const container = scrollRef.current;
+    if (!container) return;
+    const slideWidth = container.offsetWidth;
+    if (slideWidth === 0) return;
+    const newIndex = Math.round(container.scrollLeft / slideWidth);
+    setActiveIndex((prev) => {
+      if (prev !== newIndex && newIndex >= 0 && newIndex < totalSlides) {
+        return newIndex;
+      }
+      return prev;
+    });
+  }, [totalSlides]);
+  const hasPrev = loop || activeIndex > 0;
+  const hasNext = loop || activeIndex < totalSlides - 1;
+  if (totalSlides === 0) return null;
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", overflow: "hidden", className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: scrollRef,
+        display: "flex",
+        overflow: "auto",
+        className: cn(
+          "w-full",
+          "scroll-smooth",
+          "scrollbar-none",
+          "[scroll-snap-type:x_mandatory]",
+          "[&::-webkit-scrollbar]:hidden",
+          "[-ms-overflow-style:none]"
+        ),
+        style: {
+          scrollSnapType: "x mandatory",
+          WebkitOverflowScrolling: "touch"
+        },
+        onScroll: handleScroll,
+        onPointerDown: swipeHandlers.onPointerDown,
+        onPointerMove: swipeHandlers.onPointerMove,
+        onPointerUp: swipeHandlers.onPointerUp,
+        onPointerCancel: swipeHandlers.onPointerCancel,
+        children: items.map((item, index) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: cn(
+              "flex-shrink-0 w-full",
+              "[scroll-snap-align:start]"
+            ),
+            style: {
+              scrollSnapAlign: "start"
+            },
+            children: renderItem(item, index)
+          },
+          index
+        ))
+      }
+    ),
+    showArrows && hasPrev && totalSlides > 1 && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        className: "left-2 top-1/2 -translate-y-1/2 z-10",
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: goPrev,
+            "aria-label": "Previous slide",
+            className: cn(
+              "rounded-full",
+              "bg-[var(--color-surface)]/80",
+              "backdrop-blur-sm",
+              "shadow-[var(--shadow-sm)]",
+              "hover:bg-[var(--color-surface)]"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" })
+          }
+        )
+      }
+    ),
+    showArrows && hasNext && totalSlides > 1 && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        className: "right-2 top-1/2 -translate-y-1/2 z-10",
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            onClick: goNext,
+            "aria-label": "Next slide",
+            className: cn(
+              "rounded-full",
+              "bg-[var(--color-surface)]/80",
+              "backdrop-blur-sm",
+              "shadow-[var(--shadow-sm)]",
+              "hover:bg-[var(--color-surface)]"
+            ),
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" })
+          }
+        )
+      }
+    ),
+    showDots && totalSlides > 1 && /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        className: "bottom-3 left-0 right-0 z-10",
+        children: /* @__PURE__ */ jsx(HStack, { gap: "xs", align: "center", justify: "center", children: items.map((_, index) => {
+          const isActive = index === activeIndex;
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn(
+                "rounded-full cursor-pointer transition-all duration-200"
+              ),
+              style: {
+                width: isActive ? 10 : 8,
+                height: isActive ? 10 : 8,
+                backgroundColor: isActive ? "var(--color-primary)" : "var(--color-muted, #d4d4d8)",
+                opacity: isActive ? 1 : 0.6
+              },
+              onClick: () => goToSlide(index),
+              role: "button",
+              "aria-label": `Go to slide ${index + 1}`
+            },
+            index
+          );
+        }) })
+      }
+    )
+  ] });
 };
-DataList.displayName = "DataList";
+Carousel.displayName = "Carousel";
+function useSafeEventBus11() {
+  try {
+    return useEventBus();
+  } catch {
+    return { emit: () => {
+    }, on: () => () => {
+    }, once: () => {
+    } };
+  }
+}
+var SAFETY_TIMEOUT_MS = 5e3;
+var PullToRefresh = ({
+  refreshEvent,
+  refreshPayload,
+  threshold = 60,
+  children,
+  className
+}) => {
+  const eventBus = useSafeEventBus11();
+  const safetyTimerRef = useRef(null);
+  const handleRefresh = useCallback(() => {
+    eventBus.emit(`UI:${refreshEvent}`, refreshPayload ?? {});
+  }, [eventBus, refreshEvent, refreshPayload]);
+  const { pullDistance, isPulling, isRefreshing, containerProps, endRefresh } = usePullToRefresh(handleRefresh, { threshold });
+  useEffect(() => {
+    if (isRefreshing) {
+      safetyTimerRef.current = setTimeout(() => {
+        endRefresh();
+      }, SAFETY_TIMEOUT_MS);
+      return () => {
+        if (safetyTimerRef.current) {
+          clearTimeout(safetyTimerRef.current);
+          safetyTimerRef.current = null;
+        }
+      };
+    }
+  }, [isRefreshing, endRefresh]);
+  useEffect(() => {
+    return () => {
+      if (safetyTimerRef.current) {
+        clearTimeout(safetyTimerRef.current);
+      }
+    };
+  }, []);
+  const pullProgress = Math.min(pullDistance / threshold, 1);
+  const showIndicator = pullDistance > 0 || isRefreshing;
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", overflow: "hidden", className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        position: "absolute",
+        display: "flex",
+        className: cn(
+          "top-0 left-0 right-0 z-10",
+          "items-center justify-center",
+          "transition-opacity duration-200",
+          showIndicator ? "opacity-100" : "opacity-0"
+        ),
+        style: {
+          height: threshold,
+          transform: `translateY(${showIndicator ? 0 : -threshold}px)`,
+          pointerEvents: "none"
+        },
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "transition-transform duration-150",
+            style: {
+              transform: `scale(${isRefreshing ? 1 : pullProgress})`,
+              opacity: isRefreshing ? 1 : pullProgress
+            },
+            children: /* @__PURE__ */ jsx(
+              Spinner,
+              {
+                size: pullProgress >= 0.5 ? "md" : "sm",
+                className: cn(
+                  "text-[var(--color-primary)]",
+                  isRefreshing && "animate-spin"
+                )
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        fullWidth: true,
+        className: cn(
+          "min-h-0",
+          isPulling && "select-none"
+        ),
+        ...containerProps,
+        children
+      }
+    )
+  ] });
+};
+PullToRefresh.displayName = "PullToRefresh";
 
 // components/organisms/types.ts
 var EntityDisplayEvents = {
@@ -8368,6 +10830,7 @@ var StatCard = ({
   // Schema-based props
   entity,
   metrics,
+  sparklineData,
   isLoading: externalLoading,
   error: externalError
 }) => {
@@ -8375,7 +10838,7 @@ var StatCard = ({
   const labelToUse = propLabel ?? propTitle;
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const handleActionClick = React50__default.useCallback(() => {
+  const handleActionClick = React69__default.useCallback(() => {
     if (action?.event) {
       eventBus.emit(`UI:${action.event}`, {});
     }
@@ -8386,7 +10849,7 @@ var StatCard = ({
   const data = Array.isArray(entity) ? entity : entity ? [entity] : [];
   const isLoading = externalLoading ?? false;
   const error = externalError;
-  const computeMetricValue = React50__default.useCallback(
+  const computeMetricValue = React69__default.useCallback(
     (metric, items) => {
       if (metric.value !== void 0) {
         return metric.value;
@@ -8425,7 +10888,7 @@ var StatCard = ({
     },
     []
   );
-  const schemaStats = React50__default.useMemo(() => {
+  const schemaStats = React69__default.useMemo(() => {
     if (!metrics || metrics.length === 0) return null;
     return metrics.map((metric) => ({
       label: metric.label,
@@ -8433,7 +10896,7 @@ var StatCard = ({
       format: metric.format
     }));
   }, [metrics, data, computeMetricValue]);
-  const calculatedTrend = React50__default.useMemo(() => {
+  const calculatedTrend = React69__default.useMemo(() => {
     if (manualTrend !== void 0) return manualTrend;
     if (previousValue === void 0 || currentValue === void 0)
       return void 0;
@@ -8513,7 +10976,35 @@ var StatCard = ({
         ] }),
         subtitle && !calculatedTrend && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "secondary", children: subtitle })
       ] }),
-      Icon2 && /* @__PURE__ */ jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsx(Icon2, { className: cn("h-6 w-6", iconColor) }) })
+      /* @__PURE__ */ jsxs(VStack, { gap: "xs", align: "end", children: [
+        Icon2 && /* @__PURE__ */ jsx(Box, { className: cn("p-3", iconBg), children: /* @__PURE__ */ jsx(Icon2, { className: cn("h-6 w-6", iconColor) }) }),
+        sparklineData && sparklineData.length > 1 && (() => {
+          const w = 80;
+          const h = 32;
+          const pad = 2;
+          const min = Math.min(...sparklineData);
+          const max = Math.max(...sparklineData);
+          const range = max - min || 1;
+          const points = sparklineData.map((v, i) => {
+            const x = pad + i / (sparklineData.length - 1) * (w - pad * 2);
+            const y = pad + (1 - (v - min) / range) * (h - pad * 2);
+            return `${x},${y}`;
+          }).join(" ");
+          const trending = sparklineData[sparklineData.length - 1] >= sparklineData[0];
+          const strokeColor = trending ? "var(--color-success)" : "var(--color-error)";
+          return /* @__PURE__ */ jsx("svg", { width: w, height: h, viewBox: `0 0 ${w} ${h}`, className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
+            "polyline",
+            {
+              fill: "none",
+              stroke: strokeColor,
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              points
+            }
+          ) });
+        })()
+      ] })
     ] }),
     action && /* @__PURE__ */ jsxs(
       Button,
@@ -8561,7 +11052,7 @@ var PageHeader = ({
       action.onClick();
     }
   };
-  const statusColors = {
+  const statusColors2 = {
     default: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
     success: "bg-[var(--color-success)]/10 text-[var(--color-success)]",
     warning: "bg-[var(--color-warning)]/10 text-[var(--color-warning)]",
@@ -8569,7 +11060,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(React50__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(React69__default.Fragment, { children: [
       idx > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", children: "/" }),
       crumb.href ? /* @__PURE__ */ jsx(
         "a",
@@ -8600,7 +11091,7 @@ var PageHeader = ({
                 variant: "small",
                 className: cn(
                   "px-2.5 py-1 rounded-[var(--radius-full)] text-xs font-medium",
-                  statusColors[status.variant || "default"]
+                  statusColors2[status.variant || "default"]
                 ),
                 children: status.label
               }
@@ -8805,7 +11296,7 @@ var DetailPanel = ({
         return;
       }
       if (action.event) {
-        eventBus.emit(`UI:${action.event}`, { row: data2 });
+        eventBus.emit(`UI:${action.event}`, { id: data2?.id, row: data2 });
       }
       if (action.onClick) {
         action.onClick();
@@ -9202,7 +11693,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 = React50__default.useMemo(() => {
+  const entityDerivedFields = React69__default.useMemo(() => {
     if (fields && fields.length > 0) return void 0;
     if (!resolvedEntity) return void 0;
     return resolvedEntity.fields.map(
@@ -9221,14 +11712,14 @@ var Form = ({
   const conditionalFields = typeof conditionalFieldsRaw === "boolean" ? {} : conditionalFieldsRaw;
   const hiddenCalculations = typeof hiddenCalculationsRaw === "boolean" ? [] : hiddenCalculationsRaw;
   const violationTriggers = typeof violationTriggersRaw === "boolean" ? [] : violationTriggersRaw;
-  const [formData, setFormData] = React50__default.useState(
+  const [formData, setFormData] = React69__default.useState(
     normalizedInitialData
   );
-  const [collapsedSections, setCollapsedSections] = React50__default.useState(
+  const [collapsedSections, setCollapsedSections] = React69__default.useState(
     /* @__PURE__ */ new Set()
   );
   const shouldShowCancel = showCancel ?? (fields && fields.length > 0);
-  const evalContext = React50__default.useMemo(
+  const evalContext = React69__default.useMemo(
     () => ({
       formValues: formData,
       globalVariables: externalContext?.globalVariables ?? {},
@@ -9237,13 +11728,13 @@ var Form = ({
     }),
     [formData, externalContext]
   );
-  React50__default.useEffect(() => {
+  React69__default.useEffect(() => {
     const data = initialData;
     if (data && Object.keys(data).length > 0) {
       setFormData(data);
     }
   }, [initialData]);
-  const processCalculations = React50__default.useCallback(
+  const processCalculations = React69__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!hiddenCalculations.length) return;
       const context = {
@@ -9268,7 +11759,7 @@ var Form = ({
     },
     [hiddenCalculations, externalContext, eventBus]
   );
-  const checkViolations = React50__default.useCallback(
+  const checkViolations = React69__default.useCallback(
     (changedFieldId, newFormData) => {
       if (!violationTriggers.length) return;
       const context = {
@@ -9305,7 +11796,7 @@ var Form = ({
     processCalculations(name, newFormData);
     checkViolations(name, newFormData);
   };
-  const isFieldVisible = React50__default.useCallback(
+  const isFieldVisible = React69__default.useCallback(
     (fieldName) => {
       const condition = conditionalFields[fieldName];
       if (!condition) return true;
@@ -9313,7 +11804,7 @@ var Form = ({
     },
     [conditionalFields, evalContext]
   );
-  const isSectionVisible = React50__default.useCallback(
+  const isSectionVisible = React69__default.useCallback(
     (section) => {
       if (!section.condition) return true;
       return Boolean(evaluateFormExpression(section.condition, evalContext));
@@ -9345,7 +11836,7 @@ var Form = ({
       eventBus.emit(`UI:${onCancel}`);
     }
   };
-  const renderField = React50__default.useCallback(
+  const renderField = React69__default.useCallback(
     (field) => {
       const fieldName = field.name || field.field;
       if (!fieldName) return null;
@@ -9366,7 +11857,7 @@ var Form = ({
     [formData, isFieldVisible, relationsData, relationsLoading, isLoading]
   );
   const effectiveFields = entityDerivedFields ?? fields;
-  const normalizedFields = React50__default.useMemo(() => {
+  const normalizedFields = React69__default.useMemo(() => {
     if (!effectiveFields || effectiveFields.length === 0) return [];
     return effectiveFields.map((field) => {
       if (typeof field === "string") {
@@ -9375,7 +11866,7 @@ var Form = ({
       return field;
     });
   }, [effectiveFields]);
-  const schemaFields = React50__default.useMemo(() => {
+  const schemaFields = React69__default.useMemo(() => {
     if (normalizedFields.length === 0) return null;
     if (isDebugEnabled()) {
       debugGroup(`Form: ${entityName || "unknown"}`);
@@ -9385,7 +11876,7 @@ var Form = ({
     }
     return normalizedFields.map(renderField).filter(Boolean);
   }, [normalizedFields, renderField, entityName, conditionalFields]);
-  const sectionElements = React50__default.useMemo(() => {
+  const sectionElements = React69__default.useMemo(() => {
     if (!sections || sections.length === 0) return null;
     return sections.map((section) => {
       if (!isSectionVisible(section)) {
@@ -9724,7 +12215,7 @@ var CardGrid = ({
       return;
     }
     if (action.event) {
-      eventBus.emit(`UI:${action.event}`, { row: itemData });
+      eventBus.emit(`UI:${action.event}`, { id: itemData.id, row: itemData });
     }
     if (action.onClick) {
       action.onClick(itemData);
@@ -10236,7 +12727,7 @@ function InputPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React50__default.useState(value);
+  const [localValue, setLocalValue] = React69__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -10273,7 +12764,7 @@ function TextareaPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React50__default.useState(value);
+  const [localValue, setLocalValue] = React69__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -10304,7 +12795,7 @@ function SelectPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localValue, setLocalValue] = React50__default.useState(value);
+  const [localValue, setLocalValue] = React69__default.useState(value);
   const handleChange = (e) => {
     setLocalValue(e.target.value);
     if (onChange) {
@@ -10333,7 +12824,7 @@ function CheckboxPattern({
   className
 }) {
   const { emit } = useEventBus();
-  const [localChecked, setLocalChecked] = React50__default.useState(checked);
+  const [localChecked, setLocalChecked] = React69__default.useState(checked);
   const handleChange = (e) => {
     setLocalChecked(e.target.checked);
     if (onChange) {
@@ -10763,7 +13254,7 @@ function SuspenseConfigProvider({
   config,
   children
 }) {
-  return React50__default.createElement(
+  return React69__default.createElement(
     SuspenseConfigContext.Provider,
     { value: config },
     children
@@ -11016,7 +13507,7 @@ function CompiledPortal({ slot, className, pattern, sourceTrait, children }) {
   let wrapper;
   switch (slot) {
     case "modal":
-      wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, children: /* @__PURE__ */ jsx(
+      wrapper = /* @__PURE__ */ jsx(Modal, { isOpen: true, onClose: handleDismiss, showCloseButton: true, size: "lg", children: /* @__PURE__ */ jsx(
         Box,
         {
           className: cn("ui-slot", `ui-slot-${slot}`, className),
@@ -11248,4 +13739,4 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
-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 };
+export { Accordion, ActionButtons, Alert, AnimatedCounter, Avatar, Badge, Box, Breadcrumb, Button, ButtonGroup, CalendarGrid, Card, Card2, CardBody, CardContent, CardFooter, CardGrid, CardHeader, CardTitle, Carousel, Center, ChartLegend, Checkbox, CodeBlock, ConditionalWrapper, ConfettiEffect, 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, InfiniteScrollSentinel, Input, InputGroup, Label, LawReferenceTooltip, Lightbox, LineChart, LoadingState, MapView, MarkdownContent, MasterDetail, Menu, Meter, Modal, NumberStepper, Overlay, PageHeader, Pagination, Popover, ProgressBar, ProgressDots, PullToRefresh, QuizBlock, Radio, RangeSlider, RelationSelect, RepeatableFormSection, ScaledDiagram, ScoreDisplay, SearchInput, Select, SidePanel, SimpleGrid, Skeleton, SlotContentRenderer, SortableList, Spacer, Spinner, Sprite, Stack, StarRating, StatBadge, StatCard, StatDisplay, StateIndicator, StatusDot, SuspenseConfigProvider, SwipeableRow, Switch, Tabs, Text, TextHighlight, Textarea, ThemeSelector, ThemeToggle, TimeSlotCell, Toast, Tooltip, TrendIndicator, TypewriterText, Typography, UISlotComponent, UISlotRenderer, UploadDropZone, VStack, ViolationAlert, WizardNavigation, WizardProgress, drawSprite };