pixelize-design-library 2.4.1 → 2.4.2-beta.1

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

@@ -0,0 +1,105 @@
+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 { 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 EmptyState from "../EmptyState/EmptyState.js";
+import AddUserModal from "./AddUserModal.js";
+import ChangeRoleModal from "./ChangeRoleModal.js";
+import DeactivateConfirmModal from "./DeactivateConfirmModal.js";
+const DEFAULT_LABELS = {
+    teamMembers: "Team Members",
+    refreshList: "Refresh list",
+    userDetails: "User Details",
+    selectTeamMember: "Select a Team Member",
+    addUser: "Add User",
+    resendInvitation: "Resend Invitation",
+    deactivateUser: "Deactivate User",
+    changeRole: "Change Role",
+    you: "You",
+    active: "Active",
+    inactive: "Inactive",
+    pendingInvitation: "Pending Invitation",
+    personalInformation: "Personal Information",
+    noUsers: "No team members yet",
+    noUserSelected: "Select a team member to view their details",
+    addNewUser: "Add New User",
+    firstName: "First Name",
+    lastName: "Last Name",
+    email: "Email",
+    role: "Role",
+    firstNamePlaceholder: "First Name",
+    lastNamePlaceholder: "Last Name",
+    emailPlaceholder: "An invite will be sent to this email",
+    addNewRole: "Add New Role",
+    cancel: "Cancel",
+    save: "Save",
+    firstNameRequired: "First Name is required",
+    lastNameRequired: "Last Name is required",
+    emailRequired: "Email is required",
+    emailInvalid: "Invalid email",
+    roleRequired: "Role is required",
+    changeRoleTitle: "Change Role",
+    confirmDeactivation: "Confirm Deactivation",
+    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.",
+};
+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 } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const { isOpen: isAddUserOpen, onOpen: onAddUserOpen, onClose: onAddUserClose, } = useDisclosure();
+    const { isOpen: isChangeRoleOpen, onOpen: onChangeRoleOpen, onClose: onChangeRoleClose, } = useDisclosure();
+    const { isOpen: isConfirmOpen, onOpen: onConfirmOpen, onClose: onConfirmClose, } = useDisclosure();
+    const [actionUserId, setActionUserId] = useState(null);
+    const border = colors.boxborder[200];
+    const surface = colors.background[50];
+    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 = () => {
+        if (actionUserId != null)
+            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 isSelected = selectedUserId != null && selectedUserId === user.id;
+                                return (_jsxs(Flex, { p: 2.5, w: "100%", cursor: "pointer", alignItems: "center", gap: 2.5, backgroundColor: isSelected ? colors.primary[50] : "transparent", _hover: {
+                                        background: isSelected
+                                            ? colors.primary[50]
+                                            : 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 && (_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 &&
+                                            !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) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onChangeRoleOpen();
+                                                        }
+                                                    }, children: labels.changeRole }), !selectedUser.isCurrent && (_jsx(Button, { size: "xs", variant: "ghost", colorScheme: "red", fontSize: "xs", leftIcon: _jsx(Trash2, { size: 13 }), isDisabled: selectedUser.userId == null || isDeactivateLoading, onClick: () => {
+                                                        if (selectedUser.userId != null) {
+                                                            setActionUserId(selectedUser.userId);
+                                                            onConfirmOpen();
+                                                        }
+                                                    }, children: labels.deactivateUser }))] }))] }), _jsxs(Box, { p: 4, children: [_jsx(Text, { fontSize: "xs", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: muted, mb: 3, children: labels.personalInformation }), _jsx(Box, { border: "1px solid", borderColor: border, borderRadius: "lg", overflow: "hidden", children: selectedUser.details.map((detail, index) => {
+                                                var _a;
+                                                const Icon = (_a = detail.icon) !== null && _a !== void 0 ? _a : UserRound;
+                                                return (_jsxs(React.Fragment, { children: [_jsxs(Flex, { gap: 3, px: 3, py: 2.5, _hover: {
+                                                                bg: resolveHoverTint(colors.gray[50], surface),
+                                                            }, alignItems: "center", transition: "background 0.15s ease", children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "30px", bg: colors.primary[50], borderRadius: "lg", color: accentTextOnCanvas(colors.primary, colors.primary[50]), flexShrink: 0, children: _jsx(Icon, { size: 15 }) }), _jsx(Box, { minWidth: "110px", children: _jsx(Text, { fontSize: "xs", fontWeight: 600, color: muted, children: detail.label }) }), _jsx(Box, { flex: 1, children: _jsx(Text, { fontSize: "sm", color: heading, fontWeight: 500, children: detail.value }) })] }), index < selectedUser.details.length - 1 && (_jsx(Divider, { borderColor: border }))] }, index));
+                                            }) })] })] })) : (_jsx(EmptyState, { icon: UserRound, title: labels.selectTeamMember, description: labels.noUserSelected, minH: "300px" })) })] }), _jsx(AddUserModal, { isOpen: isAddUserOpen, onClose: onAddUserClose, roleOptions: roleOptions, isLoading: isAddUserLoading, onSubmit: async (values) => {
+                    await (onAddUserSubmit === null || onAddUserSubmit === void 0 ? void 0 : onAddUserSubmit(values));
+                    onAddUserClose();
+                }, onAddRoleClick: onAddRoleClick, upgradeNotice: addUserUpgradeNotice, labels: labels }), _jsx(ChangeRoleModal, { isOpen: isChangeRoleOpen, onClose: onChangeRoleClose, userId: actionUserId, email: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.email, currentRole: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.role, roleOptions: roleOptions, isLoading: isChangeRoleLoading, onSubmit: async (payload) => {
+                    await (onChangeRoleSubmit === null || onChangeRoleSubmit === void 0 ? void 0 : onChangeRoleSubmit(payload));
+                    onChangeRoleClose();
+                }, onAddRoleClick: onAddRoleClick, labels: labels }), _jsx(DeactivateConfirmModal, { isOpen: isConfirmOpen, onClose: onConfirmClose, userName: selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.name, isLoading: isDeactivateLoading, onConfirm: handleDeactivateConfirm, labels: labels })] }));
+};
+export default UserDetails;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const PLACEMENT_STYLE = {
+    "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
+    "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
+    "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`.
+ */
+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);
+    const openTimer = useRef(null);
+    const closeTimer = useRef(null);
+    const setOpenState = useCallback((next) => {
+        setOpen(next);
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const clearOpenTimer = useCallback(() => {
+        if (openTimer.current) {
+            clearTimeout(openTimer.current);
+            openTimer.current = null;
+        }
+    }, []);
+    const clearCloseTimer = useCallback(() => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    }, []);
+    const scheduleOpen = useCallback(() => {
+        if (!enabled)
+            return;
+        clearCloseTimer();
+        if (open || openTimer.current)
+            return;
+        openTimer.current = setTimeout(() => {
+            openTimer.current = null;
+            setOpenState(true);
+        }, openDelayMs);
+    }, [enabled, clearCloseTimer, open, openDelayMs, setOpenState]);
+    const scheduleClose = useCallback(() => {
+        clearOpenTimer();
+        if (closeTimer.current)
+            return;
+        closeTimer.current = setTimeout(() => {
+            closeTimer.current = null;
+            setOpenState(false);
+        }, closeDelayMs);
+    }, [clearOpenTimer, closeDelayMs, setOpenState]);
+    const closeNow = useCallback(() => {
+        clearOpenTimer();
+        clearCloseTimer();
+        setOpenState(false);
+    }, [clearOpenTimer, clearCloseTimer, setOpenState]);
+    useEffect(() => () => {
+        clearOpenTimer();
+        clearCloseTimer();
+    }, [clearOpenTimer, clearCloseTimer]);
+    return (_jsxs(Box, { position: "relative", onMouseEnter: scheduleOpen, onMouseLeave: scheduleClose, onFocus: scheduleOpen, onBlur: scheduleClose, onKeyDown: (e) => {
+            if (e.key === "Escape" && open) {
+                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"
+                    ? preview({ close: closeNow })
+                    : preview }))] }));
+}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Text, } from "@chakra-ui/react";
+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.
+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.
+ */
+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.
+    const theme = useCustomTheme();
+    if (state === "minimized")
+        return null;
+    const size = WINDOW_SIZE;
+    return (_jsxs(Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
+        // 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.
+                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 })] }) })] }));
+}
+/**
+ * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
+ * the parent supplies the minimized items and restore/close 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.
+    _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),
+                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+            };
+            if (renderItem) {
+                return _jsx(Box, { children: renderItem(item, api) }, item.id);
+            }
+            return (_jsxs(HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: accentTextOnCanvas(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [_jsx(Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: _jsx(X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+        }) }));
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/esm/Constants/Sidebar.js

@@ -0,0 +1,39 @@
+export const HEADER_HEIGHT = "4.3rem";
+export const FlexCss = {
+    "&::-webkit-scrollbar": {
+        width: "0.188rem",
+    },
+    "&::-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: "0.125rem",
+    },
+    "&::-webkit-scrollbar-track": {
+        background: theme.colors.sidebar.background[500],
+    },
+    "&::-webkit-scrollbar-thumb": {
+        background: "transparent",
+        borderRadius: "0.5rem",
+    },
+    "&:hover::-webkit-scrollbar-thumb": {
+        background: theme.colors.primary[500],
+    },
+    "&:hover::-webkit-scrollbar-thumb:hover": {
+        background: theme.colors.primary[700],
+    },
+    scrollbarWidth: "none",
+    "&:hover": {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+    },
+});

package/dist/esm/Hooks/useIsTruncated.js

@@ -0,0 +1,54 @@
+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>
+ */
+export function useIsTruncated(content, enabled = true) {
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    const measure = useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        setIsTruncated(el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight);
+    }, []);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        measure();
+        const el = ref.current;
+        if (!el || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [measure, content, enabled]);
+    return { ref, isTruncated };
+}
+export default useIsTruncated;

