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

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

@@ -15,8 +15,9 @@ export interface WorkspaceWindowProps {
     /** Window body. */
     children: ReactNode;
     onMinimize?: () => void;
-    /** Kept for back-compat only — no maximize/restore control is rendered; this is never called. */
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMedium?: () => void;
+    /** @deprecated Never called; no maximize/restore control is rendered. */
     onMaximize?: () => void;
     onClose?: () => void;
     /** Optional "pop out to full page" affordance; hidden when omitted. */

package/dist/Hooks/sharedResizeObserver.d.ts

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useIsTruncated = useIsTruncated;
 const react_1 = require("react");
+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);
@@ -17,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/Theme/chakra/Menu.styles.d.ts

@@ -23,7 +23,7 @@ export declare const Menu: {
             py: string;
             mx: string;
             fontSize: string;
-            borderRadius: string;
+            borderRadius: "md";
             bg: string;
             _focus: {
                 [$itemBg.variable]: string;

package/dist/Theme/chakra/common.web.d.ts

@@ -155,6 +155,7 @@ declare const common: {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

package/dist/Theme/chakra/componentStyles.d.ts

@@ -181,7 +181,7 @@ export declare const componentStyles: {
                 py: string;
                 mx: string;
                 fontSize: string;
-                borderRadius: string;
+                borderRadius: "md";
                 bg: string;
                 _focus: {
                     [x: string]: string;

package/dist/Theme/chakra/createBrandTheme.d.ts

@@ -1,7 +1,10 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
+import { type ReducedMotionScope } from "./motion";
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;
+    /** `"global"` adds one document-wide reduced-motion rule; the default leaves it to each component. */
+    reducedMotion?: ReducedMotionScope;
 }
 export declare const createBrandTheme: (palette: PaletteProps, options?: CreateBrandThemeOptions) => Record<string, any>;
 export default createBrandTheme;

package/dist/Theme/chakra/createBrandTheme.js

@@ -11,18 +11,44 @@ const componentStyles_1 = require("./componentStyles");
 const filledSurface_1 = require("../tokens/builders/filledSurface");
 const scrollbar_1 = require("../tokens/builders/scrollbar");
 const focusRing_styles_1 = require("./focusRing.styles");
+const shadows_1 = require("../tokens/primitives/shadows");
+const motion_1 = require("./motion");
+const typography_1 = require("../tokens/primitives/typography");
+const memoByReads_1 = require("../tokens/builders/memoByReads");
+const memoisedStyle = (value) => typeof value === "function" ? (0, memoByReads_1.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_1.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.
 const createBrandTheme = (palette, options = {}) => {
     var _a;
     const colorMode = (_a = options.colorMode) !== null && _a !== void 0 ? _a : "light";
+    const motionRule = options.reducedMotion === "global" ? motion_1.reducedMotionGlobalStyles : {};
     const brand = {
         colors: palette,
         ...fonts_web_1.default,
         ...common_web_1.default,
         // NOTE: binds the palette-derived ring to shadows.outline — Chakra's stock one failed 1.4.11 on every brand.
-        shadows: { ...common_web_1.default.shadows, outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
+        shadows: { ...(0, shadows_1.shadowsFor)(colorMode), outline: (0, focusRing_styles_1.focusRingShadow)(palette) },
     };
-    return (0, react_1.extendTheme)({
+    return withMemoisedStyles((0, react_1.extendTheme)({
         ...brand,
         config: {
             ...common_web_1.default.config,
@@ -70,12 +96,16 @@ const createBrandTheme = (palette, options = {}) => {
                             WebkitTextFillColor: palette.text[900],
                             caretColor: palette.text[900],
                         },
+                        ...motionRule,
                     },
                 },
             }
-            : {}),
+            : options.reducedMotion === "global"
+                ? { styles: { global: motionRule } }
+                : {}),
+        textStyles: typography_1.TEXT_STYLES,
         components: componentStyles_1.componentStyles,
-    });
+    }));
 };
 exports.createBrandTheme = createBrandTheme;
 exports.default = exports.createBrandTheme;

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

@@ -10,6 +10,8 @@ type WithBrandGlow = {
     primary: BrandScale;
 };
 export declare const focusRingShadow: (colors: WithFocusRing) => string;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+export declare const insetFocusRingShadow: (colors: WithFocusRing) => string;
 export declare const FOCUS_VISIBLE_OVER_STATE = "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible";
 export declare const focusVisibleRing: (colors: WithFocusRing) => {
     outline: string;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.focusVisibleStyles = exports.fieldFocusVisible = exports.focusGlowShadow = exports.FOCUS_GLOW_ALPHA = exports.FOCUS_GLOW_SPREAD = exports.FOCUS_GLOW_BLUR = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
+exports.focusVisibleStyles = exports.fieldFocusVisible = exports.focusGlowShadow = exports.FOCUS_GLOW_ALPHA = exports.FOCUS_GLOW_SPREAD = exports.FOCUS_GLOW_BLUR = exports.focusVisibleRing = exports.FOCUS_VISIBLE_OVER_STATE = exports.insetFocusRingShadow = exports.focusRingShadow = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = void 0;
 // Web binding for the focusRing token pair — colors come from tokens/builders/focusRing.ts; CSS shape is web-only.
 /** Inner band, in the surface tone: separates the ring from the control's own fill. */
 exports.FOCUS_HALO_WIDTH = 2;
@@ -10,6 +10,10 @@ exports.FOCUS_RING_WIDTH = 4;
 const focusRingShadow = (colors) => `0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
     `0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
 exports.focusRingShadow = focusRingShadow;
+/** For controls whose rounded shell clips overflow: the same halo and ring, drawn inside the border box. */
+const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.halo}, ` +
+    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.ring}`;
+exports.insetFocusRingShadow = insetFocusRingShadow;
 // NOTE: stacked pseudo-classes raise specificity above Chakra's _hover, so a hovered+focused button keeps its ring.
 exports.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/Theme/chakra/fonts.web.d.ts

@@ -7,7 +7,9 @@ declare const fonts: {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;

package/dist/Theme/chakra/motion.d.ts

@@ -3,3 +3,17 @@ export declare const REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: red
 export declare const usePrefersReducedMotion: () => boolean;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 export declare const reducedMotionSx: (overrides?: SystemStyleObject) => SystemStyleObject;
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+export declare const MOTION_KEEP_CLASS = "pz-motion-keep";
+export declare const REDUCED_MOTION_SELECTOR: string;
+export declare const reducedMotionGlobalStyles: {
+    "@media (prefers-reduced-motion: reduce)": {
+        [REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: string;
+            animationDuration: string;
+            animationIterationCount: string;
+            scrollBehavior: string;
+        };
+    };
+};
+export type ReducedMotionScope = "components" | "global";

package/dist/Theme/chakra/motion.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
+exports.reducedMotionGlobalStyles = exports.REDUCED_MOTION_SELECTOR = exports.MOTION_KEEP_CLASS = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
 const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
@@ -11,3 +11,28 @@ const reducedMotionSx = (overrides = {}) => ({
     [exports.REDUCED_MOTION_QUERY]: { transition: "none", animation: "none", ...overrides },
 });
 exports.reducedMotionSx = reducedMotionSx;
+/** Add to an element whose loop is essential feedback; it and its subtree keep moving. */
+exports.MOTION_KEEP_CLASS = "pz-motion-keep";
+const KEPT = [
+    ".chakra-spinner",
+    ".chakra-progress",
+    ".chakra-progress *",
+    `.${exports.MOTION_KEEP_CLASS}`,
+    `.${exports.MOTION_KEEP_CLASS} *`,
+];
+const notKept = KEPT.map((selector) => `:not(${selector})`).join("");
+exports.REDUCED_MOTION_SELECTOR = [
+    `*${notKept}`,
+    `*${notKept}::before`,
+    `*${notKept}::after`,
+].join(", ");
+exports.reducedMotionGlobalStyles = {
+    [exports.REDUCED_MOTION_QUERY]: {
+        [exports.REDUCED_MOTION_SELECTOR]: {
+            transitionDuration: "0.01ms !important",
+            animationDuration: "0.01ms !important",
+            animationIterationCount: "1 !important",
+            scrollBehavior: "auto !important",
+        },
+    },
+};

package/dist/Theme/index.d.ts

@@ -1,5 +1,6 @@
 import createBrandTheme from "./chakra/createBrandTheme";
 import type { ResolvedColorMode, ThemeName } from "./tokens/types";
+type BrandTheme = ReturnType<typeof createBrandTheme>;
 declare const lavender: Record<string, any>;
 declare const meadow: Record<string, any>;
 declare const radiant: Record<string, any>;
@@ -21,6 +22,6 @@ export declare const ThemesList: {
     storefront: Record<string, any>;
     zinc: Record<string, any>;
 };
-export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, ReturnType<typeof createBrandTheme>>>;
+export type BrandThemes = Record<ThemeName, Record<ResolvedColorMode, BrandTheme>>;
 /** Light + dark theme per brand. `PixelizeThemeProvider` swaps between these. */
 export declare const brandThemes: BrandThemes;

package/dist/Theme/index.js

@@ -6,24 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.brandThemes = exports.ThemesList = exports.zinc = exports.storefront = exports.rosewood = exports.emerald = exports.slate = exports.lavender = exports.radiant = exports.meadow = exports.skyline = void 0;
 const createBrandTheme_1 = __importDefault(require("./chakra/createBrandTheme"));
 const brands_1 = require("./tokens/brands");
-// Chakra themes per brand, built from the pure palettes in tokens/brands via createBrandTheme.
+const lazy_1 = require("./tokens/builders/lazy");
+// NOTE: lavender is built at import as the shape template — every light theme shares its keys.
 const lavender = (0, createBrandTheme_1.default)(brands_1.lightPalettes.lavender);
 exports.lavender = lavender;
-const meadow = (0, createBrandTheme_1.default)(brands_1.lightPalettes.meadow);
+const lightThemeKeys = Object.keys(lavender);
+const lazyLightTheme = (brand) => (0, lazy_1.lazyObject)(lightThemeKeys, () => (0, createBrandTheme_1.default)(brands_1.lightPalettes[brand]));
+const meadow = lazyLightTheme("meadow");
 exports.meadow = meadow;
-const radiant = (0, createBrandTheme_1.default)(brands_1.lightPalettes.radiant);
+const radiant = lazyLightTheme("radiant");
 exports.radiant = radiant;
-const skyline = (0, createBrandTheme_1.default)(brands_1.lightPalettes.skyline);
+const skyline = lazyLightTheme("skyline");
 exports.skyline = skyline;
-const slate = (0, createBrandTheme_1.default)(brands_1.lightPalettes.slate);
+const slate = lazyLightTheme("slate");
 exports.slate = slate;
-const emerald = (0, createBrandTheme_1.default)(brands_1.lightPalettes.emerald);
+const emerald = lazyLightTheme("emerald");
 exports.emerald = emerald;
-const rosewood = (0, createBrandTheme_1.default)(brands_1.lightPalettes.rosewood);
+const rosewood = lazyLightTheme("rosewood");
 exports.rosewood = rosewood;
-const storefront = (0, createBrandTheme_1.default)(brands_1.lightPalettes.storefront);
+const storefront = lazyLightTheme("storefront");
 exports.storefront = storefront;
-const zinc = (0, createBrandTheme_1.default)(brands_1.lightPalettes.zinc);
+const zinc = lazyLightTheme("zinc");
 exports.zinc = zinc;
 // NOTE: consumers iterate this to render theme pickers — key order is load-bearing. Stays light-only.
 exports.ThemesList = {

package/dist/Theme/provider/PixelizeThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { ColorMode, ResolvedColorMode, ThemeName } from "../tokens/types";
+import { type ReducedMotionScope } from "../chakra/motion";
 export type ThemeModeContextValue = {
     mode: ColorMode;
     resolvedMode: ResolvedColorMode;
@@ -17,6 +18,8 @@ export type PixelizeThemeProviderProps = {
     storageKey?: string;
     disablePersistence?: boolean;
     themeOverrides?: Record<string, unknown>;
+    /** `"global"` opts the whole document into one reduced-motion rule; default is per component. */
+    reducedMotion?: ReducedMotionScope;
 };
 export declare const ThemeModeContext: React.Context<ThemeModeContextValue | undefined>;
-export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PixelizeThemeProvider: ({ children, brand: brandProp, onBrandChange, defaultMode, onModeChange, storageKey, disablePersistence, themeOverrides, reducedMotion, }: PixelizeThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -9,6 +9,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const index_1 = require("../index");
 const Toaster_1 = __importDefault(require("../../Components/Toaster/Toaster"));
+const motion_1 = require("../chakra/motion");
 const colorModeStorage_1 = require("./colorModeStorage");
 const DEFAULT_BRAND = "lavender";
 const DEFAULT_MODE = "system";
@@ -22,7 +23,7 @@ const forcedLightColorModeManager = {
 };
 exports.ThemeModeContext = (0, react_1.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().
-const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, reducedMotion = "components", }) => {
     const [mode, setModeState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).mode)) !== null && _a !== void 0 ? _a : defaultMode; });
     const [brand, setBrandState] = (0, react_1.useState)(() => { var _a; return (_a = (disablePersistence ? undefined : (0, colorModeStorage_1.readStoredTheme)(storageKey).brand)) !== null && _a !== void 0 ? _a : brandProp; });
     const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
@@ -64,14 +65,17 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
         (0, colorModeStorage_1.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 = (0, react_1.useDeferredValue)(resolvedMode);
+    const appliedBrand = (0, react_1.useDeferredValue)(brand);
     // NOTE: sets CSS color-scheme so native chrome (select popups, date pickers) matches the mode.
     (0, react_1.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".
     (0, react_1.useEffect)(() => {
-        document.documentElement.style.colorScheme = resolvedMode;
-    }, [resolvedMode]);
+        document.documentElement.style.colorScheme = appliedMode;
+    }, [appliedMode]);
     const onModeChangeRef = (0, react_1.useRef)(onModeChange);
     const onBrandChangeRef = (0, react_1.useRef)(onBrandChange);
     (0, react_1.useLayoutEffect)(() => {
@@ -93,14 +97,18 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
     // NOTE: keyed by value, not identity — themeOverrides is usually an inline literal.
     const overridesKey = themeOverrides ? JSON.stringify(themeOverrides) : "";
     const resolvedTheme = (0, react_1.useMemo)(() => {
-        const base = index_1.brandThemes[brand][resolvedMode];
-        return themeOverrides ? (0, react_2.extendTheme)(base, themeOverrides) : base;
+        const base = index_1.brandThemes[appliedBrand][appliedMode];
+        const extensions = [
+            ...(reducedMotion === "global" ? [{ styles: { global: motion_1.reducedMotionGlobalStyles } }] : []),
+            ...(themeOverrides ? [themeOverrides] : []),
+        ];
+        return extensions.length ? (0, react_2.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.
     (0, react_1.useLayoutEffect)(() => {
         const root = document.documentElement;
-        root.dataset.mode = resolvedMode;
+        root.dataset.mode = appliedMode;
         const { colors } = resolvedTheme;
         const { gray, semantic } = colors;
         const HUE_SCALES = [
@@ -124,7 +132,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
         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]);
@@ -140,7 +148,8 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
             for (const name of Object.keys(SEMANTIC_VARS))
                 clear(name);
         }
-    }, [resolvedMode, resolvedTheme]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
+    }, [appliedMode, resolvedTheme]);
+    const themedTree = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) })), [resolvedTheme, children]);
+    return (0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: themedTree });
 };
 exports.PixelizeThemeProvider = PixelizeThemeProvider;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const index_1 = require("../index");
