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

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -11,19 +11,7 @@ const PLACEMENT_STYLE = {
     "bottom-end": { top: "100%", right: 0, marginTop: "6px" },
     "bottom-start": { top: "100%", left: 0, marginTop: "6px" },
 };
-/**
- * Presentational, app-agnostic hover-preview for a "workspace tray" pill (or any
- * trigger). Headless of any data: the consumer passes the trigger as `children`
- * and the card body as `preview` (node or render-prop receiving `close()`), so
- * this can preview a ticket, a doc, a chat — anything — with the same intent-safe
- * hover behavior.
- *
- * Intent-safe hover (hover-bridge): hovering the trigger opens the card after a
- * short delay (anti-flash); a shared open/close timer + small gap let the cursor
- * travel trigger ⇄ card without the card closing; leaving both (with a grace
- * delay) closes it; Escape dismisses. Fetch/render the preview lazily via
- * `onOpenChange`.
- */
+// Presentational, app-agnostic hover-preview (intent-safe: open delay, close grace, Escape dismisses).
 function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -79,7 +67,7 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

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

@@ -1,14 +1,3 @@
 import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindowProps";
-/**
- * Presentational floating "workspace window" — a Jira-style dialog with
- * minimize / close controls and an optional "open full page" affordance, at a
- * single fixed size (no maximize/restore toggle). Headless of any state
- * management: the parent owns the window state and passes callbacks. Render
- * minimized windows with the companion WorkspaceTray.
- */
 export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
- * the parent supplies the minimized items and restore/close handlers.
- */
 export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

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

package/dist/Hooks/useDebounce.d.ts

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

package/dist/Hooks/useDebounce.js

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

package/dist/Hooks/useExclusiveOverlay.d.ts

@@ -1,5 +1 @@
-/**
- * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
- * immediately before opening; `onClose` is invoked when another overlay opens.
- */
 export declare const useExclusiveOverlay: (isOpen: boolean, onClose: () => void) => () => void;

package/dist/Hooks/useExclusiveOverlay.js

@@ -3,10 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExclusiveOverlay = void 0;
 const react_1 = require("react");
 const exclusiveOverlay_1 = require("./exclusiveOverlay");
