@almadar/ui 5.131.0 → 5.133.0

package/dist/avl/index.cjs

@@ -5723,6 +5723,8 @@ var init_Badge = __esm({
         };
         const iconPx = size === "lg" ? 20 : 16;
         const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: iconPx, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes3[size] }) : null;
+        const hasText = Boolean(children) || amount != null || label !== void 0 && label !== null && label !== "";
+        if (!hasText && !resolvedIcon && !onRemove) return null;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -8960,11 +8962,13 @@ var init_TrendIndicator = __esm({
         size = "md",
         ...props
       }, ref) => {
-        const dir = resolveDirection(value, direction);
+        const hasValue = typeof value === "number" && Number.isFinite(value);
+        if (!hasValue && !direction) return null;
+        const dir = resolveDirection(hasValue ? value : void 0, direction);
         const colorClass = resolveColor(dir, invert);
         const iconName = iconNameMap[dir];
         const styles = sizeStyles6[size];
-        const formattedValue = value !== void 0 ? `${value > 0 ? "+" : ""}${value}%` : void 0;
+        const formattedValue = hasValue ? `${value > 0 ? "+" : ""}${value}%` : void 0;
         const ariaLabel = label ?? (formattedValue ? `${dir} ${formattedValue}` : dir);
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
@@ -20386,26 +20390,19 @@ var init_BookViewer = __esm({
 function BoxPattern({
   p,
   m,
-  bg = "transparent",
-  border = false,
-  radius = "none",
-  shadow = "none",
-  className,
-  style,
-  children
+  radius,
+  isLoading: _isLoading,
+  error: _error,
+  entity: _entity,
+  ...boxProps
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
-      padding: p,
-      margin: m,
-      bg,
-      border,
-      rounded: radius,
-      shadow,
-      className,
-      style,
-      children
+      padding: boxProps.padding ?? p,
+      margin: boxProps.margin ?? m,
+      rounded: boxProps.rounded ?? radius,
+      ...boxProps
     }
   );
 }
@@ -24096,17 +24093,19 @@ var init_DashboardLayout = __esm({
       const [sidebarOpen, setSidebarOpen] = React91.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React91.useState(false);
       const layoutRef = React91.useRef(null);
-      const [isMobile, setIsMobile] = React91.useState(false);
+      const [layoutWidth, setLayoutWidth] = React91.useState(null);
       React91.useEffect(() => {
         const el = layoutRef.current;
         if (!el || typeof ResizeObserver === "undefined") return;
         const ro = new ResizeObserver((entries) => {
           const w = entries[0]?.contentRect.width ?? el.clientWidth;
-          setIsMobile(w < 1024);
+          setLayoutWidth(w);
         });
         ro.observe(el);
         return () => ro.disconnect();
       }, []);
+      const isMobile = layoutWidth !== null && layoutWidth < 768;
+      const isRail = layoutWidth !== null && layoutWidth >= 768 && layoutWidth < 1024;
       React91.useEffect(() => {
         if (!isMobile && sidebarOpen) setSidebarOpen(false);
       }, [isMobile, sidebarOpen]);
@@ -24139,7 +24138,8 @@ var init_DashboardLayout = __esm({
               {
                 as: "aside",
                 className: cn(
-                  "z-30 w-64 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
+                  "z-30 flex-shrink-0 bg-card dark:bg-card border-r border-border dark:border-border",
+                  isRail ? "w-16" : "w-64",
                   "flex flex-col"
                 ),
                 style: isMobile ? {
@@ -24155,10 +24155,10 @@ var init_DashboardLayout = __esm({
                     HStack,
                     {
                       align: "center",
-                      justify: "between",
-                      className: "h-16 px-4 border-b border-border dark:border-border",
+                      justify: isRail ? "center" : "between",
+                      className: cn("h-16 border-b border-border dark:border-border", isRail ? "px-2" : "px-4"),
                       children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(reactRouterDom.Link, { to: "/", className: "flex items-center gap-2", title: isRail ? appName : void 0, children: [
                           logo || /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
@@ -24168,7 +24168,7 @@ var init_DashboardLayout = __esm({
                               children: appName.charAt(0).toUpperCase()
                             }
                           ) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
+                          !isRail && /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: "label",
@@ -24195,12 +24195,13 @@ var init_DashboardLayout = __esm({
                     {
                       as: "nav",
                       gap: "none",
-                      className: "flex-1 px-3 py-4 space-y-1 overflow-y-auto",
+                      className: cn("flex-1 py-4 space-y-1 overflow-y-auto", isRail ? "px-2" : "px-3"),
                       children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
                         NavLink,
                         {
                           item,
-                          currentPath: activePath
+                          currentPath: activePath,
+                          compact: isRail
                         },
                         item.href
                       ))
@@ -24455,13 +24456,40 @@ var init_DashboardLayout = __esm({
     DashboardLayout.displayName = "DashboardLayout";
     NavLink = ({
       item,
-      currentPath
+      currentPath,
+      compact = false
     }) => {
       const isActive = currentPath === item.href || currentPath.startsWith(item.href + "/");
       const iconClassName = cn(
         "h-5 w-5",
         isActive ? "text-primary-foreground" : "text-muted-foreground"
       );
+      if (compact) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          reactRouterDom.Link,
+          {
+            to: item.href,
+            title: item.label,
+            "aria-label": item.label,
+            className: cn(
+              "flex items-center justify-center px-2 py-2 rounded-lg transition-colors",
+              isActive ? "bg-primary text-primary-foreground shadow-sm" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { as: "span", className: "relative inline-flex", children: [
+              item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
+              item.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                Badge,
+                {
+                  variant: isActive ? "primary" : "default",
+                  size: "sm",
+                  className: "absolute -top-2 -right-2 px-1 py-0 text-[10px] leading-4",
+                  children: item.badge
+                }
+              )
+            ] })
+          }
+        );
+      }
       return /* @__PURE__ */ jsxRuntime.jsxs(
         reactRouterDom.Link,
         {
@@ -25527,40 +25555,55 @@ function DataGrid({
                   {
                     "data-entity-row": true,
                     "data-entity-id": id,
-                    className: cn(isSelected && "ring-2 ring-primary rounded-lg"),
+                    className: cn("relative group/rowactions", isSelected && "ring-2 ring-primary rounded-lg"),
                     children: [
                       children(itemData, index),
-                      actionDefs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-end", children: [
-                        (maxInlineActions != null ? actionDefs.slice(0, maxInlineActions) : actionDefs).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                          Button,
-                          {
-                            variant: action.variant === "primary" ? "primary" : "ghost",
-                            size: "sm",
-                            onClick: handleActionClick(action, itemData),
-                            "data-testid": `action-${action.event}`,
-                            "data-row-id": String(itemData.id),
-                            className: action.variant === "danger" ? "text-error hover:text-error hover:bg-error/10" : void 0,
-                            children: [
-                              action.icon && renderIconInput(action.icon, { size: "xs", className: "mr-1" }),
-                              action.label
-                            ]
-                          },
-                          idx
-                        )),
-                        maxInlineActions != null && actionDefs.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                      actionDefs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5 [@media(pointer:coarse)]:hidden", children: [
+                          (maxInlineActions != null ? actionDefs.slice(0, maxInlineActions) : actionDefs).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            Button,
+                            {
+                              variant: action.variant === "primary" ? "primary" : "ghost",
+                              size: "sm",
+                              onClick: handleActionClick(action, itemData),
+                              "data-testid": `action-${action.event}`,
+                              "data-row-id": String(itemData.id),
+                              className: action.variant === "danger" ? "text-error hover:text-error hover:bg-error/10" : void 0,
+                              children: [
+                                action.icon && renderIconInput(action.icon, { size: "xs", className: "mr-1" }),
+                                action.label
+                              ]
+                            },
+                            idx
+                          )),
+                          maxInlineActions != null && actionDefs.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                            Menu,
+                            {
+                              position: "bottom-end",
+                              trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                              items: actionDefs.slice(maxInlineActions).map((action) => ({
+                                label: action.label,
+                                icon: action.icon,
+                                event: action.event,
+                                onClick: () => fireAction(action, itemData)
+                              }))
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden [@media(pointer:coarse)]:block rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
                           Menu,
                           {
                             position: "bottom-end",
                             trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                            items: actionDefs.slice(maxInlineActions).map((action) => ({
+                            items: actionDefs.map((action) => ({
                               label: action.label,
                               icon: action.icon,
                               event: action.event,
                               onClick: () => fireAction(action, itemData)
                             }))
                           }
-                        )
-                      ] }) })
+                        ) })
+                      ] })
                     ]
                   },
                   id
@@ -25596,7 +25639,7 @@ function DataGrid({
                         }
                       ) });
                     })(),
-                    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "p-4 pb-0", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-4", bodyFields.length > 0 && "pb-0"), children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-start", children: [
                       selectable && /* @__PURE__ */ jsxRuntime.jsx(
                         "input",
                         {
@@ -25629,78 +25672,77 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "sm",
-                          onClick: handleActionClick(action, itemData),
-                          "data-testid": `action-${action.event}`,
-                          "data-row-id": String(itemData.id),
-                          "aria-label": action.label,
-                          title: action.label,
-                          className: "text-error hover:text-error hover:bg-error/10 px-2",
-                          children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
-                        },
-                        idx
-                      )) })
-                    ] }) }),
-                    bodyFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 flex-1", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                            field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
-                        ] }, field.name);
-                      }
-                      return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-between items-center", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
-                          field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Typography,
+                      (primaryActions.length > 0 || dangerActions.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
+                        (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                          Button,
+                          {
+                            variant: action.variant === "primary" ? "primary" : "ghost",
+                            size: "sm",
+                            onClick: handleActionClick(action, itemData),
+                            "data-testid": `action-${action.event}`,
+                            "data-row-id": String(itemData.id),
+                            "aria-label": action.label,
+                            title: action.label,
+                            className: cn(
+                              action.variant === "primary" ? void 0 : "text-muted-foreground hover:text-foreground",
+                              action.icon && "px-2"
+                            ),
+                            children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
+                          },
+                          idx
+                        )),
+                        maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                          Menu,
                           {
-                            variant: field.variant === "caption" ? "caption" : "small",
-                            className: "text-right truncate max-w-[60%]",
-                            children: formatValue(value, field.format)
+                            position: "bottom-end",
+                            trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                            items: primaryActions.slice(maxInlineActions).map((action) => ({
+                              label: action.label,
+                              icon: action.icon,
+                              event: action.event,
+                              onClick: () => fireAction(action, itemData)
+                            }))
                           }
