pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,43 @@
+export type StepValidator = () => string[];
+/** Reducer state: current step, the furthest validly reached step, and the blocking messages. */
+export type WizardState = {
+    /** Zero-based index of the current step. */
+    index: number;
+    /** Furthest step the user has validly reached; stages beyond it stay locked. */
+    furthest: number;
+    /** Messages blocking the current step; [] when none. */
+    errors: string[];
+};
+/** Actions `wizardTransition` understands. */
+export type WizardAction = 
+/** Validates the current step, then advances; failing keeps the step and stores its errors. */
+{
+    type: "next";
+}
+/** Steps back one, clearing errors. */
+ | {
+    type: "back";
+}
+/** Jumps to `index` if it is at or before `furthest`; otherwise ignored. */
+ | {
+    type: "goto";
+    index: number;
+}
+/** Moves to `index` and shows `errors`, used when finishing finds an invalid step. */
+ | {
+    type: "fail";
+    index: number;
+    errors: string[];
+}
+/** Returns to the first step with nothing reached beyond it. */
+ | {
+    type: "reset";
+};
+export declare const INITIAL_WIZARD_STATE: WizardState;
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export declare function wizardTransition(state: WizardState, action: WizardAction, validators: (StepValidator | undefined)[]): WizardState;
+/** First step whose validator reports errors, or null when every step is valid. */
+export declare function firstInvalidStep(validators: (StepValidator | undefined)[]): {
+    index: number;
+    errors: string[];
+} | null;

package/dist/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_WIZARD_STATE = void 0;
+exports.wizardTransition = wizardTransition;
+exports.firstInvalidStep = firstInvalidStep;
+exports.INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+function wizardTransition(state, action, validators) {
+    var _a, _b;
+    const last = validators.length - 1;
+    switch (action.type) {
+        case "next": {
+            const errors = (_b = (_a = validators[state.index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+            if (errors.length)
+                return { ...state, errors };
+            const index = Math.min(state.index + 1, last);
+            return { index, furthest: Math.max(state.furthest, index), errors: [] };
+        }
+        case "back":
+            return { ...state, index: Math.max(state.index - 1, 0), errors: [] };
+        case "goto":
+            if (action.index < 0 || action.index > state.furthest)
+                return state;
+            return { ...state, index: action.index, errors: [] };
+        case "fail":
+            return { ...state, index: action.index, errors: action.errors };
+        case "reset":
+            return exports.INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+function firstInvalidStep(validators) {
+    var _a, _b;
+    for (let index = 0; index < validators.length; index += 1) {
+        const errors = (_b = (_a = validators[index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+        if (errors.length)
+            return { index, errors };
+    }
+    return null;
+}

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

@@ -1,15 +1,3 @@
 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`.
- */
+/** Hover and focus preview card with open delay, close grace and Escape dismissal. */
 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

@@ -1,35 +1,33 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = WorkspaceTrayPreview;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
 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`.
- */
+/** Hover and focus preview card with open delay, close grace and Escape dismissal. */
 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 cardId = (0, react_1.useId)();
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
     const closeTimer = (0, react_1.useRef)(null);
+    const openRef = (0, react_1.useRef)(false);
     const setOpenState = (0, react_1.useCallback)((next) => {
+        if (openRef.current === next)
+            return;
+        openRef.current = next;
         setOpen(next);
         onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
     }, [onOpenChange]);
@@ -79,7 +77,15 @@ 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: [typeof children === "function"
+                ? children({
+                    triggerProps: {
+                        "aria-expanded": open,
+                        "aria-controls": open ? cardId : undefined,
+                        "aria-describedby": open ? cardId : undefined,
+                    },
+                })
+                : children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: cardId, 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: (0, surfaceRaised_1.raisedRule)(theme.colors), borderRadius: "lg", boxShadow: "xl", zIndex: zIndices_1.default.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

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

@@ -1,14 +1,5 @@
 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;
+/** Floating Jira-style workspace window; headless, so the parent owns its `state`. */
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
+/** Row of minimized-window pills, portalled above modals. */
+export declare function WorkspaceTray({ items, onRestore, onClose, testId, placement, offset, closeLabel, dirtyLabel, label, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -1,24 +1,32 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = WorkspaceWindow;
 exports.WorkspaceTray = WorkspaceTray;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
+const react_2 = require("react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const zIndices_1 = __importDefault(require("../../Theme/tokens/primitives/zIndices"));
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
-// 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 planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+// NOTE: no maximize/restore toggle (removed by product decision); onMedium/onMaximize stay as deprecated no-ops.
 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.
- */
-function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+const WindowTitle = ({ testId, color, children }) => {
+    const { headerId, setHeaderMounted } = (0, react_1.useModalContext)();
+    (0, react_2.useEffect)(() => {
+        setHeaderMounted(true);
+        return () => setHeaderMounted(false);
+    }, [setHeaderMounted]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Text, { id: headerId, fontSize: "sm", fontWeight: 600, color: color, noOfLines: 1, "data-testid": `${testId}-title`, children: children }));
+};
+/** Floating Jira-style workspace window; headless, so the parent owns its `state`. */
+function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, labels, finalFocusRef, testId = "workspace-window", }) {
+    var _a, _b, _c;
     // Must run before the early return: a minimized render would otherwise skip the hook
     // and change hook order when the window reopens.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -28,37 +36,36 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
     return ((0, jsx_runtime_1.jsxs)(react_1.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: [(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.
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, 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", 
+                // 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: (0, surfaceRaised_1.raisedRule)(theme.colors), bg: (0, planeStep_1.bandOn)(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.openFullPage) !== null && _a !== void 0 ? _a : "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": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "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": (_c = labels === null || labels === void 0 ? void 0 : labels.close) !== null && _c !== void 0 ? _c : "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.
- */
-function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+const cssLength = (value) => (typeof value === "number" ? `${value}px` : value);
+/** Row of minimized-window pills, portalled above modals. */
+// Portalled above modal overlays; aria-live keeps Chakra's modal aria-hidden off it, data-no-focus-lock keeps the focus trap off it.
+function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", placement = "bottom-end", offset, closeLabel, dirtyLabel = "Unsaved changes", label = "Minimized windows", renderItem, }) {
+    var _a, _b;
     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.
-    (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),
-                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
-            };
-            if (renderItem) {
-                return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
-            }
-            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]), boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.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 ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
-        }) }));
+    const atEnd = placement === "bottom-end";
+    const inset = {
+        bottom: cssLength((_a = offset === null || offset === void 0 ? void 0 : offset.y) !== null && _a !== void 0 ? _a : "1rem"),
+        [atEnd ? "right" : "left"]: cssLength((_b = offset === null || offset === void 0 ? void 0 : offset.x) !== null && _b !== void 0 ? _b : "1rem"),
+    };
+    const ink = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, theme.colors.primary[100]);
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsx)(react_1.Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices_1.default.modal + 1, direction: atEnd ? "row-reverse" : "row", 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),
+                };
+                const pill = ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: theme.colors.primary[100], color: ink, boxShadow: "md", borderWidth: "1px", borderColor: theme.colors.primary[200], "data-testid": `${testId}-pill`, children: [item.isDirty ? ((0, jsx_runtime_1.jsx)(react_1.Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, (0, jsx_runtime_1.jsxs)(react_1.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, item.subtitle ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": closeLabel ? closeLabel(item) : "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }));
+                if (renderItem) {
+                    return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api, pill) }, item.id);
+                }
+                return (0, jsx_runtime_1.jsx)(react_2.Fragment, { children: pill }, item.id);
+            }) }) }));
 }

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

