pixelize-design-library 2.4.2-beta.60 → 2.4.2-beta.62

package/dist/esm/Components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,18 @@
+import { chakra } from "@chakra-ui/react";
+// NOTE: fixed, not Chakra's absolute: an absolute 1px box can extend a scrolled page.
+export const visuallyHiddenStyle = {
+    border: "0",
+    clip: "rect(0, 0, 0, 0)",
+    height: "1px",
+    width: "1px",
+    margin: "-1px",
+    padding: "0",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    position: "fixed",
+    top: "0",
+    left: "0",
+};
+const VisuallyHidden = chakra("span", { baseStyle: visuallyHiddenStyle });
+VisuallyHidden.displayName = "VisuallyHidden";
+export default VisuallyHidden;

package/dist/esm/Components/VisuallyHidden/VisuallyHiddenProps.js

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

package/dist/esm/Components/WizardDialog/WizardDialog.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { useEffect, useId, useRef } from "react";
 import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
@@ -38,21 +38,26 @@ const WizardBody = ({ flow, steps, labels, testId }) => {
                             value: candidate.summary,
                         })) })] })) : null] }));
 };
-const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => (_jsxs(Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? (_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : (_jsx("span", {})), _jsxs(Flex, { gap: 2, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+const WizardFooter = ({ flow, labels, isFinishing, finishDisabled, finishBlockedReason, onCancel, }) => {
+    const { colors } = useCustomTheme();
+    const reasonId = useId();
+    const reason = finishDisabled && !isFinishing ? finishBlockedReason : undefined;
+    return (_jsxs(Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? (_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : (_jsx("span", {})), _jsxs(Flex, { gap: 2, align: reason ? "center" : undefined, children: [!flow.isFirst ? (_jsx(Button, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast && reason ? (_jsx(Text, { id: reasonId, fontSize: "xs", color: colors.textMuted, "data-testid": "wizard-finish-reason", children: reason })) : null, flow.isLast ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, isDisabled: finishDisabled, "aria-describedby": reason ? reasonId : undefined, loadingText: labels.finish, "data-testid": "wizard-finish" })) : (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.next, onClick: flow.next, "data-testid": "wizard-next" }))] })] }));
+};
 /** Modal wizard that owns step state: validated Continue, locked future steps, error summary, review on the last step. */
-export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+export const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
     const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
     const resolved = { ...DEFAULT_LABELS, ...labels };
     const guardedClose = () => {
         if (!isFinishing)
             onClose();
     };
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [_jsx(ModalBody, { children: _jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), _jsx(ModalFooter, { children: _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [_jsx(ModalBody, { children: _jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), _jsx(ModalFooter, { children: _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: guardedClose }) })] }));
 };
 /** The same wizard inline, for a full-page flow rather than a modal. */