-                        )
-                      ] }, field.name);
-                    }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-end flex-wrap", children: [
-                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                        Button,
-                        {
-                          variant: action.variant === "primary" ? "primary" : "ghost",
-                          size: "sm",
-                          onClick: handleActionClick(action, itemData),
-                          "data-testid": `action-${action.event}`,
-                          "data-row-id": String(itemData.id),
-                          children: [
-                            action.icon && renderIconInput(action.icon, { size: "xs", className: "mr-1" }),
-                            action.label
-                          ]
-                        },
-                        idx
-                      )),
-                      maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
-                        Menu,
-                        {
-                          position: "bottom-end",
-                          trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                          items: primaryActions.slice(maxInlineActions).map((action) => ({
-                            label: action.label,
-                            icon: action.icon,
-                            event: action.event,
-                            onClick: () => fireAction(action, itemData)
-                          }))
+                        ),
+                        dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                          Button,
+                          {
+                            variant: "ghost",
+                            size: "sm",
+                            onClick: handleActionClick(action, itemData),
+                            "data-testid": `action-${action.event}`,
+                            "data-row-id": String(itemData.id),
+                            "aria-label": action.label,
+                            title: action.label,
+                            className: "text-error hover:text-error hover:bg-error/10 px-2",
+                            children: action.icon ? renderIconInput(action.icon, { size: "xs" }) : action.label
+                          },
+                          `danger-${idx}`
+                        ))
+                      ] })
+                    ] }) }),
+                    bodyFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 pt-2 pb-4 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+                      bodyFields.filter((f3) => f3.variant === "caption" && f3.format !== "boolean").map((field) => {
+                        const value = getNestedValue(itemData, field.name);
+                        if (value === void 0 || value === null || value === "") return null;
+                        return /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "secondary", className: "line-clamp-2", children: formatValue(value, field.format) }, field.name);
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "flex-wrap gap-y-1", children: bodyFields.filter((f3) => f3.variant !== "caption" || f3.format === "boolean").map((field) => {
+                        const value = getNestedValue(itemData, field.name);
+                        if (value === void 0 || value === null || value === "") return null;
+                        if (field.format === "boolean") {
+                          return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                            field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
+                          ] }, field.name);
                         }
