pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -1,34 +1,67 @@
 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 { Box, Flex, Text, Skeleton, SkeletonCircle, 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 { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { useGetPreferences, useSavePreferences, } from "../../Hooks/usePreferences.js";
 import AccountCard from "./AccountCard.js";
+import { cardRule, ruleOn } from "../../Theme/tokens/builders/planeStep.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";
+import { createBoardStore, useBoardStore } from "./boardStore.js";
+import { onActivationKey } from "../Common/activationKey.js";
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
+const CARD_LABEL_EXCLUDE = ["id", "details"];
+/** Accessible name for a draggable card: first visible string field, else its id. */
+const getCardAccessibleName = (account) => {
+    if (typeof account.name === "string" && account.name)
+        return account.name;
+    const key = Object.keys(account).find((k) => !CARD_LABEL_EXCLUDE.includes(k) && typeof account[k] === "string" && account[k]);
+    return key ? account[key] : `Card ${account.id}`;
+};
 const KANBAN_CARD_GAP = 12;
+const COLUMN_HEIGHT = "calc(100% - 1.25rem)";
+const MIN_LIST_HEIGHT = 120;
+// Matches Table's own row threshold (TableBody.tsx) so both components agree on when DOM size needs virtualizing.
+const KANBAN_VIRTUALIZE_THRESHOLD = 30;
+const COLUMN_TRANSITION = `${transitionFor(["background-color", "border-color"])}, ${transitionFor(["width"], "base")}`;
+const SKELETON_ROWS = [3, 4, 3];
+const CardSkeleton = ({ colors, rows }) => (_jsx(Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${cardRule(colors)}`, p: 3, minH: "5rem", children: _jsx(Flex, { direction: "column", gap: 2.5, children: Array.from({ length: rows }).map((_, i) => (_jsxs(Flex, { gap: 2, align: "center", children: [_jsx(Skeleton, { h: 2.5, w: "30%", borderRadius: "sm" }), _jsx(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 = useBoardStore(expandedStore, (expanded) => expanded[account.id]);
+    const onToggleExpand = useCallback(() => toggleExpand(account.id, colId, index), [toggleExpand, account.id, colId, index]);
+    if (account.customNode)
+        return _jsx(_Fragment, { children: account.customNode() });
+    return (_jsx(AccountCard, { account: account, index: index, onDelete: onDelete, onOpen: onOpen, isExpanded: isExpanded, onToggleExpand: onToggleExpand, isDeletable: canDelete }));
+};
+const ColumnDeleteAll = ({ colId, title, hoveredColumn, colors, onDelete }) => {
+    const isHovered = useBoardStore(hoveredColumn, (hovered) => hovered === colId);
+    if (!isHovered)
+        return _jsx(Box, { boxSize: 4, flexShrink: 0 });
+    return (_jsx(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: transitionFor(["color"]), sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, flexShrink: 0, children: _jsx(Trash2, { size: 16 }) }));
+};
 const KanbanRow = React.memo(({ index, style, data }) => {
-    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    const { colors: rowColors } = useCustomTheme();
+    const { items, colId, canDrag, expandedStore, 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) }) }) }));
+    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) => (_jsx(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: focusVisibleStyles(rowColors), children: _jsx(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, 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) {
@@ -37,14 +70,15 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
     result.splice(endIndex, 0, removed);
     return result;
 }
-const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
+/** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
+const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete: onDeleteProp, onOpen: onOpenProp, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
     baseurl: "",
     token: "",
     key: "",
     name: "",
     page: "",
     orgId: "",
-}, }) => {
+}, height, maxH, }) => {
     const { colors } = 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;
@@ -77,19 +111,21 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     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(() => {
+    const [adoptedColumns, setAdoptedColumns] = useState(mergedColumns);
+    const [viewportHeight, setViewportHeight] = useState(600);
+    const [measuredHeight, setMeasuredHeight] = useState(0);
+    const [hoveredColumn] = useState(() => createBoardStore(null));
+    if (adoptedColumns !== mergedColumns) {
+        setAdoptedColumns(mergedColumns);
         setColumns(mergedColumns);
-    }, [mergedColumns]);
+    }
     // Responsive column width
     const columnWidth = useBreakpointValue({
         base: "16rem",
         md: "17.5rem",
         lg: "19rem",
     });
-    // track expanded cards
-    const [expanded, setExpanded] = useState({});
+    const [expandedStore] = useState(() => createBoardStore({}));
     /** When true, column id maps to collapsed (body hidden). */
     const [collapsedColumns, setCollapsedColumns] = useState(() => ({ ...defaultCollapsedColumns }));
     const hasHydratedCollapsedFromPrefs = useRef(false);
@@ -100,6 +136,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         preferences.page,
         preferences.key,
         preferences.name,
+        preferences.orgId,
+        preferences.token,
     ]);
     useEffect(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
@@ -239,13 +277,11 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const key = `${colId}-${index}`;
         return (sizes[key] || DEFAULT_ITEM_HEIGHT) + KANBAN_CARD_GAP + (index === 0 ? KANBAN_LIST_TOP_PAD : 0);
     }, [sizes]);
-    // Calculate container height
     useEffect(() => {
+        if (height !== undefined)
+            return;
         const calculateDimensions = () => {
-            if (containerRef.current) {
-                const availableHeight = window.innerHeight - 100;
-                setContainerHeight(Math.max(500, availableHeight));
-            }
+            setViewportHeight(Math.max(500, window.innerHeight - 100));
         };
         calculateDimensions();
         const onResize = rafThrottle(calculateDimensions);
@@ -254,18 +290,30 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
             onResize.cancel();
             window.removeEventListener("resize", onResize);
         };
-    }, [isBoardLoading]);
+    }, [height]);
+    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 = useCallback((id, colId, index) => {
-        setExpanded((prev) => {
-            const newExpanded = { ...prev, [id]: !prev[id] };
-            if (listRefs.current[colId]) {
-                listRefs.current[colId].resetAfterIndex(index);
-            }
-            return newExpanded;
-        });
-    }, []);
+        const expanded = expandedStore.get();
+        expandedStore.set({ ...expanded, [id]: !expanded[id] });
+        if (listRefs.current[colId]) {
+            listRefs.current[colId].resetAfterIndex(index);
+        }
+    }, [expandedStore]);
     // drag handler
     const onDragEnd = useCallback((result) => {
         const { source, destination, type } = result;
@@ -330,17 +378,22 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map((item) => item.id)) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
     }, [columns, onColumnDelete]);
+    const onDeleteRef = useRef(onDeleteProp);
+    onDeleteRef.current = onDeleteProp;
+    const onOpenRef = useRef(onOpenProp);
+    onOpenRef.current = onOpenProp;
+    const onDelete = useCallback((account) => { var _a; return (_a = onDeleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onDeleteRef, account); }, []);
+    const onOpen = useCallback((account) => { var _a; return (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, account); }, []);
     const rowBaseProps = useMemo(() => ({
         canDrag,
-        expanded,
+        expandedStore,
         onDelete,
         onOpen,
         canDelete,
         setSize,
         toggleExpand,
-    }), [canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand]);
-    // Stable per-column itemData so unrelated board re-renders (e.g. column hover)
-    // don't change the reference react-window hands to every row → no row re-renders.
+    }), [canDrag, expandedStore, onDelete, onOpen, canDelete, setSize, toggleExpand]);
+    // Stable per-column itemData, so unrelated board re-renders don't re-render every virtualized row.
     const itemDataByCol = useMemo(() => {
         const map = {};
         for (const [colId, column] of Object.entries(columns)) {
@@ -348,59 +401,65 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         }
         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[200]}`, 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: {
-                            ...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 && (_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));
+    const renderColumnDroppable = (colId, column, columnDragHandleProps, isColCollapsed) => {
+        const shouldVirtualize = virtualization !== null && virtualization !== void 0 ? virtualization : column.items.length > KANBAN_VIRTUALIZE_THRESHOLD;
+        return (_jsx(Droppable, { droppableId: colId, mode: shouldVirtualize ? "virtual" : "standard", renderClone: (provided, _snapshot, rubric) => {
+                const item = column.items[rubric.source.index];
+                return (_jsx(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: focusVisibleStyles(colors), children: _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 (_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: `${BORDER_WIDTHS.hairline} ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                        ? colors.focusRing.ring
+                        : ruleOn(colors, colors.background[100])}`, transition: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: 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 ? (_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, "aria-label": `Reorder ${column.title} column`, 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: "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 }), _jsx(Badge, { minW: 5, h: 5, borderRadius: "full", border: `${BORDER_WIDTHS.hairline} solid`, borderColor: 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 ? (_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: `${BORDER_WIDTHS.hairline} solid ${ruleOn(colors, colors.background[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: 2.5, 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, "aria-label": `Reorder ${column.title} column`, children: _jsx(Box, { as: GripVertical, size: 14, color: colors.textMuted }) })) : null, _jsx(Text, { as: "span", fontWeight: "600", fontSize: "sm", 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: 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 && (_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 && column.items.length > 0 ? (_jsx(ColumnDeleteAll, { colId: colId, title: column.title, hoveredColumn: hoveredColumn, colors: colors, onDelete: handleColumnDelete })) : (_jsx(Box, { boxSize: 4, flexShrink: 0 }))] })] })), !isColCollapsed && (_jsxs(Box, { px: 2, flex: "1", overflowY: "auto", width: "100%", sx: {
+                                ...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 && (_jsx(NoItemsTemplate, { column: column, noItems: noItems, colors: colors })), shouldVirtualize ? (_jsx(List, { 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 })) : (_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) => (_jsx(Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: focusVisibleStyles(colors), children: _jsx(KanbanCardBody, { account: account, index: index, colId: colId, canDelete: canDelete, onDelete: onDelete, onOpen: onOpen, expandedStore: expandedStore, toggleExpand: toggleExpand }) })) }, account.id) }, account.id))), provided.placeholder] }))] }))] }));
+            } }, colId));
+    };
     if (!canView)
         return null;
     const showAddColumn = Boolean(customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.isVisible);
     const hasAnyColumns = Object.keys(columns).length > 0;
     const flexScrollSx = scrollbarStyles(colors);
