pixelize-design-library 2.4.2-beta.42 → 2.4.2-beta.44

package/dist/esm/Components/ToolTip/ToolTip.js

@@ -1,22 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement } from "react";
+import { cloneElement, isValidElement, useMemo } from "react";
 import { Tooltip as ChakraTooltip } from "@chakra-ui/react";
 import { useIsTruncated } from "../../Hooks/useIsTruncated.js";
 import { mergeRefs } from "../../Utils/mergeRefs.js";
-import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onFilled } from "../../Theme/tokens/builders/accentText.js";
+const TOOLTIP_OPEN_DELAY_MS = 300;
+/** Keeps the bubble off the viewport edge: a subpixel overhang there raises page scrollbars. */
+const VIEWPORT_PADDING = 8;
+const withViewportPadding = (modifiers) => {
+    const caller = modifiers !== null && modifiers !== void 0 ? modifiers : [];
+    if (caller.some((m) => m.name === "preventOverflow"))
+        return modifiers;
+    return [...caller, { name: "preventOverflow", options: { padding: VIEWPORT_PADDING } }];
+};
 /** Renders a hover/focus-triggered Chakra Tooltip — not a substitute for Toaster's transient, unprompted notifications. */
-export default function ToolTip({ placement = "top", label, children, hasArrow = true, fontSize = "14px", bg, color, isDisabled, overflowOnly = false, isOpen, defaultIsOpen, openDelay = 0, closeDelay = 0, arrowSize = 10, closeOnClick = false, size, width, height, arrowPadding, arrowShadowColor, direction, gutter = 8, onClose, modifiers, closeOnPointerDown, styles, }) {
-    // Measure the child for `overflowOnly`. The hook is always called (Rules of
-    // Hooks) but is fully inert unless `overflowOnly` is set — no layout reads,
-    // no ResizeObserver, no re-renders for ordinary tooltips. Measurement never
-    // runs on hover/scroll, so showing the tooltip stays as cheap as before.
+export default 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 } = useIsTruncated(label, overflowOnly && isValidElement(children));
-    // `sidebar.background` stays near-black in both modes; ink is computed via `onFilled`.
-    const theme = useCustomTheme();
-    const surface = theme.colors.sidebar.background[500];
-    const resolvedBg = bg !== null && bg !== void 0 ? bg : surface;
-    const resolvedColor = color !== null && color !== void 0 ? color : onFilled(resolvedBg, theme.colors.white, theme.colors.black);
+    const safeModifiers = useMemo(() => withViewportPadding(modifiers), [modifiers]);
     let content = children;
     let effectiveDisabled = isDisabled;
     if (overflowOnly && isValidElement(children)) {
@@ -27,5 +27,5 @@ export default function ToolTip({ placement = "top", label, children, hasArrow =
         });
         effectiveDisabled = Boolean(isDisabled) || !isTruncated;
     }
-    return (_jsx(ChakraTooltip, { label: label, placement: placement, hasArrow: hasArrow, fontSize: fontSize, bg: resolvedBg, color: resolvedColor, 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: modifiers, closeOnPointerDown: closeOnPointerDown, style: styles, px: 3, py: 2, borderRadius: "lg", fontWeight: "400", lineHeight: "1.5", maxW: "300px", children: content }));
+    return (_jsx(ChakraTooltip, { 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 }));
 }

package/dist/esm/Components/UpgradeButton/UpgradeButton.js

@@ -5,8 +5,10 @@ import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveGradient } from "../../Theme/tokens/builders/gradientInk.js";
 import { contrastRatio } from "../../Theme/tokens/builders/color.js";
 import { AA_NON_TEXT } from "../../Theme/tokens/builders/outlineRung.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
+import { neutralTokens } from "../../Theme/tokens/brands/neutrals.js";
 /** The brand's gold sparkle accent, kept only where it clears 3:1 on the button's own fill. */
