pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

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

@@ -1,11 +1,14 @@
 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 { 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 HeaderActions from "../Header/HeaderActions.js";
@@ -15,11 +18,27 @@ 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 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: `0.063rem solid ${colors.boxborder[200]}`, 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 KanbanRow = React.memo(({ index, style, data }) => {
+    const { colors: rowColors } = useCustomTheme();
     const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
     const account = items[index];
     if (!account) {
@@ -27,7 +46,7 @@ const KanbanRow = React.memo(({ index, style, data }) => {
     }
     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)) }));
+                        return (_jsx(Box, { ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: provided.draggableProps.style, borderRadius: "lg", sx: focusVisibleStyles(rowColors), 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" }))] }) })));
@@ -45,7 +64,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     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;
@@ -78,7 +97,8 @@ 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 [viewportHeight, setViewportHeight] = useState(600);
+    const [measuredHeight, setMeasuredHeight] = useState(0);
     const [hoveredColumn, setHoveredColumn] = useState(null);
     useEffect(() => {
         setColumns(mergedColumns);
@@ -240,13 +260,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);
@@ -255,7 +273,21 @@ 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) => {
@@ -349,59 +381,63 @@ 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) => {
+                var _a;
+                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: (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: COLUMN_TRANSITION, display: "flex", flexDirection: "column", flexShrink: 0, overflow: isColCollapsed ? "visible" : "hidden", height: COLUMN_HEIGHT, sx: reducedMotionSx(), onMouseEnter: () => setHoveredColumn(colId), onMouseLeave: () => setHoveredColumn(null), onFocus: () => setHoveredColumn(colId), onBlur: (e) => {
+                        if (!e.currentTarget.contains(e.relatedTarget))
+                            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, "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: "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: 5, h: 5, borderRadius: "full", border: "0.063rem solid", borderColor: colors.boxborder[200], 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: `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: 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: "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: 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 &&
+                                            hoveredColumn === colId &&
+                                            column.items.length > 0 ? (_jsx(Box, { as: "button", type: "button", "aria-label": `Delete all cards in ${column.title}`, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: 4, borderRadius: "sm", cursor: "pointer", color: colors.text[600], _hover: { color: colors.semanticText.error }, onClick: () => handleColumnDelete(colId), transition: transitionFor(["color"]), sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, flexShrink: 0, children: _jsx(Trash2, { size: 16 }) })) : (_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) => {
+                                                    var _a;
+                                                    return (_jsx(Box, { ref: dragProvided.innerRef, ...dragProvided.draggableProps, ...dragProvided.dragHandleProps, "aria-label": getCardAccessibleName(account), style: dragProvided.draggableProps.style, borderRadius: "lg", sx: focusVisibleStyles(colors), 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 = 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 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] }, 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) }));
+                    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: `0.063rem solid ${colors.boxborder[200]}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [_jsxs(Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, 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] }, 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, { 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/index.js

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

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";
@@ -22,6 +22,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: "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(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",

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

@@ -1,26 +1,23 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Box, Center, Spinner, Text } from "@chakra-ui/react";
-import { css, keyframes } from "@emotion/react";
+import { Box, Text } from "@chakra-ui/react";
+import { keyframes } from "@emotion/react";
+import Spinner from "../Spinner/Spinner.js";
+import Backdrop from "../Backdrop/Backdrop.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { overlayScrimStyles } from "../../Theme/chakra/overlay.styles.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+const pulse = keyframes `
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+`;
 /** Full-viewport (or container-scoped) blocking overlay gated on isLoading; not a substitute for Button's own isLoading spinner on one control. */
-export default function Loading({ text, isLoading, onlytext, container }) {
-    const theme = useCustomTheme();
-    const colorTransition = useMemo(() => keyframes `
-      0% {
-        color: ${theme.colors.text[900]};
-      }
-      50% {
-        color: ${theme.colors.textMuted};
-      }
-      100% {
-        color: ${theme.colors.text[900]};
-      }
-    `, [theme.colors.text, theme.colors.textMuted]);
+export default function Loading({ text, isLoading, onlytext, container, variant = "frosted", allowBackgroundInteraction, }) {
+    const { colors } = useCustomTheme();
+    if (variant === "dim" && !onlytext) {
+        return (_jsx(Backdrop, { open: isLoading, loader: true, text: text, container: container, allowBackgroundInteraction: allowBackgroundInteraction }));
+    }
     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 })) }) }));
