indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/datagrid/columns/ActionsColumn.js

@@ -0,0 +1,485 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionsColumn = ActionsColumn;
+exports.createActionsColumn = createActionsColumn;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ActionsColumn Component
+ *
+ * A comprehensive, flexible actions column for DataGrid with STANDARDIZED button sizing.
+ * All action buttons use consistent inline style (p-1, h-4 w-4 icons) to ensure uniform
+ * row heights across ALL grids in the application.
+ *
+ * Features:
+ * - Basic CRUD operations (View, Edit, Delete, Duplicate)
+ * - Advanced actions (Pin, Favorite, Archive, Restore, Export, Copy)
+ * - Multiple display modes (buttons, dropdown, mixed)
+ * - Conditional action visibility
+ * - Row state management (pinned, favorited, archived, protected)
+ * - Confirmation dialogs for destructive actions
+ * - Standardized inline buttons (4px padding, 16px icons)
+ * - Optional status badges (disabled by default to maintain row height)
+ *
+ * @example
+ * // Simple usage with buttons (most common)
+ * const actionsColumn = createActionsColumn({
+ *   onEdit: (row) => handleEdit(row),
+ *   onDelete: (row) => handleDelete(row.id),
+ *   showEdit: true,
+ *   showDelete: true,
+ *   mode: 'buttons',
+ *   primaryActions: ['edit', 'delete']
+ * })
+ *
+ * @example
+ * // Advanced usage with conditional display
+ * const actionsColumn = createActionsColumn({
+ *   onEdit: (row) => handleEdit(row),
+ *   onDelete: (row) => handleDelete(row.id),
+ *   onArchive: (row) => handleArchive(row.id),
+ *   showEdit: (row) => !row.isLocked,
+ *   showDelete: (row) => row.canDelete,
+ *   isProtected: (row) => row.isSystem,
+ *   mode: 'mixed',
+ *   primaryActions: ['edit', 'delete']
+ * })
+ */
+const react_1 = __importStar(require("react"));
+const ModuleAuthContext_1 = require("../../../contexts/ModuleAuthContext.js");
+const lucide_react_1 = require("lucide-react");
+const ui_1 = require("../../ui/index.js");
+const ui_2 = require("../../ui/index.js");
+const ui_3 = require("../../ui/index.js");
+const GlobalAlertContext_1 = require("../../../contexts/GlobalAlertContext.js");
+const DeviceContext_1 = require("../../../contexts/DeviceContext.js");
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+function ActionsColumn({ row, config, }) {
+    const alerts = (0, GlobalAlertContext_1.useGlobalAlert)();
+    const pageAccess = (0, ModuleAuthContext_1.usePageAccess)();
+    const { isMobile } = (0, DeviceContext_1.useDevice)();
+    const data = row.original;
+    // Copy feedback: the copy button's icon flips to a check for 2s after copying.
+    const [justCopied, setJustCopied] = (0, react_1.useState)(false);
+    const { mode: configMode = 'buttons', primaryActions = ['edit', 'delete'], maxVisibleActions = 3, confirmDelete = true, confirmArchive = true, showStatusBadges = false, // Changed default to false to prevent row height increase
+    labels = {}, } = config;
+    // On mobile always use dropdown to save horizontal space
+    const mode = isMobile ? 'dropdown' : configMode;
+    // ============================================================================
+    // HELPERS
+    // ============================================================================
+    /**
+     * Check if an action should be shown based on config
+     */
+    const shouldShow = (0, react_1.useCallback)((condition, hasCallback) => {
+        if (condition === undefined)
+            return hasCallback;
+        if (typeof condition === 'boolean')
+            return condition;
+        return condition(data);
+    }, [data]);
+    /**
+     * Copy row data to clipboard as JSON
+     */
+    const copyRowData = (0, react_1.useCallback)(() => {
+        const rowText = JSON.stringify(data, null, 2);
+        navigator.clipboard.writeText(rowText);
+        config.onCopy?.(data);
+        setJustCopied(true);
+        window.setTimeout(() => setJustCopied(false), 2000);
+    }, [data, config]);
+    /**
+     * Export row as CSV
+     */
+    const exportRow = (0, react_1.useCallback)(() => {
+        const csvContent = Object.entries(data)
+            .map(([key, value]) => `${key},${value}`)
+            .join('\n');
+        const blob = new Blob([csvContent], { type: 'text/csv' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `row-${Date.now()}.csv`;
+        a.click();
+        URL.revokeObjectURL(url);
+        config.onExport?.(data);
+    }, [data, config]);
+    /**
+     * Handle delete with optional confirmation using GlobalAlert (warning style)
+     */
+    const handleDelete = (0, react_1.useCallback)(() => {
+        if (confirmDelete) {
+            alerts.showWarning(config.deleteConfirmation?.title || 'Delete Item', config.deleteConfirmation?.description || 'Are you sure you want to delete this item? This action cannot be undone.', [
+                {
+                    label: 'Cancel',
+                    onClick: () => alerts.hideAlert(),
+                    variant: 'secondary'
+                },
+                {
+                    label: 'Delete',
+                    onClick: () => {
+                        config.onDelete?.(data);
+                        alerts.hideAlert();
+                    },
+                    variant: 'primary'
+                }
+            ]);
+        }
+        else {
+            config.onDelete?.(data);
+        }
+    }, [confirmDelete, config, data, alerts]);
+    /**
+     * Handle archive with optional confirmation using GlobalAlert (warning style)
+     */
+    const handleArchive = (0, react_1.useCallback)(() => {
+        if (confirmArchive) {
+            alerts.showWarning(config.archiveConfirmation?.title || 'Archive Item', config.archiveConfirmation?.description || 'Are you sure you want to archive this item? It can be restored later.', [
+                {
+                    label: 'Cancel',
+                    onClick: () => alerts.hideAlert(),
+                    variant: 'secondary'
+                },
+                {
+                    label: 'Archive',
+                    onClick: () => {
+                        config.onArchive?.(data);
+                        alerts.hideAlert();
+                    },
+                    variant: 'primary'
+                }
+            ]);
+        }
+        else {
+            config.onArchive?.(data);
+        }
+    }, [confirmArchive, config, data, alerts]);
+    // ============================================================================
+    // ACTION DEFINITIONS
+    // ============================================================================
+    const actions = (0, react_1.useMemo)(() => {
+        const isProtected = config.isProtected?.(data) || false;
+        const isPinned = config.isPinned?.(data) || false;
+        const isFavorited = config.isFavorited?.(data) || false;
+        const isArchived = config.isArchived?.(data) || false;
+        const isBlocked = config.isBlocked?.(data) || false;
+        // Permission gates — use explicit config.permissions if provided, else fall back to usePageAccess()
+        // undefined means "no restriction from this permission" (allow)
+        const permCanEdit = config.permissions?.canEdit ?? pageAccess.canEdit;
+        const permCanSave = config.permissions?.canSave ?? pageAccess.canSave;
+        const permCanDelete = config.permissions?.canDelete ?? pageAccess.canDelete;
+        const permCanExport = config.permissions?.canExport ?? pageAccess.canExport;
+        const permCanPrint = config.permissions?.canPrint ?? pageAccess.canPrint;
+        const permCanCancel = config.permissions?.canCancel ?? pageAccess.canCancel;
+        return [
+            {
+                id: 'view',
+                label: labels.view || 'View',
+                icon: lucide_react_1.Eye,
+                action: () => config.onView?.(data),
+                show: shouldShow(config.showView, !!config.onView),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-info))] hover:bg-[rgb(var(--color-info-subtle))]',
+            },
+            {
+                id: 'edit',
+                label: labels.edit || 'Edit',
+                icon: lucide_react_1.Edit,
+                action: () => config.onEdit?.(data),
+                show: shouldShow(config.showEdit, !!config.onEdit) && !isProtected && (permCanEdit !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-orange))] hover:bg-[rgb(var(--color-orange-subtle))]',
+            },
+            {
+                id: 'duplicate',
+                label: labels.duplicate || 'Duplicate',
+                icon: lucide_react_1.Files,
+                action: () => config.onDuplicate?.(data),
+                show: shouldShow(config.showDuplicate, !!config.onDuplicate) && (permCanSave !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-success))] hover:bg-[rgb(var(--color-success-subtle))]',
+            },
+            {
+                id: 'target',
+                label: labels.target || 'Target Price',
+                icon: lucide_react_1.Target,
+                action: () => config.onTarget?.(data),
+                show: shouldShow(config.showTarget, !!config.onTarget),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary-subtle))]',
+            },
+            {
+                id: 'pin',
+                label: isPinned ? (labels.unpin || 'Unpin') : (labels.pin || 'Pin'),
+                icon: isPinned ? lucide_react_1.PinOff : lucide_react_1.Pin,
+                action: () => config.onPin?.(data, !isPinned),
+                show: shouldShow(config.showPin, !!config.onPin),
+                className: isPinned
+                    ? 'text-[rgb(var(--color-warning))] hover:text-[rgb(var(--color-warning-hover))] hover:bg-[rgb(var(--color-warning-subtle))]'
+                    : 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-warning))] hover:bg-[rgb(var(--color-warning-subtle))]',
+            },
+            {
+                id: 'favorite',
+                label: isFavorited ? (labels.unfavorite || 'Unfavorite') : (labels.favorite || 'Favorite'),
+                icon: isFavorited ? lucide_react_1.StarOff : lucide_react_1.Star,
+                action: () => config.onFavorite?.(data, !isFavorited),
+                show: shouldShow(config.showFavorite, !!config.onFavorite),
+                className: isFavorited
+                    ? 'text-[rgb(var(--color-warning))] hover:text-[rgb(var(--color-warning-hover))] hover:bg-[rgb(var(--color-warning-subtle))]'
+                    : 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-warning))] hover:bg-[rgb(var(--color-warning-subtle))]',
+            },
+            {
+                id: 'copy',
+                label: labels.copy || 'Copy Data',
+                icon: lucide_react_1.Copy,
+                action: copyRowData,
+                show: shouldShow(config.showCopy, !!config.onCopy),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary-subtle))]',
+            },
+            {
+                id: 'share',
+                label: labels.share || 'Share',
+                icon: lucide_react_1.Share2,
+                action: () => config.onShare?.(data),
+                show: shouldShow(config.showShare, !!config.onShare),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary-subtle))]',
+            },
+            {
+                id: 'export',
+                label: labels.export || 'Export',
+                icon: lucide_react_1.Download,
+                action: exportRow,
+                show: shouldShow(config.showExport, !!config.onExport) && (permCanExport !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-tertiary))] hover:bg-[rgb(var(--color-tertiary-subtle))]',
+            },
+            {
+                id: 'print',
+                label: labels.print || 'Print',
+                icon: lucide_react_1.Printer,
+                action: () => config.onPrint?.(data),
+                show: shouldShow(config.showPrint, !!config.onPrint) && (permCanPrint !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-primary))] hover:bg-[rgb(var(--color-primary-subtle))]',
+            },
+            {
+                id: 'archive',
+                label: labels.archive || 'Archive',
+                icon: lucide_react_1.Archive,
+                action: handleArchive,
+                show: shouldShow(config.showArchive, !!config.onArchive) && !isArchived && (permCanDelete !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-warning))] hover:bg-[rgb(var(--color-warning-subtle))]',
+                requiresConfirmation: confirmArchive,
+            },
+            {
+                id: 'restore',
+                label: labels.restore || 'Restore',
+                icon: lucide_react_1.RotateCcw,
+                action: () => config.onRestore?.(data),
+                show: shouldShow(config.showRestore, !!config.onRestore) && isArchived,
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-success))] hover:bg-[rgb(var(--color-success-subtle))]',
+            },
+            {
+                id: 'block',
+                label: isBlocked ? (labels.unblock || 'Unblock') : (labels.block || 'Block'),
+                icon: isBlocked ? lucide_react_1.CheckCircle : lucide_react_1.Ban,
+                action: () => config.onBlock?.(data, !isBlocked),
+                show: shouldShow(config.showBlock, !!config.onBlock) && (permCanCancel !== false),
+                className: isBlocked
+                    ? 'text-[rgb(var(--color-success))] hover:text-[rgb(var(--color-success-hover))] hover:bg-[rgb(var(--color-success-subtle))]'
+                    : 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-error))] hover:bg-[rgb(var(--color-error-subtle))]',
+            },
+            {
+                id: 'delete',
+                label: labels.delete || 'Delete',
+                icon: lucide_react_1.Trash2,
+                action: handleDelete,
+                show: shouldShow(config.showDelete, !!config.onDelete) && !isProtected && (permCanDelete !== false),
+                className: 'text-[rgb(var(--fg-default))] hover:text-[rgb(var(--color-error))] hover:bg-[rgb(var(--color-error-subtle))]',
+                requiresConfirmation: confirmDelete,
+                isDestructive: true,
+            },
+        ]
+            .map(action => config.icons?.[action.id] ? { ...action, icon: config.icons[action.id] } : action)
+            .filter(action => action.show);
+    }, [config, data, labels, shouldShow, copyRowData, exportRow, handleDelete, handleArchive, pageAccess]);
+    // ============================================================================
+    // LAYOUT LOGIC
+    // ============================================================================
+    const visibleActions = (0, react_1.useMemo)(() => {
+        if (mode === 'dropdown')
+            return [];
+        return actions
+            .filter(action => primaryActions.includes(action.id))
+            .slice(0, maxVisibleActions);
+    }, [mode, actions, primaryActions, maxVisibleActions]);
+    const dropdownActions = (0, react_1.useMemo)(() => {
+        if (mode === 'buttons')
+            return [];
+        if (mode === 'dropdown')
+            return actions;
+        // Mixed mode: show non-primary actions in dropdown
+        return actions.filter(action => !visibleActions.some(v => v.id === action.id));
+    }, [mode, actions, visibleActions]);
+    // ============================================================================
+    // RENDER
+    // ============================================================================
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [showStatusBadges && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 mr-1", children: [config.isPinned?.(data) && ((0, jsx_runtime_1.jsx)(ui_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(ui_3.Badge, { variant: "outline", className: "h-5 px-1.5 py-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pin, { className: "h-3 w-3 text-orange-500" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.TooltipContent, { children: "Pinned" })] }) })), config.isFavorited?.(data) && ((0, jsx_runtime_1.jsx)(ui_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(ui_3.Badge, { variant: "outline", className: "h-5 px-1.5 py-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { className: "h-3 w-3 text-yellow-500 fill-current" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.TooltipContent, { children: "Favorite" })] }) })), config.isArchived?.(data) && ((0, jsx_runtime_1.jsx)(ui_3.Badge, { variant: "secondary", className: "h-5 px-2 py-0 text-xs", children: "Archived" })), config.isProtected?.(data) && ((0, jsx_runtime_1.jsx)(ui_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(ui_3.Badge, { variant: "outline", className: "h-5 px-1.5 py-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Lock, { className: "h-3 w-3 text-[rgb(var(--color-warning))]" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.TooltipContent, { children: "Protected" })] }) })), config.isBlocked?.(data) && ((0, jsx_runtime_1.jsx)(ui_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(ui_3.Badge, { variant: "outline", className: "h-5 px-1.5 py-0", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Ban, { className: "h-3 w-3 text-[rgb(var(--color-error))]" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.TooltipContent, { children: "Blocked" })] }) }))] })), visibleActions.map((action) => {
+                    const isCopied = action.id === 'copy' && justCopied;
+                    const Icon = isCopied ? lucide_react_1.CheckCircle : action.icon;
+                    return ((0, jsx_runtime_1.jsx)(ui_2.TooltipProvider, { children: (0, jsx_runtime_1.jsxs)(ui_2.Tooltip, { children: [(0, jsx_runtime_1.jsx)(ui_2.TooltipTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onClick: (e) => {
+                                            e.stopPropagation();
+                                            action.action();
+                                        }, className: `p-1 rounded transition-colors ${isCopied ? 'text-[rgb(var(--color-success))] bg-[rgb(var(--color-success-subtle))]' : action.className}`, children: (0, jsx_runtime_1.jsx)(Icon, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.TooltipContent, { children: (0, jsx_runtime_1.jsx)("p", { children: isCopied ? 'Copied' : action.label }) })] }) }, action.id));
+                }), dropdownActions.length > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { className: "p-1 rounded transition-colors text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bg-subtle))]", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { className: "h-4 w-4" }) }) }), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuContent, { align: "end", className: "w-48", children: [mode === 'dropdown' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuLabel, { children: "Actions" }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {})] })), dropdownActions.map((action, index) => {
+                                    const Icon = action.icon;
+                                    const needsSeparator = action.isDestructive && index < dropdownActions.length - 1;
+                                    // Get hover background color only - text stays default until hover
+                                    const getDropdownHoverBg = (actionId) => {
+                                        switch (actionId) {
+                                            case 'delete':
+                                                return 'hover:bg-[rgb(var(--color-error-subtle))] focus:bg-[rgb(var(--color-error-subtle))]';
+                                            case 'view':
+                                                return 'hover:bg-[rgb(var(--color-primary-subtle))] focus:bg-[rgb(var(--color-primary-subtle))]';
+                                            case 'duplicate':
+                                                return 'hover:bg-[rgb(var(--color-success-subtle))] focus:bg-[rgb(var(--color-success-subtle))]';
+                                            case 'archive':
+                                                return 'hover:bg-[rgb(var(--color-warning-subtle))] focus:bg-[rgb(var(--color-warning-subtle))]';
+                                            case 'restore':
+                                                return 'hover:bg-[rgb(var(--color-success-subtle))] focus:bg-[rgb(var(--color-success-subtle))]';
+                                            case 'pin':
+                                                return 'hover:bg-[rgb(var(--color-warning-subtle))] focus:bg-[rgb(var(--color-warning-subtle))]';
+                                            case 'favorite':
+                                                return 'hover:bg-[rgb(var(--color-warning-subtle))] focus:bg-[rgb(var(--color-warning-subtle))]';
+                                            case 'copy':
+                                                return 'hover:bg-[rgb(var(--color-primary-subtle))] focus:bg-[rgb(var(--color-primary-subtle))]';
+                                            case 'share':
+                                                return 'hover:bg-[rgb(var(--color-primary-subtle))] focus:bg-[rgb(var(--color-primary-subtle))]';
+                                            case 'export':
+                                                return 'hover:bg-[rgb(var(--color-primary-subtle))] focus:bg-[rgb(var(--color-primary-subtle))]';
+                                            default:
+                                                return '';
+                                        }
+                                    };
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuItem, { onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    action.action();
+                                                }, className: `cursor-pointer ${getDropdownHoverBg(action.id)}`, children: [(0, jsx_runtime_1.jsx)(Icon, { className: "h-4 w-4 mr-2" }), action.label] }), needsSeparator && (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {})] }, action.id));
+                                })] })] }))] }) }));
+}
+// ============================================================================
+// HELPER FUNCTION TO CREATE ACTIONS COLUMN
+// ============================================================================
+/**
+ * Helper function to create an actions column definition for DataGrid
+ *
+ * @example
+ * const columns = [
+ *   { accessorKey: 'name', header: 'Name' },
+ *   { accessorKey: 'email', header: 'Email' },
+ *   createActionsColumn({
+ *     onEdit: handleEdit,
+ *     onDelete: handleDelete,
+ *     showEdit: true,
+ *     showDelete: true,
+ *     mode: 'buttons'
+ *   })
+ * ]
+ */
+function createActionsColumn(config) {
+    // Apply defaults: all actions enabled by default, mixed mode, View/Edit/Delete visible
+    const defaultConfig = {
+        // Show all actions by default (user can override to false)
+        showView: config.showView !== false && !!config.onView,
+        showEdit: config.showEdit !== false && !!config.onEdit,
+        showDelete: config.showDelete !== false && !!config.onDelete,
+        showDuplicate: config.showDuplicate !== false && !!config.onDuplicate,
+        showPin: config.showPin !== false && !!config.onPin,
+        showFavorite: config.showFavorite !== false && !!config.onFavorite,
+        showArchive: config.showArchive !== false && !!config.onArchive,
+        showRestore: config.showRestore !== false && !!config.onRestore,
+        showCopy: config.showCopy !== false && !!config.onCopy,
+        showShare: config.showShare !== false && !!config.onShare,
+        showExport: config.showExport !== false && !!config.onExport,
+        // Default display mode: mixed (View, Edit, Delete visible, rest in dropdown)
+        mode: config.mode || 'mixed',
+        primaryActions: config.primaryActions || ['view', 'edit', 'delete'],
+        maxVisibleActions: config.maxVisibleActions || 3,
+        // Default confirmations
+        confirmDelete: config.confirmDelete !== false,
+        confirmArchive: config.confirmArchive !== false,
+        // Default status badges off (to maintain row height)
+        showStatusBadges: config.showStatusBadges || false,
+        // Merge with user config
+        ...config,
+    };
+    return {
+        id: 'actions',
+        header: () => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1.5", style: { display: 'inline-flex' }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { className: "h-3.5 w-3.5 flex-shrink-0 text-[rgb(var(--fg-muted))]" }), (0, jsx_runtime_1.jsx)("span", { className: "hidden sm:inline", children: "Actions" })] })),
+        cell: ({ row }) => ((0, jsx_runtime_1.jsx)(ActionsColumn, { row: row, config: defaultConfig })),
+        enableSorting: false,
+        enableHiding: true,
+        enableColumnFilter: false,
+        size: (() => {
+            if (defaultConfig.mode === 'dropdown')
+                return 50;
+            if (defaultConfig.mode === 'buttons') {
+                // Count actions that will actually render: must be in primaryActions
+                // AND have a corresponding show* flag that isn't explicitly false.
+                // (Row-level function show flags are treated as visible for sizing.)
+                const showMap = {
+                    view: defaultConfig.showView,
+                    edit: defaultConfig.showEdit,
+                    delete: defaultConfig.showDelete,
+                    duplicate: defaultConfig.showDuplicate,
+                    target: defaultConfig.showTarget,
+                    pin: defaultConfig.showPin,
+                    favorite: defaultConfig.showFavorite,
+                    archive: defaultConfig.showArchive,
+                    restore: defaultConfig.showRestore,
+                    export: defaultConfig.showExport,
+                    print: defaultConfig.showPrint,
+                    copy: defaultConfig.showCopy,
+                    share: defaultConfig.showShare,
+                    block: defaultConfig.showBlock,
+                };
+                const primary = defaultConfig.primaryActions ?? [];
+                const visibleCount = primary.filter(a => showMap[a] !== false).length;
+                const cap = defaultConfig.maxVisibleActions ?? visibleCount;
+                const btnCount = Math.min(visibleCount, cap);
+                // 30px per button, 60px minimum for at least one button + padding.
+                return Math.max(60, btnCount * 30);
+            }
+            return 90;
+        })(),
+    };
+}