@questpie/admin 1.1.0 → 2.0.0

package/dist/client/views/collection/bulk-action-toolbar.mjs

@@ -0,0 +1,291 @@
+"use client";
+
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { selectAuthClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { Icon } from "@iconify/react";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/views/collection/bulk-action-toolbar.tsx
+/**
+* Floating Toolbar
+*
+* Unified floating toolbar that displays when:
+* - Rows are selected in a table view (bulk actions)
+* - Filters are active (filter indicator)
+*
+* Combines both functionalities into a single non-jumping UI element.
+*/
+/**
+* BulkActionToolbar - Shows selection count and bulk actions
+*
+* @example
+* ```tsx
+* {selectedItems.length > 0 && (
+*   <BulkActionToolbar
+*     table={table}
+*     actions={bulkActions}
+*     collection="posts"
+*     helpers={actionHelpers}
+*     totalCount={totalItems}
+*     pageCount={items.length}
+*   />
+* )}
+* ```
+*/
+function BulkActionToolbar({ table, actions, collection, helpers, totalCount, pageCount, onOpenDialog, onSelectAllMatching, onBulkDelete, filterCount = 0, onClearFilters, onOpenFilters }) {
+	const { t } = useTranslation();
+	const resolveText = useResolveText();
+	const authClient = useAdminStore(selectAuthClient);
+	const queryClient = useQueryClient();
+	const [confirmAction, setConfirmAction] = React$1.useState(null);
+	const [isLoading, setIsLoading] = React$1.useState(false);
+	const [isSelectingAll, setIsSelectingAll] = React$1.useState(false);
+	const actionQueryClient = React$1.useMemo(() => ({
+		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+		refetchQueries: (filters) => queryClient.refetchQueries(filters),
+		resetQueries: (filters) => queryClient.resetQueries(filters)
+	}), [queryClient]);
+	const selectedRows = table.getSelectedRowModel().rows;
+	const selectedItems = React$1.useMemo(() => selectedRows.map((row) => row.original), [selectedRows]);
+	const selectedCount = selectedItems.length;
+	const ctx = React$1.useMemo(() => ({
+		item: selectedItems,
+		collection,
+		helpers,
+		queryClient: actionQueryClient,
+		authClient
+	}), [
+		selectedItems,
+		collection,
+		helpers,
+		actionQueryClient,
+		authClient
+	]);
+	const visibleActions = React$1.useMemo(() => {
+		return actions.filter((action) => {
+			if (action.visible === void 0) return true;
+			if (typeof action.visible === "function") return action.visible(ctx);
+			return action.visible;
+		});
+	}, [actions, ctx]);
+	const hasFilters = filterCount > 0;
+	const hasSelection = selectedCount > 0;
+	if (!hasSelection && !hasFilters) return null;
+	const executeBulkAction = async (action) => {
+		const { handler } = action;
+		if (action.id === "deleteMany" && onBulkDelete) {
+			setIsLoading(true);
+			try {
+				await onBulkDelete(selectedItems.map((item) => item?.id).filter(Boolean));
+				table.resetRowSelection();
+			} catch (_error) {
+				helpers.toast.error(t("collection.bulkDeleteError"));
+			} finally {
+				setIsLoading(false);
+			}
+			return;
+		}
+		switch (handler.type) {
+			case "api":
+				setIsLoading(true);
+				try {
+					const ids = selectedItems.map((item) => item?.id).filter(Boolean);
+					helpers.toast.info(`Bulk API call: ${handler.method || "POST"} ${handler.endpoint} (${ids.length} items)`);
+					helpers.refresh();
+					table.resetRowSelection();
+				} catch (_error) {
+					helpers.toast.error(t("collection.bulkActionFailed"));
+				} finally {
+					setIsLoading(false);
+				}
+				break;
+			case "custom":
+				setIsLoading(true);
+				try {
+					await handler.fn(ctx);
+					table.resetRowSelection();
+				} catch (_error) {
+					helpers.toast.error(t("collection.bulkActionFailed"));
+				} finally {
+					setIsLoading(false);
+				}
+				break;
+			case "dialog":
+			case "form":
+				onOpenDialog?.(action, selectedItems);
+				break;
+			case "navigate":
+				helpers.toast.error("Navigate action not supported for bulk operations");
+				break;
+			case "server":
+				onOpenDialog?.(action, selectedItems);
+				break;
+		}
+	};
+	const handleActionClick = (action) => {
+		if (action.confirmation) setConfirmAction(action);
+		else executeBulkAction(action);
+	};
+	const handleConfirm = async () => {
+		if (confirmAction) {
+			await executeBulkAction(confirmAction);
+			setConfirmAction(null);
+		}
+	};
+	const handleSelectAllMatching = async () => {
+		if (!onSelectAllMatching) return;
+		setIsSelectingAll(true);
+		try {
+			await onSelectAllMatching();
+		} finally {
+			setIsSelectingAll(false);
+		}
+	};
+	const isDisabled = (action) => {
+		if (action.disabled === void 0) return false;
+		if (typeof action.disabled === "function") return action.disabled(ctx);
+		return action.disabled;
+	};
+	const regularActions = visibleActions.filter((a) => a.variant !== "destructive");
+	const destructiveActions = visibleActions.filter((a) => a.variant === "destructive");
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-4 fade-in duration-200 max-w-[calc(100%-2rem)] sm:max-w-none",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-2 sm:py-2.5 bg-background/95 backdrop-blur-md border border-border shadow-lg rounded-full overflow-x-auto",
+			children: [hasFilters && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 shrink-0",
+				children: [onOpenFilters ? /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onOpenFilters,
+					className: "h-6 px-2 text-xs gap-2",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:funnel-fill",
+						width: 14,
+						height: 14,
+						className: "text-primary"
+					}), t("viewOptions.activeFilters", { count: filterCount })]
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:funnel-fill",
+					width: 14,
+					height: 14,
+					className: "text-primary"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium whitespace-nowrap",
+					children: t("viewOptions.activeFilters", { count: filterCount })
+				})] }), onClearFilters && /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					onClick: onClearFilters,
+					className: "h-6 px-2 text-xs",
+					children: t("viewOptions.clearFilters")
+				})]
+			}), hasSelection && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border shrink-0" })] }), hasSelection && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium whitespace-nowrap shrink-0",
+					children: t("collection.selected", { count: selectedCount })
+				}),
+				/* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border shrink-0" }),
+				/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						className: "gap-1 h-7 px-2 shrink-0"
+					}),
+					disabled: isSelectingAll,
+					children: [t("common.selectAll").split(" ")[0], /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:caret-down",
+						className: "size-3"
+					})]
+				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					align: "center",
+					side: "top",
+					sideOffset: 8,
+					children: [
+						/* @__PURE__ */ jsxs(DropdownMenuItem, {
+							onClick: () => table.toggleAllPageRowsSelected(true),
+							children: [t("collection.selectOnPage"), pageCount ? ` (${pageCount})` : ""]
+						}),
+						onSelectAllMatching && totalCount && totalCount > (pageCount ?? 0) && /* @__PURE__ */ jsx(DropdownMenuItem, {
+							onClick: handleSelectAllMatching,
+							children: t("collection.selectAllMatching", { count: totalCount })
+						}),
+						/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+						/* @__PURE__ */ jsx(DropdownMenuItem, {
+							onClick: () => table.resetRowSelection(),
+							children: t("collection.clearSelection")
+						})
+					]
+				})] }),
+				visibleActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						size: "sm",
+						className: "gap-1 h-7 px-2 shrink-0"
+					}),
+					disabled: isLoading,
+					children: [t("common.actions"), /* @__PURE__ */ jsx(Icon, {
+						icon: "ph:caret-down",
+						className: "size-3"
+					})]
+				}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+					align: "center",
+					side: "top",
+					sideOffset: 8,
+					children: [
+						regularActions.map((action) => {
+							const iconElement = resolveIconElement(action.icon, { className: "mr-2 size-4" });
+							return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+								onClick: () => handleActionClick(action),
+								disabled: isDisabled(action) || isLoading,
+								children: [iconElement, resolveText(action.label)]
+							}, action.id);
+						}),
+						regularActions.length > 0 && destructiveActions.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+						destructiveActions.map((action) => {
+							const iconElement = resolveIconElement(action.icon, { className: "mr-2 size-4" });
+							return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+								variant: "destructive",
+								onClick: () => handleActionClick(action),
+								disabled: isDisabled(action) || isLoading,
+								children: [iconElement, resolveText(action.label)]
+							}, action.id);
+						})
+					]
+				})] }),
+				/* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => table.resetRowSelection(),
+					className: "size-7 shrink-0",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:x",
+						className: "size-4"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "sr-only",
+						children: t("collection.clearSelection")
+					})]
+				})
+			] })]
+		})
+	}), confirmAction?.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
+		open: !!confirmAction,
+		onOpenChange: (open) => !open && setConfirmAction(null),
+		config: {
+			...confirmAction.confirmation,
+			description: confirmAction.confirmation.description ? `${confirmAction.confirmation.description} (${selectedCount} items)` : `This will affect ${selectedCount} items.`
+		},
+		onConfirm: handleConfirm,
+		loading: isLoading
+	})] });
+}
+
+//#endregion
+export { BulkActionToolbar };
+//# sourceMappingURL=bulk-action-toolbar.mjs.map

package/dist/client/views/collection/bulk-action-toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-action-toolbar.mjs","names":["React","actionQueryClient: ActionQueryClient","ctx: ActionContext<TItem[]>"],"sources":["../../../../src/client/views/collection/bulk-action-toolbar.tsx"],"sourcesContent":["/**\n * Floating Toolbar\n *\n * Unified floating toolbar that displays when:\n * - Rows are selected in a table view (bulk actions)\n * - Filters are active (filter indicator)\n *\n * Combines both functionalities into a single non-jumping UI element.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport type { Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport type {\n  ActionContext,\n  ActionDefinition,\n  ActionHelpers,\n  ActionQueryClient,\n} from \"../../builder/types/action-types\";\nimport { ConfirmationDialog } from \"../../components/actions/confirmation-dialog\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { Button } from \"../../components/ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../../components/ui/dropdown-menu\";\nimport { useResolveText, useTranslation } from \"../../i18n/hooks\";\nimport { selectAuthClient, useAdminStore } from \"../../runtime/provider\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface BulkActionToolbarProps<TItem = any> {\n  /** TanStack Table instance */\n  table: Table<TItem>;\n  /** Bulk actions to display */\n  actions: ActionDefinition<TItem>[];\n  /** Collection name */\n  collection: string;\n  /** Action helpers */\n  helpers: ActionHelpers;\n  /** Total count of items matching current filter (for \"select all matching\") */\n  totalCount?: number;\n  /** Number of items on current page */\n  pageCount?: number;\n  /** Callback when action dialog should open */\n  onOpenDialog?: (action: ActionDefinition<TItem>, items: TItem[]) => void;\n  /** Callback to select all items matching current filter */\n  onSelectAllMatching?: () => Promise<void>;\n  /** Callback to execute bulk delete */\n  onBulkDelete?: (ids: string[]) => Promise<void>;\n  /** Number of active filters (for filter indicator segment) */\n  filterCount?: number;\n  /** Callback to clear all filters */\n  onClearFilters?: () => void;\n  /** Callback to open filter sheet */\n  onOpenFilters?: () => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * BulkActionToolbar - Shows selection count and bulk actions\n *\n * @example\n * ```tsx\n * {selectedItems.length > 0 && (\n *   <BulkActionToolbar\n *     table={table}\n *     actions={bulkActions}\n *     collection=\"posts\"\n *     helpers={actionHelpers}\n *     totalCount={totalItems}\n *     pageCount={items.length}\n *   />\n * )}\n * ```\n */\nexport function BulkActionToolbar<TItem = any>({\n  table,\n  actions,\n  collection,\n  helpers,\n  totalCount,\n  pageCount,\n  onOpenDialog,\n  onSelectAllMatching,\n  onBulkDelete,\n  filterCount = 0,\n  onClearFilters,\n  onOpenFilters,\n}: BulkActionToolbarProps<TItem>): React.ReactElement | null {\n  const { t } = useTranslation();\n  const resolveText = useResolveText();\n  const authClient = useAdminStore(selectAuthClient);\n  const queryClient = useQueryClient();\n  const [confirmAction, setConfirmAction] =\n    React.useState<ActionDefinition<TItem> | null>(null);\n  const [isLoading, setIsLoading] = React.useState(false);\n  const [isSelectingAll, setIsSelectingAll] = React.useState(false);\n\n  // Wrapped query client for action context\n  const actionQueryClient: ActionQueryClient = React.useMemo(\n    () => ({\n      invalidateQueries: (filters) => queryClient.invalidateQueries(filters),\n      refetchQueries: (filters) => queryClient.refetchQueries(filters),\n      resetQueries: (filters) => queryClient.resetQueries(filters),\n    }),\n    [queryClient],\n  );\n\n  // Get selected items\n  const selectedRows = table.getSelectedRowModel().rows;\n  const selectedItems = React.useMemo(\n    () => selectedRows.map((row) => row.original),\n    [selectedRows],\n  );\n  const selectedCount = selectedItems.length;\n\n  // Build action context for bulk operations\n  const ctx: ActionContext<TItem[]> = React.useMemo(\n    () => ({\n      item: selectedItems,\n      collection,\n      helpers,\n      queryClient: actionQueryClient,\n      authClient,\n    }),\n    [selectedItems, collection, helpers, actionQueryClient, authClient],\n  );\n\n  // Filter visible actions\n  const visibleActions = React.useMemo(() => {\n    return actions.filter((action) => {\n      if (action.visible === undefined) return true;\n      if (typeof action.visible === \"function\") {\n        // For bulk actions, pass the array of items\n        return action.visible(ctx as any);\n      }\n      return action.visible;\n    });\n  }, [actions, ctx]);\n\n  // Don't render if nothing selected AND no active filters (after all hooks)\n  const hasFilters = filterCount > 0;\n  const hasSelection = selectedCount > 0;\n  if (!hasSelection && !hasFilters) return null;\n\n  // Execute bulk action handler\n  const executeBulkAction = async (action: ActionDefinition<TItem>) => {\n    const { handler } = action;\n\n    // Handle built-in deleteMany action\n    if (action.id === \"deleteMany\" && onBulkDelete) {\n      setIsLoading(true);\n      try {\n        const ids = selectedItems.map((item: any) => item?.id).filter(Boolean);\n        await onBulkDelete(ids);\n        table.resetRowSelection();\n      } catch (_error) {\n        helpers.toast.error(t(\"collection.bulkDeleteError\"));\n      } finally {\n        setIsLoading(false);\n      }\n      return;\n    }\n\n    switch (handler.type) {\n      case \"api\": {\n        setIsLoading(true);\n        try {\n          // For bulk API calls, would need to send all IDs\n          const ids = selectedItems\n            .map((item: any) => item?.id)\n            .filter(Boolean);\n          helpers.toast.info(\n            `Bulk API call: ${handler.method || \"POST\"} ${handler.endpoint} (${ids.length} items)`,\n          );\n          helpers.refresh();\n          table.resetRowSelection();\n        } catch (_error) {\n          helpers.toast.error(t(\"collection.bulkActionFailed\"));\n        } finally {\n          setIsLoading(false);\n        }\n        break;\n      }\n\n      case \"custom\": {\n        setIsLoading(true);\n        try {\n          // Pass all items to the custom handler\n          await handler.fn(ctx as any);\n          table.resetRowSelection();\n        } catch (_error) {\n          helpers.toast.error(t(\"collection.bulkActionFailed\"));\n        } finally {\n          setIsLoading(false);\n        }\n        break;\n      }\n\n      case \"dialog\":\n      case \"form\": {\n        onOpenDialog?.(action, selectedItems);\n        break;\n      }\n\n      case \"navigate\": {\n        // Navigate doesn't make sense for bulk actions\n        helpers.toast.error(\n          \"Navigate action not supported for bulk operations\",\n        );\n        break;\n      }\n\n      case \"server\": {\n        // Server actions with forms open dialog, otherwise execute\n        onOpenDialog?.(action, selectedItems);\n        break;\n      }\n    }\n  };\n\n  // Handle action click\n  const handleActionClick = (action: ActionDefinition<TItem>) => {\n    if (action.confirmation) {\n      setConfirmAction(action);\n    } else {\n      executeBulkAction(action);\n    }\n  };\n\n  // Handle confirmation\n  const handleConfirm = async () => {\n    if (confirmAction) {\n      await executeBulkAction(confirmAction);\n      setConfirmAction(null);\n    }\n  };\n\n  // Handle select all matching\n  const handleSelectAllMatching = async () => {\n    if (!onSelectAllMatching) return;\n    setIsSelectingAll(true);\n    try {\n      await onSelectAllMatching();\n    } finally {\n      setIsSelectingAll(false);\n    }\n  };\n\n  // Check if action is disabled\n  const isDisabled = (action: ActionDefinition<TItem>) => {\n    if (action.disabled === undefined) return false;\n    if (typeof action.disabled === \"function\") {\n      return action.disabled(ctx as any);\n    }\n    return action.disabled;\n  };\n\n  // Group actions: regular and destructive\n  const regularActions = visibleActions.filter(\n    (a) => a.variant !== \"destructive\",\n  );\n  const destructiveActions = visibleActions.filter(\n    (a) => a.variant === \"destructive\",\n  );\n\n  return (\n    <>\n      {/* Fixed toolbar at bottom of screen */}\n      <div className=\"fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in slide-in-from-bottom-4 fade-in duration-200 max-w-[calc(100%-2rem)] sm:max-w-none\">\n        <div className=\"flex items-center gap-2 sm:gap-3 px-3 sm:px-4 py-2 sm:py-2.5 bg-background/95 backdrop-blur-md border border-border shadow-lg rounded-full overflow-x-auto\">\n          {/* Filter segment - shows when filters are active */}\n          {hasFilters && (\n            <>\n              <div className=\"flex items-center gap-2 shrink-0\">\n                {onOpenFilters ? (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    onClick={onOpenFilters}\n                    className=\"h-6 px-2 text-xs gap-2\"\n                  >\n                    <Icon\n                      icon=\"ph:funnel-fill\"\n                      width={14}\n                      height={14}\n                      className=\"text-primary\"\n                    />\n                    {t(\"viewOptions.activeFilters\", { count: filterCount })}\n                  </Button>\n                ) : (\n                  <>\n                    <Icon\n                      icon=\"ph:funnel-fill\"\n                      width={14}\n                      height={14}\n                      className=\"text-primary\"\n                    />\n                    <span className=\"text-sm font-medium whitespace-nowrap\">\n                      {t(\"viewOptions.activeFilters\", { count: filterCount })}\n                    </span>\n                  </>\n                )}\n                {onClearFilters && (\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    onClick={onClearFilters}\n                    className=\"h-6 px-2 text-xs\"\n                  >\n                    {t(\"viewOptions.clearFilters\")}\n                  </Button>\n                )}\n              </div>\n\n              {/* Divider between filter and selection segments */}\n              {hasSelection && <div className=\"h-4 w-px bg-border shrink-0\" />}\n            </>\n          )}\n\n          {/* Selection segment - shows when rows are selected */}\n          {hasSelection && (\n            <>\n              {/* Selection count */}\n              <span className=\"text-sm font-medium whitespace-nowrap shrink-0\">\n                {t(\"collection.selected\", { count: selectedCount })}\n              </span>\n\n              {/* Divider */}\n              <div className=\"h-4 w-px bg-border shrink-0\" />\n\n              {/* Select dropdown */}\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"gap-1 h-7 px-2 shrink-0\"\n                    />\n                  }\n                  disabled={isSelectingAll}\n                >\n                  {t(\"common.selectAll\").split(\" \")[0]}\n                  <Icon icon=\"ph:caret-down\" className=\"size-3\" />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"center\" side=\"top\" sideOffset={8}>\n                  <DropdownMenuItem\n                    onClick={() => table.toggleAllPageRowsSelected(true)}\n                  >\n                    {t(\"collection.selectOnPage\")}\n                    {pageCount ? ` (${pageCount})` : \"\"}\n                  </DropdownMenuItem>\n                  {onSelectAllMatching &&\n                    totalCount &&\n                    totalCount > (pageCount ?? 0) && (\n                      <DropdownMenuItem onClick={handleSelectAllMatching}>\n                        {t(\"collection.selectAllMatching\", {\n                          count: totalCount,\n                        })}\n                      </DropdownMenuItem>\n                    )}\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem onClick={() => table.resetRowSelection()}>\n                    {t(\"collection.clearSelection\")}\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n\n              {/* Bulk actions dropdown */}\n              {visibleActions.length > 0 && (\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={\n                      <Button\n                        variant=\"outline\"\n                        size=\"sm\"\n                        className=\"gap-1 h-7 px-2 shrink-0\"\n                      />\n                    }\n                    disabled={isLoading}\n                  >\n                    {t(\"common.actions\")}\n                    <Icon icon=\"ph:caret-down\" className=\"size-3\" />\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"center\" side=\"top\" sideOffset={8}>\n                    {regularActions.map((action) => {\n                      const iconElement = resolveIconElement(action.icon, {\n                        className: \"mr-2 size-4\",\n                      });\n                      return (\n                        <DropdownMenuItem\n                          key={action.id}\n                          onClick={() => handleActionClick(action)}\n                          disabled={isDisabled(action) || isLoading}\n                        >\n                          {iconElement}\n                          {resolveText(action.label)}\n                        </DropdownMenuItem>\n                      );\n                    })}\n\n                    {regularActions.length > 0 &&\n                      destructiveActions.length > 0 && (\n                        <DropdownMenuSeparator />\n                      )}\n\n                    {destructiveActions.map((action) => {\n                      const iconElement = resolveIconElement(action.icon, {\n                        className: \"mr-2 size-4\",\n                      });\n                      return (\n                        <DropdownMenuItem\n                          key={action.id}\n                          variant=\"destructive\"\n                          onClick={() => handleActionClick(action)}\n                          disabled={isDisabled(action) || isLoading}\n                        >\n                          {iconElement}\n                          {resolveText(action.label)}\n                        </DropdownMenuItem>\n                      );\n                    })}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              )}\n\n              {/* Clear selection button */}\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                onClick={() => table.resetRowSelection()}\n                className=\"size-7 shrink-0\"\n              >\n                <Icon icon=\"ph:x\" className=\"size-4\" />\n                <span className=\"sr-only\">\n                  {t(\"collection.clearSelection\")}\n                </span>\n              </Button>\n            </>\n          )}\n        </div>\n      </div>\n\n      {/* Confirmation dialog */}\n      {confirmAction?.confirmation && (\n        <ConfirmationDialog\n          open={!!confirmAction}\n          onOpenChange={(open) => !open && setConfirmAction(null)}\n          config={{\n            ...confirmAction.confirmation,\n            // Override description to include count\n            description: confirmAction.confirmation.description\n              ? `${confirmAction.confirmation.description} (${selectedCount} items)`\n              : `This will affect ${selectedCount} items.`,\n          }}\n          onConfirm={handleConfirm}\n          loading={isLoading}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/client/views/collection/cells/complex-cells.d.mts

@@ -0,0 +1,46 @@
+import { FieldDefinition } from "../../../builder/field/field.mjs";
+import * as react_jsx_runtime183 from "react/jsx-runtime";
+
+//#region src/client/views/collection/cells/complex-cells.d.ts
+
+/**
+ * JSON cell - compact JSON display
+ */
+declare function JsonCell({
+  value
+}: {
+  value: unknown;
+}): react_jsx_runtime183.JSX.Element;
+/**
+ * Object cell - displays nested object with hover tooltip preview
+ */
+declare function ObjectCell({
+  value,
+  fieldDef
+}: {
+  value: unknown;
+  row?: unknown;
+  fieldDef?: FieldDefinition;
+}): react_jsx_runtime183.JSX.Element;
+/**
+ * Array cell - displays array items with hover tooltip preview
+ */
+declare function ArrayCell({
+  value,
+  fieldDef
+}: {
+  value: unknown;
+  row?: unknown;
+  fieldDef?: FieldDefinition;
+}): react_jsx_runtime183.JSX.Element;
+/**
+ * Blocks cell - summarizes block tree content with type counts
+ */
+declare function BlocksCell({
+  value
+}: {
+  value: unknown;
+}): react_jsx_runtime183.JSX.Element;
+//#endregion
+export { ArrayCell, BlocksCell, JsonCell, ObjectCell };
+//# sourceMappingURL=complex-cells.d.mts.map

package/dist/client/views/collection/cells/complex-cells.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"complex-cells.d.mts","names":[],"sources":["../../../../../src/client/views/collection/cells/complex-cells.tsx"],"sourcesContent":[],"mappings":";;;;;;AA2MA;;AAEC,iBArKe,QAAA,CAqKf;EAAA;CAAA,EAAA;EAIW,KAAA,EAAA,OAAA;CACX,CAAA,EA1KqD,oBAAA,CAAA,GAAA,CAAA,OA0KrD;;AAmMD;;iBAxVgB,UAAA;;;;;;aAMJ;IACX,oBAAA,CAAA,GAAA,CAAA;;;;iBAuIe,SAAA;;;;;;aAMJ;IACX,oBAAA,CAAA,GAAA,CAAA;;;;iBAmMe,UAAA;;;;IAAwC,oBAAA,CAAA,GAAA,CAAA"}