@polymorfa/react 0.1.0-dev.20260922094209

package/dist/components.js

@@ -0,0 +1,843 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { VoiceNoteRecorder, localAttachmentFromFile, } from "@polymorfa/browser";
+import { CHAT_ICONS, EMOJI_CATEGORY_ICONS, EMOJI_PICKER_CATEGORIES, applyQuickReply, emojiInCategory, filterQuickReplies, findQuickReplyQuery, formatElapsed, insertText, placePopover, quickReplyLabel, readRecentEmoji, recentEmojiEntries, recordRecentEmoji, searchEmoji, ENGLISH_MESSAGES, appearanceToCssVariables, formatDayLabel, formatFileSize, formatMessageTime, injectComponentStyles, isImageAttachment, layoutMessages, safeAttachmentUrl, slotClassName, themeClassName, } from "@polymorfa/ui";
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
+import { usePolymorfa } from "./context.js";
+import { useController, safeSubscribe, useOwnedController, useResolvedController, } from "./hooks.js";
+// Runs before paint in the browser, and quietly on the server.
+const useIsomorphicLayoutEffect = typeof document === "undefined" ? useEffect : useLayoutEffect;
+function slotStyle(styles) {
+    if (styles === undefined)
+        return undefined;
+    const style = {};
+    for (const [name, value] of Object.entries(styles))
+        style[name.startsWith("--")
+            ? name
+            : name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())] = value;
+    return style;
+}
+function createSlots(appearance, classNames) {
+    const styles = new Map();
+    return (slot, base) => {
+        if (!styles.has(slot))
+            styles.set(slot, slotStyle(appearance.elements[slot]?.styles));
+        const style = styles.get(slot);
+        return {
+            className: slotClassName(appearance, slot, base, classNames),
+            ...(style === undefined ? {} : { style }),
+            "data-slot": slot,
+        };
+    };
+}
+/** Slot resolver that keeps its identity while the inputs are unchanged. */
+export function useSlots(classNames) {
+    const { appearance } = usePolymorfa();
+    const key = classNames === undefined ? "" : JSON.stringify(classNames);
+    // `key` stands in for `classNames`, which callers usually pass inline.
+    return useMemo(() => createSlots(appearance, classNames), [appearance, key]);
+}
+function useStyles(appearance) {
+    const unstyled = appearance.unstyled === true;
+    useEffect(() => {
+        if (!unstyled)
+            injectComponentStyles();
+    }, [unstyled]);
+}
+/** Root props: theme classes, direction, CSS variables, and the slot. */
+export function useShell(slots, slot, base, className) {
+    const configuration = usePolymorfa();
+    const { appearance, locale } = configuration;
+    useStyles(appearance);
+    const variables = useMemo(() => ({
+        ...appearanceToCssVariables(appearance),
+        "--pmfa-drawer-width": appearance.layout.drawerWidth,
+    }), [appearance]);
+    const slotProps = slots(slot, base);
+    return {
+        dir: appearance.layout.direction === "auto"
+            ? locale.direction
+            : appearance.layout.direction,
+        className: [
+            themeClassName(appearance.theme),
+            slotProps.className,
+            className,
+        ]
+            .filter((value) => value !== undefined && value !== "")
+            .join(" "),
+        style: slotProps.style === undefined
+            ? variables
+            : { ...variables, ...slotProps.style },
+        "data-slot": slot,
+    };
+}
+export function text(configuration, key, values = {}) {
+    const template = configuration.locale.messages[key] ?? ENGLISH_MESSAGES[key];
+    return template.replace(/\{(\w+)\}/g, (_, name) => values[name] ?? "");
+}
+export function Icon({ name, className = "pmfa-icon", }) {
+    return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: CHAT_ICONS[name] }) }));
+}
+/** Subscribe to a controller that may be absent. */
+const NO_SUBSCRIPTION = () => () => undefined;
+const NO_SNAPSHOT = () => undefined;
+function useOptionalController(controller) {
+    return useSyncExternalStore(controller === undefined ? NO_SUBSCRIPTION : safeSubscribe(controller), controller?.getSnapshot ?? NO_SNAPSHOT, controller?.getSnapshot ?? NO_SNAPSHOT);
+}
+/** A value's latest version, for stable callbacks. */
+function useLatest(value) {
+    const ref = useRef(value);
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    });
+    return ref;
+}
+function authorName(configuration, message) {
+    return text(configuration, message?.direction === "outbound" ? "chat.you" : "chat.contact");
+}
+function snippet(configuration, message) {
+    return message.text.trim() !== ""
+        ? message.text
+        : (message.attachments?.[0]?.name ??
+            text(configuration, "chat.attachment"));
+}
+function AttachmentView({ attachment, configuration, slots, }) {
+    // Unsafe schemes such as `javascript:` never reach `href` or `src`.
+    const url = safeAttachmentUrl(attachment.url);
+    const source = safeAttachmentUrl(attachment.previewUrl) ?? url;
+    if (isImageAttachment(attachment) && source !== undefined) {
+        const image = (_jsx("img", { src: source, alt: attachment.name, loading: "lazy", decoding: "async" }));
+        return url === undefined ? (_jsx("div", { ...slots("attachment", "pmfa-att pmfa-att-media"), children: image })) : (_jsx("a", { ...slots("attachment", "pmfa-att pmfa-att-media"), href: url, target: "_blank", rel: "noopener noreferrer", children: image }));
+    }
+    const body = (_jsxs(_Fragment, { children: [_jsx("span", { className: "pmfa-att-icon", children: _jsx(Icon, { name: "file" }) }), _jsxs("span", { className: "pmfa-att-body", children: [_jsx("span", { className: "pmfa-att-name", children: attachment.name }), _jsx("span", { className: "pmfa-att-size", children: formatFileSize(attachment.size, configuration.locale.code) })] })] }));
+    return url === undefined ? (_jsx("div", { ...slots("attachment", "pmfa-att pmfa-att-file"), children: body })) : (_jsx("a", { ...slots("attachment", "pmfa-att pmfa-att-file"), href: url, target: "_blank", rel: "noopener noreferrer", title: text(configuration, "chat.openAttachment", {
+            name: attachment.name,
+        }), children: body }));
+}
+const MessageItem = memo(function MessageItem({ message, quoted, groupStart, groupEnd, configuration, slots, canReply, canRetry, onReply, onRetry, onJump, renderMessage, renderAttachment, }) {
+    const outbound = message.direction === "outbound";
+    const time = formatMessageTime(message.createdAt, configuration.locale.code);
+    const status = message.status === "failed"
+        ? text(configuration, "chat.failed")
+        : message.status === "pending"
+            ? text(configuration, "chat.sending")
+            : outbound
+                ? text(configuration, "chat.sent")
+                : undefined;
+    const retry = canRetry &&
+        outbound &&
+        message.status === "failed" &&
+        message.clientId !== undefined;
+    const custom = renderMessage?.(message);
+    return (_jsxs("li", { ...slots("message", [
+            "pmfa-msg",
+            `pmfa-msg-${outbound ? "out" : "in"}`,
+            `pmfa-msg-${message.status}`,
+            groupStart ? "pmfa-msg-start" : "",
+            groupEnd ? "pmfa-msg-end" : "",
+        ]
+            .filter(Boolean)
+            .join(" ")), "data-message-id": message.id, tabIndex: -1, children: [quoted !== undefined && (_jsxs("button", { type: "button", ...slots("replyQuote", "pmfa-quote"), onClick: () => onJump(quoted.id), children: [_jsx("span", { className: "pmfa-sr", children: text(configuration, "chat.jumpToReply") }), _jsx("span", { className: "pmfa-quote-name", children: authorName(configuration, quoted) }), _jsx("span", { className: "pmfa-quote-text", children: snippet(configuration, quoted) })] })), _jsxs("div", { className: "pmfa-row", children: [_jsx("div", { ...slots("bubble", "pmfa-bubble"), children: custom ?? (_jsxs(_Fragment, { children: [(message.attachments?.length ?? 0) > 0 && (_jsx("div", { className: "pmfa-atts", children: message.attachments?.map((attachment) => (_jsx(AttachmentItem, { attachment: attachment, message: message, configuration: configuration, slots: slots, renderAttachment: renderAttachment }, attachment.id))) })), message.text !== "" && (_jsx("span", { className: "pmfa-text", children: message.text }))] })) }), (canReply || retry) && (_jsxs("div", { ...slots("messageActions", "pmfa-actions-msg"), role: "group", "aria-label": text(configuration, "chat.messageActions"), children: [retry && (_jsx("button", { type: "button", ...slots("retryButton", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon pmfa-action-retry"), "aria-label": text(configuration, "chat.retry"), title: text(configuration, "chat.retry"), onClick: () => onRetry(message), children: _jsx(Icon, { name: "retry" }) })), canReply && (_jsx("button", { type: "button", ...slots("replyButton", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon"), "aria-label": text(configuration, "chat.reply"), title: text(configuration, "chat.reply"), onClick: () => onReply(message), children: _jsx(Icon, { name: "reply" }) }))] }))] }), _jsxs("span", { ...slots("messageMeta", "pmfa-meta"), children: [time !== undefined && (_jsx("time", { dateTime: new Date(message.createdAt).toISOString(), children: time })), outbound && (_jsx(Icon, { name: message.status, className: "pmfa-icon pmfa-status" })), status !== undefined &&
+                        (message.status === "failed" ? (_jsx("span", { children: status })) : (_jsx("span", { className: "pmfa-sr", children: status })))] }), message.error !== undefined && (_jsx("span", { className: "pmfa-msg-error", role: "alert", children: message.error }))] }));
+});
+function AttachmentItem({ attachment, message, configuration, slots, renderAttachment, }) {
+    return (renderAttachment?.(attachment, message) ?? (_jsx(AttachmentView, { attachment: attachment, configuration: configuration, slots: slots })));
+}
+/** Keeps the newest message in view while the reader is already at the end. */
+function useStickToBottom(dependency) {
+    const ref = useRef(null);
+    const pinned = useRef(true);
+    useIsomorphicLayoutEffect(() => {
+        const node = ref.current;
+        if (node !== null && pinned.current)
+            node.scrollTop = node.scrollHeight;
+    }, [dependency]);
+    const onScroll = useCallback(() => {
+        const node = ref.current;
+        if (node !== null)
+            pinned.current =
+                node.scrollHeight - node.scrollTop - node.clientHeight < 32;
+    }, []);
+    return { ref, onScroll };
+}
+function prefersReducedMotion() {
+    return (typeof matchMedia === "function" &&
+        matchMedia("(prefers-reduced-motion: reduce)").matches);
+}
+function ConversationLog({ controller, rootProps, slots, renderMessage, renderAttachment, onReply, }) {
+    const snapshot = useController(controller);
+    const configuration = usePolymorfa();
+    const scroll = useStickToBottom(snapshot.messages);
+    const entries = useMemo(() => layoutMessages(snapshot.messages), [snapshot.messages]);
+    const byId = useMemo(() => new Map(snapshot.messages.map((message) => [message.id, message])), [snapshot.messages]);
+    const latestReply = useLatest(onReply);
+    const reply = useCallback((message) => latestReply.current?.(message), [latestReply]);
+    const retry = useCallback((message) => {
+        if (message.clientId !== undefined)
+            void controller.retry(message.clientId).catch(() => undefined);
+    }, [controller]);
+    const jump = useCallback((id) => {
+        const target = scroll.ref.current?.querySelector(`[data-message-id="${id.replace(/["\\]/g, "\\$&")}"]`);
+        if (target === null || target === undefined)
+            return;
+        target.scrollIntoView?.({
+            block: "center",
+            behavior: prefersReducedMotion() ? "auto" : "smooth",
+        });
+        target.focus({ preventScroll: true });
+        target.classList.remove("pmfa-msg-flash");
+        target.classList.add("pmfa-msg-flash");
+        setTimeout(() => target.classList.remove("pmfa-msg-flash"), 1200);
+    }, [scroll.ref]);
+    const loadMore = useCallback(() => void controller.loadMore(), [controller]);
+    const canRetry = typeof controller.retry === "function";
+    const now = Date.now();
+    const dayLabels = {
+        today: text(configuration, "chat.today"),
+        yesterday: text(configuration, "chat.yesterday"),
+    };
+    return (_jsx("div", { ...rootProps, ref: scroll.ref, onScroll: scroll.onScroll, "data-pmfa": "message-list", role: "log", "aria-live": "polite", "aria-label": text(configuration, "chat.title"), children: _jsxs("ol", { className: "pmfa-items", children: [snapshot.hasMore && (_jsx("li", { className: "pmfa-loadmore", children: _jsx("button", { type: "button", ...slots("loadMore", "pmfa-btn"), onClick: loadMore, children: text(configuration, "chat.loadMore") }) })), entries.length === 0 ? (_jsx("li", { ...slots("empty", "pmfa-empty"), children: text(configuration, "chat.empty") })) : (entries.map((entry) => entry.kind === "date" ? (_jsx("li", { ...slots("dateSeparator", "pmfa-date"), children: formatDayLabel(entry.time, configuration.locale.code, dayLabels, now) }, entry.key)) : (_jsx(MessageItem, { message: entry.message, quoted: entry.message.replyTo === undefined
+                        ? undefined
+                        : byId.get(entry.message.replyTo), groupStart: entry.groupStart, groupEnd: entry.groupEnd, configuration: configuration, slots: slots, canReply: onReply !== undefined, canRetry: canRetry, onReply: reply, onRetry: retry, onJump: jump, renderMessage: renderMessage, renderAttachment: renderAttachment }, entry.key))))] }) }));
+}
+export function MessageList({ controller, createController, className, classNames, ...viewProps }) {
+    const resolved = useResolvedController(controller, createController);
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "messageList", "pmfa-list", className);
+    return (_jsx(ConversationLog, { ...viewProps, controller: resolved, rootProps: root, slots: slots }));
+}
+// ── Composer ──────────────────────────────────────────────────────────
+let attachmentCounter = 0;
+function attachmentFromFile(file) {
+    attachmentCounter += 1;
+    return {
+        id: globalThis.crypto?.randomUUID?.() ??
+            `local-${Date.now()}-${attachmentCounter}`,
+        name: file.name,
+        size: file.size,
+        contentType: file.type === "" ? "application/octet-stream" : file.type,
+        file,
+    };
+}
+function errorText(cause) {
+    return cause instanceof Error ? cause.message : String(cause);
+}
+const supportsFieldSizing = typeof CSS !== "undefined" &&
+    typeof CSS.supports === "function" &&
+    CSS.supports("field-sizing", "content");
+function hasFiles(event) {
+    return [...(event.dataTransfer?.types ?? [])].includes("Files");
+}
+function rejectionCleared(previous, next) {
+    if (previous.text !== next.text)
+        return true;
+    if (previous.sending && !next.sending && next.error === undefined)
+        return true;
+    return (next.status === "ready" &&
+        !next.sending &&
+        next.error === undefined &&
+        next.text === "" &&
+        next.attachments.length === 0 &&
+        next.replyTo === undefined);
+}
+function AttachmentChip({ attachment, configuration, slots, onRemove, }) {
+    const percent = Math.round(attachment.progress * 100);
+    return (_jsxs("li", { ...slots("attachmentChip", `pmfa-chip pmfa-chip-${attachment.status}`), "data-attachment-id": attachment.id, children: [_jsx(Icon, { name: attachment.status === "failed" ? "failed" : "file" }), _jsxs("span", { className: "pmfa-chip-body", children: [_jsx("span", { className: "pmfa-chip-name", children: attachment.name }), attachment.status === "uploading" && (_jsx("span", { className: "pmfa-progress", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": percent, "aria-label": text(configuration, "composer.uploading", {
+                            name: attachment.name,
+                        }), children: _jsx("span", { style: { width: `${percent}%` } }) })), _jsx("span", { className: "pmfa-chip-status", "aria-live": "polite", children: attachment.status === "failed" ? ((attachment.error ?? text(configuration, "composer.uploadFailed"))) : attachment.status === "uploading" ? (_jsx("span", { className: "pmfa-sr", children: text(configuration, "composer.uploading", {
+                                name: attachment.name,
+                            }) })) : (formatFileSize(attachment.size, configuration.locale.code)) })] }), _jsx("button", { type: "button", className: "pmfa-btn pmfa-btn-ghost pmfa-btn-icon", "aria-label": text(configuration, "composer.removeNamedAttachment", {
+                    name: attachment.name,
+                }), onClick: () => onRemove(attachment.id), children: _jsx(Icon, { name: "close" }) })] }));
+}
+const EMOJI_COLUMNS = 8;
+function gridColumns(cells) {
+    const first = cells[0];
+    if (first === undefined)
+        return EMOJI_COLUMNS;
+    let columns = 0;
+    for (const cell of cells) {
+        if (cell.offsetTop !== first.offsetTop)
+            break;
+        columns += 1;
+    }
+    return columns > 0 && columns < cells.length ? columns : EMOJI_COLUMNS;
+}
+function narrowViewport() {
+    return (typeof matchMedia === "function" && matchMedia("(max-width: 600px)").matches);
+}
+function EmojiPicker({ anchor, configuration, slots, onPick, onClose, }) {
+    const popover = useRef(null);
+    const search = useRef(null);
+    const grid = useRef(null);
+    const id = useId();
+    const [recent, setRecent] = useState(() => readRecentEmoji());
+    const [category, setCategory] = useState(() => recent.length > 0 ? "recent" : "smileys");
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const latestClose = useLatest(onClose);
+    const entries = useMemo(() => query.trim() !== ""
+        ? searchEmoji(query)
+        : category === "recent"
+            ? recentEmojiEntries(recent)
+            : emojiInCategory(category), [query, category, recent]);
+    const activeIndex = Math.min(active, Math.max(0, entries.length - 1));
+    useIsomorphicLayoutEffect(() => {
+        const node = popover.current;
+        if (node === null)
+            return;
+        const place = () => {
+            const target = anchor.current;
+            if (target === null)
+                return;
+            const rect = target.getBoundingClientRect();
+            const width = node.offsetWidth || 360;
+            const height = node.offsetHeight || 400;
+            const direction = getComputedStyle(target).direction === "rtl" ? "rtl" : "ltr";
+            const spot = placePopover(rect, { width, height }, { width: window.innerWidth, height: window.innerHeight }, { direction });
+            node.style.setProperty("--pmfa-pop-top", `${spot.top}px`);
+            node.style.setProperty("--pmfa-pop-left", `${spot.left}px`);
+            node.style.setProperty("--pmfa-pop-max", `${spot.maxHeight}px`);
+            node.dataset.placement = spot.placement;
+            node.removeAttribute("data-measuring");
+        };
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [anchor]);
+    useEffect(() => {
+        // On small screens the search field would raise the keyboard over the
+        // sheet, so focus goes to the sheet itself.
+        if (narrowViewport())
+            popover.current?.focus({ preventScroll: true });
+        else
+            search.current?.focus({ preventScroll: true });
+        const onPointer = (event) => {
+            const path = event.composedPath();
+            if ((popover.current !== null && path.includes(popover.current)) ||
+                (anchor.current !== null && path.includes(anchor.current)))
+                return;
+            latestClose.current(false);
+        };
+        document.addEventListener("pointerdown", onPointer, true);
+        return () => document.removeEventListener("pointerdown", onPointer, true);
+    }, [anchor, latestClose]);
+    const cells = () => [
+        ...(grid.current?.querySelectorAll(".pmfa-emoji-cell") ?? []),
+    ];
+    const focusCell = (index) => {
+        const list = cells();
+        const next = Math.max(0, Math.min(index, list.length - 1));
+        setActive(next);
+        list[next]?.focus();
+        list[next]?.scrollIntoView?.({ block: "nearest" });
+    };
+    const pick = (emoji) => {
+        setRecent(recordRecentEmoji(emoji));
+        onPick(emoji);
+    };
+    const selectTab = (next) => {
+        setCategory(next);
+        setQuery("");
+        setActive(0);
+        if (grid.current !== null)
+            grid.current.parentElement?.scrollTo?.({ top: 0 });
+    };
+    const heading = query.trim() !== ""
+        ? text(configuration, "composer.emojiSearch")
+        : text(configuration, `composer.emojiCategory.${category}`);
+    return (_jsxs("div", { ref: popover, ...slots("emojiPicker", "pmfa-popover pmfa-emoji"), role: "dialog", "aria-label": text(configuration, "composer.emojiPicker"), tabIndex: -1, "data-measuring": "", onKeyDown: (event) => {
+            if (event.key !== "Escape" || event.nativeEvent.isComposing)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            latestClose.current(true);
+        }, children: [_jsxs("div", { className: "pmfa-emoji-search", children: [_jsx(Icon, { name: "search" }), _jsx("input", { ref: search, type: "search", className: "pmfa-input", "aria-label": text(configuration, "composer.emojiSearch"), placeholder: text(configuration, "composer.emojiSearch"), value: query, "aria-controls": `${id}-panel`, onChange: (event) => {
+                            setQuery(event.currentTarget.value);
+                            setActive(0);
+                        }, onKeyDown: (event) => {
+                            if (event.key === "ArrowDown") {
+                                event.preventDefault();
+                                focusCell(0);
+                            }
+                            else if (event.key === "Enter" && entries[0] !== undefined) {
+                                event.preventDefault();
+                                pick(entries[0].emoji);
+                            }
+                        } })] }), _jsx("div", { className: "pmfa-emoji-tabs", role: "tablist", "aria-label": text(configuration, "composer.emojiCategories"), onKeyDown: (event) => {
+                    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                        return;
+                    event.preventDefault();
+                    const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                    const step = (event.key === "ArrowRight") !== rtl ? 1 : -1;
+                    const index = EMOJI_PICKER_CATEGORIES.indexOf(category);
+                    const next = EMOJI_PICKER_CATEGORIES[(index + step + EMOJI_PICKER_CATEGORIES.length) %
+                        EMOJI_PICKER_CATEGORIES.length] ?? "smileys";
+                    selectTab(next);
+                    event.currentTarget
+                        .querySelector(`[data-category="${next}"]`)
+                        ?.focus();
+                }, children: EMOJI_PICKER_CATEGORIES.map((name) => {
+                    const selected = query.trim() === "" && name === category;
+                    return (_jsx("button", { type: "button", role: "tab", className: "pmfa-emoji-tab", "data-category": name, id: `${id}-tab-${name}`, "aria-selected": selected, "aria-controls": `${id}-panel`, tabIndex: name === (query.trim() === "" ? category : "recent") ? 0 : -1, "aria-label": text(configuration, `composer.emojiCategory.${name}`), title: text(configuration, `composer.emojiCategory.${name}`), onClick: () => selectTab(name), children: _jsx("span", { "aria-hidden": "true", children: EMOJI_CATEGORY_ICONS[name] }) }, name));
+                }) }), _jsxs("div", { className: "pmfa-emoji-body", id: `${id}-panel`, role: "tabpanel", "aria-label": heading, children: [_jsx("p", { className: "pmfa-emoji-heading", "aria-hidden": "true", children: heading }), entries.length === 0 ? (_jsx("p", { className: "pmfa-emoji-empty", children: text(configuration, query.trim() === ""
+                            ? "composer.emojiNoRecent"
+                            : "composer.emojiNoResults") })) : (_jsx("div", { ref: grid, className: "pmfa-emoji-grid", role: "group", "aria-label": heading, onKeyDown: (event) => {
+                            const list = cells();
+                            const index = list.indexOf(event.target);
+                            if (index < 0)
+                                return;
+                            const columns = gridColumns(list);
+                            const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+                            const moves = {
+                                ArrowRight: rtl ? -1 : 1,
+                                ArrowLeft: rtl ? 1 : -1,
+                                ArrowDown: columns,
+                                ArrowUp: -columns,
+                                Home: -index,
+                                End: list.length - 1 - index,
+                            };
+                            const move = moves[event.key];
+                            if (move === undefined)
+                                return;
+                            event.preventDefault();
+                            if (event.key === "ArrowUp" && index < columns) {
+                                search.current?.focus();
+                                return;
+                            }
+                            focusCell(index + move);
+                        }, children: entries.map((entry, index) => (_jsx("button", { type: "button", className: "pmfa-emoji-cell", tabIndex: index === activeIndex ? 0 : -1, "aria-label": entry.name, title: entry.name, onFocus: () => setActive(index), onClick: () => pick(entry.emoji), children: entry.emoji }, `${entry.emoji}-${index}`))) }))] })] }));
+}
+const LEVEL_BARS = 28;
+function RecordingBar({ snapshot, configuration, slots, autoSend, onCancel, onStop, }) {
+    // A rolling history of input levels, newest last.
+    const [history, setHistory] = useState({ revision: snapshot.revision, levels: [] });
+    if (history.revision !== snapshot.revision) {
+        setHistory({
+            revision: snapshot.revision,
+            levels: [...history.levels, snapshot.level].slice(-LEVEL_BARS),
+        });
+    }
+    const levels = [
+        ...Array.from({
+            length: LEVEL_BARS - history.levels.length,
+        }).fill(0),
+        ...history.levels,
+    ];
+    const stopLabel = text(configuration, autoSend ? "composer.sendVoiceNote" : "composer.stopRecording");
+    return (_jsxs("div", { ...slots("recordingBar", "pmfa-recording"), role: "group", "aria-label": text(configuration, "composer.recording"), children: [_jsx("button", { type: "button", className: "pmfa-btn pmfa-btn-ghost pmfa-btn-icon pmfa-rec-cancel", "aria-label": text(configuration, "composer.cancelRecording"), title: text(configuration, "composer.cancelRecording"), onClick: onCancel, children: _jsx(Icon, { name: "trash" }) }), _jsxs("div", { className: "pmfa-recording-status", children: [_jsx("span", { className: "pmfa-rec-dot", "aria-hidden": "true" }), _jsx("span", { className: "pmfa-rec-time", role: "timer", children: formatElapsed(snapshot.elapsed) }), _jsx("span", { className: "pmfa-rec-level", role: "meter", "aria-label": text(configuration, "composer.recordingLevel"), "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(snapshot.level * 100), children: levels.map((level, index) => (_jsx("span", { style: {
+                                "--pmfa-level": String(Math.max(0.12, level)),
+                            } }, index))) })] }), _jsx("button", { type: "button", className: "pmfa-btn pmfa-btn-primary pmfa-btn-icon pmfa-send", "aria-label": stopLabel, title: stopLabel, disabled: snapshot.status !== "recording", onClick: onStop, children: _jsx(Icon, { name: autoSend ? "sendArrow" : "sent" }) })] }));
+}
+const voiceErrorKeys = {
+    "permission-denied": "composer.microphoneDenied",
+    unavailable: "composer.microphoneUnavailable",
+    failed: "composer.recordingFailed",
+};
+const isVoiceSupported = () => VoiceNoteRecorder.isSupported();
+const notSupported = () => false;
+export function ComposeBox({ controller, createController, onSent, className, classNames, attachments = true, accept, multiple = true, conversation, messages, placeholder, startActions, endActions, emoji = true, voiceNotes, voiceNoteAutoSend = true, quickReplies, onQuickReply, maxRows = 8, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const conversationSnapshot = useOptionalController(conversation);
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "composer", "pmfa-composer", className);
+    const inputRef = useRef(null);
+    const fileRef = useRef(null);
+    const emojiButtonRef = useRef(null);
+    const micRef = useRef(null);
+    const pendingCaret = useRef(undefined);
+    const menuId = useId();
+    const [dragging, setDragging] = useState(false);
+    const [rejection, setRejection] = useState(undefined);
+    const [emojiOpen, setEmojiOpen] = useState(false);
+    const [caret, setCaret] = useState(0);
+    const [dismissedText, setDismissedText] = useState(undefined);
+    const [activeOption, setActiveOption] = useState(0);
+    const [announcement, setAnnouncement] = useState("");
+    // A rejected file's message clears once the text changes, a send
+    // succeeds, or the composer resets.
+    const [previousSnapshot, setPreviousSnapshot] = useState(snapshot);
+    if (previousSnapshot !== snapshot) {
+        setPreviousSnapshot(snapshot);
+        if (rejection !== undefined && rejectionCleared(previousSnapshot, snapshot))
+            setRejection(undefined);
+    }
+    // Voice notes
+    const voiceSupported = useSyncExternalStore(NO_SUBSCRIPTION, isVoiceSupported, notSupported);
+    const voiceEnabled = (voiceNotes ?? true) && voiceSupported;
+    const recorderRef = useRef(undefined);
+    const [recorder, setRecorder] = useState(undefined);
+    const recording = useOptionalController(recorder);
+    useEffect(() => () => {
+        recorderRef.current?.dispose();
+        recorderRef.current = undefined;
+    }, []);
+    const recorderActive = recording !== undefined &&
+        (recording.status === "recording" || recording.status === "stopping");
+    const voiceError = recording?.status === "error" && recording.error !== undefined
+        ? text(configuration, voiceErrorKeys[recording.error])
+        : undefined;
+    useIsomorphicLayoutEffect(() => {
+        const input = inputRef.current;
+        if (input === null)
+            return;
+        if (!supportsFieldSizing) {
+            input.style.height = "auto";
+            input.style.height = `${input.scrollHeight + 2}px`;
+        }
+        const target = pendingCaret.current;
+        if (target !== undefined && input.value === snapshot.text) {
+            pendingCaret.current = undefined;
+            input.setSelectionRange(target, target);
+        }
+    }, [snapshot.text]);
+    const canSend = !snapshot.sending &&
+        (snapshot.text.trim() !== "" ||
+            snapshot.attachments.some(({ status }) => status === "ready"));
+    const showMic = voiceEnabled &&
+        !snapshot.sending &&
+        snapshot.text.trim() === "" &&
+        !snapshot.attachments.some(({ status }) => status === "ready");
+    const submit = () => {
+        if (!canSend)
+            return;
+        void resolved.submit().then(() => {
+            // A failed send resolves with the error in the snapshot.
+            if (resolved.getSnapshot().status !== "error")
+                onSent?.();
+        }, () => undefined);
+    };
+    const addFiles = (files) => {
+        if (files === null || files === undefined)
+            return;
+        setRejection(undefined);
+        for (const file of [...files])
+            resolved
+                .addAttachment(attachmentFromFile(file))
+                .catch((cause) => setRejection(errorText(cause)));
+    };
+    const remove = useCallback((id) => resolved.cancelAttachment(id), [resolved]);
+    const replaceText = (value, nextCaret) => {
+        pendingCaret.current = nextCaret;
+        setRejection(undefined);
+        setCaret(nextCaret);
+        resolved.setText(value);
+    };
+    const insertEmoji = (value) => {
+        const input = inputRef.current;
+        const current = resolved.getSnapshot().text;
+        const start = input?.selectionStart ?? current.length;
+        const end = input?.selectionEnd ?? start;
+        const edit = insertText(current, value, start, end);
+        replaceText(edit.text, edit.caret);
+    };
+    const closeEmoji = useCallback((restoreFocus) => {
+        setEmojiOpen(false);
+        if (restoreFocus)
+            emojiButtonRef.current?.focus();
+    }, []);
+    // Quick replies
+    const quickMatch = quickReplies !== undefined && quickReplies.length > 0 && !recorderActive
+        ? findQuickReplyQuery(snapshot.text, Math.min(caret, snapshot.text.length))
+        : undefined;
+    const options = quickMatch === undefined || quickReplies === undefined
+        ? []
+        : filterQuickReplies(quickReplies, quickMatch.query);
+    const menuOpen = options.length > 0 && dismissedText !== snapshot.text;
+    const [previousQuery, setPreviousQuery] = useState(quickMatch?.query);
+    if (previousQuery !== quickMatch?.query) {
+        setPreviousQuery(quickMatch?.query);
+        setActiveOption(0);
+    }
+    const activeIndex = Math.min(activeOption, Math.max(0, options.length - 1));
+    const chooseOption = (option) => {
+        if (quickMatch === undefined)
+            return;
+        const edit = applyQuickReply(snapshot.text, quickMatch, option);
+        replaceText(edit.text, edit.caret);
+        onQuickReply?.(option);
+        inputRef.current?.focus();
+    };
+    const startRecording = () => {
+        let active = recorderRef.current;
+        if (active === undefined) {
+            active = new VoiceNoteRecorder();
+            recorderRef.current = active;
+            setRecorder(active);
+        }
+        setEmojiOpen(false);
+        const current = active;
+        void current.start().then(() => {
+            if (current.getSnapshot().status === "recording")
+                setAnnouncement(text(configuration, "composer.recording"));
+        });
+    };
+    const cancelRecording = () => {
+        recorderRef.current?.cancel();
+        setAnnouncement(text(configuration, "composer.recordingCancelled"));
+        requestAnimationFrameSafe(() => micRef.current?.focus());
+    };
+    const stopRecording = () => {
+        const active = recorderRef.current;
+        if (active === undefined)
+            return;
+        void active.stop().then(async (file) => {
+            setAnnouncement(text(configuration, "composer.recordingStopped"));
+            requestAnimationFrameSafe(() => inputRef.current?.focus());
+            if (file === undefined)
+                return;
+            const attachment = localAttachmentFromFile(file);
+            try {
+                await resolved.addAttachment(attachment);
+            }
+            catch (cause) {
+                setRejection(errorText(cause));
+                return;
+            }
+            if (!voiceNoteAutoSend)
+                return;
+            const after = resolved.getSnapshot();
+            const added = after.attachments.find(({ id }) => id === attachment.id);
+            if (added?.status !== "ready" ||
+                after.sending ||
+                after.attachments.some(({ status }) => status !== "ready"))
+                return;
+            await resolved.submit().then(() => {
+                if (resolved.getSnapshot().status !== "error")
+                    onSent?.();
+            }, () => undefined);
+        });
+    };
+    const pool = messages ?? conversationSnapshot?.messages;
+    const replied = snapshot.replyTo === undefined
+        ? undefined
+        : pool?.find(({ id }) => id === snapshot.replyTo);
+    const error = snapshot.error ?? rejection ?? voiceError;
+    const inputSlot = slots("composerInput", "pmfa-input");
+    const combobox = quickReplies !== undefined && quickReplies.length > 0
+        ? {
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": menuOpen,
+            "aria-controls": menuId,
+            ...(menuOpen
+                ? { "aria-activedescendant": `${menuId}-${activeIndex}` }
+                : {}),
+        }
+        : {};
+    return (_jsxs("form", { ...root, "data-pmfa": "compose-box", ...(dragging ? { "data-dragging": "" } : {}), ...(recorderActive ? { "data-recording": "" } : {}), onSubmit: (event) => {
+            event.preventDefault();
+            submit();
+        }, onDragEnter: (event) => {
+            if (!attachments || !hasFiles(event))
+                return;
+            event.preventDefault();
+            setDragging(true);
+        }, onDragOver: (event) => {
+            if (!attachments || !hasFiles(event))
+                return;
+            event.preventDefault();
+            if (event.dataTransfer)
+                event.dataTransfer.dropEffect = "copy";
+        }, onDragLeave: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setDragging(false);
+        }, onDrop: (event) => {
+            if (!attachments || !hasFiles(event))
+                return;
+            event.preventDefault();
+            setDragging(false);
+            addFiles(event.dataTransfer.files);
+        }, children: [_jsx("div", { className: "pmfa-drop-hint", "aria-hidden": "true", children: text(configuration, "composer.dropHint") }), _jsx("span", { className: "pmfa-sr", "aria-live": "polite", children: announcement }), menuOpen && (_jsxs("div", { ...slots("quickReplyMenu", "pmfa-qr"), children: [_jsx("div", { className: "pmfa-qr-title", "aria-hidden": "true", children: text(configuration, "composer.quickReplies") }), _jsx("ul", { id: menuId, role: "listbox", "aria-label": text(configuration, "composer.quickReplies"), children: options.map((option, index) => (_jsxs("li", { id: `${menuId}-${index}`, role: "option", className: "pmfa-qr-option", "aria-selected": index === activeIndex, onMouseDown: (event) => event.preventDefault(), onMouseMove: () => {
+                                if (index !== activeIndex)
+                                    setActiveOption(index);
+                            }, onClick: () => chooseOption(option), children: [_jsxs("span", { className: "pmfa-qr-head", children: [_jsx("span", { className: "pmfa-qr-shortcut", children: quickReplyLabel(option) }), option.description !== undefined && (_jsx("span", { className: "pmfa-qr-description", children: option.description }))] }), _jsx("span", { className: "pmfa-qr-text", children: option.text })] }, option.id))) })] })), snapshot.replyTo !== undefined && (_jsxs("div", { ...slots("replyBanner", "pmfa-reply-banner"), children: [_jsxs("span", { className: "pmfa-reply-body", children: [_jsx("span", { className: "pmfa-reply-name", children: text(configuration, "composer.replyingTo", {
+                                    name: authorName(configuration, replied),
+                                }) }), replied !== undefined && (_jsx("span", { className: "pmfa-reply-text", children: snippet(configuration, replied) }))] }), _jsx("button", { type: "button", className: "pmfa-btn pmfa-btn-ghost pmfa-btn-icon", "aria-label": text(configuration, "composer.cancelReply"), onClick: () => {
+                            resolved.setReplyTo();
+                            inputRef.current?.focus();
+                        }, children: _jsx(Icon, { name: "close" }) })] })), snapshot.attachments.length > 0 && (_jsx("ul", { className: "pmfa-chips", "aria-label": text(configuration, "composer.attachments"), children: snapshot.attachments.map((attachment) => (_jsx(AttachmentChip, { attachment: attachment, configuration: configuration, slots: slots, onRemove: remove }, attachment.id))) })), recorderActive && recording !== undefined && (_jsx(RecordingBar, { snapshot: recording, configuration: configuration, slots: slots, autoSend: voiceNoteAutoSend, onCancel: cancelRecording, onStop: stopRecording })), _jsxs("div", { ...slots("composerToolbar", "pmfa-composer-row"), hidden: recorderActive, children: [startActions !== undefined && startActions !== null && (_jsx("div", { className: "pmfa-composer-actions pmfa-composer-start", children: startActions })), emoji && (_jsx("button", { ref: emojiButtonRef, type: "button", ...slots("emojiButton", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon pmfa-emoji-button"), "aria-label": text(configuration, "composer.emoji"), title: text(configuration, "composer.emoji"), "aria-haspopup": "dialog", "aria-expanded": emojiOpen, onClick: () => setEmojiOpen((open) => !open), children: _jsx(Icon, { name: "smiley" }) })), attachments && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", ...slots("composerAttach", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon"), "aria-label": text(configuration, "composer.attach"), title: text(configuration, "composer.attach"), onClick: () => fileRef.current?.click(), children: _jsx(Icon, { name: "attach" }) }), _jsx("input", { ref: fileRef, type: "file", className: "pmfa-sr", tabIndex: -1, "aria-hidden": "true", accept: accept, multiple: multiple, onChange: (event) => {
+                                    addFiles(event.currentTarget.files);
+                                    event.currentTarget.value = "";
+                                } })] })), _jsx("textarea", { ref: inputRef, ...inputSlot, style: {
+                            ...inputSlot.style,
+                            "--pmfa-composer-max-rows": String(Math.max(1, maxRows)),
+                        }, ...combobox, "aria-label": text(configuration, "composer.label"), rows: 1, placeholder: placeholder ?? text(configuration, "composer.placeholder"), value: snapshot.text, onChange: (event) => {
+                            setRejection(undefined);
+                            setCaret(event.currentTarget.selectionStart);
+                            resolved.setText(event.currentTarget.value);
+                        }, onSelect: (event) => setCaret(event.currentTarget.selectionStart), onPaste: (event) => {
+                            const files = event.clipboardData?.files;
+                            if (!attachments || files === undefined || files.length === 0)
+                                return;
+                            event.preventDefault();
+                            addFiles(files);
+                        }, onKeyDown: (event) => {
+                            if (event.nativeEvent.isComposing)
+                                return;
+                            if (menuOpen) {
+                                const option = options[activeIndex];
+                                if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                                    event.preventDefault();
+                                    const step = event.key === "ArrowDown" ? 1 : -1;
+                                    setActiveOption((activeIndex + step + options.length) % options.length);
+                                    return;
+                                }
+                                if ((event.key === "Enter" && !event.shiftKey) ||
+                                    event.key === "Tab") {
+                                    if (option === undefined)
+                                        return;
+                                    event.preventDefault();
+                                    chooseOption(option);
+                                    return;
+                                }
+                                if (event.key === "Escape") {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    setDismissedText(snapshot.text);
+                                    return;
+                                }
+                            }
+                            if (event.key === "Enter" && !event.shiftKey) {
+                                event.preventDefault();
+                                submit();
+                            }
+                        } }), endActions !== undefined && endActions !== null && (_jsx("div", { className: "pmfa-composer-actions pmfa-composer-end", children: endActions })), showMic ? (_jsx("button", { ref: micRef, type: "button", ...slots("voiceButton", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon pmfa-voice"), "aria-label": text(configuration, "composer.voiceNote"), title: text(configuration, "composer.voiceNote"), "aria-busy": recording?.status === "requesting", disabled: recording?.status === "requesting", onClick: startRecording, children: _jsx(Icon, { name: "mic" }) })) : (_jsx("button", { type: "submit", ...slots("composerSend", "pmfa-btn pmfa-btn-primary pmfa-btn-icon pmfa-send"), "aria-label": snapshot.sending
+                            ? text(configuration, "composer.sending")
+                            : text(configuration, "composer.send"), title: text(configuration, "composer.send"), disabled: !canSend, children: _jsx(Icon, { name: "sendArrow" }) }))] }), emojiOpen && emoji && !recorderActive && (_jsx(EmojiPicker, { anchor: emojiButtonRef, configuration: configuration, slots: slots, onPick: insertEmoji, onClose: closeEmoji })), error !== undefined && (_jsx("p", { ...slots("error", "pmfa-error"), role: "alert", children: error }))] }));
+}
+function requestAnimationFrameSafe(callback) {
+    if (typeof requestAnimationFrame === "function")
+        requestAnimationFrame(callback);
+    else
+        setTimeout(callback, 0);
+}
+function focusFirst(root) {
+    if (root === null)
+        return;
+    const target = root.querySelector("textarea") ??
+        root.querySelector(".pmfa-drawer-header button") ??
+        root;
+    target.focus({ preventScroll: true });
+}
+export function ChatDrawer({ open = true, onClose, composer, title, className, classNames, conversation, controller, createController, composerController, createComposerController, composerProps, onReply, autoFocus = false, ...viewProps }) {
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "drawer", "pmfa-drawer", className);
+    const panel = useRef(null);
+    const titleId = useId();
+    const resolved = useResolvedController(controller ?? conversation, createController);
+    const composing = useOwnedController(composerController, createComposerController);
+    const latestClose = useLatest(onClose);
+    const onKeyDown = (event) => {
+        if (event.key !== "Escape" ||
+            event.defaultPrevented ||
+            event.nativeEvent.isComposing ||
+            latestClose.current === undefined)
+            return;
+        event.preventDefault();
+        latestClose.current();
+    };
+    // Focus moves when `open` becomes true after mount, or on mount with
+    // `autoFocus`. Closing returns focus to where it was.
+    const lastOpen = useRef(undefined);
+    const moveFocus = useRef(false);
+    const latestAutoFocus = useLatest(autoFocus);
+    useEffect(() => {
+        // An effect re-run with the same `open` (StrictMode, `<Activity>`) keeps
+        // the earlier decision.
+        if (lastOpen.current !== open) {
+            moveFocus.current =
+                open &&
+                    (lastOpen.current === false ||
+                        (lastOpen.current === undefined && latestAutoFocus.current));
+            lastOpen.current = open;
+        }
+        if (!moveFocus.current || typeof document === "undefined")
+            return;
+        const previous = document.activeElement;
+        focusFirst(panel.current);
+        return () => {
+            if (previous instanceof HTMLElement && previous.isConnected)
+                previous.focus({ preventScroll: true });
+        };
+    }, [open, latestAutoFocus]);
+    const reply = useMemo(() => onReply === undefined && composing === undefined
+        ? undefined
+        : (message) => {
+            onReply?.(message);
+            if (composing !== undefined) {
+                composing.setReplyTo(message.id);
+                panel.current?.querySelector("textarea")?.focus();
+            }
+        }, [onReply, composing]);
+    if (!open)
+        return null;
+    const heading = title ?? text(configuration, "chat.title");
+    const footer = composer ??
+        (composing === undefined ? undefined : (_jsx(ComposeBox, { ...composerProps, controller: composing, conversation: resolved })));
+    return (_jsxs("aside", { ...root, ref: panel, tabIndex: -1, onKeyDown: onKeyDown, "data-pmfa": "chat-drawer", role: "dialog", "aria-modal": "false", "aria-labelledby": titleId, children: [_jsxs("header", { ...slots("drawerHeader", "pmfa-drawer-header"), children: [_jsx("h2", { ...slots("drawerTitle", "pmfa-drawer-title"), id: titleId, children: heading }), onClose !== undefined && (_jsx("button", { type: "button", ...slots("drawerClose", "pmfa-btn pmfa-btn-ghost pmfa-btn-icon"), "aria-label": text(configuration, "common.close"), onClick: onClose, children: _jsx(Icon, { name: "close" }) }))] }), _jsx(ConversationLog, { ...viewProps, ...(reply === undefined ? {} : { onReply: reply }), controller: resolved, rootProps: slots("messageList", "pmfa-list"), slots: slots }), _jsx(DrawerError, { controller: resolved, slots: slots }), footer !== undefined && (_jsx("div", { className: "pmfa-drawer-footer", children: footer }))] }));
+}
+function DrawerError({ controller, slots, }) {
+    const snapshot = useController(controller);
+    const configuration = usePolymorfa();
+    if (snapshot.status !== "error")
+        return null;
+    return (_jsx("p", { ...slots("error", "pmfa-error"), role: "alert", children: snapshot.error ?? text(configuration, "chat.loadError") }));
+}
+// ── Template builder ──────────────────────────────────────────────────
+function Field({ label, slots, children, }) {
+    return (_jsxs("label", { ...slots("field", "pmfa-field"), children: [_jsx("span", { ...slots("label", "pmfa-label"), children: label }), children] }));
+}
+export function TemplateBuilder({ controller, createController, renderPreview, className, classNames, }) {
+    const resolved = useResolvedController(controller, createController);
+    const snapshot = useController(resolved);
+    const configuration = usePolymorfa();
+    const slots = useSlots(classNames);
+    const root = useShell(slots, "templateBuilder", "pmfa-tb", className);
+    const definition = snapshot.draft?.definition;
+    const busy = snapshot.status === "saving" ||
+        snapshot.status === "previewing" ||
+        snapshot.status === "submitting";
+    const unsaved = snapshot.templateId === undefined || snapshot.dirty;
+    const input = slots("input", "pmfa-input");
+    return (_jsxs("section", { ...root, "data-pmfa": "template-builder", children: [_jsx("h2", { className: "pmfa-tb-title", children: text(configuration, "templates.title") }), _jsxs("div", { className: "pmfa-tb-grid", children: [_jsxs("div", { className: "pmfa-tb-form", children: [_jsx(Field, { label: text(configuration, "templates.name"), slots: slots, children: _jsx("input", { ...input, "data-field": "name", value: snapshot.draft?.name ?? "", onChange: (event) => resolved.setName(event.currentTarget.value) }) }), definition?.header?.format === "text" && (_jsx(Field, { label: text(configuration, "templates.header"), slots: slots, children: _jsx("input", { ...input, "data-field": "header", value: definition.header.text, onChange: (event) => resolved.updateDefinition({
+                                        header: { format: "text", text: event.currentTarget.value },
+                                    }) }) })), _jsx(Field, { label: text(configuration, "templates.body"), slots: slots, children: _jsx("textarea", { ...input, rows: 4, "data-field": "body", value: definition?.body ?? "", onChange: (event) => resolved.setBody(event.currentTarget.value) }) }), definition?.footer !== undefined && (_jsx(Field, { label: text(configuration, "templates.footer"), slots: slots, children: _jsx("input", { ...input, "data-field": "footer", value: definition.footer, onChange: (event) => resolved.updateDefinition({
+                                        footer: event.currentTarget.value,
+                                    }) }) })), (definition?.variables.length ?? 0) > 0 && (_jsxs("fieldset", { ...slots("field", "pmfa-field"), children: [_jsx("legend", { children: text(configuration, "templates.variables") }), _jsx("div", { className: "pmfa-pairs", children: definition?.variables.map((variable) => (_jsxs("label", { className: "pmfa-pair", children: [_jsx("span", { children: `{{${variable.name}}}` }), _jsx("input", { ...input, "aria-label": text(configuration, "templates.variableExample", {
+                                                        name: variable.name,
+                                                    }), value: variable.example, onChange: (event) => resolved.setVariableExample(variable.name, event.currentTarget.value) })] }, variable.name))) })] })), (definition?.buttons?.length ?? 0) > 0 && (_jsxs("fieldset", { ...slots("field", "pmfa-field"), children: [_jsx("legend", { children: text(configuration, "templates.buttons") }), _jsx("div", { className: "pmfa-pairs", children: definition?.buttons?.map((templateButton, index) => (_jsxs("label", { className: "pmfa-pair", children: [_jsx("span", { children: templateButton.type.replace("_", " ") }), _jsx("input", { ...input, "aria-label": text(configuration, "templates.buttonText", {
+                                                        index: String(index + 1),
+                                                    }), value: templateButton.text ?? "", onChange: (event) => {
+                                                        const buttons = [...(definition.buttons ?? [])];
+                                                        const current = buttons[index];
+                                                        if (current !== undefined)
+                                                            buttons[index] = {
+                                                                ...current,
+                                                                text: event.currentTarget.value,
+                                                            };
+                                                        resolved.updateDefinition({ buttons });
+                                                    } })] }, `${templateButton.type}-${index}`))) })] })), (definition?.carousel?.cards.length ?? 0) > 0 && (_jsxs("fieldset", { ...slots("field", "pmfa-field"), children: [_jsx("legend", { children: text(configuration, "templates.cards") }), definition?.carousel?.cards.map((card, index) => (_jsx("textarea", { ...input, "aria-label": text(configuration, "templates.cardBody", {
+                                            index: String(index + 1),
+                                        }), value: card.body, onChange: (event) => {
+                                            const cards = [...(definition.carousel?.cards ?? [])];
+                                            const current = cards[index];
+                                            if (current !== undefined)
+                                                cards[index] = {
+                                                    ...current,
+                                                    body: event.currentTarget.value,
+                                                };
+                                            resolved.updateDefinition({ carousel: { cards } });
+                                        } }, `card-${index}`)))] })), snapshot.localIssues.map((issue) => (_jsx("p", { ...slots("error", "pmfa-error"), role: "alert", children: issue.message }, `${issue.code}-${issue.path ?? ""}`))), snapshot.error !== undefined && (_jsx("p", { ...slots("error", "pmfa-error"), role: "alert", children: snapshot.error.message })), _jsxs("div", { ...slots("actions", "pmfa-actions"), children: [_jsx("button", { type: "button", ...slots("primaryButton", "pmfa-btn pmfa-btn-primary"), disabled: busy ||
+                                            snapshot.draft === undefined ||
+                                            snapshot.localIssues.length > 0, onClick: () => void resolved.save(), children: text(configuration, "templates.save") }), _jsx("button", { type: "button", ...slots("button", "pmfa-btn"), disabled: busy || unsaved, onClick: () => void resolved.refreshPreview(), children: text(configuration, "templates.preview") }), _jsx("button", { type: "button", ...slots("button", "pmfa-btn"), disabled: busy || unsaved, onClick: () => void resolved.submitToMeta(), children: text(configuration, "templates.submit") })] })] }), _jsx("div", { ...slots("preview", "pmfa-tb-aside"), children: snapshot.preview ? ((renderPreview?.(snapshot.preview.rendered) ?? (_jsx(TemplatePreviewOutput, { preview: snapshot.preview.rendered })))) : (_jsx("p", { className: "pmfa-hint", children: text(configuration, "templates.previewHint") })) })] })] }));
+}
+function TemplatePreviewOutput({ preview, }) {
+    return (_jsxs("output", { className: "pmfa-preview", children: [_jsxs("div", { className: "pmfa-preview-bubble", children: [preview.header?.text && (_jsx("strong", { className: "pmfa-preview-header", children: preview.header.text })), _jsx("p", { className: "pmfa-preview-body", children: preview.body }), preview.footer && (_jsx("small", { className: "pmfa-preview-footer", children: preview.footer }))] }), preview.buttons.map((templateButton, index) => (_jsx("span", { className: "pmfa-preview-button", children: templateButton.text }, `${templateButton.type}-${index}`))), preview.cards.length > 0 && (_jsx("div", { className: "pmfa-preview-cards", children: preview.cards.map((card, index) => (_jsxs("article", { className: "pmfa-preview-card", children: [_jsx("p", { className: "pmfa-preview-body", children: card.body }), card.buttons.map((templateButton, buttonIndex) => (_jsx("span", { className: "pmfa-preview-button", children: templateButton.text }, `${templateButton.type}-${buttonIndex}`)))] }, `card-${index}`))) }))] }));
+}