@flanksource/clicky-ui 0.3.27 → 0.3.28

package/dist/data/SelectionActionBar.cjs

@@ -0,0 +1,242 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const button = require("../components/button.cjs");
+const DropdownMenu = require("../overlay/DropdownMenu.cjs");
+const Modal = require("../overlay/Modal.cjs");
+const Icon = require("./Icon.cjs");
+const selectionActionSplit = require("./selectionActionSplit.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiEllipsis = require("../icons/components/UiEllipsis.cjs");
+function SelectionCountNotice({
+  count,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      "data-testid": "data-table-selection-count",
+      className: "flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-foreground", children: [
+          count.toLocaleString(),
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "outline", size: "sm", onClick: onClear, children: "Clear selection" })
+      ]
+    }
+  );
+}
+const DEFAULT_CANCEL_LABEL = "Cancel";
+function SelectionConfirmModal({
+  action,
+  context,
+  onCancel,
+  onConfirm
+}) {
+  const options = typeof action.confirm === "object" ? action.confirm : {};
+  const count = context.selectedRowIds.length;
+  const message = typeof options.message === "function" ? options.message(context) : options.message ?? `This will apply to ${count.toLocaleString()} selected ${count === 1 ? "row" : "rows"}.`;
+  const confirmLabel = options.confirmLabel ?? (typeof action.label === "string" ? action.label : "Confirm");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal.Modal,
+    {
+      open: true,
+      size: "sm",
+      expandable: false,
+      onClose: onCancel,
+      title: options.title ?? action.label,
+      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-density-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: options.cancelLabel ?? DEFAULT_CANCEL_LABEL }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: action.variant === "destructive" ? "destructive" : "default",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: message })
+    }
+  );
+}
+function SelectionActionBar({
+  actions,
+  context,
+  showCount = true,
+  maxButtons,
+  className
+}) {
+  const [pendingActionId, setPendingActionId] = react.useState(null);
+  const [confirming, setConfirming] = react.useState(
+    null
+  );
+  const running = react.useRef(false);
+  const run = react.useCallback(
+    (action) => {
+      if (running.current || action.disabled) return;
+      running.current = true;
+      setPendingActionId(action.id);
+      const settle = () => {
+        running.current = false;
+        setPendingActionId(null);
+      };
+      let result;
+      try {
+        result = action.onSelect(context);
+      } catch (error) {
+        settle();
+        throw error;
+      }
+      if (result instanceof Promise) void result.finally(settle);
+      else settle();
+    },
+    [context]
+  );
+  const begin = react.useCallback(
+    (action) => {
+      if (action.confirm) setConfirming(action);
+      else run(action);
+    },
+    [run]
+  );
+  const { menus, buttons, overflow } = selectionActionSplit.splitSelectionActions(actions, {
+    maxButtons
+  });
+  const inline = [...menus, ...buttons];
+  const busy = pendingActionId !== null;
+  const pendingOverflow = overflow.find(
+    (action) => action.id === pendingActionId
+  );
+  const toMenuItem = (action) => {
+    var _a;
+    return {
+      label: action.label,
+      onSelect: () => begin(action),
+      disabled: action.disabled || busy,
+      ...action.icon ? { icon: action.icon } : {},
+      ...action.section !== void 0 ? { group: action.section } : {},
+      ...((_a = action.children) == null ? void 0 : _a.length) ? { children: action.children.map(toMenuItem) } : {}
+    };
+  };
+  const bySection = /* @__PURE__ */ new Map();
+  for (const action of overflow) {
+    const key = action.section ?? "";
+    const existing = bySection.get(key);
+    if (existing) existing.push(action);
+    else bySection.set(key, [action]);
+  }
+  const overflowItems = [...bySection.values()].flat().map(toMenuItem);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    showCount ? /* @__PURE__ */ jsxRuntime.jsx(
+      SelectionCountNotice,
+      {
+        count: context.selectedRowIds.length,
+        onClear: context.clearSelection
+      }
+    ) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className, children: [
+      inline.map((action) => {
+        const pending = pendingActionId === action.id;
+        const isMenu = menus.includes(action);
+        const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: action.variant ?? "outline",
+            disabled: action.disabled || busy && !pending,
+            loading: pending,
+            ...isMenu ? { "aria-haspopup": "menu" } : { onClick: () => begin(action) },
+            children: [
+              action.icon && !pending ? /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  icon: action.icon,
+                  ...action.iconClassName ? { className: action.iconClassName } : {}
+                }
+              ) : null,
+              pending && action.pendingLabel !== void 0 ? action.pendingLabel : action.label,
+              isMenu ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown }) : null
+            ]
+          }
+        );
+        if (!isMenu) {
+          return /* @__PURE__ */ jsxRuntime.jsx("span", { children: trigger }, action.id);
+        }
+        const body = action.menu ? {
+          children: (closeMenu) => action.menu({
+            context,
+            close: closeMenu,
+            busy,
+            // Work started inside a custom body is still this action's
+            // work: routing it through `run` is what puts the spinner
+            // on this trigger and locks the siblings, instead of the
+            // bar sitting idle while a bulk call is in flight.
+            run: (task) => begin({
+              ...action,
+              ...task.pendingLabel !== void 0 ? { pendingLabel: task.pendingLabel } : {},
+              ...task.confirm !== void 0 ? { confirm: task.confirm } : {},
+              onSelect: task.onSelect
+            })
+          })
+        } : { items: (action.children ?? []).map(toMenuItem) };
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu.DropdownMenu,
+          {
+            align: "left",
+            menuLabel: typeof action.label === "string" ? action.label : action.id,
+            trigger,
+            ...body
+          },
+          action.id
+        );
+      }),
+      overflow.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        DropdownMenu.DropdownMenu,
+        {
+          align: "right",
+          menuLabel: "Selection actions",
+          items: overflowItems,
+          trigger: /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              "aria-haspopup": "menu",
+              "aria-label": "More selection actions",
+              disabled: busy && !pendingOverflow,
+              loading: !!pendingOverflow,
+              children: [
+                pendingOverflow ? null : /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiEllipsis.UiEllipsis }),
+                "More",
+                /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown })
+              ]
+            }
+          )
+        }
+      ) : null
+    ] }),
+    confirming ? /* @__PURE__ */ jsxRuntime.jsx(
+      SelectionConfirmModal,
+      {
+        action: confirming,
+        context,
+        onCancel: () => setConfirming(null),
+        onConfirm: () => {
+          const action = confirming;
+          setConfirming(null);
+          run(action);
+        }
+      }
+    ) : null
+  ] });
+}
+exports.SelectionActionBar = SelectionActionBar;
+//# sourceMappingURL=SelectionActionBar.cjs.map