-/**
- * Register this overlay with the global dismiss coordinator. Call `requestOpen()`
- * immediately before opening; `onClose` is invoked when another overlay opens.
- */
+// NOTE: registers with the global dismiss coordinator — call requestOpen() before opening.
 const useExclusiveOverlay = (isOpen, onClose) => {
     const id = (0, react_1.useId)();
     const onCloseRef = (0, react_1.useRef)(onClose);

package/dist/Hooks/useFullscreen.d.ts

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

package/dist/Hooks/useFullscreen.js

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

package/dist/Hooks/useIsTruncated.d.ts

@@ -1,33 +1,3 @@
-/**
- * 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 declare function useIsTruncated<T extends HTMLElement = HTMLElement>(content?: unknown, enabled?: boolean): {
     ref: React.MutableRefObject<T | null>;
     isTruncated: boolean;

package/dist/Hooks/useIsTruncated.js

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

package/dist/Hooks/usePreferences.js

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

package/dist/Hooks/useSidebarPrefs.d.ts

@@ -1,41 +1,3 @@
-/**
- * Persisted sidebar preferences (localStorage-backed, opt-in).
- *
- * Persists the user's explicit layout choices so they survive reloads and browser
- * restarts (restoring the sidebar to exactly the same state):
- *  - `mobileNav`   — "navbar mode" forced on a large screen via the Hide/Show toggle
- *  - `collapsed`   — the mini-rail (collapse) state
- *  - `mobileOpen`  — whether the overlay drawer is currently open
- *
- * It deliberately does NOT persist viewport-driven state (the `lg` breakpoint /
- * `belowLg`) — that must always reflect the live screen size, not a saved value.
- *
- * SSR-safe: reads/writes are guarded with `typeof window` so it no-ops during
- * server render and hydrates from storage on the client.
- *
- * Adoption — wire the returned values straight onto the library's `SideBar` +
- * `NavigationBar`; the composed handlers (`onToggleMobileNav`, `closeMobile`) mean
- * a consuming app does not re-implement the "entering navbar mode opens the drawer"
- * behavior itself:
- *
- * @example
- * const sb = useSidebarPrefs();
- * <SideBar
- *   toggle={sb.collapsed}
- *   changeToggle={sb.toggleCollapsed}
- *   mobileNav={sb.mobileNav}
- *   onToggleMobileNav={sb.onToggleMobileNav}
- *   mobileOpen={sb.mobileOpen}
- *   onMobileClose={sb.closeMobile}
- *   // ...your menus, user, etc.
- * />
- * <NavBar
- *   sideBarToggole={sb.mobileOpen}
- *   onSideBarToggole={sb.toggleMobileOpen}
- *   forceSideBarToggle={sb.mobileNav}
- *   // ...your nav props
- * />
- */
 export type SidebarPrefs = {
     mobileNav: boolean;
     collapsed: boolean;
@@ -54,10 +16,7 @@ export type UseSidebarPrefsResult = SidebarPrefs & {
     toggleMobileNav: () => void;
     toggleCollapsed: () => void;
     toggleMobileOpen: () => void;
-    /**
-     * Ready handler for SideBar's `onToggleMobileNav`. Flips navbar mode AND syncs
-     * the drawer (entering → open, leaving → docked) so apps get this right for free.
-     */
+    /** Ready handler for SideBar's `onToggleMobileNav` — flips navbar mode and syncs the drawer. */
     onToggleMobileNav: () => void;
     /** Ready handler for SideBar's `onMobileClose` — closes the overlay drawer. */
     closeMobile: () => void;

package/dist/Hooks/useSidebarPrefs.js

@@ -48,8 +48,7 @@ const useSidebarPrefs = (options = {}) => {
     const toggleMobileNav = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, mobileNav: !p.mobileNav })), []);
     const toggleCollapsed = (0, react_1.useCallback)(() => setPrefs((p) => ({ ...p, collapsed: !p.collapsed })), []);
     const toggleMobileOpen = (0, react_1.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 = (0, react_1.useCallback)(() => setPrefs((p) => {
         const next = !p.mobileNav;
         // Entering navbar mode opens the drawer; leaving docks it.

package/dist/Theme/assertPalette.d.ts

@@ -1,5 +1,5 @@
 import type { PaletteProps } from "./tokens/types";
-declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic"];
+declare const REQUIRED_GROUPS: readonly ["gradient", "primary", "secondary", "tertiary", "transparent", "black", "white", "semantic", "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "backgroundColor", "background", "text", "header", "placeholder", "boxShadow", "focusRing", "sidebar", "boxborder", "border", "table", "disabled", "accentText", "textMuted", "semanticText", "onPrimary", "onSemantic", "surfaceRaised"];
 type Unlisted = Exclude<keyof PaletteProps, (typeof REQUIRED_GROUPS)[number]>;
 export type AllPaletteTokensListed = Unlisted extends never ? true : ["unlisted token", Unlisted];
 export declare const allPaletteTokensListed: AllPaletteTokensListed;

package/dist/Theme/assertPalette.js

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

package/dist/Theme/chakra/Card.styles.d.ts

@@ -0,0 +1,78 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+declare const $padding: {
+    variable: string;
+    reference: string;
+};
+declare const $shadow: {
+    variable: string;
+    reference: string;
+};
+declare const $radius: {
+    variable: string;
+    reference: string;
+};
+declare const $border: {
+    variable: string;
+    reference: string;
+};
+declare const $borderColor: {
+    variable: string;
+    reference: string;
+};
+export declare const Card: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        container: {
+            [$bg.variable]: string;
+            [$radius.variable]: string;
+            [$borderColor.variable]: string;
+            color: string;
+            "& > .chakra-card__header + .chakra-card__body, & > .chakra-card__body + .chakra-card__footer": {
+                paddingTop: number;
+            };
+        };
+        header: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+        };
+    }) | undefined;
+    sizes?: {
+        sm: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+        md: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+        lg: {
+            container: {
+                [$radius.variable]: string;
+                [$padding.variable]: string;
+            };
+        };
+    } | undefined;
+    variants?: {
+        outline: {
+            container: {
+                [$border.variable]: string;
+                [$shadow.variable]: string;
+            };
+        };
+    } | undefined;
+    defaultProps?: {
+        size?: "sm" | "md" | "lg" | undefined;
+        variant?: "outline" | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("header" | "container" | "body" | "footer")[];
+};
+export {};

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

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Card = void 0;
+const anatomy_1 = require("@chakra-ui/anatomy");
+const react_1 = require("@chakra-ui/react");
+const paletteFromTheme_1 = require("./paletteFromTheme");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.cardAnatomy.keys);
+const $bg = (0, react_1.cssVar)("card-bg");
+const $padding = (0, react_1.cssVar)("card-padding");
+const $shadow = (0, react_1.cssVar)("card-shadow");
+const $radius = (0, react_1.cssVar)("card-radius");
+const $border = (0, react_1.cssVar)("card-border-width");
+const $borderColor = (0, react_1.cssVar)("card-border-color");
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.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" },
+    }),
+};
+exports.Card = defineMultiStyleConfig({
+    baseStyle,
+    sizes,
+    variants,
+    defaultProps: { variant: "outline", size: "md" },
+});

