@ciridae/ui 0.17.0 → 1.0.1

package/dist/components/feedback-sheet.js

@@ -0,0 +1,475 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * The feedback sheet. New: what it is about, where it was sent from, what happened, whether to
+ * attach a screenshot, with numbered pointers and notes on it, and files dropped on the form,
+ * picked or pasted; the form owns its validation and the sending, sent and failed states.
+ * Sent: everything the person filed, and each item's conversation with the Ciridae team as a
+ * thread they can reply in, with the item's actions, such as withdrawing it, behind its menu.
+ * The sheet is presentational: the caller owns the requests behind `onSubmit`, `items`, `item`,
+ * `onReply` and `onWithdraw`.
+ */
+import { ArrowClockwiseIcon, ArrowLeftIcon, ChatCircleTextIcon, DotsThreeIcon, SquaresFourIcon, } from "@phosphor-icons/react";
+import { createContext, useContext, useId, useState } from "react";
+import { css, cx } from "#primitives/css";
+import { feedbackAttachmentLimits, } from "../feedback/contract.js";
+import { Button, IconButton } from "./button.js";
+import { ChatComposer, ChatThread } from "./chat.js";
+import { DateTime } from "./date-time.js";
+import { Drawer, DrawerBody, DrawerField, DrawerFooter, DrawerForm } from "./drawer.js";
+import { Dropzone, DropzoneFileList, DropzonePad } from "./dropzone.js";
+import { FeedbackScreenshot, } from "./feedback-screenshot.js";
+import { Checkbox, Textarea } from "./form-controls.js";
+import { directional, icon, Spinner } from "./icon.js";
+import { Eyebrow } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Menu } from "./menu.js";
+import { Select } from "./select.js";
+import { Skeleton } from "./skeleton.js";
+import { Status } from "./status.js";
+import { StatusBanner } from "./status-banner.js";
+import { TabsList, TabsRoot, TabsTab } from "./tabs.js";
+/** The sheet's `labels` over the locale's, for every part of the sheet. */
+const FeedbackLabelsContext = createContext(undefined);
+function useFeedbackLabels() {
+    return { ...useCiridaeLocale().labels.feedback, ...useContext(FeedbackLabelsContext) };
+}
+const FEEDBACK_KINDS = ["wrong", "idea", "question"];
+function kindOptions(labels) {
+    const kindLabels = {
+        wrong: labels.kindWrong,
+        idea: labels.kindIdea,
+        question: labels.kindQuestion,
+    };
+    return FEEDBACK_KINDS.map((value) => ({ value, label: kindLabels[value] }));
+}
+function isFeedbackKind(value) {
+    return FEEDBACK_KINDS.some((kind) => kind === value);
+}
+function typeLabel(type, labels) {
+    return { bug: labels.typeBug, feature: labels.typeFeature, general: labels.typeGeneral }[type];
+}
+function statusDisplay(status, labels) {
+    const display = {
+        received: { label: labels.statusReceived, variant: "pending" },
+        in_progress: { label: labels.statusInProgress, variant: "running" },
+        discussion_required: { label: labels.statusNeedsReply, variant: "needs-review" },
+        completed: { label: labels.statusDone, variant: "healthy" },
+        no_action: { label: labels.statusClosed, variant: "default" },
+        withdrawn: { label: labels.statusWithdrawn, variant: "archived" },
+    };
+    return display[status];
+}
+const body = css({
+    display: "flex",
+    flexDirection: "column",
+    gap: "layout.clusterGap",
+});
+const where = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    padding: "panel.default",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "action",
+    background: "bg.field",
+    color: "fg.primary",
+    textDecoration: "none",
+    "& svg": { flexShrink: "0", color: "fg.muted" },
+});
+const whereCopy = css({ display: "grid", flex: "1", gap: "layout.tightGap", minWidth: "0" });
+const whereLabel = css({
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const whereDetail = css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const message = css({ minHeight: "132px" });
+const screenshotRow = css({
+    display: "flex",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    gap: "layout.contentGap",
+});
+const screenshotCopy = css({
+    display: "grid",
+    gap: "layout.tightGap",
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const screenshotPreview = css({
+    display: "grid",
+    placeItems: "center",
+    flexShrink: "0",
+    width: "96px",
+    height: "60px",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "keycap",
+    background: "bg.field",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+});
+const sent = css({
+    display: "flex",
+    flex: "1",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "layout.clusterGap",
+    maxWidth: "320px",
+    marginInline: "auto",
+    textAlign: "center",
+});
+const sentIcon = css({
+    display: "grid",
+    placeItems: "center",
+    width: "48px",
+    height: "48px",
+    border: "1px solid token(colors.border.control)",
+    borderRadius: "round",
+    background: "bg.field",
+});
+const sentTitle = css({
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+});
+const sentActions = css({ display: "flex", gap: "layout.controlGap" });
+/* The Sent list: flush rows, the subject over its type and when it last moved, the status after. */
+const sentList = css({ display: "grid", margin: "none", padding: "none", listStyle: "none" });
+const sentRow = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr) auto",
+    alignItems: "center",
+    gap: "layout.contentGap",
+    width: "100%",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.comfortable",
+    border: "0",
+    borderBottom: "1px solid token(colors.border.subtle)",
+    background: "transparent",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _hover: { background: "bg.rowHover" },
+    _focusVisible: { focusRing: "inset" },
+});
+const sentRowCopy = css({ display: "grid", gap: "layout.tightGap", minWidth: "0" });
+const sentRowSubject = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    minWidth: "0",
+    fontSize: "body",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    "& > span": { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    // Needs a reply: the row reads unread, with the dot that marks one.
+    "[data-needs-reply] &": { fontWeight: "medium" },
+});
+const needsReplyDot = css({
+    flexShrink: "0",
+    width: "indicator.live",
+    height: "indicator.live",
+    borderRadius: "round",
+    background: "accent.red",
+});
+const sentRowMeta = css({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    color: "fg.muted",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const sentEmpty = css({
+    padding: "panel.roomy",
+    color: "fg.muted",
+    fontSize: "caption",
+    fontWeight: "medium",
+    textAlign: "center",
+});
+const padded = css({ padding: "panel.comfortable" });
+/* An item: its subject and status pinned over the thread, which scrolls; the reply below. */
+const itemHeader = css({
+    position: "sticky",
+    top: "0",
+    zIndex: "raised",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: "layout.controlGap",
+    paddingBlock: "panel.default",
+    paddingInline: "panel.default",
+    borderBottom: "1px solid token(colors.border.subtle)",
+    background: "bg.surface",
+});
+const itemTitle = css({
+    display: "grid",
+    flex: "1",
+    gap: "layout.tightGap",
+    minWidth: "0",
+    paddingBlockStart: "control.iconGap",
+});
+const itemSubject = css({
+    fontSize: "body",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+    lineHeight: "tight",
+    overflowWrap: "anywhere",
+});
+const itemStatus = css({ flexShrink: "0", paddingBlockStart: "control.iconGap" });
+const itemFoot = css({
+    display: "grid",
+    flexShrink: "0",
+    gap: "layout.controlGap",
+    padding: "panel.default",
+    borderTop: "1px solid token(colors.border.control)",
+});
+const placeholderLines = css({ display: "grid", gap: "layout.controlGap" });
+/**
+ * The description to file: what happened, then each screenshot pointer's note, numbered, with
+ * where it sits on the image, for a backend that takes no annotations of its own.
+ */
+export function formatFeedbackDescription({ whatHappened, annotations }) {
+    if (annotations.length === 0)
+        return whatHappened;
+    const percent = (fraction) => `${Math.round(fraction * 100)}%`;
+    const lines = annotations.map((pointer, index) => {
+        const at = `(${percent(pointer.x)}, ${percent(pointer.y)})`;
+        return `${index + 1}. ${pointer.note ? `${pointer.note} ${at}` : at}`;
+    });
+    return `${whatHappened}\n\nScreenshot pointers:\n${lines.join("\n")}`;
+}
+/** The page's address as the reporter knows it: host, path and hash, without the scheme. */
+function linkText(href) {
+    return href.replace(/^[a-z]+:\/\//i, "");
+}
+/** The sheet's form, body and footer, for a `Drawer` that holds more than the form. */
+export function FeedbackForm({ where: about, screenshot, onSubmit, errorDetail, onClose, }) {
+    const { formatFileSize, labels: locale } = useCiridaeLocale();
+    const labels = useFeedbackLabels();
+    const [kind, setKind] = useState("wrong");
+    const [whatHappened, setWhatHappened] = useState("");
+    const [includeScreenshot, setIncludeScreenshot] = useState(true);
+    const [pointers, setPointers] = useState([]);
+    const [attachments, setAttachments] = useState([]);
+    const [attachmentError, setAttachmentError] = useState(null);
+    const [validation, setValidation] = useState(null);
+    const [sendState, setSendState] = useState({ status: "idle" });
+    const messageErrorId = useId();
+    const submitting = sendState.status === "submitting";
+    const reset = () => {
+        setKind("wrong");
+        setWhatHappened("");
+        setIncludeScreenshot(true);
+        setPointers([]);
+        setAttachments([]);
+        setAttachmentError(null);
+        setValidation(null);
+        setSendState({ status: "idle" });
+    };
+    // Keeps what fits the limits and names the first file or limit that did not.
+    const addAttachments = (files) => {
+        const { count, bytes } = feedbackAttachmentLimits;
+        const empty = files.find((file) => file.size === 0);
+        const oversize = files.find((file) => file.size > bytes);
+        const fitting = files.filter((file) => file.size > 0 && file.size <= bytes);
+        const added = fitting.slice(0, Math.max(0, count - attachments.length));
+        setAttachments([...attachments, ...added]);
+        setAttachmentError(oversize
+            ? labels.fileTooLarge(oversize.name, formatFileSize(bytes))
+            : empty
+                ? labels.fileEmpty(empty.name)
+                : added.length < fitting.length
+                    ? labels.tooManyFiles(count)
+                    : null);
+    };
+    const removeAttachment = (removed) => {
+        setAttachments(attachments.filter((file) => file !== removed));
+        setAttachmentError(null);
+    };
+    const send = async () => {
+        if (!whatHappened.trim()) {
+            setValidation(labels.needsWords);
+            return;
+        }
+        setValidation(null);
+        setSendState({ status: "submitting" });
+        try {
+            const { reference } = await onSubmit({
+                kind,
+                whatHappened: whatHappened.trim(),
+                includeScreenshot,
+                annotations: includeScreenshot
+                    ? pointers.map((pointer) => ({ x: pointer.x, y: pointer.y, note: pointer.note.trim() }))
+                    : [],
+                attachments,
+            });
+            setSendState({ status: "sent", reference });
+        }
+        catch (error) {
+            setSendState({ status: "error", error });
+        }
+    };
+    if (sendState.status === "sent") {
+        return (_jsx(DrawerBody, { className: body, children: _jsxs("div", { className: sent, children: [_jsx("span", { className: sentIcon, children: _jsx(ChatCircleTextIcon, { className: icon({ size: "medium" }) }) }), _jsxs("div", { className: css({ display: "grid", gap: "layout.controlGap" }), children: [_jsx("span", { className: sentTitle, children: labels.sent }), _jsx(Eyebrow, { children: sendState.reference })] }), _jsxs("span", { className: sentActions, children: [_jsx(Button, { size: "medium", variant: "secondary", onClick: reset, children: labels.sendAnother }), _jsx(Button, { size: "medium", onClick: onClose, children: locale.common.done })] })] }) }));
+    }
+    const whereContent = (_jsxs(_Fragment, { children: [about.icon ?? _jsx(SquaresFourIcon, { className: icon({ size: "small" }) }), _jsxs("span", { className: whereCopy, children: [_jsx("span", { className: whereLabel, children: about.label }), about.detail && _jsx("span", { className: whereDetail, children: about.detail }), about.href && _jsx("span", { className: whereDetail, children: linkText(about.href) })] })] }));
+    return (_jsxs(DrawerForm, { noValidate: true, onSubmit: (event) => {
+            event.preventDefault();
+            void send();
+        }, children: [_jsxs(Dropzone, { render: _jsx(DrawerBody, { className: body }), disabled: submitting, onFiles: addAttachments, children: [sendState.status === "error" && (_jsx(FailedNotice, { title: labels.sendFailed, children: errorDetail?.(sendState.error) })), _jsx(DrawerField, { label: labels.type, children: _jsx(Select, { label: labels.type, size: "medium", options: kindOptions(labels), value: kind, disabled: submitting, onValueChange: (value) => isFeedbackKind(value) && setKind(value) }) }), _jsx(DrawerField, { label: labels.where, children: _jsx("div", { className: where, children: whereContent }) }), _jsx(DrawerField, { label: labels.whatHappened, error: validation, children: _jsx(Textarea, { className: message, value: whatHappened, placeholder: labels.whatHappenedPlaceholder, "aria-invalid": validation ? true : undefined, "aria-describedby": validation ? messageErrorId : undefined, disabled: submitting, onChange: (event) => setWhatHappened(event.target.value) }) }), _jsxs("div", { className: screenshotRow, children: [_jsx(Checkbox, { checked: includeScreenshot, disabled: submitting, onCheckedChange: (checked) => setIncludeScreenshot(checked), children: _jsx("span", { className: screenshotCopy, children: labels.includeScreenshot }) }), screenshot ? (_jsx(FeedbackScreenshot, { src: screenshot, pointers: pointers, onPointersChange: setPointers, disabled: submitting || !includeScreenshot })) : (_jsx("span", { className: screenshotPreview, children: labels.preview }))] }), _jsxs(DrawerField, { label: labels.attachments, error: attachmentError, children: [_jsx(DropzoneFileList, { files: attachments, pending: submitting, disabled: submitting, onRemove: removeAttachment }), _jsx(DropzonePad, {})] })] }), _jsxs(DrawerFooter, { children: [_jsx(Button, { size: "medium", variant: "secondary", disabled: submitting, onClick: onClose, children: locale.common.cancel }), _jsx(Button, { type: "submit", size: "medium", loading: submitting, icon: sendState.status === "error" ? (_jsx(ArrowClockwiseIcon, { className: icon({ size: "small" }) })) : undefined, children: submitting
+                            ? labels.sending
+                            : sendState.status === "error"
+                                ? locale.common.tryAgain
+                                : labels.send })] })] }));
+}
+/** A failed request's notice: its title, then what the caller adds, such as the error ID. */
+function FailedNotice({ title, children, action, }) {
+    return _jsx(StatusBanner, { tone: "danger", title: title, description: children, action: action });
+}
+/** The floating feedback sheet. Closing it drops the draft and the open item. */
+export function FeedbackSheet({ labels, ...props }) {
+    return (_jsx(FeedbackLabelsContext, { value: labels, children: _jsx(FeedbackSheetContent, { ...props }) }));
+}
+function FeedbackSheetContent({ open, onOpenChange, actions, sent, errorDetail, ...formProps }) {
+    const labels = useFeedbackLabels();
+    const [tab, setTab] = useState("new");
+    const [openItemId, setOpenItemId] = useState(null);
+    const showSent = tab === "sent" && sent !== undefined;
+    const close = () => {
+        onOpenChange(false);
+        setOpenItemId(null);
+    };
+    return (_jsx(Drawer, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), title: showSent ? labels.sentTitle : labels.sendTitle, icon: _jsx(ChatCircleTextIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: _jsxs(_Fragment, { children: [sent && (_jsx(TabsRoot, { value: tab, onValueChange: (value) => {
+                        setTab(value);
+                        setOpenItemId(null);
+                    }, children: _jsxs(TabsList, { variant: "contained", children: [_jsx(TabsTab, { value: "new", children: labels.newTab }), _jsx(TabsTab, { value: "sent", children: labels.sentTab })] }) })), actions] }), children: !showSent ? (_jsx(FeedbackForm, { ...formProps, errorDetail: errorDetail, onClose: close })) : openItemId === null ? (_jsx(SentList, { items: sent.items, errorDetail: errorDetail, onOpen: (feedbackId) => {
+                sent.onOpenItem(feedbackId);
+                setOpenItemId(feedbackId);
+            } })) : (_jsx(SentItem, { feedbackId: openItemId, item: sent.item, errorDetail: errorDetail, onReply: sent.onReply, onWithdraw: sent.onWithdraw, onBack: () => setOpenItemId(null) }, openItemId)) }));
+}
+const placeholderWidths = ["58%", "42%", "50%"];
+function SentList({ items, errorDetail, onOpen, }) {
+    const labels = useFeedbackLabels();
+    const { common } = useCiridaeLocale().labels;
+    if (items.status === "error") {
+        return (_jsx(DrawerBody, { children: _jsx(FailedNotice, { title: labels.loadListFailed, action: _jsx("button", { type: "button", onClick: items.retry, children: common.tryAgain }), children: errorDetail?.(items.error) }) }));
+    }
+    if (items.status === "loading") {
+        return (_jsx(DrawerBody, { flush: true, children: _jsx("ul", { className: sentList, "aria-busy": "true", children: placeholderWidths.map((width) => (_jsxs("li", { className: sentRow, children: [_jsxs("span", { className: sentRowCopy, children: [_jsx(Skeleton, { shape: "text", style: { width } }), _jsx(Skeleton, { shape: "text", style: { width: "30%" } })] }), _jsx(Skeleton, { shape: "text", style: { width: 64 } })] }, width))) }) }));
+    }
+    if (items.data.length === 0) {
+        return (_jsx(DrawerBody, { flush: true, children: _jsx("p", { className: sentEmpty, children: labels.noneSent }) }));
+    }
+    return (_jsx(DrawerBody, { flush: true, children: _jsx("ul", { className: sentList, children: items.data.map((item) => {
+                const needsReply = item.status === "discussion_required";
+                return (_jsx("li", { children: _jsxs("button", { type: "button", className: sentRow, "data-needs-reply": needsReply ? "" : undefined, onClick: () => onOpen(item.id), children: [_jsxs("span", { className: sentRowCopy, children: [_jsxs("span", { className: sentRowSubject, children: [needsReply && _jsx("span", { className: needsReplyDot, "aria-hidden": "true" }), _jsx("span", { children: item.subject })] }), _jsxs("span", { className: sentRowMeta, children: [typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt_epoch_milliseconds })] })] }), _jsx(Status, { variant: statusDisplay(item.status, labels).variant, children: statusDisplay(item.status, labels).label })] }) }, item.id));
+            }) }) }));
+}
+/* What the thread shows in time order: the description, each status change, each message. */
+function listThreadEntries(item, labels) {
+    const entries = [
+        {
+            kind: "message",
+            id: "description",
+            side: "user",
+            at: item.createdAt_epoch_milliseconds,
+            body: item.description,
+            attachments: item.attachments,
+        },
+        ...item.statusTimeline.map((event) => ({
+            kind: "line",
+            id: event.id,
+            at: event.createdAt_epoch_milliseconds,
+            text: (_jsxs(_Fragment, { children: [statusDisplay(event.status, labels).label, " \u00B7", " ", _jsx(DateTime, { value: event.createdAt_epoch_milliseconds })] })),
+        })),
+        ...item.messages.map((message) => {
+            const fromReporter = message.author.role === "reporter";
+            return {
+                kind: "message",
+                id: message.id,
+                side: fromReporter ? "user" : "assistant",
+                at: message.createdAt_epoch_milliseconds,
+                body: message.body,
+                author: fromReporter ? undefined : { name: message.author.name },
+            };
+        }),
+    ];
+    return entries.sort((earlier, later) => earlier.at - later.at);
+}
+function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack, }) {
+    const labels = useFeedbackLabels();
+    const { common } = useCiridaeLocale().labels;
+    const [draft, setDraft] = useState("");
+    const [reply, setReply] = useState({ status: "idle" });
+    const [withdraw, setWithdraw] = useState({ status: "idle" });
+    // The item the caller last opened is this one only once its load carries this id.
+    const loaded = item?.status === "loaded" && item.data.id === feedbackId ? item.data : null;
+    const entries = loaded ? listThreadEntries(loaded, labels) : [];
+    if (reply.status === "sending") {
+        entries.push({
+            kind: "message",
+            id: "sending",
+            side: "user",
+            at: reply.at,
+            body: reply.body,
+            sending: true,
+        });
+    }
+    const back = (_jsx(IconButton, { "aria-label": labels.back, variant: "ghost", size: "small", onClick: onBack, children: _jsx(ArrowLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }));
+    const actions = [
+        { label: labels.copyId, onSelect: () => void navigator.clipboard.writeText(feedbackId) },
+    ];
+    if (loaded?.canWithdraw) {
+        actions.push({
+            label: labels.withdraw,
+            variant: "danger",
+            disabled: reply.status === "sending",
+            onSelect: () => void sendWithdraw(),
+        });
+    }
+    const sendReply = async (body) => {
+        setReply({ status: "sending", body, at: Date.now() });
+        try {
+            await onReply(feedbackId, body);
+            setReply({ status: "idle" });
+        }
+        catch (error) {
+            setDraft(body);
+            setReply({ status: "failed", error });
+        }
+    };
+    const sendWithdraw = async () => {
+        setWithdraw({ status: "pending" });
+        try {
+            await onWithdraw(feedbackId);
+            setWithdraw({ status: "idle" });
+        }
+        catch (error) {
+            setWithdraw({ status: "failed", error });
+        }
+    };
+    if (item?.status === "error") {
+        return (_jsxs(DrawerBody, { flush: true, children: [_jsx("div", { className: itemHeader, children: back }), _jsx("div", { className: padded, children: _jsx(FailedNotice, { title: labels.loadItemFailed, action: _jsx("button", { type: "button", onClick: item.retry, children: common.tryAgain }), children: errorDetail?.(item.error) }) })] }));
+    }
+    if (!loaded) {
+        return (_jsxs(DrawerBody, { flush: true, "aria-busy": "true", children: [_jsxs("div", { className: itemHeader, children: [back, _jsxs("span", { className: itemTitle, children: [_jsx(Skeleton, { shape: "text", style: { width: "60%" } }), _jsx(Skeleton, { shape: "text", style: { width: "30%" } })] })] }), _jsx("div", { className: padded, children: _jsxs("span", { className: placeholderLines, children: [_jsx(Skeleton, { shape: "text" }), _jsx(Skeleton, { shape: "text", style: { width: "80%" } }), _jsx(Skeleton, { shape: "text", style: { width: "50%" } })] }) })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(DrawerBody, { flush: true, children: [_jsxs("div", { className: itemHeader, children: [back, _jsxs("span", { className: itemTitle, children: [_jsx("span", { className: itemSubject, children: loaded.subject }), _jsxs("span", { className: sentRowMeta, children: [typeLabel(loaded.type, labels), " \u00B7", " ", _jsx(DateTime, { value: loaded.createdAt_epoch_milliseconds })] })] }), _jsx(Status, { className: itemStatus, variant: statusDisplay(loaded.status, labels).variant, children: statusDisplay(loaded.status, labels).label }), _jsx(Menu, { align: "end", items: actions, trigger: _jsx(IconButton, { "aria-label": labels.actions, variant: "ghost", size: "small", disabled: withdraw.status === "pending", children: withdraw.status === "pending" ? (_jsx(Spinner, { label: labels.withdrawing })) : (_jsx(DotsThreeIcon, { className: icon({ size: "small" }) })) }) })] }), _jsx(ChatThread, { entries: entries })] }), (loaded.canReply || reply.status === "failed" || withdraw.status === "failed") && (_jsxs("div", { className: itemFoot, children: [reply.status === "failed" && (_jsx(FailedNotice, { title: labels.replyFailed, children: errorDetail?.(reply.error) })), withdraw.status === "failed" && (_jsx(FailedNotice, { title: labels.withdrawFailed, children: errorDetail?.(withdraw.error) })), loaded.canReply && (_jsx(ChatComposer, { variant: "sheet", placeholder: labels.reply, ariaLabel: labels.reply, submitLabel: labels.sendReply, value: draft, onValueChange: setDraft, sendDisabled: reply.status === "sending", onSend: (body) => void sendReply(body.trim()) }))] }))] }));
+}

package/dist/components/field-context.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What a labelled field tells the control inside it: the id its `<label htmlFor>` points at, the
+ * id of the helper or error under it, and whether it is invalid. `Input`, `Textarea`, `Select` and
+ * `Combobox` read it, so a field's label, help and error reach assistive tech with no wiring.
+ */
+export type FieldControl = {
+    controlId: string;
+    descriptionId?: string;
+    invalid: boolean;
+};
+export declare const FieldControlContext: import("@types/react").Context<FieldControl | null>;
+/** The ids and state a control takes from its field; its own props win. */
+export declare function useFieldControl(own: {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+}): {
+    id: string | undefined;
+    "aria-describedby": string | undefined;
+    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+};
+/** Whether the control sits in a labelled field, so it leaves its own fallback name off. */
+export declare function useInField(): boolean;

package/dist/components/field-context.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+export const FieldControlContext = createContext(null);
+/** The ids and state a control takes from its field; its own props win. */
+export function useFieldControl(own) {
+    const field = useContext(FieldControlContext);
+    return {
+        id: own.id ?? field?.controlId,
+        "aria-describedby": own["aria-describedby"] ?? field?.descriptionId,
+        "aria-invalid": own["aria-invalid"] ?? (field?.invalid || undefined),
+    };
+}
+/** Whether the control sits in a labelled field, so it leaves its own fallback name off. */
+export function useInField() {
+    return useContext(FieldControlContext) !== null;
+}

package/dist/components/filter-bar.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { useCiridaeLocale } from "./locale.js";
+export type FilterFieldKind = "text" | "select" | "multi" | "date" | "number";
+export type FilterOperator = "is" | "is_not" | "is_any_of" | "is_none_of" | "contains" | "does_not_contain" | "equals" | "greater_than" | "less_than" | "between" | "before" | "after";
+export type FilterOption = {
+    value: string;
+    label: string;
+    icon?: ReactNode;
+    count?: ReactNode;
+};
+/** A field a list can be filtered by. Dates are `yyyy-mm-dd` strings. */
+export type FilterField = {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    kind: FilterFieldKind;
+    /** The values to pick from; a `number` or `date` field with options picks one of them. */
+    options?: readonly FilterOption[];
+    /** The operators the builder offers, the first the default; each kind has its own by default. */
+    operators?: readonly FilterOperator[];
+    /** The heading the builder's field list groups this field under. */
+    group?: string;
+};
+/** A filter set on a field. An empty `values` sets nothing. */
+export type FilterValue = {
+    field: string;
+    operator: FilterOperator;
+    values: readonly string[];
+};
+export declare const defaultFilterOperators: Record<FilterFieldKind, readonly FilterOperator[]>;
+export declare function operatorsOf(field: FilterField): readonly FilterOperator[];
+/** `filters` with `filter` in its field's place, or without that field when it sets nothing. */
+export declare function replaceFilter(filters: readonly FilterValue[], filter: FilterValue): FilterValue[];
+/**
+ * Whether one value passes a filter: a string or number, a list of them (any may match), or a
+ * `yyyy-mm-dd` date. A filter without values passes everything.
+ */
+export declare function matchesFilter(value: string | number | readonly (string | number)[] | null | undefined, filter: FilterValue): boolean;
+/** How a filter reads on its chip: the operator, then its values by their labels. */
+export declare function describeFilter(field: FilterField, filter: FilterValue, locale: Pick<ReturnType<typeof useCiridaeLocale>, "labels" | "formatDate">): {
+    operator: string;
+    values: string;
+};
+/** One set filter: the field and operator muted, its values in full; the text reopens it. */
+export declare function FilterChip({ label, icon: fieldIcon, operator, values, onEdit, onRemove, className, ...props }: Omit<ComponentProps<"span">, "children"> & {
+    label: string;
+    icon?: ReactNode;
+    operator: ReactNode;
+    values: ReactNode;
+    onEdit?: () => void;
+    onRemove: () => void;
+}): import("@types/react").JSX.Element;
+/**
+ * The set filters as chips, Clear all, and the Add filter builder: pick a field, then its operator
+ * and values, which apply as they are picked. Pressing a chip reopens the builder on its field.
+ * `children` sit after Add filter, such as the list's search. Controlled with `value` /
+ * `onValueChange`, and the builder's `open` / `onOpenChange` when the page opens it too.
+ */
+export declare function FilterBar({ fields, value, defaultValue, onValueChange, open: ownOpen, onOpenChange, children, className, ...props }: Omit<ComponentProps<"div">, "defaultValue"> & {
+    fields: readonly FilterField[];
+    value?: readonly FilterValue[];
+    defaultValue?: readonly FilterValue[];
+    onValueChange?: (value: FilterValue[]) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): import("@types/react").JSX.Element;
+/**
+ * One field's operator and values, reporting every change so the list follows along. `onBack`
+ * adds the way back to the builder's field list; without it the field is fixed, as under a
+ * column head.
+ */
+export declare function FilterValueEditor({ field, value, onChange, onBack, }: {
+    field: FilterField;
+    value: FilterValue | undefined;
+    onChange: (filter: FilterValue) => void;
+    onBack?: () => void;
+}): import("@types/react").JSX.Element;