pixelize-design-library 2.4.2-beta.64 → 2.4.2-beta.66

package/dist/esm/Components/FormField/FormField.js

@@ -47,6 +47,6 @@ const FormField = forwardRef(function FormField({ label, id, isRequired = false,
                 columnGap: 4,
                 alignItems: "start",
             }
-            : {}), children: [_jsx(Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [_jsx(Box, { as: "span", children: label }), isRequired && (_jsx(Box, { as: "span", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(Box, { minW: 0, children: wired }), message && _jsx(Box, { gridColumn: { md: 2 }, children: message })] })) : (_jsxs(_Fragment, { children: [wired, message] }))] }));
+            : {}), children: [_jsx(Box, { as: "label", id: ids.labelId, htmlFor: ids.inputId, ...labelStyles, display: "block", ...(isHorizontal ? { alignSelf: { md: "center" }, mb: { base: labelStyles.mb, md: 0 } } : {}), children: _jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [_jsx(Box, { as: "span", children: label }), isRequired && (_jsx(Box, { as: "span", "aria-hidden": "true", color: colors.semanticText.error, ml: "0.125rem", children: "*" }))] }) }), isHorizontal ? (_jsxs(_Fragment, { children: [_jsx(Box, { minW: 0, children: wired }), message && _jsx(Box, { gridColumn: { md: 2 }, children: message })] })) : (_jsxs(_Fragment, { children: [wired, message] }))] }));
 });
 export default FormField;

package/dist/esm/Components/Header/Header.js

