@almadar/ui 5.9.10 → 5.12.0

package/dist/components/index.cjs

@@ -22203,6 +22203,8 @@ function DataGrid({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
+  scrollX = false,
   cols,
   gap = "md",
   minCardWidth = 280,
@@ -22342,8 +22344,8 @@ function DataGrid({
       /* @__PURE__ */ jsxRuntime.jsx(
         exports.Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
-          style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
+          className: cn("grid", gapStyles6[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
+          style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
             const id = itemData.id || String(index);
@@ -22470,21 +22472,39 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      exports.Button,
-                      {
-                        variant: action.variant === "primary" ? "primary" : "ghost",
-                        size: "sm",
-                        onClick: handleActionClick(action, itemData),
-                        "data-testid": `action-${action.event}`,
-                        "data-row-id": String(itemData.id),
-                        children: [
-                          action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                          action.label
-                        ]
-                      },
-                      idx
-                    )) }) })
+                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "justify-end", children: [
+                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                        exports.Button,
+                        {
+                          variant: action.variant === "primary" ? "primary" : "ghost",
+                          size: "sm",
+                          onClick: handleActionClick(action, itemData),
+                          "data-testid": `action-${action.event}`,
+                          "data-row-id": String(itemData.id),
+                          children: [
+                            action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                            action.label
+                          ]
+                        },
+                        idx
+                      )),
+                      maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                        exports.Menu,
+                        {
+                          position: "bottom-end",
+                          trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "more-horizontal", size: "xs" }) }),
+                          items: primaryActions.slice(maxInlineActions).map((action) => ({
+                            label: action.label,
+                            icon: action.icon,
+                            event: action.event,
+                            onClick: () => eventBus.emit(`UI:${action.event}`, {
+                              id: itemData.id,
+                              row: itemData
+                            })
+                          }))
+                        }
+                      )
+                    ] }) })
                   ]
                 },
                 id
@@ -22534,6 +22554,7 @@ var init_DataGrid = __esm({
     init_Button();
     init_Icon();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataGridLog = logger.createLogger("almadar:ui:data-grid");
     BADGE_VARIANTS = /* @__PURE__ */ new Set([
@@ -22613,6 +22634,7 @@ function DataList({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
   itemClickEvent,
   gap = "none",
   variant = "default",
@@ -22703,6 +22725,46 @@ function DataList({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const renderItemActions = (itemData) => {
+    if (!itemActions || itemActions.length === 0) return null;
+    const inline = maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions;
+    const overflow = maxInlineActions != null ? itemActions.slice(maxInlineActions) : [];
+    return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "flex-shrink-0", children: [
+      inline.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+        exports.Button,
+        {
+          variant: action.variant ?? "ghost",
+          size: "sm",
+          onClick: handleActionClick(action, itemData),
+          "data-testid": `action-${action.event}`,
+          "data-row-id": String(itemData.id),
+          className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+          children: [
+            action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+            action.label
+          ]
+        },
+        idx
+      )),
+      overflow.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        exports.Menu,
+        {
+          position: "bottom-end",
+          trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "more-horizontal", size: "xs" }) }),
+          items: overflow.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
+            })
+          }))
+        }
+      )
+    ] });
+  };
   const handleRowClick = (itemData) => () => {
     if (!itemClickEvent) return;
     const payload = {
@@ -22792,31 +22854,7 @@ function DataList({
         /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
           /* @__PURE__ */ jsxRuntime.jsxs(exports.Box, { className: "group flex items-stretch gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              exports.HStack,
-              {
-                gap: "xs",
-                className: "flex-shrink-0",
-                children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                  exports.Button,
-                  {
-                    variant: action.variant ?? "ghost",
-                    size: "sm",
-                    onClick: handleActionClick(action, itemData),
-                    "data-testid": `action-${action.event}`,
-                    "data-row-id": String(itemData.id),
-                    className: cn(
-                      action.variant === "danger" && "text-error hover:bg-error/10"
-                    ),
-                    children: [
-                      action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                      action.label
-                    ]
-                  },
-                  idx
-                ))
-              }
-            )
+            renderItemActions(itemData)
           ] }),
           isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -22887,24 +22925,7 @@ function DataList({
                   ] }, field.name);
                 })
               ] }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0", children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-                exports.Button,