package/dist/data/SelectionActionBar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActionBar.cjs","sources":["../../src/data/SelectionActionBar.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { Modal } from \"../overlay/Modal\";\nimport { UiChevronDown, UiEllipsis } from \"../icons\";\nimport { Icon } from \"./Icon\";\nimport type {\n  DataTableSelectionAction,\n  DataTableSelectionConfirm,\n  DataTableSelectionContext,\n} from \"./DataTable\";\n// The placement rules live beside this file rather than in it: they are pure\n// functions over descriptors, and a module that exports both components and\n// helpers loses fast refresh for the component.\nimport { splitSelectionActions } from \"./selectionActionSplit\";\n\n/**\n * The count and the way out of it. `SelectionScopeNotice` says the same thing\n * in more words once a cross-page scope is in play, so exactly one of the two\n * ever renders — a toolbar that states the count twice reads as two selections.\n */\nfunction SelectionCountNotice({\n  count,\n  onClear,\n}: {\n  count: number;\n  onClear: () => void;\n}) {\n  return (\n    <div\n      role=\"status\"\n      data-testid=\"data-table-selection-count\"\n      className=\"flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\"\n    >\n      <span className=\"font-medium text-foreground\">\n        {count.toLocaleString()} selected\n      </span>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onClear}>\n        Clear selection\n      </Button>\n    </div>\n  );\n}\n\nconst DEFAULT_CANCEL_LABEL = \"Cancel\";\n\n/**\n * Confirmation goes through Modal rather than a popover of its own: Modal owns\n * focus trapping, the escape layer and the overlay z-index stack, and this\n * library should have one answer to \"are you sure\".\n */\nfunction SelectionConfirmModal<T extends Record<string, unknown>>({\n  action,\n  context,\n  onCancel,\n  onConfirm,\n}: {\n  action: DataTableSelectionAction<T>;\n  context: DataTableSelectionContext<T>;\n  onCancel: () => void;\n  onConfirm: () => void;\n}) {\n  // `confirm: true` and `confirm: false` both mean \"no copy supplied\"; only an\n  // object customises the prompt.\n  const options: DataTableSelectionConfirm<T> =\n    typeof action.confirm === \"object\" ? action.confirm : {};\n  const count = context.selectedRowIds.length;\n  const message =\n    typeof options.message === \"function\"\n      ? options.message(context)\n      : (options.message ??\n        `This will apply to ${count.toLocaleString()} selected ${\n          count === 1 ? \"row\" : \"rows\"\n        }.`);\n  const confirmLabel =\n    options.confirmLabel ??\n    (typeof action.label === \"string\" ? action.label : \"Confirm\");\n\n  return (\n    <Modal\n      open\n      size=\"sm\"\n      expandable={false}\n      onClose={onCancel}\n      title={options.title ?? action.label}\n      footer={\n        <div className=\"flex justify-end gap-density-2\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel ?? DEFAULT_CANCEL_LABEL}\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant={\n              action.variant === \"destructive\" ? \"destructive\" : \"default\"\n            }\n            onClick={onConfirm}\n          >\n            {confirmLabel}\n          </Button>\n        </div>\n      }\n    >\n      <p className=\"text-sm text-muted-foreground\">{message}</p>\n    </Modal>\n  );\n}\n\nexport type SelectionActionBarProps<T extends Record<string, unknown>> = {\n  actions: DataTableSelectionAction<T>[];\n  context: DataTableSelectionContext<T>;\n  /**\n   * Render the `{n} selected` count and Clear. False when something else is\n   * already stating them — DataTable's cross-page scope notice, say.\n   */\n  showCount?: boolean;\n  /**\n   * How many plain buttons stay on the row before the rest collapse. Named\n   * dropdowns are never capped — they are what the bar is for.\n   */\n  maxButtons?: number;\n  className?: string;\n};\n\n/**\n * The bulk-action cluster a table renders for itself when `selectionActions` is\n * a list. It owns the three things every caller was otherwise re-deriving: what\n * the selection is, which actions are worth a button, and the fact that a bulk\n * call is a request that can still be in flight.\n *\n * It takes only a descriptor list and a selection context, so a list that is\n * not a table — a hand-rolled sidebar of rows, say — can render the identical\n * toolbar rather than growing a second one that drifts.\n */\nexport function SelectionActionBar<T extends Record<string, unknown>>({\n  actions,\n  context,\n  showCount = true,\n  maxButtons,\n  className,\n}: SelectionActionBarProps<T>) {\n  const [pendingActionId, setPendingActionId] = useState<string | null>(null);\n  const [confirming, setConfirming] = useState<DataTableSelectionAction<T> | null>(\n    null,\n  );\n  const running = useRef(false);\n\n  // A bulk action is a request: it can be slow, it can fail, and it must not be\n  // sent twice. Failure is the caller's to report — this component's only\n  // obligation is to stop claiming the action is still running.\n  const run = useCallback(\n    (action: DataTableSelectionAction<T>) => {\n      if (running.current || action.disabled) return;\n      running.current = true;\n      setPendingActionId(action.id);\n      const settle = () => {\n        running.current = false;\n        setPendingActionId(null);\n      };\n      let result: void | Promise<void>;\n      try {\n        result = action.onSelect(context);\n      } catch (error) {\n        settle();\n        throw error;\n      }\n      // A synchronous action settles in the same batch it started, so it never\n      // paints a spinner — which is right: there was nothing to wait for.\n      if (result instanceof Promise) void result.finally(settle);\n      else settle();\n    },\n    [context],\n  );\n\n  const begin = useCallback(\n    (action: DataTableSelectionAction<T>) => {\n      // Confirm first, run second. The prompt is modal rather than a popover\n      // because the click that opens it is the last one the reader gets back.\n      if (action.confirm) setConfirming(action);\n      else run(action);\n    },\n    [run],\n  );\n\n  const { menus, buttons, overflow } = splitSelectionActions(actions, {\n    maxButtons,\n  });\n  const inline = [...menus, ...buttons];\n  const busy = pendingActionId !== null;\n  const pendingOverflow = overflow.find(\n    (action) => action.id === pendingActionId,\n  );\n\n  // Every sibling locks while one action runs. The rows underneath are already\n  // being rewritten, and a second bulk call against a selection that is halfway\n  // through changing is the one nobody can put back.\n  const toMenuItem = (action: DataTableSelectionAction<T>): DropdownMenuItem => ({\n    label: action.label,\n    onSelect: () => begin(action),\n    disabled: action.disabled || busy,\n    ...(action.icon ? { icon: action.icon } : {}),\n    ...(action.section !== undefined ? { group: action.section } : {}),\n    ...(action.children?.length\n      ? { children: action.children.map(toMenuItem) }\n      : {}),\n  });\n\n  // Grouped so DropdownMenu's contiguous-group headings land on the right rows:\n  // it renders a heading above the first item of each run and expects the\n  // caller to have grouped them.\n  //\n  // Sections keep the order they first appear in, and items keep theirs within\n  // a section. Sorting alphabetically would also make the groups contiguous,\n  // but it would silently reorder the caller's list — and a caller that put its\n  // destructive action last would find a section named \"Danger\" sorted to the\n  // top of the menu, directly under the cursor.\n  const bySection = new Map<string, DataTableSelectionAction<T>[]>();\n  for (const action of overflow) {\n    const key = action.section ?? \"\";\n    const existing = bySection.get(key);\n    if (existing) existing.push(action);\n    else bySection.set(key, [action]);\n  }\n  const overflowItems = [...bySection.values()].flat().map(toMenuItem);\n\n  return (\n    <>\n      {showCount ? (\n        <SelectionCountNotice\n          count={context.selectedRowIds.length}\n          onClear={context.clearSelection}\n        />\n      ) : null}\n      <span className={className}>\n        {inline.map((action) => {\n          const pending = pendingActionId === action.id;\n          const isMenu = menus.includes(action);\n          const trigger = (\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              variant={action.variant ?? \"outline\"}\n              disabled={action.disabled || (busy && !pending)}\n              loading={pending}\n              {...(isMenu\n                ? { \"aria-haspopup\": \"menu\" as const }\n                : { onClick: () => begin(action) })}\n            >\n              {/* The spinner takes the icon's place rather than sitting beside it. */}\n              {action.icon && !pending ? (\n                <Icon\n                  icon={action.icon}\n                  {...(action.iconClassName\n                    ? { className: action.iconClassName }\n                    : {})}\n                />\n              ) : null}\n              {pending && action.pendingLabel !== undefined\n                ? action.pendingLabel\n                : action.label}\n              {isMenu ? <Icon icon={UiChevronDown} /> : null}\n            </Button>\n          );\n\n          if (!isMenu) {\n            return <span key={action.id}>{trigger}</span>;\n          }\n\n          // The trigger only opens the menu; the write is whichever value the\n          // reader picks inside it. `menu` and `children` are the two bodies a\n          // caller can supply, and DropdownMenu already renders both — one as\n          // items, one as its own render prop — so nothing here re-implements a\n          // menu.\n          const body = action.menu\n            ? {\n                children: (closeMenu: () => void) =>\n                  action.menu!({\n                    context,\n                    close: closeMenu,\n                    busy,\n                    // Work started inside a custom body is still this action's\n                    // work: routing it through `run` is what puts the spinner\n                    // on this trigger and locks the siblings, instead of the\n                    // bar sitting idle while a bulk call is in flight.\n                    run: (task) =>\n                      begin({\n                        ...action,\n                        ...(task.pendingLabel !== undefined\n                          ? { pendingLabel: task.pendingLabel }\n                          : {}),\n                        ...(task.confirm !== undefined\n                          ? { confirm: task.confirm }\n                          : {}),\n                        onSelect: task.onSelect,\n                      }),\n                  }),\n              }\n            : { items: (action.children ?? []).map(toMenuItem) };\n\n          return (\n            <DropdownMenu\n              key={action.id}\n              align=\"left\"\n              menuLabel={\n                typeof action.label === \"string\" ? action.label : action.id\n              }\n              trigger={trigger}\n              {...body}\n            />\n          );\n        })}\n        {overflow.length > 0 ? (\n          <DropdownMenu\n            align=\"right\"\n            menuLabel=\"Selection actions\"\n            items={overflowItems}\n            trigger={\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"outline\"\n                aria-haspopup=\"menu\"\n                aria-label=\"More selection actions\"\n                // A menu action that is running has no row of its own to report\n                // from, so the trigger it came out of reports for it.\n                disabled={busy && !pendingOverflow}\n                loading={!!pendingOverflow}\n              >\n                {pendingOverflow ? null : <Icon icon={UiEllipsis} />}\n                More\n                <Icon icon={UiChevronDown} />\n              </Button>\n            }\n          />\n        ) : null}\n      </span>\n      {confirming ? (\n        <SelectionConfirmModal\n          action={confirming}\n          context={context}\n          onCancel={() => setConfirming(null)}\n          onConfirm={() => {\n            const action = confirming;\n            setConfirming(null);\n            run(action);\n          }}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"names":["jsxs","jsx","Button","Modal","useState","useRef","useCallback","splitSelectionActions","Fragment","Icon","UiChevronDown","DropdownMenu","UiEllipsis"],"mappings":"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"}

