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

package/dist/esm/Components/CircularProgress/CircularProgress.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, chakra } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { resolveSoftTone, toneScale } from "../../Theme/tokens/builders/tone.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { arcGeometry, SIZE_PX, THICKNESS_PX } from "./arc.js";
+const Circle = chakra("circle");
+const LABEL_FONT = {
+    sm: "0.625rem",
+    md: "0.75rem",
+    lg: "1rem",
+};
+const scaleFor = (colors, tone) => tone === "info" ? colors.primary : toneScale(colors, tone);
+/** Ring-shaped determinate progress with a centred label — for a linear bar use ProgressBar. */
+const CircularProgress = ({ value, max = 100, size = "md", thickness, tone = "info", label, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const diameter = SIZE_PX[size];
+    const stroke = thickness !== null && thickness !== void 0 ? thickness : THICKNESS_PX[size];
+    const { radius, circumference, fraction, clamped, safeMax, dashOffset } = arcGeometry(diameter, stroke, value, max);
+    const ink = resolveSoftTone(colors, scaleFor(colors, tone), colors.background[50]).fg;
+    const center = diameter / 2;
+    const valueText = typeof label === "string" || typeof label === "number" ? String(label) : undefined;
+    return (_jsxs(Box, { role: "progressbar", "aria-label": ariaLabel, "aria-valuenow": clamped, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-valuetext": valueText, "data-testid": testId, position: "relative", display: "inline-flex", flexShrink: 0, boxSize: `${diameter}px`, children: [_jsxs("svg", { width: diameter, height: diameter, viewBox: `0 0 ${diameter} ${diameter}`, "aria-hidden": true, focusable: "false", children: [_jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", sx: { stroke: colors.backgroundColor.subtle, strokeWidth: stroke } }), _jsx(Circle, { cx: center, cy: center, r: radius, fill: "none", "data-testid": testId ? `${testId}-arc` : undefined, sx: {
+                            stroke: ink,
+                            strokeWidth: stroke,
+                            strokeLinecap: "round",
+                            strokeDasharray: circumference,
+                            strokeDashoffset: dashOffset,
+                            strokeOpacity: fraction > 0 ? 1 : 0,
+                            transform: "rotate(-90deg)",
+                            transformOrigin: "50% 50%",
+                            transition: transitionFor(["stroke-dashoffset"]),
+                            ...reducedMotionSx(),
+                        } })] }), label !== undefined && label !== null && (_jsx(Flex, { position: "absolute", inset: 0, align: "center", justify: "center", fontSize: LABEL_FONT[size], fontWeight: 600, lineHeight: 1, color: colors.header[900], sx: { fontVariantNumeric: "tabular-nums" }, children: label }))] }));
+};
+export default CircularProgress;

package/dist/esm/Components/CircularProgress/CircularProgressProps.js

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

package/dist/esm/Components/CircularProgress/arc.js

@@ -0,0 +1,11 @@
+export const SIZE_PX = { sm: 32, md: 48, lg: 72 };
+export const THICKNESS_PX = { sm: 4, md: 5, lg: 7 };
+export const clampValue = (value, max) => Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+export const arcGeometry = (diameter, thickness, value, max) => {
+    const safeMax = max > 0 ? max : 100;
+    const clamped = clampValue(value, safeMax);
+    const radius = Math.max((diameter - thickness) / 2, 0);
+    const circumference = 2 * Math.PI * radius;
+    const fraction = clamped / safeMax;
+    return { radius, circumference, fraction, clamped, safeMax, dashOffset: circumference * (1 - fraction) };
+};

package/dist/esm/Components/Common/fieldStyles.js

