pixelize-design-library 2.4.2-beta.61 → 2.4.2-beta.63

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

@@ -7,6 +7,7 @@ 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";
@@ -16,6 +17,7 @@ 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";
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 const CARD_LABEL_EXCLUDE = ["id", "details"];
@@ -33,21 +35,31 @@ const MIN_LIST_HEIGHT = 120;
 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))) }) }));
+const CardSkeleton = ({ colors, rows }) => (_jsx(Box, { "data-testid": "kanban-card-skeleton", borderRadius: "lg", bg: colors.background[50], border: `${BORDER_WIDTHS.hairline} 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 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 { colors: rowColors } = useCustomTheme();
-    const { items, colId, canDrag, expanded, onDelete, onOpen, canDelete, setSize, toggleExpand } = data;
+    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(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) }) }) }));
+    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) {
@@ -97,20 +109,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 [adoptedColumns, setAdoptedColumns] = useState(mergedColumns);
     const [viewportHeight, setViewportHeight] = useState(600);
     const [measuredHeight, setMeasuredHeight] = useState(0);
-    const [hoveredColumn, setHoveredColumn] = useState(null);
-    useEffect(() => {
+    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);
@@ -291,14 +304,12 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     // 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;
@@ -365,15 +376,14 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     }, [columns, onColumnDelete]);
     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)) {
@@ -384,28 +394,25 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     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)) }));
+                    }, 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: `0.063rem ${snapshot.isDraggingOver ? "dashed" : "solid"} ${snapshot.isDraggingOver
+                        : colors.background[100], border: `${BORDER_WIDTHS.hairline} ${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) => {
+                        : colors.boxborder[200]}`, 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))
-                            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: {
+                            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: "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: {
+                                            }, 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: 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: `${BORDER_WIDTHS.hairline} 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: "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",
@@ -415,10 +422,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
                                         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] }))] }))] }));
+                                        (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)
@@ -426,7 +430,20 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
     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: 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 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: (e) => {
+            if (e.key !== "Enter" && e.key !== " ")
+                return;
+            e.preventDefault();
+            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) {
@@ -437,7 +454,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         }
         return renderColumnDroppable(colId, column, null, isColCollapsed);
     });
-    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] }))] }) })] }));
+    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 ${colors.boxborder[200]}`, flexShrink: 0, alignSelf: "flex-start", overflow: "hidden", children: [_jsxs(Flex, { h: "2.75rem", align: "center", gap: 2, px: 3, borderBottom: `${BORDER_WIDTHS.hairline} 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] }, ...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,6 @@
 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);
@@ -24,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/Kbd/Kbd.js

@@ -16,7 +16,7 @@ export const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone
 /** 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: "0.6875rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+    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 }));
 };
 export const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
     const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);

package/dist/esm/Components/LimitReachedModal/LimitReachedModal.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, {}), _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() }))] }) })] })] }));
+    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/Loading/Loading.js

@@ -19,5 +19,5 @@ export default function Loading({ text, isLoading, onlytext, container, variant
     if (!isLoading) {
         return null;
     }
-    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 })] })) }));
+    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: "sm", children: text })] })) }));
 }

package/dist/esm/Components/MediaGallery/MediaGallery.js

@@ -6,7 +6,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
-import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { focusVisibleStyles, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 import Skeletons from "../Skeletons/Skeletons.js";
 import MediaFrame from "./MediaFrame.js";
 import MediaThumb from "./MediaThumb.js";
@@ -174,7 +174,7 @@ const MediaGallery = ({ media, layout = "auto", aspectRatio = "4/5", zoom = "lig
     const thumbRing = { gap: colors.background[50], ink: colors.header[900] };
     const thumbs = (width, height) => frames.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, count, frame.alt), selected: position === current, onSelect: () => commit(position), width: width, height: height, ring: thumbRing }, frame.id)));
     const glassDots = glassStyles(colors);
-    const focusInset = { outline: "2px solid transparent", boxShadow: `inset 0 0 0 2px ${colors.focusRing.halo}, inset 0 0 0 4px ${colors.focusRing.ring}` };
+    const focusInset = { outline: "2px solid transparent", boxShadow: insetFocusRingShadow(colors) };
     const well = (_jsxs(Box, { position: "relative", flex: 1, minW: 0, overflow: "hidden", isolation: "isolate", borderRadius: radius, bg: colors.background[100], sx: { aspectRatio: ratio }, "data-testid": "media-gallery-well", children: [_jsxs(Flex, { ref: trackRef, position: "absolute", inset: 0, tabIndex: 0, role: "group", "aria-label": labels.region, overflowX: "auto", overflowY: "hidden", animation: fadeKey > 0 ? fadeIn(CROSSFADE_MS) : undefined, onScroll: onScroll, onPointerDown: () => {
                     settling.current = null;
                 }, outline: "none", _focusVisible: focusInset, sx: {

package/dist/esm/Components/MediaGallery/MediaLightbox.js

@@ -9,6 +9,7 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { overlayScrim } from "../../Theme/tokens/builders/scrim.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
 import { reducedMotionSx, usePrefersReducedMotion } from "../../Theme/chakra/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import MediaFrame from "./MediaFrame.js";
 import MediaThumb from "./MediaThumb.js";
 import { fadeIn } from "./motion.js";
@@ -71,7 +72,7 @@ const MediaLightbox = ({ isOpen, onClose, items, index, defaultIndex = 0, onInde
         return null;
     const alt = (_a = item.alt) !== null && _a !== void 0 ? _a : labels.image(current + 1, total);
     const bar = { bg: overlayScrim(colors), color: chrome.ink };
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: overlayScrim(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: { fontVariantNumeric: "tabular-nums" }, children: labels.counter(current + 1, total) }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, motionPreset: reduced ? "none" : "scale", initialFocusRef: stageRef, finalFocusRef: finalFocusRef, overlaybg: overlayScrim(colors), contentProps: { bg: chrome.stage, m: 0, borderRadius: 0, "aria-label": labels.dialog }, children: _jsxs(ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: fullViewportHeight, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: 2, px: 4, py: 2, ...bar, "data-testid": "media-lightbox-bar", children: [_jsx(Text, { as: "span", fontSize: "sm", fontWeight: 600, "aria-live": "polite", sx: NUMERIC_TEXT, children: labels.counter(current + 1, total) }), _jsx(ViewerIconButton, { label: labels.close, icon: _jsx(X, { size: 20, "aria-hidden": true }), onClick: onClose, testId: "media-lightbox-close" })] }), _jsxs(Box, { ref: stageRef, tabIndex: -1, flex: 1, minH: 0, position: "relative", outline: "none", onKeyDown: onKeyDown, onTouchStart: (event) => {
                         touchStartX.current = event.touches.length === 1 ? event.touches[0].clientX : null;
                     }, onTouchEnd: onTouchEnd, "data-testid": "media-lightbox-stage", children: [_jsx(Box, { position: "absolute", inset: { base: 0, md: 6 }, animation: fadeIn(), sx: reducedMotionSx(), children: _jsx(MediaFrame, { media: item, alt: alt, fit: "contain", autoPlay: true, surface: "transparent", playLabel: labels.playVideo, unavailableLabel: labels.imageUnavailable }) }, item.id), total > 1 && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 24, "aria-hidden": true }), onClick: () => go(current - 1), isDisabled: current === 0, round: true, testId: "media-lightbox-prev" }) }), _jsx(Box, { position: "absolute", right: { base: 2, md: 4 }, top: "calc(50% - 20px)", zIndex: 2, children: _jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 24, "aria-hidden": true }), onClick: () => go(current + 1), isDisabled: current === total - 1, round: true, testId: "media-lightbox-next" }) })] }))] }), total > 1 && (_jsx(Flex, { as: "nav", "aria-label": labels.thumbnails, ...bar, py: 3, px: 4, justify: "center", children: _jsx(Flex, { ref: stripRef, gap: 3, p: "4px", maxW: "100%", overflowX: "auto", onKeyDown: onKeyDown, "data-testid": "media-lightbox-thumbs", children: items.map((frame, position) => (_jsx(MediaThumb, { media: frame, label: labels.frame(position + 1, total, frame.alt), selected: position === current, onSelect: () => go(position), width: 56, height: 70, ring: { gap: chrome.stage, ink: chrome.ink }, surface: chrome.raised }, frame.id))) }) }))] }) }));
 };

package/dist/esm/Components/MediaGallery/glass.js

@@ -4,6 +4,7 @@ import { Box, Flex } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 const GLASS_ALPHA = 0.72;
@@ -38,5 +39,5 @@ GlassIconButton.displayName = "GlassIconButton";
 export const GlassPill = ({ children, height = 28, ...placement }) => {
     const { colors } = useCustomTheme();
     const glass = glassStyles(colors);
-    return (_jsx(Flex, { align: "center", gap: 1.5, h: `${height}px`, px: 3, borderRadius: "full", position: "absolute", fontSize: "xs", fontWeight: 600, pointerEvents: "none", whiteSpace: "nowrap", ...glass, sx: { ...glass.sx, fontVariantNumeric: "tabular-nums" }, ...placement, children: children }));
+    return (_jsx(Flex, { align: "center", gap: 1.5, h: `${height}px`, px: 3, borderRadius: "full", position: "absolute", fontSize: "xs", fontWeight: 600, pointerEvents: "none", whiteSpace: "nowrap", ...glass, sx: { ...glass.sx, ...NUMERIC_TEXT }, ...placement, children: children }));
 };

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

@@ -183,7 +183,7 @@ const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultInde
         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) => {
+    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: "base", 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));

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

@@ -5,7 +5,7 @@ import { ChevronDown, Download, Music, Pause, Play, SkipBack, SkipForward, Volum
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
 import { formatClock, isTypingTarget, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
 import { useViewerChrome } from "../useViewerChrome.js";
-import MediaScrubber from "./MediaScrubber.js";
+import { TimelineClock, TimelineScrubber, usePlaybackTimeline } from "./PlaybackTimeline.js";
 import MediaStatusPanel from "./MediaStatusPanel.js";
 import ViewerIconButton from "./ViewerIconButton.js";
 import { defaultMediaAudioPlayerLabels } from "./MediaAudioPlayerProps.js";
@@ -17,7 +17,7 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
     const shellRef = useRef(null);
     const audioRef = useRef(null);
     const [playing, setPlaying] = useState(false);
-    const [current, setCurrent] = useState(0);
+    const timeline = usePlaybackTimeline();
     const [duration, setDuration] = useState(0);
     const [volume, setVolume] = useState(1);
     const [muted, setMuted] = useState(false);
@@ -42,7 +42,7 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
             return;
         const max = Number.isFinite(a.duration) ? a.duration : seconds;
         a.currentTime = Math.min(max, Math.max(0, seconds));
-        setCurrent(a.currentTime);
+        timeline.set(a.currentTime);
     };
     const seekBy = (delta) => { var _a, _b; return seekTo(((_b = (_a = audio()) === null || _a === void 0 ? void 0 : _a.currentTime) !== null && _b !== void 0 ? _b : 0) + delta); };
     const toggleMute = () => {
@@ -109,25 +109,25 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
     }, []);
     useEffect(() => {
         setPlaying(false);
-        setCurrent(0);
+        timeline.set(0);
         setDuration(0);
         setRate(1);
         setFailed(false);
         setBuffered([]);
         if (audioRef.current)
             audioRef.current.playbackRate = 1;
-    }, [item.key]);
+    }, [item.key, timeline]);
     const clock = (seconds) => formatClock(seconds);
     const effectiveVolume = muted ? 0 : Math.round(volume * 100);
     return (_jsxs(Box, { ref: shellRef, as: "section", "aria-label": `${labels.audioPlayer}: ${label}`, position: "absolute", inset: 0, bg: chrome.stage, children: [_jsx("audio", { ref: audioRef, src: item.src, preload: "metadata", onPlay: () => setPlaying(true), onPause: () => setPlaying(false), onEnded: () => setPlaying(false), onError: () => setFailed(true), onProgress: (e) => {
                     const ranges = e.currentTarget.buffered;
                     setBuffered(Array.from({ length: ranges.length }, (_, i) => ({ start: ranges.start(i), end: ranges.end(i) })));
                 }, onTimeUpdate: (e) => {
-                    setCurrent(e.currentTarget.currentTime);
+                    timeline.set(e.currentTarget.currentTime);
                     onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(e.currentTarget.currentTime);
                 }, onLoadedMetadata: (e) => setDuration(e.currentTarget.duration), onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
                     setVolume(e.currentTarget.volume);
                     setMuted(e.currentTarget.muted);
-                }, "data-testid": "media-audio" }), failed ? (_jsx(MediaStatusPanel, { icon: _jsx(VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : (_jsxs(Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [_jsx(Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: _jsx(Music, { size: 48, "aria-hidden": true }) }), _jsx(Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), _jsxs(Box, { w: "100%", maxW: "480px", children: [_jsx(MediaScrubber, { value: Math.min(current, duration || current), max: duration > 0 ? duration : 0, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: duration <= 0, testId: "media-audio-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }), onClick: togglePlay, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: _jsx(SkipBack, { size: 16 }), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: _jsx(SkipForward, { size: 16 }), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-audio-forward" }), _jsxs(Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [_jsx(ViewerIconButton, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? _jsx(VolumeX, { size: 18 }) : _jsx(Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-audio-mute" }), _jsx(Box, { w: volumeHover ? "88px" : "0px", overflow: "hidden", px: volumeHover ? 1 : 0, transition: "width 0.2s ease-out", sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: _jsxs(Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [_jsx(SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: _jsx(SliderFilledTrack, { bg: chrome.ink }) }), _jsx(SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), _jsxs(Text, { as: "span", ml: 2, fontSize: "sm", fontWeight: 500, color: chrome.ink, sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": "media-audio-time", children: [clock(current), _jsx(Text, { as: "span", color: chrome.muted, children: ` / ${clock(duration)}` })] })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsxs(Menu, { placement: "top-end", children: [_jsx(MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-speed", children: _jsxs(Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, _jsx(ChevronDown, { size: 14, "aria-hidden": true })] }) }), _jsx(MenuList, { minW: "160px", bg: chrome.raised, zIndex: 1500, children: _jsx(MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: PLAYBACK_SPEEDS.map((speed) => (_jsx(MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
+                }, "data-testid": "media-audio" }), failed ? (_jsx(MediaStatusPanel, { icon: _jsx(VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : (_jsxs(Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [_jsx(Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: _jsx(Music, { size: 48, "aria-hidden": true }) }), _jsx(Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), _jsxs(Box, { w: "100%", maxW: "480px", children: [_jsx(TimelineScrubber, { timeline: timeline, duration: duration, buffered: buffered, onSeek: seekTo, ariaLabel: labels.seek, ariaValueText: (v) => labels.seekValue(clock(v), clock(duration)), formatTime: clock, isDisabled: duration <= 0, testId: "media-audio-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? _jsx(Pause, { size: 20 }) : _jsx(Play, { size: 20 }), onClick: togglePlay, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: _jsx(SkipBack, { size: 16 }), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: _jsx(SkipForward, { size: 16 }), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-audio-forward" }), _jsxs(Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [_jsx(ViewerIconButton, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? _jsx(VolumeX, { size: 18 }) : _jsx(Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-audio-mute" }), _jsx(Box, { w: volumeHover ? "88px" : "0px", overflow: "hidden", px: volumeHover ? 1 : 0, transition: "width 0.2s ease-out", sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: _jsxs(Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [_jsx(SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: _jsx(SliderFilledTrack, { bg: chrome.ink }) }), _jsx(SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), _jsx(TimelineClock, { timeline: timeline, duration: duration, testId: "media-audio-time" })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsxs(Menu, { placement: "top-end", children: [_jsx(MenuButton, { "aria-label": labels.speed, h: "32px", px: 3, borderRadius: "full", borderWidth: "1px", borderColor: chrome.track, bg: chrome.raised, color: chrome.ink, fontSize: "sm", fontWeight: 600, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": "media-audio-speed", children: _jsxs(Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, _jsx(ChevronDown, { size: 14, "aria-hidden": true })] }) }), _jsx(MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: _jsx(MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: PLAYBACK_SPEEDS.map((speed) => (_jsx(MenuItemOption, { value: String(speed), bg: chrome.raised, color: chrome.ink, _hover: { bg: chrome.hover }, _focus: { bg: chrome.hover }, children: speed === 1 ? `1x - ${labels.normalSpeed}` : `${speed}x` }, speed))) }) })] }), _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
 };
 export default MediaAudioPlayer;

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

@@ -93,6 +93,6 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
     return (_jsxs(Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", p: { base: 2, md: 6 }, pb: { base: 20, md: 24 }, cursor: zoom > 100 ? (dragging ? "grabbing" : "grab") : "default", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, sx: { touchAction: zoom > 100 ? "none" : "pan-y" }, children: failed ? (_jsx(MediaStatusPanel, { icon: warningIcon(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : (_jsx(Image, { src: item.src, alt: label, maxW: "100%", maxH: "100%", objectFit: "contain", draggable: false, userSelect: "none", onError: () => setFailed(true), onLoad: (event) => onNaturalSize === null || onNaturalSize === void 0 ? void 0 : onNaturalSize({
                         width: event.currentTarget.naturalWidth,
                         height: event.currentTarget.naturalHeight,
-                    }), transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`, transition: dragging ? "none" : "transform 0.15s ease-out", "data-testid": "media-image" })) }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.imageControls, position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", align: "center", gap: 1, p: 1, borderRadius: "12px", bg: chrome.raised, borderWidth: "1px", borderColor: chrome.hover, maxW: "calc(100% - 16px)", overflowX: "auto", children: [_jsx(ViewerIconButton, { label: labels.zoomOut, hint: "-", icon: _jsx(ZoomOut, { size: 18 }), onClick: () => zoomBy(-ZOOM_STEP), isDisabled: zoom <= MIN_ZOOM, testId: "media-zoom-out" }), _jsx(Text, { as: "output", "aria-live": "polite", "aria-label": labels.zoomLevel, minW: "56px", textAlign: "center", fontSize: "sm", fontWeight: 600, color: chrome.ink, "data-testid": "media-zoom-level", children: `${zoom}%` }), _jsx(ViewerIconButton, { label: labels.zoomIn, hint: "+", icon: _jsx(ZoomIn, { size: 18 }), onClick: () => zoomBy(ZOOM_STEP), isDisabled: zoom >= MAX_ZOOM, testId: "media-zoom-in" }), _jsx(ViewerIconButton, { label: labels.fitLabel, hint: "0", icon: _jsx(Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), _jsx(Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), _jsx(ViewerIconButton, { label: labels.rotate, hint: "R", icon: _jsx(RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
+                    }), style: { transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)` }, transition: dragging ? "none" : "transform 0.15s ease-out", "data-testid": "media-image" })) }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.imageControls, position: "absolute", bottom: 4, left: "50%", transform: "translateX(-50%)", align: "center", gap: 1, p: 1, borderRadius: "xl", bg: chrome.raised, borderWidth: "1px", borderColor: chrome.hover, maxW: "calc(100% - 16px)", overflowX: "auto", children: [_jsx(ViewerIconButton, { label: labels.zoomOut, hint: "-", icon: _jsx(ZoomOut, { size: 18 }), onClick: () => zoomBy(-ZOOM_STEP), isDisabled: zoom <= MIN_ZOOM, testId: "media-zoom-out" }), _jsx(Text, { as: "output", "aria-live": "polite", "aria-label": labels.zoomLevel, minW: "56px", textAlign: "center", fontSize: "sm", fontWeight: 600, color: chrome.ink, "data-testid": "media-zoom-level", children: `${zoom}%` }), _jsx(ViewerIconButton, { label: labels.zoomIn, hint: "+", icon: _jsx(ZoomIn, { size: 18 }), onClick: () => zoomBy(ZOOM_STEP), isDisabled: zoom >= MAX_ZOOM, testId: "media-zoom-in" }), _jsx(ViewerIconButton, { label: labels.fitLabel, hint: "0", icon: _jsx(Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), _jsx(Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), _jsx(ViewerIconButton, { label: labels.rotate, hint: "R", icon: _jsx(RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? (_jsx(ViewerIconButton, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? _jsx(Minimize, { size: 18 }) : _jsx(Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
 };
 export default MediaImageViewer;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
 import { useViewerChrome } from "../useViewerChrome.js";
 const STEP_SECONDS = 5;
 const BIG_STEP_SECONDS = 30;
@@ -82,6 +83,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, children: [previewLabel !== null ? (_jsx(Box, { position: "absolute", bottom: "100%", left: `${previewX}%`, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "4px", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: { fontVariantNumeric: "tabular-nums" }, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, _jsxs(Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: "height 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => (_jsx(Box, { position: "absolute", top: 0, bottom: 0, left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`, width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`, bg: chrome.hover, borderRadius: "full" }, i))), _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: 0, width: `${fraction * 100}%`, bg: chrome.accent, borderRadius: "full" }), _jsx(Box, { position: "absolute", top: "50%", left: `${fraction * 100}%`, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
+        }, children: [previewLabel !== null ? (_jsx(Box, { position: "absolute", bottom: "100%", style: { left: `${previewX}%` }, transform: "translateX(-50%)", mb: 1, px: 2, py: 0.5, borderRadius: "base", bg: chrome.raised, color: chrome.ink, fontSize: "xs", fontWeight: 600, whiteSpace: "nowrap", pointerEvents: "none", sx: NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, _jsxs(Box, { ref: trackRef, role: "slider", tabIndex: disabled ? -1 : 0, "aria-label": ariaLabel, "aria-orientation": "horizontal", "aria-valuemin": 0, "aria-valuemax": disabled ? 0 : max, "aria-valuenow": disabled ? 0 : value, "aria-valuetext": disabled ? undefined : ariaValueText(value), "aria-disabled": disabled || undefined, position: "relative", h: trackH, borderRadius: "full", bg: chrome.track, transition: "height 0.12s ease-out", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, children: [buffered.map((range, i) => (_jsx(Box, { position: "absolute", top: 0, bottom: 0, style: {
+                            left: `${disabled ? 0 : clamp(range.start / max, 0, 1) * 100}%`,
+                            width: `${disabled ? 0 : (clamp(range.end / max, 0, 1) - clamp(range.start / max, 0, 1)) * 100}%`,
+                        }, bg: chrome.hover, borderRadius: "full" }, i))), _jsx(Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), _jsx(Box, { position: "absolute", top: "50%", style: { left: `${fraction * 100}%` }, transform: "translate(-50%, -50%)", boxSize: hovering || dragging.current ? "14px" : "0px", borderRadius: "full", bg: chrome.ink, transition: "width 0.12s ease-out, height 0.12s ease-out", pointerEvents: "none" })] })] }));
 };
 export default MediaScrubber;