+    return (_jsx(Box, { role: "status", "aria-live": "polite", "aria-busy": true, position: container ? "absolute" : "fixed", inset: "0", ...overlayScrimStyles(colors), color: colors.white, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 3, zIndex: container ? "10" : "9999", children: onlytext ? (_jsx(Text, { fontSize: "3.125rem", textTransform: "uppercase", fontWeight: 500, animation: `${pulse} 2s ease-in-out infinite`, sx: reducedMotionSx(), children: text })) : (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg", color: colors.white, label: text ? "" : "Loading" }), text && _jsx(Text, { fontSize: "0.875rem", children: text })] })) }));
 }

package/dist/esm/Components/MediaViewer/MediaViewer.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useEffect, useRef, useState } from "react";
+import { Box, Flex, Heading, Text, VisuallyHidden } from "@chakra-ui/react";
+import { Check, ChevronLeft, ChevronRight, Copy, Download, ExternalLink, X } from "lucide-react";
+import { format } from "date-fns";
+import Modal, { ModalBody } from "../Modal/Modal.js";
+import { useViewerChrome } from "./useViewerChrome.js";
+import ViewerIconButton from "./components/ViewerIconButton.js";
+import VideoPoster from "./components/VideoPoster.js";
+import TileChip from "./components/TileChip.js";
+import MediaImageViewer from "./components/MediaImageViewer.js";
+import MediaVideoPlayer from "./components/MediaVideoPlayer.js";
+import MediaAudioPlayer from "./components/MediaAudioPlayer.js";
+import MediaDocumentStage from "./components/MediaDocumentStage.js";
+import { iconForKind } from "./components/mediaKindIcon.js";
+import { fileTypeLabel, formatFileSize, isTypingTarget, isUnsupportedImageSrc, isUnsupportedVideoSrc, mediaLink, wrapIndex, youtubeEmbed, youtubeWatch, } from "./mediaItems.js";
+import { defaultMediaViewerLabels } from "./MediaViewerProps.js";
+import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+const SWIPE_MIN_PX = 50;
+const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
+const COPIED_FEEDBACK_MS = 1500;
+const DOCUMENT_KINDS = new Set(["pdf", "doc", "text", "spreadsheet", "presentation", "archive", "file"]);
+const isDocumentKind = (kind) => DOCUMENT_KINDS.has(kind);
+const KIND_LABEL_KEY = {
+    video: "kindVideo",
+    youtube: "kindYoutube",
+    pdf: "kindPdf",
+    doc: "kindDoc",
+    file: "kindFile",
+    audio: "kindAudio",
+    text: "kindText",
+    spreadsheet: "kindSpreadsheet",
+    presentation: "kindPresentation",
+    archive: "kindArchive",
+};
+/** Full-viewport lightbox: stage switches by item kind, with filmstrip + keyboard/swipe navigation. */
+const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultIndex, title, resolveDocument, labels: labelOverrides, imageLabels, videoLabels, audioLabels, documentLabels, }) => {
+    const labels = { ...defaultMediaViewerLabels, ...labelOverrides };
+    const isIndexControlled = index !== undefined;
+    const [uncontrolledIndex, setUncontrolledIndex] = useState(defaultIndex !== null && defaultIndex !== void 0 ? defaultIndex : 0);
+    const activeIndex = isIndexControlled ? index : uncontrolledIndex;
+    if (process.env.NODE_ENV !== "production" && isIndexControlled && !onIndexChange) {
+        console.warn("MediaViewer: index is set without onIndexChange, so navigation cannot move past it.");
+    }
+    const latestIndex = useRef(0);
+    const setIndex = (next) => {
+        latestIndex.current = next;
+        onIndexChange === null || onIndexChange === void 0 ? void 0 : onIndexChange(next);
+        if (!isIndexControlled)
+            setUncontrolledIndex(next);
+    };
+    const chrome = useViewerChrome();
+    const stageRef = useRef(null);
+    const stripRef = useRef(null);
+    const [videoAt, setVideoAt] = useState(0);
+    const [imageZoom, setImageZoom] = useState(100);
+    const [copied, setCopied] = useState(false);
+    const [filmstripOverflows, setFilmstripOverflows] = useState(false);
+    const touchStart = useRef(null);
+    const total = items.length;
+    const safeIndex = total === 0 ? 0 : wrapIndex(activeIndex, total);
+    const item = items[safeIndex];
+    // NOTE: several arrow presses land in one tick; relative moves must compose, not restate.
+    latestIndex.current = safeIndex;
+    const go = useRef((delta) => void delta);
+    go.current = (delta) => {
+        if (total <= 1)
+            return;
+        setVideoAt(0);
+        setIndex(wrapIndex(latestIndex.current + delta, total));
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        const onKeyDown = (event) => {
+            var _a, _b;
+            if (event.ctrlKey || event.metaKey || event.altKey || isTypingTarget(event.target))
+                return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            const claimedByVideo = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, "[data-media-video-shell]");
+            if (claimedByVideo)
+                return;
+            go.current(event.key === "ArrowLeft" ? -1 : 1);
+            event.preventDefault();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        return () => window.removeEventListener("keydown", onKeyDown);
+    }, [isOpen]);
+    useEffect(() => {
+        var _a;
+        const active = (_a = stripRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[aria-current="true"]');
+        active === null || active === void 0 ? void 0 : active.scrollIntoView({ block: "nearest", inline: "center" });
+    }, [safeIndex, isOpen]);
+    useEffect(() => {
+        if (!isOpen)
+            return undefined;
+        let observer;
+        let rafId;
+        // Modal mounts its portaled content a tick after isOpen flips, so stripRef.current can still be null here.
+        const attach = () => {
+            const el = stripRef.current;
+            if (!el) {
+                rafId = requestAnimationFrame(attach);
+                return;
+            }
+            const check = () => setFilmstripOverflows(el.scrollWidth > el.clientWidth + 1);
+            check();
+            if (typeof ResizeObserver === "undefined")
+                return;
+            observer = new ResizeObserver(check);
+            observer.observe(el);
+        };
+        attach();
+        return () => {
+            if (rafId !== undefined)
+                cancelAnimationFrame(rafId);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [items, isOpen]);
+    useEffect(() => {
+        setCopied(false);
+    }, [safeIndex]);
+    if (!item)
+        return null;
+    const canSwipe = total > 1 && (item.kind !== "image" || imageZoom <= 100);
+    const onTouchStart = (event) => {
+        const target = event.target;
+        if (event.touches.length !== 1 || target.closest(NO_SWIPE_ZONE)) {
+            touchStart.current = null;
+            return;
+        }
+        touchStart.current = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+    };
+    const onTouchMove = (event) => {
+        if (event.touches.length > 1)
+            touchStart.current = null;
+    };
+    const onTouchEnd = (event) => {
+        const start = touchStart.current;
+        touchStart.current = null;
+        if (!start || !canSwipe)
+            return;
+        const touch = event.changedTouches[0];
+        const dx = touch.clientX - start.x;
+        const dy = touch.clientY - start.y;
+        if (Math.abs(dx) > SWIPE_MIN_PX && Math.abs(dx) > Math.abs(dy))
+            go.current(dx < 0 ? 1 : -1);
+    };
+    const copyLink = async () => {
+        try {
+            await navigator.clipboard.writeText(mediaLink(item, videoAt));
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+        }
+        catch {
+            setCopied(false);
+        }
+    };
+    const kindLabelKey = KIND_LABEL_KEY[item.kind];
+    const renderStage = () => {
+        var _a, _b, _c, _d;
+        if (item.kind === "image") {
+            return (_jsx(MediaImageViewer, { item: item, label: (_a = item.name) !== null && _a !== void 0 ? _a : title, onZoomChange: setImageZoom, labels: imageLabels }, item.key));
+        }
+        if (isDocumentKind(item.kind)) {
+            if (!resolveDocument) {
+                throw new Error("MediaViewer: resolveDocument is required when items include a pdf/doc/text/spreadsheet/presentation/archive/file item");
+            }
+            return (_jsx(MediaDocumentStage, { item: item, label: (_b = item.name) !== null && _b !== void 0 ? _b : title, resolveDocument: resolveDocument, labels: documentLabels }, item.key));
+        }
+        if (item.kind === "video") {
+            return (_jsx(MediaVideoPlayer, { item: item, label: (_c = item.name) !== null && _c !== void 0 ? _c : title, onTimeChange: setVideoAt, onPrevious: total > 1 ? () => go.current(-1) : undefined, onNext: total > 1 ? () => go.current(1) : undefined, labels: videoLabels }, item.key));
+        }
+        if (item.kind === "audio") {
+            return (_jsx(MediaAudioPlayer, { item: item, label: (_d = item.name) !== null && _d !== void 0 ? _d : title, onTimeChange: setVideoAt, labels: audioLabels }, item.key));
+        }
+        return (_jsx(Box, { as: "iframe", position: "absolute", inset: 0, src: youtubeEmbed(item.src), title: labels.youtubeTitle, border: "none", allowFullScreen: true }, item.key));
+    };
+    const meta = (() => {
+        const type = fileTypeLabel(item.src);
+        const parts = [type, item.fileSize ? formatFileSize(item.fileSize) : null].filter(Boolean);
+        const uploaded = item.uploadedAt ? labels.uploadedOn(format(new Date(item.uploadedAt), "MMM d, yyyy")) : null;
+        return [parts.join(" · "), uploaded].filter(Boolean).join(" — ");
+    })();
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, initialFocusRef: stageRef, contentProps: { bg: chrome.stage, m: 0, borderRadius: 0 }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [total > 1 && (_jsx(VisuallyHidden, { "aria-live": "polite", children: labels.nowShowing(safeIndex + 1, total) })), _jsxs(Flex, { align: "center", gap: 2, px: 4, py: 3, bg: chrome.raised, color: chrome.ink, "data-testid": "media-viewer-header", children: [_jsx(Heading, { as: "h2", size: "sm", noOfLines: 1, color: chrome.ink, children: title }), total > 1 && (_jsx(Text, { as: "span", color: chrome.muted, fontSize: "sm", "data-testid": "media-viewer-counter", children: labels.counter(safeIndex + 1, total) })), kindLabelKey && (_jsx(Text, { as: "span", px: 2, py: 0.5, borderRadius: "4px", bg: chrome.hover, color: chrome.ink, fontSize: "xs", fontWeight: 600, children: labels[kindLabelKey] })), _jsx(Flex, { flex: 1 }), item.kind === "youtube" ? (_jsx(ViewerIconButton, { label: labels.openOnYoutube, icon: _jsx(ExternalLink, { size: 16 }), href: youtubeWatch(item.src) })) : (_jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 16 }), href: item.src })), _jsx(ViewerIconButton, { label: copied ? labels.copied : labels.copyLink, icon: _jsx(Copy, { size: 16 }), onClick: copyLink, testId: "media-viewer-copy-link" }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 18 }), onClick: onClose, testId: "media-viewer-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, position: "relative", minH: 0, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, "data-testid": "media-viewer-stage", children: [renderStage(), total > 1 && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", top: "50%", left: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 24 }), onClick: () => go.current(-1), round: true, testId: "media-viewer-prev" }) }), _jsx(Box, { position: "absolute", top: "50%", right: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 24 }), onClick: () => go.current(1), round: true, testId: "media-viewer-next" }) })] }))] }), _jsxs(Box, { bg: chrome.raised, py: 3, minW: 0, children: [meta && (_jsx(Text, { fontSize: "xs", color: chrome.muted, mb: 2, px: 4, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", title: meta, children: meta })), total > 1 && (_jsx(Flex, { as: "nav", "aria-label": labels.filmstrip, ref: stripRef, gap: 2, px: 4, overflowX: "auto", justifyContent: filmstripOverflows ? "flex-start" : "center", "data-testid": "media-viewer-filmstrip", children: items.map((tile, i) => {
+                                const isSelected = i === safeIndex;
+                                const showPoster = tile.kind === "video" && !isUnsupportedVideoSrc(tile.src);
+                                const showThumb = !showPoster && tile.thumb && !(tile.kind === "image" && isUnsupportedImageSrc(tile.src));
+                                const extLabel = fileTypeLabel(tile.src);
+                                return (_jsxs(Box, { as: "button", type: "button", onClick: () => setIndex(i), "aria-current": isSelected, "aria-label": `${tile.kind} ${tile.ordinal}`, position: "relative", flexShrink: 0, w: "112px", h: "70px", borderRadius: "10px", overflow: "hidden", bg: chrome.track, opacity: isSelected ? 1 : 0.85, boxShadow: isSelected
+                                        ? `0 0 0 2px ${chrome.accentGlow(0.9)}, 0 0 12px 2px ${chrome.accentGlow(0.45)}`
+                                        : "none", transition: "box-shadow 0.15s ease, opacity 0.15s ease", _hover: { opacity: 1 }, children: [showPoster ? (_jsx(VideoPoster, { item: tile })) : showThumb ? (_jsx(Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: cloneElement(iconForKind(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && _jsx(TileChip, { place: "br", children: extLabel })] })), isSelected && (_jsx(Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: _jsx(Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
+                            }) }))] })] }) }));
+};
+export default MediaViewer;

