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

package/dist/Components/ToolTip/ToolTip.js

@@ -15,20 +15,98 @@ const withViewportPadding = (modifiers) => {
         return modifiers;
     return [...caller, { name: "preventOverflow", options: { padding: VIEWPORT_PADDING } }];
 };
+// NOTE: Chakra clones this instead of the real trigger, so the trigger never remounts on arming.
+const TriggerBridge = (0, react_1.forwardRef)(function TriggerBridge({ target, onSync, ...handlers }, ref) {
+    (0, react_1.useImperativeHandle)(ref, () => target.current, [target]);
+    (0, react_1.useLayoutEffect)(() => onSync(handlers));
+    (0, react_1.useLayoutEffect)(() => () => onSync(null), [onSync]);
+    return null;
+});
+const getElementRef = (element) => element.ref;
 /** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
 function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize, bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = TOOLTIP_OPEN_DELAY_MS, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
     // NOTE: hook always runs (Rules of Hooks) but is inert unless overflowOnly is set — no cost for ordinary tooltips.
-    const { ref, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
+    const { ref: truncationRef, isTruncated } = (0, useIsTruncated_1.useIsTruncated)(label, overflowOnly && (0, react_1.isValidElement)(children));
     const safeModifiers = (0, react_1.useMemo)(() => withViewportPadding(modifiers), [modifiers]);
+    const [armed, setArmed] = (0, react_1.useState)(() => Boolean(isOpen || defaultIsOpen));
+    if (isOpen && !armed)
+        setArmed(true);
+    const triggerRef = (0, react_1.useRef)(null);
+    const bridge = (0, react_1.useRef)(null);
+    const pendingArm = (0, react_1.useRef)(null);
+    const [describedBy, setDescribedBy] = (0, react_1.useState)();
+    const syncBridge = (0, react_1.useCallback)((handlers) => {
+        var _a, _b;
+        bridge.current = handlers;
+        setDescribedBy(handlers === null || handlers === void 0 ? void 0 : handlers["aria-describedby"]);
+        const pending = pendingArm.current;
+        if (!handlers || !pending)
+            return;
+        pendingArm.current = null;
+        if (pending.kind === "pointer")
+            (_a = handlers.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(handlers, pending.event);
+        else
+            (_b = handlers.onFocus) === null || _b === void 0 ? void 0 : _b.call(handlers, pending.event);
+    }, []);
     let content = children;
-    let effectiveDisabled = isDisabled;
+    let effectiveDisabled = Boolean(isDisabled);
     if (overflowOnly && (0, react_1.isValidElement)(children)) {
-        const child = children;
-        const childRef = child.ref;
-        content = (0, react_1.cloneElement)(child, {
-            ref: (0, mergeRefs_1.mergeRefs)(ref, childRef),
+        content = (0, react_1.cloneElement)(children, {
+            ref: (0, mergeRefs_1.mergeRefs)(truncationRef, getElementRef(children)),
         });
-        effectiveDisabled = Boolean(isDisabled) || !isTruncated;
+        effectiveDisabled = effectiveDisabled || !isTruncated;
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: safeModifiers, closeOnPointerDown: closeOnPointerDown, style: styles, children: content }));
+    if (!label)
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, null] });
+    const child = ((0, react_1.isValidElement)(content) ? (content) : ((0, jsx_runtime_1.jsx)(react_2.chakra.span, { display: "inline-block", tabIndex: 0, children: content })));
+    const own = child.props;
+    const arm = (event) => {
+        if (effectiveDisabled)
+            return;
+        pendingArm.current = event;
+        setArmed(true);
+    };
+    const trigger = (0, react_1.cloneElement)(child, {
+        ref: (0, mergeRefs_1.mergeRefs)(triggerRef, getElementRef(child)),
+        "aria-describedby": describedBy,
+        onPointerEnter: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerEnter) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onPointerEnter) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else if (e.pointerType !== "touch")
+                arm({ kind: "pointer", event: e });
+        },
+        onFocus: (e) => {
+            var _a, _b, _c;
+            (_a = own.onFocus) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (e.defaultPrevented)
+                return;
+            if (bridge.current)
+                (_c = (_b = bridge.current).onFocus) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+            else
+                arm({ kind: "focus", event: e });
+        },
+        onBlur: (e) => {
+            var _a, _b, _c;
+            (_a = own.onBlur) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onBlur) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onClick: (e) => {
+            var _a, _b, _c;
+            (_a = own.onClick) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onClick) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+        onPointerDown: (e) => {
+            var _a, _b, _c;
+            (_a = own.onPointerDown) === null || _a === void 0 ? void 0 : _a.call(own, e);
+            if (!e.defaultPrevented)
+                (_c = (_b = bridge.current) === null || _b === void 0 ? void 0 : _b.onPointerDown) === null || _c === void 0 ? void 0 : _c.call(_b, e);
+        },
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [trigger, armed && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: bg, color: color, isDisabled: effectiveDisabled, isOpen: isOpen, defaultIsOpen: defaultIsOpen, openDelay: openDelay, closeDelay: closeDelay, arrowSize: arrowSize, closeOnClick: closeOnClick, size: size, width: width, height: height, arrowPadding: arrowPadding, arrowShadowColor: arrowShadowColor, direction: direction, gutter: gutter, onClose: onClose, modifiers: safeModifiers, closeOnPointerDown: closeOnPointerDown, style: styles, children: (0, jsx_runtime_1.jsx)(TriggerBridge, { target: triggerRef, onSync: syncBridge }) }))] }));
 }

package/dist/Components/UpgradeButton/UpgradeButton.js

@@ -8,6 +8,7 @@ const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 const color_1 = require("../../Theme/tokens/builders/color");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
 const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
 const ACCENT_GOLD = neutrals_1.neutralTokens.yellow[400];
@@ -46,7 +47,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
     const g = `linear-gradient(135deg, ${resolved.from} 0%, ${resolved.to} 100%)`;
     const gReversed = `linear-gradient(135deg, ${resolved.to} 0%, ${resolved.from} 100%)`;
     const hasMobile = !!mobileLabel && mobileLabel !== label;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: "bold", textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || label, onClick: blocked ? undefined : onClick, disabled: isDisabled, position: "relative", cursor: blocked ? "default" : "pointer", opacity: isDisabled ? 0.6 : 1, px: { base: s.px === "20px" ? "14px" : s.px, md: s.px }, py: s.py, bgImage: g, color: ink, borderRadius: s.radius, fontWeight: 700, textAlign: "center", overflow: "hidden", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", transition: "transform 0.3s ease, box-shadow 0.3s ease, background-image 0.3s ease", _hover: blocked
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -68,7 +69,8 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = lucide_react_1.Spa
                     transition: "left 0.7s ease",
                     pointerEvents: "none",
                 },
+                ...(0, motion_1.reducedMotionSx)({ "&::before": { transition: "none" } }),
             }
-            : (0, focusRing_styles_1.focusVisibleStyles)(c), children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : { ...(0, focusRing_styles_1.focusVisibleStyles)(c), ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && (0, jsx_runtime_1.jsx)(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: 700, color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 exports.default = UpgradeButton;

package/dist/Components/UserDetails/AddUserModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
@@ -80,7 +81,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), children: [labels.addNewUser, upgradeNotice] }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => ((0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors[field.id], children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { id: field.id, name: field.id, type: field.type, label: field.label, placeholder: field.placeholder, value: values[field.id], onChange: handleChange(field.id), isRequired: true, error: !!errors[field.id], errorMessage: errors[field.id], width: "100%" }) }, field.id))), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!errors.role, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: (_a = values.role) !== null && _a !== void 0 ? _a : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/ChangeRoleModal.js

@@ -7,6 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const SearchSelect_1 = __importDefault(require("../SearchSelect/SearchSelect"));
@@ -36,7 +37,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (0, surfaceRaised_1.raisedRule)(colors), children: labels.changeRoleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsx)(react_2.ModalBody, { py: 5, children: (0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: !!error, isRequired: true, children: (0, jsx_runtime_1.jsx)(SearchSelect_1.default, { label: labels.role, options: roleOptions.map((item) => ({
                                             id: item.id,
                                             label: item.label,
                                         })), value: selectedRole !== null && selectedRole !== void 0 ? selectedRole : undefined, onSelect: (option) => {

package/dist/Components/UserDetails/UserDetails.js

@@ -44,7 +44,9 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
@@ -97,6 +99,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const [actionUserId, setActionUserId] = (0, react_1.useState)(null);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
+    const detailTile = (0, planeStep_1.bandOn)(colors.primary[50], surface);
     const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
@@ -114,7 +117,12 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                         background: isSelected
                                             ? rowBackgrounds.selectedActive
                                             : rowBackgrounds.active,
-                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", role: "button", tabIndex: 0, "aria-current": isSelected ? true : undefined, _focusVisible: (0, focusRing_styles_1.focusVisibleRing)(colors), onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), onKeyDown: (e) => {
+                                        if (e.key !== "Enter" && e.key !== " ")
+                                            return;
+                                        e.preventDefault();
+                                        onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user);
+                                    }, children: [isSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), (0, jsx_runtime_1.jsx)(PersonChip_1.default, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
                             }) })) })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, display: "flex", flexDirection: "column", order: { base: 1, lg: 2 }, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? ((0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, p: 4, align: "stretch", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "16" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", width: "50%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Box, { w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", width: "30%", mb: 2 }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: { base: "column", md: "row" }, alignItems: { base: "flex-start", md: "center" }, justifyContent: "space-between", gap: 4, p: 4, borderBottom: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "xs", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && ((0, jsx_runtime_1.jsx)(react_2.Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && ((0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && ((0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), (0, jsx_runtime_1.jsx)(react_2.Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Shield, { size: 13 }), onClick: () => {
@@ -132,7 +140,7 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
                                                 const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : lucide_react_1.UserRound;
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 3, px: 3, py: 2.5, _hover: {
                                                                 bg: (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
-                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, colors.primary[50]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "30px", bg: detailTile, borderRadius: "lg", color: (0, accentText_1.accentTextOnCanvas)(colors.primary, detailTile), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(Icon, { size: 15 }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { minWidth: "110px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && ((0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }))] }, index));
                                             }) })] })] })) : ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), (0, jsx_runtime_1.jsx)(AddUserModal_1.default, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
                     await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
                     onAddUserClose();

package/dist/Components/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,15 @@
+export declare const visuallyHiddenStyle: {
+    readonly border: "0";
+    readonly clip: "rect(0, 0, 0, 0)";
+    readonly height: "1px";
+    readonly width: "1px";
+    readonly margin: "-1px";
+    readonly padding: "0";
+    readonly overflow: "hidden";
+    readonly whiteSpace: "nowrap";
+    readonly position: "fixed";
+    readonly top: "0";
+    readonly left: "0";
+};
+declare const VisuallyHidden: import("@chakra-ui/react").ChakraComponent<"span", {}>;
+export default VisuallyHidden;

package/dist/Components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.visuallyHiddenStyle = void 0;
+const react_1 = require("@chakra-ui/react");
+// NOTE: fixed, not Chakra's absolute: an absolute 1px box can extend a scrolled page.
+exports.visuallyHiddenStyle = {
+    border: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    width: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    position: "fixed",
+    top: "0",
+    left: "0",
+};
+const VisuallyHidden = (0, react_1.chakra)("span", { baseStyle: exports.visuallyHiddenStyle });
+VisuallyHidden.displayName = "VisuallyHidden";
+exports.default = VisuallyHidden;

package/dist/Components/VisuallyHidden/VisuallyHiddenProps.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLChakraProps } from "@chakra-ui/react";
+/** A `<span>` (or any `as` element) that screen readers read and sighted users never see; every attribute and ref reach it. */
+export type VisuallyHiddenProps = HTMLChakraProps<"span">;