@@ -1,11 +1,21 @@
-import type { ReactNode } from "react";
+import type { ReactNode, RefObject } 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";
+/** Accessible names of the window's icon controls; omitted keys keep the English default. */
+export interface WorkspaceWindowLabels {
+    /** Default "Minimize". */
+    minimize?: string;
+    /** Default "Close". */
+    close?: string;
+    /** Default "Open full page". */
+    openFullPage?: string;
+}
+/** 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;
@@ -13,9 +23,13 @@ export interface WorkspaceWindowProps {
     state: WorkspaceWindowState;
     /** Window body. */
     children: ReactNode;
+    /** Adds the Minimize button to the control bar; omitted hides it. The parent sets `state` to "minimized" itself. */
     onMinimize?: () => void;
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMedium?: () => void;
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMaximize?: () => void;
+    /** Adds the Close button to the control bar and is its only trigger: Esc and backdrop clicks never close the window. */
     onClose?: () => void;
     /** Optional "pop out to full page" affordance; hidden when omitted. */
     onOpenFullPage?: () => void;
@@ -26,40 +40,80 @@ export interface WorkspaceWindowProps {
      * itself (e.g. minimize-on-backdrop-click) via this callback.
      */
     onOverlayClick?: () => void;
+    /** Translated names for the Minimize, Close and Open full page buttons. */
+    labels?: WorkspaceWindowLabels;
+    /**
+     * Where focus lands when the window closes or minimizes. Without it focus returns to whatever opened the
+     * window, which is gone once it was restored from the tray; point it at a stable element (e.g. the page's main region).
+     */
+    finalFocusRef?: RefObject<HTMLElement>;
     /** Extra controls rendered in the control bar, left of the window buttons. */
     headerActions?: ReactNode;
     /** 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 {
+    /** Identifier handed back to `onRestore` and `onClose`. */
     id: string;
+    /** Main text of the pill. */
     title: ReactNode;
+    /** Shows an unsaved-changes dot on the built-in pill; named for screen readers by the tray's `dirtyLabel`. */
+    isDirty?: boolean;
+    /** Secondary text after the title on the built-in pill, e.g. a record type or id. */
+    subtitle?: ReactNode;
 }