+const brands_1 = require("../tokens/brands");
 const useCustomTheme_1 = require("../useCustomTheme");
 const useThemeMode_1 = require("./useThemeMode");
 const focusRing_styles_1 = require("../chakra/focusRing.styles");
@@ -21,8 +22,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) => index_1.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) => brands_1.lightPalettes[brand].primary[500];
 const BrandSwatch = ({ brand }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.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/Theme/themeProps.d.ts

@@ -16,7 +16,9 @@ export type CustomThemeProps = {
         mono: string;
     };
     fontSizes: {
+        "xs-minus": string;
         xs: string;
+        "xs-plus": string;
         sm: string;
         md: string;
         lg: string;
@@ -107,6 +109,7 @@ export type CustomThemeProps = {
         overlay: number;
         modal: number;
         popover: number;
+        popoverNested: number;
         skipLink: number;
         toast: number;
         tooltip: number;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

package/dist/Theme/tokens/brands/index.d.ts

@@ -21,7 +21,7 @@ import type { BrandPaletteSource, PaletteProps, ResolvedColorMode, ThemeName } f
 export declare const finalizeLightPalette: (source: BrandPaletteSource) => PaletteProps;
 export { lavender, meadow, radiant, skyline, slate, emerald, rosewood, storefront, zinc };
 export { lavenderDark, meadowDark, radiantDark, skylineDark, slateDark, emeraldDark, rosewoodDark, storefrontDark, zincDark, };
-/** Light palette per brand. `lavender` is the base the other six extend. */
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 export declare const lightPalettes: Record<ThemeName, PaletteProps>;
 export declare const darkPalettes: Record<ThemeName, PaletteProps>;
 export declare const palettes: Record<ThemeName, Record<ResolvedColorMode, PaletteProps>>;

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

@@ -50,6 +50,7 @@ const focusRing_1 = require("../builders/focusRing");
 const surfaceRungs_1 = require("../builders/surfaceRungs");
 const surfaceRaised_1 = require("../builders/surfaceRaised");
 const star_1 = require("../builders/star");
+const lazy_1 = require("../builders/lazy");
 /** Derived, never hand-written: a copied hex goes stale the moment a canvas moves. */
 const finalizeLightPalette = (source) => ({
     ...source,
@@ -66,8 +67,8 @@ const finalizeLightPalette = (source) => ({
 exports.finalizeLightPalette = finalizeLightPalette;
 // NOTE: withFocusRing is outermost — it must see primary and surfaces together, after every earlier step.
 const resolveRungs = (palette) => (0, focusRing_1.withFocusRing)((0, surfaceRungs_1.withSurfaceRungs)((0, surfaceRaised_1.withSurfaceRaised)((0, resolvedRungs_1.withTableHoverRung)((0, resolvedRungs_1.withPlaceholderRung)((0, outlineRung_1.withOutlineRung)(palette))))));
-const lightBrand = (source) => resolveRungs((0, exports.finalizeLightPalette)(source));
-/** Light palette per brand. `lavender` is the base the other six extend. */
+const lightBrand = (source) => (0, lazy_1.lazyPalette)(source, () => resolveRungs((0, exports.finalizeLightPalette)(source)));
+/** Light palette per brand, derived on first read. `lavender` is the base the other six extend. */
 exports.lightPalettes = {
     lavender: lightBrand(palette_light_1.default),
     meadow: lightBrand(palette_light_2.default),
@@ -79,18 +80,18 @@ exports.lightPalettes = {
     storefront: lightBrand(palette_light_8.default),
     zinc: lightBrand(palette_light_9.default),
 };
-/** 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) => (0, lazy_1.lazyPalette)(source, () => resolveRungs(dark));
 exports.darkPalettes = {
-    lavender: darkBrand(palette_dark_1.default),
-    meadow: darkBrand(palette_dark_2.default),
-    radiant: darkBrand(palette_dark_3.default),
-    skyline: darkBrand(palette_dark_4.default),
-    slate: darkBrand(palette_dark_5.default),
-    emerald: darkBrand(palette_dark_6.default),
-    rosewood: darkBrand(palette_dark_7.default),
-    storefront: darkBrand(palette_dark_8.default),
-    zinc: darkBrand(palette_dark_9.default),
+    lavender: darkBrand(palette_light_1.default, palette_dark_1.default),
+    meadow: darkBrand(palette_light_2.default, palette_dark_2.default),
+    radiant: darkBrand(palette_light_3.default, palette_dark_3.default),
+    skyline: darkBrand(palette_light_4.default, palette_dark_4.default),
+    slate: darkBrand(palette_light_5.default, palette_dark_5.default),
+    emerald: darkBrand(palette_light_6.default, palette_dark_6.default),
+    rosewood: darkBrand(palette_light_7.default, palette_dark_7.default),
+    storefront: darkBrand(palette_light_8.default, palette_dark_8.default),
+    zinc: darkBrand(palette_light_9.default, palette_dark_9.default),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;

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

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const buildDarkPalette_1 = require("../../builders/buildDarkPalette");
+const lazy_1 = require("../../builders/lazy");
 const palette_light_1 = __importDefault(require("./palette.light"));
-const palette = (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default);
+const palette = (0, lazy_1.lazyPalette)(palette_light_1.default, () => (0, buildDarkPalette_1.buildDarkPalette)(palette_light_1.default));
 exports.default = palette;