package/dist/data/SelectionActionBar.d.ts

@@ -0,0 +1,28 @@
+import { DataTableSelectionAction, DataTableSelectionContext } from './DataTable';
+export type SelectionActionBarProps<T extends Record<string, unknown>> = {
+    actions: DataTableSelectionAction<T>[];
+    context: DataTableSelectionContext<T>;
+    /**
+     * Render the `{n} selected` count and Clear. False when something else is
+     * already stating them — DataTable's cross-page scope notice, say.
+     */
+    showCount?: boolean;
+    /**
+     * How many plain buttons stay on the row before the rest collapse. Named
+     * dropdowns are never capped — they are what the bar is for.
+     */
+    maxButtons?: number;
+    className?: string;
+};
+/**
+ * The bulk-action cluster a table renders for itself when `selectionActions` is
+ * a list. It owns the three things every caller was otherwise re-deriving: what
+ * the selection is, which actions are worth a button, and the fact that a bulk
+ * call is a request that can still be in flight.
+ *
+ * It takes only a descriptor list and a selection context, so a list that is
+ * not a table — a hand-rolled sidebar of rows, say — can render the identical
+ * toolbar rather than growing a second one that drifts.
+ */
+export declare function SelectionActionBar<T extends Record<string, unknown>>({ actions, context, showCount, maxButtons, className, }: SelectionActionBarProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SelectionActionBar.d.ts.map

package/dist/data/SelectionActionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActionBar.d.ts","sourceRoot":"","sources":["../../src/data/SelectionActionBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,wBAAwB,EAExB,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AAkGrB,MAAM,MAAM,uBAAuB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvE,OAAO,EAAE,wBAAwB,CAAC,CAAC,CAAC,EAAE,CAAC;IACvC,OAAO,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EACpE,OAAO,EACP,OAAO,EACP,SAAgB,EAChB,UAAU,EACV,SAAS,GACV,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAkN5B"}

package/dist/data/SelectionActionBar.js

@@ -0,0 +1,242 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { Button } from "../components/button.js";
+import { DropdownMenu } from "../overlay/DropdownMenu.js";
+import { Modal } from "../overlay/Modal.js";
+import { Icon } from "./Icon.js";
+import { splitSelectionActions } from "./selectionActionSplit.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiEllipsis } from "../icons/components/UiEllipsis.js";
+function SelectionCountNotice({
+  count,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "data-testid": "data-table-selection-count",
+      className: "flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+          count.toLocaleString(),
+          " selected"
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onClear, children: "Clear selection" })
+      ]
+    }
+  );
+}
+const DEFAULT_CANCEL_LABEL = "Cancel";
+function SelectionConfirmModal({
+  action,
+  context,
+  onCancel,
+  onConfirm
+}) {
+  const options = typeof action.confirm === "object" ? action.confirm : {};
+  const count = context.selectedRowIds.length;
+  const message = typeof options.message === "function" ? options.message(context) : options.message ?? `This will apply to ${count.toLocaleString()} selected ${count === 1 ? "row" : "rows"}.`;
+  const confirmLabel = options.confirmLabel ?? (typeof action.label === "string" ? action.label : "Confirm");
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open: true,
+      size: "sm",
+      expandable: false,
+      onClose: onCancel,
+      title: options.title ?? action.label,
+      footer: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-density-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: options.cancelLabel ?? DEFAULT_CANCEL_LABEL }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: action.variant === "destructive" ? "destructive" : "default",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message })
+    }
+  );
+}
+function SelectionActionBar({
+  actions,
+  context,
+  showCount = true,
+  maxButtons,
+  className
+}) {
+  const [pendingActionId, setPendingActionId] = useState(null);
+  const [confirming, setConfirming] = useState(
+    null
+  );
+  const running = useRef(false);
+  const run = useCallback(
+    (action) => {
+      if (running.current || action.disabled) return;
+      running.current = true;
+      setPendingActionId(action.id);
+      const settle = () => {
+        running.current = false;
+        setPendingActionId(null);
+      };
+      let result;
+      try {
+        result = action.onSelect(context);
+      } catch (error) {
+        settle();
+        throw error;
+      }
+      if (result instanceof Promise) void result.finally(settle);
+      else settle();
+    },
+    [context]
+  );
+  const begin = useCallback(
+    (action) => {
+      if (action.confirm) setConfirming(action);
+      else run(action);
+    },
+    [run]
+  );
+  const { menus, buttons, overflow } = splitSelectionActions(actions, {
+    maxButtons
+  });
+  const inline = [...menus, ...buttons];
+  const busy = pendingActionId !== null;
+  const pendingOverflow = overflow.find(
+    (action) => action.id === pendingActionId
+  );
+  const toMenuItem = (action) => {
+    var _a;
+    return {
+      label: action.label,
+      onSelect: () => begin(action),
+      disabled: action.disabled || busy,
+      ...action.icon ? { icon: action.icon } : {},
+      ...action.section !== void 0 ? { group: action.section } : {},
+      ...((_a = action.children) == null ? void 0 : _a.length) ? { children: action.children.map(toMenuItem) } : {}
+    };
+  };
+  const bySection = /* @__PURE__ */ new Map();
+  for (const action of overflow) {
+    const key = action.section ?? "";
+    const existing = bySection.get(key);
+    if (existing) existing.push(action);
+    else bySection.set(key, [action]);
+  }
+  const overflowItems = [...bySection.values()].flat().map(toMenuItem);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showCount ? /* @__PURE__ */ jsx(
+      SelectionCountNotice,
+      {
+        count: context.selectedRowIds.length,
+        onClear: context.clearSelection
+      }
+    ) : null,
+    /* @__PURE__ */ jsxs("span", { className, children: [
+      inline.map((action) => {
+        const pending = pendingActionId === action.id;
+        const isMenu = menus.includes(action);
+        const trigger = /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: action.variant ?? "outline",
+            disabled: action.disabled || busy && !pending,
+            loading: pending,
+            ...isMenu ? { "aria-haspopup": "menu" } : { onClick: () => begin(action) },
+            children: [
+              action.icon && !pending ? /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  icon: action.icon,
+                  ...action.iconClassName ? { className: action.iconClassName } : {}
+                }
+              ) : null,
+              pending && action.pendingLabel !== void 0 ? action.pendingLabel : action.label,
+              isMenu ? /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown }) : null
+            ]
+          }
+        );
+        if (!isMenu) {
+          return /* @__PURE__ */ jsx("span", { children: trigger }, action.id);
+        }
+        const body = action.menu ? {
+          children: (closeMenu) => action.menu({
+            context,
+            close: closeMenu,
+            busy,
+            // Work started inside a custom body is still this action's
+            // work: routing it through `run` is what puts the spinner
+            // on this trigger and locks the siblings, instead of the
+            // bar sitting idle while a bulk call is in flight.
+            run: (task) => begin({
+              ...action,
+              ...task.pendingLabel !== void 0 ? { pendingLabel: task.pendingLabel } : {},
+              ...task.confirm !== void 0 ? { confirm: task.confirm } : {},
+              onSelect: task.onSelect
+            })
+          })
+        } : { items: (action.children ?? []).map(toMenuItem) };
+        return /* @__PURE__ */ jsx(
+          DropdownMenu,
+          {
+            align: "left",
+            menuLabel: typeof action.label === "string" ? action.label : action.id,
+            trigger,
+            ...body
+          },
+          action.id
+        );
+      }),
+      overflow.length > 0 ? /* @__PURE__ */ jsx(
+        DropdownMenu,
+        {
+          align: "right",
+          menuLabel: "Selection actions",
+          items: overflowItems,
+          trigger: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              "aria-haspopup": "menu",
+              "aria-label": "More selection actions",
+              disabled: busy && !pendingOverflow,
+              loading: !!pendingOverflow,
+              children: [
+                pendingOverflow ? null : /* @__PURE__ */ jsx(Icon, { icon: UiEllipsis }),
+                "More",
+                /* @__PURE__ */ jsx(Icon, { icon: UiChevronDown })
+              ]
+            }
+          )
+        }
+      ) : null
+    ] }),
+    confirming ? /* @__PURE__ */ jsx(
+      SelectionConfirmModal,
+      {
+        action: confirming,
+        context,
+        onCancel: () => setConfirming(null),
+        onConfirm: () => {
+          const action = confirming;
+          setConfirming(null);
+          run(action);
+        }
+      }
+    ) : null
+  ] });
+}
+export {
+  SelectionActionBar
+};
+//# sourceMappingURL=SelectionActionBar.js.map

