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

package/dist/Hooks/sharedResizeObserver.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeResize = observeResize;
+exports.suspendResizeWithin = suspendResizeWithin;
+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. */
+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. */
+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/Hooks/useDebounce.d.ts

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

package/dist/Hooks/useDebounce.js

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

package/dist/Hooks/useExclusiveOverlay.d.ts

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

package/dist/Hooks/useExclusiveOverlay.js

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

package/dist/Hooks/useFullscreen.d.ts

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

package/dist/Hooks/useFullscreen.js

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

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,8 @@
 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>
- */
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+// 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);
@@ -46,11 +18,9 @@ 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 (0, sharedResizeObserver_1.observeResize)(el, measure);
     }, [measure, content, enabled]);
     return { ref, isTruncated };
 }

package/dist/Hooks/useMatchMedia.d.ts

@@ -0,0 +1,2 @@
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+export declare const useMatchMedia: (query: string, fallback?: boolean) => boolean;

package/dist/Hooks/useMatchMedia.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("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). */
+const useMatchMedia = (query, fallback = false) => {
+    const subscribe = (0, react_1.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 (0, react_1.useSyncExternalStore)(subscribe, read, () => fallback);
+};
+exports.useMatchMedia = useMatchMedia;

package/dist/Hooks/useOutsideMouseDown.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from "react";
+interface OutsideMouseDownOptions {
+    enabled?: boolean;
+    /** Listen in the capture phase, so a descendant's `stopPropagation` cannot hide the press. */
+    capture?: boolean;
+    /** Also fire on `click`, for pickers that must finalise on either event. */
+    includeClick?: boolean;
+}
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+export declare const useOutsideMouseDown: (refs: readonly RefObject<Element | null>[], onOutside: (event: MouseEvent) => void, { enabled, capture, includeClick }?: OutsideMouseDownOptions) => void;
+export {};

package/dist/Hooks/useOutsideMouseDown.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOutsideMouseDown = void 0;
+const react_1 = require("react");
+/** Calls `onOutside` for a document `mousedown` outside every ref; a null ref contains nothing. Unlike Chakra's `useOutsideClick` it never waits for `mouseup`. */
+const useOutsideMouseDown = (refs, onOutside, { enabled = true, capture = false, includeClick = false } = {}) => {
+    const latest = (0, react_1.useRef)({ refs, onOutside });
+    (0, react_1.useEffect)(() => {
+        latest.current = { refs, onOutside };
+    });
+    (0, react_1.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]);
+};
+exports.useOutsideMouseDown = useOutsideMouseDown;

package/dist/Hooks/usePreferences.js

@@ -19,32 +19,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] = (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.
-    const [loading, setLoading] = (0, react_1.useState)(() => Boolean(baseUrl));
+    const url = baseUrl ? constructUrl({ baseUrl, key, page, name, orgId }) : "";
+    const requestKey = url ? JSON.stringify([url, authToken]) : "";
+    const [settled, setSettled] = (0, react_1.useState)({
+        requestKey: "",
+        preferences: NO_PREFERENCES,
+    });
     (0, react_1.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,
+    };
 };
 exports.useGetPreferences = useGetPreferences;
 const useSavePreferences = ({ baseUrl = "", key = "", page = "", name = "", authToken = "", orgId = "", }) => {
@@ -63,7 +76,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/Hooks/useScrollableRegion.d.ts

@@ -0,0 +1,17 @@
+/** `label` or `labelledBy` names the scroller; `keepRole` stops it taking role=region. */
+export type ScrollableRegionOptions = {
+    label?: string;
+    labelledBy?: string;
+    keepRole?: boolean;
+};
+/** Attributes to spread on a scroller; empty unless it overflows with nothing focusable inside. */
+export type ScrollableRegionProps = {
+    tabIndex?: 0;
+    role?: "region";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+export declare function useScrollableRegion<T extends HTMLElement = HTMLElement>({ label, labelledBy, keepRole, }?: ScrollableRegionOptions): {
+    ref: (node: T | null) => void;
+    props: ScrollableRegionProps;
+};

package/dist/Hooks/useScrollableRegion.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollableRegion = useScrollableRegion;
+const react_1 = require("react");
+const sharedResizeObserver_1 = require("./sharedResizeObserver");
+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);
+};
+function useScrollableRegion({ label, labelledBy, keepRole = false, } = {}) {
+    const [element, setElement] = (0, react_1.useState)(null);
+    const [isStop, setIsStop] = (0, react_1.useState)(false);
+    const measure = (0, react_1.useCallback)(() => setIsStop(element !== null && needsFocusStop(element)), [element]);
+    (0, react_1.useEffect)(() => {
+        if (!element)
+            return undefined;
+        return (0, sharedResizeObserver_1.observeResize)(element, measure);
+    }, [element, measure]);
+    // NOTE: also runs after every commit; an equal state bails out, so no loop.
+    (0, react_1.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/Hooks/useSidebarPrefs.d.ts

@@ -1,46 +1,9 @@
-/**
- * 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;
     mobileOpen: boolean;
 };
+/** Persistence key and first-visit defaults for sidebar preferences. */
 export type UseSidebarPrefsOptions = {
     /** localStorage key. Versioned so a future shape change can bump it. */
     storageKey?: string;
@@ -54,10 +17,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", "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", "star"];
 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

@@ -5,18 +5,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",
 ];
 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"]],
+    ["focusRing", ["ring", "halo"]],
     ["backgroundColor", ["main", "base"]],
     ["boxShadow", ["primary", "default"]],
 ];