pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/dist/esm/Components/FilterSidebar/OptionsSection.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { Box, Flex, Text, VStack, HStack, Badge, Input, Radio, RadioGroup } from "@chakra-ui/react";
+import { Star } from "lucide-react";
+import CheckBox from "../Checkbox/Checkbox.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { fieldFocusVisible, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const RATINGS = [4, 3, 2, 1];
+const STARS = [0, 1, 2, 3, 4];
+const OptionsSection = memo(({ section, value, searchTerm, isExpanded, maxVisible, onToggle, onValue, onSearch, onToggleExpanded, }) => {
+    const theme = useCustomTheme();
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const ratingPick = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.background[50]), [theme.colors]);
+    const insetFocusRing = useMemo(() => ({ outline: "2px solid transparent", boxShadow: insetFocusRingShadow(theme.colors) }), [theme.colors]);
+    const options = section.options || [];
+    const selectedIds = Array.isArray(value) ? value : [];
+    const isRadio = section.type === "radio" || section.radio;
+    const visible = (isExpanded ? options : options.slice(0, maxVisible)).filter((opt) => !section.searchable || !searchTerm || opt.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    const renderList = () => {
+        if (visible.length === 0 && searchTerm) {
+            return (_jsx(Box, { p: 2, w: "full", textAlign: "center", children: _jsx(Text, { fontSize: "xs", color: theme.colors.textMuted, children: "No Data Found" }) }));
+        }
+        if (isRadio) {
+            return (_jsx(RadioGroup, { w: "full", value: value || "", onChange: (val) => onValue(section.id, val), children: _jsx(VStack, { align: "start", spacing: 1, w: "full", children: visible.map((opt) => (_jsx(Radio, { value: opt.id, size: "sm", children: _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], children: opt.label }) }, opt.id))) }) }));
+        }
+        return visible.map((opt) => (_jsxs(Flex, { align: "center", justify: "space-between", w: "full", _hover: { bg: hoverBg, borderRadius: "md" }, p: 0, children: [_jsxs(Flex, { align: "center", gap: 1, children: [_jsx(CheckBox, { "aria-label": `${section.label}: ${opt.label}`, isChecked: selectedIds.includes(opt.id), onChange: (e) => onToggle(section.id, opt.id, e.target.checked), size: "sm" }), _jsx(Text, { fontSize: "xs", color: theme.colors.text[500], cursor: "pointer", onClick: () => onToggle(section.id, opt.id, !selectedIds.includes(opt.id)), children: opt.label })] }), typeof opt.count === "number" && (_jsx(Badge, { fontSize: "xs", colorScheme: "gray", borderRadius: "full", px: 2, children: opt.count }))] }, opt.id)));
+    };
+    return (_jsxs(_Fragment, { children: [section.id === "rating" ? (_jsx(VStack, { align: "start", spacing: 1, w: "full", children: RATINGS.map((r) => {
+                    const isRowSelected = String(value || "") === String(r);
+                    // NOTE: orange[500] is ~2.2:1 on background[50]; walk the scale for 3:1.
+                    const starColor = accentTextOnCanvas(theme.colors.orange, isRowSelected ? ratingPick : theme.colors.background[50]);
+                    return (_jsx(Flex, { as: "button", type: "button", "aria-pressed": isRowSelected, "aria-label": `${section.label}: ${r} stars & up`, align: "center", justify: "space-between", w: "full", p: 1, borderRadius: "md", cursor: "pointer", bg: isRowSelected ? ratingPick : "transparent", border: isRowSelected ? `1px solid ${theme.colors.primary[200]}` : "none", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, onClick: () => onValue(section.id, String(r)), children: _jsxs(HStack, { spacing: 2, align: "center", children: [_jsx(HStack, { spacing: 1, children: STARS.map((i) => (_jsx(Box, { children: _jsx(Star, { size: 16, color: starColor, fill: i < r ? starColor : "none" }) }, `star-${r}-${i}`))) }), _jsx(Text, { fontSize: "sm", color: theme.colors.text[500], children: "& Up" })] }) }, `rating-${r}`));
+                }) })) : null, section.searchable && (_jsx(Input, { size: "xs", h: "26px", fontSize: "xs", "aria-label": `Search ${section.label}`, placeholder: `Search ${section.label}...`, borderRadius: "md", bg: theme.colors.background[50], border: "1px solid", 
+                // NOTE: boxborder[500] not gray[200]; WCAG 1.4.11 needs 3:1 for a control boundary.
+                borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...fieldFocusVisible(theme.colors) }, value: searchTerm, onChange: (e) => onSearch(section.id, e.target.value) })), section.id !== "rating" && renderList(), options.length > maxVisible && (_jsx(Text, { as: "span", role: "button", tabIndex: 0, fontSize: "sm", fontWeight: 500, color: theme.colors.accentText, cursor: "pointer", _hover: { textDecoration: "underline" }, onClick: () => onToggleExpanded(section.id), onKeyDown: onActivationKey(() => onToggleExpanded(section.id)), children: isExpanded ? "Show less" : `+ ${options.length - maxVisible} more` }))] }));
+});
+export default OptionsSection;