@@ -36,6 +36,6 @@ const Header = ({ logo, menuItems, rightSlot, active, colors, boxShadow, onMobil
     const rightSlotWithApi = React.isValidElement(rightSlot)
         ? React.cloneElement(rightSlot, { closeMobileMenu })
         : rightSlot;
-    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [_jsxs(Flex, { h: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
+    return (_jsxs(Box, { bg: bg, color: color, px: 4, shadow: "md", boxShadow: boxShadow, zIndex: "sticky", position: "sticky", top: 0, children: [_jsxs(Flex, { minH: HEADER_HEIGHT, align: "center", mx: "auto", justifyContent: "flex-start", children: [_jsxs(HStack, { spacing: 6, align: "center", children: [_jsx(Box, { cursor: "pointer", children: logo }), _jsx(DesktopMenu, { menuItems: menuItems, rightSlot: rightSlotWithApi, setHoveredMenu: setHoveredMenu, isActive: isActive, activeBg: activeBg, hoveredMenu: hoveredMenu, hoverBg: hoverBg, color: color, hoverTextColor: hoverText, surface: bg })] }), _jsx(Spacer, {}), _jsxs(HStack, { spacing: 3, align: "center", children: [_jsx(HStack, { spacing: { base: 2, md: 4 }, children: rightSlotWithApi }), _jsx(IconButton, { variant: "unstyled", icon: _jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", w: "full", h: "full", children: isOpen ? _jsx(X, { size: 20 }) : _jsx(MenuIcon, { size: 20 }) }), "aria-label": "Toggle Menu", display: { md: "none" }, onClick: isOpen ? closeMobileMenu : onOpen })] })] }), _jsx(MobileMenu, { menuItems: menuItems, isOpen: isOpen, isActive: isActive, hoverBg: hoverBg, activeBg: activeBg, color: color, surface: bg, onClose: closeMobileMenu })] }));
 };
 export default Header;

package/dist/esm/Components/Header/HeaderActions.js

@@ -6,23 +6,25 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
 import Select from "../Select/Select.js";
-import VeritcalDivider from "../Divider/Divider.js";
+import VerticalDivider from "../Divider/Divider.js";
+import { surfaceFocusRing } from "../Common/surfaceFocusRing.js";
 const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b, _c;
     const { colors } = useCustomTheme();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = liftToContrast(colors.secondary[500], canvas, AA_NORMAL_TEXT);
     const iconInk = liftToContrast(colors.secondary[500], canvas, AA_NON_TEXT);
+    const focusShadow = surfaceFocusRing(canvas, iconInk);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push(_jsx(Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: _jsx(Select, { options: (_b = select.options) !== null && _b !== void 0 ? _b : [], placeholder: select.selectPlaceholderText, "aria-label": select.ariaLabel || select.selectPlaceholderText || "Select", native: (_c = select.native) !== null && _c !== void 0 ? _c : false, onChange: (option) => { var _a; return (_a = select.onSelectChange) === null || _a === void 0 ? void 0 : _a.call(select, option); }, value: select.value }, "select") }, "select"));
     }
     if (edit === null || edit === void 0 ? void 0 : edit.isEditable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = edit.onEdit) === null || _a === void 0 ? void 0 : _a.call(edit); }, children: [_jsx(SquarePen, { size: 16, color: iconInk }), _jsx(Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: `0 0 0 2px ${iconInk}`, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push(_jsxs(Box, { as: "button", type: "button", bg: "transparent", borderRadius: "lg", _focusVisible: { boxShadow: focusShadow, outline: "none" }, display: "flex", alignItems: "center", gap: "0.375rem", cursor: "pointer", fontSize: "sm", onClick: () => { var _a; return (_a = create.onCreate) === null || _a === void 0 ? void 0 : _a.call(create); }, children: [_jsx(CirclePlus, { size: 16, color: iconInk }), _jsxs(Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
-    return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VeritcalDivider, {}), el] }, i))) }));
+    return (_jsx(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx(VerticalDivider, {}), el] }, i))) }));
 };
 export default HeaderActions;

package/dist/esm/Components/Input/TextInput.js

@@ -20,7 +20,7 @@ const IconSlot = ({ icon, onClick, ariaLabel, sx, color, isDisabled }) => {
     return (_jsx(Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled, sx: { ...sx, ...focusVisibleStyles(colors) }, color: color, p: 1, borderRadius: "md", cursor: isDisabled ? "not-allowed" : "pointer", children: icon }));
 };
 /** Standard labelled text field — label always bound (auto id), helper/error row, optional left/right icons that become real buttons when clickable. */
-const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder, width = "100%", height, error, errorMessage, helperText, variant = "outline", onRightIconclick, inputRightIcon, rightIconAriaLabel, inputLeftIcon, onLeftIconClick, leftIconAriaLabel, inputLeftAddon, inputRightAddon, isClearable = false, clearIconAriaLabel, showCharacterCount = false, isLoading = false, isPasswordToggleDisabled = false, inputGroupStyle, inputStyle, size = DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
+const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur, onFocus, isDisabled = false, isReadOnly = false, isRequired = false, value, placeholder, width = "100%", height, error, errorMessage, helperText, variant = "outline", onRightIconClick, onRightIconclick, inputRightIcon, rightIconAriaLabel, inputLeftIcon, onLeftIconClick, leftIconAriaLabel, inputLeftAddon, inputRightAddon, isClearable = false, clearIconAriaLabel, showCharacterCount = false, isLoading = false, isPasswordToggleDisabled = false, inputGroupStyle, inputStyle, size = DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
     var _a;
     const theme = useCustomTheme();
     const inputRef = useRef(null);
@@ -58,7 +58,7 @@ const TextInput = forwardRef(({ label, type = "text", id, name, onChange, onBlur
         rightSlots.push({
             key: "custom",
             icon: inputRightIcon,
-            onClick: onRightIconclick,
+            onClick: onRightIconClick !== null && onRightIconClick !== void 0 ? onRightIconClick : onRightIconclick,
             ariaLabel: rightIconAriaLabel !== null && rightIconAriaLabel !== void 0 ? rightIconAriaLabel : actionName("right icon action"),
         });
     }

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

@@ -26,7 +26,7 @@ const AccountCard = React.memo(({ account, onDelete, onOpen, isExpanded = false,
     return (_jsx(Box, { role: "group", width: "100%", borderRadius: "xl", background: colors.background[50], border: `${BORDER_WIDTHS.hairline} solid ${colors.boxborder[200]}`, p: 3, boxSizing: "border-box", minHeight: isExpanded ? "11.25rem" : "5rem", transition: transitionFor(["border-color", "box-shadow", "transform"]), sx: reducedMotionSx({ transform: "none" }), _hover: {
             borderColor: colors.primary[300],
             boxShadow: "md",
-            transform: "translateY(-0.063rem)",
+            transform: "translateY(-1px)",
         }, children: _jsxs(VStack, { align: "stretch", spacing: 1, fontSize: "sm", color: colors.text[500], children: [visibleKeys.map((key) => (_jsx(AccountRow, { label: key.replace(/\b\w/g, (c) => c.toUpperCase()), value: account[key] }, key))), _jsx(Collapse, { in: isExpanded && account.details !== undefined, animateOpacity: true, children: _jsx(Text, { pt: 2, fontSize: "xs-plus", color: colors.text[600], children: account.details }) }), _jsxs(Flex, { justify: "space-between", w: "full", pt: 2, alignItems: "center", children: [keys.length > 4 ? (_jsxs(Text, { as: "button", type: "button", "aria-expanded": isExpanded, color: colors.accentText, fontSize: "xs", fontWeight: 600, cursor: "pointer", onClick: handleToggle, display: "flex", alignItems: "center", gap: 1, borderRadius: "sm", _hover: { textDecoration: "underline" }, sx: focusVisibleStyles(colors), children: ["Show ", isExpanded ? "less" : "more", " ", isExpanded ? _jsx(ChevronUp, { size: 13 }) : _jsx(ChevronDown, { size: 13 })] })) : (_jsx(Spacer, {})), _jsxs(HStack, { spacing: 1, opacity: 0, transition: transitionFor(["opacity"]), _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, sx: reducedMotionSx(), children: [isDeletable && (_jsx(Tooltip, { label: "Delete", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: { bg: errorTone.bg, color: errorTone.fg }, onClick: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(account), "aria-label": "Delete", children: _jsx(Trash2, { size: 15 }) }) })), _jsx(Tooltip, { label: "Open", hasArrow: true, children: _jsx(Flex, { as: "button", type: "button", align: "center", justify: "center", boxSize: "1.625rem", borderRadius: "lg", cursor: "pointer", color: colors.textMuted, transition: ACTION_TRANSITION, sx: { ...focusVisibleStyles(colors), ...reducedMotionSx() }, _hover: {
                                             bg: openHover,
                                             color: accentTextOnCanvas(colors.primary, openHover),

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

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import Select from "../../Select/Select.js";
 import { CirclePlus, SquarePen } from "lucide-react";
-import VeritcalDivider from "../../Divider/Divider.js";
+import VerticalDivider from "../../Divider/Divider.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import Button from "../../Button/Button.js";
 /** Standalone filter+Edit+Create action bar; NOT rendered by KanbanBoard (which uses HeaderActions instead) and not exported from the package. */
 const KanbanActions = ({ options, onSelectChange, onEdit, onCreate, }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VeritcalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: [_jsx(Select, { native: false, options: options, placeholder: "Filter by Status", width: "12.5rem", onChange: (option) => onSelectChange && onSelectChange(option) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "0.5rem", children: [_jsx(Button, { size: "sm", variant: "ghost", leftIcon: _jsx(SquarePen, { size: 20, color: colors.text[500] }), onClick: () => onEdit === null || onEdit === void 0 ? void 0 : onEdit(), children: "Edit Layout" }), _jsx(VerticalDivider, {}), _jsx(Button, { size: "sm", variant: "solid", leftIcon: _jsx(CirclePlus, { size: 20 }), onClick: () => onCreate === null || onCreate === void 0 ? void 0 : onCreate(), children: "Create New" })] })] }));
 };
 export default KanbanActions;

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

@@ -19,6 +19,7 @@ import OverflowTooltipText from "../SideBar/components/OverflowTooltipText.js";
 import Button from "../Button/Button.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 import { createBoardStore, useBoardStore } from "./boardStore.js";
+import { onActivationKey } from "../Common/activationKey.js";
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 const CARD_LABEL_EXCLUDE = ["id", "details"];
@@ -70,7 +71,7 @@ function reorderColumnEntries(entries, startIndex, endIndex) {
     return result;
 }
 /** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
-const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
+const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete: onDeleteProp, onOpen: onOpenProp, onColumnDelete, isLoading = false, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse = false, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder = false, onColumnReorder, preferences = {
     baseurl: "",
     token: "",
     key: "",
@@ -135,6 +136,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         preferences.page,
         preferences.key,
         preferences.name,
+        preferences.orgId,
+        preferences.token,
     ]);
     useEffect(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
@@ -375,6 +378,12 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         const columnIds = ((_b = (_a = columns[colId]) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.map((item) => item.id)) || [];
         onColumnDelete === null || onColumnDelete === void 0 ? void 0 : onColumnDelete(columnIds);
     }, [columns, onColumnDelete]);
+    const onDeleteRef = useRef(onDeleteProp);
+    onDeleteRef.current = onDeleteProp;
+    const onOpenRef = useRef(onOpenProp);
+    onOpenRef.current = onOpenProp;
+    const onDelete = useCallback((account) => { var _a; return (_a = onDeleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onDeleteRef, account); }, []);
+    const onOpen = useCallback((account) => { var _a; return (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, account); }, []);
     const rowBaseProps = useMemo(() => ({
         canDrag,
         expandedStore,
@@ -437,12 +446,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         tabIndex: 0,
         sx: focusVisibleStyles(colors),
         onClick: addColumn,
-        onKeyDown: (e) => {
-            if (e.key !== "Enter" && e.key !== " ")
-                return;
-            e.preventDefault();
-            addColumn();
-        },
+        onKeyDown: onActivationKey(addColumn),
     };
     const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && (_jsx(Box, { width: columnWidth, borderRadius: "lg", border: `0.125rem dashed ${colors.boxborder[500]}`, bg: colors.background[100], flexShrink: 0, height: COLUMN_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", _hover: { borderColor: colors.primary[500] }, ...addColumnKeyboard, children: _jsxs(Flex, { direction: "column", align: "center", gap: 2, children: [_jsx(Box, { as: Plus, size: 20, color: colors.text[700] }), _jsx(Text, { fontSize: "sm", color: colors.text[600], children: (customizeColumn === null || customizeColumn === void 0 ? void 0 : customizeColumn.buttonText) || "Add column" })] }) }));
     const columnsList = Object.entries(columns).map(([colId, column], colIndex) => {

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

@@ -36,6 +36,6 @@ const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k",
     if (display === "icon") {
         return (_jsx(ToolTip, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: _jsx(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: _jsx(Icon, { size: 17, "aria-hidden": "true" }) }) }));
     }
-    return (_jsxs(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [_jsx(Icon, { size: 17, "aria-hidden": "true" }), _jsx("span", { children: label })] }), hint && showHint && (_jsx(Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+    return (_jsxs(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? keyShortcutsFor(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [_jsx(Icon, { size: 17, "aria-hidden": "true" }), _jsx("span", { children: label })] }), hint && showHint && (_jsx(Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "md", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
 };
 export default LauncherTrigger;

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

@@ -7,5 +7,5 @@ const DefaultFallback = ({ minHeight }) => {
     return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: _jsx(Spinner, { thickness: "3px", speed: "0.65s", size: "lg", emptyColor: theme.colors.gray[100], color: theme.colors.accentText }) }));
 };
 /** Suspense boundary + themed spinner only — wrap an already-lazy() child; a non-lazy child never suspends. */
-const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : _jsx(DefaultFallback, { minHeight: minHeight }), children: children }));
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => (_jsx(Suspense, { fallback: fallback === undefined ? _jsx(DefaultFallback, { minHeight: minHeight }) : fallback, children: children }));
 export default LazyWrapper;

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

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 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";
@@ -13,9 +12,11 @@ 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 { fileTypeLabel, formatFileSize, formatUploadedDate, isTypingTarget, isUnsupportedImageSrc, isUnsupportedVideoSrc, mediaLink, wrapIndex, youtubeEmbed, youtubeWatch, } from "./mediaItems.js";
 import { defaultMediaViewerLabels } from "./MediaViewerProps.js";
 import { fullViewportHeight } from "../../Theme/tokens/builders/viewportHeight.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BOX_SHADOW_OPACITY_TRANSITION = transitionFor(["box-shadow", "opacity"]);
 const SWIPE_MIN_PX = 50;
 const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
 const COPIED_FEEDBACK_MS = 1500;
@@ -180,7 +181,7 @@ const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultInde
     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;
+        const uploaded = item.uploadedAt ? labels.uploadedOn(formatUploadedDate(item.uploadedAt)) : 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: "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) => {
@@ -190,7 +191,7 @@ const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultInde
                                 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));
+                                        : "none", transition: BOX_SHADOW_OPACITY_TRANSITION, _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/components/MediaAudioPlayer.js

@@ -3,12 +3,15 @@ import { useEffect, useRef, useState } from "react";
 import { Box, Flex, IconButton, Menu, MenuButton, MenuItemOption, MenuList, MenuOptionGroup, Slider, SliderFilledTrack, SliderThumb, SliderTrack, Text, } from "@chakra-ui/react";
 import { ChevronDown, Download, Music, Pause, Play, SkipBack, SkipForward, Volume2, VolumeX } from "lucide-react";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 import { formatClock, isTypingTarget, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
 import { useViewerChrome } from "../useViewerChrome.js";
 import { TimelineClock, TimelineScrubber, usePlaybackTimeline } from "./PlaybackTimeline.js";
 import MediaStatusPanel from "./MediaStatusPanel.js";
 import ViewerIconButton from "./ViewerIconButton.js";
 import { defaultMediaAudioPlayerLabels } from "./MediaAudioPlayerProps.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const VOLUME_WIDTH_TRANSITION = transitionFor(["width"], "base", "out");
 const ARROW_SEEK_SECONDS = 5;
 const ARROW_VOLUME_STEP = 0.1;
 const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides }) => {
@@ -26,6 +29,7 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
     const [buffered, setBuffered] = useState([]);
     const [volumeHover, setVolumeHover] = useState(false);
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const audio = () => audioRef.current;
     const togglePlay = () => {
         const a = audio();
@@ -128,6 +132,6 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
                 }, 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(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" })] })] })] })] }))] }));
+                }, "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: focusShadow }, "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: VOLUME_WIDTH_TRANSITION, 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: focusShadow } })] }) })] }), _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: focusShadow }, "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

@@ -9,15 +9,19 @@ import { iconForKind, warningIcon } from "./mediaKindIcon.js";
 import MediaStatusPanel from "./MediaStatusPanel.js";
 import ViewerIconButton from "./ViewerIconButton.js";
 import { defaultMediaImageViewerLabels } from "./MediaImageViewerProps.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const TRANSFORM_OUT_TRANSITION = transitionFor(["transform"], "fast", "out");
 const ORIGIN = { x: 0, y: 0 };
+const transformFor = (pan, zoom, rotation) => `translate(${pan.x}px, ${pan.y}px) scale(${zoom / 100}) rotate(${rotation}deg)`;
 const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: labelOverrides, }) => {
     const labels = { ...defaultMediaImageViewerLabels, ...labelOverrides };
     const chrome = useViewerChrome();
     const stageRef = useRef(null);
+    const imageRef = useRef(null);
     const drag = useRef(null);
+    const pan = useRef(ORIGIN);
     const [zoom, setZoom] = useState(100);
     const [rotation, setRotation] = useState(0);
-    const [pan, setPan] = useState(ORIGIN);
     const [failed, setFailed] = useState(false);
     const [dragging, setDragging] = useState(false);
     const { isFullscreen, toggle: toggleFullscreen, isSupported: fullscreenSupported } = useFullscreen(stageRef);
@@ -26,21 +30,26 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
     }, [zoom, onZoomChange]);
     // Defense in depth: a parent that reuses this instance across items (no key remount) must not carry state over.
     useEffect(() => {
+        resetPan();
         setZoom(100);
         setRotation(0);
-        setPan(ORIGIN);
         setFailed(false);
     }, [item.key]);