-const ACCENT_GOLD = "#FFD66B";
+const ACCENT_GOLD = neutralTokens.yellow[400];
 const sizeMap = {
     // Compact, not tiny: an 8px subtitle was unreadable, so `sm` sits deliberately
     // close to `md` — it's the dense variant of the same badge, not a smaller one.
@@ -18,12 +20,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
     const theme = useCustomTheme();
     const c = theme.colors;
     const themeGradient = c.gradient;
-    // `primary`/`secondary` at [500]->[700] / [400]->[600] sit in the mid-luminance band where
-    // neither white nor black ink clears AA at both ends at once (measured worst-case as low as
-    // 2.72:1 across brands — no ink choice fixes a gradient with no readable ink at all). One rung
-    // darker moves both stops onto the same side of that divide; verified universally >=4.5 at
-    // both ends across all 9 brands x both modes. `success`/`warning`/`danger`/`info` already sit
-    // there at [400]->[600] and don't need the shift.
+    // NOTE: primary/secondary shifted one rung darker — the [500]->[700] pair had no ink that clears AA at both ends.
     const variantGradient = {
         brand: themeGradient,
         primary: { from: c.primary[600], to: c.primary[800] },
@@ -33,13 +30,10 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
         danger: { from: c.semantic.error[400], to: c.semantic.error[600] },
         info: { from: c.semantic.info[400], to: c.semantic.info[600] },
     };
-    // `iconColor`'s gold default fails AA as body text against this gradient (measured ~1.4-3.3
-    // across brands) — the label/subtitle share this computed ink instead.
+    // NOTE: gold iconColor default fails AA as body text (~1.4-3.3 across brands) — label/subtitle use this ink instead.
     const resolved = resolveGradient(gradient !== null && gradient !== void 0 ? gradient : variantGradient[variant], c.white, c.black);
     const ink = resolved.ink;
-    // The gold only clears 1.4.11's 3:1 on a DARK gradient. zinc dark inverts `primary` to a
-    // near-white fill, where gold-on-near-white measures ~1.3:1 and the icon vanishes, so fall
-    // back to the label's ink whenever the gold misses either stop.
+    // NOTE: gold only clears 3:1 on a dark gradient — falls back to label ink whenever it misses either stop.
     const resolvedIconColor = iconColor !== null && iconColor !== void 0 ? iconColor : (contrastRatio(ACCENT_GOLD, resolved.from) >= AA_NON_TEXT &&
         contrastRatio(ACCENT_GOLD, resolved.to) >= AA_NON_TEXT
         ? ACCENT_GOLD
@@ -50,7 +44,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
     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 (_jsxs(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", _focusVisible: { outline: "none", boxShadow: `0 0 0 3px ${resolved.from}55` }, _hover: blocked
+    return (_jsxs(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
             ? undefined
             : {
                 transform: "translateY(-2px)",
@@ -59,6 +53,7 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                 ...(shimmer ? { _before: { left: "130%" } } : {}),
             }, sx: shimmer
             ? {
+                ...focusVisibleStyles(c),
                 _before: {
                     content: '""',
                     position: "absolute",
@@ -72,6 +67,6 @@ const UpgradeButton = ({ label, mobileLabel, subtitle, icon = Sparkles, iconColo
                     pointerEvents: "none",
                 },
             }
-            : undefined, children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
+            : focusVisibleStyles(c), children: [_jsxs(Flex, { align: "center", gap: "6px", maxW: maxLabelWidth, overflow: "hidden", whiteSpace: "nowrap", zIndex: 1, children: [_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: hasMobile ? { base: "none", md: "block" } : "block", children: label }), hasMobile && (_jsx(Text, { as: "span", fontSize: s.font, overflow: "hidden", textOverflow: "ellipsis", display: { base: "block", md: "none" }, children: mobileLabel })), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: resolvedIconColor })) : (Icon && _jsx(Icon, { size: s.icon, color: resolvedIconColor, style: { flexShrink: 0 } }))] }), subtitle && (_jsx(Text, { as: "span", mt: "1px", fontSize: s.sub, fontWeight: "bold", color: ink, maxW: maxLabelWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", zIndex: 1, children: subtitle }))] }));
 };
 export default UpgradeButton;

package/dist/esm/Components/UserDetails/AddUserModal.js

@@ -75,7 +75,7 @@ const AddUserModal = ({ isOpen, onClose, roleOptions, isLoading, onSubmit, onAdd
             type: "email",
         },
     ];
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { 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))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: [labels.addNewUser, upgradeNotice] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [textFields.map((field) => (_jsx(FormControl, { isInvalid: !!errors[field.id], children: _jsx(TextInput, { 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))), _jsx(FormControl, { isInvalid: !!errors.role, isRequired: true, children: _jsx(SearchSelect, { 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/esm/Components/UserDetails/ChangeRoleModal.js

@@ -31,7 +31,7 @@ const ChangeRoleModal = ({ isOpen, onClose, userId, email, currentRole, roleOpti
             return;
         await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit({ userId, roleId: selectedRole.id }));
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { label: labels.role, options: roleOptions.map((item) => ({
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, trapFocus: false, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], children: labels.changeRoleTitle }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 5, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.email, value: email !== null && email !== void 0 ? email : "", isDisabled: true, width: "100%" }), _jsx(FormControl, { isInvalid: !!error, isRequired: true, children: _jsx(SearchSelect, { 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/esm/Components/UserDetails/DeactivateConfirmModal.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, Text, Flex, Box, } from "@chakra-ui/react";
-import { AlertTriangle, Trash2 } from "lucide-react";
+import { Text, Box } from "@chakra-ui/react";
+import { Trash2 } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { resolveStatusTone } from "../../Theme/tokens/builders/statusTone.js";
-import Button from "../Button/Button.js";
+import { resolveSoftTone } from "../../Theme/tokens/builders/tone.js";
+import ConfirmDialog from "../ConfirmDialog/ConfirmDialog.js";
 const DeactivateConfirmModal = ({ isOpen, onClose, userName, isLoading, onConfirm, labels, }) => {
     const { colors } = useCustomTheme();
-    const mode = isDarkCanvas(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = resolveStatusTone(colors.semantic.error, mode);
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeactivation })] }), _jsx(ModalCloseButton, {}), _jsx(ModalBody, { py: 6, children: _jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, pt: 2, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", size: "sm", colorScheme: "gray" }), _jsx(Button, { label: labels.deactivateUser, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 16 }) })] })] }) })] })] }));
+    const errorTone = resolveSoftTone(colors, colors.semantic.error);
+    return (_jsxs(ConfirmDialog, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeactivation, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.deactivateUser, confirmIcon: _jsx(Trash2, { size: 16 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, bodyLayout: "stack", actionsPt: 2, children: [_jsx(Text, { fontSize: "md", fontWeight: 500, color: colors.text[900], children: labels.deactivateConfirmQuestion }), _jsx(Box, { bg: colors.background[50], borderRadius: "lg", p: 4, border: "1px solid", borderColor: colors.boxborder[200], children: _jsxs(Text, { color: colors.textMuted, fontSize: "sm", children: [userName ? `${userName} ` : "", labels.deactivateConfirmDescription] }) })] }));
 };
 export default DeactivateConfirmModal;

package/dist/esm/Components/UserDetails/UserDetails.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useMemo, useState } from "react";
-import { Avatar, Badge, Box, Button, Divider, Flex, Heading, HStack, IconButton, Skeleton, SkeletonCircle, Text, useDisclosure, VStack, } from "@chakra-ui/react";
+import { Badge, Box, Button, Divider, Flex, Heading, HStack, IconButton, Skeleton, SkeletonCircle, Text, useDisclosure, VStack, } from "@chakra-ui/react";
+import Avatar from "../Avatar/Avatar.js";
 import { ChevronLeft, RefreshCw, Send, Shield, Trash2, UserPlus, Users, UserRound, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import EmptyState from "../EmptyState/EmptyState.js";
+import PersonChip from "../PersonChip/PersonChip.js";
 import AddUserModal from "./AddUserModal.js";
 import ChangeRoleModal from "./ChangeRoleModal.js";
 import DeactivateConfirmModal from "./DeactivateConfirmModal.js";
@@ -60,10 +62,6 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
     const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
     const muted = colors.textMuted;
     const heading = colors.text[900];
-    const avatarBg = colors.primary[100];
-    // Picked dynamically against `avatarBg` rather than a fixed [600] rung — a fixed rung falls
-    // short of AA (4.27) for some brands' primary scale in dark mode.
-    const avatarColor = accentTextOnCanvas(colors.primary, avatarBg);
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -71,15 +69,15 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
             onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
         onConfirmClose();
     };
-    const renderStatusBadge = (isActive) => (_jsx(Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
-    return (_jsxs(Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [_jsxs(Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), _jsx(Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && (_jsx(IconButton, { "aria-label": labels.refreshList, icon: _jsx(RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), _jsx(Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? (_jsx(VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [_jsx(SkeletonCircle, { size: "9" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "12px", mb: 2, width: "80%" }), _jsx(Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? (_jsx(EmptyState, { icon: Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (_jsx(VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
+    const renderStatusBadge = (isActive) => (_jsx(Badge, { variant: "subtle", colorScheme: isActive ? successScheme : dangerScheme, borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, textTransform: "none", children: isActive ? labels.active : labels.inactive }));
+    return (_jsxs(Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [_jsxs(Box, { width: { base: "100%", lg: "300px" }, backgroundColor: surface, borderRadius: "xl", boxShadow: "sm", border: "1px solid", borderColor: border, position: "relative", order: { base: 2, lg: 1 }, overflow: "hidden", display: "flex", flexDirection: "column", children: [_jsxs(Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), _jsx(Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "xs", px: 2, children: users.length })] }), onRefresh && (_jsx(IconButton, { "aria-label": labels.refreshList, icon: _jsx(RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), _jsx(Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, tabIndex: 0, role: "region", "aria-label": labels.teamMembers, children: isUsersLoading ? (_jsx(VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [_jsx(SkeletonCircle, { size: "9" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "12px", mb: 2, width: "80%" }), _jsx(Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? (_jsx(EmptyState, { icon: Users, title: labels.noUsers, size: "sm", minH: "220px" })) : (_jsx(VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
                                 return (_jsxs(Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
                                         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 && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), _jsxs(Box, { flex: 1, overflow: "hidden", children: [_jsxs(Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), _jsx(Text, { fontSize: "xs", color: muted, noOfLines: 1, children: user.email })] }), renderStatusBadge(user.isActive)] }, user.id));
-                            }) })) })] }), _jsxs(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: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(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: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && (_jsx(Badge, { position: "absolute", bottom: -1, right: -1, colorScheme: "blue", variant: "solid", fontSize: "0.6rem", borderRadius: "full", px: 2, py: 0.5, boxShadow: "sm", textTransform: "none", children: labels.you }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
+                                    }, transition: "background 0.15s ease", borderRadius: "lg", position: "relative", onClick: () => onSelectUser === null || onSelectUser === void 0 ? void 0 : onSelectUser(user), children: [isSelected && (_jsx(Box, { position: "absolute", left: 0, top: "20%", bottom: "20%", width: "3px", borderRadius: "full", bg: colors.primary[500] })), _jsx(PersonChip, { size: "sm", name: `${user.firstName} ${user.lastName}`, imageUrl: user.profile, secondary: user.email }), renderStatusBadge(user.isActive)] }, user.id));
+                            }) })) })] }), _jsxs(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: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", px: 4, py: 3, borderBottom: "1px solid", borderColor: border, children: [_jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: selectedUser ? labels.userDetails : labels.selectTeamMember }), canManageUsers && (_jsx(Button, { size: "sm", colorScheme: "primary", fontSize: "xs", leftIcon: _jsx(UserPlus, { size: 15 }), onClick: onAddUserOpen, children: labels.addUser }))] }), _jsx(Box, { flex: 1, overflowY: "auto", tabIndex: 0, role: "region", "aria-label": selectedUser ? labels.userDetails : labels.selectTeamMember, children: isUsersLoading ? (_jsxs(VStack, { spacing: 4, p: 4, align: "stretch", children: [_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(SkeletonCircle, { size: "16" }), _jsxs(Box, { flex: 1, children: [_jsx(Skeleton, { height: "18px", width: "50%", mb: 2 }), _jsx(Skeleton, { height: "12px", width: "35%" })] })] }), Array.from({ length: 4 }).map((_, idx) => (_jsxs(Box, { w: "100%", children: [_jsx(Skeleton, { height: "12px", width: "30%", mb: 2 }), _jsx(Skeleton, { height: "10px", width: "80%" })] }, idx)))] })) : selectedUser ? (_jsxs(_Fragment, { children: [_jsxs(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: [_jsxs(Flex, { alignItems: "center", gap: 4, children: [_jsxs(Box, { position: "relative", children: [_jsx(Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto }), selectedUser.isCurrent && (_jsx(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 }))] }), _jsxs(Box, { children: [_jsx(Heading, { size: "md", mb: 1, color: heading, children: selectedUser.name }), _jsx(Text, { fontSize: "sm", color: muted, mb: 2, children: selectedUser.role }), _jsxs(HStack, { spacing: 2, children: [renderStatusBadge(selectedUser.isActive), selectedUser.isPending && (_jsx(Badge, { variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "xs", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
                                             !selectedUser.isSuperAdmin && (_jsxs(HStack, { spacing: 2, flexWrap: "wrap", children: [!selectedUser.isCurrent && !selectedUser.isActive && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "blue", fontSize: "xs", leftIcon: _jsx(Send, { size: 13 }), isLoading: isInviteLoading, onClick: () => selectedUser.userId != null &&
                                                         (onReinvite === null || onReinvite === void 0 ? void 0 : onReinvite(selectedUser.userId)), children: labels.resendInvitation })), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fontSize: "xs", leftIcon: _jsx(Shield, { size: 13 }), onClick: () => {
                                                         if (selectedUser.userId != null) {

package/dist/esm/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -8,19 +8,7 @@ const PLACEMENT_STYLE = {
     "bottom-end": { top: "100%", right: 0, marginTop: "6px" },
     "bottom-start": { top: "100%", left: 0, marginTop: "6px" },
 };
-/**
- * Presentational, app-agnostic hover-preview for a "workspace tray" pill (or any
- * trigger). Headless of any data: the consumer passes the trigger as `children`
- * and the card body as `preview` (node or render-prop receiving `close()`), so
- * this can preview a ticket, a doc, a chat — anything — with the same intent-safe
- * hover behavior.
- *
- * Intent-safe hover (hover-bridge): hovering the trigger opens the card after a
- * short delay (anti-flash); a shared open/close timer + small gap let the cursor
- * travel trigger ⇄ card without the card closing; leaving both (with a grace
- * delay) closes it; Escape dismisses. Fetch/render the preview lazily via
- * `onOpenChange`.
- */
+// Presentational, app-agnostic hover-preview (intent-safe: open delay, close grace, Escape dismisses).
 export default function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = useCustomTheme();
     const [open, setOpen] = useState(false);
@@ -76,7 +64,7 @@ export default function WorkspaceTrayPreview({ children, preview, enabled = true
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && (_jsx(Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], 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 && (_jsx(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"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/esm/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -3,17 +3,9 @@ import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Text,
 import { ExternalLink, Minus, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
-// One in-between windowed size — wider than a cramped dialog but not near-full
-// screen. There is no maximize/restore toggle (removed by product decision); the
-// `onMedium`/`onMaximize` props are kept optional for back-compat but unused.
+// NOTE: no maximize/restore toggle (removed by product decision) — onMedium/onMaximize kept optional for back-compat.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
-/**
- * Presentational floating "workspace window" — a Jira-style dialog with
- * minimize / close controls and an optional "open full page" affordance, at a
- * single fixed size (no maximize/restore toggle). Headless of any state
- * management: the parent owns the window state and passes callbacks. Render
- * minimized windows with the companion WorkspaceTray.
- */
+// Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
 export default 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
     // and change hook order when the window reopens.
@@ -25,28 +17,19 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
         closeOnOverlayClick: false, closeOnEsc: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
-                // With size="full" the transparent ModalContent covers the whole
-                // viewport, so Chakra's own closeOnOverlayClick never fires (the
-                // ModalOverlay sits behind it). Detect "clicked the blurred area
-                // around the window" ourselves: only when the click lands on this
-                // wrapper, not on the window Box or its children.
+                // NOTE: size="full" blocks Chakra's own closeOnOverlayClick — detect the outside click ourselves instead.
                 onMouseDown: (e) => {
                     if (e.target === e.currentTarget)
                         onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
-                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.background[50], 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: [_jsxs(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: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: theme.colors.text[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: _jsxs(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: [_jsxs(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: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: theme.colors.text[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
-/**
- * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
- * the parent supplies the minimized items and restore/close handlers.
- */
+// Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
 export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
     const theme = useCustomTheme();
     if (!items.length)
         return null;
     return (
-    // Floating bottom-right cluster (Gmail/Jira minimized-window pattern) rather
-    // than a full-width docked bar, so it never covers the bottom strip of page
-    // content and needs no reserved page gutter. Pills wrap upward.
+    // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
     _jsx(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) => {
             const api = {
                 restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),

package/dist/esm/Constants/Sidebar.js

@@ -1,20 +1,5 @@
 import { SCROLLBAR_WIDTH } from "../Theme/tokens/builders/scrollbar.js";
 export const HEADER_HEIGHT = "4.3rem";
-export const FlexCss = {
-    "&::-webkit-scrollbar": {
-        width: SCROLLBAR_WIDTH,
-    },
-    "&::-webkit-scrollbar-track": {
-        background: "transparent",
-    },
-    "&::-webkit-scrollbar-thumb": {
-        background: "transparent",
-        transition: "background 0.5s",
-    },
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: "var(--chakra-colors-primary-500, #718096)",
-    },
-};
 export const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
         width: SCROLLBAR_WIDTH,

package/dist/esm/Hooks/useDebounce.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/** Debounces a callback. The returned function keeps a stable identity across re-renders. */
+export function useDebouncedCallback(callback, delay) {
+    const callbackRef = useRef(callback);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const cancel = useCallback(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }, []);
+    useEffect(() => cancel, [cancel]);
+    const debounced = useCallback((...args) => {
+        cancel();
+        timerRef.current = setTimeout(() => callbackRef.current(...args), delay);
+    }, [cancel, delay]);
+    return Object.assign(debounced, { cancel });
+}
+/** Trails `value` by `delay`, so a fast-changing input drives one query instead of one per keystroke. */
+export function useDebouncedValue(value, delay) {
+    const [settled, setSettled] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setSettled(value), delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return settled;
+}

package/dist/esm/Hooks/useExclusiveOverlay.js

@@ -1,9 +1,6 @@
 import { useCallback, useEffect, useId, useRef } from "react";
 import { exclusiveClose, exclusiveOpen } from "./exclusiveOverlay.js";
-/**
- * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
- * immediately before opening; `onClose` is invoked when another overlay opens.
- */
+// NOTE: registers with the global dismiss coordinator — call requestOpen() before opening.
 export const useExclusiveOverlay = (isOpen, onClose) => {
     const id = useId();
     const onCloseRef = useRef(onClose);

package/dist/esm/Hooks/useFullscreen.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useState } from "react";
+/** Wraps the standard Fullscreen API for one element; toggle() swallows a denied/no-gesture request. */
+export function useFullscreen(target) {
+    const [isFullscreen, setFullscreen] = useState(false);
+    useEffect(() => {
+        const sync = () => setFullscreen(Boolean(document.fullscreenElement) && document.fullscreenElement === target.current);
+        document.addEventListener("fullscreenchange", sync);
+        return () => document.removeEventListener("fullscreenchange", sync);
+    }, [target]);
+    const toggle = useCallback(async () => {
+        const el = target.current;
+        if (!el)
+            return;
+        try {
+            if (document.fullscreenElement)
+                await document.exitFullscreen();
+            else if (typeof el.requestFullscreen === "function")
+                await el.requestFullscreen();
+        }
+        catch {
+            setFullscreen(false);
+        }
+    }, [target]);
+    return {
+        isFullscreen,
+        toggle,
+        isSupported: typeof document !== "undefined" && document.fullscreenEnabled,
+    };
+}

package/dist/esm/Hooks/useIsTruncated.js

@@ -1,34 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-/**
- * Detects whether an element's text is *actually* visually truncated — i.e. the
- * ellipsis is active. Works for both single-line clamps
- * (`overflow: hidden; white-space: nowrap; text-overflow: ellipsis`) and
- * multi-line clamps (`-webkit-line-clamp` / Chakra `noOfLines`), by comparing
- * the scroll size against the visible client size.
- *
- * Attach the returned `ref` to the element that clamps the text, then read
- * `isTruncated` to decide whether a tooltip is worth showing. Re-measures on
- * element resize (via `ResizeObserver`) and whenever `content` changes.
- *
- * @param content Pass the rendered text (or anything that changes with it) so
- *   the measurement re-runs when the content changes — the clamp box can keep
- *   the same size while the text length changes, which a `ResizeObserver` alone
- *   would not catch.
- * @param enabled Set to `false` to fully disable measurement — no layout reads,
- *   no `ResizeObserver`, no state updates. Use it to keep the hook cheap when
- *   the caller isn't in truncation mode (`isTruncated` stays `false`).
- *
- * Performance: measurement runs only on mount, on element **resize**, and when
- * `content` changes — never on hover, scroll, or re-render. Each run does a
- * single batched layout read (four properties) on one element. When `enabled`
- * is `false` the hook does nothing at all.
- *
- * @example
- * const { ref, isTruncated } = useIsTruncated(title);
- * <ToolTip label={title} isDisabled={!isTruncated}>
- *   <Text ref={ref} noOfLines={1}>{title}</Text>
- * </ToolTip>
- */
+// NOTE: compares scrollWidth/Height vs clientWidth/Height to detect real ellipsis truncation; re-measures via ResizeObserver.
 export function useIsTruncated(content, enabled = true) {
     const ref = useRef(null);
     const [isTruncated, setIsTruncated] = useState(false);

package/dist/esm/Hooks/usePreferences.js

@@ -18,11 +18,7 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
 };
 const useGetPreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
     const [preferences, setPreferences] = useState([]);
-    // Must start true (not false) whenever a fetch is about to happen: this is
-    // read by consumers (KanbanBoard's preferences-hydration effect) on their
-    // very first render, before this hook's own mount effect has run. Starting
-    // false let that first render look like "nothing loading, nothing saved",
-    // which permanently skipped hydration once the real data arrived.
+    // NOTE: must start true — KanbanBoard's hydration effect reads this before this hook's mount effect runs.
     const [loading, setLoading] = useState(() => Boolean(baseUrl));
     useEffect(() => {
         if (!baseUrl) {
@@ -59,7 +55,6 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
-            .then((d) => console.log(d))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/esm/Hooks/useSidebarPrefs.js

@@ -45,8 +45,7 @@ export const useSidebarPrefs = (options = {}) => {
     const toggleMobileNav = useCallback(() => setPrefs((p) => ({ ...p, mobileNav: !p.mobileNav })), []);
     const toggleCollapsed = useCallback(() => setPrefs((p) => ({ ...p, collapsed: !p.collapsed })), []);
     const toggleMobileOpen = useCallback(() => setPrefs((p) => ({ ...p, mobileOpen: !p.mobileOpen })), []);
-    // Composed handlers — map directly onto SideBar props so apps don't re-implement
-    // the navbar-mode/drawer behavior (the part that's easy to get wrong per app).
+    // Composed handlers, mapped directly onto SideBar props so apps don't re-implement drawer behavior.
     const onToggleMobileNav = useCallback(() => setPrefs((p) => {
         const next = !p.mobileNav;
         // Entering navbar mode opens the drawer; leaving docks it.

package/dist/esm/Theme/assertPalette.js

@@ -3,14 +3,14 @@ const REQUIRED_GROUPS = [
     "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
     "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
     "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
-    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [
     ["semantic", ["success", "error", "warning", "info"]],
     ["sidebar", [
             "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
-            "semanticText",
+            "semanticText", "hoverBg", "activeBg", "divider",
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],

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

@@ -0,0 +1,45 @@
+import { cardAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { paletteOf } from "./paletteFromTheme.js";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(cardAnatomy.keys);
+const $bg = cssVar("card-bg");
+const $padding = cssVar("card-padding");
+const $shadow = cssVar("card-shadow");
+const $radius = cssVar("card-radius");
+const $border = cssVar("card-border-width");
+const $borderColor = cssVar("card-border-color");
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = paletteOf(theme);
+    return {
+        container: {
+            [$bg.variable]: colors.background[50],
+            [$radius.variable]: "radii.xl",
+            [$borderColor.variable]: colors.boxborder[200],
+            color: colors.text[900],
+            "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": { paddingTop: 0 },
+        },
+        header: { color: colors.header[900], fontSize: "1rem", fontWeight: 600 },
+    };
+});
+const sizes = {
+    sm: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "0.75rem 1rem" },
+    }),
+    md: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1rem 1.25rem" },
+    }),
+    lg: definePartsStyle({
+        container: { [$radius.variable]: "radii.xl", [$padding.variable]: "1.25rem 1.5rem" },
+    }),
+};
+const variants = {
+    outline: definePartsStyle({
+        container: { [$border.variable]: "1px", [$shadow.variable]: "none" },
+    }),
+};
+export const Card = defineMultiStyleConfig({
+    baseStyle,
+    sizes,
+    variants,
+    defaultProps: { variant: "outline", size: "md" },
+});

package/dist/esm/Theme/chakra/Drawer.styles.js

@@ -1,21 +1,22 @@
 import { paletteOf } from "./paletteFromTheme.js";
 import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
 import { drawerAnatomy } from "@chakra-ui/anatomy";
+import { dialogPartStyles } from "./overlay.styles.js";
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(drawerAnatomy.keys);
 const $bg = cssVar("drawer-bg");
-/**
- * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
- * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
- * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
- * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
- */
-const baseStyle = definePartsStyle(({ theme }) => ({
-    dialog: {
-        [$bg.variable]: paletteOf(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: paletteOf(theme).text[900],
-    },
-}));
+// Chakra's stock `--drawer-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = paletteOf(theme);
+    const parts = dialogPartStyles(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+        },
+    };
+});
 export const Drawer = defineMultiStyleConfig({
     baseStyle,
 });