pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -43,143 +32,184 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var react_2 = require("@chakra-ui/react");
-var dnd_1 = require("@hello-pangea/dnd");
-var lucide_react_1 = require("lucide-react");
-var react_window_1 = require("react-window");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-var usePreferences_1 = require("../../Hooks/usePreferences");
-var AccountCard_1 = __importDefault(require("./AccountCard"));
-var HeaderActions_1 = __importDefault(require("../Header/HeaderActions"));
-var MeasuredItem_1 = __importDefault(require("./MeasuredItem"));
-var OverflowTooltipText_1 = __importDefault(require("../SideBar/components/OverflowTooltipText"));
-var Button_1 = __importDefault(require("../Button/Button"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const dnd_1 = require("@hello-pangea/dnd");
+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. */
-var COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
-var KanbanRow = react_1.default.memo(function (_a) {
-    var index = _a.index, style = _a.style, data = _a.data;
-    var items = data.items, colId = data.colId, canDrag = data.canDrag, expanded = data.expanded, onDelete = data.onDelete, onOpen = data.onOpen, canDelete = data.canDelete, setSize = data.setSize, toggleExpand = data.toggleExpand;
-    var account = items[index];
+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 { colors: rowColors } = (0, useCustomTheme_1.useCustomTheme)();
+    const { items, colId, canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const account = items[index];
     if (!account) {
-        return react_1.default.createElement("div", { style: style });
+        return (0, jsx_runtime_1.jsx)("div", { style: style });
     }
-    return (react_1.default.createElement("div", { style: style },
-        react_1.default.createElement(MeasuredItem_1.default, { index: index, setSize: function (i, h) { return setSize(i, h, colId); } },
-            react_1.default.createElement("div", { style: { marginBottom: 12 } },
-                react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (provided) {
-                    var _a;
-                    return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }), (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) : (react_1.default.createElement(AccountCard_1.default, { key: account.id, account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
-                            return toggleExpand(account.id, colId, index);
-                        }, isDeletable: canDelete }))));
-                })))));
-});
-var NoItemsTemplate = react_1.default.memo(function (_a) {
-    var _b;
-    var column = _a.column, noItems = _a.noItems, colors = _a.colors;
-    return (react_1.default.createElement(react_2.Box, null,
-        react_1.default.createElement(react_2.Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2 },
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_b = colors === null || colors === void 0 ? void 0 : colors.text) === null || _b === void 0 ? void 0 : _b[600], textAlign: "center", mt: 4 }, (noItems === null || noItems === void 0 ? void 0 : noItems.text) || "No items in this column"),
-            !(noItems === null || noItems === void 0 ? void 0 : noItems.isEmptyTextOnly) && (react_1.default.createElement(Button_1.default, { onClick: function () { 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" }, (noItems === null || noItems === void 0 ? void 0 : noItems.buttonText) || "Add Item")))));
+    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) {
-    var result = Array.from(entries);
-    var removed = result.splice(startIndex, 1)[0];
+    const result = Array.from(entries);
+    const [removed] = result.splice(startIndex, 1);
     result.splice(endIndex, 0, removed);
     return result;
 }
-var KanbanBoard = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
-    var data = _a.data, customColumns = _a.customColumns, customizeColumn = _a.customizeColumn, onDrag = _a.onDrag, onDelete = _a.onDelete, onOpen = _a.onOpen, onColumnDelete = _a.onColumnDelete, _u = _a.isLoading, isLoading = _u === void 0 ? false : _u, kanbanSelect = _a.kanbanSelect, kanbanEdit = _a.kanbanEdit, kanbanCreate = _a.kanbanCreate, virtualization = _a.virtualization, permissions = _a.permissions, noItems = _a.noItems, _v = _a.enableColumnCollapse, enableColumnCollapse = _v === void 0 ? false : _v, defaultCollapsedColumns = _a.collapsedColumns, onColumnCollapseChange = _a.onColumnCollapseChange, _w = _a.enableColumnReorder, enableColumnReorder = _w === void 0 ? false : _w, onColumnReorder = _a.onColumnReorder, _x = _a.preferences, preferences = _x === void 0 ? {
-        baseurl: "",
-        token: "",
-        key: "",
-        name: "",
-        page: "",
-        orgId: "",
-    } : _x;
-    var colors = (0, useCustomTheme_1.useCustomTheme)().colors;
-    var canDrag = (permissions === null || permissions === void 0 ? void 0 : permissions.isEditable) !== false;
-    var canDelete = (permissions === null || permissions === void 0 ? void 0 : permissions.isDeletable) !== false;
-    var canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
-    var canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
-    var mergedColumns = (0, react_1.useMemo)(function () { return (__assign(__assign({}, data), (customColumns !== null && customColumns !== void 0 ? customColumns : {}))); }, [data, customColumns]);
-    var _y = (0, usePreferences_1.useGetPreferences)({
+/** 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;
+    const canCreate = (permissions === null || permissions === void 0 ? void 0 : permissions.isCreatable) !== false;
+    const canView = (permissions === null || permissions === void 0 ? void 0 : permissions.isViewable) !== false;
+    const mergedColumns = (0, react_1.useMemo)(() => ({ ...data, ...(customColumns !== null && customColumns !== void 0 ? customColumns : {}) }), [data, customColumns]);
+    const { preferences: kanbanPreferencesData, loading: preferencesLoading } = (0, usePreferences_1.useGetPreferences)({
         baseUrl: preferences.baseurl,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }), kanbanPreferencesData = _y.preferences, preferencesLoading = _y.loading;
-    var savePreferences = (0, usePreferences_1.useSavePreferences)({
+    });
+    const { savePreferences } = (0, usePreferences_1.useSavePreferences)({
         baseUrl: preferences.baseurl,
         page: preferences.page,
         key: preferences.key,
         name: preferences.name,
         authToken: preferences.token,
         orgId: preferences.orgId,
-    }).savePreferences;
-    var kanbanPreferencesJson = (0, react_1.useMemo)(function () {
+    });
+    const kanbanPreferencesJson = (0, react_1.useMemo)(() => {
         if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
             return kanbanPreferencesData[0].json;
         }
         return {};
     }, [kanbanPreferencesData]);
-    var kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
+    const kanbanPreferencesJsonRef = (0, react_1.useRef)(kanbanPreferencesJson);
     kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
-    var isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
-    var _z = (0, react_1.useState)(mergedColumns), columns = _z[0], setColumns = _z[1];
-    var _0 = (0, react_1.useState)(600), containerHeight = _0[0], setContainerHeight = _0[1];
-    var _1 = (0, react_1.useState)(null), hoveredColumn = _1[0], setHoveredColumn = _1[1];
-    (0, react_1.useEffect)(function () {
+    const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
+    const [columns, setColumns] = (0, react_1.useState)(mergedColumns);
+    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
-    var columnWidth = (0, react_2.useBreakpointValue)({
+    const columnWidth = (0, react_2.useBreakpointValue)({
         base: "16rem",
         md: "17.5rem",
         lg: "19rem",
     });
-    // track expanded cards
-    var _2 = (0, react_1.useState)({}), expanded = _2[0], setExpanded = _2[1];
+    const [expandedStore] = (0, react_1.useState)(() => (0, boardStore_1.createBoardStore)({}));
     /** When true, column id maps to collapsed (body hidden). */
-    var _3 = (0, react_1.useState)(function () { return (__assign({}, defaultCollapsedColumns)); }), collapsedColumns = _3[0], setCollapsedColumns = _3[1];
-    (0, react_1.useEffect)(function () {
+    const [collapsedColumns, setCollapsedColumns] = (0, react_1.useState)(() => ({ ...defaultCollapsedColumns }));
+    const hasHydratedCollapsedFromPrefs = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        hasHydratedCollapsedFromPrefs.current = false;
+    }, [
+        preferences.baseurl,
+        preferences.page,
+        preferences.key,
+        preferences.name,
+        preferences.orgId,
+        preferences.token,
+    ]);
+    (0, react_1.useEffect)(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
             return;
         }
+        if (hasHydratedCollapsedFromPrefs.current) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        if (validIds.size === 0) {
+            return;
+        }
         if (!("collapsedColumns" in kanbanPreferencesJson)) {
+            hasHydratedCollapsedFromPrefs.current = true;
             return;
         }
-        var saved = kanbanPreferencesJson.collapsedColumns;
+        const saved = kanbanPreferencesJson.collapsedColumns;
         if (saved === null ||
             typeof saved !== "object" ||
             Array.isArray(saved)) {
+            hasHydratedCollapsedFromPrefs.current = true;
             return;
         }
-        var validIds = new Set(Object.keys(mergedColumns));
-        var next = {};
-        for (var _i = 0, _a = Object.entries(saved); _i < _a.length; _i++) {
-            var _b = _a[_i], k = _b[0], v = _b[1];
+        const next = {};
+        for (const [k, v] of Object.entries(saved)) {
             if (validIds.has(k) && typeof v === "boolean") {
                 next[k] = v;
             }
         }
-        setCollapsedColumns(__assign(__assign({}, defaultCollapsedColumns), next));
+        setCollapsedColumns({
+            ...defaultCollapsedColumns,
+            ...next,
+        });
+        hasHydratedCollapsedFromPrefs.current = true;
     }, [
         enableColumnCollapse,
         preferences.baseurl,
@@ -188,18 +218,39 @@ var KanbanBoard = function (_a) {
         mergedColumns,
         defaultCollapsedColumns,
     ]);
-    var toggleColumnCollapsed = (0, react_1.useCallback)(function (colId) {
-        setCollapsedColumns(function (prev) {
-            var _a;
-            var collapsed = !prev[colId];
-            var next = __assign(__assign({}, prev), (_a = {}, _a[colId] = collapsed, _a));
+    (0, react_1.useEffect)(() => {
+        if (!enableColumnCollapse) {
+            return;
+        }
+        const validIds = new Set(Object.keys(mergedColumns));
+        setCollapsedColumns((prev) => {
+            const hasStale = Object.keys(prev).some((k) => !validIds.has(k));
+            if (!hasStale) {
+                return prev;
+            }
+            const pruned = {};
+            for (const [k, v] of Object.entries(prev)) {
+                if (validIds.has(k)) {
+                    pruned[k] = v;
+                }
+            }
+            return pruned;
+        });
+    }, [mergedColumns, enableColumnCollapse]);
+    const toggleColumnCollapsed = (0, react_1.useCallback)((colId) => {
+        setCollapsedColumns((prev) => {
+            const collapsed = !prev[colId];
+            const next = { ...prev, [colId]: collapsed };
             onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
-                colId: colId,
-                collapsed: collapsed,
+                colId,
+                collapsed,
                 collapsedColumns: next,
             });
             if (preferences.baseurl && enableColumnCollapse) {
-                savePreferences(__assign(__assign({}, kanbanPreferencesJsonRef.current), { collapsedColumns: next }));
+                savePreferences({
+                    ...kanbanPreferencesJsonRef.current,
+                    collapsedColumns: next,
+                });
             }
             return next;
         });
@@ -210,33 +261,31 @@ var KanbanBoard = function (_a) {
         savePreferences,
     ]);
     /** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
-    var COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
+    const COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
     // ref for lists
-    var listRefs = (0, react_1.useRef)({});
-    var containerRef = (0, react_1.useRef)(null);
+    const listRefs = (0, react_1.useRef)({});
+    const containerRef = (0, react_1.useRef)(null);
     // store measured heights
-    var _4 = (0, react_1.useState)({}), sizes = _4[0], setSizes = _4[1];
-    var hasMountedSizes = (0, react_1.useRef)(false);
+    const [sizes, setSizes] = (0, react_1.useState)({});
+    const hasMountedSizes = (0, react_1.useRef)(false);
     // Prune stale size entries when columns change (skip first render)
-    (0, react_1.useEffect)(function () {
+    (0, react_1.useEffect)(() => {
         if (!hasMountedSizes.current) {
             hasMountedSizes.current = true;
             return;
         }
-        setSizes(function (prev) {
+        setSizes((prev) => {
             if (Object.keys(prev).length === 0)
                 return prev;
-            var validKeys = new Set();
-            for (var _i = 0, _a = Object.entries(columns); _i < _a.length; _i++) {
-                var _b = _a[_i], colId = _b[0], col = _b[1];
-                for (var i = 0; i < col.items.length; i++) {
-                    validKeys.add("".concat(colId, "-").concat(i));
+            const validKeys = new Set();
+            for (const [colId, col] of Object.entries(columns)) {
+                for (let i = 0; i < col.items.length; i++) {
+                    validKeys.add(`${colId}-${i}`);
                 }
             }
-            var pruned = {};
-            var changed = false;
-            for (var _c = 0, _d = Object.keys(prev); _c < _d.length; _c++) {
-                var key = _d[_c];
+            const pruned = {};
+            let changed = false;
+            for (const key of Object.keys(prev)) {
                 if (validKeys.has(key)) {
                     pruned[key] = prev[key];
                 }
@@ -247,75 +296,90 @@ var KanbanBoard = function (_a) {
             return changed ? pruned : prev;
         });
     }, [columns]);
-    var DEFAULT_ITEM_HEIGHT = 130;
+    // AccountCard's minHeight floor — kept tight so unmeasured rows don't reserve excess space; KANBAN_CARD_GAP is added below.
+    const DEFAULT_ITEM_HEIGHT = 80;
     // update height for an item
-    var setSize = (0, react_1.useCallback)(function (index, size, colId) {
-        var key = "".concat(colId, "-").concat(index);
-        setSizes(function (prev) {
-            var _a;
+    const setSize = (0, react_1.useCallback)((index, size, colId) => {
+        const key = `${colId}-${index}`;
+        setSizes((prev) => {
             if (prev[key] === size)
                 return prev;
-            return __assign(__assign({}, prev), (_a = {}, _a[key] = size, _a));
+            return { ...prev, [key]: size };
         });
+        // Only recompute from the row that changed downward (cheaper than resetting all).
         if (listRefs.current[colId]) {
-            listRefs.current[colId].resetAfterIndex(0);
+            listRefs.current[colId].resetAfterIndex(index);
         }
     }, []);
-    var getItemSize = (0, react_1.useCallback)(function (index, _items, colId) {
-        var key = "".concat(colId, "-").concat(index);
-        return (sizes[key] || DEFAULT_ITEM_HEIGHT) + 12;
+    const getItemSize = (0, react_1.useCallback)((index, _items, colId) => {
+        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)(function () {
-        var calculateDimensions = function () {
-            if (containerRef.current) {
-                var availableHeight = window.innerHeight - 100;
-                setContainerHeight(Math.max(500, availableHeight));
-            }
+    (0, react_1.useEffect)(() => {
+        if (height !== undefined)
+            return;
+        const calculateDimensions = () => {
+            setViewportHeight(Math.max(500, window.innerHeight - 100));
         };
         calculateDimensions();
-        window.addEventListener("resize", calculateDimensions);
-        return function () {
-            window.removeEventListener("resize", calculateDimensions);
+        const onResize = (0, rafThrottle_1.rafThrottle)(calculateDimensions);
+        window.addEventListener("resize", onResize);
+        return () => {
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
         };
-    }, [isBoardLoading]);
-    // toggle expand/collapse
-    var toggleExpand = function (id, colId, index) {
-        setExpanded(function (prev) {
-            var _a;
-            var newExpanded = __assign(__assign({}, prev), (_a = {}, _a[id] = !prev[id], _a));
-            if (listRefs.current[colId]) {
-                listRefs.current[colId].resetAfterIndex(index);
-            }
-            return newExpanded;
+    }, [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) => {
+        const expanded = expandedStore.get();
+        expandedStore.set({ ...expanded, [id]: !expanded[id] });
+        if (listRefs.current[colId]) {
+            listRefs.current[colId].resetAfterIndex(index);
+        }
+    }, [expandedStore]);
     // drag handler
-    var onDragEnd = function (result) {
-        var _a, _b;
-        var source = result.source, destination = result.destination, type = result.type;
+    const onDragEnd = (0, react_1.useCallback)((result) => {
+        const { source, destination, type } = result;
         if (!destination)
             return;
         if (type === "COLUMN") {
             if (source.index === destination.index)
                 return;
-            var entries = Object.entries(columns);
-            var reordered = reorderColumnEntries(entries, source.index, destination.index);
-            var nextColumns = Object.fromEntries(reordered);
+            const entries = Object.entries(columns);
+            const reordered = reorderColumnEntries(entries, source.index, destination.index);
+            const nextColumns = Object.fromEntries(reordered);
             setColumns(nextColumns);
             onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(nextColumns);
             return;
         }
-        var sourceCol = columns[source.droppableId];
-        var destCol = columns[destination.droppableId];
-        var draggedItem = sourceCol === null || sourceCol === void 0 ? void 0 : sourceCol.items[source.index];
+        const sourceCol = columns[source.droppableId];
+        const destCol = columns[destination.droppableId];
+        const draggedItem = sourceCol === null || sourceCol === void 0 ? void 0 : sourceCol.items[source.index];
         if (!draggedItem || !sourceCol || !destCol)
             return;
         if (source.droppableId === destination.droppableId) {
-            var copiedItems = __spreadArray([], sourceCol.items, true);
+            const copiedItems = [...sourceCol.items];
             copiedItems.splice(source.index, 1);
             copiedItems.splice(destination.index, 0, draggedItem);
-            var nextColumns = __assign(__assign({}, columns), (_a = {}, _a[source.droppableId] = __assign(__assign({}, sourceCol), { items: copiedItems }), _a));
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: copiedItems },
+            };
             setColumns(nextColumns);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                 from: source.droppableId,
@@ -327,11 +391,15 @@ var KanbanBoard = function (_a) {
             });
         }
         else {
-            var sourceItems = __spreadArray([], sourceCol.items, true);
-            var destItems = __spreadArray([], destCol.items, true);
+            const sourceItems = [...sourceCol.items];
+            const destItems = [...destCol.items];
             sourceItems.splice(source.index, 1);
             destItems.splice(destination.index, 0, draggedItem);
-            var nextColumns = __assign(__assign({}, columns), (_b = {}, _b[source.droppableId] = __assign(__assign({}, sourceCol), { items: sourceItems }), _b[destination.droppableId] = __assign(__assign({}, destCol), { items: destItems }), _b));
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: sourceItems },
+                [destination.droppableId]: { ...destCol, items: destItems },
+            };
             setColumns(nextColumns);
             onDrag === null || onDrag === void 0 ? void 0 : onDrag({
                 from: source.droppableId,
@@ -342,170 +410,94 @@ var KanbanBoard = function (_a) {
                 toIndex: destination.index,
             });
         }
-    };
-    var handleColumnDelete = function (colId) {
+    }, [columns, onDrag, onColumnReorder]);
+    const handleColumnDelete = (0, react_1.useCallback)((colId) => {
         var _a, _b;
-        var columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map(function (item) { return item.id; })) || [];
+        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,
+        expandedStore,
+        onDelete,
+        onOpen,
+        canDelete,
+        setSize,
+        toggleExpand,
+    }), [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)) {
+            map[colId] = { ...rowBaseProps, items: column.items, colId };
+        }
+        return map;
+    }, [columns, rowBaseProps]);
+    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));
     };
-    var rowBaseProps = (0, react_1.useMemo)(function () { return ({
-        canDrag: canDrag,
-        expanded: expanded,
-        onDelete: onDelete,
-        onOpen: onOpen,
-        canDelete: canDelete,
-        setSize: setSize,
-        toggleExpand: toggleExpand,
-    }); }, [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
-    var renderColumnDroppable = function (colId, column, columnDragHandleProps, isColCollapsed) { return (react_1.default.createElement(dnd_1.Droppable, { droppableId: colId, key: colId, mode: virtualization ? "virtual" : "standard", renderClone: function (provided, _snapshot, rubric) {
-            var _a;
-            var item = column.items[rubric.source.index];
-            return (react_1.default.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: __assign(__assign({}, provided.draggableProps.style), { width: columnWidth, marginBottom: 12 }) }), (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) : (react_1.default.createElement(AccountCard_1.default, { key: item.id, account: item, index: rubric.source.index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[item.id], onToggleExpand: function () {
-                    return toggleExpand(item.id, colId, rubric.source.index);
-                }, isDeletable: canDelete }))));
-        } }, function (provided, snapshot) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
-        return (react_1.default.createElement(react_2.Box, __assign({ ref: provided.innerRef }, provided.droppableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, borderRadius: "0.5rem", borderWidth: "0.063rem", background: snapshot.isDraggingOver
-                ? (_a = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _a === void 0 ? void 0 : _a[50]
-                : (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[100], border: "".concat(snapshot.isDraggingOver
-                ? "0.5px dashed " + ((_c = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _c === void 0 ? void 0 : _c[300])
-                : "0.125rem solid " + ((_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200])), display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: "".concat(containerHeight - 60, "px"), transition: "width 0.2s ease", onMouseEnter: function () { return setHoveredColumn(colId); }, onMouseLeave: function () { return setHoveredColumn(null); } }),
-            isColCollapsed ? (react_1.default.createElement(react_2.Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative" },
-                react_1.default.createElement(react_2.Flex, { as: "header", direction: "column", align: "center", flexShrink: 0, width: "100%", py: 3, px: 1, gap: 3, borderTop: "0.25rem solid", borderTopColor: (_e = column.color) !== null && _e !== void 0 ? _e : (_f = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _f === void 0 ? void 0 : _f[500], bg: (_g = colors === null || colors === void 0 ? void 0 : colors.background) === null || _g === void 0 ? void 0 : _g[100], position: "relative", zIndex: 1 },
-                    enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[400] }))) : null,
-                    enableColumnCollapse && (react_1.default.createElement(react_2.Flex, { flexShrink: 0, w: "100%", justify: "center", bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], position: "relative", zIndex: 3 },
-                        react_1.default.createElement(react_2.IconButton, { "aria-label": "Expand column", icon: react_1.default.createElement(lucide_react_1.ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: function () { return toggleColumnCollapsed(colId); } }))),
-                    react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "700", fontSize: "0.75rem", color: (_k = colors === null || colors === void 0 ? void 0 : colors.text) === null || _k === void 0 ? void 0 : _k[700], sx: {
-                            writingMode: "vertical-rl",
-                            textOrientation: "mixed",
-                        }, maxH: "".concat(Math.max(120, containerHeight - 200), "px"), overflow: "hidden", lineHeight: "1.2", title: column.title }, column.title),
-                    react_1.default.createElement(react_2.Badge, { minW: "1.25rem", h: "1.25rem", borderRadius: "999px", border: "1px solid", borderColor: (_l = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _l === void 0 ? void 0 : _l[300], display: "flex", backgroundColor: (_m = colors === null || colors === void 0 ? void 0 : colors.background) === null || _m === void 0 ? void 0 : _m[100], alignItems: "center", justifyContent: "center", color: (_o = colors === null || colors === void 0 ? void 0 : colors.text) === null || _o === void 0 ? void 0 : _o[900], fontWeight: 600, fontSize: "10px" }, (_p = column === null || column === void 0 ? void 0 : column.items) === null || _p === void 0 ? void 0 : _p.length)),
-                column.customNode ? (react_1.default.createElement(react_2.Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: (_q = colors === null || colors === void 0 ? void 0 : colors.background) === null || _q === void 0 ? void 0 : _q[100], "aria-hidden": true })) : null,
-                column.customNode ? (react_1.default.createElement(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: (_r = colors === null || colors === void 0 ? void 0 : colors.background) === null || _r === void 0 ? void 0 : _r[100], position: "relative", zIndex: 2 },
-                    react_1.default.createElement(react_2.Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem' },
-                        react_1.default.createElement(react_2.VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[600] }, column.customNode())))) : (react_1.default.createElement(react_2.Box, { flex: "1", minH: 0 })))) : (react_1.default.createElement(react_2.Flex, { width: "95%", h: !isColCollapsed && !!((_t = column.customNode) === null || _t === void 0 ? void 0 : _t.call(column)) ? "auto" : "2.75rem", borderRadius: "0.25rem", borderLeft: "0.188rem solid", borderLeftColor: (_u = column.color) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500], background: (_w = colors === null || colors === void 0 ? void 0 : colors.background) === null || _w === void 0 ? void 0 : _w[300], align: "center", px: 2, m: 2, flexShrink: 0, justifyContent: "space-between", position: "relative", gap: 2 },
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    enableColumnReorder && columnDragHandleProps ? (react_1.default.createElement(react_2.Flex, __assign({ align: "center", justify: "center", flexShrink: 0, cursor: "grab" }, columnDragHandleProps),
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.GripVertical, size: 14, color: (_x = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _x === void 0 ? void 0 : _x[400] }))) : null,
-                    react_1.default.createElement(react_2.Flex, { direction: "column", gap: 1, mt: !isColCollapsed && !!((_y = column.customNode) === null || _y === void 0 ? void 0 : _y.call(column)) ? "1" : "0" },
-                        react_1.default.createElement(react_2.Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: (_z = colors === null || colors === void 0 ? void 0 : colors.text) === null || _z === void 0 ? void 0 : _z[700], noOfLines: 1, flex: "1", minW: 0 },
-                            react_1.default.createElement(OverflowTooltipText_1.default, { placement: "top" }, column.title)),
-                        !!((_0 = column.customNode) === null || _0 === void 0 ? void 0 : _0.call(column)) ? (react_1.default.createElement(react_2.Box, { as: "section", "aria-label": "Column summary", width: "95%", flexShrink: 0, fontSize: "xs", mb: 1, color: (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[600] }, column.customNode())) : null)),
-                react_1.default.createElement(react_2.Box, { display: "flex", alignItems: "center", gap: 2 },
-                    react_1.default.createElement(react_2.Badge, { minW: { base: "20px", sm: "22px", md: "24px" }, h: { base: "20px", sm: "22px", md: "24px" }, borderRadius: "999px", border: "1px solid", backgroundColor: (_2 = colors === null || colors === void 0 ? void 0 : colors.background) === null || _2 === void 0 ? void 0 : _2[100], borderColor: (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[300], display: "flex", alignItems: "center", justifyContent: "center", color: (_4 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _4 === void 0 ? void 0 : _4[900], fontWeight: 600, fontSize: { base: "10px", sm: "11px", md: "12px" } }, (_5 = column === null || column === void 0 ? void 0 : column.items) === null || _5 === void 0 ? void 0 : _5.length),
-                    enableColumnCollapse && (react_1.default.createElement(react_2.IconButton, { "aria-label": "Collapse column", icon: react_1.default.createElement(lucide_react_1.ChevronLeft, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", flexShrink: 0, onClick: function () { return toggleColumnCollapsed(colId); } })),
-                    canDelete &&
-                        hoveredColumn === colId &&
-                        column.items.length > 0 && (react_1.default.createElement(react_2.Box, { as: lucide_react_1.Trash2, size: 16, cursor: "pointer", color: (_6 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _6 === void 0 ? void 0 : _6[600], _hover: { color: (_7 = colors === null || colors === void 0 ? void 0 : colors.red) === null || _7 === void 0 ? void 0 : _7[600] }, onClick: function () { return handleColumnDelete(colId); }, transition: "color 0.2s ease", flexShrink: 0 })),
-                    !(canDelete &&
-                        hoveredColumn === colId &&
-                        column.items.length > 0) && react_1.default.createElement(react_2.Box, { width: "16px", height: "16px", flexShrink: 0 })))),
-            !isColCollapsed && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_2.Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
-                        overflowY: "auto",
-                        overflowX: "hidden",
-                        scrollbarWidth: "thin",
-                        scrollbarColor: "var(--chakra-colors-gray-300) transparent",
-                        "&::-webkit-scrollbar": {
-                            width: "6px !important",
-                            height: "6px !important",
-                        },
-                        "&::-webkit-scrollbar-track": {
-                            background: "gray.100",
-                            borderRadius: "3px",
-                            marginTop: "4px",
-                            marginBottom: "4px",
-                        },
-                        "&::-webkit-scrollbar-thumb": {
-                            background: "gray.300",
-                            borderRadius: "3px",
-                            border: "1px solid",
-                            borderColor: "gray.100",
-                        },
-                        "&::-webkit-scrollbar-thumb:hover": {
-                            background: "gray.400",
-                        },
-                        "&": {
-                            scrollbarGutter: "stable both-edges",
-                        },
-                        cursor: canDrag ? "grab" : "not-allowed",
-                    } },
-                    (noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (react_1.default.createElement(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })),
-                    virtualization ? (react_1.default.createElement(react_window_1.VariableSizeList, { ref: function (el) {
-                            if (el)
-                                listRefs.current[colId] = el;
-                        }, height: containerHeight - 150, itemCount: column.items.length +
-                            (snapshot.isUsingPlaceholder ? 1 : 0), itemSize: function (index) {
-                            return getItemSize(index, column.items, colId);
-                        }, width: "100%", itemData: __assign(__assign({}, rowBaseProps), { items: column.items, colId: colId }) }, KanbanRow)) : (react_1.default.createElement(react_2.Box, null,
-                        column.items.map(function (account, index) { return (react_1.default.createElement("div", { key: account.id, style: { marginBottom: 12 } },
-                            react_1.default.createElement(dnd_1.Draggable, { draggableId: account.id.toString(), index: index, key: account.id, isDragDisabled: !canDrag }, function (dragProvided) {
-                                var _a;
-                                return (react_1.default.createElement("div", __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, dragProvided.dragHandleProps, { style: dragProvided.draggableProps.style }), (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) : (react_1.default.createElement(AccountCard_1.default, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: function () {
-                                        return toggleExpand(account.id, colId, index);
-                                    }, isDeletable: canDelete }))));
-                            }))); }),
-                        provided.placeholder)))))));
-    })); };
     if (!canView)
         return null;
-    var showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
-    var hasAnyColumns = Object.keys(columns).length > 0;
-    var flexScrollSx = {
-        "&::-webkit-scrollbar": {
-            height: "6px",
-        },
-        "&::-webkit-scrollbar-track": {
-            background: (_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[100],
-            borderRadius: "3px",
-            margin: "0 4px",
-        },
-        "&::-webkit-scrollbar-thumb": {
-            background: (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[400],
-            borderRadius: "3px",
-            border: "1px solid ".concat((_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[100]),
-        },
-        "&::-webkit-scrollbar-thumb:hover": {
-            background: (_e = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _e === void 0 ? void 0 : _e[500],
-        },
-        scrollbarWidth: "thin",
-        scrollbarColor: "".concat((_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[400], " ").concat((_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[100]),
+    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 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),
     };
-    var addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (react_1.default.createElement(react_2.Box, { width: columnWidth, borderRadius: "0.5rem", border: "0.125rem dashed ".concat((_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[300]), bg: (_j = colors === null || colors === void 0 ? void 0 : colors.background) === null || _j === void 0 ? void 0 : _j[100], flexShrink: 0, height: "".concat(containerHeight - 60, "px"), display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: (_k = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _k === void 0 ? void 0 : _k[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
-        react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", gap: 2 },
-            react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_l = colors === null || colors === void 0 ? void 0 : colors.text) === null || _l === void 0 ? void 0 : _l[700] }),
-            react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column"))));
-    var columnsList = Object.entries(columns).map(function (_a, colIndex) {
-        var colId = _a[0], column = _a[1];
-        var isColCollapsed = enableColumnCollapse && Boolean(collapsedColumns[colId]);
+    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 (react_1.default.createElement(dnd_1.Draggable, { draggableId: colId, index: colIndex, key: colId }, function (dragProvided) {
-                var _a;
-                return (react_1.default.createElement(react_2.Box, __assign({ ref: dragProvided.innerRef }, dragProvided.draggableProps, { width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: "width 0.2s ease", overflow: isColCollapsed ? "visible" : "hidden" }), renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed)));
-            }));
+            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: (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);
     });
-    var loadingSkeletonRow = Array.from({ length: 5 }).map(function (_, idx) {
-        var _a, _b;
-        return (react_1.default.createElement(react_2.Box, { key: idx, width: columnWidth, p: 4, borderRadius: "0.5rem", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[100], border: "0.125rem solid ".concat((_b = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _b === void 0 ? void 0 : _b[200]), flexShrink: 0 },
-            react_1.default.createElement(react_2.Skeleton, { height: "2.75rem", mb: 4, borderRadius: "0.25rem" }),
-            react_1.default.createElement(react_2.SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })));
-    });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(HeaderActions_1.default, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }),
-        react_1.default.createElement(dnd_1.DragDropContext, { onDragEnd: onDragEnd },
-            react_1.default.createElement(react_2.Box, { ref: containerRef, bg: (_o = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _o === void 0 ? void 0 : _o[50], minH: "".concat(containerHeight, "px"), position: "relative", overflow: "hidden", mt: 2 },
-                showAddColumn && !isBoardLoading && !hasAnyColumns && (react_1.default.createElement(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1 },
-                    react_1.default.createElement(react_2.Flex, { direction: "column", align: "center", justify: "center", gap: 2, pointerEvents: "auto", cursor: "pointer", px: 6, py: 5, borderRadius: "0.5rem", bg: (_p = colors === null || colors === void 0 ? void 0 : colors.background) === null || _p === void 0 ? void 0 : _p[100], border: "0.125rem dashed ".concat((_q = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _q === void 0 ? void 0 : _q[300]), _hover: { borderColor: (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[500] }, onClick: function () { var _a; return (_a = customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.onAddColumn) === null || _a === void 0 ? void 0 : _a.call(customizeColumn); } },
-                        react_1.default.createElement(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: (_s = colors === null || colors === void 0 ? void 0 : colors.text) === null || _s === void 0 ? void 0 : _s[700] }),
-                        react_1.default.createElement(react_2.Text, { fontSize: "sm", color: (_t = colors === null || colors === void 0 ? void 0 : colors.text) === null || _t === void 0 ? void 0 : _t[600] }, (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column")))),
-                isBoardLoading ? (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }, loadingSkeletonRow)) : enableColumnReorder ? (react_1.default.createElement(dnd_1.Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN" }, function (colReorderProvided) { return (react_1.default.createElement(react_2.Flex, __assign({ ref: colReorderProvided.innerRef }, colReorderProvided.droppableProps, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx }),
-                    columnsList,
-                    colReorderProvided.placeholder,
-                    addColumnBox)); })) : (react_1.default.createElement(react_2.Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx },
-                    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;