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

package/dist/Components/FilterSidebar/useStableCallback.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStableCallback = void 0;
+const react_1 = require("react");
+const useStableCallback = (fn) => {
+    const latest = (0, react_1.useRef)(fn);
+    (0, react_1.useLayoutEffect)(() => {
+        latest.current = fn;
+    });
+    return (0, react_1.useCallback)((...args) => latest.current(...args), []);
+};
+exports.useStableCallback = useStableCallback;

package/dist/Components/Form/FormWrapper.d.ts

@@ -1,10 +1,10 @@
-import React, { ElementType } from "react";
-/** Renders an icon+label header above a bordered card — not an HTML form; no submit/validation, just a section wrapper. */
-declare const FormWrapper: ({ icon, text, children, }: {
-    /** Must be a component reference (e.g. FiUser), not a rendered element like <FiUser />. */
-    icon?: ElementType;
+import React, { ElementType, ReactElement } from "react";
+type FormWrapperProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    /** A component reference (FiUser) or a rendered element (<FiUser />); an element is sized to 1rem by its wrapper. */
+    icon?: ElementType | ReactElement;
     text?: string;
-    /** Only icon/text/children are accepted — no `...rest`, so className/style/data- and aria-attributes never reach the DOM. */
     children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+};
+/** 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. */
+declare const FormWrapper: ({ icon, text, children, ...rest }: FormWrapperProps) => import("react/jsx-runtime").JSX.Element;
 export default FormWrapper;

package/dist/Components/Form/FormWrapper.js

@@ -2,10 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-/** 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) => (0, react_2.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 } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] }), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { ...rest, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [isElement(icon) ? ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "inline-flex", boxSize: "1rem", color: colors.header[500], sx: { "& > svg": { width: "100%", height: "100%" } }, children: icon })) : (icon && (0, jsx_runtime_1.jsx)(react_1.Icon, { as: icon, boxSize: "1rem", color: colors.header[500] })), text && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontWeight: 600, fontSize: "xs", lineHeight: "1", textTransform: "uppercase", color: colors.header[500], children: text }))] }), (0, jsx_runtime_1.jsx)(react_1.Box, { borderRadius: "xl", bg: colors.background[50], borderWidth: "1px", borderStyle: "solid", borderColor: colors.boxborder[200], p: "1.5rem", children: children })] }));
 };
 exports.default = FormWrapper;

package/dist/Components/FormField/FormField.js

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

package/dist/Components/Header/Header.js

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

package/dist/Components/Header/HeaderActions.js

@@ -12,21 +12,23 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const Select_1 = __importDefault(require("../Select/Select"));
 const Divider_1 = __importDefault(require("../Divider/Divider"));
+const surfaceFocusRing_1 = require("../Common/surfaceFocusRing");
 const HeaderActions = ({ select, edit, create, surface, }) => {
     var _a, _b, _c;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const canvas = surface !== null && surface !== void 0 ? surface : colors.backgroundColor.main;
     const ink = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, accentText_1.AA_NORMAL_TEXT);
     const iconInk = (0, outlineRung_1.liftToContrast)(colors.secondary[500], canvas, outlineRung_1.AA_NON_TEXT);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(canvas, iconInk);
     const elements = [];
     if (select === null || select === void 0 ? void 0 : select.isSelect) {
         elements.push((0, jsx_runtime_1.jsx)(react_1.Box, { width: (_a = select.width) !== null && _a !== void 0 ? _a : "12.5rem", children: (0, jsx_runtime_1.jsx)(Select_1.default, { 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((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.SquarePen, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsx)(react_1.Text, { color: ink, children: edit.label ? edit.label : "Edit Layout" })] }, "edit"));
     }
     if (create === null || create === void 0 ? void 0 : create.isCreatable) {
-        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
+        elements.push((0, jsx_runtime_1.jsxs)(react_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.CirclePlus, { size: 16, color: iconInk }), (0, jsx_runtime_1.jsxs)(react_1.Text, { color: ink, children: [" ", create.label ? create.label : "Create New", " "] })] }, "create"));
     }
     return ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", gap: "0.625rem", children: elements.map((el, i) => ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [i > 0 && (0, jsx_runtime_1.jsx)(Divider_1.default, {}), el] }, i))) }));
 };

package/dist/Components/IconButton/IconButtonProps.d.ts

@@ -1,6 +1,7 @@
 import type { IconButtonProps as ChakraIconButtonProps } from "@chakra-ui/react";
+import type { DataAttributes } from "../Common/dataAttributes";
 /** Every Chakra `IconButtonProps` prop, with the same theme `Button` look; only `aria-label` is relaxed to optional. */
-export interface IconButtonProps extends Omit<ChakraIconButtonProps, "aria-label"> {
+export interface IconButtonProps extends Omit<ChakraIconButtonProps, "aria-label">, DataAttributes {
     /** The button's accessible name. Optional in the type, but dev builds warn once per mount when it and `aria-labelledby` are both missing. */
     "aria-label"?: string;
     /** Swaps the icon for a spinner inside the same box, and disables the button until it clears. */

package/dist/Components/Input/TextInput.js

@@ -58,7 +58,7 @@ const IconSlot = ({ icon, onClick, ariaLabel, sx, color, isDisabled }) => {
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": ariaLabel, onClick: onClick, disabled: isDisabled, sx: { ...sx, ...(0, focusRing_styles_1.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 = (0, react_1.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 = controlSizes_1.DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
+const TextInput = (0, react_1.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 = controlSizes_1.DEFAULT_CONTROL_SIZE, isInformation = false, informationMessage, leftElementStyle, rightElementStyle, autoComplete, minW, maxW, maxLength, ...props }, ref) => {
     var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const inputRef = (0, react_1.useRef)(null);
@@ -96,7 +96,7 @@ const TextInput = (0, react_1.forwardRef)(({ label, type = "text", id, name, onC
         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/Components/Input/TextInputProps.d.ts

@@ -15,8 +15,10 @@ export type TextInputProps = Omit<InputProps, "id" | "name" | "minW" | "maxW" |
     /** Chakra field look: `"outline"` (default), `"filled"` (tinted, borderless until focus) or `"flushed"` (bottom border only). */
     variant?: "outline" | "filled" | "flushed";
     /** When set, the right icon renders as a real, focusable `<button>`. */
+    onRightIconClick?: () => void;
+    /** @deprecated Misspelt; use `onRightIconClick`, which wins when both are set. */
     onRightIconclick?: () => void;
-    /** Decorative (`aria-hidden`) unless `onRightIconclick` is set. Takes priority over the automatic password toggle. */
+    /** Decorative (`aria-hidden`) unless `onRightIconClick` is set. Takes priority over the automatic password toggle. */
     inputRightIcon?: ReactNode;
     /** Accessible name for the clickable right icon, e.g. "Show password". */
     rightIconAriaLabel?: string;

package/dist/Components/KanbanBoard/AccountCard.js

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

package/dist/Components/KanbanBoard/KanbanBoard.d.ts

@@ -1,4 +1,4 @@
 import { KanbanBoardProps } from "./KanbanBoardProps";
 /** Full drag-and-drop board (columns + virtualized cards); its header select/edit/create bar is `HeaderActions`, not the unrelated `KanbanActions`. */
-declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete, onOpen, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, height, maxH, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const KanbanBoard: ({ data, customColumns, customizeColumn, onDrag, onDelete: onDeleteProp, onOpen: onOpenProp, onColumnDelete, isLoading, kanbanSelect, kanbanEdit, kanbanCreate, virtualization, permissions, noItems, enableColumnCollapse, collapsedColumns: defaultCollapsedColumns, onColumnCollapseChange, enableColumnReorder, onColumnReorder, preferences, height, maxH, }: KanbanBoardProps) => import("react/jsx-runtime").JSX.Element | null;
 export default KanbanBoard;

package/dist/Components/KanbanBoard/KanbanBoard.js

@@ -57,6 +57,7 @@ const OverflowTooltipText_1 = __importDefault(require("../SideBar/components/Ove
 const Button_1 = __importDefault(require("../Button/Button"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const boardStore_1 = require("./boardStore");
+const activationKey_1 = require("../Common/activationKey");
 /** Narrow rail width when a column is horizontally collapsed. */
 const COLLAPSED_KANBAN_COLUMN_WIDTH = "2.75rem";
 const CARD_LABEL_EXCLUDE = ["id", "details"];
@@ -108,7 +109,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: "",
@@ -173,6 +174,8 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         preferences.page,
         preferences.key,
         preferences.name,
+        preferences.orgId,
+        preferences.token,
     ]);
     (0, react_1.useEffect)(() => {
         if (!enableColumnCollapse || !preferences.baseurl || preferencesLoading) {
@@ -413,6 +416,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 = (0, react_1.useRef)(onDeleteProp);
+    onDeleteRef.current = onDeleteProp;
+    const onOpenRef = (0, react_1.useRef)(onOpenProp);
+    onOpenRef.current = onOpenProp;
+    const onDelete = (0, react_1.useCallback)((account) => { var _a; return (_a = onDeleteRef.current) === null || _a === void 0 ? void 0 : _a.call(onDeleteRef, account); }, []);
+    const onOpen = (0, react_1.useCallback)((account) => { var _a; return (_a = onOpenRef.current) === null || _a === void 0 ? void 0 : _a.call(onOpenRef, account); }, []);
     const rowBaseProps = (0, react_1.useMemo)(() => ({
         canDrag,
         expandedStore,
@@ -475,12 +484,7 @@ const KanbanBoard = ({ data, customColumns, customizeColumn, onDrag, onDelete, o
         tabIndex: 0,
         sx: (0, focusRing_styles_1.focusVisibleStyles)(colors),
         onClick: addColumn,
-        onKeyDown: (e) => {
-            if (e.key !== "Enter" && e.key !== " ")
-                return;
-            e.preventDefault();
-            addColumn();
-        },
+        onKeyDown: (0, activationKey_1.onActivationKey)(addColumn),
     };
     const addColumnBox = !isBoardLoading && showAddColumn && hasAnyColumns && ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Plus, size: 20, color: colors.text[700] }), (0, jsx_runtime_1.jsx)(react_2.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/Components/LauncherTrigger/LauncherTrigger.js

@@ -43,6 +43,6 @@ const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k",
     if (display === "icon") {
         return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.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 ? (0, exports.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: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }) }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.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: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.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: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.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 }))] }));
 };
 exports.default = LauncherTrigger;

package/dist/Components/LazyWrapper/LazyWrapper.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+/** Suspense boundary around lazy children, with a themed spinner by default. */
 export interface LazyWrapperProps {
     children: React.ReactNode;
-    /** Overrides the default spinner entirely — `minHeight` below then has no effect. */
+    /** Replaces the spinner, `null` included (renders nothing); `minHeight` then has no effect. */
     fallback?: React.ReactNode;
     /** Sizes only the built-in spinner — ignored once a custom `fallback` is passed. */
     minHeight?: string;

package/dist/Components/LazyWrapper/LazyWrapper.js

@@ -9,5 +9,5 @@ const DefaultFallback = ({ minHeight }) => {
     return ((0, jsx_runtime_1.jsx)(react_2.Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: minHeight, width: "100%", p: "2rem", children: (0, jsx_runtime_1.jsx)(react_2.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", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback !== null && fallback !== void 0 ? fallback : (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }), children: children }));
+const LazyWrapper = ({ children, fallback, minHeight = "400px", }) => ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: fallback === undefined ? (0, jsx_runtime_1.jsx)(DefaultFallback, { minHeight: minHeight }) : fallback, children: children }));
 exports.default = LazyWrapper;

package/dist/Components/MediaViewer/MediaViewer.js

@@ -40,7 +40,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
-const date_fns_1 = require("date-fns");
 const Modal_1 = __importStar(require("../Modal/Modal"));
 const useViewerChrome_1 = require("./useViewerChrome");
 const ViewerIconButton_1 = __importDefault(require("./components/ViewerIconButton"));
@@ -54,6 +53,8 @@ const mediaKindIcon_1 = require("./components/mediaKindIcon");
 const mediaItems_1 = require("./mediaItems");
 const MediaViewerProps_1 = require("./MediaViewerProps");
 const viewportHeight_1 = require("../../Theme/tokens/builders/viewportHeight");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BOX_SHADOW_OPACITY_TRANSITION = (0, motion_1.transitionFor)(["box-shadow", "opacity"]);
 const SWIPE_MIN_PX = 50;
 const NO_SWIPE_ZONE = '[role="toolbar"], [role="slider"], [role="group"]';
 const COPIED_FEEDBACK_MS = 1500;
@@ -218,7 +219,7 @@ const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultInde
     const meta = (() => {
         const type = (0, mediaItems_1.fileTypeLabel)(item.src);
         const parts = [type, item.fileSize ? (0, mediaItems_1.formatFileSize)(item.fileSize) : null].filter(Boolean);
-        const uploaded = item.uploadedAt ? labels.uploadedOn((0, date_fns_1.format)(new Date(item.uploadedAt), "MMM d, yyyy")) : null;
+        const uploaded = item.uploadedAt ? labels.uploadedOn((0, mediaItems_1.formatUploadedDate)(item.uploadedAt)) : null;
         return [parts.join(" · "), uploaded].filter(Boolean).join(" — ");
     })();
     return ((0, jsx_runtime_1.jsx)(Modal_1.default, { isOpen: isOpen, onClose: onClose, size: "full", hideCloseButton: true, initialFocusRef: stageRef, contentProps: { bg: chrome.stage, m: 0, borderRadius: 0 }, children: (0, jsx_runtime_1.jsxs)(Modal_1.ModalBody, { p: 0, display: "flex", flexDirection: "column", sx: viewportHeight_1.fullViewportHeight, children: [total > 1 && ((0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { "aria-live": "polite", children: labels.nowShowing(safeIndex + 1, total) })), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 4, py: 3, bg: chrome.raised, color: chrome.ink, "data-testid": "media-viewer-header", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h2", size: "sm", noOfLines: 1, color: chrome.ink, children: title }), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", color: chrome.muted, fontSize: "sm", "data-testid": "media-viewer-counter", children: labels.counter(safeIndex + 1, total) })), kindLabelKey && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", px: 2, py: 0.5, borderRadius: "base", bg: chrome.hover, color: chrome.ink, fontSize: "xs", fontWeight: 600, children: labels[kindLabelKey] })), (0, jsx_runtime_1.jsx)(react_2.Flex, { flex: 1 }), item.kind === "youtube" ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.openOnYoutube, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }), href: (0, mediaItems_1.youtubeWatch)(item.src) })) : ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }), href: item.src })), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: copied ? labels.copied : labels.copyLink, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 16 }), onClick: copyLink, testId: "media-viewer-copy-link" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.close, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 18 }), onClick: onClose, testId: "media-viewer-close" })] }), (0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 24 }), onClick: () => go.current(-1), round: true, testId: "media-viewer-prev" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", right: { base: 2, md: 4 }, transform: "translateY(-50%)", zIndex: 2, children: (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 24 }), onClick: () => go.current(1), round: true, testId: "media-viewer-next" }) })] }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { bg: chrome.raised, py: 3, minW: 0, children: [meta && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: chrome.muted, mb: 2, px: 4, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", title: meta, children: meta })), total > 1 && ((0, jsx_runtime_1.jsx)(react_2.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) => {
@@ -228,7 +229,7 @@ const MediaViewer = ({ isOpen, onClose, items, index, onIndexChange, defaultInde
                                 const extLabel = (0, mediaItems_1.fileTypeLabel)(tile.src);
                                 return ((0, jsx_runtime_1.jsxs)(react_2.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 ? ((0, jsx_runtime_1.jsx)(VideoPoster_1.default, { item: tile })) : showThumb ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: (0, react_1.cloneElement)((0, mediaKindIcon_1.iconForKind)(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && (0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: extLabel })] })), isSelected && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
+                                        : "none", transition: BOX_SHADOW_OPACITY_TRANSITION, _hover: { opacity: 1 }, children: [showPoster ? ((0, jsx_runtime_1.jsx)(VideoPoster_1.default, { item: tile })) : showThumb ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "img", src: tile.thumb, alt: "", w: "100%", h: "100%", objectFit: "cover" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", w: "100%", h: "100%", color: chrome.muted, children: (0, react_1.cloneElement)((0, mediaKindIcon_1.iconForKind)(tile.kind), { size: 20, "aria-hidden": true }) }), extLabel && (0, jsx_runtime_1.jsx)(TileChip_1.default, { place: "br", children: extLabel })] })), isSelected && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: 1, right: 1, align: "center", justify: "center", w: "16px", h: "16px", borderRadius: "full", bg: chrome.accent, color: chrome.onAccent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 10, "aria-hidden": true }) }))] }, tile.key));
                             }) }))] })] }) }));
 };
 exports.default = MediaViewer;

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