+    const resetPan = () => {
+        pan.current = ORIGIN;
+        drag.current = null;
+        setDragging(false);
+    };
     const zoomBy = (delta) => {
         const next = clampZoom(zoom + delta);
         setZoom(next);
         if (next <= 100)
-            setPan(ORIGIN);
+            resetPan();
     };
     const reset = () => {
+        resetPan();
         setZoom(100);
         setRotation(0);
-        setPan(ORIGIN);
     };
     const rotate = () => setRotation((r) => (r + 90) % 360);
     const actions = useRef({ zoomBy, reset, rotate, toggleFullscreen });
@@ -74,14 +83,16 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
         if (zoom <= 100)
             return;
         event.currentTarget.setPointerCapture(event.pointerId);
-        drag.current = { start: { x: event.clientX, y: event.clientY }, from: pan };
+        drag.current = { start: { x: event.clientX, y: event.clientY }, from: pan.current };
         setDragging(true);
     };
     const onPointerMove = (event) => {
         const d = drag.current;
         if (!d)
             return;
-        setPan({ x: d.from.x + event.clientX - d.start.x, y: d.from.y + event.clientY - d.start.y });
+        pan.current = { x: d.from.x + event.clientX - d.start.x, y: d.from.y + event.clientY - d.start.y };
+        if (imageRef.current)
+            imageRef.current.style.transform = transformFor(pan.current, zoom, rotation);
     };
     const endDrag = () => {
         drag.current = null;
@@ -90,9 +101,9 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
     if (unsupported) {
         return (_jsx(Box, { position: "absolute", inset: 0, bg: chrome.stage, children: _jsx(MediaStatusPanel, { icon: iconForKind("image"), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-image-unsupported" }) }));
     }
-    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({
+    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, { ref: imageRef, 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,
-                    }), 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] })] }));
+                    }), style: { transform: transformFor(pan.current, zoom, rotation) }, transition: dragging ? "none" : TRANSFORM_OUT_TRANSITION, "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,8 +2,12 @@ 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 { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 import { NUMERIC_TEXT } from "../../../Theme/tokens/primitives/typography.js";
 import { useViewerChrome } from "../useViewerChrome.js";