package/dist/data/SelectionActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionActionBar.js","sources":["../../src/data/SelectionActionBar.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { Modal } from \"../overlay/Modal\";\nimport { UiChevronDown, UiEllipsis } from \"../icons\";\nimport { Icon } from \"./Icon\";\nimport type {\n  DataTableSelectionAction,\n  DataTableSelectionConfirm,\n  DataTableSelectionContext,\n} from \"./DataTable\";\n// The placement rules live beside this file rather than in it: they are pure\n// functions over descriptors, and a module that exports both components and\n// helpers loses fast refresh for the component.\nimport { splitSelectionActions } from \"./selectionActionSplit\";\n\n/**\n * The count and the way out of it. `SelectionScopeNotice` says the same thing\n * in more words once a cross-page scope is in play, so exactly one of the two\n * ever renders — a toolbar that states the count twice reads as two selections.\n */\nfunction SelectionCountNotice({\n  count,\n  onClear,\n}: {\n  count: number;\n  onClear: () => void;\n}) {\n  return (\n    <div\n      role=\"status\"\n      data-testid=\"data-table-selection-count\"\n      className=\"flex flex-wrap items-center gap-density-2 text-xs text-muted-foreground\"\n    >\n      <span className=\"font-medium text-foreground\">\n        {count.toLocaleString()} selected\n      </span>\n      <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onClear}>\n        Clear selection\n      </Button>\n    </div>\n  );\n}\n\nconst DEFAULT_CANCEL_LABEL = \"Cancel\";\n\n/**\n * Confirmation goes through Modal rather than a popover of its own: Modal owns\n * focus trapping, the escape layer and the overlay z-index stack, and this\n * library should have one answer to \"are you sure\".\n */\nfunction SelectionConfirmModal<T extends Record<string, unknown>>({\n  action,\n  context,\n  onCancel,\n  onConfirm,\n}: {\n  action: DataTableSelectionAction<T>;\n  context: DataTableSelectionContext<T>;\n  onCancel: () => void;\n  onConfirm: () => void;\n}) {\n  // `confirm: true` and `confirm: false` both mean \"no copy supplied\"; only an\n  // object customises the prompt.\n  const options: DataTableSelectionConfirm<T> =\n    typeof action.confirm === \"object\" ? action.confirm : {};\n  const count = context.selectedRowIds.length;\n  const message =\n    typeof options.message === \"function\"\n      ? options.message(context)\n      : (options.message ??\n        `This will apply to ${count.toLocaleString()} selected ${\n          count === 1 ? \"row\" : \"rows\"\n        }.`);\n  const confirmLabel =\n    options.confirmLabel ??\n    (typeof action.label === \"string\" ? action.label : \"Confirm\");\n\n  return (\n    <Modal\n      open\n      size=\"sm\"\n      expandable={false}\n      onClose={onCancel}\n      title={options.title ?? action.label}\n      footer={\n        <div className=\"flex justify-end gap-density-2\">\n          <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel ?? DEFAULT_CANCEL_LABEL}\n          </Button>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            variant={\n              action.variant === \"destructive\" ? \"destructive\" : \"default\"\n            }\n            onClick={onConfirm}\n          >\n            {confirmLabel}\n          </Button>\n        </div>\n      }\n    >\n      <p className=\"text-sm text-muted-foreground\">{message}</p>\n    </Modal>\n  );\n}\n\nexport type SelectionActionBarProps<T extends Record<string, unknown>> = {\n  actions: DataTableSelectionAction<T>[];\n  context: DataTableSelectionContext<T>;\n  /**\n   * Render the `{n} selected` count and Clear. False when something else is\n   * already stating them — DataTable's cross-page scope notice, say.\n   */\n  showCount?: boolean;\n  /**\n   * How many plain buttons stay on the row before the rest collapse. Named\n   * dropdowns are never capped — they are what the bar is for.\n   */\n  maxButtons?: number;\n  className?: string;\n};\n\n/**\n * The bulk-action cluster a table renders for itself when `selectionActions` is\n * a list. It owns the three things every caller was otherwise re-deriving: what\n * the selection is, which actions are worth a button, and the fact that a bulk\n * call is a request that can still be in flight.\n *\n * It takes only a descriptor list and a selection context, so a list that is\n * not a table — a hand-rolled sidebar of rows, say — can render the identical\n * toolbar rather than growing a second one that drifts.\n */\nexport function SelectionActionBar<T extends Record<string, unknown>>({\n  actions,\n  context,\n  showCount = true,\n  maxButtons,\n  className,\n}: SelectionActionBarProps<T>) {\n  const [pendingActionId, setPendingActionId] = useState<string | null>(null);\n  const [confirming, setConfirming] = useState<DataTableSelectionAction<T> | null>(\n    null,\n  );\n  const running = useRef(false);\n\n  // A bulk action is a request: it can be slow, it can fail, and it must not be\n  // sent twice. Failure is the caller's to report — this component's only\n  // obligation is to stop claiming the action is still running.\n  const run = useCallback(\n    (action: DataTableSelectionAction<T>) => {\n      if (running.current || action.disabled) return;\n      running.current = true;\n      setPendingActionId(action.id);\n      const settle = () => {\n        running.current = false;\n        setPendingActionId(null);\n      };\n      let result: void | Promise<void>;\n      try {\n        result = action.onSelect(context);\n      } catch (error) {\n        settle();\n        throw error;\n      }\n      // A synchronous action settles in the same batch it started, so it never\n      // paints a spinner — which is right: there was nothing to wait for.\n      if (result instanceof Promise) void result.finally(settle);\n      else settle();\n    },\n    [context],\n  );\n\n  const begin = useCallback(\n    (action: DataTableSelectionAction<T>) => {\n      // Confirm first, run second. The prompt is modal rather than a popover\n      // because the click that opens it is the last one the reader gets back.\n      if (action.confirm) setConfirming(action);\n      else run(action);\n    },\n    [run],\n  );\n\n  const { menus, buttons, overflow } = splitSelectionActions(actions, {\n    maxButtons,\n  });\n  const inline = [...menus, ...buttons];\n  const busy = pendingActionId !== null;\n  const pendingOverflow = overflow.find(\n    (action) => action.id === pendingActionId,\n  );\n\n  // Every sibling locks while one action runs. The rows underneath are already\n  // being rewritten, and a second bulk call against a selection that is halfway\n  // through changing is the one nobody can put back.\n  const toMenuItem = (action: DataTableSelectionAction<T>): DropdownMenuItem => ({\n    label: action.label,\n    onSelect: () => begin(action),\n    disabled: action.disabled || busy,\n    ...(action.icon ? { icon: action.icon } : {}),\n    ...(action.section !== undefined ? { group: action.section } : {}),\n    ...(action.children?.length\n      ? { children: action.children.map(toMenuItem) }\n      : {}),\n  });\n\n  // Grouped so DropdownMenu's contiguous-group headings land on the right rows:\n  // it renders a heading above the first item of each run and expects the\n  // caller to have grouped them.\n  //\n  // Sections keep the order they first appear in, and items keep theirs within\n  // a section. Sorting alphabetically would also make the groups contiguous,\n  // but it would silently reorder the caller's list — and a caller that put its\n  // destructive action last would find a section named \"Danger\" sorted to the\n  // top of the menu, directly under the cursor.\n  const bySection = new Map<string, DataTableSelectionAction<T>[]>();\n  for (const action of overflow) {\n    const key = action.section ?? \"\";\n    const existing = bySection.get(key);\n    if (existing) existing.push(action);\n    else bySection.set(key, [action]);\n  }\n  const overflowItems = [...bySection.values()].flat().map(toMenuItem);\n\n  return (\n    <>\n      {showCount ? (\n        <SelectionCountNotice\n          count={context.selectedRowIds.length}\n          onClear={context.clearSelection}\n        />\n      ) : null}\n      <span className={className}>\n        {inline.map((action) => {\n          const pending = pendingActionId === action.id;\n          const isMenu = menus.includes(action);\n          const trigger = (\n            <Button\n              type=\"button\"\n              size=\"sm\"\n              variant={action.variant ?? \"outline\"}\n              disabled={action.disabled || (busy && !pending)}\n              loading={pending}\n              {...(isMenu\n                ? { \"aria-haspopup\": \"menu\" as const }\n                : { onClick: () => begin(action) })}\n            >\n              {/* The spinner takes the icon's place rather than sitting beside it. */}\n              {action.icon && !pending ? (\n                <Icon\n                  icon={action.icon}\n                  {...(action.iconClassName\n                    ? { className: action.iconClassName }\n                    : {})}\n                />\n              ) : null}\n              {pending && action.pendingLabel !== undefined\n                ? action.pendingLabel\n                : action.label}\n              {isMenu ? <Icon icon={UiChevronDown} /> : null}\n            </Button>\n          );\n\n          if (!isMenu) {\n            return <span key={action.id}>{trigger}</span>;\n          }\n\n          // The trigger only opens the menu; the write is whichever value the\n          // reader picks inside it. `menu` and `children` are the two bodies a\n          // caller can supply, and DropdownMenu already renders both — one as\n          // items, one as its own render prop — so nothing here re-implements a\n          // menu.\n          const body = action.menu\n            ? {\n                children: (closeMenu: () => void) =>\n                  action.menu!({\n                    context,\n                    close: closeMenu,\n                    busy,\n                    // Work started inside a custom body is still this action's\n                    // work: routing it through `run` is what puts the spinner\n                    // on this trigger and locks the siblings, instead of the\n                    // bar sitting idle while a bulk call is in flight.\n                    run: (task) =>\n                      begin({\n                        ...action,\n                        ...(task.pendingLabel !== undefined\n                          ? { pendingLabel: task.pendingLabel }\n                          : {}),\n                        ...(task.confirm !== undefined\n                          ? { confirm: task.confirm }\n                          : {}),\n                        onSelect: task.onSelect,\n                      }),\n                  }),\n              }\n            : { items: (action.children ?? []).map(toMenuItem) };\n\n          return (\n            <DropdownMenu\n              key={action.id}\n              align=\"left\"\n              menuLabel={\n                typeof action.label === \"string\" ? action.label : action.id\n              }\n              trigger={trigger}\n              {...body}\n            />\n          );\n        })}\n        {overflow.length > 0 ? (\n          <DropdownMenu\n            align=\"right\"\n            menuLabel=\"Selection actions\"\n            items={overflowItems}\n            trigger={\n              <Button\n                type=\"button\"\n                size=\"sm\"\n                variant=\"outline\"\n                aria-haspopup=\"menu\"\n                aria-label=\"More selection actions\"\n                // A menu action that is running has no row of its own to report\n                // from, so the trigger it came out of reports for it.\n                disabled={busy && !pendingOverflow}\n                loading={!!pendingOverflow}\n              >\n                {pendingOverflow ? null : <Icon icon={UiEllipsis} />}\n                More\n                <Icon icon={UiChevronDown} />\n              </Button>\n            }\n          />\n        ) : null}\n      </span>\n      {confirming ? (\n        <SelectionConfirmModal\n          action={confirming}\n          context={context}\n          onCancel={() => setConfirming(null)}\n          onConfirm={() => {\n            const action = confirming;\n            setConfirming(null);\n            run(action);\n          }}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/data/TaskManager.cjs