@@ -8,12 +8,15 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 const mediaItems_1 = require("../mediaItems");
 const useViewerChrome_1 = require("../useViewerChrome");
 const PlaybackTimeline_1 = require("./PlaybackTimeline");
 const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
 const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
 const MediaAudioPlayerProps_1 = require("./MediaAudioPlayerProps");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const VOLUME_WIDTH_TRANSITION = (0, motion_1.transitionFor)(["width"], "base", "out");
 const ARROW_SEEK_SECONDS = 5;
 const ARROW_VOLUME_STEP = 0.1;
 const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides }) => {
@@ -31,6 +34,7 @@ const MediaAudioPlayer = ({ item, label, onTimeChange, labels: labelOverrides })
     const [buffered, setBuffered] = (0, react_1.useState)([]);
     const [volumeHover, setVolumeHover] = (0, react_1.useState)(false);
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const audio = () => audioRef.current;
     const togglePlay = () => {
         const a = audio();
@@ -133,6 +137,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 ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Music, { size: 48, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", maxW: "480px", children: [(0, jsx_runtime_1.jsx)(PlaybackTimeline_1.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" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 }), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 }), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-forward" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-audio-mute" }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineClock, { timeline: timeline, duration: duration, testId: "media-audio-time" })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.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))) }) })] }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
+                }, "data-testid": "media-audio" }), failed ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, {}), label: label, message: labels.audioError, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-audio-error" })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "center", justify: "center", h: "100%", px: { base: 4, md: 10 }, gap: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { boxSize: { base: "96px", md: "140px" }, borderRadius: "full", bg: chrome.raised, align: "center", justify: "center", color: chrome.accent, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Music, { size: 48, "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 600, color: chrome.ink, noOfLines: 1, maxW: "480px", textAlign: "center", children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", maxW: "480px", children: [(0, jsx_runtime_1.jsx)(PlaybackTimeline_1.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" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.audioControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": playing ? labels.pause : labels.play, icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 20 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 }), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 }), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-audio-forward" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-audio-mute" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: volumeHover ? "88px" : "0px", overflow: "hidden", px: volumeHover ? 1 : 0, transition: VOLUME_WIDTH_TRANSITION, sx: { "&:focus-within": { width: "88px", paddingInline: "4px" } }, children: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: focusShadow } })] }) })] }), (0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineClock, { timeline: timeline, duration: duration, testId: "media-audio-time" })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.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))) }) })] }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-audio-download" })] })] })] })] }))] }));
 };
 exports.default = MediaAudioPlayer;

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