package/dist/Components/VisuallyHidden/VisuallyHiddenProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/WizardDialog/WizardDialog.js

@@ -80,23 +80,28 @@ const WizardBody = ({ flow, steps, labels, testId }) => {
                             value: candidate.summary,
                         })) })] })) : null] }));
 };
-const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlockedReason, onCancel, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const reasonId = (0, react_1.useId)();
+    const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? ((0, jsx_runtime_1.jsx)(react_2.Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+};
 /** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
-const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
     const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
     const resolved = { ...DEFAULT_LABELS, ...labels };
     const guardedClose = () => {
         if (!isFinishing)
             onClose();
     };
-    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }) })] }));
 };
 exports.WizardDialog = WizardDialog;
 /** The same wizard inline, for a full-page flow rather than a modal. */
-const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+const Wizard = ({ steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
     const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish });
     const resolved = { ...DEFAULT_LABELS, ...labels };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: onCancel })] }));
 };
 exports.Wizard = Wizard;
 exports.default = exports.WizardDialog;

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -32,6 +32,10 @@ export interface WizardDialogProps {
     onFinish: () => void;
     /** Shows the Finish spinner and disables close, Esc, Back and Cancel. */
     isFinishing?: boolean;
+    /** Disables Finish on the last step (a pending upload, say); Back and the stepper still work. */
+    finishDisabled?: boolean;
+    /** Why Finish is disabled; shown beside it and wired as its `aria-describedby`. Needs `finishDisabled`. */
+    finishBlockedReason?: string;
     /** Controlled step; omit for uncontrolled (resets to the first step on close). */
     stepId?: string;
     /** Fires whenever the visible step changes, controlled or not. */

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -1,10 +1,14 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = WorkspaceTrayPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const PLACEMENT_STYLE = {
     "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
     "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
@@ -67,7 +71,7 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: zIndices_1.default.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -1,14 +1,27 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = WorkspaceWindow;
 exports.WorkspaceTray = WorkspaceTray;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 // NOTE: no maximize/restore toggle (removed by product decision) — onMedium/onMaximize kept optional for back-compat.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
+const WindowTitle = ({ testId, color, children }) => {
+    const { headerId, setHeaderMounted } = (0, react_1.useModalContext)();
+    (0, react_2.useEffect)(() => {
+        setHeaderMounted(true);
+        return () => setHeaderMounted(false);
+    }, [setHeaderMounted]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
+};
 // Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
 function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
     // Must run before the early return: a minimized render would otherwise skip the hook
@@ -25,7 +38,7 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: theme.colors.text[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 // Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
 function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
@@ -34,7 +47,7 @@ function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", r
         return null;
     return (
     // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
-    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: zIndices_1.default.modal, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
             const api = {
                 restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
                 close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -15,8 +15,9 @@ export interface WorkspaceWindowProps {
     /** Window body. */
     children: ReactNode;
     onMinimize?: () => void;
-    /** Kept for back-compat only — no maximize/restore control is rendered; this is never called. */
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMedium?: () => void;
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMaximize?: () => void;
     onClose?: () => void;
     /** Optional "pop out to full page" affordance; hidden when omitted. */

package/dist/Hooks/sharedResizeObserver.d.ts

@@ -0,0 +1,6 @@
+type ResizeCallback = (entry: ResizeObserverEntry) => void;
+/** Observes `element` on the one shared ResizeObserver; returns the unsubscribe. A no-op where ResizeObserver is missing. */
+export declare function observeResize(element: Element, callback: ResizeCallback): () => void;
+/** Defers callbacks for elements inside `root` until the returned resume runs, then delivers each element's latest entry once. */
+export declare function suspendResizeWithin(root: Element): () => void;
+export {};

package/dist/Hooks/sharedResizeObserver.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeResize = observeResize;
+exports.suspendResizeWithin = suspendResizeWithin;
+const subscribers = new Map();
+const suspendedRoots = new Map();
+const deferred = new Map();
+let observer = null;
+const supported = () => typeof window !== "undefined" && typeof ResizeObserver !== "undefined";
+const isSuspended = (target) => {
+    for (const root of suspendedRoots.keys())
+        if (root.contains(target))
+            return true;
+    return false;
+};
+const notify = (entry) => {
+    var _a;
+    (_a = subscribers.get(entry.target)) === null || _a === void 0 ? void 0 : _a.forEach((sub) => sub.callback(entry));
+};
+const dispatch = (entries) => {
+    entries.forEach((entry) => {
+        if (isSuspended(entry.target))
+            deferred.set(entry.target, entry);
+        else
+            notify(entry);
+    });
+};
+/** Observes `element` on the one shared ResizeObserver; returns the unsubscribe. A no-op where ResizeObserver is missing. */
+function observeResize(element, callback) {
+    if (!supported())
+        return () => undefined;
+    observer !== null && observer !== void 0 ? observer : (observer = new ResizeObserver(dispatch));
+    let subs = subscribers.get(element);
+    if (!subs) {
+        subs = new Set();
+        subscribers.set(element, subs);
+        observer.observe(element);
+    }
+    const sub = { callback };
+    subs.add(sub);
+    return () => {
+        const current = subscribers.get(element);
+        if (!(current === null || current === void 0 ? void 0 : current.delete(sub)) || current.size > 0)
+            return;
+        subscribers.delete(element);
+        deferred.delete(element);
+        observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+        if (subscribers.size === 0) {
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            observer = null;
+        }
+    };
+}
+/** Defers callbacks for elements inside `root` until the returned resume runs, then delivers each element's latest entry once. */
+function suspendResizeWithin(root) {
+    var _a;
+    suspendedRoots.set(root, ((_a = suspendedRoots.get(root)) !== null && _a !== void 0 ? _a : 0) + 1);
+    let resumed = false;
+    return () => {
+        var _a;
+        if (resumed)
+            return;
+        resumed = true;
+        const depth = ((_a = suspendedRoots.get(root)) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (depth > 0) {
+            suspendedRoots.set(root, depth);
+            return;
+        }
+        suspendedRoots.delete(root);
+        deferred.forEach((entry, target) => {
+            if (isSuspended(target))
+                return;
+            deferred.delete(target);
+            notify(entry);
+        });
+    };
+}

package/dist/Hooks/useIsTruncated.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsTruncated = useIsTruncated;
 const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
 // NOTE: compares scrollWidth/Height vs clientWidth/Height to detect real ellipsis truncation; re-measures via ResizeObserver.
 function useIsTruncated(content, enabled = true) {
     const ref = (0, react_1.useRef)(null);
@@ -17,11 +18,9 @@ function useIsTruncated(content, enabled = true) {
             return;
         measure();
         const el = ref.current;
-        if (!el || typeof ResizeObserver === "undefined")
+        if (!el)
             return;
-        const observer = new ResizeObserver(measure);
-        observer.observe(el);
-        return () => observer.disconnect();
+        return (0, sharedResizeObserver_1.observeResize)(el, measure);
     }, [measure, content, enabled]);
     return { ref, isTruncated };
 }

package/dist/Theme/chakra/Card.styles.d.ts

@@ -67,10 +67,16 @@ export declare const Card: {
                 [$shadow.variable]: string;
             };
         };
+        elevated: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
     } | undefined;
     defaultProps?: {
         size?: "sm" | "md" | "lg" | undefined;
-        variant?: "outline" | undefined;
+        variant?: "elevated" | "outline" | undefined;
         colorScheme?: string | undefined;
     } | undefined;
     parts: ("header" | "container" | "body" | "footer")[];

package/dist/Theme/chakra/Card.styles.js

@@ -39,10 +39,13 @@ const variants = {
     outline: definePartsStyle({
         container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
     }),
+    elevated: definePartsStyle({
+        container: { [$border.variable]: "0", [$shadow.variable]: "shadows.card" },
+    }),
 };
 exports.Card = defineMultiStyleConfig({
     baseStyle,
     sizes,
     variants,
-    defaultProps: { variant: "outline", size: "md" },
+    defaultProps: { variant: "elevated", size: "md" },
 });

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -1,8 +1,4 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 declare const $itemBg: {
     variable: string;
     reference: string;
@@ -10,7 +6,8 @@ declare const $itemBg: {
 export declare const Menu: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         list: {
-            [$bg.variable]: string;
+            borderRadius: "xl";
+            boxShadow: "md";
             bg: string;
             color: string;
             borderWidth: string;
@@ -22,8 +19,9 @@ export declare const Menu: {
             px: string;
             py: string;
             mx: string;
+            width: string;
             fontSize: string;
-            borderRadius: string;
+            borderRadius: "md";
             bg: string;
             _focus: {
                 [$itemBg.variable]: string;