@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/feedback-sheet.js

@@ -3,23 +3,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * 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`.
+ * Tickets: 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. For
+ * an operator it lists everyone's instead, filtered (their own among the filters) and searched,
+ * each item the same thread with a status to set. The sheet is presentational: the caller owns the requests behind
+ * `onSubmit`, `sent` and `operator`; `useFeedbackOperatorSheet` builds `operator` from the API.
  */
 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 { feedbackAttachmentLimits, feedbackStatusSchema, feedbackTypeSchema, } from "../feedback/contract.js";
+import { feedbackTriageStatusSchema, } from "../feedback/operator-contract.js";
 import { Button, IconButton } from "./button.js";
 import { ChatComposer, ChatThread } from "./chat.js";
+import { useCopy } from "./copyable-id.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 { FilterBar, matchesFilter } from "./filter-bar.js";
 import { Checkbox, Textarea } from "./form-controls.js";
 import { directional, icon, Spinner } from "./icon.js";
+import { SearchInput } from "./input.js";
 import { Eyebrow } from "./layout.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
@@ -205,6 +210,11 @@ const sentEmpty = css({
     textAlign: "center",
 });
 const padded = css({ padding: "panel.comfortable" });
+const listToolbar = css({
+    paddingBlock: "panel.compact",
+    paddingInline: "panel.comfortable",
+    borderBottom: "1px solid token(colors.border.subtle)",
+});
 /* An item: its subject and status pinned over the thread, which scrolls; the reply below. */
 const itemHeader = css({
     position: "sticky",
@@ -347,25 +357,39 @@ function FailedNotice({ title, children, action, }) {
 export function FeedbackSheet({ labels, ...props }) {
     return (_jsx(FeedbackLabelsContext, { value: labels, children: _jsx(FeedbackSheetContent, { ...props }) }));
 }
-function FeedbackSheetContent({ open, onOpenChange, actions, sent, errorDetail, ...formProps }) {
+function FeedbackSheetContent({ open, onOpenChange, actions, sent, operator, errorDetail, ...formProps }) {
     const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
     const [tab, setTab] = useState("new");
     const [openItemId, setOpenItemId] = useState(null);
-    const showSent = tab === "sent" && sent !== undefined;
+    const showAll = tab === "tickets" && operator !== undefined;
+    const showSent = tab === "tickets" && !showAll && 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) => {
+    const back = () => setOpenItemId(null);
+    return (_jsx(Drawer, { open: open, onOpenChange: (next) => (next ? onOpenChange(true) : close()), title: showAll ? operatorLabels.allTitle : showSent ? labels.sentTitle : labels.sendTitle, icon: _jsx(ChatCircleTextIcon, { className: icon({ size: "small" }), weight: "fill" }), actions: _jsxs(_Fragment, { children: [(sent || operator) && (_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) => {
+                    }, children: _jsxs(TabsList, { variant: "contained", children: [_jsx(TabsTab, { value: "new", children: labels.newTab }), _jsx(TabsTab, { value: "tickets", children: labels.ticketsTab })] }) })), actions] }), children: showAll ? (openItemId === null ? (_jsx(OperatorList, { operator: operator, ownIds: sent?.items.status === "loaded"
+                ? new Set(sent.items.data.map((item) => item.id))
+                : undefined, errorDetail: errorDetail, onOpen: (feedbackId) => {
+                operator.onOpenItem(feedbackId);
+                setOpenItemId(feedbackId);
+            } })) : (_jsx(OperatorItem, { feedbackId: openItemId, operator: operator, errorDetail: errorDetail, onBack: back }, openItemId))) : !showSent ? (_jsx(FeedbackForm, { ...formProps, errorDetail: errorDetail, onClose: close })) : openItemId === null ? (_jsx(FeedbackList, { items: sent.items, rows: (items) => items.map((item) => ({
+                id: item.id,
+                subject: item.subject,
+                status: item.status,
+                meta: (_jsxs(_Fragment, { children: [typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt_epoch_milliseconds })] })),
+            })), empty: labels.noneSent, 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)) }));
+            } })) : (_jsx(SentItem, { feedbackId: openItemId, item: sent.item, errorDetail: errorDetail, onReply: sent.onReply, onWithdraw: sent.onWithdraw, onBack: back }, openItemId)) }));
 }
 const placeholderWidths = ["58%", "42%", "50%"];
-function SentList({ items, errorDetail, onOpen, }) {
+/** A list of feedback rows: loading, failed, empty, or each row's subject, meta and status. */
+function FeedbackList({ items, rows, empty, toolbar, errorDetail, onOpen, }) {
     const labels = useFeedbackLabels();
     const { common } = useCiridaeLocale().labels;
     if (items.status === "error") {
@@ -374,13 +398,68 @@ function SentList({ items, errorDetail, onOpen, }) {
     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));
-            }) }) }));
+    const shown = rows(items.data);
+    return (_jsxs(DrawerBody, { flush: true, children: [toolbar, shown.length === 0 ? (_jsx("p", { className: sentEmpty, children: empty })) : (_jsx("ul", { className: sentList, children: shown.map((row) => {
+                    const needsReply = row.status === "discussion_required";
+                    const display = statusDisplay(row.status, labels);
+                    return (_jsx("li", { children: _jsxs("button", { type: "button", className: sentRow, "data-needs-reply": needsReply ? "" : undefined, onClick: () => onOpen(row.id), children: [_jsxs("span", { className: sentRowCopy, children: [_jsxs("span", { className: sentRowSubject, children: [needsReply && _jsx("span", { className: needsReplyDot, "aria-hidden": "true" }), _jsx("span", { children: row.subject })] }), _jsx("span", { className: sentRowMeta, children: row.meta })] }), _jsx(Status, { variant: display.variant, children: display.label })] }) }, row.id));
+                }) }))] }));
+}
+/** Everyone's feedback, latest change first, narrowed by status, type and a search. */
+function OperatorList({ operator, ownIds, errorDetail, onOpen, }) {
+    const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
+    const [filters, setFilters] = useState([]);
+    const [search, setSearch] = useState("");
+    const query = search.trim().toLowerCase();
+    const fields = [
+        ...(ownIds
+            ? [
+                {
+                    key: "reporter",
+                    label: operatorLabels.reporter,
+                    kind: "multi",
+                    options: [{ value: "mine", label: operatorLabels.mine }],
+                },
+            ]
+            : []),
+        {
+            key: "status",
+            label: operatorLabels.status,
+            kind: "multi",
+            options: feedbackStatusSchema.options.map((value) => ({
+                value,
+                label: statusDisplay(value, labels).label,
+            })),
+        },
+        {
+            key: "type",
+            label: operatorLabels.type,
+            kind: "multi",
+            options: feedbackTypeSchema.options.map((value) => ({
+                value,
+                label: typeLabel(value, labels),
+            })),
+        },
+    ];
+    return (_jsx(FeedbackList, { items: operator.items, rows: (items) => items
+            .filter((item) => filters.every((filter) => matchesFilter(filter.field === "reporter"
+            ? ownIds?.has(item.id)
+                ? "mine"
+                : "others"
+            : filter.field === "status"
+                ? item.status
+                : item.type, filter)) &&
+            (query === "" ||
+                [item.subject, item.description, item.reporterEmail].some((value) => value?.toLowerCase().includes(query))))
+            // ISO timestamps in one format sort as text.
+            .sort((left, right) => right.updatedAt.localeCompare(left.updatedAt))
+            .map((item) => ({
+            id: item.id,
+            subject: item.subject,
+            status: item.status,
+            meta: (_jsxs(_Fragment, { children: [item.reporterEmail ?? operatorLabels.reporter, " \u00B7 ", typeLabel(item.type, labels), " \u00B7", " ", _jsx(DateTime, { value: item.updatedAt })] })),
+        })), empty: filters.length > 0 || query !== "" ? operatorLabels.noMatches : operatorLabels.noneReceived, toolbar: _jsx(FilterBar, { className: listToolbar, fields: fields, value: filters, onValueChange: setFilters, children: _jsx(SearchInput, { variant: "ghost", "aria-label": operatorLabels.search, placeholder: operatorLabels.search, value: search, onValueCommit: setSearch }) }), errorDetail: errorDetail, onOpen: onOpen }));
 }
 /* What the thread shows in time order: the description, each status change, each message. */
 function listThreadEntries(item, labels) {
@@ -413,37 +492,60 @@ function listThreadEntries(item, labels) {
     ];
     return entries.sort((earlier, later) => earlier.at - later.at);
 }
-function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack, }) {
+/**
+ * The operator's side of the same thread: the reporter's description and messages across from
+ * them, their own team's replies on their side.
+ */
+function listOperatorThreadEntries(item, reporter) {
+    const entries = [
+        {
+            kind: "message",
+            id: "description",
+            side: "assistant",
+            author: { name: reporter },
+            at: Date.parse(item.createdAt),
+            body: item.description,
+            attachments: item.attachments,
+        },
+        ...item.messages.map((message) => {
+            const fromReporter = message.author.role === "reporter";
+            return {
+                kind: "message",
+                id: message.id,
+                side: fromReporter ? "assistant" : "user",
+                author: fromReporter ? { name: message.author.name } : undefined,
+                at: message.createdAt_epoch_milliseconds,
+                body: message.body,
+            };
+        }),
+    ];
+    return entries.sort((earlier, later) => earlier.at - later.at);
+}
+/** Runs `action`, reporting it pending, then idle, or failed with its error. */
+function usePendingAction(action) {
+    const [state, setState] = useState({ status: "idle" });
+    const run = async (input) => {
+        setState({ status: "pending" });
+        try {
+            await action(input);
+            setState({ status: "idle" });
+        }
+        catch (error) {
+            setState({ status: "failed", error });
+        }
+    };
+    return { state, run: (input) => void run(input) };
+}
+/**
+ * One item as a thread: its header pinned over the conversation, then the failures and the reply
+ * below. Loading and failing to load keep the back button.
+ */
+function FeedbackThreadItem({ feedbackId, item, loaded, headerEnd, notices, replyDisabled, errorDetail, onReply, 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 {
@@ -455,21 +557,80 @@ function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack,
             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()) }))] }))] }));
+    const entries = reply.status === "sending"
+        ? [
+            ...loaded.entries,
+            {
+                kind: "message",
+                id: "sending",
+                side: "user",
+                at: reply.at,
+                body: reply.body,
+                sending: true,
+            },
+        ]
+        : loaded.entries;
+    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 }), _jsx("span", { className: sentRowMeta, children: loaded.meta })] }), headerEnd] }), _jsx(ChatThread, { entries: entries })] }), (loaded.canReply || reply.status === "failed" || notices) && (_jsxs("div", { className: itemFoot, children: [reply.status === "failed" && (_jsx(FailedNotice, { title: labels.replyFailed, children: errorDetail?.(reply.error) })), notices, loaded.canReply && (_jsx(ChatComposer, { variant: "sheet", placeholder: labels.reply, ariaLabel: labels.reply, submitLabel: labels.sendReply, value: draft, onValueChange: setDraft, sendDisabled: replyDisabled || reply.status === "sending", onSend: (body) => void sendReply(body.trim()) }))] }))] }));
+}
+function SentItem({ feedbackId, item, errorDetail, onReply, onWithdraw, onBack, }) {
+    const labels = useFeedbackLabels();
+    const withdraw = usePendingAction(() => onWithdraw(feedbackId));
+    const copyId = useCopy(feedbackId);
+    // 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 actions = [{ label: labels.copyId, onSelect: copyId.copy }];
+    if (loaded?.canWithdraw) {
+        actions.push({
+            label: labels.withdraw,
+            variant: "danger",
+            onSelect: () => withdraw.run(undefined),
+        });
+    }
+    const display = loaded && statusDisplay(loaded.status, labels);
+    return (_jsx(FeedbackThreadItem, { feedbackId: feedbackId, item: item, loaded: loaded && {
+            subject: loaded.subject,
+            meta: (_jsxs(_Fragment, { children: [typeLabel(loaded.type, labels), " \u00B7", " ", _jsx(DateTime, { value: loaded.createdAt_epoch_milliseconds })] })),
+            entries: listThreadEntries(loaded, labels),
+            canReply: loaded.canReply,
+        }, headerEnd: _jsxs(_Fragment, { children: [display && (_jsx(Status, { className: itemStatus, variant: display.variant, children: display.label })), _jsx(Menu, { align: "end", items: actions, trigger: _jsx(IconButton, { "aria-label": labels.actions, variant: "ghost", size: "small", disabled: withdraw.state.status === "pending", children: withdraw.state.status === "pending" ? (_jsx(Spinner, { label: labels.withdrawing })) : (_jsx(DotsThreeIcon, { className: icon({ size: "small" }) })) }) })] }), notices: withdraw.state.status === "failed" && (_jsx(FailedNotice, { title: labels.withdrawFailed, children: errorDetail?.(withdraw.state.error) })), replyDisabled: withdraw.state.status === "pending", errorDetail: errorDetail, onReply: onReply, onBack: onBack }));
+}
+/** An item as its operator sees it: the reporter's thread, a status to set, and a reply. */
+function OperatorItem({ feedbackId, operator, errorDetail, onBack, }) {
+    const labels = useFeedbackLabels();
+    const operatorLabels = useCiridaeLocale().labels.feedbackOperator;
+    const [pendingStatus, setPendingStatus] = useState(null);
+    const statusChange = usePendingAction(async (status) => {
+        setPendingStatus(status);
+        try {
+            await operator.onStatusChange(feedbackId, status);
+        }
+        finally {
+            setPendingStatus(null);
+        }
+    });
+    const { item } = operator;
+    const loaded = item?.status === "loaded" && item.data.id === feedbackId ? item.data : null;
+    const status = pendingStatus ?? loaded?.status;
+    const reporter = loaded?.reporterEmail ?? operatorLabels.reporter;
+    const statusOptions = [
+        // A withdrawn item is the reporter's call; it shows, but cannot be chosen.
+        ...(status === "withdrawn" ? ["withdrawn"] : []),
+        ...feedbackTriageStatusSchema.options,
+    ].map((value) => ({ value, label: statusDisplay(value, labels).label }));
+    return (_jsx(FeedbackThreadItem, { feedbackId: feedbackId, item: item, loaded: loaded && {
+            subject: loaded.subject,
+            meta: (_jsxs(_Fragment, { children: [reporter, " \u00B7 ", typeLabel(loaded.type, labels), " \u00B7 ", _jsx(DateTime, { value: loaded.createdAt })] })),
+            entries: listOperatorThreadEntries(loaded, reporter),
+            canReply: loaded.canReply,
+        }, headerEnd: _jsx(Select, { label: operatorLabels.status, options: statusOptions, value: status, disabled: status === "withdrawn" || statusChange.state.status === "pending", onValueChange: (value) => {
+                const next = feedbackTriageStatusSchema.safeParse(value);
+                if (next.success && next.data !== status)
+                    statusChange.run(next.data);
+            } }), notices: statusChange.state.status === "failed" && (_jsx(FailedNotice, { title: operatorLabels.statusFailed, children: errorDetail?.(statusChange.state.error) })), errorDetail: errorDetail, onReply: operator.onReply, onBack: onBack }));
 }

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

@@ -8,7 +8,7 @@ export type FieldControl = {
     descriptionId?: string;
     invalid: boolean;
 };
-export declare const FieldControlContext: import("@types/react").Context<FieldControl | null>;
+export declare const FieldControlContext: import("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;

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

@@ -49,7 +49,7 @@ export declare function FilterChip({ label, icon: fieldIcon, operator, values, o
     values: ReactNode;
     onEdit?: () => void;
     onRemove: () => void;
-}): import("@types/react").JSX.Element;
+}): import("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.
@@ -63,7 +63,7 @@ export declare function FilterBar({ fields, value, defaultValue, onValueChange,
     onValueChange?: (value: FilterValue[]) => void;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-}): import("@types/react").JSX.Element;
+}): import("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
@@ -74,4 +74,4 @@ export declare function FilterValueEditor({ field, value, onChange, onBack, }: {
     value: FilterValue | undefined;
     onChange: (filter: FilterValue) => void;
     onBack?: () => void;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/filter-bar.js

@@ -7,14 +7,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * alone, such as a column head's "Filter by". Nothing here filters rows: `matchesFilter` tests one
  * value for a list that filters on the client.
  */
-import { CaretDownIcon, CaretLeftIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, PlusIcon, XIcon, } from "@phosphor-icons/react";
 import { useState } from "react";
 import { css, cx } from "#primitives/css";
 import { Button, IconButton } from "./button.js";
 import { CheckboxItem } from "./checkbox-item.js";
 import { useControllableState } from "./controllable-state.js";
-import { Divider } from "./data-display.js";
-import { icon } from "./icon.js";
+import { glassMenuDivider, glassMenuRow } from "./glass-menu.js";
+import { faceEdge } from "./gradient-edge.js";
+import { directional, icon } from "./icon.js";
 import { Input, SearchField } from "./input.js";
 import { useCiridaeLocale } from "./locale.js";
 import { Menu } from "./menu.js";
@@ -90,6 +91,10 @@ export function describeFilter(field, filter, locale) {
             : values.join(", "),
     };
 }
+/*
+ * The slicer's face: the selected tint, hovering to the raised face. The field reads in the
+ * secondary grey, the operator a step quieter.
+ */
 const chip = css({
     display: "inline-flex",
     alignItems: "center",
@@ -99,7 +104,9 @@ const chip = css({
     paddingInlineStart: "control.compactInline",
     paddingInlineEnd: "control.iconGap",
     borderRadius: "pill",
-    background: "bg.raised",
+    background: "token(gradients.selected)",
+    _hover: { background: "token(gradients.raisedHover)" },
+    _light: { color: "fg.secondary" },
     color: "fg.muted",
     fontSize: "caption",
     fontWeight: "medium",
@@ -122,6 +129,7 @@ const chipBody = css({
     _focusVisible: { focusRing: "outer" },
     "& svg": { flexShrink: "0" },
 });
+const chipOperator = css({ color: "fg.muted" });
 const chipValue = css({ color: "fg.primary", overflow: "hidden", textOverflow: "ellipsis" });
 const chipRemove = css({
     display: "inline-grid",
@@ -138,10 +146,11 @@ const chipRemove = css({
     _hover: { color: "fg.primary", background: "bg.hover" },
     _focusVisible: { focusRing: "outer" },
 });
+const toolbarEdge = faceEdge("toolbar");
 /** One set filter: the field and operator muted, its values in full; the text reopens it. */
 export function FilterChip({ label, icon: fieldIcon, operator, values, onEdit, onRemove, className, ...props }) {
     const { labels } = useCiridaeLocale();
-    return (_jsxs("span", { ...props, className: cx(chip, className), "data-ciridae-ui": "", "data-edge": "glass", children: [_jsxs("button", { type: "button", className: chipBody, onClick: onEdit, children: [fieldIcon, label, " ", operator, _jsx("span", { className: chipValue, children: values })] }), _jsx("button", { type: "button", className: chipRemove, "aria-label": labels.filters.remove(label), onClick: onRemove, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }));
+    return (_jsxs("span", { ...props, className: cx(chip, toolbarEdge.className, className), "data-ciridae-ui": "", "data-edge": toolbarEdge["data-edge"], children: [_jsxs("button", { type: "button", className: chipBody, onClick: onEdit, children: [fieldIcon, label, " ", _jsx("span", { className: chipOperator, children: operator }), _jsx("span", { className: chipValue, children: values })] }), _jsx("button", { type: "button", className: chipRemove, "aria-label": labels.filters.remove(label), onClick: onRemove, children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }));
 }
 const bar = css({
     display: "flex",
@@ -158,37 +167,41 @@ const chips = css({
     gap: "layout.controlGap",
     minWidth: "0",
 });
+// One line: the buttons keep their size and the search after them takes what the row leaves.
 const tools = css({
     display: "flex",
+    flex: "1",
     alignItems: "center",
     justifyContent: "flex-end",
-    flexWrap: "wrap",
     gap: "layout.controlGap",
     minWidth: "0",
     marginInlineStart: "auto",
+    "& > button": { flexShrink: "0" },
+    "& > :not(button)": { minWidth: "0" },
 });
-const builder = css({ display: "flex", flexDirection: "column", width: "300px", maxWidth: "100%" });
-const fieldItem = css({
+const builder = css({
     display: "flex",
-    alignItems: "center",
-    gap: "layout.controlGap",
+    flexDirection: "column",
+    width: "overlay.popover",
+    maxWidth: "100%",
+});
+// A menu row: the field's icon, its name, and an arrow on to its operator and values.
+const fieldItem = css(glassMenuRow, {
     width: "100%",
-    minHeight: "control.compact",
-    paddingInline: "menu.itemInline",
     border: "0",
-    borderRadius: "control",
     background: "transparent",
-    color: "fg.primary",
-    font: "inherit",
-    fontSize: "body",
-    fontWeight: "medium",
-    letterSpacing: "compact",
+    fontFamily: "inherit",
     textAlign: "start",
-    cursor: "pointer",
-    _hover: { background: "bg.hover" },
-    _focusVisible: { background: "bg.hover", outline: "none" },
-    "& svg": { color: "fg.muted", width: "icon.small", height: "icon.small" },
+    "& > span": { flex: "1", minWidth: "0" },
+    "& svg": {
+        flexShrink: "0",
+        color: "fg.muted",
+        fontSize: "icon.small",
+        width: "1em",
+        height: "1em",
+    },
 });
+const menuDivider = css(glassMenuDivider);
 const groupLabel = css({
     paddingBlockStart: "control.block",
     paddingBlockEnd: "layout.tightGap",
@@ -198,7 +211,8 @@ const groupLabel = css({
     fontWeight: "medium",
     letterSpacing: "compact",
 });
-const searchWrap = css({ padding: "layout.tightGap" });
+// The quiet search's hairline is inset as the dividers are.
+const searchWrap = css({ paddingInline: "menu.itemInline", paddingBlockEnd: "layout.tightGap" });
 const noMatches = css({
     paddingBlock: "control.block",
     paddingInline: "menu.itemInline",
@@ -232,7 +246,7 @@ export function FilterBar({ fields, value, defaultValue = [], onValueChange, ope
                             setEditing(field.key);
                             setOpen(true);
                         }, onRemove: () => setFilters(filters.filter((candidate) => candidate.field !== filter.field)) }, filter.field));
-                }) })), _jsxs("div", { className: tools, children: [filters.length > 0 && (_jsx(Button, { variant: "ghost", onClick: () => setFilters([]), children: labels.filters.clearAll })), _jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsx(Button, { variant: "ghost", icon: _jsx(PlusIcon, { className: icon({ size: "small" }) }), onClick: () => setEditing(null), children: labels.filters.addFilter }), children: open && (_jsx(FilterBuilder, { fields: fields, startField: editing, filters: filters, onChange: (filter) => setFilters(replaceFilter(filters, filter)) }, editing ?? "")) }), children] })] }));
+                }) })), _jsxs("div", { className: tools, children: [filters.length > 0 && (_jsx(Button, { variant: "ghost", onClick: () => setFilters([]), children: labels.filters.clearAll })), _jsx(Popover, { open: open, onOpenChange: changeOpen, density: "compact", trigger: _jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(PlusIcon, { className: icon({ size: "small" }) }), onClick: () => setEditing(null), children: labels.filters.addFilter }), children: open && (_jsx(FilterBuilder, { fields: fields, startField: editing, filters: filters, onChange: (filter) => setFilters(replaceFilter(filters, filter)) }, editing ?? "")) }), children] })] }));
 }
 function FilterBuilder({ fields, startField, filters, onChange, }) {
     const { labels } = useCiridaeLocale();
@@ -251,10 +265,10 @@ function FilterBuilder({ fields, startField, filters, onChange, }) {
         else
             groups.push({ label: candidate.group, fields: [candidate] });
     }
-    return (_jsxs("div", { className: builder, children: [_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.filterBy, placeholder: labels.filters.filterBy, value: query, onChange: (event) => setQuery(event.target.value) }) }), groups.map((group, index) => (_jsxs("div", { className: css({ display: "grid" }), children: [index > 0 && _jsx(Divider, { inset: "menu" }), group.label && _jsx("span", { className: groupLabel, children: group.label }), group.fields.map((candidate) => (_jsxs("button", { type: "button", className: fieldItem, onClick: () => {
+    return (_jsxs("div", { className: builder, children: [_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", quiet: true, "aria-label": labels.filters.filterBy, placeholder: labels.filters.filterBy, value: query, onChange: (event) => setQuery(event.target.value) }) }), groups.map((group, index) => (_jsxs("div", { className: css({ display: "grid" }), children: [index > 0 && _jsx("div", { className: menuDivider, role: "separator" }), group.label && _jsx("span", { className: groupLabel, children: group.label }), group.fields.map((candidate) => (_jsxs("button", { type: "button", className: fieldItem, onClick: () => {
                             setFieldKey(candidate.key);
                             setQuery("");
-                        }, children: [candidate.icon, candidate.label] }, candidate.key)))] }, group.label ?? ""))), matching.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noFields })] }));
+                        }, children: [candidate.icon, _jsx("span", { children: candidate.label }), _jsx(CaretRightIcon, { className: directional, "aria-hidden": "true" })] }, candidate.key)))] }, group.label ?? ""))), matching.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noFields })] }));
 }
 const editorHeader = css({
     display: "flex",
@@ -326,13 +340,13 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
                                 const keepsValues = multiValueOperators.includes(candidate) === multiple && candidate !== "between";
                                 report(candidate, keepsValues ? values : values.slice(0, 1));
                             },
-                        })) })) : (_jsx("span", { className: fixedOperator, children: operatorLabel }))] }), options ? (_jsxs(_Fragment, { children: [field.options && field.options.length > 6 && (_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", "aria-label": labels.filters.searchValues(field.label), placeholder: labels.filters.searchValues(field.label), value: query, onChange: (event) => setQuery(event.target.value) }) })), _jsxs("div", { className: valueList, children: [options.map((option) => (_jsxs(CheckboxItem, { checked: values.includes(option.value), onCheckedChange: (checked) => report(operator, multiple
+                        })) })) : (_jsx("span", { className: fixedOperator, children: operatorLabel }))] }), options ? (_jsxs(_Fragment, { children: [field.options && field.options.length > 6 && (_jsx("div", { className: searchWrap, children: _jsx(SearchField, { size: "compact", quiet: true, "aria-label": labels.filters.searchValues(field.label), placeholder: labels.filters.searchValues(field.label), value: query, onChange: (event) => setQuery(event.target.value) }) })), _jsxs("div", { className: valueList, children: [options.map((option) => (_jsxs(CheckboxItem, { checked: values.includes(option.value), onCheckedChange: (checked) => report(operator, multiple
                                     ? checked
                                         ? [...values, option.value]
                                         : values.filter((candidate) => candidate !== option.value)
                                     : checked
                                         ? [option.value]
-                                        : []), meta: option.count, children: [option.icon, option.label] }, option.value))), options.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noValues })] })] })) : (_jsx("div", { className: inputs, children: (operator === "between" ? [0, 1] : [0]).map((index) => (_jsx(Input, { type: field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text", "aria-label": operator === "between"
+                                        : []), meta: option.count, children: [option.icon, option.label] }, option.value))), options.length === 0 && _jsx("span", { className: noMatches, children: labels.filters.noValues })] })] })) : (_jsx("div", { className: inputs, children: (operator === "between" ? [0, 1] : [0]).map((index) => (_jsx(Input, { size: "small", type: field.kind === "date" ? "date" : field.kind === "number" ? "number" : "text", "aria-label": operator === "between"
                         ? index === 0
                             ? labels.filters.from
                             : labels.filters.to
@@ -344,7 +358,7 @@ export function FilterValueEditor({ field, value, onChange, onBack, }) {
                         const next = [...values];
                         next[index] = event.target.value;
                         report(operator, next);
-                    } }, index))) })), _jsx(Divider, { inset: "menu" }), _jsxs("div", { className: editorFooter, children: [options
+                    } }, index))) })), _jsx("div", { className: menuDivider, role: "separator" }), _jsxs("div", { className: editorFooter, children: [options
                         ? `${labels.filters.selectedCount(picked)} · ${labels.filters.updatesAsYouPick}`
                         : labels.filters.updatesAsYouPick, _jsx(Button, { variant: "ghost", onClick: () => report(operator, []), children: labels.common.clear })] })] }));
 }

package/dist/components/form-controls.d.ts

@@ -23,13 +23,22 @@ export declare const checkMark: import("../styled-system/types/index.js").Recipe
         };
     };
 }>;
+/** What a check mark's element carries, so its filled face can draw the gradient edge. */
+export declare const checkMarkEdge: {
+    readonly "data-ciridae-ui": "";
+    readonly "data-edge": "gradient";
+};
 export declare const checkIndicator: string;
+/** The tick, or the dash of a mixed checkbox. */
+export declare function CheckGlyph({ mixed }: {
+    mixed: boolean | undefined;
+}): import("react").JSX.Element;
 export declare function Checkbox({ children, className, wrapperClassName, ...props }: Omit<ComponentProps<typeof BaseCheckbox.Root>, "children" | "className"> & {
     children?: ReactNode;
     className?: string;
     wrapperClassName?: string;
-}): import("@types/react").JSX.Element;
-export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;
 export declare const radioDot: string;
 export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "children" | "defaultValue" | "name" | "onValueChange" | "value"> & {
     name: string;
@@ -44,7 +53,7 @@ export type RadioGroupProps = Omit<ComponentProps<typeof BaseRadioGroup>, "child
     value?: string;
     onValueChange?: (value: string) => void;
 };
-export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("@types/react").JSX.Element;
+export declare function RadioGroup({ name, options, label: groupLabel, defaultValue, value, onValueChange, layout, className, ...props }: RadioGroupProps): import("react").JSX.Element;
 type SelectOption = {
     label: string;
     value: string;