pixelize-design-library 2.4.2 → 3.0.0

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -44,29 +44,62 @@ const lucide_react_1 = require("lucide-react");
 const react_window_1 = require("react-window");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const motion_2 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const usePreferences_1 = require("../../Hooks/usePreferences");
 const AccountCard_1 = __importDefault(require("./AccountCard"));
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
 const MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
 const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
 const Button_1 = __importDefault(require("../Button/Button"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
+const boardStore_1 = require("./boardStore");
+const activationKey_1 = require("../Common/activationKey");
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+const CARD_LABEL_EXCLUDE = ["id", "details"];
+/** Accessible name for a draggable card: first visible string field, else its id. */
+const getCardAccessibleName = (account) => {
+    if (typeof account.name === "string" && account.name)
+        return account.name;
+    const key = Object.keys(account).find((k) => !CARD_LABEL_EXCLUDE.includes(k) && typeof account[k] === "string" && account[k]);
+    return key ? account[key] : `Card ${account.id}`;
+};
 const KANBAN_CARD_GAP = 12;
+const COLUMN_HEIGHT = "calc(100% - 1.25rem)";
+const MIN_LIST_HEIGHT = 120;
+// Matches Table's own row threshold (TableBody.tsx) so both components agree on when DOM size needs virtualizing.
+const KANBAN_VIRTUALIZE_THRESHOLD = 30;
+const COLUMN_TRANSITION = `${(0, motion_1.transitionFor)(["background-color", "border-color"])}, ${(0, motion_1.transitionFor)(["width"], "base")}`;
+const SKELETON_ROWS = [3, 4, 3];
+const CardSkeleton = ({ colors, rows }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.cardRule)(colors)}`, p: 3, minH: "5rem", children: (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 2.5, children: Array.from({ length: rows }).map((_, i) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, w: "30%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 2.5, flex: "1", maxW: i % 2 ? "40%" : "55%", borderRadius: "sm" })] }, i))) }) }));
 // Top buffer above the first card so its border + hover lift aren't clipped by the
 // scroll/virtualized list's top edge.
 const KANBAN_LIST_TOP_PAD = 6;
+const KanbanCardBody = ({ account, index, colId, canDelete, onDelete, onOpen, expandedStore, toggleExpand, }) => {
+    const isExpanded = (0, boardStore_1.useBoardStore)(expandedStore, (expanded) => expanded[account.id]);
+    const onToggleExpand = (0, react_1.useCallback)(() => toggleExpand(account.id, colId, index), [toggleExpand, account.id, colId, index]);
+    if (account.customNode)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: account.customNode() });
+    return ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: isExpanded, onToggleExpand: onToggleExpand, isDeletable: canDelete }));
+};
+const ColumnDeleteAll = ({ colId, title, hoveredColumn, colors, onDelete }) => {
+    const isHovered = (0, boardStore_1.useBoardStore)(hoveredColumn, (hovered) => hovered === colId);
+    if (!isHovered)
+        return (0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 });
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": `Delete all cards in ${title}`, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: 4, borderRadius: "sm", cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => onDelete(colId), transition: (0, motion_1.transitionFor)(["color"]), sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 16 }) }));
+};
 const KanbanRow = react_1.default.memo(({ index, style, data }) => {
-    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const { colors: rowColors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { items, colId, canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
     const account = items[index];
     if (!account) {
         return (0, jsx_runtime_1.jsx)("div", { style: style });
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
-                        var _a;
-                        return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style, children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
-                    } }, account.id) }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(MeasuredItem_1.default, { index: index, setSize: (i, h) => setSize(i, h, colId), children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(rowColors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, account.id) }) }) }));
 });
 const NoItemsTemplate = react_1.default.memo(({ column, noItems, colors }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], textAlign: "center", mt: 4, children: (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column" }), !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => { var _a; return (_a = noItems === null || noItems === void 0 ? void 0 : noItems.onClick) === null || _a === void 0 ? void 0 : _a.call(noItems, column); }, size: "xs", children: (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item" }))] }) })));
 function reorderColumnEntries(entries, startIndex, endIndex) {
@@ -75,14 +108,15 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
     result.splice(endIndex, 0, removed);
     return result;
 }
-const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
+const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete: onDeleteProp, onOpen: onOpenProp, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
     baseurl: "",
     token: "",
     key: "",
     name: "",
     page: "",
     orgId: "",
-}, }) => {
+}, height, maxH, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
     const canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
@@ -115,19 +149,21 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
     const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
     const [columns, setColumns] = (0, react_1.useState)(mergedColumns);
-    const [containerHeight, setContainerHeight] = (0, react_1.useState)(600);
-    const [hoveredColumn, setHoveredColumn] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+    const [adoptedColumns, setAdoptedColumns] = (0, react_1.useState)(mergedColumns);
+    const [viewportHeight, setViewportHeight] = (0, react_1.useState)(600);
+    const [measuredHeight, setMeasuredHeight] = (0, react_1.useState)(0);
+    const [hoveredColumn] = (0, react_1.useState)(() => (0, boardStore_1.createBoardStore)(null));
+    if (adoptedColumns !== mergedColumns) {
+        setAdoptedColumns(mergedColumns);
         setColumns(mergedColumns);
-    }, [mergedColumns]);
+    }
     // Responsive column width
     const columnWidth = (0, react_2.useBreakpointValue)({
         base: "16rem",
         md: "17.5rem",
         lg: "19rem",
     });
-    // track expanded cards
-    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [expandedStore] = (0, react_1.useState)(() => (0, boardStore_1.createBoardStore)({}));
     /** When true, column id maps to collapsed (body hidden). */
     const [collapsedColumns, setCollapsedColumns] = (0, react_1.useState)(() => ({ ...defaultCollapsedColumns }));
     const hasHydratedCollapsedFromPrefs = (0, react_1.useRef)(false);
@@ -138,6 +174,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         preferences.page,
         preferences.key,
         preferences.name,
+        preferences.orgId,
+        preferences.token,
     ]);
     (0, react_1.useEffect)(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
@@ -277,13 +315,11 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const key = `${colId}-${index}`;
         return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
-    // Calculate container height
     (0, react_1.useEffect)(() => {
+        if (height !== undefined)
+            return;
         const calculateDimensions = () => {
-            if (containerRef.current) {
-                const availableHeight = window.innerHeight - 100;
-                setContainerHeight(Math.max(500, availableHeight));
-            }
+            setViewportHeight(Math.max(500, window.innerHeight - 100));
         };
         calculateDimensions();
         const onResize = (0, rafThrottle_1.rafThrottle)(calculateDimensions);
@@ -292,18 +328,30 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
             onResize.cancel();
             window.removeEventListener("resize", onResize);
         };
-    }, [isBoardLoading]);
+    }, [height]);
+    (0, react_1.useEffect)(() => {
+        const el = containerRef.current;
+        if (!el)
+            return;
+        setMeasuredHeight(el.getBoundingClientRect().height);
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver((entries) => {
+            setMeasuredHeight(entries[0].contentRect.height);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [canView]);
+    const containerHeight = measuredHeight > 0 ? measuredHeight : viewportHeight;
     // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
     // every render (which would re-render every virtualized row).
     const toggleExpand = (0, react_1.useCallback)((id, colId, index) => {
-        setExpanded((prev) => {
-            const newExpanded = { ...prev, [id]: !prev[id] };
-            if (listRefs.current[colId]) {
-                listRefs.current[colId].resetAfterIndex(index);
-            }
-            return newExpanded;
-        });
-    }, []);
+        const expanded = expandedStore.get();
+        expandedStore.set({ ...expanded, [id]: !expanded[id] });
+        if (listRefs.current[colId]) {
+            listRefs.current[colId].resetAfterIndex(index);
+        }
+    }, [expandedStore]);
     // drag handler
     const onDragEnd = (0, react_1.useCallback)((result) => {
         const { source, destination, type } = result;
@@ -368,17 +416,22 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map((item) => item.id)) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
     }, [columns, onColumnDelete]);
+    const onDeleteRef = (0, react_1.useRef)(onDeleteProp);
+    onDeleteRef.current = onDeleteProp;
+    const onOpenRef = (0, react_1.useRef)(onOpenProp);
+    onOpenRef.current = onOpenProp;
+    const onDelete = (0, react_1.useCallback)((account) => { var _a; return (_a = onDeleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onDeleteRef, account); }, []);
+    const onOpen = (0, react_1.useCallback)((account) => { var _a; return (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, account); }, []);
     const rowBaseProps = (0, react_1.useMemo)(() => ({
         canDrag,
-        expanded,
+        expandedStore,
         onDelete,
         onOpen,
         canDelete,
         setSize,
         toggleExpand,
-    }), [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
-    // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
-    // don't change the reference react-window hands to every row → no row re-renders.
+    }), [canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    // Stable per-column itemData, so unrelated board re-renders don't re-render every virtualized row.
     const itemDataByCol = (0, react_1.useMemo)(() => {
         const map = {};
         for (const [colId, column] of Object.entries(columns)) {
@@ -386,59 +439,65 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         }
         return map;
     }, [columns, rowBaseProps]);
-    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: virtualization ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
-            var _a;
-            const item = column.items[rubric.source.index];
-            return ((0, jsx_runtime_1.jsx)("div", { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-                    ...provided.draggableProps.style,
-                    width: columnWidth,
-                    paddingBottom: KANBAN_CARD_GAP,
-                }, children: (item === null || item === void 0 ? void 0 : item.customNode) ? (_a = item === null || item === void 0 ? void 0 : item.customNode) === null || _a === void 0 ? void 0 : _a.call(item) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: () => toggleExpand(item.id, colId, rubric.source.index), isDeletable: canDelete }, item.id)) }));
-        }, children: (provided, snapshot) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", background: snapshot.isDraggingOver
-                    ? colors.primary[50]
-                    : colors.background[100], border: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
-                    ? colors.primary[300]
-                    : colors.boxborder[200]}`, transition: "background 0.15s ease, border-color 0.15s ease, width 0.2s ease", display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: `${containerHeight - 60}px`, onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: colors.text[700], sx: {
-                                            writingMode: "vertical-rl",
-                                            textOrientation: "mixed",
-                                        }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "full", border: "1px solid", borderColor: colors.boxborder[200], display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "10px", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: "1.5rem", h: "1.5rem", px: 2, borderRadius: "full", backgroundColor: colors.gray[100], display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[700], fontWeight: 600, fontSize: "0.625rem", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete &&
-                                        hoveredColumn === colId &&
-                                        column.items.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: "color 0.2s ease", flexShrink: 0 })), !(canDelete &&
-                                        hoveredColumn === colId &&
-                                        column.items.length > 0) && (0, jsx_runtime_1.jsx)(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                            ...(0, scrollbar_1.scrollbarStyles)(colors),
-                            overflowY: "auto",
-                            overflowX: "hidden",
-                            "&": { scrollbarGutter: "stable both-edges" },
-                            cursor: canDrag ? "grab" : "not-allowed",
-                        }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
-                                    if (el)
-                                        listRefs.current[colId] = el;
-                                }, height: containerHeight - 150, itemCount: column.items.length +
-                                    (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
-                                                var _a;
-                                                return ((0, jsx_runtime_1.jsx)("div", { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, style: dragProvided.draggableProps.style, children: (account === null || account === void 0 ? void 0 : account.customNode) ? (_a = account === null || account === void 0 ? void 0 : account.customNode) === null || _a === void 0 ? void 0 : _a.call(account) : ((0, jsx_runtime_1.jsx)(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete })) }));
-                                            } }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
-        } }, colId));
+    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => {
+        const shouldVirtualize = virtualization !== null && virtualization !== void 0 ? virtualization : column.items.length > KANBAN_VIRTUALIZE_THRESHOLD;
+        return ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: colId, mode: shouldVirtualize ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
+                const item = column.items[rubric.source.index];
+                return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": item ? getCardAccessibleName(item) : undefined, style: {
+                        ...provided.draggableProps.style,
+                        width: columnWidth,
+                        paddingBottom: KANBAN_CARD_GAP,
+                    }, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: item, index: rubric.source.index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) }));
+            }, children: (provided, snapshot) => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: provided.innerRef, ...provided.droppableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "xl", background: snapshot.isDraggingOver
+                        ? colors.primary[50]
+                        : colors.background[100], border: `${borderWidths_1.BORDER_WIDTHS.hairline} ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                        ? colors.focusRing.ring
+                        : (0, planeStep_1.ruleOn)(colors, colors.background[100])}`, transition: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: (0, motion_2.reducedMotionSx)(), onMouseEnter: () => hoveredColumn.set(colId), onMouseLeave: () => hoveredColumn.set(null), onFocus: () => hoveredColumn.set(colId), onBlur: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget))
+                            hoveredColumn.set(null);
+                    }, children: [isColCollapsed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_a = column.color) !== null && _a !== void 0 ? _a : colors.primary[500], bg: colors.background[100], position: "relative", zIndex: 1, children: [enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Expand column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "700", fontSize: "xs", color: colors.text[700], sx: {
+                                                writingMode: "vertical-rl",
+                                                textOrientation: "mixed",
+                                            }, maxH: `${Math.max(120, containerHeight - 200)}px`, overflow: "hidden", lineHeight: "1.2", title: column.title, children: column.title }), (0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 5, h: 5, borderRadius: "full", border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, planeStep_1.ruleOn)(colors, colors.background[100]), display: "flex", backgroundColor: colors.background[100], alignItems: "center", justifyContent: "center", color: colors.text[900], fontWeight: 600, fontSize: "xs", children: (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 : _b.length })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", flex: "1", minH: 0, w: "100%", overflow: "visible", py: 2, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-start", bg: colors.background[100], position: "relative", zIndex: 2, children: (0, jsx_runtime_1.jsx)(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: (0, jsx_runtime_1.jsx)(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", minH: 0 }))] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { width: "100%", h: !isColCollapsed && !!((_c = column.customNode) === null || _c === void 0 ? void 0 : _c.call(column)) ? "auto" : "2.75rem", align: !isColCollapsed && !!((_d = column.customNode) === null || _d === void 0 ? void 0 : _d.call(column)) ? "flex-start" : "center", px: 3, py: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.ruleOn)(colors, colors.background[100])}`, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 2.5, borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, "aria-label": `Reorder ${column.title} column`, children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: colors.textMuted }) })) : null, (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontWeight: "600", fontSize: "sm", color: colors.text[700], noOfLines: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(OverflowTooltipText_1.default, { placement: "top", children: column.title }) })] }), column.customNode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "section", "aria-label": "Column summary", width: "100%", flexShrink: 0, fontSize: "xs", color: colors.text[600], children: (_f = column.customNode) === null || _f === void 0 ? void 0 : _f.call(column) })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", alignItems: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Badge, { minW: 6, h: 6, px: 2, borderRadius: "full", backgroundColor: colors.backgroundColor.subtle, display: "flex", alignItems: "center", justifyContent: "center", color: colors.text[500], fontWeight: 600, fontSize: "xs", children: (_g = column === null || column === void 0 ? void 0 : column.items) === null || _g === void 0 ? void 0 : _g.length }), enableColumnCollapse && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Collapse column", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: () => toggleColumnCollapsed(colId) })), canDelete && column.items.length > 0 ? ((0, jsx_runtime_1.jsx)(ColumnDeleteAll, { colId: colId, title: column.title, hoveredColumn: hoveredColumn, colors: colors, onDelete: handleColumnDelete })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: 4, flexShrink: 0 }))] })] })), !isColCollapsed && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                                ...(0, scrollbar_1.scrollbarStyles)(colors),
+                                overflowY: "auto",
+                                overflowX: "hidden",
+                                "&": { scrollbarGutter: "stable both-edges" },
+                                cursor: canDrag ? "grab" : "not-allowed",
+                            }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && ((0, jsx_runtime_1.jsx)(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), shouldVirtualize ? ((0, jsx_runtime_1.jsx)(react_window_1.VariableSizeList, { ref: (el) => {
+                                        if (el)
+                                            listRefs.current[colId] = el;
+                                    }, height: Math.max(MIN_LIST_HEIGHT, containerHeight - 150), itemCount: column.items.length +
+                                        (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: (index) => getItemSize(index, column.items, colId), width: "100%", itemData: itemDataByCol[colId], children: KanbanRow })) : ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [column.items.map((account, index) => ((0, jsx_runtime_1.jsx)("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: (0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: (0, focusRing_styles_1.focusVisibleStyles)(colors), children: (0, jsx_runtime_1.jsx)(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
+            } }, colId));
+    };
     if (!canView)
         return null;
     const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
     const hasAnyColumns = Object.keys(columns).length > 0;
     const flexScrollSx = (0, scrollbar_1.scrollbarStyles)(colors);
-    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: `${containerHeight - 60}px`, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
+    const addColumn = () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); };
+    const addColumnKeyboard = {
+        role: "button",
+        tabIndex: 0,
+        sx: (0, focusRing_styles_1.focusVisibleStyles)(colors),
+        onClick: addColumn,
+        onKeyDown: (0, activationKey_1.onActivationKey)(addColumn),
+    };
+    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
     const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {
         const isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
         if (enableColumnReorder) {
             return ((0, jsx_runtime_1.jsx)(dnd_1.Draggable, { draggableId: colId, index: colIndex, children: (dragProvided) => {
                     var _a;
-                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
+                    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: (0, motion_1.transitionFor)(["width"], "base"), sx: (0, motion_2.reducedMotionSx)(), overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
                 } }, colId));
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { width: columnWidth, p: 4, borderRadius: "lg", bg: colors.background[100], border: `0.125rem solid ${colors.boxborder[200]}`, flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "base" }), (0, jsx_runtime_1.jsx)(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx)));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, bg: colors.backgroundColor.main, minH: `${containerHeight}px`, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, onClick: () => { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
+    const loadingSkeletonRow = Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { "aria-hidden": true, width: columnWidth, borderRadius: "xl", bg: colors.background[100], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.ruleOn)(colors, colors.background[100])}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${(0, planeStep_1.ruleOn)(colors, colors.background[100])}`, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "2.5" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 3, w: "40%", borderRadius: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { h: 6, w: 6, ml: "auto", borderRadius: "full" })] }), (0, jsx_runtime_1.jsx)(react_2.Flex, { direction: "column", gap: 3, px: 2, pt: 1.5, pb: 3, children: SKELETON_ROWS.slice(0, 3 - (idx % 2)).map((rows, i) => ((0, jsx_runtime_1.jsx)(CardSkeleton, { colors: colors, rows: rows }, i))) })] }, idx)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), (0, jsx_runtime_1.jsx)(dnd_1.DragDropContext, { onDragEnd: onDragEnd, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: containerRef, "data-testid": "kanban-board", "aria-busy": isBoardLoading || undefined, bg: colors.backgroundColor.main, h: height !== null && height !== void 0 ? height : `${viewportHeight}px`, maxH: maxH, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "lg", bg: colors.background[100], border: `0.125rem dashed ${colors.boxborder[500]}`, _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading board", gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? ((0, jsx_runtime_1.jsx)(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { ref: colReorderProvided.innerRef, ...colReorderProvided.droppableProps, gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, colReorderProvided.placeholder, addColumnBox] })) })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
 };
 exports.default = KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoardProps.d.ts

@@ -1,106 +1,160 @@
 import type { ReactNode } from "react";
 import { OptionProp } from "../Select/SelectProps";
-/** Index allows extra scalar fields; known string fields are explicit so they do not widen to `() => ReactNode`. */
+/** Extra string keys render as label:value rows on the card; number values (also allowed here) are silently never shown. */
 export type Account = {
+    /** Used as the React key and the dnd draggableId — must be unique and stable across renders. */
     id: string;
+    /** Fully replaces AccountCard for this card — onDelete/onOpen/isDeletable and expand/collapse never apply when set. */
     customNode?: () => ReactNode;
+    /** Excluded from the generic row list; shown as separate description text, only when expanded. */
     details?: string;
+    /** No special rendering — just another label:value row like any extra string key. */
     name?: string;
+    /** Same generic row treatment as `name` — not validated or used for an avatar. */
     email?: string;
+    /** Same generic row treatment as `name`/`email` — plain string, not a number. */
     rating?: string;
     [key: string]: string | number | null | undefined | (() => ReactNode);
 };
+/** One Kanban column: id, title, accent color, and its `Account` items. */
 export type ColumnType = {
+    /** Not read by the board; the key in the `data` record is the column's identity for drag and callbacks. */
     id: string;
+    /** Column header text; also used in the reorder-handle and delete-all aria-labels. */
     title: string;
+    /** Falls back to `colors.primary[500]` when omitted — used for the accent dot/border. */
     color: string;
+    /** Cards in display order; a drag reorders them in the board's internal state. */
     items: Account[];
-    /**
-     * Column-level slot (e.g. totals). Shown below the title when expanded, and in the collapsed narrow rail (rotated).
-     */
+    /** Column-level slot (e.g. totals); shown below the title expanded, and rotated in the collapsed rail. */
     customNode?: () => ReactNode;
 };
 /** Fired after a column rail is collapsed or expanded via the board UI. */
 export type ColumnCollapseChangePayload = {
+    /** Key of the toggled column in the `data` record. */
     colId: string;
     /** True when the column is in the narrow collapsed rail. */
     collapsed: boolean;
     /** Full collapsed map for all columns (same shape as `collapsedColumns` initial prop). */
     collapsedColumns: Record<string, boolean>;
 };
+/** Payload of `onDrag` — the moved card, its source/target column ids and indexes, and the next column map. */
+export type KanbanDragPayload = {
+    /** Source column id (its key in the `data` record). */
+    from: string;
+    /** Destination column id; equals `from` when reordered within one column. */
+    to: string;
+    /** The dragged card. */
+    item: Account;
+    /** Next column map with the move already applied, keyed by column id. */
+    columns: Record<string, ColumnType>;
+    /** Zero-based index of the card in the source column before the move. */
+    fromIndex: number;
+    /** Zero-based index of the card in the destination column after the move. */
+    toIndex: number;
+};
+/** Board permission gates; every flag defaults to true when omitted. */
+export type KanbanPermissions = {
+    /** Also gates the `kanbanEdit` button and card drag; column-reorder drag ignores this. */
+    isEditable?: boolean;
+    /** Also gates the `kanbanCreate` button. */
+    isCreatable?: boolean;
+    /** Also hides the column-delete trash icon on column-header hover, not just per-card delete. */
+    isDeletable?: boolean;
+    /** false returns null for the whole board — nothing renders, not even header actions. */
+    isViewable?: boolean;
+};
+/** Props for KanbanBoard — keyed columns (`data`) of draggable `Account` cards. */
 export type KanbanBoardProps = {
+    /** Base columns; `customColumns` below is merged on top, not into, this. */
     data: Record<string, ColumnType>;
+    /** Merged on top of `data` — a matching column id in both silently overwrites the `data` entry, not merges its fields. */
     customColumns?: Record<string, ColumnType>;
+    /** `isVisible` renders an inline dashed column when others exist, or a centered empty-state overlay when there are none. */
     customizeColumn?: {
         isVisible?: boolean;
+        /** Defaults to "Add column". */
         buttonText?: string;
+        /** Fires from both the inline dashed column and the empty-board overlay variant. */
         onAddColumn?: () => void;
     };
+    /** Never fires for a `customNode` card — it owns its own delete UI, and is not gated by `permissions.isDeletable`. */
     onDelete?: (account: Account) => void;
+    /** Same `customNode` exemption as `onDelete`; unlike delete, `onOpen` has no permission gate at all. */
     onOpen?: (account: Account) => void;
+    /** Receives the deleted column's item ids, not the column's own id — the column identity itself is not passed. */
     onColumnDelete?: (colId: (string | number)[]) => void;
-    onDrag?: ({ from, to, item, columns, fromIndex, toIndex, }: {
-        from: string;
-        to: string;
-        item: Account;
-        columns: Record<string, ColumnType>;
-        fromIndex: number;
-        toIndex: number;
-    }) => void;
+    /** Fires after `columns` state already updated internally — a notification, not a gate; it cannot veto or revert the move. */
+    onDrag?: (payload: KanbanDragPayload) => void;
+    /** Also true (skeletons show) whenever `preferences.baseurl` is set and its own fetch is still loading. */
     isLoading?: boolean;
+    /** Header filter select; renders only when `isSelect` is true. */
     kanbanSelect?: {
+        /** Gates the whole select — unlike `kanbanEdit`/`kanbanCreate`, never checked against `permissions`. */
         isSelect?: boolean;
         options?: OptionProp[];
+        /** Never fires with undefined — picking the placeholder row again fires nothing. */
         onSelectChange?: (option?: OptionProp) => void;
         selectPlaceholderText?: string;
+        /** Defaults to `"12.5rem"` when omitted. */
         width?: string;
+        /** Controlled value passed straight to the underlying Select. */
         value?: string;
+        /** False renders the themed popup, which looks identical on Windows and macOS; a native select's list is OS-drawn. */
+        native?: boolean;
     };
+    /** Button shows only when this `isEditable` AND `permissions.isEditable` (default true) both allow it. */
     kanbanEdit?: {
         isEditable?: boolean;
         onEdit?: () => void;
+        /** Defaults to "Edit Layout". */
         label?: string;
     };
+    /** Same `permissions.isCreatable` AND-gate as `kanbanEdit`. */
     kanbanCreate?: {
         isCreatable?: boolean;
         onCreate?: () => void;
+        /** Defaults to "Create New". */
         label?: string;
     };
+    /** Renders cards via a virtualized react-window list; omitted, it auto-enables above 30 cards in that column — true/false always overrides. */
     virtualization?: boolean;
-    permissions?: {
-        isEditable?: boolean;
-        isCreatable?: boolean;
-        isDeletable?: boolean;
-        isViewable?: boolean;
-    };
+    /** Gates edit, create, delete and view actions; each flag defaults to true when omitted. */
+    permissions?: KanbanPermissions;
+    /** Per-column empty state for columns with no items. */
     noItems?: {
+        /** Also requires the column to have zero items — evaluated per column, not board-wide. */
         isVisible?: boolean;
+        /** Defaults to "No items in this column". */
         text?: string;
+        /** Defaults to "Add Item"; hidden entirely when `isEmptyTextOnly` is true. */
         buttonText?: string;
+        /** Receives the empty column the button was clicked in. */
         onClick?: (column: ColumnType) => void;
+        /** When true, the button never renders — only the text line shows. */
         isEmptyTextOnly?: boolean;
     };
     /** When true, columns can collapse to a narrow horizontal rail (full height). */
     enableColumnCollapse?: boolean;
-    /**
-     * Initial collapsed state keyed by column id (`data` / `customColumns` object keys).
-     * Merged on mount; when `preferences.url` is set, server `json.collapsedColumns` overrides these keys after load.
-     */
+    /** Seeds collapsed state once on mount only — later prop changes are ignored unless `preferences.baseurl` is set to sync from saved prefs. */
     collapsedColumns?: Record<string, boolean>;
     /** Called when the user collapses or expands a column (after internal state updates). */
     onColumnCollapseChange?: (payload: ColumnCollapseChangePayload) => void;
-    /** When true, columns can be reordered via the header grip handle. */
+    /** Column drag ignores `permissions.isEditable` — reordering stays possible even when item drag is permission-locked. */
     enableColumnReorder?: boolean;
     /** Called after column order changes (same shape as `data` keys order). */
     onColumnReorder?: (columns: Record<string, ColumnType>) => void;
-    /**
-     * Optional user-preferences API (same shape as `Table` `preferences`).
-     * When `url` is set, column collapse state is loaded from and saved to `json.collapsedColumns`
-     * (record of column id → collapsed).
-     */
+    /** Board height (CSS length, e.g. `"100%"` to fill a sized parent); columns fill it. Defaults to the viewport minus 100px, min 500px. */
+    height?: string | number;
+    /** Caps the board height; columns shrink to fit. */
+    maxH?: string | number;
+    /** Same shape as Table's `preferences`; collapse state loads/saves to `json.collapsedColumns` only when `baseurl` is set. */
     preferences?: {
+        /** Must be non-empty to activate preferences loading/saving at all. */
         baseurl: string;
+        /** Sent verbatim as the `Authorization` header — include any `Bearer ` prefix yourself. */
         token: string;
+        /** The load fetch re-runs only when `baseurl` changes — changing key/name/page/orgId alone never refetches. */
         key?: string;
         name?: string;
         page?: string;

package/dist/Components/KanbanBoard/MeasuredItem.d.ts

@@ -4,5 +4,6 @@ type MeasuredItemProps = {
     setSize: (index: number, size: number) => void;
     children: React.ReactNode;
 };
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 declare const MeasuredItem: React.FC<MeasuredItemProps>;
 export default MeasuredItem;

package/dist/Components/KanbanBoard/MeasuredItem.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const sharedResizeObserver_1 = require("../../Hooks/sharedResizeObserver");
+/** Wraps one virtualized row to report its rendered height to KanbanBoard's row-size cache; not exported, virtualization-only. */
 const MeasuredItem = ({ index, setSize, children, }) => {
     const ref = (0, react_1.useRef)(null);
     const prevHeight = (0, react_1.useRef)(null);
@@ -25,23 +27,14 @@ const MeasuredItem = ({ index, setSize, children, }) => {
         measure();
         // A second measure after paint catches any layout that finishes after the synchronous tick (font loads, async CSS, etc).
         const raf = requestAnimationFrame(measure);
-        let ro;
-        if (typeof ResizeObserver !== "undefined" && element) {
-            ro = new ResizeObserver(() => {
-                measure();
-            });
-            ro.observe(element);
-        }
-        else {
+        const unobserve = typeof ResizeObserver !== "undefined" && element ? (0, sharedResizeObserver_1.observeResize)(element, measure) : undefined;
+        if (!unobserve)
             window.addEventListener("resize", measure);
-        }
         return () => {
             cancelAnimationFrame(raf);
-            // disconnect, not unobserve — the observer itself has to be released, or a board that
-            // remounts cards as it scrolls leaves one behind per card.
-            if (ro)
-                ro.disconnect();
-            if (!ro)
+            if (unobserve)
+                unobserve();
+            else
                 window.removeEventListener("resize", measure);
         };
     }, []);