-                {
-                  variant: action.variant ?? "ghost",
-                  size: "sm",
-                  onClick: handleActionClick(action, itemData),
-                  "data-testid": `action-${action.event}`,
-                  "data-row-id": String(itemData.id),
-                  className: cn(
-                    action.variant === "danger" && "text-error hover:bg-error/10"
-                  ),
-                  children: [
-                    action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                    action.label
-                  ]
-                },
-                idx
-              )) })
+              renderItemActions(itemData)
             ]
           }
         ),
@@ -22974,6 +22995,7 @@ var init_DataList = __esm({
     init_ProgressBar();
     init_Divider();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataListLog = logger.createLogger("almadar:ui:data-list");
     listLookStyles = {
@@ -28375,6 +28397,7 @@ function TableView({
   columns,
   fields,
   itemActions,
+  maxInlineActions,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -28467,10 +28490,13 @@ 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 actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxRuntime.jsxs(
     exports.Box,
@@ -28557,22 +28583,41 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            exports.Button,
-            {
-              variant: action.variant ?? "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"),
-              children: [
-                action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                action.label
-              ]
-            },
-            i
-          )) })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+            (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+              exports.Button,
+              {
+                variant: action.variant ?? "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"),
+                children: [
+                  action.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                  action.label
+                ]
+              },
+              i
+            )),
+            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(exports.Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "more-horizontal", size: "xs" }) }),
+                items: itemActions.slice(maxInlineActions).map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  event: action.event,
+                  variant: action.variant === "danger" ? "danger" : "default",
+                  onClick: () => eventBus.emit(`UI:${action.event}`, {
+                    id: row.id,
+                    row
+                  })
+                }))
+              }
+            )
+          ] })
         ]
       }
     );
@@ -28620,6 +28665,7 @@ var init_TableView = __esm({
     init_Icon();
     init_Checkbox();
     init_Divider();
+    init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
     alignClass = {
@@ -28633,11 +28679,11 @@ var init_TableView = __esm({
       semibold: "font-semibold"
     };
     LOOKS = {
-      dense: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true },
-      spacious: { rowPad: "px-5 py-4", headPad: "px-5 py-3", striped: false, divider: true },
-      striped: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: true, divider: false },
-      borderless: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: false },
-      bordered: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true }
+      dense: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", 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 },
+      bordered: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: true }
     };
     TableView.displayName = "TableView";
   }

package/dist/components/index.js

@@ -22154,6 +22154,8 @@ function DataGrid({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
+  scrollX = false,
   cols,
   gap = "md",
   minCardWidth = 280,
@@ -22293,8 +22295,8 @@ function DataGrid({
       /* @__PURE__ */ jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
-          style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
+          className: cn("grid", gapStyles6[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
+          style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
             const id = itemData.id || String(index);
@@ -22421,21 +22423,39 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        variant: action.variant === "primary" ? "primary" : "ghost",
-                        size: "sm",
-                        onClick: handleActionClick(action, itemData),
-                        "data-testid": `action-${action.event}`,
-                        "data-row-id": String(itemData.id),
-                        children: [
-                          action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                          action.label
-                        ]
-                      },
-                      idx
-                    )) }) })
+                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-end", children: [
+                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ 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 && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                            action.label
+                          ]
+                        },
+                        idx
+                      )),
+                      maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+                        Menu,
+                        {
+                          position: "bottom-end",
+                          trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                          items: primaryActions.slice(maxInlineActions).map((action) => ({
+                            label: action.label,
+                            icon: action.icon,
+                            event: action.event,
+                            onClick: () => eventBus.emit(`UI:${action.event}`, {
+                              id: itemData.id,
+                              row: itemData
+                            })
+                          }))
+                        }
+                      )
+                    ] }) })
                   ]
                 },
                 id