@@ -14,15 +14,19 @@ const mediaKindIcon_1 = require("./mediaKindIcon");
 const MediaStatusPanel_1 = __importDefault(require("./MediaStatusPanel"));
 const ViewerIconButton_1 = __importDefault(require("./ViewerIconButton"));
 const MediaImageViewerProps_1 = require("./MediaImageViewerProps");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const TRANSFORM_OUT_TRANSITION = (0, motion_1.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 = { ...MediaImageViewerProps_1.defaultMediaImageViewerLabels, ...labelOverrides };
     const chrome = (0, useViewerChrome_1.useViewerChrome)();
     const stageRef = (0, react_1.useRef)(null);
+    const imageRef = (0, react_1.useRef)(null);
     const drag = (0, react_1.useRef)(null);
+    const pan = (0, react_1.useRef)(ORIGIN);
     const [zoom, setZoom] = (0, react_1.useState)(100);
     const [rotation, setRotation] = (0, react_1.useState)(0);
-    const [pan, setPan] = (0, react_1.useState)(ORIGIN);
     const [failed, setFailed] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const { isFullscreen, toggle: toggleFullscreen, isSupported: fullscreenSupported } = (0, useFullscreen_1.useFullscreen)(stageRef);
@@ -31,21 +35,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.
     (0, react_1.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 = (0, mediaItems_1.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 = (0, react_1.useRef)({ zoomBy, reset, rotate, toggleFullscreen });
@@ -79,14 +88,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;
@@ -95,9 +106,9 @@ const MediaImageViewer = ({ item, label, onZoomChange, onNaturalSize, labels: la
     if (unsupported) {
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", inset: 0, bg: chrome.stage, children: (0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.iconForKind)("image"), label: label, message: labels.unsupportedFormat, hint: labels.unsupportedFormatHint, downloadHref: item.src, downloadLabel: labels.download, tone: "warning", testId: "media-image-unsupported" }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.warningIcon)(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: stageRef, position: "absolute", inset: 0, bg: chrome.stage, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(MediaStatusPanel_1.default, { icon: (0, mediaKindIcon_1.warningIcon)(), label: label, message: labels.imageError, downloadLabel: labels.download, downloadHref: item.src, tone: "warning", testId: "media-image-error" })) : ((0, jsx_runtime_1.jsx)(react_2.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" })) }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomOut, hint: "-", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomOut, { size: 18 }), onClick: () => zoomBy(-mediaItems_1.ZOOM_STEP), isDisabled: zoom <= mediaItems_1.MIN_ZOOM, testId: "media-zoom-out" }), (0, jsx_runtime_1.jsx)(react_2.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}%` }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomIn, hint: "+", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 18 }), onClick: () => zoomBy(mediaItems_1.ZOOM_STEP), isDisabled: zoom >= mediaItems_1.MAX_ZOOM, testId: "media-zoom-in" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.fitLabel, hint: "0", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rotate, hint: "R", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.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" })) }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomOut, hint: "-", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomOut, { size: 18 }), onClick: () => zoomBy(-mediaItems_1.ZOOM_STEP), isDisabled: zoom <= mediaItems_1.MIN_ZOOM, testId: "media-zoom-out" }), (0, jsx_runtime_1.jsx)(react_2.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}%` }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.zoomIn, hint: "+", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ZoomIn, { size: 18 }), onClick: () => zoomBy(mediaItems_1.ZOOM_STEP), isDisabled: zoom >= mediaItems_1.MAX_ZOOM, testId: "media-zoom-in" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.fitLabel, hint: "0", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Scan, { size: 16, "aria-hidden": true }), onClick: reset, testId: "media-fit" }), (0, jsx_runtime_1.jsx)(react_2.Box, { w: "1px", h: "24px", bg: chrome.hover, mx: 1, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rotate, hint: "R", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RotateCw, { size: 18 }), onClick: rotate, testId: "media-rotate" }), fullscreenSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-fullscreen" })) : null] })] }));
 };
 exports.default = MediaImageViewer;

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

