pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/Components/UserDetails/UserDetails.js

@@ -39,11 +39,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const react_2 = require("@chakra-ui/react");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 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 rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const PersonChip_1 = __importDefault(require("../PersonChip/PersonChip"));
 const AddUserModal_1 = __importDefault(require("./AddUserModal"));
 const ChangeRoleModal_1 = __importDefault(require("./ChangeRoleModal"));
 const DeactivateConfirmModal_1 = __importDefault(require("./DeactivateConfirmModal"));
@@ -84,6 +87,7 @@ const DEFAULT_LABELS = {
     deactivateConfirmQuestion: "Are you sure you want to deactivate this user?",
     deactivateConfirmDescription: "will no longer have access to the organization. You can reactivate them later if needed.",
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals. */
 const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], canManageUsers = false, isUsersLoading = false, isInviteLoading = false, isDeactivateLoading = false, isAddUserLoading = false, isChangeRoleLoading = false, onSelectUser, onRefresh, onBack, onAddUserSubmit, onChangeRoleSubmit, onReinvite, onDeactivate, onAddRoleClick, addUserUpgradeNotice, labels: labelOverrides, minHeight = "90vh", }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
@@ -93,12 +97,9 @@ 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 rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.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 = (0, accentText_1.accentTextOnCanvas)(colors.primary, avatarBg);
     const successScheme = "green";
     const dangerScheme = "red";
     const handleDeactivateConfirm = () => {
@@ -106,15 +107,15 @@ const UserDetails = ({ users, selectedUser, selectedUserId, roleOptions = [], ca
             onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate(actionUserId);
         onConfirmClose();
     };
-    const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "0.65rem", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
+    const renderStatusBadge = (isActive) => ((0, jsx_runtime_1.jsx)(react_2.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 ((0, jsx_runtime_1.jsxs)(react_2.Flex, { backgroundColor: colors.backgroundColor.main, minHeight: minHeight, p: { base: 3, md: 4 }, gap: 3, flexDirection: { base: "column", lg: "row" }, children: [(0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: 18 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.teamMembers }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "gray", borderRadius: "full", fontSize: "xs", px: 2, children: users.length })] }), onRefresh && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.refreshList, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, { size: 15 }), variant: "ghost", size: "xs", color: muted, onClick: onRefresh, isLoading: isUsersLoading }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, overflowY: "auto", maxHeight: { base: "380px", lg: `calc(${minHeight} - 80px)` }, tabIndex: 0, role: "region", "aria-label": labels.teamMembers, children: isUsersLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 2, p: 3, children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { alignItems: "center", gap: 3, p: 2, w: "100%", children: [(0, jsx_runtime_1.jsx)(react_2.SkeletonCircle, { size: "9" }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "12px", mb: 2, width: "80%" }), (0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "9px", width: "60%" })] })] }, idx))) })) : users.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.Users, title: labels.noUsers, size: "sm", minH: "220px" })) : ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 1, p: 2, align: "stretch", children: users.map((user) => {
                                 const isSelected = selectedUserId != null && selectedUserId === user.id;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? colors.primary[50] : "transparent", _hover: {
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? rowBackgrounds.selected : "transparent", _hover: {
                                         background: isSelected
-                                            ? colors.primary[50]
-                                            : (0, outlineRung_1.resolveHoverTint)(colors.gray[50], surface),
-                                    }, 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)(react_2.Avatar, { size: "sm", name: `${user.firstName} ${user.lastName}`, src: user.profile, bg: avatarBg, color: avatarColor }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", fontWeight: 600, noOfLines: 1, color: heading, children: [user.firstName, " ", user.lastName] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: muted, noOfLines: 1, children: 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", 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)(react_2.Avatar, { size: "lg", name: selectedUser.name, src: selectedUser.profilePhoto, bg: avatarBg, color: avatarColor }), selectedUser.isCurrent && ((0, jsx_runtime_1.jsx)(react_2.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 }))] }), (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: "0.65rem", fontWeight: 600, colorScheme: "orange", textTransform: "none", children: labels.pendingInvitation }))] })] })] }), canManageUsers &&
+                                            ? 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));
+                            }) })) })] }), (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: () => {
                                                         if (selectedUser.userId != null) {

package/dist/Components/UserDetails/UserDetailsProps.d.ts

@@ -1,43 +1,57 @@
 import { ElementType, ReactNode } from "react";
+/** One assignable role offered in the Add User and Change Role selects. */
 export type RoleOption = {
     id: number;
     label: string;
 };
+/** One row in the left-panel user list — see SelectedUserDetail for the richer shape used once selected. */
 export type UserListItem = {
     id: number;
     firstName: string;
     lastName: string;
     email: string;
+    /** Display-only — UserDetails never reads this in the list row itself, only in SelectedUserDetail once selected. */
     role: string;
     profile?: string;
     isActive: boolean;
+    /** isPending/isCurrent/isSuperAdmin here are decorative — only SelectedUserDetail's copies (after selection) drive any badge or action-bar behavior. */
     isPending?: boolean;
     isCurrent?: boolean;
     isSuperAdmin?: boolean;
 };
+/** One label/value row in the "Personal Information" panel; icon falls back to a generic user icon when omitted. */
 export type UserDetailRow = {
     label: string;
     value: string;
     icon?: ElementType;
 };
+/** Right-panel shape for the selected user — distinct field names from UserListItem (name, userId); not derived from it. */
 export type SelectedUserDetail = {
+    /** When null, Change Role and Resend Invitation silently no-op on click (no disabled state) — unlike Deactivate, which greys out. */
     userId?: number;
     name: string;
+    /** Feeds ChangeRoleModal's currentRole — must case-insensitively match a roleOptions[].label or the modal opens with nothing pre-selected. */
     role: string;
+    /** Shown only inside ChangeRoleModal's header — the Personal Information panel does not render this field, only `details`. */
     email: string;
     profilePhoto?: string;
     isActive: boolean;
+    /** Renders the "Pending Invitation" badge only — does not affect which action buttons show. */
     isPending?: boolean;
+    /** Hides Resend Invitation and Deactivate (both gated on !isCurrent) and shows a "You" badge on the avatar. */
     isCurrent?: boolean;
+    /** True hides the entire action bar (reinvite/change-role/deactivate), not just the deactivate button. */
     isSuperAdmin?: boolean;
     details: UserDetailRow[];
 };
+/** Form values submitted by the Add User modal; role stays null until the user picks one. */
 export type AddUserFormValues = {
     firstName: string;
     lastName: string;
     email: string;
     role: RoleOption | null;
 };
+/** Payload from the Change Role modal — just the ids, unlike AddUserFormValues which carries the full RoleOption. */
 export type ChangeRoleSubmitPayload = {
     userId: number;
     roleId: number;
@@ -83,6 +97,7 @@ export type UserDetailsLabels = {
     deactivateConfirmQuestion?: string;
     deactivateConfirmDescription?: string;
 };
+/** Two-pane user directory + detail panel with bundled Add/Change-Role/Deactivate modals; not a role editor — pair with RolesPermission for managing roles themselves. */
 export interface UserDetailsProps {
     /** Full list of users shown in the left panel. */
     users: UserListItem[];
@@ -96,19 +111,25 @@ export interface UserDetailsProps {
     canManageUsers?: boolean;
     /** Loading flags driven by the host app's async calls. */
     isUsersLoading?: boolean;
+    /** Spins only the Resend Invitation button, not the list or either modal. */
     isInviteLoading?: boolean;
+    /** Unlike isAddUserLoading/isChangeRoleLoading, the confirm modal closes immediately on click — this flag can't keep it open to show a spinner. */
     isDeactivateLoading?: boolean;
     isAddUserLoading?: boolean;
     isChangeRoleLoading?: boolean;
     /** Selection + refresh. */
     onSelectUser?: (user: UserListItem) => void;
+    /** Omitting this hides the refresh button entirely, not just disables it. */
     onRefresh?: () => void;
     /** Back navigation handler for the list panel header. */
     onBack?: () => void;
     /** Modal submit / action callbacks. */
     onAddUserSubmit?: (values: AddUserFormValues) => void | Promise<void>;
+    /** Awaited before the modal closes — unlike onDeactivate, which fires and closes immediately. */
     onChangeRoleSubmit?: (payload: ChangeRoleSubmitPayload) => void | Promise<void>;
+    /** Never called when selectedUser.userId is null — the button stays enabled but silently no-ops. */
     onReinvite?: (userId: number) => void;
+    /** Not awaited — the confirm modal closes right after this fires, so a slow or failing deactivation gets no in-modal feedback. */
     onDeactivate?: (userId: number) => void;
     /** "Add New Role" actions inside the SearchSelect of each modal. */
     onAddRoleClick?: () => void;
@@ -116,9 +137,10 @@ export interface UserDetailsProps {
     addUserUpgradeNotice?: ReactNode;
     /** Translated/override strings. */
     labels?: UserDetailsLabels;
-    /** Minimum height of the outer container. Defaults to "90vh". */
+    /** Also feeds a calc() for the sidebar's max-height — a non-CSS-length value (e.g. "auto") silently breaks that calc. Defaults to "90vh". */
     minHeight?: string;
 }
+/** Self-contained invite form (first/last/email/role) with its own validation — not a generic modal; it always renders these exact fields. */
 export interface AddUserModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -127,13 +149,17 @@ export interface AddUserModalProps {
     onSubmit?: (values: AddUserFormValues) => void | Promise<void>;
     onAddRoleClick?: () => void;
     upgradeNotice?: ReactNode;
+    /** A strict subset of UserDetailsLabels — the merged defaults from UserDetails always satisfy it. */
     labels: Required<Pick<UserDetailsLabels, "addNewUser" | "firstName" | "lastName" | "email" | "role" | "firstNamePlaceholder" | "lastNamePlaceholder" | "emailPlaceholder" | "addNewRole" | "cancel" | "save" | "firstNameRequired" | "lastNameRequired" | "emailRequired" | "emailInvalid" | "roleRequired">>;
 }
+/** Reassigns one user's role only — Save stays disabled until a genuinely different role is picked (see currentRole below). */
 export interface ChangeRoleModalProps {
     isOpen: boolean;
     onClose: () => void;
+    /** Submit silently no-ops when null — Save disables only for isUnchanged/no-selection, not for this. */
     userId: number | null;
     email?: string;
+    /** Matched to roleOptions by case-insensitive label text; no match silently pre-selects nothing and leaves Save disabled. */
     currentRole?: string;
     roleOptions: RoleOption[];
     isLoading?: boolean;
@@ -141,11 +167,14 @@ export interface ChangeRoleModalProps {
     onAddRoleClick?: () => void;
     labels: Required<Pick<UserDetailsLabels, "changeRoleTitle" | "email" | "role" | "addNewRole" | "cancel" | "save" | "roleRequired">>;
 }
+/** Confirm dialog for deactivating one user — closes immediately on confirm (see isDeactivateLoading); not a delete, the user can be reactivated later. */
 export interface DeactivateConfirmModalProps {
     isOpen: boolean;
     onClose: () => void;
     userName?: string;
+    /** Effectively unusable — the modal always closes before an async confirm could flip this. */
     isLoading?: boolean;
+    /** Synchronous by type — the modal closes in the same tick this fires, so it can't be awaited. */
     onConfirm: () => void;
     labels: Required<Pick<UserDetailsLabels, "confirmDeactivation" | "deactivateConfirmQuestion" | "deactivateConfirmDescription" | "cancel" | "deactivateUser">>;
 }

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

@@ -1,15 +1,2 @@
 import type { WorkspaceTrayPreviewProps } from "./WorkspaceWindowProps";
-/**
- * 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`.
- */
 export default function WorkspaceTrayPreview({ children, preview, enabled, openDelayMs, closeDelayMs, placement, onOpenChange, width, testId, }: WorkspaceTrayPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -11,19 +11,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).
 function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -79,7 +67,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.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 && ((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"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

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

@@ -1,14 +1,3 @@
 import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindowProps";
-/**
- * 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.
- */
 export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
- * the parent supplies the minimized items and restore/close handlers.
- */
 export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -7,17 +7,9 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// 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.
 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.
@@ -29,28 +21,19 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
         closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.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: (0, jsx_runtime_1.jsxs)(react_1.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: [(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)(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 })] }) })] }));
 }
