@candor-ui/react 1.0.1 → 1.3.0

package/dist/chat/attachment-preview.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { File, FileArchive, FileCode, FileImage, FileSpreadsheet, FileText, Music, Paperclip, Video, X } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { useFormat, useStrings } from "../blocks/locale.js";
+/** AttachmentPreview's fixed words; override them under `attachmentPreview` in LocaleProvider's `strings`. */
+export const attachmentPreviewStrings = {
+    remove: "Remove {name}",
+    open: "Open {name}",
+    attachments: { one: "{count} attachment", other: "{count} attachments" },
+    /** File sizes; `{size}` is already formatted. */
+    bytes: "{size} B",
+    kilobytes: "{size} KB",
+    megabytes: "{size} MB",
+};
+/** "820 B", "14 KB", "2.4 MB", in the locale. */
+export function formatFileSize(bytes, number, t) {
+    if (bytes === undefined)
+        return null;
+    if (bytes < 1024)
+        return t("bytes", { size: number(bytes, { useGrouping: false }) });
+    if (bytes < 1024 * 1024)
+        return t("kilobytes", { size: number(Math.round(bytes / 1024), { useGrouping: false }) });
+    return t("megabytes", { size: number(bytes / 1024 / 1024, { minimumFractionDigits: 1, maximumFractionDigits: 1, useGrouping: false }) });
+}
+/** An icon for a file, from its media type or, failing that, its extension. */
+export function fileIcon(a) {
+    const type = a.mediaType ?? "";
+    const ext = a.name.split(".").pop()?.toLowerCase() ?? "";
+    if (type.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "webp", "svg", "avif"].includes(ext))
+        return FileImage;
+    if (type.startsWith("audio/"))
+        return Music;
+    if (type.startsWith("video/"))
+        return Video;
+    if (/csv|spreadsheet|excel/.test(type) || ["csv", "xls", "xlsx", "tsv"].includes(ext))
+        return FileSpreadsheet;
+    if (/zip|tar|gzip|compressed/.test(type) || ["zip", "tar", "gz", "tgz", "7z"].includes(ext))
+        return FileArchive;
+    if (/json|javascript|typescript|xml|x-sh|x-python/.test(type) || ["json", "js", "ts", "tsx", "py", "sql", "sh", "yaml", "yml", "xml"].includes(ext))
+        return FileCode;
+    if (type.startsWith("text/") || type === "application/pdf" || ["txt", "md", "pdf", "doc", "docx", "rtf"].includes(ext))
+        return FileText;
+    return File;
+}
+/** The icon for a file's type. */
+function FileGlyph({ attachment }) {
+    return React.createElement(fileIcon(attachment), { className: "size-4" });
+}
+/** A thumbnail only for images whose preview the app supplied. */
+const thumbnail = (a) => (a.previewUrl && (a.mediaType ?? "").startsWith("image/") ? a.previewUrl : undefined);
+/**
+ * A file waiting to be sent, as a chip in the composer: its name, then upload progress, an error, or its size, and a
+ * remove button. Images show their preview when the app gives one.
+ */
+function AttachmentChip({ attachment: a, onRemove, className, }) {
+    const t = useStrings("attachmentPreview", attachmentPreviewStrings);
+    const fmt = useFormat();
+    const thumb = thumbnail(a);
+    return (_jsxs("span", { "data-slot": "attachment-chip", className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pe-1 ps-2 text-xs", a.error && "border-destructive/50", className), children: [thumb ? _jsx("img", { src: thumb, alt: "", className: "size-4 shrink-0 rounded-xs object-cover" }) : _jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? fmt.number(Math.round(a.progress * 100) / 100, { style: "percent" }) : formatFileSize(a.size, fmt.number, t) }), onRemove && (_jsx("button", { type: "button", "aria-label": t("remove", { name: a.name }), onClick: () => onRemove(a.id), className: "rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && _jsx("span", { "aria-hidden": true, className: "absolute bottom-0 start-0 h-0.5 bg-primary transition-[width] duration-300", style: { width: `${a.progress * 100}%` } })] }));
+}
+/**
+ * A sent file, as a tile in a message: an image preview when the app supplied one, else an icon for its type, with
+ * its name and size. The name is never a link: with `onOpen` the tile is a button and your app decides what opening
+ * means (a viewer, a signed download).
+ */
+function AttachmentPreview({ attachment: a, onOpen, className, }) {
+    const t = useStrings("attachmentPreview", attachmentPreviewStrings);
+    const fmt = useFormat();
+    const thumb = thumbnail(a);
+    const size = formatFileSize(a.size, fmt.number, t);
+    const body = (_jsxs(_Fragment, { children: [thumb ? (_jsx("img", { src: thumb, alt: "", className: "h-24 w-full rounded-md bg-muted object-cover" })) : (_jsx("span", { "aria-hidden": true, className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: _jsx(FileGlyph, { attachment: a }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm", children: a.name }), (size || a.error) && _jsx("span", { className: cn("block text-xs tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ?? size })] })] }));
+    const frame = cn("flex w-56 max-w-full gap-2.5 rounded-lg border bg-card p-2 text-start", thumb ? "flex-col" : "items-center", className);
+    return onOpen ? (_jsx("button", { type: "button", "data-slot": "attachment-preview", "aria-label": t("open", { name: a.name }), onClick: () => onOpen(a), className: cn(frame, "outline-none transition-colors duration-150 hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/40"), children: body })) : (_jsx("div", { "data-slot": "attachment-preview", className: frame, children: body }));
+}
+/** Several sent files, as a wrapping row of tiles, announced as a list. */
+function AttachmentList({ attachments, onOpen, className, }) {
+    const t = useStrings("attachmentPreview", attachmentPreviewStrings);
+    return (_jsx("ul", { "data-slot": "attachment-list", "aria-label": t("attachments", { count: attachments.length }), className: cn("flex flex-wrap gap-2", className), children: attachments.map((a) => (_jsx("li", { className: "max-w-full", children: _jsx(AttachmentPreview, { attachment: a, onOpen: onOpen }) }, a.id))) }));
+}
+export { AttachmentChip, AttachmentPreview, AttachmentList };

