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

package/dist/Components/Editor/useEditorBridge.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorBridge = useEditorBridge;
+const react_1 = require("react");
+const editorTokens_1 = require("./editorTokens");
+function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = (0, react_1.useMemo)(() => ({ fields: mergeFields !== null && mergeFields !== void 0 ? mergeFields : [], syntax, chipLabel }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [fieldsKey, syntax.open, syntax.close, chipLabel]);
+    const joditRef = (0, react_1.useRef)(null);
+    const rangeRef = (0, react_1.useRef)(null);
+    const lastRef = (0, react_1.useRef)(null);
+    const appliedFieldsKey = (0, react_1.useRef)(fieldsKey);
+    const live = (0, react_1.useRef)({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = (0, react_1.useState)(null);
+    const [raw, setRaw] = (0, react_1.useState)(value !== null && value !== void 0 ? value : "");
+    (0, react_1.useEffect)(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = (0, react_1.useCallback)((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = (0, react_1.useCallback)((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? (0, editorTokens_1.serializeChips)(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = (0, react_1.useCallback)((jodit) => {
+        joditRef.current = jodit;
+        rangeRef.current = null;
+        appliedFieldsKey.current = live.current.fieldsKey;
+        const remember = () => {
+            if (jodit.s.isInsideArea)
+                rangeRef.current = jodit.s.range.cloneRange();
+        };
+        jodit.events.on("keyup mouseup touchend", remember);
+        jodit.events.on("change", handleChange);
+        jodit.events.on("blur", (event) => handleBlur(jodit.value, event));
+        const deleteChip = (event) => {
+            if (!live.current.enabled)
+                return false;
+            if (event.key !== "Backspace" && event.key !== "Delete")
+                return false;
+            const chip = (0, editorTokens_1.adjacentChip)(jodit.s.range, event.key === "Backspace" ? "backward" : "forward");
+            if (!chip)
+                return false;
+            chip.remove();
+            jodit.synchronizeValues();
+            event.preventDefault();
+            return true;
+        };
+        jodit.events.on("keydown", ((event) => (deleteChip(event) ? false : undefined)));
+        jodit.editor.addEventListener("keydown", (event) => {
+            if (deleteChip(event))
+                event.stopImmediatePropagation();
+        }, true);
+        jodit.waitForReady().then(() => {
+            var _a, _b;
+            if (joditRef.current !== jodit)
+                return;
+            setInstance(jodit);
+            (_b = (_a = live.current).onReady) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }, [handleChange, handleBlur]);
+    (0, react_1.useEffect)(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = (0, editorTokens_1.chipify)((0, editorTokens_1.serializeChips)(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: (0, editorTokens_1.serializeChips)(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = (0, react_1.useMemo)(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? (0, editorTokens_1.serializeChips)(jodit.value, live.current.ctx.syntax) : jodit.value;
+        const insertHTML = (html) => {
+            const jodit = current();
+            if (!jodit)
+                return;
+            if (rangeRef.current)
+                jodit.s.selectRange(rangeRef.current, true);
+            jodit.s.insertHTML(html);
+            rangeRef.current = jodit.s.range.cloneRange();
+        };
+        return {
+            insertHTML,
+            insertField: (path) => {
+                const { enabled: on, ctx: c } = live.current;
+                insertHTML(on ? (0, editorTokens_1.chipHtml)(path, c) : (0, editorTokens_1.fieldToken)(path, c.syntax));
+            },
+            getSelectionText: () => (rangeRef.current ? rangeRef.current.toString().trim() : ""),
+            replaceAll: (text, path) => {
+                const jodit = current();
+                if (!jodit)
+                    return 0;
+                const { enabled: on, ctx: c, onChange: emit } = live.current;
+                const result = (0, editorTokens_1.makeDynamic)(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? (0, editorTokens_1.chipify)(result.html, c) : result.html;
+                lastRef.current = { raw: result.html, jodit: jodit.value };
+                rangeRef.current = null;
+                setRaw(result.html);
+                emit === null || emit === void 0 ? void 0 : emit(result.html);
+                return result.count;
+            },
+            countOccurrences: (text) => {
+                const jodit = current();
+                return jodit ? (0, editorTokens_1.countOccurrences)(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    (0, react_1.useImperativeHandle)(apiRef, () => api, [api]);
+    const unknown = (0, react_1.useMemo)(() => (enabled ? (0, editorTokens_1.unknownTokens)(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = (0, react_1.useRef)("");
+    (0, react_1.useEffect)(() => {
+        if (!enabled || reported.current === unknownKey)
+            return;
+        reported.current = unknownKey;
+        onUnknownTokens === null || onUnknownTokens === void 0 ? void 0 : onUnknownTokens(unknown);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [enabled, unknownKey]);
+    const last = lastRef.current;
+    let joditValue = value;
+    if (enabled && value !== undefined) {
+        joditValue = last && last.raw === value ? last.jodit : (0, editorTokens_1.chipify)(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

package/dist/Components/EmptyState/EmptyState.js

@@ -26,6 +26,7 @@ const scaleFor = (colors, scheme) => scheme === "primary" || scheme === "seconda
 const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon: IconComp = lucide_react_1.Inbox, image, imageAlt = "", size = "md", colorScheme = "primary", variant = "default", action, animate = false, minH = "15rem", sx, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const s = sizeMap[size];
+    const hasDescription = description !== undefined && description !== null && description !== false && description !== "";
     const palette = scaleFor(theme.colors, colorScheme);
     const tone = (0, tone_1.resolveSoftTone)(theme.colors, palette, theme.colors.background[50]);
     const accentSoft = tone.bg;
@@ -48,6 +49,6 @@ const EmptyState = ({ title = "No data found", titleAs = "h3", description, icon
                     bg: accentSoft,
                     opacity: HALO_OPACITY,
                     zIndex: -1,
-                }, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), description && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
+                }, sx: (0, motion_1.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(IconComp, { size: s.icon, strokeWidth: 1.75, "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)(react_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_1.Text, { as: titleAs, fontSize: s.title, fontWeight: 600, color: theme.colors.header[900], mt: 1, children: title }), hasDescription && ((0, jsx_runtime_1.jsx)(react_1.Text, { as: typeof description === "string" ? undefined : "div", fontSize: s.desc, color: theme.colors.textMuted, mt: 1, maxW: "23.75rem", children: description }))] }), action && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 3, mt: 2, wrap: "wrap", justify: "center", children: action }))] }));
 };
 exports.default = EmptyState;

package/dist/Components/EmptyState/EmptyStateProps.d.ts

@@ -10,8 +10,8 @@ export interface EmptyStateProps {
     title?: string;
     /** Heading element for the title; defaults to "h3" — pick the level that fits the page outline. */
     titleAs?: "h2" | "h3" | "h4" | "h5" | "h6" | "p";
-    /** Supporting line under the title. */
-    description?: string;
+    /** Supporting text under the title; a node (bold, link) is wrapped in the same muted block and renders above `action`. */
+    description?: ReactNode;
     /** A lucide-react (or any) icon component rendered inside the badge. */
     icon?: ElementType;
     /** Illustration image URL. When provided it replaces the icon badge. */

package/dist/Components/FormDrawer/FormDrawer.d.ts

@@ -0,0 +1,2 @@
+import type { FormDrawerProps } from "./FormDrawerProps";
+export default function FormDrawer({ isOpen, onClose, title, description, sections, errors, isDirty, onSubmit, isSubmitting, submitLabel, cancelLabel, secondaryAction, size, labels, "data-testid": testId, }: FormDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,97 @@
+"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.default = FormDrawer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Drawer_1 = __importStar(require("../Drawer/Drawer"));
+const AlertDialog_1 = __importDefault(require("../AlertDialog/AlertDialog"));
+const Button_1 = __importDefault(require("../Button/Button"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const DEFAULT_LABELS = {
+    fixErrors: "Please fix the following before saving",
+    discardTitle: "Discard changes?",
+    discardBody: "You have unsaved changes. If you close now, they will be lost.",
+    discard: "Discard",
+    keepEditing: "Keep editing",
+};
+function FormDrawer({ isOpen, onClose, title, description, sections, errors = [], isDirty, onSubmit, isSubmitting = false, submitLabel = "Save", cancelLabel = "Cancel", secondaryAction, size = "md", labels, "data-testid": testId = "form-drawer", }) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = (0, react_1.useState)(false);
+    const [attempt, setAttempt] = (0, react_1.useState)(0);
+    const keepEditingRef = (0, react_1.useRef)(null);
+    const summaryRef = (0, react_1.useRef)(null);
+    const focusPending = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!focusPending.current || isSubmitting)
+            return;
+        focusPending.current = false;
+        if (errors.length)
+            (_a = summaryRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [attempt, errors, isSubmitting]);
+    const requestClose = () => {
+        if (isSubmitting)
+            return;
+        if (isDirty)
+            setConfirmDiscard(true);
+        else
+            onClose();
+    };
+    const submit = (event) => {
+        event.preventDefault();
+        if (isSubmitting)
+            return;
+        focusPending.current = true;
+        setAttempt((n) => n + 1);
+        onSubmit();
+    };
+    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: (0, jsx_runtime_1.jsx)(AlertDialog_1.default, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [(0, jsx_runtime_1.jsxs)(Drawer_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerBody, { children: (0, jsx_runtime_1.jsx)(react_2.Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? ((0, jsx_runtime_1.jsxs)(react_2.Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-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: text.fixErrors }), (0, jsx_runtime_1.jsx)(react_2.AlertDescription, { fontSize: "sm", children: (0, jsx_runtime_1.jsx)(react_2.UnorderedList, { mt: 1, children: errors.map((message) => ((0, jsx_runtime_1.jsx)(react_2.ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 ? (0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: colors.boxborder[200] }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? ((0, jsx_runtime_1.jsx)(react_2.Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), (0, jsx_runtime_1.jsx)(Drawer_1.DrawerFooter, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/Components/FormDrawer/FormDrawerProps.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react";
+/** One block of the form; sections after the first are separated by a divider. */
+export type FormDrawerSection = {
+    /** Stable React key. */
+    id: string;
+    /** Renders an h3 above the content; also names the section region. */
+    title?: string;
+    /** Muted line under `title`; ignored without a title. */
+    description?: string;
+    content: ReactNode;
+};
+/** Every user-facing string FormDrawer owns; pass the ones you localise. */
+export type FormDrawerLabels = {
+    /** Heading of the error summary. Defaults to "Please fix the following before saving". */
+    fixErrors: string;
+    /** Defaults to "Discard changes?". */
+    discardTitle: string;
+    /** Defaults to "You have unsaved changes. If you close now, they will be lost.". */
+    discardBody: string;
+    /** Confirm button of the discard dialog. Defaults to "Discard". */
+    discard: string;
+    /** Cancel button of the discard dialog, focused on open. Defaults to "Keep editing". */
+    keepEditing: string;
+};
+/** Sectioned create/edit form in a Drawer: error summary, sticky footer, and a discard-changes confirm when closing while dirty. */
+export interface FormDrawerProps {
+    isOpen: boolean;
+    /** Called once the user has really closed: clean close, or Discard confirmed. Never called while `isSubmitting`. */
+    onClose: () => void;
+    /** Drawer heading; also the accessible name of the dialog and of the form. */
+    title: string;
+    /** Muted line under the title. */
+    description?: string;
+    sections: FormDrawerSection[];
+    /** Validation messages shown as a summary above the form; the summary takes focus after a submit that leaves any. */
+    errors?: string[];
+    /** Closing (X, Esc, overlay, Cancel) asks for confirmation while true. */
+    isDirty: boolean;
+    /** Fires on submit (button or Enter in a field); the browser's own validation is off, so validate in the handler. */
+    onSubmit: () => void;
+    /** Spins the submit button, disables Cancel and blocks every close path. Set it synchronously in `onSubmit` so error focus waits for the result. */
+    isSubmitting?: boolean;
+    /** Defaults to "Save". */
+    submitLabel?: string;
+    /** Defaults to "Cancel". */
+    cancelLabel?: string;
+    /** Rendered left of Cancel, e.g. a ghost "Save as draft" Button. */
+    secondaryAction?: ReactNode;
+    /** Drawer width. Defaults to "md". */
+    size?: "sm" | "md" | "lg";
+    /** Overrides for the built-in strings. */
+    labels?: Partial<FormDrawerLabels>;
+    /** Set on the form; the error summary and submit button get `-errors` / `-submit` suffixes. Defaults to "form-drawer". */
+    "data-testid"?: string;
+}

package/dist/Components/FormDrawer/FormDrawerProps.js

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

package/dist/Components/Kbd/Kbd.d.ts

@@ -0,0 +1,6 @@
+import type { KbdProps, KbdShortcutProps } from "./KbdProps";
+export declare const detectApple: () => boolean;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+declare const Kbd: ({ children, size, "data-testid": testId }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export declare const KbdShortcut: ({ shortcut, size, isApple, "data-testid": testId }: KbdShortcutProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/Components/Kbd/Kbd.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KbdShortcut = exports.detectApple = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+exports.detectApple = detectApple;
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "data-testid": testId, display: "inline-flex", alignItems: "center", justifyContent: "center", minW: HEIGHT[size], h: HEIGHT[size], px: 1.5, fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: 1, whiteSpace: "nowrap", borderWidth: "1px", borderColor: colors.boxborder[200], borderRadius: "base", bg: colors.backgroundColor.subtle, color: colors.textMuted, children: children }));
+};
+const KbdShortcut = ({ shortcut, size, isApple, "data-testid": testId }) => {
+    const parts = shortcut.split("+").map((p) => p.trim()).filter(Boolean);
+    const apple = isApple !== null && isApple !== void 0 ? isApple : (0, exports.detectApple)();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = (0, AppSwitcherProps_1.shortcutKeys)(shortcut, apple);
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => ((0, jsx_runtime_1.jsx)(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+exports.KbdShortcut = KbdShortcut;
+exports.default = Kbd;

package/dist/Components/Kbd/KbdProps.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+/** Props for a single keyboard key cap. */
+export interface KbdProps {
+    children: ReactNode;
+    /** `sm` is 20px tall (default); `xs` is 16px. */
+    size?: "xs" | "sm";
+    "data-testid"?: string;
+}
+/** Props for a key chord such as `mod+k`, rendered as one `Kbd` per key. */
+export interface KbdShortcutProps {
+    /** Chord in `AppSwitcher` notation, e.g. `mod+shift+k`. */
+    shortcut: string;
+    size?: KbdProps["size"];
+    /** Forces Apple glyphs (⌘ ⇧) or Ctrl/Shift words; defaults to platform detection. */
+    isApple?: boolean;
+    "data-testid"?: string;
+}

package/dist/Components/Kbd/KbdProps.js

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

package/dist/Components/LauncherTrigger/LauncherTrigger.d.ts

@@ -0,0 +1,4 @@
+import type { LauncherTriggerProps } from "./LauncherTriggerProps";
+export declare const keyShortcutsFor: (shortcut: string) => string;
+declare const LauncherTrigger: ({ onClick, isOpen, label, shortcut, icon: Icon, display, "aria-label": ariaLabel, "data-testid": testId, }: LauncherTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyShortcutsFor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const motion_1 = require("../../Theme/chakra/motion");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const useMatchMedia_1 = require("../../Hooks/useMatchMedia");
+const Kbd_1 = require("../Kbd/Kbd");
+const AppSwitcherProps_1 = require("../AppSwitcher/AppSwitcherProps");
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+const keyShortcutsFor = (shortcut) => {
+    const options = shortcut
+        .split("+")
+        .map((p) => p.trim())
+        .filter(Boolean)
+        .map((p) => { var _a; return (_a = KEY_NAMES[p.toLowerCase()]) !== null && _a !== void 0 ? _a : [p.length === 1 ? p.toUpperCase() : p]; });
+    const variants = Math.max(1, ...options.map((o) => o.length));
+    const chords = Array.from({ length: variants }, (_, v) => options.map((o) => o[Math.min(v, o.length - 1)]).join("+"));
+    return Array.from(new Set(chords)).join(" ");
+};
+exports.keyShortcutsFor = keyShortcutsFor;
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = lucide_react_1.Compass, display = "chip", "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const showHint = (0, useMatchMedia_1.useMatchMedia)(MD_QUERY, true);
+    const ring = (0, focusRing_styles_1.focusVisibleRing)(colors);
+    const hint = shortcut ? (0, AppSwitcherProps_1.formatShortcut)(shortcut, (0, Kbd_1.detectApple)()) : "";
+    if (display === "icon") {
+        return ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: hint ? `${label} (${hint})` : label, placement: "bottom", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, w: "36px", h: "36px", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? (0, exports.keyShortcutsFor)(shortcut) : undefined, display: "inline-flex", alignItems: "center", gap: 2, flexShrink: 0, h: "2.25rem", pl: "0.625rem", pr: "0.375rem", borderRadius: "10px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.primary[50], color: colors.accentText, fontSize: "0.84375rem", fontWeight: 600, lineHeight: 1, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE]: ring, ...(0, motion_1.reducedMotionSx)() }, children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 17, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("span", { children: label })] }), hint && showHint && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "kbd", "aria-hidden": "true", fontFamily: "inherit", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "normal", px: "6px", py: "2px", borderRadius: "6px", borderWidth: "1px", borderColor: colors.primary[100], bg: colors.surfaceRaised, children: hint }))] }));
+};
+exports.default = LauncherTrigger;

package/dist/Components/LauncherTrigger/LauncherTriggerProps.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType } from "react";
+/** Props for the chip that opens an app-owned launcher; it renders the trigger only and binds no shortcut. */
+export interface LauncherTriggerProps {
+    onClick: () => void;
+    /** Whether the launcher is open; drives `aria-expanded`. */
+    isOpen: boolean;
+    /** Visible text. Default "Menu". */
+    label?: string;
+    /** Chord in `AppSwitcher` notation shown as a hint above `md` and exposed as `aria-keyshortcuts`; `null` hides both. Default "mod+k". */
+    shortcut?: string | null;
+    /** Component rendered at 17px before the label. Default lucide `Compass`. */
+    icon?: ElementType;
+    /** `"chip"` shows icon, label and chord hint; `"icon"` is a 36px square whose label is the accessible name and tooltip. Default "chip". */
+    display?: "chip" | "icon";
+    /** Overrides the accessible name; the visible label and hint then become `aria-hidden`. */
+    "aria-label"?: string;
+    "data-testid"?: string;
+}

package/dist/Components/LauncherTrigger/LauncherTriggerProps.js

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

package/dist/Components/Modal/Modal.d.ts

@@ -3,4 +3,4 @@ import { ChakraModelProps, ModalHeaderSlotProps, ModalBodySlotProps, ModalFooter
 export declare const ModalHeader: React.FC<ModalHeaderSlotProps>;
 export declare const ModalBody: React.FC<ModalBodySlotProps>;
 export declare const ModalFooter: React.FC<ModalFooterSlotProps>;
-export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ size, isOpen, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount, initialFocusRef, closeOnOverlayClick, closeOnEsc, trapFocus, motionPreset, scrollBehavior, children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }: ChakraModelProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Modal/Modal.js

@@ -9,6 +9,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("./warnDroppedSlotChildren");
 const ModalHeader = ({ children }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -37,12 +38,13 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, }) {
+function Modal({ size, isOpen = false, onClose, overlaybg, overlaybackdropFilter, overlaybackdropInvert, overlaybackdropBlur, isCentered, finalFocusRef, blockScrollOnMount = true, initialFocusRef, closeOnOverlayClick = true, closeOnEsc = true, trapFocus = true, motionPreset = "scale", scrollBehavior = "outside", children, isLoading, title, subtitle, hideCloseButton, contentProps, portalChildren, }) {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const headerSlot = findSlot(children, exports.ModalHeader);
     const bodySlot = findSlot(children, exports.ModalBody);
     const footerSlot = findSlot(children, exports.ModalFooter);
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("Modal", children, [exports.ModalHeader, exports.ModalBody, exports.ModalFooter]);
     const headerContent = headerSlot !== null && headerSlot !== void 0 ? headerSlot : title;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, size: size, isCentered: isCentered, finalFocusRef: finalFocusRef, blockScrollOnMount: blockScrollOnMount, initialFocusRef: initialFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, trapFocus: trapFocus, motionPreset: motionPreset, scrollBehavior: scrollBehavior, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { bg: overlaybg, backdropFilter: overlaybackdropFilter, backdropInvert: overlaybackdropInvert, backdropBlur: overlaybackdropBlur }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { "aria-busy": isLoading || undefined, ...contentProps, children: [(headerContent || subtitle) && ((0, jsx_runtime_1.jsxs)(react_2.ModalHeader, { ...((_a = headerSlot === null || headerSlot === void 0 ? void 0 : headerSlot.props) !== null && _a !== void 0 ? _a : {}), children: [headerContent, subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "div", mt: 0.5, fontSize: "0.875rem", fontWeight: 400, color: colors.textMuted, children: subtitle }))] })), !hideCloseButton && (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Flex, { role: "status", "aria-label": "Loading", justify: "center", align: "center", py: 16, children: (0, jsx_runtime_1.jsx)(react_2.Spinner, { thickness: "4px", speed: "0.65s", emptyColor: colors.boxborder[200], color: colors.accentText, size: "xl" }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.ModalBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && ((0, jsx_runtime_1.jsx)(react_2.ModalFooter, { ...footerSlot.props, children: footerSlot }))] })), portalChildren] })] }));
 }

package/dist/Components/Modal/ModalProps.d.ts

@@ -7,7 +7,7 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     overlaybackdropInvert?: string;
     overlaybackdropBlur?: string;
     size: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full";
-    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other sibling is dropped. */
+    /** Only ModalHeader/ModalBody/ModalFooter render, matched by type one fragment deep; any other child is dropped (dev console.warn) — use `portalChildren`. */
     children?: React.ReactNode;
     /** Spinner replaces body and footer; header and close button stay. */
     isLoading?: boolean;
@@ -18,6 +18,8 @@ export type ChakraModelProps = Pick<ModalProps, "isOpen" | "onClose" | "finalFoc
     hideCloseButton?: boolean;
     /** Spread onto ModalContent last, so it overrides `aria-busy` and theme styles. */
     contentProps?: ModalContentProps;
+    /** Rendered inside the modal's dialog after the slots (so live regions stay announced); nested dialogs portal out and keep focus here. Unmounts with the modal. */
+    portalChildren?: React.ReactNode;
 };
 /** Chakra style props (padding, borderBottom, gap, sx, ...) spread onto the rendered ModalHeader; omit to keep theme defaults. */
 export type ModalHeaderSlotProps = ModalHeaderProps;

package/dist/Components/Modal/warnDroppedSlotChildren.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const warnDroppedSlotChildren: (owner: "Drawer" | "Modal", children: React.ReactNode, slots: unknown[]) => void;

package/dist/Components/Modal/warnDroppedSlotChildren.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.warnDroppedSlotChildren = void 0;
+const react_1 = __importDefault(require("react"));
+const warned = new Set();
+const nameOf = (type) => {
+    if (typeof type === "string")
+        return type;
+    const fn = type;
+    return (fn === null || fn === void 0 ? void 0 : fn.displayName) || (fn === null || fn === void 0 ? void 0 : fn.name) || "Component";
+};
+const collect = (children, slots, dropped) => {
+    for (const child of react_1.default.Children.toArray(children)) {
+        if (typeof child === "string" || typeof child === "number") {
+            if (String(child).trim())
+                dropped.set("#text", "text");
+            continue;
+        }
+        if (!react_1.default.isValidElement(child))
+            continue;
+        if (slots.includes(child.type))
+            continue;
+        if (child.type === react_1.default.Fragment) {
+            collect(child.props.children, slots, dropped);
+            continue;
+        }
+        dropped.set(child.type, nameOf(child.type));
+    }
+};
+const warnDroppedSlotChildren = (owner, children, slots) => {
+    if (process.env.NODE_ENV === "production")
+        return;
+    const dropped = new Map();
+    collect(children, slots, dropped);
+    dropped.forEach((name, type) => {
+        if (warned.has(type))
+            return;
+        warned.add(type);
+        console.warn(`[pixelize-design-library] ${owner}: <${name}> is not a ${owner}Header/${owner}Body/${owner}Footer slot and was dropped. Pass nested dialogs and live regions through the portalChildren prop.`);
+    });
+};
+exports.warnDroppedSlotChildren = warnDroppedSlotChildren;

package/dist/Components/NavLauncher/NavLauncher.d.ts

@@ -0,0 +1,3 @@
+import type { NavLauncherProps } from "./NavLauncherProps";
+/** Left-drawer navigation launcher: browse every module, pins, Frequent, Recent, search and (compact) the suite's apps. */
+export default function NavLauncher({ isOpen, onClose, sections: rawSections, pinnedIds, frequentIds, recentIds, onTogglePin, onNavigate, linkAs, actions, extraResults, query: controlledQuery, onQueryChange, isSearching, isLoading, keyScreenLimit, frequentLimit, suggestions, searchHint, openShortcutHint, modKeyLabel, maxWidth, labels: labelOverrides, apps, currentAppId, onAppSelect, appsVisibility, "data-testid": testId, }: NavLauncherProps): import("react/jsx-runtime").JSX.Element;