-    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 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: focusVisibleStyles(colors),
+        onClick: addColumn,
+        onKeyDown: onActivationKey(addColumn),
+    };
+    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: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, 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) }));
+                    return (_jsx(Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, width: isColCollapsed ? COLLAPSED_KANBAN_COLUMN_WIDTH : columnWidth, flexShrink: 0, transition: transitionFor(["width"], "base"), sx: reducedMotionSx(), overflow: isColCollapsed ? "visible" : "hidden", children: renderColumnDroppable(colId, column, (_a = dragProvided.dragHandleProps) !== null && _a !== void 0 ? _a : null, isColCollapsed) }));
                 } }, colId));
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    const loadingSkeletonRow = Array.from({ length: 5 }).map((_, idx) => (_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] }))] }) })] }));
+    const loadingSkeletonRow = Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { "aria-hidden": true, width: columnWidth, borderRadius: "xl", bg: colors.background[100], border: `${BORDER_WIDTHS.hairline} solid ${ruleOn(colors, colors.background[100])}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [_jsxs(Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `${BORDER_WIDTHS.hairline} solid ${ruleOn(colors, colors.background[100])}`, children: [_jsx(SkeletonCircle, { size: "2.5" }), _jsx(Skeleton, { h: 3, w: "40%", borderRadius: "sm" }), _jsx(Skeleton, { h: 6, w: 6, ml: "auto", borderRadius: "full" })] }), _jsx(Flex, { direction: "column", gap: 3, px: 2, pt: 1.5, pb: 3, children: SKELETON_ROWS.slice(0, 3 - (idx % 2)).map((rows, i) => (_jsx(CardSkeleton, { colors: colors, rows: rows }, i))) })] }, 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, "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 && (_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] }, ...addColumnKeyboard, 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, { role: "status", "aria-label": "Loading board", 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/MeasuredItem.js

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

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

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react";
+/** Board-local state that only the components selecting a changed slice re-render for. */
+export const createBoardStore = (initial) => {
+    let value = initial;
+    const listeners = new Set();
+    return {
+        get: () => value,
+        set: (next) => {
+            if (Object.is(next, value))
+                return;
+            value = next;
+            listeners.forEach((listener) => listener());
+        },
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+    };
+};
+export const useBoardStore = (store, select) => useSyncExternalStore(store.subscribe, () => select(store.get()));

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

@@ -0,0 +1 @@
+export { default } from "./KanbanBoard.js";

package/dist/esm/Components/Kbd/Kbd.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { shortcutKeys } from "../AppSwitcher/AppSwitcherProps.js";
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+export const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "xs-minus", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+};
+/** Renders a chord such as `mod+k` as one `Kbd` per key, announced as a single spoken label. */
+export const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
+    const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
+    const apple = isApple !== null && isApple !== void 0 ? isApple : detectApple();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = shortcutKeys(shortcut, apple);
+    return (_jsx(Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => (_jsx(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+export default Kbd;

package/dist/esm/Components/Kbd/KbdProps.js

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

package/dist/esm/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { Compass } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { FOCUS_VISIBLE_OVER_STATE, focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import { detectApple } from "../Kbd/Kbd.js";
+import { formatShortcut } from "../AppSwitcher/AppSwitcherProps.js";
+import ToolTip from "../ToolTip/ToolTip.js";
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+export const keyShortcutsFor = (shortcut) => {
+    const options = shortcut
+        .split("+")
+        .map((p) => p.trim())
+        .filter(Boolean)
+        .map((p) => { var _a; return (_a = KEY_NAMES[p.toLowerCase()]) !== null && _a !== void 0 ? _a : [p.length === 1 ? p.toUpperCase() : p]; });
+    const variants = Math.max(1, ...options.map((o) => o.length));
+    const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
+    return Array.from(new Set(chords)).join(" ");
+};
+/** Chip or icon button that opens an app-owned launcher; shows the shortcut hint but binds no key. */
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const showHint = useMatchMedia(MD_QUERY, true);
+    const ring = focusVisibleRing(colors);
+    const hint = shortcut ? formatShortcut(shortcut, detectApple()) : "";
+    if (display === "icon") {
+        return (_jsx(ToolTip, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: _jsx(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: _jsx(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
+    return (_jsxs(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [_jsx(Icon, { size: 17, "aria-hidden": "true" }), _jsx("span", { children: label })] }), hint && showHint && (_jsx(Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "md", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+};
+export default LauncherTrigger;

package/dist/esm/Components/LauncherTrigger/LauncherTriggerProps.js

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

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

@@ -6,5 +6,6 @@ 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 }));
+/** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback === undefined ? _jsx(DefaultFallback, { minHeight: minHeight }) : fallback, children: children }));
 export default LazyWrapper;

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

@@ -1,5 +1,5 @@
 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 { Box, 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";
@@ -14,6 +14,7 @@ const KIND_ICON = {
     projects: Crown,
     tickets: Crown,
 };
+/** Controlled plan-limit modal: kind-specific title and message, optional usage line and feature list, upgrade CTA only for billing managers. */
 const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
     const { colors } = useCustomTheme();
     const copy = resolveLimitCopy(kind, canManageBilling);
@@ -22,6 +23,6 @@ const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, c
     // Header banner uses the brand gradient so it reads correctly across all 9 brands.
     const gradient = resolveGradient(colors.gradient, colors.white, colors.black);
     const ink = gradient.ink;
-    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() }))] }) })] })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [_jsx(ModalOverlay, {}), _jsxs(ModalContent, { overflow: "hidden", boxShadow: "2xl", mx: 4, children: [_jsxs(Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [_jsx(ModalHeader, { color: "inherit", borderBottomWidth: 0, children: _jsxs(Flex, { align: "center", children: [_jsx(Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), _jsx(Text, { fontSize: "xl", fontWeight: 700, 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(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/limitReachedCopy.js

@@ -1,6 +1,4 @@
-// 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.
+// NOTE: strings ported verbatim from crm-frontend/account-frontend's limit gates; projects/tickets are new, matched voice.
 const COPY = {
     record: {
         title: "Record limit reached",
@@ -39,10 +37,12 @@ const COPY = {
         member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
     },
 };
+/** title is the same for both audiences — only message swaps between admin and member copy. */
 export function resolveLimitCopy(kind, canManageBilling) {
     const c = COPY[kind];
     return { title: c.title, message: canManageBilling ? c.admin : c.member };
 }
+/** Returns null unless BOTH used and limit are non-null — no partial "X used" line. */
 export function formatLimitUsage(kind, used, limit) {
     if (used == null || limit == null)
         return null;