package/dist/chat/card-registry.d.ts

@@ -1,4 +1,11 @@
 import * as React from "react";
+/** CardRegistry's fixed words; override them under `cardRegistry` in LocaleProvider's `strings`. */
+export declare const cardRegistryStrings: {
+    showAsText: string;
+    unknown: string;
+    invalid: string;
+    failed: string;
+};
 /**
  * A card an agent's reply can carry. `check` decides whether the props are
  * the shape `render` needs: it returns null when they are, or a sentence

package/dist/chat/card-registry.js

@@ -4,6 +4,14 @@ import * as React from "react";
 import { ChevronRight, LayoutTemplate } from "lucide-react";
 import { DegradedPanel } from "../blocks/degraded-panel.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { useStrings } from "../blocks/locale.js";
+/** CardRegistry's fixed words; override them under `cardRegistry` in LocaleProvider's `strings`. */
+export const cardRegistryStrings = {
+    showAsText: "Show it as text",
+    unknown: "This reply includes a “{name}” card this app can’t show.",
+    invalid: "The {label} couldn’t be shown: {problem}",
+    failed: "The {label} failed while drawing.",
+};
 /** Define a card with typed props; the check is what makes the cast safe. */
 export function defineCard(card) {
     return card;
@@ -23,7 +31,8 @@ class CardBoundary extends React.Component {
     }
 }
 function Summary({ text, }) {
-    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "size-3 transition-transform group-data-[state=open]/summary:rotate-90" }), " Show it as text"] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
+    const t = useStrings("cardRegistry", cardRegistryStrings);
+    return (_jsxs(Collapsible, { className: "group/summary", children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1 text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-sm", children: [_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform group-data-[state=open]/summary:[transform:rotate(90deg)]" }), " ", t("showAsText")] }), _jsx(CollapsibleContent, { children: _jsx("p", { className: "mt-1.5 rounded-md bg-sunken px-3 py-2 text-sm whitespace-pre-wrap", children: text }) })] }));
 }
 /**
  * Renders one card from the registry. Three honest fallbacks, each with the
@@ -31,16 +40,17 @@ function Summary({ text, }) {
  * fit (and how); or it failed while drawing.
  */
 function Card({ name, props, summary, }) {
+    const t = useStrings("cardRegistry", cardRegistryStrings);
     const cards = React.useContext(Registry);
     const def = cards[name];
     if (!def) {
-        return (_jsxs("div", { "data-slot": "card", "data-card": name, "data-state": "unknown", className: "flex flex-col gap-1.5 rounded-lg border border-dashed px-3 py-2.5", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [_jsx(LayoutTemplate, { "aria-hidden": true, className: "size-3.5" }), " This reply includes a \u201C", name, "\u201D card this app can\u2019t show."] }), _jsx(Summary, { text: summary })] }));
+        return (_jsxs("div", { "data-slot": "card", "data-card": name, "data-state": "unknown", className: "flex flex-col gap-1.5 rounded-lg border border-dashed px-3 py-2.5", children: [_jsxs("p", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [_jsx(LayoutTemplate, { "aria-hidden": true, className: "size-3.5" }), " ", t("unknown", { name })] }), _jsx(Summary, { text: summary })] }));
     }
     const problem = def.check(props);
     if (problem) {
-        return (_jsxs("div", { "data-slot": "card", "data-card": name, "data-state": "invalid", className: "flex flex-col gap-1.5", children: [_jsx(DegradedPanel, { reason: `The ${def.label.toLowerCase()} couldn’t be shown: ${problem}` }), _jsx(Summary, { text: summary })] }));
+        return (_jsxs("div", { "data-slot": "card", "data-card": name, "data-state": "invalid", className: "flex flex-col gap-1.5", children: [_jsx(DegradedPanel, { reason: t("invalid", { label: def.label.toLowerCase(), problem }) }), _jsx(Summary, { text: summary })] }));
     }