@@ -5,7 +5,8 @@ import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outline
 import { fieldFocusVisible, focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
 export const FIELD_RADIUS = "lg";
 export const FIELD_BORDER_WIDTH = "1px";
-export const FIELD_TRANSITION = transitionFor(["border-color", "box-shadow", "background-color"]);
+/** No box-shadow: the focus ring must be present the frame focus lands, not fade in. */
+export const FIELD_TRANSITION = transitionFor(["border-color", "background-color"]);
 /** Chakra `h`/`fontSize`/`px` for a field or select of this size. */
 export const controlSizeStyles = (size) => {
     const spec = CONTROL_SIZES[size];

package/dist/esm/Components/Drawer/Drawer.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { warnDroppedSlotChildren } from "../Modal/warnDroppedSlotChildren.js";
 import { Drawer as ChakraDrawer, DrawerBody as ChakraDrawerBody, DrawerFooter as ChakraDrawerFooter, DrawerHeader as ChakraDrawerHeader, DrawerOverlay, DrawerContent, DrawerCloseButton, } from "@chakra-ui/react";
 export const DrawerHeader = ({ children }) => {
     return _jsx(_Fragment, { children: children });
@@ -27,11 +28,12 @@ const findSlot = (children, slot) => {
     }
     return undefined;
 };
-export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, children, }) {
+export default function Drawer({ isOpen, onClose, placement = "right", size = "xl", id, variant, vaiant, initialFocusRef, finalFocusRef, closeOnOverlayClick, closeOnEsc, contentProps, hideCloseButton, portalChildren, children, }) {
     var _a, _b;
     const { colors } = useCustomTheme();
     const headerSlot = findSlot(children, DrawerHeader);
     const bodySlot = findSlot(children, DrawerBody);
     const footerSlot = findSlot(children, DrawerFooter);
-    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot }))] })] }));
+    warnDroppedSlotChildren("Drawer", children, [DrawerHeader, DrawerBody, DrawerFooter]);
+    return (_jsxs(ChakraDrawer, { isOpen: isOpen, placement: placement, onClose: onClose, size: size, variant: (_a = variant !== null && variant !== void 0 ? variant : vaiant) !== null && _a !== void 0 ? _a : "solid", id: id, initialFocusRef: initialFocusRef, finalFocusRef: finalFocusRef, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, children: [_jsx(DrawerOverlay, {}), _jsxs(DrawerContent, { ...contentProps, children: [!hideCloseButton && _jsx(DrawerCloseButton, {}), headerSlot && (_jsx(ChakraDrawerHeader, { borderBottomWidth: "1px", borderColor: colors.boxborder[200], ...headerSlot.props, children: headerSlot })), _jsx(ChakraDrawerBody, { ...((_b = bodySlot === null || bodySlot === void 0 ? void 0 : bodySlot.props) !== null && _b !== void 0 ? _b : {}), children: bodySlot }), footerSlot && (_jsx(ChakraDrawerFooter, { borderTopWidth: "1px", borderColor: colors.boxborder[200], ...footerSlot.props, children: footerSlot })), portalChildren] })] }));
 }

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)))] }));
+}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import Button from "../Button/Button.js";
+import Modal, { ModalBody, ModalFooter } from "../Modal/Modal.js";
+import Select from "../Select/Select.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+export default function MakeDynamicDialog({ selectedText, options, labels, countFor, onReplace, onClose, }) {
+    const { colors } = useCustomTheme();
+    const [path, setPath] = useState("");
+    const count = selectedText ? countFor(selectedText) : 0;
+    const close = () => {
+        setPath("");
+        onClose();
+    };
+    return (_jsxs(Modal, { isOpen: selectedText !== null, onClose: close, size: "md", isCentered: true, title: labels.dynamicTitle, children: [_jsx(ModalBody, { children: selectedText ? (_jsxs(Flex, { direction: "column", gap: 4, "data-testid": "editor-dynamic-dialog", children: [_jsxs(Box, { children: [_jsx(Text, { fontSize: "xs", color: colors.textMuted, children: labels.dynamicSelected }), _jsxs(Text, { fontSize: "sm", fontWeight: 500, color: colors.text[800], noOfLines: 3, children: ["\u201C", selectedText, "\u201D"] })] }), _jsx(Select, { native: false, label: labels.dynamicField, placeholder: labels.dynamicFieldPlaceholder, options: options, value: path, onChange: (option) => setPath(option ? String(option.id) : ""), "data-testid": "editor-dynamic-field" }), _jsx(Text, { fontSize: "sm", color: colors.textMuted, "aria-live": "polite", children: labels.dynamicCount(count) })] })) : (_jsx(Text, { fontSize: "sm", color: colors.text[800], "data-testid": "editor-dynamic-empty", children: labels.dynamicNoSelection })) }), _jsx(ModalFooter, { children: _jsxs(Flex, { gap: 2, justify: "flex-end", w: "100%", children: [_jsx(Button, { variant: "ghost", colorScheme: "gray", label: labels.cancel, onClick: close }), selectedText ? (_jsx(Button, { variant: "solid", colorScheme: "primary", label: labels.dynamicReplace, onClick: () => {
+                                onReplace(selectedText, path);
+                                close();
+                            }, isDisabled: !path || count === 0, "data-testid": "editor-dynamic-apply" })) : null] }) })] }));
+}

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