@@ -50,6 +50,7 @@ function TaskManager({
     for (const r of runs) if (r.kind) set.add(r.kind);
     return [...set].sort();
   }, [runs]);
+  const applications = react.useMemo(() => groupRunsByApplication(runs), [runs]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("space-y-3", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
       !kind && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -82,20 +83,41 @@ function TaskManager({
       ),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: status })
     ] }),
-    runs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground", children: "No background tasks." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border bg-card", children: runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
-      RunRow,
-      {
-        run,
-        basePath,
-        pollMs,
-        selectedId,
-        onSelectRun,
-        runsQueryKey
-      },
-      run.id
-    )) })
+    runs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground", children: "No background tasks." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: applications.map((application) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 px-1 text-xs font-semibold text-muted-foreground", children: applicationLabel(application.kind) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border bg-card", children: application.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
+        RunRow,
+        {
+          run,
+          basePath,
+          pollMs,
+          selectedId,
+          onSelectRun,
+          runsQueryKey
+        },
+        run.id
+      )) })
+    ] }, application.kind)) })
   ] });
 }
+function groupRunsByApplication(runs) {
+  const grouped = /* @__PURE__ */ new Map();
+  for (const run of runs) {
+    const application = run.kind || "other";
+    grouped.set(application, [...grouped.get(application) ?? [], run]);
+  }
+  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));
+}
+function applicationLabel(kind) {
+  const names = {
+    makerprint: "MakerPrint",
+    openscad: "OpenSCAD",
+    orca: "Orca",
+    snapmaker: "Snapmaker",
+    other: "Other"
+  };
+  return names[kind] ?? kind;
+}
 function RunRow({
   run,
   basePath,