+/** Props for the 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[];
+    /** Called with the item id when its pill is clicked to bring the window back. */
     onRestore?: (id: string) => void;
+    /** Called with the item id from the pill's close button; omitted removes that button. */
     onClose?: (id: string) => void;
+    /** data-testid for the tray; pills, restore, dirty dot and close buttons derive suffixed ids from it. Default "workspace-tray". */
     testId?: string;
-    /**
-     * Full override for a single item's pill markup — e.g. to wrap it in an
-     * app-specific hover preview, or to show extra state (a dirty dot) the
-     * generic pill doesn't know about. Receives the item plus ready-bound
-     * restore/close callbacks; when provided, the built-in pill is skipped for
-     * that item and this renders in its place inside the same positioned tray.
-     */
+    /** Which bottom corner the tray sits in. Default "bottom-end". Portalled above modals but outside their focus trap: a pointer restores a pill while a modal is open, Tab does not reach it. */
+    placement?: "bottom-end" | "bottom-start";
+    /** Distance from the viewport edges, to clear a sticky bar. Numbers are px, strings any CSS length. Default 1rem each. */
+    offset?: {
+        /** Gap from the side edge. */
+        x?: number | string;
+        /** Gap from the bottom edge. */
+        y?: number | string;
+    };
+    /** Accessible name for each pill's close button. Default "Close"; pass one that names the item for non-English or per-window labels. */
+    closeLabel?: (item: WorkspaceTrayItem) => string;
+    /** Accessible name of the unsaved dot on a pill with `isDirty`. Default "Unsaved changes". */
+    dirtyLabel?: string;
+    /** Accessible name of the tray region. Default "Minimized windows". */
+    label?: string;
+    /** Replaces one item's pill inside the same tray; gets the item, bound restore/close and `pill`, the built-in pill (dot, subtitle, close button) to return as is or wrap, e.g. in WorkspaceTrayPreview. */
     renderItem?: (item: WorkspaceTrayItem, api: {
+        /** Calls `onRestore` with this item's id. */
         restore: () => void;
+        /** Calls `onClose` with this item's id. */
         close: () => void;
-    }) => ReactNode;
+    }, pill: ReactNode) => ReactNode;
 }
+type WorkspaceTrayPreviewTriggerProps = {
+    "aria-expanded": boolean;
+    "aria-controls": string | undefined;
+    "aria-describedby": string | undefined;
+};
+/** 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
      * open/close timer so the cursor can travel pill ⇄ preview without the card
-     * closing (hover-bridge pattern).
+     * closing (hover-bridge pattern). A render-prop form receives `triggerProps`
+     * (aria-expanded, plus aria-controls/aria-describedby while open): spread them
+     * on the one focusable trigger so assistive tech hears the card.
      */
-    children: ReactNode;
+    children: ReactNode | ((api: {
+        /** Accessibility attributes to spread on the one focusable trigger. */
+        triggerProps: WorkspaceTrayPreviewTriggerProps;
+    }) => ReactNode);
     /**
      * The preview body, rendered inside the floating card. Headless: the consumer
      * supplies whatever it wants to show (ticket summary, chips, actions, etc.).
@@ -67,6 +121,7 @@ export interface WorkspaceTrayPreviewProps {
      * the preview can dismiss it.
      */
     preview: ReactNode | ((api: {
+        /** Closes the card immediately, e.g. after an action inside it. */
         close: () => void;
     }) => ReactNode);
     /** Whether the preview is enabled at all (e.g. disable on touch devices). */
@@ -80,10 +135,11 @@ export interface WorkspaceTrayPreviewProps {
      * right-aligned) — matches a bottom-right tray.
      */
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
-    /** Fires when the card actually opens — use to lazy-load the preview data. */
+    /** Fires with `true` when the card opens and `false` when it closes (never before it opened) — use `true` to lazy-load the preview data. */
     onOpenChange?: (open: boolean) => void;
     /** Card width. Default 340px, capped to the viewport on small screens. */
     width?: string | number;
     /** data-testid for the floating card. */
     testId?: string;
 }
+export {};

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,
@@ -30,15 +15,15 @@ const cssForScrollBar = (theme) => ({
         borderRadius: "0.5rem",
     },
     "&:hover::-webkit-scrollbar-thumb": {
-        background: theme.colors.primary[500],
+        background: theme.colors.sidebar.mutedIcon,
     },
     "&:hover::-webkit-scrollbar-thumb:hover": {
-        background: theme.colors.primary[700],
+        background: theme.colors.sidebar.mutedLabel,
     },
     scrollbarWidth: "none",
     "&:hover": {
         scrollbarWidth: "thin",
-        scrollbarColor: `${theme.colors.primary[500]} ${theme.colors.sidebar.background[500]}`,
+        scrollbarColor: `${theme.colors.sidebar.mutedIcon} ${theme.colors.sidebar.background[500]}`,
     },
 });
 exports.cssForScrollBar = cssForScrollBar;

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/sharedResizeObserver.d.ts

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