@@ -0,0 +1,20 @@
+export const DEFAULT_EDITOR_LABELS = {
+    insertField: "Insert field",
+    noFields: "No fields",
+    makeDynamic: "Make dynamic",
+    dynamicTitle: "Make dynamic",
+    dynamicField: "Field",
+    dynamicFieldPlaceholder: "Choose a field",
+    dynamicCount: (n) => `${n} ${n === 1 ? "occurrence" : "occurrences"} will be replaced`,
+    dynamicReplace: "Replace",
+    dynamicNoSelection: "Select some text in the editor first.",
+    unknownTokens: (list) => `Unknown fields: ${list}`,
+    cancel: "Cancel",
+    dynamicSelected: "Selected text",
+    toolbar: "Template fields",
+    fieldChip: (label) => `Field: ${label}`,
+};
+export const resolveEditorLabels = (labels) => ({
+    ...DEFAULT_EDITOR_LABELS,
+    ...labels,
+});

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

@@ -0,0 +1,25 @@
+import { CHIP_CLASS } from "./editorTokens.js";
+export const chipColors = (colors) => ({
+    known: { bg: colors.primary.opacity[8], ink: colors.accentText },
+    unknown: { bg: "transparent", ink: colors.semanticText.error },
+});
+export const chipStyles = (colors) => {
+    const { known, unknown } = chipColors(colors);
+    return {
+        [`.${CHIP_CLASS}`]: {
+            display: "inline-block",
+            px: "0.25rem",
+            borderRadius: "sm",
+            border: "1px solid transparent",
+            bg: known.bg,
+            color: known.ink,
+            cursor: "default",
+        },
+        [`.${CHIP_CLASS}[data-known="false"]`]: {
+            bg: unknown.bg,
+            color: unknown.ink,
+            border: "1px dashed",
+            borderColor: unknown.ink,
+        },
+    };
+};

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