+import { transitionFor } from "../../../Theme/tokens/primitives/motion.js";
+const HEIGHT_TRANSITION = transitionFor(["height"], "fast", "out");
+const THUMB_TRANSITION = transitionFor(["width", "height"], "fast", "out");
 const STEP_SECONDS = 5;
 const BIG_STEP_SECONDS = 30;
 const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
@@ -15,6 +19,7 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
     const [hovering, setHovering] = useState(false);
     const [previewX, setPreviewX] = useState(null);
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
     const fraction = disabled ? 0 : clamp(value / max, 0, 1);
     const fractionAt = (clientX) => {
@@ -83,9 +88,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, 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: {
+        }, 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_TRANSITION, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, _focusVisible: { boxShadow: focusShadow }, "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" })] })] }));
+                        }, 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: THUMB_TRANSITION, pointerEvents: "none" })] })] }));
 };
 export default MediaScrubber;

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

@@ -5,6 +5,7 @@ import { keyframes } from "@emotion/react";
 import { Captions, ChevronDown, ChevronLeft, ChevronRight, Download, Loader2, Maximize, Minimize, Pause, PictureInPicture2, Play, SkipBack, SkipForward, Volume2, VolumeX, } from "lucide-react";
 import { useFullscreen } from "../../../Hooks/useFullscreen.js";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 import { formatClock, isTypingTarget, isUnsupportedVideoSrc, PLAYBACK_SPEEDS, SEEK_STEP_SECONDS } from "../mediaItems.js";
 import { useAutoHideChrome } from "../hooks/useAutoHideChrome.js";
 import { usePrefersReducedMotion } from "../../../Theme/chakra/motion.js";
