@ciridae/ui 1.0.2 → 1.0.4

package/dist/components/keycap.js

@@ -1,18 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { css, cx } from "#primitives/css";
+import { css, cva, cx } from "#primitives/css";
 import { detectPlatform, formatForDisplay } from "./hotkeys.js";
-const keycap = css({
-    display: "grid",
-    placeItems: "center",
-    width: "control.shortcut",
-    height: "control.shortcut",
-    border: "1px solid token(colors.border.glass)",
-    borderRadius: "keycap",
-    background: "bg.hover",
-    color: "fg.muted",
-    fontSize: "body",
-    fontFamily: "sans",
-    lineHeight: "tight",
+/*
+ * A key on the raised face: a glyph such as ⌘ or ↵ sits in a 22px square, and a word such as Esc
+ * in a wider cap. The edge is the canvas hairline.
+ */
+const keycap = cva({
+    base: {
+        display: "inline-grid",
+        placeItems: "center",
+        flexShrink: "0",
+        width: "control.chip",
+        height: "control.chip",
+        paddingInline: "none",
+        border: "1px solid token(colors.border.canvas)",
+        borderRadius: "keycap",
+        background: "token(gradients.raised)",
+        color: "fg.primary",
+        fontFamily: "sans",
+        fontSize: "code",
+        fontWeight: "medium",
+        letterSpacing: "compact",
+        lineHeight: "tight",
+        whiteSpace: "nowrap",
+        "& > svg": { fontSize: "icon.small" },
+    },
+    variants: {
+        // A longer word than Esc, such as Shift, still widens the cap rather than spilling out of it.
+        label: {
+            glyph: {},
+            word: { width: "auto", minWidth: "control.wordKeycap", paddingInline: "control.iconGap" },
+        },
+    },
+});
+const keycaps = css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "control.trackInset",
+    flexShrink: "0",
+    _phone: { display: "none" },
 });
 // A quiet inline hint, as a menu writes its shortcuts: no box, no extra height, and none on a
 // phone, which has no keyboard to press it on.
@@ -31,15 +57,27 @@ const shortcut = css({
 });
 // "⌘K" on a Mac, as a menu writes it; "Ctrl+K" elsewhere.
 const separatorToken = detectPlatform() === "mac" ? "" : undefined;