-    return (_jsx("div", { "data-slot": "card", "data-card": name, "data-state": "ready", children: _jsx(CardBoundary, { fallback: _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DegradedPanel, { reason: `The ${def.label.toLowerCase()} failed while drawing.` }), _jsx(Summary, { text: summary })] }), children: def.render(props) }) }));
+    return (_jsx("div", { "data-slot": "card", "data-card": name, "data-state": "ready", children: _jsx(CardBoundary, { fallback: _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(DegradedPanel, { reason: t("failed", { label: def.label.toLowerCase() }) }), _jsx(Summary, { text: summary })] }), children: def.render(props) }) }));
 }
 /* ---------------------------------------------------------------- small checking helpers */
 export const isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);

package/dist/chat/citation.d.ts

@@ -1,5 +1,20 @@
 import { type LucideIcon } from "lucide-react";
 import type { MessageSource } from "../lib/chat.js";
+/** Citation's fixed words; override them under `citation` in LocaleProvider's `strings`. */
+export declare const citationStrings: {
+    document: string;
+    web: string;
+    query: string;
+    data: string;
+    code: string;
+    workflow: string;
+    knowledge: string;
+    /** A kind not listed above. */
+    source: string;
+    notVerified: string;
+    sourceLabel: string;
+    sources: string;
+};
 /** Kinds of evidence most apps cite. Others read as "Source". */
 export declare const sourceKinds: Record<string, {
     Icon: LucideIcon;

package/dist/chat/citation.js

@@ -1,7 +1,24 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BookOpen, Braces, Database, FileText, Globe, Table2, Waypoints } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { useStrings } from "../blocks/locale.js";
+/** Citation's fixed words; override them under `citation` in LocaleProvider's `strings`. */
+export const citationStrings = {
+    document: "Document",
+    web: "Web page",
+    query: "Query",
+    data: "Data",
+    code: "Code",
+    workflow: "Workflow",
+    knowledge: "Knowledge",
+    /** A kind not listed above. */
+    source: "Source",
+    notVerified: "The agent cites this but hasn’t verified it.",
+    sourceLabel: "Source {marker}: {label}",
+    sources: "Sources",
+};
 /** Kinds of evidence most apps cite. Others read as "Source". */
 export const sourceKinds = {
     document: { Icon: FileText, noun: "Document" },
@@ -12,10 +29,18 @@ export const sourceKinds = {
     workflow: { Icon: Waypoints, noun: "Workflow" },
     knowledge: { Icon: BookOpen, noun: "Knowledge" },
 };
-const kindOf = (kind) => sourceKinds[kind] ?? { Icon: FileText, noun: "Source" };
+const builtInKinds = ["document", "web", "query", "data", "code", "workflow", "knowledge"];
+const isBuiltIn = (kind) => builtInKinds.includes(kind);
+const kindOf = (kind, t) => {
+    const info = sourceKinds[kind];
+    if (!info)
+        return { Icon: FileText, noun: t("source") };
+    return isBuiltIn(kind) ? { ...info, noun: t(kind) } : info;
+};
 function SourceDetail({ source, }) {
-    const { Icon, noun } = kindOf(source.kind);
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (_jsx("blockquote", { className: "max-h-40 overflow-auto rounded-md bg-sunken px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: "The agent cites this but hasn\u2019t verified it." }))] }));
+    const t = useStrings("citation", citationStrings);
+    const { Icon, noun } = kindOf(source.kind, t);
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("span", { className: "mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-sm bg-muted text-muted-foreground", children: _jsx(Icon, { className: "size-3" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-medium leading-snug", children: source.label }), _jsx("p", { className: "text-xs text-muted-foreground", children: source.origin ?? noun })] })] }), source.snippet && (_jsx("blockquote", { className: "max-h-40 overflow-auto rounded-md bg-sunken px-2.5 py-2 text-xs leading-relaxed whitespace-pre-wrap text-muted-foreground", children: source.snippet })), source.provisional && (_jsx("p", { className: "text-xs text-provisional", children: t("notVerified") }))] }));
 }
 /**
  * An inline [n]. Opens the source in a popover on click or Enter, so evidence is
@@ -23,22 +48,24 @@ function SourceDetail({ source, }) {
  * renders as a plain bracket rather than a guess.
  */
 function Citation({ source, marker, }) {
+    const t = useStrings("citation", citationStrings);
     if (!source) {
         return _jsxs("sup", { className: "text-faint-foreground", children: ["[", marker ?? "?", "]"] });
     }
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": `Source ${source.marker}: ${source.label}`, className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", source.provisional
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("sourceLabel", { marker: source.marker, label: source.label }), className: cn("mx-0.5 inline-flex h-4 min-w-4 -translate-y-px items-center justify-center rounded-sm px-1 align-middle text-2xs font-semibold tabular-nums transition-colors duration-150 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/40", source.provisional
                         ? "border border-dashed border-provisional/60 text-provisional hover:bg-muted"
                         : "bg-accent-weak text-accent-text hover:bg-primary hover:text-primary-foreground"), children: source.marker }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: source }) })] }));
 }
 /** The sources under a reply, as chips that open the same detail. */
 function SourceList({ sources, className, }) {
+    const t = useStrings("citation", citationStrings);
     if (sources.length === 0)
         return null;
-    return (_jsxs("div", { "data-slot": "source-list", className: cn("flex flex-wrap items-center gap-1.5", className), children: [_jsx("span", { className: "mr-0.5 text-xs text-faint-foreground", children: "Sources" }), [...sources]
+    return (_jsxs("div", { "data-slot": "source-list", className: cn("flex flex-wrap items-center gap-1.5", className), children: [_jsx("span", { className: "me-0.5 text-xs text-faint-foreground", children: t("sources") }), [...sources]
                 .sort((a, b) => a.marker - b.marker)
                 .map((s) => {
-                const { Icon } = kindOf(s.kind);
-                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pr-2 pl-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
+                const { Icon } = kindOf(s.kind, t);
+                return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("inline-flex max-w-56 items-center gap-1.5 rounded-md border bg-card py-0.5 pe-2 ps-1 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:border-border-strong hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", s.provisional && "border-dashed"), children: [_jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-sm bg-muted px-1 text-2xs font-semibold tabular-nums", children: s.marker }), _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), _jsx("span", { className: "truncate", children: s.label })] }) }), _jsx(PopoverContent, { align: "start", className: "w-80 p-3", children: _jsx(SourceDetail, { source: s }) })] }, s.id));
             })] }));
 }
 export { Citation, SourceList, SourceDetail };

package/dist/chat/composer.d.ts

@@ -1,5 +1,22 @@
 import * as React from "react";
 import type { Attachment, ComposerScope, EntityRef, MentionOption, SlashCommand } from "../lib/chat.js";
+/** Composer's fixed words; override them under `composer` in LocaleProvider's `strings`. */
+export declare const composerStrings: {
+    placeholder: string;
+    label: string;
+    commands: string;
+    mentions: string;
+    attachFiles: string;
+    production: string;
+    nonProduction: string;
+    offline: string;
+    hintSend: string;
+    hintNewLine: string;
+    hintMention: string;
+    stop: string;
+    send: string;
+    dropFiles: string;
+};
 export type ComposerState = "ready" | "sending" | "streaming" | {
     kind: "locked";
     reason: string;
@@ -14,9 +31,11 @@ export type ComposerState = "ready" | "sending" | "streaming" | {
  * against, and turns to a warning when that is production.
  *
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
- * becomes Stop. A locked composer says why; an offline one says so.
+ * becomes Stop. A locked composer says why; an offline one says so. With
+ * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
+ * own controls to the toolbar, such as a dictation button.
  */
-declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, onRemoveAttachment, placeholder, label, className, }: {
+declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onScopeClick, mentions, commands, references, onReferencesChange, attachments, onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }: {
     /** The text in the box. */
     value: string;
     /** Called with the new text as the person types. */
@@ -43,12 +62,19 @@ declare function Composer({ value, onChange, onSubmit, onStop, state, scope, onS
     attachments?: Attachment[];
     /** Shows an attach button; called with the chosen files. */
     onAttach?: (files: File[]) => void;
+    /**
+     * Which files the attach button's picker offers, as for `<input accept>` (e.g. "image/*,.pdf"). Files pasted or
+     * dropped arrive as they are, so check types where you upload.
+     */
+    accept?: string;
     /** Called when a file is removed. */
     onRemoveAttachment?: (id: string) => void;
-    /** Shown in the empty box. */
+    /** Shown in the empty box; "Ask a question, or describe a change" by default. */
     placeholder?: string;
-    /** The accessible name of the text box. */
+    /** The accessible name of the text box; "Message" by default. */
     label?: string;
+    /** Your own controls in the toolbar, after the attach button: a dictation button, a model picker. */
+    tools?: React.ReactNode;
     className?: string;
 }): React.JSX.Element;
 export { Composer };

package/dist/chat/composer.js

@@ -1,10 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowUp, LoaderCircle, Paperclip, Square, TriangleAlert, X } from "lucide-react";
+import { ArrowUp, LoaderCircle, Paperclip, Square, TriangleAlert } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { EntityChip, useEntityKinds } from "./entity-chip.js";
+import { AttachmentChip } from "./attachment-preview.js";
+import { useStrings } from "../blocks/locale.js";
+/** Composer's fixed words; override them under `composer` in LocaleProvider's `strings`. */
+export const composerStrings = {
+    placeholder: "Ask a question, or describe a change",
+    label: "Message",
+    commands: "Commands",
+    mentions: "Mentions",
+    attachFiles: "Attach files",
+    production: "Production",
+    nonProduction: "Non-production",
+    offline: "You’re offline. Your message will wait here.",
+    hintSend: "send",
+    hintNewLine: "new line",
+    hintMention: "mention",
+    stop: "Stop",
+    send: "Send",
+    dropFiles: "Drop files to attach",
+};
 /** The @ or / token the caret sits in, if any. A / only counts at the start of the message. */
 function findTrigger(value, caret) {
     const before = value.slice(0, caret);
@@ -17,16 +36,9 @@ function findTrigger(value, caret) {
         return null;
     return { char, start, query: m[3] };
 }
-const groupOf = (item) => (item.type === "command" ? "Commands" : item.option.group);
-function formatSize(bytes) {
-    if (bytes === undefined)
-        return null;
-    if (bytes < 1024)
-        return `${bytes} B`;
-    if (bytes < 1024 * 1024)
-        return `${Math.round(bytes / 1024)} KB`;
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
-}
+const groupOf = (item, commandsLabel = "Commands") => (item.type === "command" ? commandsLabel : item.option.group);
+/** Whether a drag carries files (not text or a link being dragged around the page). */
+const hasFiles = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files");
 /**
  * Where a person asks. Mentions (@) attach things in the user's system as chips the agent
  * receives as references, not as text it has to parse; slash commands (/) start
@@ -34,16 +46,24 @@ function formatSize(bytes) {
  * against, and turns to a warning when that is production.
  *
  * Enter sends, Shift+Enter breaks a line. While an agent replies the send button
- * becomes Stop. A locked composer says why; an offline one says so.
+ * becomes Stop. A locked composer says why; an offline one says so. With
+ * `onAttach`, files can also be pasted or dropped onto it. `tools` adds your
+ * own controls to the toolbar, such as a dictation button.
  */
-function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, onRemoveAttachment, placeholder = "Ask a question, or describe a change", label = "Message", className, }) {
+function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, onScopeClick, mentions = [], commands = [], references = [], onReferencesChange, attachments = [], onAttach, accept, onRemoveAttachment, placeholder: placeholderProp, label: labelProp, tools, className, }) {
     const kindOf = useEntityKinds();
+    const t = useStrings("composer", composerStrings);
+    const placeholder = placeholderProp ?? t("placeholder");
+    const label = labelProp ?? t("label");
     const id = React.useId();
     const textarea = React.useRef(null);
+    // Files dragged over the composer: a count of enter/leave pairs, since child elements fire their own.
+    const [dragDepth, setDragDepth] = React.useState(0);
     const fileInput = React.useRef(null);
     const [trigger, setTrigger] = React.useState(null);
     const [active, setActive] = React.useState(0);
     const locked = typeof state === "object" ? state : null;
+    const canAttach = Boolean(onAttach) && !locked;
     const busy = state === "sending" || state === "streaming";
     const canSend = !locked && !busy && (value.trim().length > 0 || references.length > 0);
     const items = React.useMemo(() => {
@@ -143,26 +163,55 @@ function Composer({ value, onChange, onSubmit, onStop, state = "ready", scope, o
     const production = !!scope?.production;
     const listId = `${id}-menu`;
     const optionId = (i) => `${id}-opt-${i}`;
-    return (_jsxs("div", { "data-slot": "composer", className: cn("@container relative", className), children: [menuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": trigger?.char === "/" ? "Commands" : "Mentions", className: "absolute inset-x-0 bottom-full z-20 mb-2 max-h-72 overflow-y-auto rounded-xl border bg-popover p-1 shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: items.map((item, i) => {
-                    const group = groupOf(item);
+    return (_jsxs("div", { "data-slot": "composer", "data-dragging": dragDepth > 0 || undefined, className: cn("@container relative", className), onDragEnter: (e) => {
+            if (!canAttach || !hasFiles(e))
+                return;
+            e.preventDefault();
+            setDragDepth((d) => d + 1);
+        }, onDragOver: (e) => {
+            if (!hasFiles(e))
+                return;
+            // Always claim a file drag, so a drop that can't attach doesn't open the file in place of the app.
+            e.preventDefault();
+            e.dataTransfer.dropEffect = canAttach ? "copy" : "none";
+        }, onDragLeave: () => setDragDepth((d) => Math.max(0, d - 1)), onDrop: (e) => {
+            if (!hasFiles(e))
+                return;
+            e.preventDefault();
+            setDragDepth(0);
+            if (!canAttach)
+                return;
+            const files = Array.from(e.dataTransfer.files);
+            if (files.length)
+                onAttach(files);
+        }, children: [dragDepth > 0 && (_jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 z-30 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary bg-card/90 text-sm font-medium text-accent-text", children: t("dropFiles") })), menuOpen && (_jsx("div", { id: listId, role: "listbox", "aria-label": trigger?.char === "/" ? t("commands") : t("mentions"), className: "absolute inset-x-0 bottom-full z-20 mb-2 max-h-72 overflow-y-auto rounded-xl border bg-popover p-1 shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: items.map((item, i) => {
+                    const group = groupOf(item, t("commands"));
                     const prev = items[i - 1];
-                    const header = !prev || groupOf(prev) !== group ? group : null;
+                    const header = !prev || groupOf(prev, t("commands")) !== group ? group : null;
                     const Icon = item.type === "mention" && item.option.entity ? kindOf(item.option.entity.kind).Icon : null;
                     return (_jsxs(React.Fragment, { children: [header && _jsx("p", { className: "px-2 pt-2 pb-1 text-2xs font-medium text-faint-foreground", children: header }), _jsx("div", { id: optionId(i), role: "option", tabIndex: -1, "aria-selected": i === active, onMouseDown: (e) => {
                                     e.preventDefault();
                                     choose(item);
-                                }, onMouseMove: () => setActive(i), className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm aria-selected:bg-accent", children: item.type === "command" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-mono text-xs text-accent-text", children: ["/", item.command.name] }), item.command.args && _jsx("span", { className: "font-mono text-xs text-faint-foreground", children: item.command.args }), _jsx("span", { className: "ml-auto truncate text-xs text-muted-foreground", children: item.command.description })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx("span", { className: "text-xs", children: "@" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.option.label }), (item.option.description ?? item.option.entity?.name) !== item.option.label && (item.option.description ?? item.option.entity?.name) && (_jsx("span", { className: "block truncate font-mono text-2xs text-faint-foreground", children: item.option.description ?? item.option.entity?.name }))] })] })) })] }, item.type === "command" ? item.command.id : item.option.id));
-                }) })), _jsxs("div", { className: cn("rounded-2xl border bg-card shadow-raised transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:shadow-float", locked && "bg-muted shadow-none"), children: [(references.length > 0 || attachments.length > 0) && (_jsxs("div", { className: "flex flex-wrap gap-1.5 px-3 pt-3", children: [references.map((r) => (_jsx(EntityChip, { entity: r, onRemove: (e) => onReferencesChange?.(references.filter((x) => x !== e)) }, `${r.kind}:${r.name}`))), attachments.map((a) => (_jsxs("span", { className: cn("relative inline-flex max-w-56 items-center gap-1.5 overflow-hidden rounded-md border bg-card py-1 pr-1 pl-2 text-xs", a.error && "border-destructive/50"), children: [_jsx(Paperclip, { "aria-hidden": true, className: "size-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: a.name }), _jsx("span", { className: cn("shrink-0 tabular-nums", a.error ? "text-destructive-text" : "text-faint-foreground"), children: a.error ? a.error : a.progress !== undefined ? `${Math.round(a.progress * 100)}%` : formatSize(a.size) }), onRemoveAttachment && (_jsx("button", { type: "button", "aria-label": `Remove ${a.name}`, onClick: () => onRemoveAttachment(a.id), className: "rounded-sm p-0.5 text-faint-foreground hover:bg-accent hover:text-foreground", children: _jsx(X, { className: "size-3" }) })), a.progress !== undefined && !a.error && (_jsx("span", { "aria-hidden": true, className: "absolute bottom-0 left-0 h-0.5 bg-primary transition-[width] duration-300", style: { width: `${a.progress * 100}%` } }))] }, a.id)))] })), _jsx("label", { htmlFor: id, className: "sr-only", children: label }), _jsx("textarea", { ref: textarea, id: id, rows: 1, value: value, disabled: Boolean(locked), placeholder: locked ? undefined : placeholder, onChange: (e) => {
+                                }, onMouseMove: () => setActive(i), className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-sm aria-selected:bg-accent", children: item.type === "command" ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "font-mono text-xs text-accent-text", children: ["/", item.command.name] }), item.command.args && _jsx("span", { className: "font-mono text-xs text-faint-foreground", children: item.command.args }), _jsx("span", { className: "ms-auto truncate text-xs text-muted-foreground", children: item.command.description })] })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: Icon ? _jsx(Icon, { className: "size-3.5" }) : _jsx("span", { className: "text-xs", children: "@" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate", children: item.option.label }), (item.option.description ?? item.option.entity?.name) !== item.option.label && (item.option.description ?? item.option.entity?.name) && (_jsx("span", { className: "block truncate font-mono text-2xs text-faint-foreground", children: item.option.description ?? item.option.entity?.name }))] })] })) })] }, item.type === "command" ? item.command.id : item.option.id));
+                }) })), _jsxs("div", { className: cn("rounded-2xl border bg-card shadow-raised transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:shadow-float", locked && "bg-muted shadow-none"), children: [(references.length > 0 || attachments.length > 0) && (_jsxs("div", { className: "flex flex-wrap gap-1.5 px-3 pt-3", children: [references.map((r) => (_jsx(EntityChip, { entity: r, onRemove: (e) => onReferencesChange?.(references.filter((x) => x !== e)) }, `${r.kind}:${r.name}`))), attachments.map((a) => (_jsx(AttachmentChip, { attachment: a, onRemove: onRemoveAttachment }, a.id)))] })), _jsx("label", { htmlFor: id, className: "sr-only", children: label }), _jsx("textarea", { ref: textarea, id: id, rows: 1, value: value, disabled: Boolean(locked), placeholder: locked ? undefined : placeholder, onChange: (e) => {
                             onChange(e.target.value);
                             requestAnimationFrame(syncTrigger);
                         }, onKeyDown: onKeyDown, onKeyUp: (e) => {
                             if (e.key === "ArrowLeft" || e.key === "ArrowRight")
                                 syncTrigger();
-                        }, onClick: syncTrigger, onBlur: () => setTrigger(null), "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-base leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? "You’re offline. Your message will wait here." : locked.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, tabIndex: -1, "aria-label": "Attach files", className: "hidden", onChange: (e) => {
+                        }, onClick: syncTrigger, onBlur: () => setTrigger(null), onPaste: (e) => {
+                            // Pasted files (a screenshot, files copied in Finder) attach; pasted text is typed as usual.
+                            const files = Array.from(e.clipboardData?.files ?? []);
+                            if (!files.length || !canAttach)
+                                return;
+                            onAttach(files);
+                            if (!e.clipboardData.getData("text/plain"))
+                                e.preventDefault();
+                        }, "aria-controls": menuOpen ? listId : undefined, "aria-activedescendant": menuOpen ? optionId(active) : undefined, "aria-autocomplete": "list", "aria-describedby": locked ? `${id}-locked` : undefined, className: cn("block max-h-60 min-h-12 w-full resize-none bg-transparent px-4 pt-3 pb-1 text-prose leading-relaxed outline-none [field-sizing:content] placeholder:text-faint-foreground disabled:cursor-not-allowed", locked && !value && "min-h-0 h-3 pt-3 pb-0") }), locked && (_jsx("p", { id: `${id}-locked`, className: "flex items-center gap-1.5 px-4 pb-1 text-sm text-muted-foreground", children: locked.kind === "offline" ? locked.reason ?? t("offline") : locked.reason })), _jsxs("div", { className: "flex items-center gap-1.5 px-2 pt-1 pb-2", children: [onAttach && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, accept: accept, tabIndex: -1, "aria-label": t("attachFiles"), className: "hidden", onChange: (e) => {
                                             const files = Array.from(e.target.files ?? []);
                                             if (files.length)
                                                 onAttach(files);
                                             e.target.value = "";
-                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Attach files", disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "Attach files" })] })] })), scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? "Production" : (scope.detail ?? "Non-production")] })] })), _jsxs("span", { className: "ml-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " send \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " new line \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " mention"] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": "Stop", onClick: onStop, className: "ml-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ml-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": "Send", onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ml-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ml-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
+                                        } }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("attachFiles"), disabled: Boolean(locked), onClick: () => fileInput.current?.click(), className: "flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:opacity-40", children: _jsx(Paperclip, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: t("attachFiles") })] })] })), tools, scope && (_jsxs("button", { type: "button", onClick: onScopeClick, disabled: !onScopeClick, className: cn("inline-flex min-w-0 items-center gap-1.5 rounded-lg px-2 py-1 text-xs transition-colors duration-150 enabled:hover:bg-accent", production ? "bg-warning-weak text-warning-text enabled:hover:bg-warning-weak" : "text-muted-foreground"), children: [production ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3 shrink-0" }) : _jsx("span", { "aria-hidden": true, className: "size-1.5 shrink-0 rounded-full bg-success" }), _jsxs("span", { className: "truncate", children: [scope.environment, " \u00B7 ", production ? t("production") : (scope.detail ?? t("nonProduction"))] })] })), _jsxs("span", { className: "ms-auto hidden text-2xs text-faint-foreground @lg:inline", children: [_jsx("kbd", { className: "font-sans", children: "\u21B5" }), " ", t("hintSend"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "\u21E7\u21B5" }), " ", t("hintNewLine"), " \u00B7 ", _jsx("kbd", { className: "font-sans", children: "@" }), " ", t("hintMention")] }), state === "streaming" && onStop ? (_jsx("button", { type: "button", "aria-label": t("stop"), onClick: onStop, className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-foreground text-background transition-transform duration-150 active:scale-95 @lg:ms-1", children: _jsx(Square, { className: "size-3 fill-current" }) })) : (_jsx("button", { type: "button", "aria-label": t("send"), onClick: submit, disabled: !canSend, "aria-busy": state === "sending", className: "ms-auto flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-[background-color,opacity,transform] duration-150 enabled:hover:bg-primary-hover active:scale-95 disabled:opacity-30 @lg:ms-1", children: state === "sending" ? _jsx(LoaderCircle, { className: "size-4 animate-spin" }) : _jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 }) }))] })] })] }));
 }
 export { Composer };