-export const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+export const Wizard = ({ steps, onFinish, isFinishing = false, finishDisabled = false, finishBlockedReason, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
     const flow = useWizardFlow({ steps, stepId, onStepChange, onFinish });
     const resolved = { ...DEFAULT_LABELS, ...labels };
-    return (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+    return (_jsxs(Flex, { direction: "column", gap: 6, children: [_jsx(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), _jsx(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, finishDisabled: finishDisabled, finishBlockedReason: finishBlockedReason, onCancel: onCancel })] }));
 };
 export default WizardDialog;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import zIndices from "../../Theme/tokens/primitives/zIndices.js";
 const PLACEMENT_STYLE = {
     "top-end": { bottom: "100%", right: 0, marginBottom: "6px" },
     "top-start": { bottom: "100%", left: 0, marginBottom: "6px" },
@@ -64,7 +65,7 @@ export default function WorkspaceTrayPreview({ children, preview, enabled = true
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && (_jsx(Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.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"
+        }, children: [children, open && (_jsx(Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.surfaceRaised, borderWidth: "1px", borderColor: theme.colors.boxborder[200], borderRadius: "lg", boxShadow: "xl", zIndex: zIndices.popover, pointerEvents: "auto", p: 3, textAlign: "left", color: theme.colors.text[700], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

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

@@ -1,10 +1,20 @@
 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, Text, useModalContext, } from "@chakra-ui/react";
+import { 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";
 // NOTE: no maximize/restore toggle (removed by product decision) — onMedium/onMaximize kept optional for back-compat.
 const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
+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 }));
+};
 // Presentational floating "workspace window" (Jira-style dialog), headless — the parent owns window state.
 export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
     // Must run before the early return: a minimized render would otherwise skip the hook
@@ -21,7 +31,7 @@ export default function WorkspaceWindow({ title, state, children, onMinimize, on
                 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.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: 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: theme.colors.boxborder[200], bg: theme.colors.background[100], 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": "Open full page", size: "xs", variant: "ghost", icon: _jsx(ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? (_jsx(IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: _jsx(Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? (_jsx(IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: _jsx(X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), _jsx(Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 // Bottom tray of restore pills for minimized WorkspaceWindows — presentational, parent supplies handlers.
 export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
@@ -30,7 +40,7 @@ export function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-t
         return null;
     return (
     // NOTE: floating bottom-right cluster (Gmail/Jira pattern), not a docked bar — needs no reserved page gutter.
-    _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) => {
+    _jsx(Flex, { position: "fixed", bottom: 4, right: 4, zIndex: zIndices.modal, 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),

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/useIsTruncated.js

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+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);
@@ -14,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/Theme/chakra/createBrandTheme.js

@@ -5,18 +5,44 @@ import { componentStyles } from "./componentStyles.js";
 import { resolveFilledSurface } from "../tokens/builders/filledSurface.js";
 import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
 import { focusRingShadow } from "./focusRing.styles.js";
+import { shadowsFor } from "../tokens/primitives/shadows.js";
+import { reducedMotionGlobalStyles } from "./motion.js";
+import { TEXT_STYLES } from "../tokens/primitives/typography.js";
+import { memoiseByReads } from "../tokens/builders/memoByReads.js";
+const memoisedStyle = (value) => typeof value === "function" ? memoiseByReads(value) : value;
+const memoisedGroup = (group) => Object.fromEntries(Object.entries(group).map(([key, value]) => [key, memoisedStyle(value)]));
+const memoisedConfig = (config) => Object.fromEntries(Object.entries(config).map(([key, value]) => [
+    key,
+    key === "baseStyle"
+        ? memoisedStyle(value)
+        : key === "variants" || key === "sizes"
+            ? memoisedGroup(value)
+            : value,
+]));
+// NOTE: extendTheme deep-merges Chakra's and our style output on every call; cache it per theme.
+const withMemoisedStyles = (theme) => {
+    const components = theme.components;
+    return {
+        ...theme,
+        components: {
+            ...components,
+            ...Object.fromEntries(Object.keys(componentStyles).map((name) => [name, memoisedConfig(components[name])])),
+        },
+    };
+};
 // Builds a Chakra theme from a pure brand palette — dark mode works by swapping which palette it carries.
 export const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts,
         ...common,
         // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
-        shadows: { ...common.shadows, outline: focusRingShadow(palette) },
+        shadows: { ...shadowsFor(colorMode), outline: focusRingShadow(palette) },
     };
-    return extendTheme({
+    return withMemoisedStyles(extendTheme({
         ...brand,
         config: {
             ...common.config,
@@ -64,11 +90,15 @@ export const createBrandTheme = (palette, options = {}) => {
                             WebkitTextFillColor: palette.text[900],
                             caretColor: palette.text[900],
                         },
+                        ...motionRule,
                     },
                 },
             }
-            : {}),
+            : options.reducedMotion === "global"
+                ? { styles: { global: motionRule } }
+                : {}),
+        textStyles: TEXT_STYLES,
         components: componentStyles,
-    });
+    }));
 };
 export default createBrandTheme;

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

@@ -6,6 +6,9 @@ export const FOCUS_RING_WIDTH = 4;
 // NOTE: a box-shadow, not an outline — drawn outside the border box so it never resizes the control.
 export const focusRingShadow = (colors) => `0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+export const insetFocusRingShadow = (colors) => `inset 0 0 0 ${FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 export const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 // NOTE: transparent outline isn't decorative — forced-colors mode drops box-shadow but repaints an outline.

package/dist/esm/Theme/chakra/motion.js

@@ -6,3 +6,28 @@ export const usePrefersReducedMotion = () => useMatchMedia(MEDIA, false);
 export const reducedMotionSx = (overrides = {}) => ({
     [REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },
 });
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export const MOTION_KEEP_CLASS = "pz-motion-keep";
+const KEPT = [
+    ".chakra-spinner",
+    ".chakra-progress",
+    ".chakra-progress *",
+    `.${MOTION_KEEP_CLASS}`,
+    `.${MOTION_KEEP_CLASS} *`,
+];
+const notKept = KEPT.map((selector) => `:not(${selector})`).join("");
+export const REDUCED_MOTION_SELECTOR = [
+    `*${notKept}`,
+    `*${notKept}::before`,
+    `*${notKept}::after`,
+].join(", ");
+export const reducedMotionGlobalStyles = {
+    [REDUCED_MOTION_QUERY]: {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: "0.01ms !important",
+            animationDuration: "0.01ms !important",
+            animationIterationCount: "1 !important",
+            scrollBehavior: "auto !important",
+        },
+    },
+};

package/dist/esm/Theme/index.js

@@ -1,15 +1,18 @@
 import createBrandTheme from "./chakra/createBrandTheme.js";
 import { lightPalettes, darkPalettes } from "./tokens/brands/index.js";
-// Chakra themes per brand, built from the pure palettes in tokens/brands via createBrandTheme.
+import { lazyObject } from "./tokens/builders/lazy.js";
+// NOTE: lavender is built at import as the shape template — every light theme shares its keys.
 const lavender = createBrandTheme(lightPalettes.lavender);
-const meadow = createBrandTheme(lightPalettes.meadow);
-const radiant = createBrandTheme(lightPalettes.radiant);
-const skyline = createBrandTheme(lightPalettes.skyline);
-const slate = createBrandTheme(lightPalettes.slate);
-const emerald = createBrandTheme(lightPalettes.emerald);
-const rosewood = createBrandTheme(lightPalettes.rosewood);
-const storefront = createBrandTheme(lightPalettes.storefront);
-const zinc = createBrandTheme(lightPalettes.zinc);
+const lightThemeKeys = Object.keys(lavender);
+const lazyLightTheme = (brand) => lazyObject(lightThemeKeys, () => createBrandTheme(lightPalettes[brand]));
+const meadow = lazyLightTheme("meadow");
+const radiant = lazyLightTheme("radiant");
+const skyline = lazyLightTheme("skyline");
+const slate = lazyLightTheme("slate");
+const emerald = lazyLightTheme("emerald");
+const rosewood = lazyLightTheme("rosewood");
+const storefront = lazyLightTheme("storefront");
+const zinc = lazyLightTheme("zinc");
 export { skyline, meadow, radiant, lavender, slate, emerald, rosewood, storefront, zinc };
 // NOTE: consumers iterate this to render theme pickers — key order is load-bearing. Stays light-only.
 export const ThemesList = {

package/dist/esm/Theme/provider/PixelizeThemeProvider.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { ChakraProvider, extendTheme } from "@chakra-ui/react";
 import { brandThemes } from "../index.js";
 import ToasterProvider from "../../Components/Toaster/Toaster.js";
+import { reducedMotionGlobalStyles } from "../chakra/motion.js";
 import { getSystemColorMode, readStoredTheme, subscribeToSystemColorMode, writeStoredTheme, } from "./colorModeStorage.js";
 const DEFAULT_BRAND = "lavender";
 const DEFAULT_MODE = "system";
@@ -16,7 +17,7 @@ const forcedLightColorModeManager = {
 };
 export const ThemeModeContext = createContext(undefined);
 // NOTE: Chakra's own color mode stays unsynced from resolvedMode — its built-in `_dark:` blocks assume the opposite ramp direction. Read mode via useThemeMode(), not useColorModeValue().
-export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, reducedMotion = "components", }) => {
     const [mode, setModeState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
     const [brand, setBrandState] = useState(() => { var _a; return (_a = (disablePersistence ? undefined : readStoredTheme(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
     const [systemMode, setSystemMode] = useState(getSystemColorMode);
@@ -58,14 +59,17 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         writeStoredTheme(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
+    // NOTE: the page re-themes in an interruptible second commit; the switcher paints first.
+    const appliedMode = useDeferredValue(resolvedMode);
+    const appliedBrand = useDeferredValue(brand);
     // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
     useLayoutEffect(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     // NOTE: re-asserted after Chakra's own ColorModeProvider effect overwrites it back to "light".
     useEffect(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     const onModeChangeRef = useRef(onModeChange);
     const onBrandChangeRef = useRef(onBrandChange);
     useLayoutEffect(() => {
@@ -87,14 +91,18 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
     // NOTE: keyed by value, not identity — themeOverrides is usually an inline literal.
     const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = useMemo(() => {
-        const base = brandThemes[brand][resolvedMode];
-        return themeOverrides ? extendTheme(base, themeOverrides) : base;
+        const base = brandThemes[appliedBrand][appliedMode];
+        const extensions = [
+            ...(reducedMotion === "global" ? [{ styles: { global: reducedMotionGlobalStyles } }] : []),
+            ...(themeOverrides ? [themeOverrides] : []),
+        ];
+        return extensions.length ? extendTheme(base, ...extensions) : base;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [brand, resolvedMode, overridesKey]);
+    }, [appliedBrand, appliedMode, overridesKey, reducedMotion]);
     // NOTE: global.css ships var(--color-*) light-only — re-point them here in dark, clear in light.
     useLayoutEffect(() => {
         const root = document.documentElement;
-        root.dataset.mode = resolvedMode;
+        root.dataset.mode = appliedMode;
         const { colors } = resolvedTheme;
         const { gray, semantic } = colors;
         const HUE_SCALES = [
@@ -118,7 +126,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
         const set = (name, val) => root.style.setProperty(`--color-${name}`, val);
         const clear = (name) => root.style.removeProperty(`--color-${name}`);
         const allRampNames = [...HUE_SCALES, ...SEMANTIC_SCALES].flatMap((s) => RUNGS.map((r) => `${s}-${r}`));
-        if (resolvedMode === "dark") {
+        if (appliedMode === "dark") {
             for (const s of HUE_SCALES)
                 for (const r of RUNGS)
                     set(`${s}-${r}`, colors[s][r]);
@@ -134,6 +142,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
             for (const name of Object.keys(SEMANTIC_VARS))
                 clear(name);
         }
-    }, [resolvedMode, resolvedTheme]);
-    return (_jsx(ThemeModeContext.Provider, { value: value, children: _jsx(ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: _jsx(ToasterProvider, { children: children }) }) }));
+    }, [appliedMode, resolvedTheme]);
+    const themedTree = useMemo(() => (_jsx(ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: _jsx(ToasterProvider, { children: children }) })), [resolvedTheme, children]);
+    return _jsx(ThemeModeContext.Provider, { value: value, children: themedTree });
 };

package/dist/esm/Theme/provider/ThemeSwitcher.js

@@ -3,6 +3,7 @@ import { useRef, useState } from "react";
 import { Box, Button, HStack, IconButton, Menu, MenuButton, MenuDivider, MenuItemOption, MenuList, MenuOptionGroup, Text, Tooltip, } from "@chakra-ui/react";
 import { Monitor, Moon, Sun } from "lucide-react";
 import { brandThemes } from "../index.js";
+import { lightPalettes } from "../tokens/brands/index.js";
 import { useCustomTheme } from "../useCustomTheme.js";
 import { useThemeMode } from "./useThemeMode.js";
 import { focusGlowShadow, focusVisibleRing } from "../chakra/focusRing.styles.js";
@@ -18,8 +19,8 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
-// NOTE: resolved from each brand's OWN palette so the dot matches that brand, regardless of the active one.
-const brandSwatchColor = (brand) => brandThemes[brand].light.colors.primary[500];
+// NOTE: reads the brand's own palette, not its Chakra theme, so the picker builds no themes.
+const brandSwatchColor = (brand) => lightPalettes[brand].primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = useCustomTheme();
     return (_jsx(Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: colors.boxborder[200], flexShrink: 0 }));

package/dist/esm/Theme/tokens/brands/emerald/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/index.js

@@ -26,6 +26,7 @@ import { buildFocusRing, withFocusRing } from "../builders/focusRing.js";
 import { withSurfaceRungs } from "../builders/surfaceRungs.js";
 import { buildSurfaceRaised, withSurfaceRaised } from "../builders/surfaceRaised.js";
 import { buildStar } from "../builders/star.js";
+import { lazyPalette } from "../builders/lazy.js";
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 export const finalizeLightPalette = (source) => ({
     ...source,
@@ -43,8 +44,8 @@ export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefron
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => withFocusRing(withSurfaceRungs(withSurfaceRaised(withTableHoverRung(withPlaceholderRung(withOutlineRung(palette))))));
-const lightBrand = (source) => resolveRungs(finalizeLightPalette(source));
-/** Light palette per brand. `lavender` is the base the other six extend. */
+const lightBrand = (source) => lazyPalette(source, () => resolveRungs(finalizeLightPalette(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 export const lightPalettes = {
     lavender: lightBrand(lavender),
     meadow: lightBrand(meadow),
@@ -56,18 +57,18 @@ export const lightPalettes = {
     storefront: lightBrand(storefront),
     zinc: lightBrand(zinc),
 };
-/** Dark palette per brand, derived from the matching light palette. */
-const darkBrand = (dark) => resolveRungs(dark);
+/** Dark palette per brand, derived from the matching light palette on first read. */
+const darkBrand = (source, dark) => lazyPalette(source, () => resolveRungs(dark));
 export const darkPalettes = {
-    lavender: darkBrand(lavenderDark),
-    meadow: darkBrand(meadowDark),
-    radiant: darkBrand(radiantDark),
-    skyline: darkBrand(skylineDark),
-    slate: darkBrand(slateDark),
-    emerald: darkBrand(emeraldDark),
-    rosewood: darkBrand(rosewoodDark),
-    storefront: darkBrand(storefrontDark),
-    zinc: darkBrand(zincDark),
+    lavender: darkBrand(lavender, lavenderDark),
+    meadow: darkBrand(meadow, meadowDark),
+    radiant: darkBrand(radiant, radiantDark),
+    skyline: darkBrand(skyline, skylineDark),
+    slate: darkBrand(slate, slateDark),
+    emerald: darkBrand(emerald, emeraldDark),
+    rosewood: darkBrand(rosewood, rosewoodDark),
+    storefront: darkBrand(storefront, storefrontDark),
+    zinc: darkBrand(zinc, zincDark),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/esm/Theme/tokens/brands/lavender/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/meadow/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/radiant/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/rosewood/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/skyline/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/slate/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;

package/dist/esm/Theme/tokens/brands/storefront/palette.dark.js

@@ -1,4 +1,5 @@
 import { buildDarkPalette } from "../../builders/buildDarkPalette.js";
+import { lazyPalette } from "../../builders/lazy.js";
 import light from "./palette.light.js";
-const palette = buildDarkPalette(light);
+const palette = lazyPalette(light, () => buildDarkPalette(light));
 export default palette;