@almadar/ui 5.131.0 → 5.133.0

package/dist/components/index.cjs

@@ -2610,6 +2610,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(exports.Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(exports.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",
           {
@@ -4706,11 +4708,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",
@@ -13732,26 +13736,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(
     exports.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
     }
   );
 }
@@ -19406,17 +19403,19 @@ var init_DashboardLayout = __esm({
       const [sidebarOpen, setSidebarOpen] = React74.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React74.useState(false);
       const layoutRef = React74.useRef(null);
-      const [isMobile, setIsMobile] = React74.useState(false);
+      const [layoutWidth, setLayoutWidth] = React74.useState(null);
       React74.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;
       React74.useEffect(() => {
         if (!isMobile && sidebarOpen) setSidebarOpen(false);
       }, [isMobile, sidebarOpen]);
@@ -19453,7 +19452,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 ? {
@@ -19469,10 +19469,10 @@ var init_DashboardLayout = __esm({
                     exports.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(exports.Box, { className: "w-8 h-8 bg-primary rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                             exports.Typography,
                             {
@@ -19482,7 +19482,7 @@ var init_DashboardLayout = __esm({
                               children: appName.charAt(0).toUpperCase()
                             }
                           ) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
+                          !isRail && /* @__PURE__ */ jsxRuntime.jsx(
                             exports.Typography,
                             {
                               variant: "label",
@@ -19509,12 +19509,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
                       ))
@@ -19769,13 +19770,40 @@ var init_DashboardLayout = __esm({
     exports.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(exports.Box, { as: "span", className: "relative inline-flex", children: [
+              item.icon ? typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: iconClassName }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "font-semibold", as: "span", children: item.label.charAt(0).toUpperCase() }),
+              item.badge && /* @__PURE__ */ jsxRuntime.jsx(
+                exports.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,
         {
@@ -20841,40 +20869,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(exports.Box, { className: "px-4 py-3 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-end", children: [
-                        (maxInlineActions != null ? actionDefs.slice(0, maxInlineActions) : actionDefs).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                          exports.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(exports.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(exports.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(
+                            exports.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(
+                            exports.Menu,
+                            {
+                              position: "bottom-end",
+                              trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.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(
                           exports.Menu,
                           {
                             position: "bottom-end",
                             trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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
@@ -20910,7 +20953,7 @@ function DataGrid({
                         }
                       ) });
                     })(),
-                    /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "p-4 pb-0", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-between items-start", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("p-4", bodyFields.length > 0 && "pb-0"), children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-between items-start", children: [
                       selectable && /* @__PURE__ */ jsxRuntime.jsx(
                         "input",
                         {
@@ -20943,78 +20986,77 @@ function DataGrid({
                           ] }, field.name);
                         }) })
                       ] }),
-                      dangerActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0", children: dangerActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
-                        exports.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(exports.Box, { className: "px-4 py-3 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.HStack, { gap: "sm", className: "justify-between items-center", children: [
-                          /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
-                            field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
-                          ] }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
-                        ] }, field.name);
-                      }
-                      return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-between items-center", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
-                          field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
-                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          exports.Typography,
+                      (primaryActions.length > 0 || dangerActions.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "flex-shrink-0", children: [
+                        (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                          exports.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(
+                          exports.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(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-end flex-wrap", children: [
-                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                        exports.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(
-                        exports.Menu,
-                        {
-                          position: "bottom-end",
-                          trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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(
+                          exports.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(exports.Box, { className: "px-4 pt-2 pb-4 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.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(exports.Typography, { variant: "small", color: "secondary", className: "line-clamp-2", children: formatValue(value, field.format) }, field.name);
+                      }),
+                      /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.HStack, { gap: "xs", className: "items-center", children: [
+                            field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
+                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: field.label ?? fieldLabel2(field.name) }),
+                            /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: value ? "success" : "neutral", children: value ? t("common.yes") || "Yes" : t("common.no") || "No" })
+                          ] }, field.name);
                         }
-                      )
+                        return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "items-center", children: [
+                          field.icon && renderIconInput(field.icon, { size: "xs", className: "text-muted-foreground" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: (field.label ?? fieldLabel2(field.name)) + ":" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", children: formatValue(value, field.format) })
+                        ] }, field.name);
+                      }) })
                     ] }) })
                   ]
                 },