package/dist/esm/Components/FilterSidebar/RangeSection.js

@@ -0,0 +1,78 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo, useState } from "react";
+import { Box, Flex, Text, VStack, SimpleGrid, Popover, PopoverTrigger, PopoverContent, PopoverBody, Portal } from "@chakra-ui/react";
+import { Check } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
+import { getFilterHoverBg } from "./filterHoverStyle.js";
+import { focusVisibleRing, insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+const SLIDER_CSS = `
+  .custom-range-slider::-webkit-slider-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    -webkit-appearance: none;
+    cursor: pointer;
+  }
+  .custom-range-slider::-moz-range-thumb {
+    pointer-events: auto;
+    width: 24px;
+    height: 24px;
+    border: none;
+    cursor: pointer;
+  }
+`;
+const NATIVE_INPUT_STYLE = {
+    position: "absolute",
+    width: "100%",
+    height: "100%",
+    opacity: 0,
+    appearance: "none",
+    pointerEvents: "none",
+    zIndex: 3,
+    margin: 0,
+};
+const TICKS = [0, 25, 50, 75, 100];
+const BoundPicker = ({ bound, sectionId, label, values, current, unit, isOpen, onOpen, onClose, onPick }) => {
+    const theme = useCustomTheme();
+    const hoverBg = useMemo(() => getFilterHoverBg(theme.colors), [theme.colors]);
+    const pickFill = useMemo(() => bandOn(theme.colors.primary[50], theme.colors.surfaceRaised), [theme.colors]);
+    const focusRing = useMemo(() => focusVisibleRing(theme.colors), [theme.colors]);
+    const insetFocusRing = useMemo(() => ({ outline: "2px solid transparent", boxShadow: insetFocusRingShadow(theme.colors) }), [theme.colors]);
+    const unitSuffix = unit ? ` ${unit}` : "";
+    const boundName = bound === "min" ? "minimum" : "maximum";
+    // NOTE: raw scale ink can miss 3:1 on its own fill; onFilled matches it.
+    const checkInk = onFilled(theme.colors.primary[100], theme.colors.white, theme.colors.black);
+    return (_jsxs(Popover, { isOpen: isOpen, onClose: onClose, placement: "bottom-start", closeOnBlur: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { as: "button", type: "button", "aria-label": `${label} ${boundName}: ${current}${unitSuffix}`, borderWidth: "0", borderRadius: "md", alignItems: "center", px: 3, py: 2, bg: theme.colors.background[50], borderColor: theme.colors.boxborder[500], cursor: "pointer", _focusVisible: focusRing, "data-testid": `range-trigger-${bound}-${sectionId}`, onClick: onOpen, gap: 2, overflow: "hidden", children: _jsx(Box, { ml: "auto", children: _jsxs(Text, { fontSize: "xs", color: theme.colors.text[500], whiteSpace: "nowrap", children: [current, unitSuffix] }) }) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { width: "6rem", p: 0, zIndex: 1600, bg: theme.colors.surfaceRaised, "aria-label": `${label} ${boundName}`, children: _jsx(PopoverBody, { p: 0, children: _jsx(VStack, { align: "stretch", spacing: 0, maxH: "12rem", overflowY: "auto", children: values.map((v) => (_jsxs(Flex, { as: "button", type: "button", "aria-pressed": current === v, px: 2, py: 1, align: "center", justify: "space-between", cursor: "pointer", bg: current === v ? pickFill : theme.colors.surfaceRaised, borderLeftWidth: current === v ? 3 : 0, borderLeftStyle: "solid", borderLeftColor: current === v ? theme.colors.primary[400] : "transparent", _hover: { bg: hoverBg }, _focusVisible: insetFocusRing, "data-testid": `range-option-${bound}-${sectionId}-${v}`, onClick: () => onPick(v), children: [_jsxs(Text, { fontSize: "sm", color: theme.colors.text[500], children: [v, unitSuffix] }), current === v ? (_jsx(Box, { bg: theme.colors.primary[100], borderRadius: "full", p: 1, display: "flex", alignItems: "center", children: _jsx(Check, { size: 9, color: checkInk }) })) : null] }, `${bound}-${v}`))) }) }) }) })] }));
+};
+const RangeSection = memo(({ sectionId, label, range, value, onChange }) => {
+    var _a, _b;
+    const theme = useCustomTheme();
+    const [openBound, setOpenBound] = useState(null);
+    const step = range.step || 1;
+    const rangeArr = Array.isArray(value) ? value : [];
+    const currentMin = (_a = rangeArr[0]) !== null && _a !== void 0 ? _a : range.min;
+    const currentMax = (_b = rangeArr[1]) !== null && _b !== void 0 ? _b : range.max;
+    const values = useMemo(() => range.values || Array.from({ length: Math.floor((range.max - range.min) / step) + 1 }, (_, i) => range.min + i * step), [range.values, range.min, range.max, step]);
+    const unitSuffix = range.unit ? ` ${range.unit}` : "";
+    const minPercent = ((currentMin - range.min) / (range.max - range.min)) * 100;
+    const maxPercent = ((currentMax - range.min) / (range.max - range.min)) * 100;
+    const primaryColor = theme.colors.primary[300];
+    const secondaryColor = theme.colors.primary[600];
+    const trackColor = cardRule(theme.colors);
+    const chipBorder = `1px solid ${trackColor}`;
+    const thumbSize = { base: "16px", md: "20px" };
+    const chipTop = { base: "-18px", md: "-22px" };
+    const pick = (bound, v) => {
+        const other = bound === "min" ? currentMax : currentMin;
+        onChange(sectionId, [Math.min(v, other), Math.max(v, other)]);
+        setOpenBound(null);
+    };
+    return (_jsxs(Box, { w: "full", px: 3, children: [_jsx("style", { children: SLIDER_CSS }), _jsxs(Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [_jsx(Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: trackColor, borderRadius: "full" }), _jsx(Box, { position: "absolute", height: "6px", style: {
+                            left: `${minPercent}%`,
+                            width: `${maxPercent - minPercent}%`,
+                            background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})`,
+                        }, borderRadius: "full", boxShadow: `0 0 8px ${theme.colors.primary.opacity[32]}` }), [[minPercent, primaryColor], [maxPercent, secondaryColor]].map(([percent, color], i) => (_jsx(Box, { position: "absolute", style: { left: `${percent}%` }, transform: "translate(-50%, 0)", w: thumbSize, h: thumbSize, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: color, boxShadow: theme.shadows.md, zIndex: 2 }, i))), [[minPercent, currentMin], [maxPercent, currentMax]].map(([percent, current], i) => (_jsxs(Box, { position: "absolute", style: { left: `${percent}%` }, top: chipTop, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: chipBorder, borderRadius: "lg", fontSize: "xs-minus", color: theme.colors.text[500], boxShadow: "sm", zIndex: 3, children: [current, unitSuffix] }, i))), TICKS.map((p) => (_jsx(Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.boxborder[500] }, `tick-${p}`))), _jsx("input", { type: "range", "aria-label": `${label}: minimum`, min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [Math.min(Number(e.target.value), currentMax - step), currentMax]), style: NATIVE_INPUT_STYLE }), _jsx("input", { type: "range", "aria-label": `${label}: maximum`, min: range.min, max: range.max, step: step, value: currentMax, className: "custom-range-slider", onChange: (e) => onChange(sectionId, [currentMin, Math.max(Number(e.target.value), currentMin + step)]), style: NATIVE_INPUT_STYLE })] }), _jsx(SimpleGrid, { columns: 2, spacing: 2, pt: 2, w: "full", children: ["min", "max"].map((bound) => (_jsx(BoundPicker, { bound: bound, sectionId: sectionId, label: label, values: values, current: bound === "min" ? currentMin : currentMax, unit: range.unit, isOpen: openBound === bound, onOpen: () => setOpenBound(bound), onClose: () => setOpenBound(null), onPick: (v) => pick(bound, v) }, bound))) })] }));
+});
+export default RangeSection;

package/dist/esm/Components/FilterSidebar/SectionHeader.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { Badge, Flex, Text } from "@chakra-ui/react";
+import { ChevronDownIcon } from "lucide-react";
+import ToolTip from "../ToolTip/ToolTip.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { onActivationKey } from "../Common/activationKey.js";
+const CLEAR_BADGE = {
+    colorScheme: "red",
+    variant: "solid",
+    fontSize: "xs",
+    borderRadius: "full",
+    px: 2,
+};
+export const SectionHeader = memo(({ label, hasValue }) => {
+    const theme = useCustomTheme();
+    return (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", py: 1, children: [_jsx(ToolTip, { label: label, hasArrow: true, placement: "top", fontSize: "xs", children: _jsx(Text, { fontWeight: 700, fontSize: "md", color: theme.colors.text[500], textAlign: "left", isTruncated: true, flex: "1", minW: 0, children: label }) }), hasValue ? (_jsx(Badge, { ...CLEAR_BADGE, "aria-hidden": true, visibility: "hidden", _after: { content: '"Clear"' } })) : (_jsx(ChevronDownIcon, { size: 10 }))] }));
+});
+export const SectionClear = memo(({ sectionId, label, onClear }) => {
+    const theme = useCustomTheme();
+    return (_jsx(Badge, { ...CLEAR_BADGE, cursor: "pointer", role: "button", tabIndex: 0, "aria-label": `Clear ${label}`, _focusVisible: focusVisibleRing(theme.colors), onClick: (e) => onClear(sectionId, e.currentTarget), onKeyDown: onActivationKey((e) => onClear(sectionId, e.currentTarget)), children: "Clear" }));
+});

package/dist/esm/Components/FilterSidebar/useStableCallback.js

@@ -0,0 +1,8 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+export const useStableCallback = (fn) => {
+    const latest = useRef(fn);
+    useLayoutEffect(() => {
+        latest.current = fn;
+    });
+    return useCallback((...args) => latest.current(...args), []);
+};

package/dist/esm/Components/Form/FormWrapper.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Icon } from "@chakra-ui/react";
+import { isValidElement } from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
-const FormWrapper = ({ icon, text, children, }) => {
+const isElement = (icon) => isValidElement(icon);
+/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. id, data-* and aria-* land on the outer wrapper. */
+const FormWrapper = ({ icon, text, children, ...rest }) => {
     const { colors } = useCustomTheme();
-    return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && (_jsx(Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
+    return (_jsxs(Box, { ...rest, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [isElement(icon) ? (_jsx(Box, { display: "inline-flex", boxSize: "1rem", color: colors.header[500], sx: { "& > svg": { width: "100%", height: "100%" } }, children: icon })) : (icon && _jsx(Icon, { as: icon, boxSize: "1rem", color: colors.header[500] })), text && (_jsx(Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), _jsx(Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 export default FormWrapper;

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;