@@ -4,8 +4,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 const typography_1 = require("../../../Theme/tokens/primitives/typography");
 const useViewerChrome_1 = require("../useViewerChrome");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const HEIGHT_TRANSITION = (0, motion_1.transitionFor)(["height"], "fast", "out");
+const THUMB_TRANSITION = (0, motion_1.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));
@@ -17,6 +21,7 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
     const [hovering, setHovering] = (0, react_1.useState)(false);
     const [previewX, setPreviewX] = (0, react_1.useState)(null);
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const disabled = isDisabled || !Number.isFinite(max) || max <= 0;
     const fraction = disabled ? 0 : clamp(value / max, 0, 1);
     const fractionAt = (clientX) => {
@@ -85,9 +90,9 @@ const MediaScrubber = ({ value, max, buffered = [], onSeek, onPreview, ariaLabel
             setHovering(false);
             if (!dragging.current)
                 endPreview();
-        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.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: typography_1.NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, style: {
+        }, children: [previewLabel !== null ? ((0, jsx_runtime_1.jsx)(react_2.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: typography_1.NUMERIC_TEXT, "data-testid": testId ? `${testId}-tooltip` : undefined, children: previewLabel })) : null, (0, jsx_runtime_1.jsxs)(react_2.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) => ((0, jsx_runtime_1.jsx)(react_2.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))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.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))), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, bottom: 0, left: 0, style: { width: `${fraction * 100}%` }, bg: chrome.accent, borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.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" })] })] }));
 };
 exports.default = MediaScrubber;

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

