@almadar/ui 5.131.0 → 5.132.0

package/dist/runtime/index.cjs

@@ -612,6 +612,26 @@ var init_useDragReorder = __esm({
     "use client";
   }
 });
+function useMediaQuery(query) {
+  const subscribe = React82.useCallback(
+    (onChange) => {
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return React82.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+var init_useMediaQuery = __esm({
+  "hooks/useMediaQuery.ts"() {
+    "use client";
+  }
+});
 function useInfiniteScroll(onLoadMore, options = {}) {
   const { rootMargin = "200px", hasMore = true, isLoading = false } = options;
   const observerRef = React82.useRef(null);
@@ -2372,6 +2392,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",
           {
@@ -5694,11 +5716,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",
@@ -17755,26 +17779,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
     }
   );
 }
@@ -21384,17 +21401,19 @@ var init_DashboardLayout = __esm({
       const [sidebarOpen, setSidebarOpen] = React82.useState(false);
       const [userMenuOpen, setUserMenuOpen] = React82.useState(false);
       const layoutRef = React82.useRef(null);
-      const [isMobile, setIsMobile] = React82.useState(false);
+      const [layoutWidth, setLayoutWidth] = React82.useState(null);
       React82.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;
       React82.useEffect(() => {
         if (!isMobile && sidebarOpen) setSidebarOpen(false);
       }, [isMobile, sidebarOpen]);
@@ -21427,7 +21446,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 ? {
@@ -21443,10 +21463,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,
                             {
@@ -21456,7 +21476,7 @@ var init_DashboardLayout = __esm({
                               children: appName.charAt(0).toUpperCase()
                             }
                           ) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
+                          !isRail && /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: "label",
@@ -21483,12 +21503,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
                       ))
@@ -21743,13 +21764,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,
         {
@@ -22815,40 +22863,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
@@ -22884,7 +22947,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",
                         {
@@ -22917,78 +22980,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: field.variant === "caption" ? "caption" : "small",
-                            className: "text-right truncate max-w-[60%]",
-                            children: formatValue(value, field.format)
+                            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,
+                          {
+                            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);
+                      }) })
                     ] }) })
                   ]
                 },
@@ -23336,11 +23398,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)
@@ -23380,7 +23460,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: [
@@ -26912,7 +26992,7 @@ var init_MapView = __esm({
         shadowSize: [41, 41]
       });
       L.Marker.prototype.options.icon = defaultIcon;
-      const { useEffect: useEffect59, useRef: useRef60, useCallback: useCallback87, useState: useState89 } = React82__namespace.default;
+      const { useEffect: useEffect59, useRef: useRef60, useCallback: useCallback88, useState: useState89 } = React82__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 }) {
@@ -26958,7 +27038,7 @@ var init_MapView = __esm({
       }) {
         const eventBus = useEventBus2();
         const [clickedPosition, setClickedPosition] = useState89(null);
-        const handleMapClick = useCallback87((lat, lng) => {
+        const handleMapClick = useCallback88((lat, lng) => {
           if (showClickedPin) {
             setClickedPosition({ lat, lng });
           }
@@ -26967,7 +27047,7 @@ var init_MapView = __esm({
             eventBus.emit(`UI:${mapClickEvent}`, { latitude: lat, longitude: lng });
           }
         }, [onMapClick, mapClickEvent, eventBus, showClickedPin]);
-        const handleMarkerClick = useCallback87((marker) => {
+        const handleMarkerClick = useCallback88((marker) => {
           onMarkerClick?.(marker);
           if (markerClickEvent) {
             eventBus.emit(`UI:${markerClickEvent}`, { ...marker });
@@ -27849,6 +27929,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);
@@ -27881,6 +27962,17 @@ function TableView({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const colFloors = React82__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") }) });
   }
@@ -27893,20 +27985,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 = React82__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)`),
@@ -27995,7 +28077,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,
@@ -28009,15 +28091,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
@@ -28025,12 +28107,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,
@@ -28083,6 +28165,7 @@ var init_TableView = __esm({
     init_cn();
     init_getNestedValue();
     init_useEventBus();
+    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -28107,7 +28190,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 },
@@ -39026,27 +39109,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, {}) })
           ]
         }
       );