@@ -0,0 +1,121 @@
+export const DEFAULT_TOKEN_SYNTAX = { open: "${", close: "}" };
+export const CHIP_CLASS = "pxl-token";
+const PATH_CHARS = "[A-Za-z0-9_.]+";
+const TAG_SPLIT = /(<[^>]*>)/;
+const CHIP_PATTERN = /<span\b([^>]*\bdata-field=(["'])([^"']*)\2[^>]*)>[^<]*<\/span>/g;
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+const escapeHtml = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escapeAttr = (text) => escapeHtml(text).replace(/"/g, "&quot;");
+const patternsFor = ({ open, close }) => {
+    const o = escapeRegExp(open);
+    const c = escapeRegExp(close);
+    return {
+        match: new RegExp(`${o}(${PATH_CHARS})${c}`, "g"),
+        split: new RegExp(`(${o}(?:(?!${c})[\\s\\S])*${c})`),
+    };
+};
+export const fieldToken = (path, syntax = DEFAULT_TOKEN_SYNTAX) => `${syntax.open}${path}${syntax.close}`;
+export function fieldOptions(fields, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const groups = [...new Set(fields.map((field) => field.group))];
+    return groups.flatMap((group) => fields
+        .filter((field) => field.group === group)
+        .map((field) => ({
+        id: field.path,
+        label: field.label,
+        group,
+        description: fieldToken(field.path, syntax),
+    })));
+}
+export function extractTokens(html, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const { match } = patternsFor(syntax);
+    return [...new Set([...html.matchAll(match)].map((m) => m[1]))];
+}
+export function unknownTokens(html, fields, syntax = DEFAULT_TOKEN_SYNTAX) {
+    const known = new Set(fields.map((field) => field.path));
+    return extractTokens(html, syntax).filter((path) => !known.has(path));
+}
+function needlePattern(text) {
+    const words = text
+        .trim()
+        .split(/\s+/)
+        .map((word) => escapeRegExp(escapeHtml(word)));
+    return new RegExp(words.join("(?:\\s|&nbsp;|\\u00a0)+"), "g");
+}
+function mapTextOutsideTokens(html, syntax, mapText) {
+    const { split } = patternsFor(syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<")
+        ? segment
+        : segment
+            .split(split)
+            .map((part, i) => (i % 2 === 1 ? part : mapText(part)))
+            .join(""))
+        .join("");
+}
+/** Replaces every whitespace-insensitive occurrence of `selectedText` outside tags and tokens. */
+export function makeDynamic(html, selectedText, path, syntax = DEFAULT_TOKEN_SYNTAX) {
+    if (!selectedText.trim())
+        return { html, count: 0 };
+    const pattern = needlePattern(selectedText);
+    let count = 0;
+    const next = mapTextOutsideTokens(html, syntax, (text) => text.replace(pattern, () => {
+        count += 1;
+        return fieldToken(path, syntax);
+    }));
+    return { html: next, count };
+}
+export function countOccurrences(html, selectedText, syntax = DEFAULT_TOKEN_SYNTAX) {
+    return makeDynamic(html, selectedText, "_", syntax).count;
+}
+export function chipHtml(path, { fields, syntax, chipLabel }) {
+    const field = fields.find((f) => f.path === path);
+    const text = field ? field.label : fieldToken(path, syntax);
+    const title = (field === null || field === void 0 ? void 0 : field.sample) ? ` title="${escapeAttr(field.sample)}"` : "";
+    return (`<span class="${CHIP_CLASS}" data-field="${escapeAttr(path)}" data-known="${field ? "true" : "false"}"` +
+        ` contenteditable="false" role="img" aria-label="${escapeAttr(chipLabel(text))}"${title}>${escapeHtml(text)}</span>`);
+}
+/** Raw `${path}` tokens in text nodes become non-editable chip spans; tags are left alone. */
+export function chipify(html, context) {
+    const { match } = patternsFor(context.syntax);
+    return html
+        .split(TAG_SPLIT)
+        .map((segment) => segment.startsWith("<") ? segment : segment.replace(match, (_t, path) => chipHtml(path, context)))
+        .join("");
+}
+/** Inverse of `chipify`: every chip span collapses back to its raw token. */
+export function serializeChips(html, syntax = DEFAULT_TOKEN_SYNTAX) {
+    return html.replace(CHIP_PATTERN, (_m, _attrs, _q, path) => fieldToken(path, syntax));
+}
+const isChip = (node) => !!node && node.nodeType === 1 && node.hasAttribute("data-field");
+const INVISIBLE = /[\u200b\ufeff]/g;
+const isBlankText = (node) => !node.data.replace(INVISIBLE, "");
+const skipEmptyText = (node, step) => {
+    let current = node;
+    while (current && current.nodeType === 3 && isBlankText(current))
+        current = current[step];
+    return current;
+};
+/** The chip a Backspace (backward) or Delete (forward) at a collapsed caret would eat, if any. */
+export function adjacentChip(range, direction) {
+    var _a;
+    if (!range.collapsed)
+        return null;
+    const node = range.startContainer;
+    const offset = range.startOffset;
+    const step = direction === "backward" ? "previousSibling" : "nextSibling";
+    let candidate;
+    if (node.nodeType === 3) {
+        const text = node.data;
+        const beyond = direction === "backward" ? text.slice(0, offset) : text.slice(offset);
+        const atEdge = !beyond.replace(INVISIBLE, "");
+        if (!atEdge)
+            return null;
+        candidate = node[step];
+    }
+    else {
+        candidate = (_a = node.childNodes[direction === "backward" ? offset - 1 : offset]) !== null && _a !== void 0 ? _a : null;
+    }
+    const found = skipEmptyText(candidate, step);
+    return isChip(found) ? found : null;
+}

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

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { adjacentChip, chipHtml, chipify, countOccurrences, fieldToken, makeDynamic, serializeChips, unknownTokens, } from "./editorTokens.js";
+export function useEditorBridge({ value, onChange, onBlur, mergeFields, syntax, chipLabel, apiRef, onReady, onUnknownTokens, }) {
+    const enabled = mergeFields !== undefined;
+    const fieldsKey = JSON.stringify(mergeFields);
+    const ctx = 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 = useRef(null);
+    const rangeRef = useRef(null);
+    const lastRef = useRef(null);
+    const appliedFieldsKey = useRef(fieldsKey);
+    const live = useRef({ enabled, ctx, onChange, onBlur, onReady, fieldsKey });
+    live.current = { enabled, ctx, onChange, onBlur, onReady, fieldsKey };
+    const [instance, setInstance] = useState(null);
+    const [raw, setRaw] = useState(value !== null && value !== void 0 ? value : "");
+    useEffect(() => {
+        if (value !== undefined)
+            setRaw(value);
+    }, [value]);
+    const handleChange = useCallback((html) => {
+        const { enabled: on, ctx: c, onChange: emit } = live.current;
+        const next = on ? serializeChips(html, c.syntax) : html;
+        lastRef.current = { raw: next, jodit: html };
+        setRaw(next);
+        emit === null || emit === void 0 ? void 0 : emit(next);
+    }, []);
+    const handleBlur = useCallback((html, event) => {
+        const { enabled: on, ctx: c, onBlur: emit } = live.current;
+        emit === null || emit === void 0 ? void 0 : emit(on ? serializeChips(html, c.syntax) : html, event);
+    }, []);
+    const attachEditor = 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 = 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]);
+    useEffect(() => {
+        if (!instance || !enabled || appliedFieldsKey.current === fieldsKey)
+            return;
+        appliedFieldsKey.current = fieldsKey;
+        const html = chipify(serializeChips(instance.value, ctx.syntax), ctx);
+        instance.value = html;
+        lastRef.current = { raw: serializeChips(html, ctx.syntax), jodit: instance.value };
+    }, [instance, enabled, fieldsKey, ctx]);
+    const api = useMemo(() => {
+        const current = () => joditRef.current;
+        const currentRaw = (jodit) => live.current.enabled ? 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 ? chipHtml(path, c) : 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 = makeDynamic(currentRaw(jodit), text, path, c.syntax);
+                if (result.count === 0)
+                    return 0;
+                jodit.value = on ? 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 ? countOccurrences(currentRaw(jodit), text, live.current.ctx.syntax) : 0;
+            },
+            focus: () => {
+                var _a;
+                (_a = current()) === null || _a === void 0 ? void 0 : _a.s.focus();
+            },
+        };
+    }, []);
+    useImperativeHandle(apiRef, () => api, [api]);
+    const unknown = useMemo(() => (enabled ? unknownTokens(raw, ctx.fields, syntax) : []), [enabled, raw, ctx, syntax]);
+    const unknownKey = unknown.join("\n");
+    const reported = useRef("");
+    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 : chipify(value, ctx);
+    }
+    return { joditValue, attachEditor, api, instance, raw, unknown, ctx };
+}