-                      )
+                        return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
+                          field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", children: formatValue(value, field.format) })
+                        ] }, field.name);
+                      }) })
                     ] }) })
                   ]
                 },
@@ -26048,11 +26090,29 @@ function DataList({
     const wrapDnd = (node) => dnd.isZone ? /* @__PURE__ */ jsxRuntime.jsx(dnd.SortableItem, { id: dndId, children: node }, dndId) : node;
     if (hasRenderProp) {
       const id2 = itemData.id || String(index);
+      const actions = renderItemActions(itemData);
       return wrapDnd(
-        /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group flex items-stretch gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            renderItemActions(itemData)
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn("relative group/rowactions", itemClickEvent && "cursor-pointer"), children: [
+          children(itemData, index),
+          actions && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "absolute top-2 right-2 z-10 opacity-0 group-hover/rowactions:opacity-100 focus-within:opacity-100 [@media(pointer:coarse)]:opacity-100 transition-opacity duration-fast", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5 [@media(pointer:coarse)]:hidden", children: actions }),
+            /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "hidden [@media(pointer:coarse)]:block rounded-md border border-border bg-card/95 backdrop-blur-sm shadow-sm p-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                items: (itemActions ?? []).map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  event: action.event,
+                  variant: action.variant === "danger" ? "danger" : "default",
+                  onClick: () => eventBus.emit(`UI:${action.event}`, {
+                    id: itemData.id,
+                    row: itemData
+                  })
+                }))
+              }
+            ) })
           ] }),
           isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -26092,7 +26152,7 @@ function DataList({
                     ] }, field.name);
                   })
                 ] }),