-/** One key as a 24px cap, such as the `K` after a search field. */
-export function Keycap({ className, ...props }) {
-    return _jsx("kbd", { ...props, className: cx(keycap, className), "data-ciridae-ui": "" });
+// Between the keys of a boxed hint, split apart again so each takes its own cap.
+const keySeparator = "\n";
+/**
+ * One key as a 22px square cap, such as the `K` after a search field. A label of more than one
+ * character, such as `Esc`, takes the wider word cap on its own.
+ */
+export function Keycap({ className, children, ...props }) {
+    const holdsWord = typeof children === "string" && Array.from(children).length > 1;
+    return (_jsx("kbd", { ...props, className: cx(keycap({ label: holdsWord ? "word" : "glyph" }), className), "data-ciridae-ui": "", children: children }));
 }
 /**
  * A hotkey as one quiet line, as the hotkeys layer writes it: `Mod` is "⌘" on a Mac and "Ctrl"
- * elsewhere, and a sequence's steps are spaced ("G I"). `Keycap` is the boxed key for a place
- * that wants it.
+ * elsewhere, and a sequence's steps are spaced ("G I"). `boxed` sets each key in its own
+ * `Keycap`, 2px apart, as a menu row or a search field shows it.
  */
-export function ShortcutHint({ hotkey, className, ...props }) {
+export function ShortcutHint({ hotkey, boxed = false, className, ...props }) {
+    if (boxed) {
+        const keys = formatForDisplay(hotkey, { separatorToken: keySeparator })
+            .split(/[\n ]/)
+            .filter((key) => key !== "");
+        return (_jsx("kbd", { ...props, dir: "ltr", "aria-label": formatForDisplay(hotkey, { useSymbols: false }), className: cx(keycaps, className), "data-ciridae-ui": "", children: keys.map((key, index) => (_jsx(Keycap, { "aria-hidden": "true", children: key }, index))) }));
+    }
     return (_jsx("kbd", { ...props, dir: "ltr", "aria-label": formatForDisplay(hotkey, { useSymbols: false }), className: cx(shortcut, className), "data-ciridae-ui": "", children: formatForDisplay(hotkey, { separatorToken }) }));
 }

package/dist/components/layout.d.ts

@@ -9,14 +9,14 @@ export type StackProps = useRender.ComponentProps<"div"> & {
     justify?: "start" | "center" | "end" | "between";
 };
 /** Children in a column. It never forces its parent wider than the parent's own box. */
-export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function Stack({ gap, align, justify, render, className, ...props }: StackProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type ClusterProps = useRender.ComponentProps<"div"> & {
     gap?: Gap;
     /** Wraps onto more lines when narrow; `false` keeps one line. Defaults to true. */
     wrap?: boolean;
 };
 /** Children in a row, centered on one line. */
-export declare function Cluster({ gap, wrap, render, className, ...props }: ClusterProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function Cluster({ gap, wrap, render, className, ...props }: ClusterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * The kit's text colors and sizes, for a run of text in a layout. `tone` and `size` inherit when
  * left out; `code` is the 12px label size, set compact. `MutedText` and `Eyebrow` are its two
@@ -76,11 +76,11 @@ export type TextProps = useRender.ComponentProps<"span"> & {
     /** The element to render; `render` takes any element instead. Defaults to `span`. */
     as?: "span" | "p" | "div" | "strong" | "small" | "label" | "time";
 };
-export declare function Text({ tone, size, weight, truncate, as, render, className, ...props }: TextProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function Text({ tone, size, weight, truncate, as, render, className, ...props }: TextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** Muted caption text: a value's secondary line, or an empty value such as "Never". */
-export declare function MutedText(props: Omit<TextProps, "tone" | "size">): import("@types/react").JSX.Element;
+export declare function MutedText(props: Omit<TextProps, "tone" | "size">): import("react").JSX.Element;
 /** The small muted label over a title or a field, such as a drawer's eyebrow or a group's name. */
-export declare function Eyebrow({ className, ...props }: Omit<TextProps, "size" | "weight">): import("@types/react").JSX.Element;
+export declare function Eyebrow({ className, ...props }: Omit<TextProps, "size" | "weight">): import("react").JSX.Element;
 /**
  * The one heading style: `page` for the title a page's heading opens with; `large` for a title in
  * content, such as a standalone page's; `medium` for a section of a page or a dialog; `small` for
@@ -109,10 +109,10 @@ export type HeadingProps = ComponentProps<"h1"> & {
     level: 1 | 2 | 3 | 4;
     size?: "page" | "large" | "medium" | "small";
 };
-export declare function Heading({ level, size, className, ...props }: HeadingProps): import("@types/react").JSX.Element;
+export declare function Heading({ level, size, className, ...props }: HeadingProps): import("react").JSX.Element;
 /** A bordered list whose items are divided by hairlines, such as a checklist of sources. */
-export declare function ListGroup({ className, ...props }: ComponentProps<"ul">): import("@types/react").JSX.Element;
-export declare function ListGroupItem({ className, ...props }: ComponentProps<"li">): import("@types/react").JSX.Element;
+export declare function ListGroup({ className, ...props }: ComponentProps<"ul">): import("react").JSX.Element;
+export declare function ListGroupItem({ className, ...props }: ComponentProps<"li">): import("react").JSX.Element;
 /** Whether a control sits in a `Toolbar`, which sets the height of the controls in it. */
 export declare function useInToolbar(): boolean;
 export type ToolbarProps = useRender.ComponentProps<"div"> & {
@@ -127,7 +127,7 @@ export type ToolbarProps = useRender.ComponentProps<"div"> & {
  * actions, wrapping onto more lines when narrow. Its controls share the small button's height: a
  * `SearchInput` or `SegmentedControl` in it is compact unless it sets its own size.
  */
-export declare function Toolbar({ gap, justify, stackOnPhone, render, className, ...props }: ToolbarProps): import("@types/react").JSX.Element;
+export declare function Toolbar({ gap, justify, stackOnPhone, render, className, ...props }: ToolbarProps): import("react").JSX.Element;
 /**
  * A row's label with its muted detail line under it, or after it on the same line when `inline`.
  * `ListRow` draws one; use it alone where the label sits inside another control, such as a
@@ -137,7 +137,7 @@ export declare function ListRowText({ label, detail, inline, }: {
     label: ReactNode;
     detail?: ReactNode;
     inline?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 /**
  * One row of a list: a leading mark or control, a label with an optional muted detail, and
  * trailing controls. `flush` drops the row's own height and inset for a table cell, keeping it to
@@ -159,9 +159,9 @@ export type ListRowProps = Omit<useRender.ComponentProps<"div">, "children"> & {
      */
     href?: string;
 };
-export declare function ListRow({ leading, label, detail, trailing, checkbox, flush, loading, href, render, className, ...props }: ListRowProps): import("@types/react").ReactElement<unknown, string | import("@types/react").JSXElementConstructor<any>>;
+export declare function ListRow({ leading, label, detail, trailing, checkbox, flush, loading, href, render, className, ...props }: ListRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /** A responsive grid of ChoiceCards, shared by provider, role, and client pickers. */
-export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div">): import("@types/react").JSX.Element;
+export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
 /**
  * A card to pick one option from a grid, such as a provider or a role, laid out as a `ListRow`. Pass
  * `pressed` when it is one of several that stay chosen; leave it out for a card that acts as soon as
@@ -170,5 +170,5 @@ export declare function ChoiceGrid({ className, ...props }: ComponentProps<"div"
 export declare function ChoiceCard({ icon: leading, pressed, children, className, ...props }: Omit<ComponentProps<"button">, "type"> & {
     icon?: ReactNode;
     pressed?: boolean;
-}): import("@types/react").JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/components/lightbox.d.ts

@@ -1,8 +1,12 @@
-/** A file the lightbox shows: an image, a PDF, text or HTML by its `mediaType` or name. */
+import { type ResolveFileUrl } from "./resolved-file-url.js";
+/**
+ * A file the lightbox shows: an image, a PDF, text or HTML by its `mediaType` or name. Without a
+ * `url` it loads through the lightbox's `resolveUrl`.
+ */
 export type LightboxItem = {
     id: string;
     name: string;
-    url: string;
+    url?: string | null;
     mediaType?: string;
 };
 export type LightboxProps = {
@@ -10,5 +14,7 @@ export type LightboxProps = {
     /** The file showing; null closes the lightbox. */
     index: number | null;
     onIndexChange: (index: number | null) => void;
+    /** Loads the link of a file with no `url`; see `ResolveFileUrl`. */
+    resolveUrl?: ResolveFileUrl<LightboxItem>;
 };
-export declare function Lightbox({ items, index, onIndexChange }: LightboxProps): import("@types/react").JSX.Element;
+export declare function Lightbox({ items, index, onIndexChange, resolveUrl }: LightboxProps): import("react").JSX.Element;

package/dist/components/lightbox.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * A full-window viewer for files, such as a message's attachments: an image fits the window, a
  * PDF, text or HTML file shows in a frame, and anything else offers its download. With several
- * files it steps between them by its arrows or the arrow keys.
+ * files it steps between them by its arrows or the arrow keys. A file with no `url`, such as one
+ * served behind a bearer token, loads through `resolveUrl` when it shows.
  */
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { ArrowSquareOutIcon, CaretLeftIcon, CaretRightIcon, DownloadSimpleIcon, XIcon, } from "@phosphor-icons/react";
@@ -10,8 +11,9 @@ import { css, cx } from "#primitives/css";
 import { Button, IconButton } from "./button.js";
 import { fileTypeIcon } from "./dropzone.js";
 import { HotkeyLayer } from "./hotkeys.js";
-import { directional, icon } from "./icon.js";
+import { directional, icon, Spinner } from "./icon.js";
 import { useCiridaeLocale } from "./locale.js";
+import { useResolvedFileUrl } from "./resolved-file-url.js";
 const popup = css({
     position: "fixed",
     inset: "none",
@@ -56,7 +58,8 @@ const stage = css({
         height: "100%",
         border: "0",
         borderRadius: "action",
-        background: "bg.card",
+        // Solid, so a document with no background of its own does not show the scrim through it.
+        background: "bg.surface",
     },
 });
 const step = css({
@@ -86,7 +89,7 @@ function kindOf({ name, mediaType = "" }) {
 function isHtml({ name, mediaType }) {
     return mediaType === "text/html" || /\.html?$/i.test(name);
 }
-export function Lightbox({ items, index, onIndexChange }) {
+export function Lightbox({ items, index, onIndexChange, resolveUrl }) {
     const item = index === null ? undefined : items[index];
     return (_jsx(BaseDialog.Root, { open: item !== undefined, onOpenChange: (open) => {
             if (!open)
@@ -103,15 +106,16 @@ export function Lightbox({ items, index, onIndexChange }) {
                     event.preventDefault();
                     const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
                     onIndexChange((index + (rtl ? -offset : offset) + items.length) % items.length);
-                }, children: item && index !== null && (_jsx(HotkeyLayer, { children: _jsx(LightboxView, { items: items, index: index, item: item, onIndexChange: onIndexChange }) })) }) }) }));
+                }, children: item && index !== null && (_jsx(HotkeyLayer, { children: _jsx(LightboxView, { items: items, index: index, item: item, onIndexChange: onIndexChange, resolveUrl: resolveUrl }) })) }) }) }));
 }
-function LightboxView({ items, index, item, onIndexChange, }) {
+function LightboxView({ items, index, item, onIndexChange, resolveUrl, }) {
     const { labels } = useCiridaeLocale();
     const several = items.length > 1;
     const go = (offset) => onIndexChange((index + offset + items.length) % items.length);
     const kind = kindOf(item);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: bar, children: [_jsx(BaseDialog.Title, { className: title, children: item.name }), several && (_jsx("span", { className: position, children: labels.lightbox.position(index + 1, items.length) })), _jsx(IconButton, { "aria-label": labels.lightbox.openInNewTab, variant: "ghost", nativeButton: false, render: _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer" }), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) }), _jsx(IconButton, { "aria-label": labels.lightbox.download, variant: "ghost", nativeButton: false, render: _jsx("a", { href: item.url, download: item.name }), children: _jsx(DownloadSimpleIcon, { className: icon({ size: "small" }) }) }), _jsx(BaseDialog.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: stage, children: [kind === "image" ? (_jsx("img", { src: item.url, alt: item.name }, item.id)) : kind === "frame" ? (_jsx("iframe", { src: item.url, title: item.name, 
+    const { url, state } = useResolvedFileUrl(item, resolveUrl);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: bar, children: [_jsx(BaseDialog.Title, { className: title, children: item.name }), several && (_jsx("span", { className: position, children: labels.lightbox.position(index + 1, items.length) })), url && (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": labels.lightbox.openInNewTab, variant: "ghost", nativeButton: false, render: _jsx("a", { href: url, target: "_blank", rel: "noreferrer" }), children: _jsx(ArrowSquareOutIcon, { className: icon({ size: "small" }) }) }), _jsx(IconButton, { "aria-label": labels.lightbox.download, variant: "ghost", nativeButton: false, render: _jsx("a", { href: url, download: item.name }), children: _jsx(DownloadSimpleIcon, { className: icon({ size: "small" }) }) })] })), _jsx(BaseDialog.Close, { render: _jsx(IconButton, { "aria-label": labels.common.close, variant: "ghost" }), children: _jsx(XIcon, { className: icon({ size: "small" }) }) })] }), _jsxs("div", { className: stage, children: [!url ? (state === "pending" ? (_jsx(Spinner, { label: labels.common.loading })) : (_jsx("div", { className: fallback, children: fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }) }))) : kind === "image" ? (_jsx("img", { src: url, alt: item.name }, item.id)) : kind === "frame" ? (_jsx("iframe", { src: url, title: item.name, 
                         // A sent HTML file only draws: no scripts, no reach into the page. A PDF keeps the
                         // browser's own viewer, which a sandbox would block.
-                        sandbox: isHtml(item) ? "" : undefined }, item.id)) : (_jsxs("div", { className: fallback, children: [fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }), _jsx(Button, { nativeButton: false, render: _jsx("a", { href: item.url, download: item.name }), children: labels.lightbox.download })] })), several && (_jsxs(_Fragment, { children: [_jsx("span", { className: step, "data-step": "previous", children: _jsx(IconButton, { "aria-label": labels.lightbox.previous, onClick: () => go(-1), children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }) }), _jsx("span", { className: step, "data-step": "next", children: _jsx(IconButton, { "aria-label": labels.lightbox.next, onClick: () => go(1), children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) }) })] }))] })] }));
+                        sandbox: isHtml(item) ? "" : undefined }, item.id)) : (_jsxs("div", { className: fallback, children: [fileTypeIcon({ name: item.name, type: item.mediaType ?? "" }), _jsx(Button, { nativeButton: false, render: _jsx("a", { href: url, download: item.name }), children: labels.lightbox.download })] })), several && (_jsxs(_Fragment, { children: [_jsx("span", { className: step, "data-step": "previous", children: _jsx(IconButton, { "aria-label": labels.lightbox.previous, onClick: () => go(-1), children: _jsx(CaretLeftIcon, { className: cx(icon({ size: "small" }), directional) }) }) }), _jsx("span", { className: step, "data-step": "next", children: _jsx(IconButton, { "aria-label": labels.lightbox.next, onClick: () => go(1), children: _jsx(CaretRightIcon, { className: cx(icon({ size: "small" }), directional) }) }) })] }))] })] }));
 }

