pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

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

@@ -181,6 +181,10 @@ export declare const componentStyles: {
                 borderStyle: string;
                 borderColor: string;
             };
+            divider: {
+                opacity?: number | undefined;
+                borderColor: string;
+            };
             item: {
                 color: string;
                 minH: string;

package/dist/Theme/chakra/componentStyles.js

@@ -77,7 +77,7 @@ const Badge = {
         size: "sm",
     },
 };
-// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500 — same AA gap as our ErrorComponent.
+// NOTE: fixes Chakra's FormErrorMessage/Icon hardcoding red.500, which misses AA on the canvas.
 const FormError = {
     baseStyle: ({ theme }) => {
         const palette = (0, paletteFromTheme_1.paletteOf)(theme);

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

@@ -1,5 +1,6 @@
 import type { PaletteProps, ResolvedColorMode } from "../tokens/types";
 import { type ReducedMotionScope } from "./motion";
+/** Colour mode and reduced-motion scope for a built brand theme. */
 export interface CreateBrandThemeOptions {
     /** Which palette this theme represents. Defaults to `light`. */
     colorMode?: ResolvedColorMode;

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

@@ -10,7 +10,7 @@ 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. */
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
 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) => {

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

@@ -10,9 +10,9 @@ 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}`;
+/** For controls whose shell clips overflow: ring on the edge, halo inside, so an opaque child leaves the ring. */
+const insetFocusRingShadow = (colors) => `inset 0 0 0 ${exports.FOCUS_RING_WIDTH - exports.FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
+    `inset 0 0 0 ${exports.FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`;
 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";

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

@@ -3,4 +3,5 @@ import type { ColorScale, PaletteProps } from "../tokens/types";
 export declare const paletteOf: (theme: {
     colors?: unknown;
 }) => PaletteProps;
-export declare const scaleFor: (palette: PaletteProps, colorScheme: string) => ColorScale;
+export declare const warnUnknownColorScheme: (colorScheme: string) => void;
+export declare const scaleFor: (palette: PaletteProps, colorScheme: string, fallback?: ColorScale) => ColorScale;

package/dist/Theme/chakra/paletteFromTheme.js

@@ -1,11 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.scaleFor = exports.paletteOf = void 0;
+exports.scaleFor = exports.warnUnknownColorScheme = exports.paletteOf = void 0;
 const assertPalette_1 = require("../assertPalette");
+const paletteScale_1 = require("../tokens/builders/paletteScale");
 /** Chakra hands style functions an untyped theme; this is the boundary that makes it typed. */
 const paletteOf = (theme) => (0, assertPalette_1.assertPixelizePalette)(theme);
 exports.paletteOf = paletteOf;
-const asScale = (value) => typeof value === "object" && value !== null ? value : undefined;
-// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns resolve to gray.
-const scaleFor = (palette, colorScheme) => { var _a; return (_a = asScale(palette[colorScheme])) !== null && _a !== void 0 ? _a : palette.gray; };
+const warned = new Set();
+const warnUnknownColorScheme = (colorScheme) => {
+    if (process.env.NODE_ENV === "production" || warned.has(colorScheme))
+        return;
+    warned.add(colorScheme);
+    console.warn(`[pixelize-design-library] colorScheme "${colorScheme}" is not a themed colour scale; using the fallback scale.`);
+};
+exports.warnUnknownColorScheme = warnUnknownColorScheme;
+// NOTE: colorScheme is consumer-supplied and can name a built-in we never themed — unknowns use the fallback.
+const scaleFor = (palette, colorScheme, fallback = palette.gray) => {
+    const scale = (0, paletteScale_1.scaleNamed)(palette, colorScheme);
+    if (scale)
+        return scale;
+    (0, exports.warnUnknownColorScheme)(colorScheme);
+    return fallback;
+};
 exports.scaleFor = scaleFor;

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

@@ -9,6 +9,7 @@ export type ThemeModeContextValue = {
     brand: ThemeName;
     setBrand: (brand: ThemeName) => void;
 };
+/** Brand and mode state, persisted to localStorage unless `disablePersistence` is set. */
 export type PixelizeThemeProviderProps = {
     children: React.ReactNode;
     brand?: ThemeName;

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

@@ -1,3 +1,4 @@
+/** Control for switching light, dark or system mode, and optionally the brand. */
 export type ThemeSwitcherProps = {
     variant?: "icon" | "segmented" | "menu";
     showBrandPicker?: boolean;

package/dist/Theme/provider/ThemeSwitcher.js

@@ -81,7 +81,7 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
                 const isSelected = mode === value;
                 return ((0, jsx_runtime_1.jsx)(react_2.Button, { ref: (node) => {
                         optionRefs.current[index] = node;
-                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
+                    }, role: "radio", "aria-checked": isSelected, "aria-label": optionLabel, tabIndex: isSelected ? 0 : -1, onClick: () => setMode(value), onKeyDown: (event) => handleKeyDown(event, index), size: SIZES[size].control, variant: "ghost", borderRadius: "full", bg: isSelected ? activeBg : "transparent", color: isSelected ? activeColor : mutedColor, boxShadow: isSelected ? "sm" : "none", _hover: { color: activeColor }, _focusVisible: { outline: "2px solid transparent", outlineOffset: "2px" }, children: (0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }) }, value));
             }), showBrandPicker && (0, jsx_runtime_1.jsx)(BrandMenu, { size: size })] }));
 };
 const MenuVariant = ({ size, label, showBrandPicker, }) => {

package/dist/Theme/testing/testPalette.d.ts

@@ -4,6 +4,7 @@ export type DeepPartial<T> = T extends string ? T : {
     [K in keyof T]?: DeepPartial<T[K]>;
 };
 export type PaletteOverrides = DeepPartial<PaletteProps>;
+/** Brand, mode and group overrides for a test palette. */
 export type TestPaletteOptions = {
     brand?: ThemeName;
     mode?: ResolvedColorMode;

package/dist/Theme/tokens/builders/buildDarkPalette.d.ts

@@ -8,6 +8,7 @@ export declare const accentLightnessDelta: (accent500: string, white: string) =>
 export declare const liftScale: (scale: ColorScale, delta: number) => ColorScale;
 /** `lifted`: the card sits a CARD_LIFT step above the canvas. `flat`: the card is the canvas. */
 export type DarkPlanes = "lifted" | "flat";
+/** Card plane choice; defaults to `lifted`. */
 export interface DarkPaletteOptions {
     planes?: DarkPlanes;
 }

package/dist/Theme/tokens/builders/filledSurface.js

@@ -41,8 +41,9 @@ const solidFillRung = (scale, white, canvas) => {
 };
 exports.solidFillRung = solidFillRung;
 const steppedRung = (base, canvas, step) => {
-    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -100 : 100;
-    return Math.min(900, Math.max(50, base + dir * step));
+    const dir = (0, accentText_1.isDarkCanvas)(canvas) ? -1 : 1;
+    const index = RUNGS.indexOf(base) + dir * step;
+    return RUNGS[Math.min(RUNGS.length - 1, Math.max(0, index))];
 };
 const steppedTowardBase = (from, base) => RUNGS[RUNGS.indexOf(from) + (from > base ? -1 : 1)];
 /**

package/dist/Theme/tokens/builders/focusRing.js

@@ -4,6 +4,7 @@ exports.withFocusRing = exports.buildFocusRing = exports.focusRingBackdrops = vo
 exports.settleBetween = settleBetween;
 const color_1 = require("./color");
 const outlineRung_1 = require("./outlineRung");
+const planeStep_1 = require("./planeStep");
 /** Same lightness granularity `buildDarkPalette` walks its accents at. */
 const LIGHTNESS_STEP = 0.5;
 // NOTE: not settleAcross — a ring squeezed between a light canvas and a dark fill needs the closest color that clears both, not a per-surface lift.
@@ -25,10 +26,12 @@ function settleBetween(hex, backdrops, target = outlineRung_1.AA_NON_TEXT) {
     const worst = (candidate) => Math.min(...backdrops.map((backdrop) => (0, color_1.contrastRatio)(candidate, backdrop)));
     return worst(ends[0]) >= worst(ends[1]) ? ends[0] : ends[1];
 }
-// NOTE: only canvas + card surface — including the fill or every named surface leaves no solvable hue.
+// NOTE: canvas, card and the table header band — including the fill or every named surface leaves no solvable hue.
 const focusRingBackdrops = (source) => [
     source.backgroundColor.main,
     source.background[50],
+    source.backgroundColor.tableHeader,
+    (0, planeStep_1.bandOn)(source.backgroundColor.tableHeader, source.background[50]),
 ];
 exports.focusRingBackdrops = focusRingBackdrops;
 // NOTE: replaces Chakra's stock ring (a fixed blue that measured under 2:1 on every brand).

package/dist/Theme/tokens/builders/paletteScale.d.ts

@@ -0,0 +1,2 @@
+import type { ColorScale, PaletteProps } from "../types";
+export declare const scaleNamed: (colors: PaletteProps, name: string) => ColorScale | undefined;

package/dist/Theme/tokens/builders/paletteScale.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaleNamed = void 0;
+const isColorScale = (value) => typeof value === "object" && value !== null && "500" in value;
+const scaleNamed = (colors, name) => {
+    const entries = colors;
+    const value = entries[name];
+    return isColorScale(value) ? value : undefined;
+};
+exports.scaleNamed = scaleNamed;

package/dist/Theme/tokens/types.d.ts

@@ -74,6 +74,7 @@ export type BoxShadowTokens = {
     error: string;
     default: string;
 };
+/** Full per-brand colour palette, one per brand per colour mode. */
 export type PaletteProps = {
     gradient: {
         from: string;

package/dist/Utils/accountHandoff.d.ts

@@ -1,4 +1,5 @@
 export declare function isAllowedReturnUrl(url: string): boolean;
+/** Fallback origin used when the return URL param is missing or disallowed. */
 export type ResolveReturnUrlOptions = {
     /** App-specific fallback (e.g. its own origin) used when the param is missing/disallowed. */
     defaultReturnUrl?: string;
@@ -17,12 +18,14 @@ export type AccountHandoffConfig = {
     /** Where Account returns the user to. Defaults to this app's own origin. */
     buildReturnUrl?: (orgId?: number | string | null) => string;
 };
+/** Query values carried to Account: source app, return URL, org and token. */
 export type AccountHandoffLinkOptions = {
     sourceApp?: string;
     returnUrl?: string;
     orgId?: number | string | null;
     token?: string | null;
 };
+/** Link options plus the user to open on the Account users page. */
 export type AccountHandoffUsersOptions = AccountHandoffLinkOptions & {
     userId?: number | string | null;
 };

package/dist/Utils/price.d.ts

@@ -1,3 +1,4 @@
+/** Currency and locale override the INR and en-IN defaults. */
 export type PriceFormatOptions = {
     currency?: string;
     locale?: string;

package/dist/Utils/tabular.d.ts

@@ -0,0 +1,30 @@
+/** One spreadsheet cell; `null` and `undefined` write an empty cell. */
+export type TabularCell = string | number | boolean | null | undefined;
+interface TabularColumnBase<Row, K extends keyof Row> {
+    /** Row field the cell reads, the same `key` a table column uses. */
+    readonly key: K;
+    /** Text of the header line. */
+    readonly header: string;
+    /** Turns the field into a cell; required when the field is not a scalar. */
+    readonly format?: (value: Row[K], row: Row) => TabularCell;
+    /** Default true: formula-like text gets a leading `'` so it is shown, not run. */
+    readonly escapeFormulas?: boolean;
+}
+/** One exported column; `format` is required when the field is not a scalar. */
+export type TabularColumn<Row> = {
+    [K in keyof Row & string]: Row[K] extends TabularCell ? TabularColumnBase<Row, K> : TabularColumnBase<Row, K> & {
+        readonly format: (value: Row[K], row: Row) => TabularCell;
+    };
+}[keyof Row & string];
+/** Options for `toCsv`. */
+export interface ToCsvOptions {
+    /** Prepends a UTF-8 byte-order mark so Excel reads non-ASCII. Default false. */
+    readonly bom?: boolean;
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export declare function toCsv<Row extends object>(rows: readonly Row[], columns: readonly TabularColumn<Row>[], { bom }?: ToCsvOptions): string;
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export declare function safeFileName(fileName: string): string;
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+export {};

package/dist/Utils/tabular.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCsv = toCsv;
+exports.safeFileName = safeFileName;
+exports.downloadBlob = downloadBlob;
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -7,6 +7,7 @@ import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+const HEADER_ACTION_RIGHT = "3.25rem";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
@@ -19,14 +20,16 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
-                                        ...reducedMotionSx(),
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                    var _a, _b, _c, _d, _e;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [_jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...reducedMotionSx(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }), item.headerAction && (_jsx(Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -1,6 +1,6 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-import { FOCUS_HALO_WIDTH, FOCUS_RING_WIDTH } from "../../Theme/chakra/focusRing.styles.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 // NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
@@ -21,6 +21,5 @@ export const getAccordionHoverColors = (colors, isDark) => {
 export const accordionFocusRing = (colors) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    boxShadow: `inset 0 0 0 ${FOCUS_RING_WIDTH - FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
-        `inset 0 0 0 ${FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+    boxShadow: insetFocusRingShadow(colors),
 });

package/dist/esm/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useId, useMemo, useRef, useState } from "react";
 import { useTheme } from "@chakra-ui/react";
 import ToolTip from "../../ToolTip/ToolTip.js";
-import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
+import { chartMode, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
@@ -92,6 +92,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: chartMode(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -5,6 +5,7 @@ import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartT
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
 import LazyReactApexChart from "../LazyReactApexChart.js";
 import ApexChartFallback from "../ApexChartFallback.js";
+import { pieImageTexture } from "./pieImageTexture.js";
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -14,7 +15,7 @@ const getValidLegendPosition = (position) => {
     return "bottom";
 };
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
+const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", images, }) => {
     var _a;
     const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
@@ -31,6 +32,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -87,10 +89,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => pieImageTexture(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -180,6 +179,8 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
     return (_jsx("div", { children: _jsx(Suspense, { fallback: _jsx(ApexChartFallback, { height: height, width: width }), children: _jsx(LazyReactApexChart, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };

package/dist/esm/Components/Apexcharts/ApexPieChart/pieImageTexture.js

@@ -0,0 +1,10 @@
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/dist/esm/Components/AppSwitcher/AppSwitcher.js

@@ -12,6 +12,9 @@ import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_BORDER_COLOR_TRANSITION = transitionFor(["background", "border-color"]);
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const COLUMNS = 2;
 const HEADING = "Your apps";
 const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
@@ -182,7 +185,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = liftToContrast(theme.colors.textMuted, currentBg, AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? formatShortcut(shortcut) : null;
-    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsx(Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -191,7 +194,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: _jsx(Grip, { size: s.icon + 1 }) }) }), _jsx(PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: _jsxs(PopoverBody, { p: 0, children: [_jsxs(Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [_jsx(Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && _jsx(Kbd, { size: "xs", children: hint })] }), showSearch && (_jsx(Box, { px: 3, pb: 2, children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.textMuted }) }), _jsx(Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);
@@ -229,7 +232,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     borderEndStartRadius: "lg",
                                                     bg: currentBar,
                                                 }
-                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                : undefined, transition: BACKGROUND_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [_jsx(AppMark, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsxs(Flex, { align: "center", gap: 1.5, children: [_jsx(Text, { fontSize: s.name, fontWeight: 600, color: app.locked
                                                                         ? theme.colors.textMuted
                                                                         : isCurrent
                                                                             ? currentName

package/dist/esm/Components/AppSwitcher/AppSwitcherProps.js

@@ -50,30 +50,37 @@ export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     return parts.map((p, i) => { var _a; return (i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase())); });
 };
 export const formatShortcut = (shortcut, isApple = isAppleNow()) => shortcutKeys(shortcut, isApple).join(isApple ? "" : "+");
-/**
- * Derives every app's origin from the host the consumer is already served on, so one deployment
- * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
- */
-export const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
-    let base;
+const parseAbsolute = (option, raw) => {
     try {
-        base = new URL(baseUrl.trim());
+        return new URL(raw.trim());
     }
     catch {
-        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
     }
-    const labels = base.hostname.split(".");
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+export const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
     const at = labels.indexOf(baseSubdomain);
     return apps.map(({ subdomain, url, ...app }) => {
         if (url)
             return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
         // Without the label there is nothing to swap, and every app would silently share one origin.
         if (at === -1) {
             throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
-                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `"${source.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
                 `Give that app an explicit url, or pass a baseUrl that contains the label.`);
         }
-        const next = new URL(base.toString());
+        const next = new URL(source.toString());
         next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
         return { ...app, url: next.origin };
     });

package/dist/esm/Components/AppSwitcher/pixelizeSuite.js

@@ -0,0 +1,67 @@
+import { Building2, Headphones, LayoutGrid, Megaphone, Receipt, Users } from "lucide-react";
+import { buildSuiteApps } from "./AppSwitcherProps.js";
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export const PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return buildSuiteApps(sources, urlOptions);
+};