@almadar/ui 5.130.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);
@@ -1651,7 +1671,7 @@ var init_Button = __esm({
               "cursor-pointer",
               "chrome-button",
               "transition-all duration-normal",
-              "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-offset-[length:var(--focus-ring-offset)]",
+              "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--focus-ring-offset)]",
               "disabled:opacity-50 disabled:cursor-not-allowed",
               variantStyles[variant],
               sizeStyles[size],
@@ -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",
           {
@@ -2398,7 +2420,7 @@ var init_Badge = __esm({
                   },
                   className: cn(
                     "inline-flex items-center justify-center rounded-sm",
-                    "hover:bg-foreground/10 focus:outline-none focus:ring-1 focus:ring-ring",
+                    "hover:bg-foreground/10 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
                     "transition-colors",
                     size === "sm" ? "w-4 h-4 ml-0.5" : size === "md" ? "w-5 h-5 ml-1" : "w-6 h-6 ml-1"
                   ),
@@ -3756,7 +3778,7 @@ function NativeSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm appearance-none",
           "px-3 py-2 pr-10 text-sm text-foreground font-medium",
           "bg-card",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           className
@@ -3863,7 +3885,7 @@ function RichSelect({
           "block w-full border-[length:var(--border-width)] shadow-sm",
           "px-3 py-2 pr-10 text-sm text-start font-medium",
           "bg-card rounded-sm",
-          "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-ring",
           "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
           error ? "border-error focus:border-error" : "border-border focus:border-primary",
           !hasValue && "text-muted-foreground"
@@ -4786,9 +4808,9 @@ var init_Radio = __esm({
                 "flex items-center justify-center",
                 "border-[length:var(--border-width)] transition-all cursor-pointer",
                 sizeClasses4[size],
-                hasError ? "border-error peer-focus:ring-error/20" : "border-border peer-focus:ring-ring/20",
+                hasError ? "border-error peer-focus-visible:ring-error/20" : "border-border peer-focus-visible:ring-ring/20",
                 isChecked2 ? hasError ? "border-error" : "border-primary bg-primary" : "",
-                "peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-offset-2",
+                "peer-focus:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2",
                 disabled && "opacity-50 cursor-not-allowed",
                 !disabled && "hover:border-[var(--color-border-hover)]"
               ),
@@ -5259,7 +5281,7 @@ var init_ThemeToggle = __esm({
             "inline-flex items-center justify-center gap-2",
             "text-foreground",
             "hover:bg-muted border-[length:var(--border-width)] border-transparent hover:border-border",
-            "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
             "transition-colors duration-fast",
             sizeClasses5[size],
             className
@@ -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",
@@ -11504,10 +11528,12 @@ var init_Container = __esm({
     };
     paddingStyles3 = {
       none: "px-0",
-      sm: "px-4",
-      md: "px-6",
-      lg: "px-8",
-      xl: "px-12"
+      // Mobile-tighter, desktop-identical: fixed px-6 on a 360px phone eats ~13% of
+      // the viewport, so each token steps down below the sm breakpoint.
+      sm: "px-3 sm:px-4",
+      md: "px-4 sm:px-6",
+      lg: "px-4 sm:px-6 md:px-8",
+      xl: "px-4 sm:px-8 md:px-12"
     };
     Container = ({
       size,
@@ -12206,7 +12232,7 @@ var init_Accordion = __esm({
                 "bg-card",
                 "hover:bg-muted",
                 "transition-colors duration-fast",
-                "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-inset",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
                 isOpen && "bg-muted font-bold"
               ),
@@ -17753,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
     }
   );
 }
@@ -18361,7 +18380,7 @@ var init_Breadcrumb = __esm({
                   },
                   className: cn(
                     "flex items-center gap-1.5 transition-colors",
-                    "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                     isLast ? "text-foreground font-bold cursor-default" : "text-muted-foreground hover:text-foreground"
                   ),
                   "aria-current": isLast ? "page" : void 0,
@@ -21382,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]);
@@ -21425,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 ? {
@@ -21441,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,
                             {
@@ -21454,7 +21476,7 @@ var init_DashboardLayout = __esm({
                               children: appName.charAt(0).toUpperCase()
                             }
                           ) }),
-                          /* @__PURE__ */ jsxRuntime.jsx(
+                          !isRail && /* @__PURE__ */ jsxRuntime.jsx(
                             Typography,
                             {
                               variant: "label",
@@ -21481,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
                       ))
@@ -21741,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,
         {
@@ -22813,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
@@ -22882,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",
                         {
@@ -22915,79 +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.jsxs(
-                        Button,
-                        {
-                          variant: "ghost",
-                          size: "sm",
-                          onClick: handleActionClick(action, itemData),
-                          "data-testid": `action-${action.event}`,
-                          "data-row-id": String(itemData.id),
-                          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);
+                      }) })
                     ] }) })
                   ]
                 },
@@ -23335,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)
@@ -23379,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: [
@@ -23729,10 +23810,7 @@ var init_FileTree = __esm({
       className,
       indent = 16
     }) => {
-      const { t } = hooks.useTranslate();
-      if (tree.length === 0) {
-        return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `p-4 ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "muted", children: t("fileTree.noFiles") }) });
-      }
+      if (tree.length === 0) return null;
       return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `py-1 overflow-y-auto ${className ?? ""}`, role: "tree", children: tree.map((node) => /* @__PURE__ */ jsxRuntime.jsx(
         TreeNodeItem,
         {
@@ -26914,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 }) {
@@ -26960,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 });
           }
@@ -26969,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 });
@@ -27171,7 +27249,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.decrease"),
@@ -27212,7 +27290,7 @@ var init_NumberStepper = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 "aria-label": t("aria.increase"),
@@ -27668,7 +27746,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.closeModal"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "x", className: "w-6 h-6" })
@@ -27687,7 +27765,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.previousImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-left", className: "w-8 h-8" })
@@ -27724,7 +27802,7 @@ var init_Lightbox = __esm({
                   "p-2 rounded-full",
                   "text-[var(--color-foreground)] bg-[var(--color-card)]",
                   "hover:bg-opacity-70 transition-opacity",
-                  "focus:outline-none focus:ring-2 focus:ring-ring"
+                  "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 ),
                 "aria-label": t("aria.nextImage"),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-right", className: "w-8 h-8" })
@@ -27851,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);
@@ -27883,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") }) });
   }
@@ -27895,19 +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);
-      return Math.min(longest, MAX_MEASURED_COL_CH);
-    }),
-    [colDefs, data]
-  );
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c, i) => c.width ?? `minmax(${colFloors[i]}ch, 1fr)`),
@@ -27994,9 +28075,9 @@ function TableView({
               col.className
             );
             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", children: String(raw) }) }, col.key);
+              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,
@@ -28010,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
@@ -28026,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,
@@ -28077,13 +28158,14 @@ function TableView({
     }
   );
 }
-var MAX_MEASURED_COL_CH, alignClass, weightClass, LOOKS;
+var MAX_MEASURED_COL_CH, BADGE_CHROME_CH, alignClass, weightClass, LOOKS;
 var init_TableView = __esm({
   "components/core/molecules/TableView.tsx"() {
     "use client";
     init_cn();
     init_getNestedValue();
     init_useEventBus();
+    init_useMediaQuery();
     init_Box();
     init_Stack();
     init_Typography();
@@ -28096,6 +28178,7 @@ var init_TableView = __esm({
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
     MAX_MEASURED_COL_CH = 32;
+    BADGE_CHROME_CH = 4;
     alignClass = {
       left: "justify-start text-left",
       center: "justify-center text-center",
@@ -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 },
@@ -30193,7 +30276,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-up", className: styles.icon })
@@ -30230,7 +30313,7 @@ var init_VoteStack = __esm({
                   "active:bg-muted",
                   "transition-colors duration-instant",
                   "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent",
-                  "focus:outline-none focus:ring-[length:var(--focus-ring-width)] focus:ring-ring focus:ring-inset",
+                  "focus:outline-none focus-visible:ring-[length:var(--focus-ring-width)] focus-visible:ring-ring focus-visible:ring-inset",
                   styles.button
                 ),
                 children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "chevron-down", className: styles.icon })
@@ -30751,7 +30834,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": isPaused ? t("qrScanner.resumeScanning") : t("qrScanner.pauseScanning"),
                       children: isPaused ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "play", className: "h-4 w-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "pause", className: "h-4 w-4" })
@@ -30766,7 +30849,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 p-2 text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": currentFacing === "environment" ? t("qrScanner.switchToFrontCamera") : t("qrScanner.switchToRearCamera"),
                       children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "refresh-cw", className: "h-4 w-4" })
@@ -30781,7 +30864,7 @@ var init_QrScanner = __esm({
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
                         "rounded-full bg-black bg-opacity-60 px-3 py-2 text-xs text-white",
                         // eslint-disable-next-line almadar/no-hardcoded-colors -- media overlay: always over a dark scrim
-                        "hover:bg-opacity-80 focus:outline-none focus:ring-2 focus:ring-white"
+                        "hover:bg-opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white"
                       ),
                       "aria-label": t("aria.mockScanDev"),
                       children: t("qrScanner.mockScan")
@@ -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, {}) })
           ]
         }
       );
@@ -42618,7 +42698,7 @@ var init_TabbedContainer = __esm({
                       onClick: () => !isDisabled && handleTabChange(tab.id),
                       className: cn(
                         "flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors",
-                        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                         "disabled:opacity-50 disabled:cursor-not-allowed",
                         isActive ? "bg-primary text-primary-foreground" : "bg-card text-foreground hover:bg-muted",
                         isVertical ? "justify-start" : "justify-center"