package/dist/components/link.d.ts

@@ -10,4 +10,4 @@ export type LinkProps = ComponentProps<"a"> & {
  * One anchor style for the whole app. `external` carries the new-tab wiring so callers never
  * repeat `target`/`rel`, and a router link passes through `render`.
  */
-export declare function Link({ tone, external, render, className, children, ...props }: LinkProps): import("@types/react").JSX.Element;
+export declare function Link({ tone, external, render, className, children, ...props }: LinkProps): import("react").JSX.Element;

package/dist/components/locale.d.ts

@@ -49,6 +49,10 @@ export declare const englishLabels: {
         /** Between the items of a list, such as the actions one update line joins. */
         listSeparator: string;
     };
+    clipboard: {
+        copyFailed: string;
+        copyByHand: string;
+    };
     shell: {
         menu: string;
         breadcrumb: string;
@@ -59,6 +63,9 @@ export declare const englishLabels: {
         label: string;
         previous: string;
         next: string;
+        /** The rows a page shows and the page size, from numbers already formatted. */
+        summary: (first: string, last: string, total: string) => string;
+        perPage: (count: string) => string;
     };
     calendar: {
         previousMonth: string;
@@ -72,6 +79,9 @@ export declare const englishLabels: {
     };
     commandMenu: {
         title: string;
+        /** The footer's key hints beside the close key. */
+        move: string;
+        open: string;
     };
     keyboard: {
         shortcuts: string;
@@ -153,7 +163,7 @@ export declare const englishLabels: {
         sendTitle: string;
         sentTitle: string;
         newTab: string;
-        sentTab: string;
+        ticketsTab: string;
         type: string;
         where: string;
         whatHappened: string;
@@ -201,6 +211,18 @@ export declare const englishLabels: {
         pointerNote: (index: number) => string;
         removePointer: (index: number) => string;
     };
+    /** The feedback sheet's Tickets tab, for the people who answer feedback. */
+    feedbackOperator: {
+        allTitle: string;
+        mine: string;
+        search: string;
+        status: string;
+        type: string;
+        reporter: string;
+        noneReceived: string;
+        noMatches: string;
+        statusFailed: string;
+    };
     lightbox: {
         previous: string;
         next: string;
@@ -214,6 +236,8 @@ export declare const englishLabels: {
         sendMessage: string;
         stopped: string;
         failed: string;
+        /** The title of a failed reply's notice. */
+        couldNotAnswer: string;
         notSent: string;
         typing: string;
         resize: string;
@@ -226,6 +250,8 @@ export declare const englishLabels: {
         answered: (answers: string) => string;
         allow: string;
         deny: string;
+        allowed: string;
+        denied: string;
         conversations: string;
         searchConversations: string;
         newChat: string;
@@ -233,6 +259,9 @@ export declare const englishLabels: {
         previousWeek: string;
         approve: string;
         waitingOnYou: string;
+        sending: string;
+        reading: string;
+        scrollToLatest: string;
     };
     projectCard: {
         default: string;
@@ -351,6 +380,8 @@ export declare const englishLabels: {
         runToGo: string;
         runDoneLabel: (count: number) => string;
         runToGoLabel: (count: number) => string;
+        /** The folded finished stages, with their count. */
+        runDoneShort: (count: number) => string;
         checklistProgress: (done: number, total: number) => string;
     };
     settings: {
@@ -379,6 +410,15 @@ export declare const englishLabels: {
         fullScreen: string;
         exitFullScreen: string;
     };
+    appFrame: {
+        status: string;
+        localBuild: string;
+        updateAvailable: string;
+    };
+    accountMenu: {
+        menu: string;
+        signOut: string;
+    };
     themeCustomizer: {
         palette: string;
         paletteName: (name: string) => string;
@@ -458,6 +498,6 @@ export type CiridaeLocaleProviderProps = {
     dir?: "ltr" | "rtl";
     children: ReactNode;
 };
-export declare function CiridaeLocaleProvider({ locale, labels, dir, children, }: CiridaeLocaleProviderProps): import("@types/react").JSX.Element;
+export declare function CiridaeLocaleProvider({ locale, labels, dir, children, }: CiridaeLocaleProviderProps): import("react").JSX.Element;
 /** The locale's labels and formatters; English for the browser's language outside a provider. */
 export declare function useCiridaeLocale(): CiridaeLocale;

package/dist/components/locale.js

@@ -43,13 +43,21 @@ export const englishLabels = {
         /** Between the items of a list, such as the actions one update line joins. */
         listSeparator: ", ",
     },
+    clipboard: { copyFailed: "Couldn't copy", copyByHand: "Select it and copy it by hand." },
     shell: {
         menu: "Menu",
         breadcrumb: "Breadcrumb",
         parentPages: "Parent pages",
         environment: (label) => `${label} environment`,
     },
-    pagination: { label: "Pagination", previous: "Previous", next: "Next" },
+    pagination: {
+        label: "Pagination",
+        previous: "Previous",
+        next: "Next",
+        /** The rows a page shows and the page size, from numbers already formatted. */
+        summary: (first, last, total) => `Showing ${first} to ${last} of ${total}`,
+        perPage: (count) => `${count} per page`,
+    },
     calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
     select: {
         placeholder: "Select…",
@@ -57,7 +65,12 @@ export const englishLabels = {
         searchLabel: "Search options",
         filters: "Filters",
     },
-    commandMenu: { title: "Command menu" },
+    commandMenu: {
+        title: "Command menu",
+        /** The footer's key hints beside the close key. */
+        move: "Move",
+        open: "Open",
+    },
     keyboard: {
         shortcuts: "Keyboard shortcuts",
         /** The group of a shortcut registered without one. */
@@ -132,7 +145,7 @@ export const englishLabels = {
         sendTitle: "Send feedback",
         sentTitle: "Sent feedback",
         newTab: "New",
-        sentTab: "Sent",
+        ticketsTab: "Tickets",
         type: "Type",
         where: "Where",
         whatHappened: "What happened?",
@@ -180,6 +193,18 @@ export const englishLabels = {
         pointerNote: (index) => `Pointer ${index} note`,
         removePointer: (index) => `Remove pointer ${index}`,
     },
+    /** The feedback sheet's Tickets tab, for the people who answer feedback. */
+    feedbackOperator: {
+        allTitle: "All feedback",
+        mine: "Mine",
+        search: "Search feedback",
+        status: "Status",
+        type: "Type",
+        reporter: "Reporter",
+        noneReceived: "No feedback yet",
+        noMatches: "No feedback matches",
+        statusFailed: "Couldn't change the status",
+    },
     lightbox: {
         previous: "Previous file",
         next: "Next file",
@@ -193,6 +218,8 @@ export const englishLabels = {
         sendMessage: "Send message",
         stopped: "Stopped",
         failed: "Failed",
+        /** The title of a failed reply's notice. */
+        couldNotAnswer: "Couldn't finish that answer",
         notSent: "Not sent",
         typing: "Typing",
         resize: "Resize",
@@ -205,6 +232,8 @@ export const englishLabels = {
         answered: (answers) => `Answered ${answers}`,
         allow: "Allow",
         deny: "Deny",
+        allowed: "Allowed",
+        denied: "Denied",
         conversations: "Conversations",
         searchConversations: "Search conversations",
         newChat: "New chat",
@@ -212,6 +241,9 @@ export const englishLabels = {
         previousWeek: "Previous 7 days",
         approve: "Approve",
         waitingOnYou: "Waiting on you",
+        sending: "Sending",
+        reading: "Reading",
+        scrollToLatest: "Scroll to latest",
     },
     projectCard: {
         default: "Default",
@@ -324,6 +356,8 @@ export const englishLabels = {
         runToGo: "To go",
         runDoneLabel: (count) => `${count} stages done`,
         runToGoLabel: (count) => `${count} stages to go`,
+        /** The folded finished stages, with their count. */
+        runDoneShort: (count) => `${count} done`,
         checklistProgress: (done, total) => `${done} of ${total}`,
     },
     settings: { navigation: "Settings" },
@@ -346,6 +380,8 @@ export const englishLabels = {
         fullScreen: "Full screen",
         exitFullScreen: "Exit full screen",
     },
+    appFrame: { status: "Status", localBuild: "local", updateAvailable: "Update available" },
+    accountMenu: { menu: "Account menu", signOut: "Sign out" },
     themeCustomizer: {
         palette: "Palette",
         paletteName: (name) => name.charAt(0).toUpperCase() + name.slice(1),
@@ -431,6 +467,10 @@ function mergeLabels(overrides) {
         documentViewer: { ...englishLabels.documentViewer, ...overrides.documentViewer },
         themeCustomizer: { ...englishLabels.themeCustomizer, ...overrides.themeCustomizer },
         profileHeader: { ...englishLabels.profileHeader, ...overrides.profileHeader },
+        feedbackOperator: { ...englishLabels.feedbackOperator, ...overrides.feedbackOperator },
+        clipboard: { ...englishLabels.clipboard, ...overrides.clipboard },
+        accountMenu: { ...englishLabels.accountMenu, ...overrides.accountMenu },
+        appFrame: { ...englishLabels.appFrame, ...overrides.appFrame },
     };
 }
 /** The locale value `useCiridaeLocale` returns, for use outside React or in tests. */

package/dist/components/log-entry.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentProps, ReactNode } from "react";
+export type LogEntryProps = Omit<ComponentProps<"div">, "children"> & {
+    /** When it happened, epoch milliseconds, written as the time of day. */
+    at: number;
+    /** Who did it: a person's avatar, or a system's or an agent's icon. */
+    actor: ReactNode;
+    /** What happened, such as "The agent drafted remittance advice for INV-4799". */
+    headline: ReactNode;
+    /** A line more about it, such as what it waits on. */
+    detail?: ReactNode;
+    /** At the end of the row, such as a badge naming whether a person, a model or an agent did it. */
+    badge?: ReactNode;
+    /** `comfortable` for a page's log, `compact` for one line per entry, `panel` in a drawer. */
+    density?: "comfortable" | "compact" | "panel";
+    selected?: boolean;
+    /** A hairline under the row, between it and the next. */
+    divider?: boolean;
+    /** Makes the row a button, such as one that opens the entry beside the log. */
+    onSelect?: () => void;
+};
+/** One thing that happened, as a row of a log. */
+export declare function LogEntry({ at, actor, headline, detail, badge, density, selected, divider, onSelect, className, ...props }: LogEntryProps): import("react").JSX.Element;
+export type LogGroupHeaderProps = Omit<ComponentProps<"div">, "children"> & {
+    /** What the group is, such as "Today". */
+    label: ReactNode;
+    /** Beside it, quieter, such as the date. */
+    meta?: ReactNode;
+};
+/** A log's heading over a group of its rows, such as a day's: "Today", then "Oct 6". */
+export declare function LogGroupHeader({ label, meta, className, ...props }: LogGroupHeaderProps): import("react").JSX.Element;
+export type LogActorProps = {
+    /** Who or what acted, read out in place of the mark. */
+    name: string;
+    /** A person's photo; their initials stand in without one. */
+    src?: string | null;
+    /** For an agent, a sync or a rule: its icon in place of a person's photo or initials. */
+    icon?: ReactNode;
+};
+/** Who did a log entry's thing, as the mark for its `actor`. */
+export declare function LogActor({ name, src, icon }: LogActorProps): import("react").JSX.Element;