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

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/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 {};

package/dist/esm/Components/LauncherTrigger/LauncherTrigger.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@chakra-ui/react";
+import { Compass } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { FOCUS_VISIBLE_OVER_STATE, focusVisibleRing } from "../../Theme/chakra/focusRing.styles.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
+import { detectApple } from "../Kbd/Kbd.js";
+import { formatShortcut } from "../AppSwitcher/AppSwitcherProps.js";
+const MD_QUERY = "(min-width: 48em)";
+const KEY_NAMES = {
+    mod: ["Meta", "Control"],
+    cmd: ["Meta"],
+    ctrl: ["Control"],
+    alt: ["Alt"],
+    shift: ["Shift"],
+    esc: ["Escape"],
+};
+export 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(" ");
+};
+const LauncherTrigger = ({ onClick, isOpen, label = "Menu", shortcut = "mod+k", icon: Icon = Compass, "aria-label": ariaLabel, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const showHint = useMatchMedia(MD_QUERY, true);
+    const ring = focusVisibleRing(colors);
+    const hint = shortcut ? formatShortcut(shortcut, detectApple()) : "";
+    return (_jsxs(Box, { as: "button", type: "button", "data-testid": testId, onClick: onClick, "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-label": ariaLabel, "aria-keyshortcuts": shortcut ? 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: transitionFor(["background-color", "border-color", "box-shadow"]), _hover: { borderColor: colors.primary[300] }, sx: { _focusVisible: ring, [FOCUS_VISIBLE_OVER_STATE]: ring, ...reducedMotionSx() }, children: [_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: 2, "aria-hidden": ariaLabel ? true : undefined, children: [_jsx(Icon, { size: 17, "aria-hidden": "true" }), _jsx("span", { children: label })] }), hint && showHint && (_jsx(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 }))] }));
+};
+export default LauncherTrigger;

package/dist/esm/Components/LauncherTrigger/LauncherTriggerProps.js

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

package/dist/esm/Components/MediaGallery/MediaGallery.js

@@ -14,7 +14,7 @@ import MediaLightbox from "./MediaLightbox.js";
 import { GlassIconButton, GlassPill, glassStyles } from "./glass.js";
 import { CROSSFADE_MS, fadeIn } from "./motion.js";
 import { useContainerWidth } from "../Commerce/useContainerWidth.js";
-import { useMatchMedia } from "./useMatchMedia.js";
+import { useMatchMedia } from "../../Hooks/useMatchMedia.js";
 import { clampIndex, frameKind, frameSignature, indexForKey, keyBelongsToTarget, resolveFrames } from "./mediaGalleryModel.js";
 import { defaultMediaGalleryLabels } from "./MediaGalleryProps.js";
 const WIDE_QUERY = "(min-width: 768px)";