@@ -21362,11 +21404,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(exports.Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "group flex items-stretch gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            renderItemActions(itemData)
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.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(exports.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(exports.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(exports.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(
+              exports.Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -21406,7 +21466,7 @@ function DataList({
                     ] }, field.name);
                   })
                 ] }),
-                bodyFields.length > 0 && !isCompact && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "md", className: "mt-1.5 flex-wrap", children: bodyFields.map((field) => {
+                bodyFields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.HStack, { gap: "xs", className: "items-center", children: [
@@ -28656,7 +28716,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect65, useRef: useRef63, useCallback: useCallback105, useState: useState102 } = React74__namespace.default;
+      const { useEffect: useEffect65, useRef: useRef63, useCallback: useCallback106, useState: useState102 } = React74__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 }) {
@@ -28702,7 +28762,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState102(null);
-        const handleMapClick = useCallback105((lat, lng) => {
+        const handleMapClick = useCallback106((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -28711,7 +28771,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback105((marker) => {
+        const handleMarkerClick = useCallback106((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -29487,6 +29547,26 @@ var init_Lightbox = __esm({
     exports.Lightbox.displayName = "Lightbox";
   }
 });
+function useMediaQuery(query) {
+  const subscribe = React74.useCallback(
+    (onChange) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return React74.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(exports.Icon, { name: icon, ...props }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, ...props });
 }
@@ -29593,6 +29673,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);
@@ -29625,6 +29706,17 @@ function TableView({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const colFloors = React74__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(exports.Box, { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "body", color: "secondary", children: t("loading.items") }) });
   }
@@ -29637,20 +29729,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 = React74__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)`),
@@ -29739,7 +29821,7 @@ function TableView({
             if (col.format === "badge" && raw != null && raw !== "") {
               return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: statusVariant4(String(raw)), size: "sm", className: "whitespace-nowrap", children: String(raw) }) }, col.key);
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
+            return /* @__PURE__ */ jsxRuntime.jsx(exports.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(
             exports.HStack,
@@ -29753,15 +29835,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(
                   exports.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
@@ -29769,12 +29851,12 @@ function TableView({
                   },
                   i
                 )),
-                maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                effectiveMaxInline != null && itemActions.length > effectiveMaxInline && /* @__PURE__ */ jsxRuntime.jsx(
                   exports.Menu,
                   {
                     position: "bottom-end",
                     trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": t("common.actions"), "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.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,
@@ -29827,6 +29909,7 @@ var init_TableView = __esm({
     init_cn();
     init_getNestedValue();
     init_useEventBus();
+    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -29851,7 +29934,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 },
@@ -38526,7 +38609,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,
@@ -38546,7 +38639,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
   );
@@ -38654,7 +38757,7 @@ function DataTable({
                 }
               )
             ] }),
-            bulkActions && selectedIds.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.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(exports.HStack, { className: "items-center gap-2 pl-0 sm:pl-3 border-l-0 sm:border-l border-border", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Typography,
                 {
@@ -38665,13 +38768,13 @@ function DataTable({
                   })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { className: "flex-wrap gap-2", children: bulkActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { className: "flex-wrap gap-2", children: normalizedBulkActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Button,
                 {
                   variant: action.variant === "danger" ? "danger" : "secondary",
                   size: "sm",
                   leftIcon: action.icon,
-                  onClick: () => action.onClick(selectedRows),
+                  onClick: () => action.onClick?.(selectedRows),
                   children: action.label
                 },
                 idx
@@ -38833,7 +38936,7 @@ function DataTable({
                         ),
                         onClick: (e) => {
                           e.stopPropagation();
-                          action.onClick(row);
+                          action.onClick?.(row);
                           setOpenActionMenu(null);
                         },
                         children: [
@@ -41129,27 +41232,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, {}) })
           ]
         }
       );
@@ -48729,6 +48829,7 @@ init_useAuthContext();
 init_useSwipeGesture();
 init_useLongPress();
 init_useDragReorder();
+init_useMediaQuery();
 init_useInfiniteScroll();
 init_usePullToRefresh();
 init_useCanvasGestures();
@@ -49116,6 +49217,7 @@ exports.useGitHubStatus = useGitHubStatus;
 exports.useImageCache = useImageCache;
 exports.useInfiniteScroll = useInfiniteScroll;
 exports.useLongPress = useLongPress;
+exports.useMediaQuery = useMediaQuery;
 exports.useOrbitalHistory = useOrbitalHistory;
 exports.usePresence = usePresence;
 exports.usePreview = usePreview;