package/dist/esm/Components/MediaViewer/MediaViewerProps.js

@@ -0,0 +1,29 @@
+export const defaultMediaViewerLabels = {
+    close: "Close viewer",
+    copyLink: "Copy link",
+    copied: "Link copied",
+    counter: (current, total) => `${current} / ${total}`,
+    download: "Download",
+    filmstrip: "All media",
+    kindDoc: "Word document",
+    kindFile: "File",
+    kindPdf: "PDF",
+    kindVideo: "Video",
+    kindYoutube: "YouTube",
+    kindAudio: "Audio",
+    kindText: "Text",
+    kindSpreadsheet: "Spreadsheet",
+    kindPresentation: "Presentation",
+    kindArchive: "Archive",
+    next: "Next",
+    openOnYoutube: "Open on YouTube",
+    photoCount: (count) => `${count} photo${count === 1 ? "" : "s"}`,
+    videoCount: (count) => `${count} video${count === 1 ? "" : "s"}`,
+    documentCount: (count) => `${count} document${count === 1 ? "" : "s"}`,
+    youtubeCount: (count) => `${count} YouTube link${count === 1 ? "" : "s"}`,
+    previous: "Previous",
+    shortcuts: "Keyboard shortcuts",
+    nowShowing: (current, total) => `Showing item ${current} of ${total}`,
+    uploadedOn: (date) => `Uploaded · ${date}`,
+    youtubeTitle: "YouTube video",
+};