-/**
- * 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.
 function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
     const theme = (0, useCustomTheme_1.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.
     (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) => {
             const api = {
                 restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),

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

@@ -2,10 +2,11 @@ import type { ReactNode } from "react";
 /**
  * Window state for a WorkspaceWindow.
  * - "medium": default centered dialog (Jira-style)
- * - "maximized": near-full-screen
+ * - "maximized": renders IDENTICALLY to "medium" — no separate maximize size exists (see onMaximize)
  * - "minimized": collapsed to a tray pill (rendered by WorkspaceTray, not the window)
  */
 export type WorkspaceWindowState = "medium" | "maximized" | "minimized";
+/** Props for one WorkspaceWindow instance; minimized windows render separately via WorkspaceTrayProps below. */
 export interface WorkspaceWindowProps {
     /** Title shown in the window's control bar. */
     title: ReactNode;
@@ -14,6 +15,7 @@ export interface WorkspaceWindowProps {
     /** Window body. */
     children: ReactNode;
     onMinimize?: () => void;
+    /** Kept for back-compat only — no maximize/restore control is rendered; this is never called. */
     onMedium?: () => void;
     onMaximize?: () => void;
     onClose?: () => void;
@@ -31,10 +33,12 @@ export interface WorkspaceWindowProps {
     /** data-testid for the window container. */
     testId?: string;
 }
+/** One minimized window in the tray; id is passed back to onRestore/onClose so callers can target the right window. */
 export interface WorkspaceTrayItem {
     id: string;
     title: ReactNode;
 }
+/** Props for the bottom-right cluster of minimized-window pills; renders nothing when items is empty. */
 export interface WorkspaceTrayProps {
     /** Minimized items rendered as restore pills along the bottom. */
     items: WorkspaceTrayItem[];
@@ -53,6 +57,7 @@ export interface WorkspaceTrayProps {
         close: () => void;
     }) => ReactNode;
 }
+/** Props for WorkspaceTrayPreview — despite the name, works for any hover trigger, not just tray pills. */
 export interface WorkspaceTrayPreviewProps {
     /**
      * The trigger markup (typically a tray pill). The preview + trigger share one

package/dist/Constants/Sidebar.d.ts

@@ -1,40 +1,4 @@
 import type { CustomThemeProps } from "../Theme/themeProps";
+import { ScrollbarStyle } from "../Theme/tokens/builders/scrollbar";
 export declare const HEADER_HEIGHT = "4.3rem";
-export declare const FlexCss: {
-    "&::-webkit-scrollbar": {
-        width: string;
-    };
-    "&::-webkit-scrollbar-track": {
-        background: string;
-    };
-    "&::-webkit-scrollbar-thumb": {
-        background: string;
-        transition: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: string;
-    };
-};
-export declare const cssForScrollBar: (theme: CustomThemeProps) => {
-    "&::-webkit-scrollbar": {
-        width: string;
-    };
-    "&::-webkit-scrollbar-track": {
-        background: string;
-    };
-    "&::-webkit-scrollbar-thumb": {
-        background: string;
-        borderRadius: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb": {
-        background: string;
-    };
-    "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: string;
-    };
-    scrollbarWidth: string;
-    "&:hover": {
-        scrollbarWidth: string;
-        scrollbarColor: string;
-    };
-};
+export declare const cssForScrollBar: (theme: CustomThemeProps) => ScrollbarStyle;

package/dist/Constants/Sidebar.js

@@ -1,23 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cssForScrollBar = exports.FlexCss = exports.HEADER_HEIGHT = void 0;
+exports.cssForScrollBar = exports.HEADER_HEIGHT = void 0;
 const scrollbar_1 = require("../Theme/tokens/builders/scrollbar");
 exports.HEADER_HEIGHT = "4.3rem";
-exports.FlexCss = {
-    "&::-webkit-scrollbar": {
-        width: scrollbar_1.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)",
-    },
-};
 const cssForScrollBar = (theme) => ({
     "&::-webkit-scrollbar": {
         width: scrollbar_1.SCROLLBAR_WIDTH,

package/dist/Hooks/exclusiveOverlay.d.ts

@@ -0,0 +1,4 @@
+export declare const exclusiveOpen: (id: string, close: () => void) => void;
+export declare const exclusiveClose: (id: string) => void;
+/** Test-only reset — not exported from the package root. */
+export declare const resetExclusiveOverlay: () => void;

package/dist/Hooks/exclusiveOverlay.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resetExclusiveOverlay = exports.exclusiveClose = exports.exclusiveOpen = void 0;
+let active = null;
+const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+exports.exclusiveOpen = exclusiveOpen;
+const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+exports.exclusiveClose = exclusiveClose;
+/** Test-only reset — not exported from the package root. */
+const resetExclusiveOverlay = () => {
+    active = null;
+};
+exports.resetExclusiveOverlay = resetExclusiveOverlay;

package/dist/Hooks/useDebounce.d.ts

@@ -0,0 +1,6 @@
+/** Debounces a callback. The returned function keeps a stable identity across re-renders. */
+export declare function useDebouncedCallback<T extends (...args: never[]) => void>(callback: T, delay: number): ((...args: Parameters<T>) => void) & {
+    cancel: () => void;
+};
+/** Trails `value` by `delay`, so a fast-changing input drives one query instead of one per keystroke. */
+export declare function useDebouncedValue<T>(value: T, delay: number): T;

package/dist/Hooks/useDebounce.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDebouncedCallback = useDebouncedCallback;
+exports.useDebouncedValue = useDebouncedValue;
+const react_1 = require("react");
+/** Debounces a callback. The returned function keeps a stable identity across re-renders. */
+function useDebouncedCallback(callback, delay) {
+    const callbackRef = (0, react_1.useRef)(callback);
+    const timerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const cancel = (0, react_1.useCallback)(() => {
+        if (timerRef.current)
+            clearTimeout(timerRef.current);
+        timerRef.current = null;
+    }, []);
+    (0, react_1.useEffect)(() => cancel, [cancel]);
+    const debounced = (0, react_1.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. */
+function useDebouncedValue(value, delay) {
+    const [settled, setSettled] = (0, react_1.useState)(value);
+    (0, react_1.useEffect)(() => {
+        const timer = setTimeout(() => setSettled(value), delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return settled;
+}

package/dist/Hooks/useExclusiveOverlay.d.ts

@@ -0,0 +1 @@
+export declare const useExclusiveOverlay: (isOpen: boolean, onClose: () => void) => () => void;

package/dist/Hooks/useExclusiveOverlay.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useExclusiveOverlay = void 0;
+const react_1 = require("react");
+const exclusiveOverlay_1 = require("./exclusiveOverlay");
+// NOTE: registers with the global dismiss coordinator — call requestOpen() before opening.
+const useExclusiveOverlay = (isOpen, onClose) => {
+    const id = (0, react_1.useId)();
+    const onCloseRef = (0, react_1.useRef)(onClose);
+    onCloseRef.current = onClose;
+    const requestOpen = (0, react_1.useCallback)(() => {
+        (0, exclusiveOverlay_1.exclusiveOpen)(id, () => onCloseRef.current());
+    }, [id]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            (0, exclusiveOverlay_1.exclusiveClose)(id);
+        }
+    }, [isOpen, id]);
+    return requestOpen;
+};
+exports.useExclusiveOverlay = useExclusiveOverlay;

package/dist/Hooks/useFullscreen.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+export interface UseFullscreenResult {
+    isFullscreen: boolean;
+    toggle: () => Promise<void>;
+    isSupported: boolean;
+}
+/** Wraps the standard Fullscreen API for one element; toggle() swallows a denied/no-gesture request. */
+export declare function useFullscreen(target: RefObject<HTMLElement | null>): UseFullscreenResult;

package/dist/Hooks/useFullscreen.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFullscreen = useFullscreen;
+const react_1 = require("react");
+/** Wraps the standard Fullscreen API for one element; toggle() swallows a denied/no-gesture request. */
+function useFullscreen(target) {
+    const [isFullscreen, setFullscreen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const sync = () => setFullscreen(Boolean(document.fullscreenElement) && document.fullscreenElement === target.current);
+        document.addEventListener("fullscreenchange", sync);
+        return () => document.removeEventListener("fullscreenchange", sync);
+    }, [target]);
+    const toggle = (0, react_1.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,
+    };
+}