-                bodyFields.length > 0 && !isCompact && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "mt-1.5 flex-wrap", children: bodyFields.map((field) => {
+                bodyFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: cn("flex-wrap", isCompact ? "mt-0.5" : "mt-1.5"), children: bodyFields.map((field) => {
                   const value = getNestedValue(itemData, field.name);
                   if (value === void 0 || value === null || value === "") return null;
                   return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "items-center", children: [
@@ -29688,7 +29748,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect63, useRef: useRef62, useCallback: useCallback93, useState: useState97 } = React91__namespace.default;
+      const { useEffect: useEffect63, useRef: useRef62, useCallback: useCallback94, useState: useState97 } = React91__namespace.default;
       const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
       const { useEventBus: useEventBus2 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
       function MapUpdater({ centerLat, centerLng, zoom }) {
@@ -29734,7 +29794,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState97(null);
-        const handleMapClick = useCallback93((lat, lng) => {
+        const handleMapClick = useCallback94((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -29743,7 +29803,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback93((marker) => {
+        const handleMarkerClick = useCallback94((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -30519,6 +30579,26 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
+function useMediaQuery(query) {
+  const subscribe = React91.useCallback(
+    (onChange) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return React91.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+var init_useMediaQuery = __esm({
+  "hooks/useMediaQuery.ts"() {
+    "use client";
+  }
+});
 function renderIconInput3(icon, props) {
   return typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, ...props });
 }
@@ -30625,6 +30705,7 @@ function TableView({
   const hasMore = pageSize > 0 && visibleCount < ordered.length;
   const hasRenderProp = typeof children === "function";
   const idField = dndItemIdField ?? "id";
+  const isCoarsePointer = useMediaQuery("(pointer: coarse)");
   const selected = selectedIds ? new Set(selectedIds) : localSelected;
   const emitSelection = (next) => {
     if (!selectedIds) setLocalSelected(next);
@@ -30657,6 +30738,17 @@ function TableView({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const colFloors = React91__namespace.default.useMemo(
+    () => colDefs.map((col) => {
+      const longest = data.reduce((widest, row) => {
+        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
+        return Math.max(widest, cell.length);
+      }, columnLabel(col).length);
+      const chrome = col.format === "badge" ? BADGE_CHROME_CH : 0;
+      return Math.min(longest + chrome, MAX_MEASURED_COL_CH);
+    }),
+    [colDefs, data]
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "secondary", children: t("loading.items") }) });
   }
@@ -30669,20 +30761,10 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
-  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
-  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const effectiveMaxInline = isCoarsePointer ? 0 : maxInlineActions;
+  const inlineActionCount = hasActions ? effectiveMaxInline != null ? Math.min(itemActions.length, effectiveMaxInline) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && effectiveMaxInline != null && itemActions.length > effectiveMaxInline;
   const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
-  const colFloors = React91__namespace.default.useMemo(
-    () => colDefs.map((col) => {
-      const longest = data.reduce((widest, row) => {
-        const cell = formatCell(asFieldValue(getNestedValue(row, col.field ?? col.key)), col.format);
-        return Math.max(widest, cell.length);
-      }, columnLabel(col).length);
-      const chrome = col.format === "badge" ? BADGE_CHROME_CH : 0;
-      return Math.min(longest + chrome, MAX_MEASURED_COL_CH);
-    }),
-    [colDefs, data]
-  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
@@ -30771,7 +30853,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: statusVariant4(String(raw)), size: "sm", className: "whitespace-nowrap", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-foreground", children: formatCell(raw, col.format) }) }, col.key);
           }),
           itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
             HStack,
@@ -30785,15 +30867,15 @@ function TableView({
                 lk.striped && index % 2 === 1 ? "bg-[var(--color-surface-subtle)]" : "bg-[var(--color-card)] group-hover:bg-[var(--color-surface-subtle)]"
               ),
               children: [
-                (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                (effectiveMaxInline != null ? itemActions.slice(0, effectiveMaxInline) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
                   Button,
                   {
-                    variant: action.variant ?? "ghost",
+                    variant: action.variant === "primary" ? "primary" : "ghost",
                     size: "sm",
                     onClick: handleActionClick(action, row),
                     "data-testid": `action-${action.event}`,
                     "data-row-id": String(row.id),
-                    className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+                    className: cn(action.variant === "danger" && "text-error hover:text-error hover:bg-error/10"),
                     children: [
                       action.icon && renderIconInput3(action.icon, { size: "xs", className: "mr-1" }),
                       action.label
@@ -30801,12 +30883,12 @@ function TableView({
                   },
                   i
                 )),
-                maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                effectiveMaxInline != null && itemActions.length > effectiveMaxInline && /* @__PURE__ */ jsxRuntime.jsx(
                   Menu,
                   {
                     position: "bottom-end",
                     trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
-                    items: itemActions.slice(maxInlineActions).map((action) => ({
+                    items: itemActions.slice(effectiveMaxInline).map((action) => ({
                       label: action.label,
                       icon: action.icon,
                       event: action.event,
@@ -30859,6 +30941,7 @@ var init_TableView = __esm({
     init_cn();
     init_getNestedValue();
     init_useEventBus();
+    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -30883,7 +30966,7 @@ var init_TableView = __esm({
       semibold: "font-semibold"
     };
     LOOKS = {
-      dense: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: true },
+      dense: { rowPad: "px-card-md py-2", headPad: "px-card-md py-2", striped: false, divider: true },
       spacious: { rowPad: "px-card-lg py-card-md", headPad: "px-card-lg py-card-sm", striped: false, divider: true },
       striped: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: true, divider: false },
       borderless: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: false },
@@ -38928,7 +39011,17 @@ function DataTable({
   const currentPageSize = pageSize ?? 20;
   const total = totalCount ?? items.length;
   const totalPages = Math.ceil(total / currentPageSize);
-  const rowActions = externalRowActions ?? itemActions?.filter((a) => a.placement !== "bulk").map((action) => ({
+  const withEventClick = (action) => {
+    if (action.onClick || !action.event) return action;
+    const event = action.event;
+    return {
+      ...action,
+      onClick: (row) => {
+        eventBus.emit(`UI:${event}`, { row });
+      }
+    };
+  };
+  const rowActions = (externalRowActions ?? itemActions?.filter((a) => a.placement !== "bulk").map((action) => ({
     label: action.label,
     icon: action.icon,
     variant: action.variant,
@@ -38948,7 +39041,17 @@ function DataTable({
         });
       }
     }
-  }));
+  })))?.map(withEventClick);
+  const normalizedBulkActions = bulkActions?.map((action) => {
+    if (action.onClick || !action.event) return action;
+    const event = action.event;
+    return {
+      ...action,
+      onClick: (selectedRows2) => {
+        eventBus.emit(`UI:${event}`, { rows: selectedRows2 });
+      }
+    };
+  });
   const viewAction = itemActions?.find(
     (a) => a.event === "VIEW" || a.navigatesTo
   );
@@ -39056,7 +39159,7 @@ function DataTable({
                 }
               )
             ] }),
-            bulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center gap-2 pl-0 sm:pl-3 border-l-0 sm:border-l border-border", children: [
+            normalizedBulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center gap-2 pl-0 sm:pl-3 border-l-0 sm:border-l border-border", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Typography,
                 {
@@ -39067,13 +39170,13 @@ function DataTable({
                   })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "flex-wrap gap-2", children: bulkActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "flex-wrap gap-2", children: normalizedBulkActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                 Button,
                 {
                   variant: action.variant === "danger" ? "danger" : "secondary",
                   size: "sm",
                   leftIcon: action.icon,
-                  onClick: () => action.onClick(selectedRows),
+                  onClick: () => action.onClick?.(selectedRows),
                   children: action.label
                 },
                 idx
@@ -39235,7 +39338,7 @@ function DataTable({
                         ),
                         onClick: (e) => {
                           e.stopPropagation();
-                          action.onClick(row);
+                          action.onClick?.(row);
                           setOpenActionMenu(null);
                         },
                         children: [
@@ -41531,27 +41634,24 @@ var init_MasterDetailLayout = __esm({
       masterClassName,
       detailClassName
     }) => {
-      masterWidth.endsWith("%") ? parseInt(masterWidth, 10) : 30;
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: cn("flex h-full w-full", className),
-          style: {
-            display: "grid",
-            gridTemplateColumns: masterWidth.endsWith("%") ? `${masterWidth} 1fr` : `${masterWidth} 1fr`
-          },
+          className: cn("w-full h-full md:grid md:grid-cols-[var(--master-detail-cols)]", className),
+          style: { "--master-detail-cols": `${masterWidth} 1fr` },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 className: cn(
-                  "border-r-2 border-border overflow-auto",
+                  "border-r border-border overflow-auto",
+                  hasSelection && "hidden md:block",
                   masterClassName
                 ),
                 children: master
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-auto", detailClassName), children: hasSelection ? detail : emptyDetail || /* @__PURE__ */ jsxRuntime.jsx(DefaultEmptyDetail, {}) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("overflow-auto", !hasSelection && "hidden md:block", detailClassName), children: hasSelection ? detail : emptyDetail || /* @__PURE__ */ jsxRuntime.jsx(DefaultEmptyDetail, {}) })
           ]
         }
       );