package/dist/esm/Hooks/usePreferences.js

@@ -0,0 +1,74 @@
+import { useEffect, useState, useCallback, useRef } from "react";
+const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
+    const params = new URLSearchParams();
+    if (orgId) {
+        params.append("orgId", orgId);
+    }
+    if (page) {
+        params.append("page", page);
+    }
+    if (key) {
+        params.append("key", key);
+    }
+    if (name) {
+        params.append("name", name);
+    }
+    const queryString = params.toString();
+    return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
+};
+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.
+    const [loading, setLoading] = useState(() => Boolean(baseUrl));
+    useEffect(() => {
+        if (!baseUrl) {
+            return;
+        }
+        setLoading(true);
+        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        fetch(url, {
+            headers: {
+                Authorization: authToken,
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => setPreferences(data))
+            .catch((error) => console.error(error))
+            .finally(() => setLoading(false));
+        /* eslint-disable */
+    }, [baseUrl]);
+    return { preferences, loading };
+};
+const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const savePreferences = useCallback((data = {}) => {
+        if (!baseUrl)
+            return;
+        setLoading(true);
+        fetch(`${baseUrl}?orgId=${orgId}`, {
+            method: "POST",
+            headers: {
+                Authorization: authToken,
+                "Content-Type": "application/json",
+            },
+            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]);
+    const debounceRef = useRef(null);
+    const savePreferencesDebounced = useCallback((data = {}, wait = 500) => {
+        if (debounceRef.current)
+            window.clearTimeout(debounceRef.current);
+        debounceRef.current = window.setTimeout(() => savePreferences(data), wait);
+    }, [savePreferences]);
+    return { savePreferences, savePreferencesDebounced, loading, error };
+};
+export { useGetPreferences, useSavePreferences };

package/dist/esm/Hooks/useSidebarPrefs.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect, useState } from "react";
+const DEFAULT_KEY = "pixelize:sidebar-prefs:v1";
+const readPrefs = (key, defaults) => {
+    if (typeof window === "undefined" || !window.localStorage)
+        return defaults;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (!raw)
+            return defaults;
+        const parsed = JSON.parse(raw);
+        return {
+            mobileNav: typeof parsed.mobileNav === "boolean" ? parsed.mobileNav : defaults.mobileNav,
+            collapsed: typeof parsed.collapsed === "boolean" ? parsed.collapsed : defaults.collapsed,
+            mobileOpen: typeof parsed.mobileOpen === "boolean" ? parsed.mobileOpen : defaults.mobileOpen,
+        };
+    }
+    catch {
+        // Corrupt / unreadable value — fall back to defaults rather than throwing.
+        return defaults;
+    }
+};
+export const useSidebarPrefs = (options = {}) => {
+    var _a, _b, _c;
+    const { storageKey = DEFAULT_KEY, defaults } = options;
+    const resolvedDefaults = {
+        mobileNav: (_a = defaults === null || defaults === void 0 ? void 0 : defaults.mobileNav) !== null && _a !== void 0 ? _a : false,
+        collapsed: (_b = defaults === null || defaults === void 0 ? void 0 : defaults.collapsed) !== null && _b !== void 0 ? _b : false,
+        mobileOpen: (_c = defaults === null || defaults === void 0 ? void 0 : defaults.mobileOpen) !== null && _c !== void 0 ? _c : false,
+    };
+    // Lazy initializer so the synchronous read happens once, on the client.
+    const [prefs, setPrefs] = useState(() => readPrefs(storageKey, resolvedDefaults));
+    useEffect(() => {
+        if (typeof window === "undefined" || !window.localStorage)
+            return;
+        try {
+            window.localStorage.setItem(storageKey, JSON.stringify(prefs));
+        }
+        catch {
+            // Storage full / disabled (private mode) — preference simply won't persist.
+        }
+    }, [storageKey, prefs]);
+    const setMobileNav = useCallback((next) => setPrefs((p) => ({ ...p, mobileNav: next })), []);
+    const setCollapsed = useCallback((next) => setPrefs((p) => ({ ...p, collapsed: next })), []);
+    const setMobileOpen = useCallback((next) => setPrefs((p) => ({ ...p, mobileOpen: next })), []);
+    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).
+    const onToggleMobileNav = useCallback(() => setPrefs((p) => {
+        const next = !p.mobileNav;
+        // Entering navbar mode opens the drawer; leaving docks it.
+        return { ...p, mobileNav: next, mobileOpen: next };
+    }), []);
+    const closeMobile = useCallback(() => setPrefs((p) => ({ ...p, mobileOpen: false })), []);
+    return {
+        ...prefs,
+        setMobileNav,
+        setCollapsed,
+        setMobileOpen,
+        toggleMobileNav,
+        toggleCollapsed,
+        toggleMobileOpen,
+        onToggleMobileNav,
+        closeMobile,
+    };
+};
+export default useSidebarPrefs;

