pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,20 +1,25 @@
 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 { Box, Flex, HStack, IconButton, Modal, ModalContent, ModalOverlay, Portal, Text, useModalContext, } from "@chakra-ui/react";
+import { Fragment, useEffect } from "react";
 import { ExternalLink, Minus, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.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.
+import { bandOn } from "../../Theme/tokens/builders/planeStep.js";
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+// 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.
- */
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+const WindowTitle = ({ testId, color, children }) => {
+    const { headerId, setHeaderMounted } = useModalContext();
+    useEffect(() => {
+        setHeaderMounted(true);
+        return () => setHeaderMounted(false);
+    }, [setHeaderMounted]);
+    return (_jsx(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`. */
+export default 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 = useCustomTheme();
@@ -24,37 +29,36 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
     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.
+        closeOnOverlayClick: false, closeOnEsc: false, finalFocusRef: finalFocusRef, children: [_jsx(ModalOverlay, { backdropFilter: "blur(3px)" }), _jsx(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: _jsxs(Box, { bg: theme.colors.background[50], borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: theme.colors.boxborder[200], bg: theme.colors.background[100], flexShrink: 0, children: [_jsx(Text, { fontSize: "sm", fontWeight: 600, color: theme.colors.text[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+                }, "data-testid": `${testId}-backdrop`, children: _jsxs(Box, { bg: theme.colors.surfaceRaised, borderRadius: "xl", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [_jsxs(Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: raisedRule(theme.colors), bg: bandOn(theme.colors.background[100], theme.colors.surfaceRaised), flexShrink: 0, children: [_jsx(WindowTitle, { testId: testId, color: theme.colors.text[700], children: title }), _jsxs(HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? (_jsx(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: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.minimize) !== null && _b !== void 0 ? _b : "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(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: _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 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.
+export 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 = 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));
-        }) }));
+    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 = accentTextOnCanvas(theme.colors.primary, theme.colors.primary[100]);
+    return (_jsx(Portal, { children: _jsx(Flex, { role: "region", "aria-label": label, "aria-live": "polite", "data-no-focus-lock": "true", position: "fixed", ...inset, zIndex: zIndices.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 = (_jsxs(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 ? (_jsx(Box, { role: "img", "aria-label": dirtyLabel, boxSize: "0.5rem", borderRadius: "full", bg: "currentColor", flexShrink: 0, "data-testid": `${testId}-dirty` })) : null, _jsxs(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 ? (_jsx(Box, { as: "span", fontWeight: 400, ml: 1.5, children: item.subtitle })) : null] }), onClose ? (_jsx(IconButton, { "aria-label": closeLabel ? closeLabel(item) : "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] }));
+                if (renderItem) {
+                    return _jsx(Box, { children: renderItem(item, api, pill) }, item.id);
+                }
+                return _jsx(Fragment, { children: pill }, item.id);
+            }) }) }));
 }

package/dist/esm/Constants/Sidebar.js

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

package/dist/esm/Hooks/exclusiveOverlay.js

@@ -0,0 +1,16 @@
+let active = null;
+export const exclusiveOpen = (id, close) => {
+    if (active && active.id !== id) {
+        active.close();
+    }
+    active = { id, close };
+};
+export const exclusiveClose = (id) => {
+    if ((active === null || active === void 0 ? void 0 : active.id) === id) {
+        active = null;
+    }
+};
+/** Test-only reset — not exported from the package root. */
+export const resetExclusiveOverlay = () => {
+    active = null;
+};

package/dist/esm/Hooks/sharedResizeObserver.js

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

package/dist/esm/Hooks/useDebounce.js

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

package/dist/esm/Hooks/useExclusiveOverlay.js

@@ -0,0 +1,17 @@
+import { useCallback, useEffect, useId, useRef } from "react";
+import { exclusiveClose, exclusiveOpen } from "./exclusiveOverlay.js";
+// NOTE: registers with the global dismiss coordinator — call requestOpen() before opening.
+export const useExclusiveOverlay = (isOpen, onClose) => {
+    const id = useId();
+    const onCloseRef = useRef(onClose);
+    onCloseRef.current = onClose;
+    const requestOpen = useCallback(() => {
+        exclusiveOpen(id, () => onCloseRef.current());
+    }, [id]);
+    useEffect(() => {
+        if (!isOpen) {
+            exclusiveClose(id);
+        }
+    }, [isOpen, id]);
+    return requestOpen;
+};

package/dist/esm/Hooks/useFullscreen.js

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

package/dist/esm/Hooks/useIsTruncated.js

@@ -1,34 +1,6 @@
 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>
- */
+import { observeResize } from "./sharedResizeObserver.js";
+// NOTE: compares scrollWidth/Height vs clientWidth/Height to detect real ellipsis truncation; re-measures via ResizeObserver.
 export function useIsTruncated(content, enabled = true) {
     const ref = useRef(null);
     const [isTruncated, setIsTruncated] = useState(false);
@@ -43,11 +15,9 @@ export function useIsTruncated(content, enabled = true) {
             return;
         measure();
         const el = ref.current;
-        if (!el || typeof ResizeObserver === "undefined")
+        if (!el)
             return;
-        const observer = new ResizeObserver(measure);
-        observer.observe(el);
-        return () => observer.disconnect();
+        return observeResize(el, measure);
     }, [measure, content, enabled]);
     return { ref, isTruncated };
 }

package/dist/esm/Hooks/useMatchMedia.js

@@ -0,0 +1,32 @@
+import { useMemo, useSyncExternalStore } from "react";
+const entries = new Map();
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscriberFor = (query) => (notify) => {
+    if (!supported())
+        return () => undefined;
+    let entry = entries.get(query);
+    if (!entry) {
+        const list = window.matchMedia(query);
+        const created = { list, listeners: new Set(), onChange: () => created.listeners.forEach((fn) => fn()) };
+        list.addEventListener("change", created.onChange);
+        entries.set(query, created);
+        entry = created;
+    }
+    entry.listeners.add(notify);
+    return () => {
+        const current = entries.get(query);
+        if (!current)
+            return;
+        current.listeners.delete(notify);
+        if (current.listeners.size === 0) {
+            current.list.removeEventListener("change", current.onChange);
+            entries.delete(query);
+        }
+    };
+};
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+export const useMatchMedia = (query, fallback = false) => {
+    const subscribe = useMemo(() => subscriberFor(query), [query]);
+    const read = () => { var _a, _b; return (_b = (_a = entries.get(query)) === null || _a === void 0 ? void 0 : _a.list.matches) !== null && _b !== void 0 ? _b : (supported() ? window.matchMedia(query).matches : fallback); };
+    return useSyncExternalStore(subscribe, read, () => fallback);
+};

package/dist/esm/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+export const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = useRef({ refs, onOutside });
+    useEffect(() => {
+        latest.current = { refs, onOutside };
+    });
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const handle = (event) => {
+            const target = event.target;
+            if (latest.current.refs.some((ref) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(target); }))
+                return;
+            latest.current.onOutside(event);
+        };
+        document.addEventListener("mousedown", handle, capture);
+        if (includeClick)
+            document.addEventListener("click", handle, capture);
+        return () => {
+            document.removeEventListener("mousedown", handle, capture);
+            if (includeClick)
+                document.removeEventListener("click", handle, capture);
+        };
+    }, [enabled, capture, includeClick]);
+};

package/dist/esm/Hooks/usePreferences.js

@@ -16,32 +16,45 @@ const constructUrl = ({ baseUrl, key, page, name, orgId }) => {
     const queryString = params.toString();
     return `${baseUrl}${queryString ? `?${queryString}` : ""}`;
 };
+const NO_PREFERENCES = [];
 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));
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = useState({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
     useEffect(() => {
-        if (!baseUrl) {
+        if (!url) {
             return;
         }
-        setLoading(true);
-        const url = constructUrl({ baseUrl, key, page, name, orgId });
+        let cancelled = false;
         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 };
+            .then((data) => {
+            if (!cancelled)
+                setSettled({ requestKey, preferences: data });
+        })
+            .catch((error) => {
+            if (cancelled)
+                return;
+            console.error(error);
+            setSettled({ requestKey, preferences: NO_PREFERENCES });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [url, authToken, requestKey]);
+    const isSettled = settled.requestKey === requestKey;
+    return {
+        preferences: isSettled ? settled.preferences : NO_PREFERENCES,
+        // NOTE: derived so KanbanBoard never reads a stale loading=false, on mount or re-key.
+        loading: Boolean(baseUrl) && !isSettled,
+    };
 };
 const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
     const [loading, setLoading] = useState(false);
@@ -59,7 +72,7 @@ const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", auth
             body: JSON.stringify({ key, page, name, json: data }),
         })
             .then((r) => r.json())
-            .then((d) => console.log(d))
+            .then(() => setError(null))
             .catch((e) => setError(e))
             .finally(() => setLoading(false));
     }, [baseUrl, orgId, authToken, key, page, name]);

package/dist/esm/Hooks/useScrollableRegion.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from "react";
+import { observeResize } from "./sharedResizeObserver.js";
+const FOCUSABLE_CONTENT = 'a[href], area[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), summary, iframe, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+const USER_SCROLLABLE = /auto|scroll/;
+const SLACK_PX = 1;
+const needsFocusStop = (el) => {
+    const { overflowX, overflowY } = getComputedStyle(el);
+    const scrollsX = USER_SCROLLABLE.test(overflowX) && el.scrollWidth > el.clientWidth + SLACK_PX;
+    const scrollsY = USER_SCROLLABLE.test(overflowY) && el.scrollHeight > el.clientHeight + SLACK_PX;
+    return (scrollsX || scrollsY) && !el.querySelector(FOCUSABLE_CONTENT);
+};
+export function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = useState(null);
+    const [isStop, setIsStop] = useState(false);
+    const measure = useCallback(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    useEffect(() => {
+        if (!element)
+            return undefined;
+        return observeResize(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    useEffect(measure);
+    const named = Boolean(label || labelledBy);
+    const props = isStop
+        ? {
+            tabIndex: 0,
+            role: named && !keepRole ? "region" : undefined,
+            "aria-label": label,
+            "aria-labelledby": labelledBy,
+        }
+        : {};
+    return { ref: setElement, props };
+}

package/dist/esm/Hooks/useSidebarPrefs.js

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

package/dist/esm/Theme/assertPalette.js

@@ -2,18 +2,19 @@ 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",
+    "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled",
+    "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised", "star",
 ];
 export const allPaletteTokensListed = true;
 const NESTED = [
     ["semantic", ["success", "error", "warning", "info"]],
     ["sidebar", [
             "background", "activeIcon", "activeLabel", "mutedIcon", "mutedLabel", "elevated",
-            "semanticText",
+            "semanticText", "hoverBg", "activeBg", "divider",
         ]],
     ["semanticText", ["success", "error", "warning", "info"]],
     ["onSemantic", ["success", "error", "warning", "info"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];

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

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