pixelize-design-library 2.4.2-beta.57 → 2.4.2-beta.59

package/dist/Components/WizardDialog/WizardDialog.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Wizard = exports.WizardDialog = exports.INITIAL_WIZARD_STATE = exports.firstInvalidStep = exports.wizardTransition = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const Modal_1 = __importStar(require("../Modal/Modal"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const StageProgress_1 = __importDefault(require("../StageProgress/StageProgress"));
+const DescriptionList_1 = __importDefault(require("../DescriptionList/DescriptionList"));
+const useWizardFlow_1 = require("./useWizardFlow");
+var wizardSteps_1 = require("./wizardSteps");
+Object.defineProperty(exports, "wizardTransition", { enumerable: true, get: function () { return wizardSteps_1.wizardTransition; } });
+Object.defineProperty(exports, "firstInvalidStep", { enumerable: true, get: function () { return wizardSteps_1.firstInvalidStep; } });
+Object.defineProperty(exports, "INITIAL_WIZARD_STATE", { enumerable: true, get: function () { return wizardSteps_1.INITIAL_WIZARD_STATE; } });
+const DEFAULT_LABELS = {
+    back: "Back",
+    next: "Continue",
+    finish: "Finish",
+    cancel: "Cancel",
+    stepOf: (current, total) => `Step ${current} of ${total}`,
+    fixErrors: "Fix the following to continue",
+    review: "Review",
+};
+const WizardBody = ({ flow, steps, labels, testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const headingRef = (0, react_1.useRef)(null);
+    const previousStep = (0, react_1.useRef)(flow.step.id);
+    const reviewed = steps.filter((candidate) => candidate.summary !== undefined);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (previousStep.current === flow.step.id)
+            return;
+        previousStep.current = flow.step.id;
+        (_a = headingRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [flow.step.id]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, "data-testid": testId, "data-step": flow.step.id, children: [(0, jsx_runtime_1.jsx)(StageProgress_1.default, { variant: "stepper", size: "sm", showCheck: true, stages: steps.map((candidate, index) => ({
+                    id: candidate.id,
+                    label: candidate.label,
+                    isDisabled: index > flow.furthest,
+                })), value: flow.step.id, onChange: (_id, _stage, index) => flow.goto(index) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", color: colors.textMuted, children: labels.stepOf(flow.index + 1, steps.length) }), (0, jsx_runtime_1.jsx)(react_2.Heading, { ref: headingRef, tabIndex: -1, as: "h3", fontSize: "md", fontWeight: 600, color: colors.header[900], _focus: { outline: "none" }, children: flow.step.label })] }), flow.errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", role: "alert", "data-testid": "wizard-errors", children: [(0, jsx_runtime_1.jsx)(react_2.AlertIcon, {}), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.AlertTitle, { fontSize: "sm", children: labels.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: flow.errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { children: flow.step.content }), flow.isLast && reviewed.length ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { "data-testid": "wizard-review", children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h4", fontSize: "sm", fontWeight: 600, mb: 2, color: colors.header[900], children: labels.review }), (0, jsx_runtime_1.jsx)(DescriptionList_1.default, { layout: "inline", columns: { base: 1 }, items: reviewed.map((candidate) => ({
+                            label: candidate.label,
+                            value: candidate.summary,
+                        })) })] })) : null] }));
+};
+const WizardFooter = ({ flow, labels, isFinishing, onCancel }) => ((0, jsx_runtime_1.jsxs)(react_2.Flex, { w: "100%", justify: "space-between", gap: 2, wrap: "wrap", children: [onCancel ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: onCancel, isDisabled: isFinishing, "data-testid": "wizard-cancel" })) : ((0, jsx_runtime_1.jsx)("span", {})), (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, children: [!flow.isFirst ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", label: labels.back, onClick: flow.back, isDisabled: isFinishing, "data-testid": "wizard-back" })) : null, flow.isLast ? ((0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", label: labels.finish, onClick: flow.finish, isLoading: isFinishing, loadingText: labels.finish, "data-testid": "wizard-finish" })) : ((0, jsx_runtime_1.jsx)(Button_1.default, { 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. */
+const WizardDialog = ({ isOpen, onClose, title, subtitle, steps, onFinish, isFinishing = false, stepId, onStepChange, size = "3xl", labels, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish, resetWhen: !isOpen });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    const guardedClose = () => {
+        if (!isFinishing)
+            onClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Modal_1.default, { isOpen: isOpen, onClose: guardedClose, size: size, isCentered: true, scrollBehavior: "inside", title: title, subtitle: subtitle, closeOnOverlayClick: false, closeOnEsc: !isFinishing, hideCloseButton: isFinishing, children: [(0, jsx_runtime_1.jsx)(Modal_1.ModalBody, { children: (0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard-dialog" }) }), (0, jsx_runtime_1.jsx)(Modal_1.ModalFooter, { children: (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: guardedClose }) })] }));
+};
+exports.WizardDialog = WizardDialog;
+/** The same wizard inline, for a full-page flow rather than a modal. */
+const Wizard = ({ steps, onFinish, isFinishing = false, stepId, onStepChange, labels, onCancel, "data-testid": testId, }) => {
+    const flow = (0, useWizardFlow_1.useWizardFlow)({ steps, stepId, onStepChange, onFinish });
+    const resolved = { ...DEFAULT_LABELS, ...labels };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsx)(WizardBody, { flow: flow, steps: steps, labels: resolved, testId: testId !== null && testId !== void 0 ? testId : "wizard" }), (0, jsx_runtime_1.jsx)(WizardFooter, { flow: flow, labels: resolved, isFinishing: isFinishing, onCancel: onCancel })] }));
+};
+exports.Wizard = Wizard;
+exports.default = exports.WizardDialog;

package/dist/Components/WizardDialog/WizardDialogProps.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+/** One step of a wizard: its stepper label, body, validation and review summary. */
+export type WizardStep = {
+    id: string;
+    /** Stepper label and the heading shown above the step content. */
+    label: string;
+    content: ReactNode;
+    /** Messages that block leaving this step; [] = valid. Must be pure (runs in the reducer). */
+    validate?: () => string[];
+    /** One line shown in the review on the last step; steps without it are not reviewed. */
+    summary?: ReactNode;
+};
+/** Visible strings; every key falls back to its English default. */
+export type WizardLabels = Partial<{
+    back: string;
+    next: string;
+    finish: string;
+    cancel: string;
+    stepOf: (current: number, total: number) => string;
+    fixErrors: string;
+    review: string;
+}>;
+/** Props for the modal wizard: Modal + stepper + per-step validation + review on the last step. */
+export interface WizardDialogProps {
+    isOpen: boolean;
+    /** Ignored while `isFinishing`. */
+    onClose: () => void;
+    title: string;
+    subtitle?: string;
+    steps: WizardStep[];
+    /** Called after every step re-validates; a failing step is jumped to with its errors. */
+    onFinish: () => void;
+    /** Shows the Finish spinner and disables close, Esc, Back and Cancel. */
+    isFinishing?: boolean;
+    /** Controlled step; omit for uncontrolled (resets to the first step on close). */
+    stepId?: string;
+    /** Fires whenever the visible step changes, controlled or not. */
+    onStepChange?: (stepId: string) => void;
+    /** Modal width; default "3xl". */
+    size?: "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    labels?: WizardLabels;
+    "data-testid"?: string;
+}
+/** Same flow inline (a page section, not a modal) — for full-page wizards. */
+export interface WizardProps extends Omit<WizardDialogProps, "isOpen" | "onClose" | "title" | "subtitle" | "size"> {
+    /** Renders a Cancel button in the footer when provided. */
+    onCancel?: () => void;
+}

package/dist/Components/WizardDialog/WizardDialogProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/WizardDialog/useWizardFlow.d.ts

@@ -0,0 +1,22 @@
+import type { WizardStep } from "./WizardDialogProps";
+type FlowOptions = {
+    steps: WizardStep[];
+    stepId?: string;
+    onStepChange?: (stepId: string) => void;
+    onFinish: () => void;
+    resetWhen?: boolean;
+};
+export declare function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }: FlowOptions): {
+    index: number;
+    furthest: number;
+    errors: string[];
+    step: WizardStep;
+    isFirst: boolean;
+    isLast: boolean;
+    next: () => void;
+    back: () => void;
+    goto: (target: number) => void;
+    finish: () => void;
+};
+export type WizardFlow = ReturnType<typeof useWizardFlow>;
+export {};

package/dist/Components/WizardDialog/useWizardFlow.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWizardFlow = useWizardFlow;
+const react_1 = require("react");
+const wizardSteps_1 = require("./wizardSteps");
+function useWizardFlow({ steps, stepId, onStepChange, onFinish, resetWhen }) {
+    const [state, setState] = (0, react_1.useState)(wizardSteps_1.INITIAL_WIZARD_STATE);
+    const validators = steps.map((step) => step.validate);
+    const controlledIndex = stepId === undefined ? -1 : steps.findIndex((s) => s.id === stepId);
+    const isControlled = stepId !== undefined;
+    const index = Math.min(isControlled ? Math.max(controlledIndex, 0) : state.index, Math.max(steps.length - 1, 0));
+    const furthest = Math.max(state.furthest, index);
+    (0, react_1.useEffect)(() => {
+        if (resetWhen)
+            setState(wizardSteps_1.INITIAL_WIZARD_STATE);
+    }, [resetWhen]);
+    const dispatch = (0, react_1.useCallback)((action) => {
+        const base = { ...state, index, furthest };
+        const next = (0, wizardSteps_1.wizardTransition)(base, action, validators);
+        setState(next);
+        if (next.index !== index)
+            onStepChange === null || onStepChange === void 0 ? void 0 : onStepChange(steps[next.index].id);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [state, index, furthest, steps, onStepChange]);
+    const finish = (0, react_1.useCallback)(() => {
+        const invalid = (0, wizardSteps_1.firstInvalidStep)(validators);
+        if (invalid) {
+            dispatch({ type: "fail", ...invalid });
+            return;
+        }
+        onFinish();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatch, steps, onFinish]);
+    return {
+        index,
+        furthest,
+        errors: state.errors,
+        step: steps[index],
+        isFirst: index === 0,
+        isLast: index === steps.length - 1,
+        next: () => dispatch({ type: "next" }),
+        back: () => dispatch({ type: "back" }),
+        goto: (target) => dispatch({ type: "goto", index: target }),
+        finish,
+    };
+}

package/dist/Components/WizardDialog/wizardSteps.d.ts

@@ -0,0 +1,31 @@
+export type StepValidator = () => string[];
+/** Reducer state: current step, the furthest validly reached step, and the blocking messages. */
+export type WizardState = {
+    index: number;
+    /** Furthest step the user has validly reached; stages beyond it stay locked. */
+    furthest: number;
+    errors: string[];
+};
+/** Actions `wizardTransition` understands. */
+export type WizardAction = {
+    type: "next";
+} | {
+    type: "back";
+} | {
+    type: "goto";
+    index: number;
+} | {
+    type: "fail";
+    index: number;
+    errors: string[];
+} | {
+    type: "reset";
+};
+export declare const INITIAL_WIZARD_STATE: WizardState;
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+export declare function wizardTransition(state: WizardState, action: WizardAction, validators: (StepValidator | undefined)[]): WizardState;
+/** First step whose validator reports errors, or null when every step is valid. */
+export declare function firstInvalidStep(validators: (StepValidator | undefined)[]): {
+    index: number;
+    errors: string[];
+} | null;

package/dist/Components/WizardDialog/wizardSteps.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.INITIAL_WIZARD_STATE = void 0;
+exports.wizardTransition = wizardTransition;
+exports.firstInvalidStep = firstInvalidStep;
+exports.INITIAL_WIZARD_STATE = { index: 0, furthest: 0, errors: [] };
+/** Pure step reducer: `next` validates the current step, `goto` only reaches steps up to `furthest`. */
+function wizardTransition(state, action, validators) {
+    var _a, _b;
+    const last = validators.length - 1;
+    switch (action.type) {
+        case "next": {
+            const errors = (_b = (_a = validators[state.index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+            if (errors.length)
+                return { ...state, errors };
+            const index = Math.min(state.index + 1, last);
+            return { index, furthest: Math.max(state.furthest, index), errors: [] };
+        }
+        case "back":
+            return { ...state, index: Math.max(state.index - 1, 0), errors: [] };
+        case "goto":
+            if (action.index < 0 || action.index > state.furthest)
+                return state;
+            return { ...state, index: action.index, errors: [] };
+        case "fail":
+            return { ...state, index: action.index, errors: action.errors };
+        case "reset":
+            return exports.INITIAL_WIZARD_STATE;
+    }
+}
+/** First step whose validator reports errors, or null when every step is valid. */
+function firstInvalidStep(validators) {
+    var _a, _b;
+    for (let index = 0; index < validators.length; index += 1) {
+        const errors = (_b = (_a = validators[index]) === null || _a === void 0 ? void 0 : _a.call(validators)) !== null && _b !== void 0 ? _b : [];
+        if (errors.length)
+            return { index, errors };
+    }
+    return null;
+}

package/dist/Hooks/useMatchMedia.d.ts

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

package/dist/Hooks/useMatchMedia.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMatchMedia = void 0;
+const react_1 = require("react");
+const entries = new Map();
+const supported = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+const subscriberFor = (query) => (notify) => {
+    if (!supported())
+        return () => undefined;
+    let entry = entries.get(query);
+    if (!entry) {
+        const list = window.matchMedia(query);
+        const created = { list, listeners: new Set(), onChange: () => created.listeners.forEach((fn) => fn()) };
+        list.addEventListener("change", created.onChange);
+        entries.set(query, created);
+        entry = created;
+    }
+    entry.listeners.add(notify);
+    return () => {
+        const current = entries.get(query);
+        if (!current)
+            return;
+        current.listeners.delete(notify);
+        if (current.listeners.size === 0) {
+            current.list.removeEventListener("change", current.onChange);
+            entries.delete(query);
+        }
+    };
+};
+/** `matches` for a media query, sharing one listener per query; `fallback` where matchMedia is missing (SSR, jsdom). */
+const useMatchMedia = (query, fallback = false) => {
+    const subscribe = (0, react_1.useMemo)(() => subscriberFor(query), [query]);
+    const read = () => { var _a, _b; return (_b = (_a = entries.get(query)) === null || _a === void 0 ? void 0 : _a.list.matches) !== null && _b !== void 0 ? _b : (supported() ? window.matchMedia(query).matches : fallback); };
+    return (0, react_1.useSyncExternalStore)(subscribe, read, () => fallback);
+};
+exports.useMatchMedia = useMatchMedia;

package/dist/Theme/chakra/motion.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.REDUCED_MOTION_QUERY = void 0;
-const react_1 = require("react");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
 exports.REDUCED_MOTION_QUERY = "@media (prefers-reduced-motion: reduce)";
 const MEDIA = "(prefers-reduced-motion: reduce)";
-// NOTE: jsdom has no matchMedia; Chakra's hook throws there and breaks consumer test suites.
-const hasMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
-const readPreference = () => hasMatchMedia() && window.matchMedia(MEDIA).matches;
-const usePrefersReducedMotion = () => {
-    const [reduced, setReduced] = (0, react_1.useState)(readPreference);
-    (0, react_1.useEffect)(() => {
-        if (!hasMatchMedia())
-            return;
-        const query = window.matchMedia(MEDIA);
-        const onChange = () => setReduced(query.matches);
-        query.addEventListener("change", onChange);
-        return () => query.removeEventListener("change", onChange);
-    }, []);
-    return reduced;
-};
+const usePrefersReducedMotion = () => (0, useMatchMedia_1.useMatchMedia)(MEDIA, false);
 exports.usePrefersReducedMotion = usePrefersReducedMotion;
 /** Spread into `sx`: drops transitions and animations when the user asks for less motion. */
 const reducedMotionSx = (overrides = {}) => ({

package/dist/Utils/price.js

@@ -7,15 +7,20 @@ exports.discountAmount = discountAmount;
 exports.unitPrice = unitPrice;
 exports.DEFAULT_CURRENCY = "INR";
 exports.DEFAULT_LOCALE = "en-IN";
+const formatters = new Map();
+const formatterFor = (locale, currency, minimum, maximum) => {
+    const key = `${locale}|${currency}|${minimum}|${maximum}`;
+    let formatter = formatters.get(key);
+    if (!formatter) {
+        formatter = new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: minimum, maximumFractionDigits: maximum });
+        formatters.set(key, formatter);
+    }
+    return formatter;
+};
 function formatPrice(value, options = {}) {
     const { currency = exports.DEFAULT_CURRENCY, locale = exports.DEFAULT_LOCALE, maximumFractionDigits } = options;
     const whole = Number.isInteger(value);
-    return new Intl.NumberFormat(locale, {
-        style: "currency",
-        currency,
-        minimumFractionDigits: whole ? 0 : 2,
-        maximumFractionDigits: maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2),
-    }).format(value);
+    return formatterFor(locale, currency, whole ? 0 : 2, maximumFractionDigits !== null && maximumFractionDigits !== void 0 ? maximumFractionDigits : (whole ? 0 : 2)).format(value);
 }
 function discountPercent(price, mrp) {
     if (mrp === undefined || mrp <= price || mrp <= 0)

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

@@ -8,6 +8,7 @@ import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
 import { liftToContrast, neutralStep, ruleInk, AA_NON_TEXT, CHROME_RULE, MIN_PERCEPTIBLE_STEP, } from "../../Theme/tokens/builders/outlineRung.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import Kbd from "../Kbd/Kbd.js";
 import AppMark, { assignAppHues } from "./AppMark.js";
 import { filterApps, formatShortcut, } from "./AppSwitcherProps.js";
 import { useAppSwitcherShortcut } from "./useAppSwitcherShortcut.js";
@@ -190,7 +191,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: "0.6875rem", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), _jsx(Box, { flex: "1" }), hint && (_jsx(Text, { as: "kbd", fontSize: "0.6875rem", fontFamily: "inherit", color: theme.colors.textMuted, border: "1px solid", borderRadius: "full", px: 1.5, py: 0.5, 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: `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: "0.6875rem", 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);

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

@@ -42,12 +42,14 @@ export const matchesShortcut = (event, shortcut, isApple = typeof navigator !==
 };
 const APPLE_SYMBOLS = { mod: "⌘", cmd: "⌘", meta: "⌘", ctrl: "⌃", shift: "⇧", alt: "⌥" };
 const OTHER_LABELS = { mod: "Ctrl", cmd: "Win", meta: "Win", ctrl: "Ctrl", shift: "Shift", alt: "Alt" };
-export const formatShortcut = (shortcut, isApple = typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform)) => {
+const isAppleNow = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One label per key in a chord, so a named key such as `enter` stays a single cap. */
+export const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
     const parts = shortcut.toLowerCase().split("+").map((p) => p.trim()).filter(Boolean);
     const table = isApple ? APPLE_SYMBOLS : OTHER_LABELS;
-    const rendered = parts.map((p, i) => { var _a; return i === parts.length - 1 ? p.toUpperCase() : ((_a = table[p]) !== null && _a !== void 0 ? _a : p.toUpperCase()); });
-    return isApple ? rendered.join("") : rendered.join("+");
+    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.

package/dist/esm/Components/Breadcrumbs/Breadcrumbs.js

@@ -1,19 +1,42 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, useTheme } from "@chakra-ui/react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Menu, MenuButton, MenuItem, MenuList, useTheme, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { breadcrumbInk } from "./breadcrumbInk.js";
-export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, }) {
+const DEFAULT_MAX_ITEMS = 3;
+const MIN_MAX_ITEMS = 2;
+const OVERFLOW_SX = {
+    nowrap: undefined,
+    wrap: { "& ol": { flexWrap: "wrap", rowGap: "4px" }, "& li": { maxWidth: "100%" } },
+    truncate: { "& ol": { flexWrap: "nowrap" }, "& li": { minWidth: 0 } },
+};
+const collapse = (entries, maxItems) => {
+    const keep = Math.max(MIN_MAX_ITEMS, Math.floor(maxItems));
+    if (entries.length <= keep)
+        return { head: entries, hidden: [], tail: [] };
+    return { head: entries.slice(0, 1), hidden: entries.slice(1, entries.length - (keep - 1)), tail: entries.slice(entries.length - (keep - 1)) };
+};
+export default function Breadcrumbs({ spacing, separator, fontWeight, fontSize, isCurrentPage, handleClick, items, overflow = "nowrap", maxItems = DEFAULT_MAX_ITEMS, labels, "data-testid": testId, }) {
     const theme = useTheme();
     const { colors } = useCustomTheme();
     const ink = breadcrumbInk(colors);
     const effectiveSeparator = separator !== null && separator !== void 0 ? separator : (_jsx(Box, { as: "span", color: ink.separator, children: "/" }));
-    return (_jsx(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, children: items.map((item, index) => {
-            const isLast = isCurrentPage && index === items.length - 1;
-            return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: _jsx(BreadcrumbLink, { href: item.path, color: isLast ? ink.current : ink.link, fontWeight: isLast ? 600 : fontWeight, sx: {
-                        "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover },
-                    }, onClick: (event) => {
-                        event.preventDefault();
-                        handleClick(item.path);
-                    }, children: item.label }) }, index));
-        }) }));
+    const clip = overflow !== "nowrap";
+    const clipProps = clip ? { noOfLines: 1 } : {};
+    const renderCrumb = ({ crumb, index }) => {
+        const isLast = Boolean(isCurrentPage) && index === items.length - 1;
+        const color = isLast ? ink.current : ink.link;
+        const common = { ...clipProps, title: clip ? crumb.label : undefined, color, fontWeight: isLast ? 600 : fontWeight };
+        return (_jsx(BreadcrumbItem, { isCurrentPage: isLast, children: crumb.path === undefined ? (_jsx(Box, { as: "span", "aria-current": isLast ? "page" : undefined, ...common, children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.path, ...common, sx: { "&:hover, &:active": { textDecoration: "none", color: isLast ? ink.current : ink.linkHover } }, onClick: (event) => {
+                    event.preventDefault();
+                    handleClick(crumb.path);
+                }, children: crumb.label })) }, index));
+    };
+    const renderMenu = (hidden) => {
+        var _a;
+        return (_jsx(BreadcrumbItem, { sx: { flexShrink: 0 }, children: _jsxs(Menu, { isLazy: true, placement: "bottom-start", children: [_jsx(MenuButton, { type: "button", "aria-label": ((_a = labels === null || labels === void 0 ? void 0 : labels.showMore) !== null && _a !== void 0 ? _a : ((n) => `Show ${n} more`))(hidden.length), color: ink.link, borderRadius: "md", px: 1, _hover: { color: ink.linkHover }, sx: focusVisibleStyles(colors), children: "\u2026" }), _jsx(MenuList, { children: hidden.map(({ crumb, index }) => (_jsx(MenuItem, { isDisabled: crumb.path === undefined, onClick: () => crumb.path !== undefined && handleClick(crumb.path), children: crumb.label }, index))) })] }) }, "overflow"));
+    };
+    const entries = items.map((crumb, index) => ({ crumb, index }));
+    const { head, hidden, tail } = overflow === "truncate" ? collapse(entries, maxItems) : { head: entries, hidden: [], tail: [] };
+    return (_jsxs(Breadcrumb, { spacing: spacing, separator: effectiveSeparator, fontWeight: fontWeight, fontSize: fontSize, fontFamily: theme.fonts.body, sx: OVERFLOW_SX[overflow], "data-testid": testId, children: [head.map(renderCrumb), hidden.length > 0 && renderMenu(hidden), tail.map(renderCrumb)] }));
 }

package/dist/esm/Components/Card/Card.js

@@ -1,11 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Card as ChakraCard, CardBody, CardFooter, CardHeader, } from "@chakra-ui/react";
-const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, ...rest }, ref) {
+const HEADER_PADDING_WHEN_FLUSH = "0.75rem";
+const PADDING_VALUES = {
+    none: "0",
+    "2xs": "0.375rem",
+    xs: "0.75rem",
+    sm: "0.75rem 1rem",
+    md: "1rem 1.25rem",
+    lg: "1.25rem 1.5rem",
+};
+const Card = forwardRef(function Card({ header, footer, children, color, colorScheme, direction = "column", align, justify, bodyProps, padding, ...rest }, ref) {
     const cardProps = { ...rest };
     delete cardProps.dividercolor;
     delete cardProps.dividersize;
     delete cardProps.dividervariant;
-    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, children: [header && _jsx(CardHeader, { children: header }), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
+    const sx = padding ? { "--card-padding": PADDING_VALUES[padding], ...cardProps.sx } : cardProps.sx;
+    return (_jsxs(ChakraCard, { ref: ref, colorScheme: colorScheme !== null && colorScheme !== void 0 ? colorScheme : color, ...cardProps, sx: sx, children: [header && (_jsx(CardHeader, { sx: padding === "none" ? { "--card-padding": HEADER_PADDING_WHEN_FLUSH } : undefined, children: header })), _jsx(CardBody, { display: "flex", flexDirection: direction, alignItems: align, justifyContent: justify, ...bodyProps, children: children }), footer && _jsx(CardFooter, { children: footer })] }));
 });
 export default Card;

package/dist/esm/Components/Editor/Editor.js

@@ -1,6 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { Suspense, useEffect, useMemo, useState } from "react";
 import { Box } from "@chakra-ui/react";
+import FieldMessage from "../Common/FieldMessage.js";
+import ErrorMessage from "../Common/ErrorMessage.js";
+import { fieldLabelStyles } from "../Common/FormLabel.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import EditorFieldBar from "./EditorFieldBar.js";
+import MakeDynamicDialog from "./MakeDynamicDialog.js";
+import { DEFAULT_TOKEN_SYNTAX, fieldOptions } from "./editorTokens.js";
+import { chipStyles } from "./editorTokenStyles.js";
+import { resolveEditorLabels } from "./editorLabels.js";
+import { useEditorBridge } from "./useEditorBridge.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { getJoditThemeVars } from "./joditThemeVars.js";
@@ -13,8 +23,25 @@ const JoditEditor = React.lazy(async () => {
     return { default: ((_a = mod.default) !== null && _a !== void 0 ? _a : mod) };
 });
 /** Lazy-loaded Jodit wrapper — a `config.theme` or `config.popupRoot` you pass overrides this library's own dark-mode/popup fix; omit both keys. */
-const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, }) {
+const Editor = React.memo(function Editor({ value, key, config, editorRef, className, onChange, onBlur, label, isRequired, helperText, error, errorMessage, mergeFields, tokenSyntax = DEFAULT_TOKEN_SYNTAX, showMakeDynamic, toolbarButtons, onUnknownTokens, apiRef, onReady, labels, "data-testid": testId, }) {
     const theme = useCustomTheme();
+    const text = useMemo(() => resolveEditorLabels(labels), [labels]);
+    const { joditValue, attachEditor, api, instance, unknown } = useEditorBridge({
+        value,
+        onChange,
+        onBlur,
+        mergeFields,
+        syntax: tokenSyntax,
+        chipLabel: text.fieldChip,
+        apiRef,
+        onReady,
+        onUnknownTokens,
+    });
+    const hasFields = mergeFields !== undefined;
+    const options = useMemo(() => fieldOptions(mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], tokenSyntax), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [JSON.stringify(mergeFields), tokenSyntax.open, tokenSyntax.close]);
+    const [dynamicText, setDynamicText] = useState(null);
     // Jodit portals dialogs/toolbar-dropdown popups (search & replace, image/link properties,
     // font-size list, ...) to `document.body` by default (`Dialog.destination` /
     // `getPopupViewRoot`), outside this wrapper's DOM subtree — so the CSS custom properties
@@ -49,6 +76,24 @@ const Editor = React.memo(function Editor({ value, key, config, editorRef, class
         observer.observe(popupRoot, { childList: true, subtree: true });
         return () => observer.disconnect();
     }, [popupRoot]);
-    return (_jsx(Box, { ref: setPopupRoot, sx: themeVars, children: _jsx(Suspense, { fallback: null, children: _jsx(JoditEditor, { config: stableConfig, value: value, ref: editorRef, className: className, onChange: onChange, onBlur: onBlur }, key) }) }));
+    const unknownActive = hasFields && unknown.length > 0 && !(error && errorMessage);
+    const ids = useFieldIds(undefined, { error, errorMessage, helperText });
+    const describedBy = unknownActive ? ids.errorId : ids.describedBy;
+    const invalid = Boolean(error) || unknownActive;
+    const isReadOnly = Boolean(stableConfig === null || stableConfig === void 0 ? void 0 : stableConfig.readonly);
+    useEffect(() => {
+        if (!instance)
+            return;
+        const el = instance.editor;
+        const set = (name, val) => val === undefined ? el.removeAttribute(name) : el.setAttribute(name, val);
+        set("role", "textbox");
+        set("aria-multiline", "true");
+        set("aria-labelledby", label ? ids.labelId : undefined);
+        set("aria-describedby", describedBy);
+        set("aria-invalid", invalid ? "true" : undefined);
+        set("aria-required", isRequired ? "true" : undefined);
+    }, [instance, label, ids.labelId, describedBy, invalid, isRequired]);
+    const showFieldBar = hasFields || Boolean(toolbarButtons === null || toolbarButtons === void 0 ? void 0 : toolbarButtons.length);
+    return (_jsxs(Box, { "data-testid": testId, children: [label && (_jsxs(Box, { as: "label", id: ids.labelId, display: "block", onClick: () => api.focus(), ...fieldLabelStyles(theme.colors), children: [label, isRequired && (_jsx("span", { "aria-hidden": true, style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" }))] })), showFieldBar && (_jsx(EditorFieldBar, { options: options, labels: text, api: api, isDisabled: !instance || isReadOnly, showFieldMenu: hasFields, showMakeDynamic: hasFields && (showMakeDynamic !== null && showMakeDynamic !== void 0 ? showMakeDynamic : true), buttons: toolbarButtons !== null && toolbarButtons !== void 0 ? toolbarButtons : [], onMakeDynamic: () => setDynamicText(api.getSelectionText()) })), _jsx(Box, { ref: setPopupRoot, sx: { ...themeVars, ...chipStyles(theme.colors) }, children: _jsx(Suspense, { fallback: null, children: popupRoot && (_jsx(JoditEditor, { config: stableConfig, value: joditValue, ref: editorRef, editorRef: attachEditor, className: className }, key)) }) }), unknownActive ? (_jsx(ErrorMessage, { id: ids.errorId, errorMessage: text.unknownTokens(unknown.join(", ")) })) : (_jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })), hasFields && (_jsx(MakeDynamicDialog, { selectedText: dynamicText, options: options, labels: text, countFor: api.countOccurrences, onReplace: api.replaceAll, onClose: () => setDynamicText(null) }))] }));
 });
 export default Editor;

package/dist/esm/Components/Editor/EditorFieldBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Icon } from "@chakra-ui/react";
+import { WandSparkles } from "lucide-react";
+import Button from "../Button/Button.js";
+import Select from "../Select/Select.js";
+export default function EditorFieldBar({ options, labels, api, isDisabled, showFieldMenu, showMakeDynamic, buttons, onMakeDynamic, }) {
+    return (_jsxs(Flex, { role: "toolbar", "aria-label": labels.toolbar, gap: 2, wrap: "wrap", align: "center", mb: 2, children: [showFieldMenu && (_jsx(Box, { width: { base: "100%", sm: "16rem" }, children: _jsx(Select, { native: false, "aria-label": labels.insertField, placeholder: labels.insertField, options: options, value: "", noOptionsMessage: labels.noFields, isDisabled: isDisabled, onChange: (option) => {
+                        if (!option)
+                            return;
+                        api.insertField(String(option.id));
+                        window.setTimeout(api.focus, 0);
+                    }, "data-testid": "editor-insert-field" }) })), showMakeDynamic && (_jsx(Button, { variant: "outline", colorScheme: "gray", leftIcon: _jsx(WandSparkles, { size: 16, "aria-hidden": true }), label: labels.makeDynamic, onClick: onMakeDynamic, isDisabled: isDisabled, "data-testid": "editor-make-dynamic" })), buttons.map((button) => (_jsx(Button, { variant: "ghost", colorScheme: "gray", leftIcon: button.icon ? _jsx(Icon, { as: button.icon, boxSize: 4, "aria-hidden": true }) : undefined, label: button.label, onClick: () => button.onClick(api), isDisabled: isDisabled || button.isDisabled, "data-testid": `editor-button-${button.id}` }, button.id)))] }));
+}