package/dist/Theme/chakra/Drawer.styles.d.ts

@@ -1,24 +1,57 @@
 import type { StyleFunctionProps } from "@chakra-ui/react";
-declare const $bg: {
-    variable: string;
-    reference: string;
-};
 export declare const Drawer: {
     baseStyle?: (({ theme }: StyleFunctionProps) => {
         dialog: {
-            [$bg.variable]: string;
             bg: string;
             color: string;
+            borderWidth: string;
+            borderStyle: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        overlay: {
+            bg: string;
+            backdropFilter: string;
+        };
+        header: {
+            px: number;
+            py: number;
+            pe: number;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: number;
+            color: string;
+            borderBottomWidth: string;
+            borderBottomStyle: string;
+            borderBottomColor: string;
+        };
+        closeButton: {
+            top: number;
+            insetEnd: number;
+        };
+        body: {
+            px: number;
+            py: number;
+        };
+        footer: {
+            px: number;
+            py: number;
+            display: string;
+            justifyContent: string;
+            gap: number;
+            borderTopWidth: string;
+            borderTopStyle: string;
+            borderTopColor: string;
         };
     }) | undefined;
     sizes?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     variants?: {
         [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
-            keys: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+            keys: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
         }>;
     } | undefined;
     defaultProps?: {
@@ -26,6 +59,5 @@ export declare const Drawer: {
         variant?: string | number | undefined;
         colorScheme?: string | undefined;
     } | undefined;
-    parts: ("header" | "body" | "dialog" | "footer" | "overlay" | "closeButton" | "dialogContainer")[];
+    parts: ("header" | "overlay" | "body" | "dialog" | "footer" | "closeButton" | "dialogContainer")[];
 };
-export {};

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

@@ -4,21 +4,22 @@ exports.Drawer = void 0;
 const paletteFromTheme_1 = require("./paletteFromTheme");
 const react_1 = require("@chakra-ui/react");
 const anatomy_1 = require("@chakra-ui/anatomy");
+const overlay_styles_1 = require("./overlay.styles");
 const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
 const $bg = (0, react_1.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]: (0, paletteFromTheme_1.paletteOf)(theme).backgroundColor.light,
-        bg: $bg.reference,
-        color: (0, paletteFromTheme_1.paletteOf)(theme).text[900],
-    },
-}));
+// Chakra's stock `--drawer-bg` is a literal white behind `_dark`, which this palette-swap theme never enters.
+const baseStyle = definePartsStyle(({ theme }) => {
+    const colors = (0, paletteFromTheme_1.paletteOf)(theme);
+    const parts = (0, overlay_styles_1.dialogPartStyles)(colors);
+    return {
+        ...parts,
+        dialog: {
+            ...parts.dialog,
+            [$bg.variable]: colors.surfaceRaised,
+            bg: $bg.reference,
+        },
+    };
+});
 exports.Drawer = defineMultiStyleConfig({
     baseStyle,
 });