package/dist/esm/Theme/assertPalette.js

@@ -0,0 +1,50 @@
+const REQUIRED_GROUPS = [
+    "gradient", "primary", "secondary", "tertiary", "transparent", "black", "white",
+    "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan",
+    "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder",
+    "boxShadow", "sidebar", "boxborder", "border", "table", "disabled", "accentText",
+    "textMuted", "semanticText", "onPrimary", "onSemantic",
+];
+export const allPaletteTokensListed = true;
+const NESTED = [
+    ["semantic", ["success", "error", "warning", "info"]],
+    ["sidebar", [
+            "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
+            "semanticText",
+        ]],
+    ["semanticText", ["success", "error", "warning", "info"]],
+    ["onSemantic", ["success", "error", "warning", "info"]],
+    ["backgroundColor", ["main", "base"]],
+    ["boxShadow", ["primary", "default"]],
+];
+export const missingPaletteTokens = (colors) => {
+    if (!colors || typeof colors !== "object")
+        return ["(no colors object)"];
+    const c = colors;
+    const missing = REQUIRED_GROUPS.filter((k) => c[k] === undefined).map(String);
+    for (const [group, keys] of NESTED) {
+        const value = c[group];
+        if (!value)
+            continue;
+        for (const key of keys)
+            if (value[key] === undefined)
+                missing.push(`${group}.${key}`);
+    }
+    return missing;
+};
+const checked = new WeakSet();
+/** Fails once, loudly, at the theme boundary — never as a wrong colour 40 components deep. */
+export const assertPixelizePalette = (theme) => {
+    if (typeof theme === "object" && theme !== null && checked.has(theme)) {
+        return theme.colors;
+    }
+    const missing = missingPaletteTokens(theme === null || theme === void 0 ? void 0 : theme.colors);
+    if (missing.length > 0) {
+        throw new Error(`pixelize-design-library: this theme is missing ${missing.length} palette token(s): ` +
+            `${missing.join(", ")}. Components read these directly and have no fallback by design. ` +
+            `Wrap the app in <PixelizeThemeProvider>, or build the theme with createBrandTheme(palette).`);
+    }
+    if (typeof theme === "object" && theme !== null)
+        checked.add(theme);
+    return theme.colors;
+};

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

@@ -0,0 +1,25 @@
+import { paletteOf } from "./paletteFromTheme.js";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { avatarAnatomy } from "@chakra-ui/anatomy";
+const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(avatarAnatomy.keys);
+const $badgeBorder = cssVar("avatar-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
+ * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
+ * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
+ * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    const border = paletteOf(theme).backgroundColor.light;
+    return {
+        badge: {
+            [$badgeBorder.variable]: border,
+        },
+        container: {
+            [$badgeBorder.variable]: border,
+        },
+    };
+});
+export const Avatar = defineMultiStyleConfig({
+    baseStyle,
+});

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

@@ -0,0 +1,21 @@
+import { paletteOf } from "./paletteFromTheme.js";
+import { createMultiStyleConfigHelpers, cssVar } from "@chakra-ui/react";
+import { drawerAnatomy } from "@chakra-ui/anatomy";
+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],
+    },
+}));
+export const Drawer = defineMultiStyleConfig({
+    baseStyle,
+});