pixelize-design-library 2.4.1 → 2.4.2-beta.1

package/dist/esm/Components/KanbanBoard/KanbanBoard.js

@@ -0,0 +1,446 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, useCallback, useEffect, useMemo, } from "react";
+import { Box, Flex, Text, Skeleton, SkeletonText, useBreakpointValue, Badge, IconButton, VStack, } from "@chakra-ui/react";
+import { DragDropContext, Droppable, Draggable, } from "@hello-pangea/dnd";
+import { Plus, Trash2, GripVertical, ChevronLeft, ChevronRight } from "lucide-react";
+import { VariableSizeList as List, } from "react-window";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
+import AccountCard from "./AccountCard.js";
+import HeaderActions from "../Header/HeaderActions.js";
+import MeasuredItem from "./MeasuredItem.js";
+import OverflowTooltipText from "../SideBar/components/OverflowTooltipText.js";
+import Button from "../Button/Button.js";
+import { rafThrottle } from "../../Utils/rafThrottle.js";
+/** Narrow rail width when a column is horizontally collapsed. */
+const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+const KANBAN_CARD_GAP = 12;
+// 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 KanbanRow = React.memo(({ index, style, data }) => {
+    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const account = items[index];
+    if (!account) {
+        return _jsx("div", { style: style });
+    }
+    return (_jsx("div", { style: style, children: _jsx("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: _jsx(MeasuredItem, { index: index, setSize: (i, h) => setSize(i, h, colId), children: _jsx(Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (provided) => {
+                        var _a;
+                        return (_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) : (_jsx(AccountCard, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: expanded[account.id], onToggleExpand: () => toggleExpand(account.id, colId, index), isDeletable: canDelete }, account.id)) }));
+                    } }, account.id) }) }) }));
+});
+const NoItemsTemplate = React.memo(({ column, noItems, colors }) => (_jsx(Box, { children: _jsxs(Flex, { flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 2, children: [_jsx(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) && (_jsx(Button, { 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) {
+    const result = Array.from(entries);
+    const [removed] = result.splice(startIndex, 1);
+    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 = {
+    baseurl: "",
+    token: "",
+    key: "",
+    name: "",
+    page: "",
+    orgId: "",
+}, }) => {
+    const { colors } = 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 = useMemo(() => ({ ...data, ...(customColumns !== null && customColumns !== void 0 ? customColumns : {}) }), [data, customColumns]);
+    const { preferences: kanbanPreferencesData, loading: preferencesLoading } = useGetPreferences({
+        baseUrl: preferences.baseurl,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const { savePreferences } = useSavePreferences({
+        baseUrl: preferences.baseurl,
+        page: preferences.page,
+        key: preferences.key,
+        name: preferences.name,
+        authToken: preferences.token,
+        orgId: preferences.orgId,
+    });
+    const kanbanPreferencesJson = useMemo(() => {
+        if (kanbanPreferencesData === null || kanbanPreferencesData === void 0 ? void 0 : kanbanPreferencesData.length) {
+            return kanbanPreferencesData[0].json;
+        }
+        return {};
+    }, [kanbanPreferencesData]);
+    const kanbanPreferencesJsonRef = useRef(kanbanPreferencesJson);
+    kanbanPreferencesJsonRef.current = kanbanPreferencesJson;
+    const isBoardLoading = isLoading || (Boolean(preferences.baseurl) && preferencesLoading);
+    const [columns, setColumns] = useState(mergedColumns);
+    const [containerHeight, setContainerHeight] = useState(600);
+    const [hoveredColumn, setHoveredColumn] = useState(null);
+    useEffect(() => {
+        setColumns(mergedColumns);
+    }, [mergedColumns]);
+    // Responsive column width
+    const columnWidth = useBreakpointValue({
+        base: "16rem",
+        md: "17.5rem",
+        lg: "19rem",
+    });
+    // track expanded cards
+    const [expanded, setExpanded] = useState({});
+    /** When true, column id maps to collapsed (body hidden). */
+    const [collapsedColumns, setCollapsedColumns] = useState(() => ({ ...defaultCollapsedColumns }));
+    const hasHydratedCollapsedFromPrefs = useRef(false);
+    useEffect(() => {
+        hasHydratedCollapsedFromPrefs.current = false;
+    }, [
+        preferences.baseurl,
+        preferences.page,
+        preferences.key,
+        preferences.name,
+    ]);
+    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;
+        }
+        const saved = kanbanPreferencesJson.collapsedColumns;
+        if (saved === null ||
+            typeof saved !== "object" ||
+            Array.isArray(saved)) {
+            hasHydratedCollapsedFromPrefs.current = true;
+            return;
+        }
+        const next = {};
+        for (const [k, v] of Object.entries(saved)) {
+            if (validIds.has(k) && typeof v === "boolean") {
+                next[k] = v;
+            }
+        }
+        setCollapsedColumns({
+            ...defaultCollapsedColumns,
+            ...next,
+        });
+        hasHydratedCollapsedFromPrefs.current = true;
+    }, [
+        enableColumnCollapse,
+        preferences.baseurl,
+        preferencesLoading,
+        kanbanPreferencesJson,
+        mergedColumns,
+        defaultCollapsedColumns,
+    ]);
+    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 = useCallback((colId) => {
+        setCollapsedColumns((prev) => {
+            const collapsed = !prev[colId];
+            const next = { ...prev, [colId]: collapsed };
+            onColumnCollapseChange === null || onColumnCollapseChange === void 0 ? void 0 : onColumnCollapseChange({
+                colId,
+                collapsed,
+                collapsedColumns: next,
+            });
+            if (preferences.baseurl && enableColumnCollapse) {
+                savePreferences({
+                    ...kanbanPreferencesJsonRef.current,
+                    collapsedColumns: next,
+                });
+            }
+            return next;
+        });
+    }, [
+        onColumnCollapseChange,
+        preferences.baseurl,
+        enableColumnCollapse,
+        savePreferences,
+    ]);
+    /** Rotated collapsed summaries paint outside layout; reserve space so they are not clipped under the rail header. */
+    const COLLAPSED_CUSTOM_NODE_TOP_RESERVE = "3.5rem";
+    // ref for lists
+    const listRefs = useRef({});
+    const containerRef = useRef(null);
+    // store measured heights
+    const [sizes, setSizes] = useState({});
+    const hasMountedSizes = useRef(false);
+    // Prune stale size entries when columns change (skip first render)
+    useEffect(() => {
+        if (!hasMountedSizes.current) {
+            hasMountedSizes.current = true;
+            return;
+        }
+        setSizes((prev) => {
+            if (Object.keys(prev).length === 0)
+                return prev;
+            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}`);
+                }
+            }
+            const pruned = {};
+            let changed = false;
+            for (const key of Object.keys(prev)) {
+                if (validKeys.has(key)) {
+                    pruned[key] = prev[key];
+                }
+                else {
+                    changed = true;
+                }
+            }
+            return changed ? pruned : prev;
+        });
+    }, [columns]);
+    // 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
+    const setSize = useCallback((index, size, colId) => {
+        const key = `${colId}-${index}`;
+        setSizes((prev) => {
+            if (prev[key] === size)
+                return prev;
+            return { ...prev, [key]: size };
+        });
+        // Only recompute from the row that changed downward (cheaper than resetting all).
+        if (listRefs.current[colId]) {
+            listRefs.current[colId].resetAfterIndex(index);
+        }
+    }, []);
+    const getItemSize = 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
+    useEffect(() => {
+        const calculateDimensions = () => {
+            if (containerRef.current) {
+                const availableHeight = window.innerHeight - 100;
+                setContainerHeight(Math.max(500, availableHeight));
+            }
+        };
+        calculateDimensions();
+        const onResize = rafThrottle(calculateDimensions);
+        window.addEventListener("resize", onResize);
+        return () => {
+            onResize.cancel();
+            window.removeEventListener("resize", onResize);
+        };
+    }, [isBoardLoading]);
+    // toggle expand/collapse — memoized so it doesn't bust `rowBaseProps`/itemData
+    // every render (which would re-render every virtualized row).
+    const toggleExpand = useCallback((id, colId, index) => {
+        setExpanded((prev) => {
+            const newExpanded = { ...prev, [id]: !prev[id] };
+            if (listRefs.current[colId]) {
+                listRefs.current[colId].resetAfterIndex(index);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // drag handler
+    const onDragEnd = useCallback((result) => {
+        const { source, destination, type } = result;
+        if (!destination)
+            return;
+        if (type === "COLUMN") {
+            if (source.index === destination.index)
+                return;
+            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;
+        }
+        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) {
+            const copiedItems = [...sourceCol.items];
+            copiedItems.splice(source.index, 1);
+            copiedItems.splice(destination.index, 0, draggedItem);
+            const nextColumns = {
+                ...columns,
+                [source.droppableId]: { ...sourceCol, items: copiedItems },
+            };
+            setColumns(nextColumns);
+            onDrag === null || onDrag === void 0 ? void 0 : onDrag({
+                from: source.droppableId,
+                to: destination.droppableId,
+                item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
+            });
+        }
+        else {
+            const sourceItems = [...sourceCol.items];
+            const destItems = [...destCol.items];
+            sourceItems.splice(source.index, 1);
+            destItems.splice(destination.index, 0, draggedItem);
+            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,
+                to: destination.droppableId,
+                item: draggedItem,
+                columns: nextColumns,
+                fromIndex: source.index,
+                toIndex: destination.index,
+            });
+        }
+    }, [columns, onDrag, onColumnReorder]);
+    const handleColumnDelete = useCallback((colId) => {
+        var _a, _b;
+        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 rowBaseProps = useMemo(() => ({
+        canDrag,
+        expanded,
+        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.
+    const itemDataByCol = 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) => (_jsx(Droppable, { droppableId: colId, mode: virtualization ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
+            var _a;
+            const item = column.items[rubric.source.index];
+            return (_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) : (_jsx(AccountCard, { 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 (_jsxs(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 ? (_jsxs(Flex, { direction: "column", align: "stretch", flex: "1", width: "100%", minH: 0, overflow: "visible", position: "relative", children: [_jsxs(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 ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, enableColumnCollapse && (_jsx(Flex, { flexShrink: 0, w: "100%", justify: "center", bg: colors.background[100], position: "relative", zIndex: 3, children: _jsx(IconButton, { "aria-label": "Expand column", icon: _jsx(ChevronRight, { size: 14 }), variant: "ghost", size: "xs", minW: "1.5rem", h: "1.75rem", onClick: () => toggleColumnCollapsed(colId) }) })), _jsx(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 }), _jsx(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 ? (_jsx(Box, { flexShrink: 0, minH: COLLAPSED_CUSTOM_NODE_TOP_RESERVE, w: "100%", bg: colors.background[100], "aria-hidden": true })) : null, column.customNode ? (_jsx(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: _jsx(Box, { position: "relative", transform: "rotate(90deg)", transformOrigin: "center center", marginTop: '1rem', children: _jsx(VStack, { align: "stretch", spacing: 1, minW: "max-content", fontSize: "xs", color: colors.text[600], children: column.customNode() }) }) })) : (_jsx(Box, { flex: "1", minH: 0 }))] })) : (_jsxs(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[100]}`, children: [_jsxs(Flex, { direction: "column", gap: 1, minW: 0, flex: "1", children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(Box, { boxSize: "0.625rem", borderRadius: "full", bg: (_e = column.color) !== null && _e !== void 0 ? _e : colors.primary[500], flexShrink: 0 }), enableColumnReorder && columnDragHandleProps ? (_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, cursor: "grab", ...columnDragHandleProps, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, _jsx(Text, { as: "span", fontWeight: "600", fontSize: "0.875rem", color: colors.text[700], noOfLines: 1, minW: 0, children: _jsx(OverflowTooltipText, { placement: "top", children: column.title }) })] }), column.customNode ? (_jsx(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] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(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 && (_jsx(IconButton, { "aria-label": "Collapse column", icon: _jsx(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 && (_jsx(Box, { as: 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) && _jsx(Box, { width: "16px", height: "16px", flexShrink: 0 })] })] })), !isColCollapsed && (_jsxs(Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                            overflowY: "auto",
+                            overflowX: "hidden",
+                            scrollbarWidth: "thin",
+                            scrollbarColor: `${colors.gray[300]} transparent`,
+                            "&::-webkit-scrollbar": {
+                                width: "6px !important",
+                                height: "6px !important",
+                            },
+                            "&::-webkit-scrollbar-track": {
+                                background: colors.gray[100],
+                                borderRadius: "base",
+                                marginTop: "4px",
+                                marginBottom: "4px",
+                            },
+                            "&::-webkit-scrollbar-thumb": {
+                                background: colors.gray[300],
+                                borderRadius: "base",
+                                border: "1px solid",
+                                borderColor: colors.gray[100],
+                            },
+                            "&::-webkit-scrollbar-thumb:hover": {
+                                background: colors.gray[400],
+                            },
+                            "&": {
+                                scrollbarGutter: "stable both-edges",
+                            },
+                            cursor: canDrag ? "grab" : "not-allowed",
+                        }, children: [(noItems === null || noItems === void 0 ? void 0 : noItems.isVisible) && column.items.length === 0 && (_jsx(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), virtualization ? (_jsx(List, { 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 })) : (_jsxs(Box, { children: [column.items.map((account, index) => (_jsx("div", { style: { paddingBottom: KANBAN_CARD_GAP, paddingTop: index === 0 ? KANBAN_LIST_TOP_PAD : 0 }, children: _jsx(Draggable, { draggableId: account.id.toString(), index: index, isDragDisabled: !canDrag, children: (dragProvided) => {
+                                                var _a;
+                                                return (_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) : (_jsx(AccountCard, { 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));
+    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 = {
+        "&::-webkit-scrollbar": {
+            height: "6px",
+        },
+        "&::-webkit-scrollbar-track": {
+            background: colors.gray[100],
+            borderRadius: "base",
+            margin: "0 4px",
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: colors.gray[400],
+            borderRadius: "base",
+            border: `1px solid ${colors.gray[100]}`,
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: colors.gray[500],
+        },
+        scrollbarWidth: "thin",
+        scrollbarColor: `${colors.gray[400]} ${colors.gray[100]}`,
+    };
+    const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (_jsx(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: _jsxs(Flex, { direction: "column", align: "center", gap: 2, children: [_jsx(Box, { as: Plus, size: 20, color: colors.text[700] }), _jsx(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 (_jsx(Draggable, { draggableId: colId, index: colIndex, children: (dragProvided) => {
+                    var _a;
+                    return (_jsx(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) }));
+                } }, colId));
+        }
+        return renderColumnDroppable(colId, column, null, isColCollapsed);
+    });
+    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => (_jsxs(Box, { width: columnWidth, p: 4, borderRadius: "lg", bg: colors.background[100], border: `0.125rem solid ${colors.boxborder[200]}`, flexShrink: 0, children: [_jsx(Skeleton, { height: "2.75rem", mb: 4, borderRadius: "base" }), _jsx(SkeletonText, { mt: "4", noOfLines: 5, spacing: "4" })] }, idx)));
+    return (_jsxs(_Fragment, { children: [_jsx(HeaderActions, { select: kanbanSelect, edit: canDrag ? kanbanEdit : undefined, create: canCreate ? kanbanCreate : undefined }), _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs(Box, { ref: containerRef, bg: colors.backgroundColor.main, minH: `${containerHeight}px`, position: "relative", overflow: "hidden", mt: 2, children: [showAddColumn && !isBoardLoading && !hasAnyColumns && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", pointerEvents: "none", zIndex: 1, children: _jsxs(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: [_jsx(Box, { as: Plus, size: 20, color: colors.text[700] }), _jsx(Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) })), isBoardLoading ? (_jsx(Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: loadingSkeletonRow })) : enableColumnReorder ? (_jsx(Droppable, { droppableId: "COLUMN_REORDER", direction: "horizontal", type: "COLUMN", children: (colReorderProvided) => (_jsxs(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] })) })) : (_jsxs(Flex, { gap: 4, p: 4, pb: 6, overflowX: "auto", overflowY: "hidden", height: "100%", sx: flexScrollSx, children: [columnsList, addColumnBox] }))] }) })] }));
+};
+export default KanbanBoard;

package/dist/esm/Components/KanbanBoard/KanbanBoardProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/KanbanBoard/MeasuredItem.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useLayoutEffect, useEffect } from "react";
+const MeasuredItem = ({ index, setSize, children, }) => {
+    const ref = useRef(null);
+    const prevHeight = useRef(null);
+    // Stable ref to the latest setSize so we don't tear down the ResizeObserver on every render.
+    const setSizeRef = useRef(setSize);
+    setSizeRef.current = setSize;
+    const indexRef = useRef(index);
+    indexRef.current = index;
+    const measure = () => {
+        if (ref.current) {
+            // offsetHeight is the integer border-box layout height — more reliable than getBoundingClientRect for our purposes.
+            const height = ref.current.offsetHeight;
+            if (height > 0 && prevHeight.current !== height) {
+                prevHeight.current = height;
+                setSizeRef.current(indexRef.current, height);
+            }
+        }
+    };
+    useLayoutEffect(() => {
+        const element = ref.current;
+        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 {
+            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)
+                window.removeEventListener("resize", measure);
+        };
+    }, []);
+    // If index changes for the same DOM node (item shuffled), re-report the cached size under the new index.
+    useEffect(() => {
+        if (prevHeight.current != null) {
+            setSizeRef.current(indexRef.current, prevHeight.current);
+        }
+    }, [index]);
+    return _jsx("div", { ref: ref, children: children });
+};
+export default MeasuredItem;

package/dist/esm/Components/LazyWrapper/LazyWrapper.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { Box, Spinner } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const DefaultFallback = ({ minHeight }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: _jsx(Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
+};
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : _jsx(DefaultFallback, { minHeight: minHeight }), children: children }));
+export default LazyWrapper;

package/dist/esm/Components/LimitReachedModal/LimitReachedModal.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Flex, HStack, Icon, List, ListIcon, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Text, } from "@chakra-ui/react";
+import { CheckCircle, Crown, Users } from "lucide-react";
+import Button from "../Button/Button.js";
+import UpgradeButton from "../UpgradeButton/UpgradeButton.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { formatLimitUsage, resolveLimitCopy } from "./limitReachedCopy.js";
+const KIND_ICON = {
+    record: Crown,
+    automation: Crown,
+    custom_modules: Crown,
+    user: Users,
+    projects: Crown,
+    tickets: Crown,
+};
+const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
+    const { colors } = useCustomTheme();
+    const copy = resolveLimitCopy(kind, canManageBilling);
+    const usage = formatLimitUsage(kind, used, limit);
+    const KindIcon = KIND_ICON[kind];
+    const gradient = colors.gradient;
+    // Header banner uses the brand gradient (not a fixed blue/purple) so it reads correctly
+    // across all 9 brand themes, with ink picked for AA against whichever stop is lighter.
+    const ink = onGradient(gradient.from, gradient.to, colors.white, colors.black);
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [_jsx(ModalOverlay, { backdropFilter: "blur(5px)" }), _jsxs(ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, children: [_jsxs(Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [_jsx(ModalHeader, { pb: 4, children: _jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), _jsx(Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), _jsx(ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: colors.text[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && (_jsx(Text, { textAlign: "center", fontSize: "sm", color: colors.textMuted, mt: 2, children: usage })), features && features.length > 0 && (_jsx(List, { spacing: 2, mt: 5, children: features.map((feature) => (_jsxs(ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: colors.text[600], children: [_jsx(ListIcon, { as: CheckCircle, color: colors.semanticText.success }), feature] }, feature))) }))] }), _jsx(Divider, {}), _jsx(ModalFooter, { children: _jsxs(HStack, { spacing: 3, children: [_jsx(Button, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && (_jsx(UpgradeButton, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+};
+export default LimitReachedModal;

package/dist/esm/Components/LimitReachedModal/LimitReachedModalProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/LimitReachedModal/limitReachedCopy.js

@@ -0,0 +1,50 @@
+// Canonical strings ported from crm-frontend's orgPlanLimits.ts / orgRecordLimit.ts and
+// account-frontend's useSeatLimitGate.ts, kept verbatim so the promoted modal reads exactly
+// like the copies it replaces. `projects`/`tickets` are new — matched to the same voice.
+const COPY = {
+    record: {
+        title: "Record limit reached",
+        unit: "records",
+        admin: "You have reached your plan record limit. Upgrade to add more records.",
+        member: "Your organization has reached its record limit. Contact your organization administrator to upgrade the plan.",
+    },
+    automation: {
+        title: "Automation limit reached",
+        unit: "automations",
+        admin: "You have reached your plan automation limit. Upgrade to create more workflows and cadences.",
+        member: "Your organization has reached its automation limit. Contact your organization administrator to upgrade the plan.",
+    },
+    custom_modules: {
+        title: "Custom module limit reached",
+        unit: "custom modules",
+        admin: "You have reached your plan custom module limit. Upgrade to add more custom modules.",
+        member: "Your organization has reached its custom module limit. Contact your organization administrator to upgrade the plan.",
+    },
+    user: {
+        title: "Seat limit reached",
+        unit: "users",
+        admin: "You have reached the number of users included on your plan. Upgrade to add more.",
+        member: "Your organization has reached its user limit. Contact your organization administrator to upgrade the plan.",
+    },
+    projects: {
+        title: "Project limit reached",
+        unit: "projects",
+        admin: "You have reached your plan project limit. Upgrade to create more projects.",
+        member: "Your organization has reached its project limit. Contact your organization administrator to upgrade the plan.",
+    },
+    tickets: {
+        title: "Ticket limit reached",
+        unit: "tickets",
+        admin: "You have reached your plan ticket limit. Upgrade to create more tickets.",
+        member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
+    },
+};
+export function resolveLimitCopy(kind, canManageBilling) {
+    const c = COPY[kind];
+    return { title: c.title, message: canManageBilling ? c.admin : c.member };
+}
+export function formatLimitUsage(kind, used, limit) {
+    if (used == null || limit == null)
+        return null;
+    return `${used} of ${limit} ${COPY[kind].unit} used`;
+}

package/dist/esm/Components/Loading/Loading.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Center, Spinner, Text } from "@chakra-ui/react";
+import { css, keyframes } from "@emotion/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const colorTransition = keyframes `
+  0% {
+    color: black;
+  }
+  50% {
+    color: gray;
+  }
+  100% {
+    color: black;
+  }
+`;
+export default function Loading({ text, isLoading, onlytext, container }) {
+    const theme = useCustomTheme();
+    if (!isLoading) {
+        return null;
+    }
+    return (_jsx(Box, { position: container ? "absolute" : "fixed", top: "0", right: "0", bottom: "0", left: "0", backgroundColor: container ? "blackAlpha.500" : "blackAlpha.600", backdropFilter: container ? undefined : "blur(60px)", display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", zIndex: container ? "10" : "9999", children: _jsx(Center, { height: container ? "100%" : "100vh", children: !onlytext ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { thickness: "4px", speed: "0.65s", emptyColor: "gray.200", color: theme.colors.accentText, size: "xl" }), _jsx(Text, { mt: "2", ml: "5", children: text })] })) : (_jsx(Text, { mt: "2", ml: "5", fontSize: "50px", textTransform: "uppercase", fontWeight: 500, css: css `
+              animation: ${colorTransition} 2s infinite;
+            `, children: text })) }) }));
+}

package/dist/esm/Components/Loading/LoadingProps.js

@@ -0,0 +1 @@
+export {};