package/dist/chat/context-meter.d.ts

@@ -1,4 +1,13 @@
 import type { ContextSegment } from "../lib/know.js";
+/** ContextMeter's fixed words; override them under `contextMeter` in LocaleProvider's `strings`. */
+export declare const contextMeterStrings: {
+    /** A token count in thousands; `{n}` is already formatted. */
+    thousands: string;
+    label: string;
+    context: string;
+    usage: string;
+    nearlyFull: string;
+};
 /**
  * What fills the model's context budget, as a ring in the composer that
  * opens to a breakdown: system, instructions, Know, the thread, tools, files.

package/dist/chat/context-meter.js

@@ -1,6 +1,17 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { useFormat, useStrings } from "../blocks/locale.js";
+/** ContextMeter's fixed words; override them under `contextMeter` in LocaleProvider's `strings`. */
+export const contextMeterStrings = {
+    /** A token count in thousands; `{n}` is already formatted. */
+    thousands: "{n}k",
+    label: "Context: {used} of {limit} tokens used",
+    context: "Context",
+    usage: "{used} / {limit} tokens",
+    nearlyFull: "Nearly full. Older thread turns will be summarised to make room.",
+};
 const kindColor = {
     system: "var(--chart-5)",
     instructions: "var(--chart-1)",
@@ -9,8 +20,11 @@ const kindColor = {
     tools: "var(--chart-3)",
     files: "var(--faint-foreground)",
 };
-function k(n) {
-    return n >= 1000 ? `${(n / 1000).toFixed(n >= 10_000 ? 0 : 1)}k` : String(n);
+function k(n, format, thousands) {
+    if (n < 1000)
+        return format(n, { useGrouping: false });
+    const digits = n >= 10_000 ? 0 : 1;
+    return thousands(format(n / 1000, { minimumFractionDigits: digits, maximumFractionDigits: digits, useGrouping: false }));
 }
 /**
  * What fills the model's context budget, as a ring in the composer that
@@ -18,13 +32,16 @@ function k(n) {
  * Counts are the service's own token counts; the ring warns past 80%.
  */
 function ContextMeter({ segments, limit, className, }) {
+    const t = useStrings("contextMeter", contextMeterStrings);
+    const fmt = useFormat();
+    const tokens = (n) => k(n, fmt.number, (v) => t("thousands", { n: v }));
     const used = segments.reduce((n, s) => n + s.tokens, 0);
     const pct = Math.min(1, used / limit);
     const warn = pct > 0.8;
     const r = 7;
     const c = 2 * Math.PI * r;
-    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": `Context: ${k(used)} of ${k(limit)} tokens used`, className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), Math.round(pct * 100), "%"] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: ["Context ", _jsxs("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: [k(used), " / ", k(limit), " tokens"] })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
+    return (_jsxs(Popover, { children: [_jsxs(PopoverTrigger, { "aria-label": t("label", { used: tokens(used), limit: tokens(limit) }), className: cn("inline-flex items-center gap-1.5 rounded-md px-1.5 py-1 text-2xs tabular-nums outline-none hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", warn ? "text-warning-text" : "text-muted-foreground", className), children: [_jsxs("svg", { viewBox: "0 0 18 18", className: "size-4 -rotate-90", "aria-hidden": true, children: [_jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: "var(--muted)", strokeWidth: "2.5" }), _jsx("circle", { cx: "9", cy: "9", r: r, fill: "none", stroke: warn ? "var(--warning)" : "var(--primary)", strokeWidth: "2.5", strokeDasharray: `${pct * c} ${c}`, strokeLinecap: "round" })] }), fmt.number(Math.round(pct * 100) / 100, { style: "percent" })] }), _jsxs(PopoverContent, { align: "start", className: "w-72 p-3", children: [_jsxs("p", { className: "flex items-baseline justify-between text-sm font-medium", children: [t("context"), " ", _jsx("span", { className: "text-xs font-normal text-muted-foreground tabular-nums", children: t("usage", { used: tokens(used), limit: tokens(limit) }) })] }), _jsx("div", { "aria-hidden": true, className: "mt-2 flex h-2 overflow-hidden rounded-full bg-muted", children: segments.map((s) => (_jsx("span", { style: { width: `${(s.tokens / limit) * 100}%`, background: kindColor[s.kind] } }, s.label))) }), _jsx("ul", { className: "mt-3 flex flex-col gap-1.5", children: [...segments]
                             .sort((a, b) => b.tokens - a.tokens)
-                            .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: k(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: "Nearly full. Older thread turns will be summarised to make room." })] })] }));
+                            .map((s) => (_jsxs("li", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { "aria-hidden": true, className: "size-2 rounded-xs", style: { background: kindColor[s.kind] } }), _jsx("span", { className: "flex-1", children: s.label }), _jsx("span", { className: "text-muted-foreground tabular-nums", children: tokens(s.tokens) })] }, s.label))) }), warn && _jsx("p", { className: "mt-3 text-xs text-warning-text", children: t("nearlyFull") })] })] }));
 }
 export { ContextMeter };

package/dist/chat/entity-chip.d.ts

@@ -1,6 +1,25 @@
 import * as React from "react";
 import { type LucideIcon } from "lucide-react";
 import type { EntityRef } from "../lib/chat.js";
+/** EntityChip's fixed words; override them under `entityChip` in LocaleProvider's `strings`. */
+export declare const entityChipStrings: {
+    record: string;
+    document: string;
+    file: string;
+    table: string;
+    field: string;
+    person: string;
+    link: string;
+    code: string;
+    workflow: string;
+    report: string;
+    dashboard: string;
+    /** An unregistered kind. */
+    item: string;
+    title: string;
+    titleIn: string;
+    remove: string;
+};
 export type EntityKindInfo = {
     Icon: LucideIcon;
     noun: string;