@@ -10,6 +10,7 @@ const react_3 = require("@emotion/react");
 const lucide_react_1 = require("lucide-react");
 const useFullscreen_1 = require("../../../Hooks/useFullscreen");
 const focusRing_1 = require("../../../Theme/tokens/builders/focusRing");
+const surfaceFocusRing_1 = require("../../Common/surfaceFocusRing");
 const mediaItems_1 = require("../mediaItems");
 const useAutoHideChrome_1 = require("../hooks/useAutoHideChrome");
 const motion_1 = require("../../../Theme/chakra/motion");
@@ -53,6 +54,7 @@ const MediaVideoPlayer = ({ item, label, onTimeChange, onPrevious, onNext, label
     const iosFullscreen = !shellFullscreen && hasIosVideoFullscreen();
     const pipSupported = typeof document !== "undefined" && document.pictureInPictureEnabled === true;
     const ring = (0, focusRing_1.settleBetween)(chrome.accent, [chrome.stage, chrome.raised, chrome.hover]);
+    const focusShadow = (0, surfaceFocusRing_1.surfaceFocusRing)(chrome.stage, ring);
     const { visible: chromeVisible, handlers: chromeHandlers } = (0, useAutoHideChrome_1.useAutoHideChrome)(shellRef, playing && !unsupported);
     const video = () => videoRef.current;
     const togglePlay = () => {
@@ -243,6 +245,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 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.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" ? (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 22, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 22, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(PlaybackTimeline_1.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" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 })), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 })), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: `0 0 0 2px ${ring}` } })] }) })] }), (0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineClock, { timeline: timeline, duration: duration, testId: "media-video-time" })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.captions, hint: "C", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.pip, hint: "P", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
+                    }, "data-testid": "media-video" })) }), buffering && !failed ? ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", pointerEvents: "none", "data-testid": "media-video-buffering", children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Loader2, boxSize: "40px", color: chrome.ink, sx: reducedMotion ? undefined : { animation: `${spin} 0.9s linear infinite` } }) })) : null, ripple ? ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.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" ? (0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 22, "aria-hidden": true }) : (0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 22, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, children: `${SKIP_SECONDS}s` })] }) }, ripple.nonce)) : null, !playing && !failed ? ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.play, "aria-hidden": true, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.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, (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: 0, left: 0, right: 0, h: "72px", bgImage: scrimTop, pointerEvents: "none", opacity: showChrome ? 1 : 0, transition: fadeTransition, "aria-hidden": true }), (0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(PlaybackTimeline_1.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" }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "toolbar", "aria-label": labels.videoControls, align: "center", justify: "space-between", gap: 2, wrap: "wrap", mt: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: playing ? labels.pause : labels.play, hint: "K", icon: playing ? (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 18 }), onClick: togglePlay, testId: "media-video-toggle" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.rewind, hint: "J", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipBack, { size: 16 })), onClick: () => seekBy(-mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-rewind" }), (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.forward, hint: "L", icon: seekIcon((0, jsx_runtime_1.jsx)(lucide_react_1.SkipForward, { size: 16 })), onClick: () => seekBy(mediaItems_1.SEEK_STEP_SECONDS), testId: "media-video-forward" }), onPrevious ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.previous, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), onClick: onPrevious, testId: "media-video-previous" })) : null, onNext ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.next, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: 18 }), onClick: onNext, testId: "media-video-next" })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", onMouseEnter: () => setVolumeHover(true), onMouseLeave: () => setVolumeHover(false), sx: { "&:focus-within": { "--volume-w": "88px" } }, children: [(0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: muted || volume === 0 ? labels.unmute : labels.mute, hint: "M", icon: muted || volume === 0 ? (0, jsx_runtime_1.jsx)(lucide_react_1.VolumeX, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { size: 18 }), onClick: toggleMute, pressed: muted, testId: "media-video-mute" }), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Slider, { "aria-label": labels.volume, min: 0, max: 100, step: 5, value: effectiveVolume, onChange: changeVolume, focusThumbOnChange: false, getAriaValueText: (v) => `${v}%`, children: [(0, jsx_runtime_1.jsx)(react_2.SliderTrack, { bg: chrome.track, h: "4px", borderRadius: "full", children: (0, jsx_runtime_1.jsx)(react_2.SliderFilledTrack, { bg: chrome.ink }) }), (0, jsx_runtime_1.jsx)(react_2.SliderThumb, { bg: chrome.ink, boxSize: "12px", _focusVisible: { boxShadow: focusShadow } })] }) })] }), (0, jsx_runtime_1.jsx)(PlaybackTimeline_1.TimelineClock, { timeline: timeline, duration: duration, testId: "media-video-time" })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsxs)(react_2.Menu, { placement: "top-end", children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "span", align: "center", gap: 1, children: [`${rate}x`, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, "aria-hidden": true })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "160px", bg: chrome.raised, zIndex: "popover", children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { type: "radio", title: labels.speed, value: String(rate), onChange: (value) => changeRate(Number(value)), children: mediaItems_1.PLAYBACK_SPEEDS.map((speed) => ((0, jsx_runtime_1.jsx)(react_2.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 ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.captions, hint: "C", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Captions, { size: 18 }), onClick: toggleCaptions, pressed: captionsOn, testId: "media-video-captions" })) : null, pipSupported ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.pip, hint: "P", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.PictureInPicture2, { size: 18 }), onClick: () => void togglePip(), testId: "media-video-pip" })) : null, (0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: labels.download, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 18 }), href: item.src, testId: "media-video-download" }), shellFullscreen || iosFullscreen ? ((0, jsx_runtime_1.jsx)(ViewerIconButton_1.default, { label: isFullscreen ? labels.exitFullscreen : labels.fullscreen, hint: "F", icon: isFullscreen ? (0, jsx_runtime_1.jsx)(lucide_react_1.Minimize, { size: 18 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Maximize, { size: 18 }), onClick: () => void toggleFullscreen(), pressed: isFullscreen, testId: "media-video-fullscreen" })) : null] })] })] })] }));
 };
 exports.default = MediaVideoPlayer;