@@ -22485,6 +22505,7 @@ var init_DataGrid = __esm({
     init_Button();
     init_Icon();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataGridLog = createLogger("almadar:ui:data-grid");
     BADGE_VARIANTS = /* @__PURE__ */ new Set([
@@ -22564,6 +22585,7 @@ function DataList({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
   itemClickEvent,
   gap = "none",
   variant = "default",
@@ -22654,6 +22676,46 @@ function DataList({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const renderItemActions = (itemData) => {
+    if (!itemActions || itemActions.length === 0) return null;
+    const inline = maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions;
+    const overflow = maxInlineActions != null ? itemActions.slice(maxInlineActions) : [];
+    return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
+      inline.map((action, idx) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: action.variant ?? "ghost",
+          size: "sm",
+          onClick: handleActionClick(action, itemData),
+          "data-testid": `action-${action.event}`,
+          "data-row-id": String(itemData.id),
+          className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+          children: [
+            action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+            action.label
+          ]
+        },
+        idx
+      )),
+      overflow.length > 0 && /* @__PURE__ */ jsx(
+        Menu,
+        {
+          position: "bottom-end",
+          trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+          items: overflow.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
+            })
+          }))
+        }
+      )
+    ] });
+  };
   const handleRowClick = (itemData) => () => {
     if (!itemClickEvent) return;
     const payload = {
@@ -22743,31 +22805,7 @@ function DataList({
         /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
           /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
             /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-              HStack,
-              {
-                gap: "xs",
-                className: "flex-shrink-0",
-                children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    variant: action.variant ?? "ghost",
-                    size: "sm",
-                    onClick: handleActionClick(action, itemData),
-                    "data-testid": `action-${action.event}`,
-                    "data-row-id": String(itemData.id),
-                    className: cn(
-                      action.variant === "danger" && "text-error hover:bg-error/10"
-                    ),
-                    children: [
-                      action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                      action.label
-                    ]
-                  },
-                  idx
-                ))
-              }
-            )
+            renderItemActions(itemData)
           ] }),
           isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -22838,24 +22876,7 @@ function DataList({
                   ] }, field.name);
                 })
               ] }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: action.variant ?? "ghost",
-                  size: "sm",
-                  onClick: handleActionClick(action, itemData),
-                  "data-testid": `action-${action.event}`,
-                  "data-row-id": String(itemData.id),
-                  className: cn(
-                    action.variant === "danger" && "text-error hover:bg-error/10"
-                  ),
-                  children: [
-                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                    action.label
-                  ]
-                },
-                idx
-              )) })
+              renderItemActions(itemData)
             ]
           }
         ),
@@ -22925,6 +22946,7 @@ var init_DataList = __esm({
     init_ProgressBar();
     init_Divider();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataListLog = createLogger("almadar:ui:data-list");
     listLookStyles = {
@@ -28326,6 +28348,7 @@ function TableView({
   columns,
   fields,
   itemActions,
+  maxInlineActions,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -28418,10 +28441,13 @@ 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 actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -28508,22 +28534,41 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: action.variant ?? "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"),
-              children: [
-                action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                action.label
-              ]
-            },
-            i
-          )) })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+            (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: action.variant ?? "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"),
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                  action.label
+                ]
+              },
+              i
+            )),
+            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+              Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                items: itemActions.slice(maxInlineActions).map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  event: action.event,
+                  variant: action.variant === "danger" ? "danger" : "default",
+                  onClick: () => eventBus.emit(`UI:${action.event}`, {
+                    id: row.id,
+                    row
+                  })
+                }))
+              }
+            )
+          ] })
         ]
       }
     );
@@ -28571,6 +28616,7 @@ var init_TableView = __esm({
     init_Icon();
     init_Checkbox();
     init_Divider();
+    init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
     alignClass = {
@@ -28584,11 +28630,11 @@ var init_TableView = __esm({
       semibold: "font-semibold"
     };
     LOOKS = {
-      dense: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true },
-      spacious: { rowPad: "px-5 py-4", headPad: "px-5 py-3", striped: false, divider: true },
-      striped: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: true, divider: false },
-      borderless: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: false },
-      bordered: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true }
+      dense: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", 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 },
+      bordered: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: true }
     };
     TableView.displayName = "TableView";
   }

package/dist/components/molecules/DataGrid.d.ts

@@ -66,6 +66,10 @@ export interface DataGridProps<T extends EntityRow = EntityRow> extends DataDndP
     columns?: readonly DataGridField[];
     /** Per-item action buttons */
     itemActions?: readonly DataGridItemAction[];
+    /** Max inline primary action buttons before the rest collapse into a "⋯" overflow menu. Omit = all inline. */
+    maxInlineActions?: number;
+    /** Lay items in a single horizontally-scrolling row (kanban columns) sized to `minCardWidth` instead of a wrapping grid. */
+    scrollX?: boolean;
     /** Number of columns (uses auto-fit if omitted) */
     cols?: 1 | 2 | 3 | 4 | 5 | 6;
     /** Gap between cards */
@@ -108,7 +112,7 @@ export interface DataGridProps<T extends EntityRow = EntityRow> extends DataDndP
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataGrid<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, maxInlineActions, scrollX, cols, gap, minCardWidth, className, isLoading, error, imageField, selectable, selectionEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataGridProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataGrid {
     var displayName: string;
 }