package/dist/esm/Components/EmptyState/EmptyState.js

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

package/dist/esm/Components/FormDrawer/FormDrawer.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Divider, Flex, Heading, ListItem, Text, UnorderedList, } from "@chakra-ui/react";
+import Drawer, { DrawerBody, DrawerFooter, DrawerHeader } from "../Drawer/Drawer.js";
+import AlertDialog from "../AlertDialog/AlertDialog.js";
+import Button from "../Button/Button.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+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",
+};
+export default 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 } = useCustomTheme();
+    const uid = useId();
+    const formId = `${uid}-form`;
+    const titleId = `${uid}-title`;
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const [confirmDiscard, setConfirmDiscard] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    const keepEditingRef = useRef(null);
+    const summaryRef = useRef(null);
+    const focusPending = useRef(false);
+    useEffect(() => {
+        if (!isOpen)
+            setConfirmDiscard(false);
+    }, [isOpen]);
+    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 (_jsxs(Drawer, { isOpen: isOpen, onClose: requestClose, size: size, closeOnEsc: !isSubmitting, closeOnOverlayClick: !isSubmitting, portalChildren: _jsx(AlertDialog, { isOpen: confirmDiscard, onClose: () => setConfirmDiscard(false), leastDestructiveRef: keepEditingRef, isCentered: true, tone: "danger", title: text.discardTitle, content: _jsx(Text, { fontSize: "sm", color: colors.text[800], children: text.discardBody }), cancelButtonText: text.keepEditing, confirmButtonText: text.discard, onConfirm: () => {
+                setConfirmDiscard(false);
+                onClose();
+            } }), children: [_jsxs(DrawerHeader, { children: [_jsx(Heading, { id: titleId, as: "h2", fontSize: "md", fontWeight: 600, color: colors.header[900], children: title }), description ? (_jsx(Text, { mt: 0.5, fontSize: "sm", fontWeight: 400, color: colors.textMuted, children: description })) : null] }), _jsx(DrawerBody, { children: _jsx(Box, { as: "form", id: formId, "aria-labelledby": titleId, onSubmit: submit, noValidate: true, "data-testid": testId, children: _jsxs(Flex, { direction: "column", gap: 5, pt: 2, children: [errors.length ? (_jsxs(Alert, { ref: summaryRef, tabIndex: -1, status: "error", variant: "subtle", borderRadius: "md", alignItems: "flex-start", "data-testid": `${testId}-errors`, children: [_jsx(AlertIcon, {}), _jsxs(Box, { children: [_jsx(AlertTitle, { fontSize: "sm", children: text.fixErrors }), _jsx(AlertDescription, { fontSize: "sm", children: _jsx(UnorderedList, { mt: 1, children: errors.map((message) => (_jsx(ListItem, { children: message }, message))) }) })] })] })) : null, sections.map((section, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Divider, { borderColor: colors.boxborder[200] }) : null, _jsxs(Flex, { as: "section", direction: "column", gap: 4, "aria-label": section.title, children: [section.title ? (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", fontSize: "sm", fontWeight: 600, color: colors.header[900], children: section.title }), section.description ? (_jsx(Text, { mt: 0.5, fontSize: "xs", color: colors.textMuted, children: section.description })) : null] })) : null, section.content] })] }, section.id)))] }) }) }), _jsx(DrawerFooter, { children: _jsxs(Flex, { gap: 2, w: "100%", justify: "flex-end", wrap: "wrap", children: [secondaryAction, _jsx(Button, { variant: "ghost", colorScheme: "gray", onClick: requestClose, isDisabled: isSubmitting, label: cancelLabel }), _jsx(Button, { variant: "solid", colorScheme: "primary", type: "submit", form: formId, isLoading: isSubmitting, loadingText: submitLabel, label: submitLabel, "data-testid": `${testId}-submit` })] }) })] }));
+}

package/dist/esm/Components/FormDrawer/FormDrawerProps.js

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

package/dist/esm/Components/Kbd/Kbd.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { shortcutKeys } from "../AppSwitcher/AppSwitcherProps.js";
+const HEIGHT = { xs: "1rem", sm: "1.25rem" };
+const SPOKEN = {
+    mod: "Command",
+    cmd: "Command",
+    ctrl: "Control",
+    alt: "Option",
+    shift: "Shift",
+    enter: "Enter",
+    esc: "Escape",
+};
+export const detectApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+/** One keyboard key cap; decorative hint rows should wrap it in `aria-hidden`. */
+const Kbd = ({ children, size = "sm", "data-testid": testId }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(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 }));
+};
+export 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 : detectApple();
+    const spoken = parts.map((p) => { var _a; return (_a = SPOKEN[p.toLowerCase()]) !== null && _a !== void 0 ? _a : p.toUpperCase(); }).join(" ");
+    const keys = shortcutKeys(shortcut, apple);
+    return (_jsx(Box, { as: "span", display: "inline-flex", gap: 1, role: "img", "aria-label": spoken, "data-testid": testId, children: keys.map((key, i) => (_jsx(Kbd, { size: size, children: key }, `${key}-${i}`))) }));
+};
+export default Kbd;

package/dist/esm/Components/Kbd/KbdProps.js

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