@@ -48,6 +49,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
     const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const { visible: chromeVisible, handlers: chromeHandlers } = useAutoHideChrome(shellRef, playing && !unsupported);
     const video = () => videoRef.current;
     const togglePlay = () => {
@@ -238,6 +240,6 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
                     }, onDurationChange: (e) => setDuration(e.currentTarget.duration), onVolumeChange: (e) => {
                         setVolume(e.currentTarget.volume);
                         setMuted(e.currentTarget.muted);
-                    }, "data-testid": "media-video" })) }), buffering && !failed ? (_jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: _jsx(Box, { as: Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: _jsxs(Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? _jsx(SkipBack, { size: 22, "aria-hidden": true }) : _jsx(SkipForward, { size: 22, "aria-hidden": true }), _jsx(Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? (_jsx(IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: _jsx(Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), _jsxs(Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, 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: failed || duration <= 0, testId: "media-video-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(ViewerIconButton, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: seekIcon(_jsx(SkipBack, { size: 16 })), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-video-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: seekIcon(_jsx(SkipForward, { size: 16 })), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? (_jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? (_jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, _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-video-mute" }), _jsx(Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, 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-video-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-video-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))) }) })] }), hasCaptions ? (_jsx(ViewerIconButton, { label: labels.captions, hint: "C", icon: _jsx(Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? (_jsx(ViewerIconButton, { label: labels.pip, hint: "P", icon: _jsx(PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? (_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-video-fullscreen" })) : null] })] })] })] }));
+                    }, "data-testid": "media-video" })) }), buffering && !failed ? (_jsx(Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: _jsx(Box, { as: Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: ripple.side === "left" ? 0 : undefined, right: ripple.side === "right" ? 0 : undefined, w: "40%", align: "center", justify: "center", pointerEvents: "none", opacity: reducedMotion ? 1 : undefined, sx: reducedMotion ? undefined : { animation: `${rippleFade} ${RIPPLE_LIFETIME_MS}ms ease-out` }, children: _jsxs(Flex, { direction: "column", align: "center", gap: 1, color: chrome.ink, bg: chrome.scrim(0.35), borderRadius: "full", boxSize: "72px", justify: "center", children: [ripple.side === "left" ? _jsx(SkipBack, { size: 22, "aria-hidden": true }) : _jsx(SkipForward, { size: 22, "aria-hidden": true }), _jsx(Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? (_jsx(IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: _jsx(Play, { size: 36 }), onClick: togglePlay, position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", boxSize: { base: "64px", md: "88px" }, isRound: true, variant: "ghost", bg: chrome.raised, color: chrome.accent, _hover: { bg: chrome.hover }, _focusVisible: { boxShadow: focusShadow }, tabIndex: -1, transition: fadeTransition, zIndex: 3, "data-testid": "media-video-big-play" })) : null, _jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), _jsxs(Box, { position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 3, bgImage: scrimBottom, pt: failed || duration <= 0 ? 2 : 10, px: 3, pb: 2, opacity: showChrome ? 1 : 0, visibility: showChrome ? "visible" : "hidden", transition: fadeTransition, 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: failed || duration <= 0, testId: "media-video-seek" }), _jsxs(Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [_jsxs(Flex, { align: "center", gap: 1, wrap: "wrap", children: [_jsx(ViewerIconButton, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? _jsx(Pause, { size: 18 }) : _jsx(Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), _jsx(ViewerIconButton, { label: labels.rewind, hint: "J", icon: seekIcon(_jsx(SkipBack, { size: 16 })), onClick: () => seekBy(-SEEK_STEP_SECONDS), testId: "media-video-rewind" }), _jsx(ViewerIconButton, { label: labels.forward, hint: "L", icon: seekIcon(_jsx(SkipForward, { size: 16 })), onClick: () => seekBy(SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? (_jsx(ViewerIconButton, { label: labels.previous, icon: _jsx(ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? (_jsx(ViewerIconButton, { label: labels.next, icon: _jsx(ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, _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-video-mute" }), _jsx(Box, { w: volumeHover ? { base: "64px", md: "88px" } : { base: "64px", md: "0px" }, overflow: "hidden", px: volumeHover ? 1 : 0, transition: fadeTransition, 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: focusShadow } })] }) })] }), _jsx(TimelineClock, { timeline: timeline, duration: duration, testId: "media-video-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: focusShadow }, "data-testid": "media-video-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))) }) })] }), hasCaptions ? (_jsx(ViewerIconButton, { label: labels.captions, hint: "C", icon: _jsx(Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? (_jsx(ViewerIconButton, { label: labels.pip, hint: "P", icon: _jsx(PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, _jsx(ViewerIconButton, { label: labels.download, icon: _jsx(Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? (_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-video-fullscreen" })) : null] })] })] })] }));
 };
 export default MediaVideoPlayer;

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

@@ -3,13 +3,15 @@ import { IconButton } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { useViewerChrome } from "../useViewerChrome.js";
 import { settleBetween } from "../../../Theme/tokens/builders/focusRing.js";
+import { surfaceFocusRing } from "../../Common/surfaceFocusRing.js";
 /** Toolbar/nav button for the media lightbox — always painted against the fixed dark viewer chrome. */
 const ViewerIconButton = ({ label, hint, icon, onClick, href, size = "md", round = false, pressed = false, isDisabled = false, testId, }) => {
     const chrome = useViewerChrome();
     const tooltipLabel = hint ? `${label} (${hint})` : label;
     // The stage is a fixed dark chrome regardless of app mode, so the ring is settled against it directly.
     const ring = settleBetween(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = surfaceFocusRing(chrome.stage, ring);
     const linkProps = href ? { as: "a", href, download: true, rel: "noopener" } : {};
-    return (_jsx(ToolTip, { label: tooltipLabel, children: _jsx(IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` }, "data-testid": testId, ...linkProps }) }));
+    return (_jsx(ToolTip, { label: tooltipLabel, children: _jsx(IconButton, { "aria-label": label, "aria-pressed": href ? undefined : pressed, icon: icon, onClick: onClick, isDisabled: isDisabled, size: size, isRound: round, variant: "ghost", color: chrome.ink, bg: round || pressed ? chrome.raised : "transparent", _hover: { bg: chrome.hover }, _active: { bg: chrome.hover }, outline: "2px solid transparent", outlineOffset: "2px", _focusVisible: { boxShadow: focusShadow }, "data-testid": testId, ...linkProps }) }));
 };
 export default ViewerIconButton;

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

@@ -158,6 +158,10 @@ export function formatFileSize(bytes) {
         return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
+const UPLOADED_DATE = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric", year: "numeric" });
+export function formatUploadedDate(value) {
+    return UPLOADED_DATE.format(new Date(value));
+}
 export function fileTypeLabel(src) {
     const match = /\.([a-z0-9]{2,5})(?:[?#].*)?$/i.exec(src);
     return match ? match[1].toUpperCase() : null;

package/dist/esm/Components/Modal/Modal.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import { Modal as ChakraModal, ModalOverlay, ModalContent, ModalHeader as ChakraModalHeader, ModalCloseButton, ModalBody as ChakraModalBody, ModalFooter as ChakraModalFooter, Flex, Spinner, Text, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { warnDroppedSlotChildren } from "./warnDroppedSlotChildren.js";
+import { findSlot } from "../Common/findSlot.js";
 export const ModalHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
@@ -12,22 +12,7 @@ export const ModalBody = ({ children }) => {
 export const ModalFooter = ({ children }) => {
     return _jsx(_Fragment, { children: children });
 };
-const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
-// Matches by type one Fragment deep, so `<>{cond && <ModalFooter>...</ModalFooter>}</>` isn't dropped.
-const findSlot = (children, slot) => {
-    for (const child of React.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === React.Fragment) {
-            const nested = findSlot(child.props.children, slot);
-            if (nested)
-                return nested;
-        }
-    }
-    return undefined;
-};
+/** Dialog built from ModalHeader, ModalBody and ModalFooter slots; other children are dropped. */
 export default function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
     var _a, _b;
     const { colors } = useCustomTheme();

package/dist/esm/Components/Modal/dialogNaming.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ModalContextProvider, useModalContext } from "@chakra-ui/react";
+// Chakra's getDialogProps always points aria-labelledby at the header, so override it at the source.
+export function DialogNaming({ label, labelledBy, children }) {
+    const modal = useModalContext();
+    const value = useMemo(() => label || labelledBy
+        ? {
+            ...modal,
+            getDialogProps: ((...args) => ({
+                ...modal.getDialogProps(...args),
+                ...(label ? { "aria-label": label } : {}),
+                "aria-labelledby": labelledBy,
+            })),
+        }
+        : modal, [modal, label, labelledBy]);
+    return _jsx(ModalContextProvider, { value: value, children: children });
+}