@candor-ui/react 1.0.0 → 1.1.0

package/dist/chat/payload.d.ts

@@ -1,16 +1,33 @@
+import * as React from "react";
 import type { PayloadLanguage } from "../lib/chat.js";
+/** Payload's fixed words; override them under `payload` in LocaleProvider's `strings`. */
+export declare const payloadStrings: {
+    copy: string;
+    copied: string;
+    copyFailed: string;
+    shell: string;
+    text: string;
+};
 /**
  * A block of code or query text from the agent: a query it ran, code it
  * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
- * control that only says "Copied" once the clipboard took it.
+ * control that only says "Copied" once the clipboard took it. `bare` drops the frame and
+ * the caption, for a card or panel that already has its own.
+ *
+ * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
+ * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
  */
-declare function Payload({ language, text, title, className, }: {
+declare function Payload({ language, text, title, bare, highlight, className, }: {
     /** Shown as the label, e.g. json, sql, python. Never executed or highlighted as HTML. */
     language: PayloadLanguage;
     /** The code or query, shown as text. */
     text: string;
-    /** What it is, e.g. "The query I ran". */
+    /** What it is, e.g. "The query I ran". Not shown when `bare`. */
     title?: string;
+    /** Just the code: no border, language label or copy button, for inside something that has them. */
+    bare?: boolean;
+    /** Colour the code by its syntax. Left out, it follows the nearest `data-syntax` attribute (off by default). */
+    highlight?: boolean;
     className?: string;
-}): import("react").JSX.Element;
+}): React.JSX.Element;
 export { Payload };

package/dist/chat/payload.js

@@ -1,18 +1,51 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
 import { Check, Copy, X } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { useCopy } from "../lib/use-copy.js";
-const knownLabels = { json: "JSON", xml: "XML", sql: "SQL", yaml: "YAML", html: "HTML", css: "CSS", js: "JavaScript", ts: "TypeScript", tsx: "TSX", python: "Python", bash: "Shell", sh: "Shell", text: "Text" };
+import { tokenize } from "../lib/highlight.js";
+import { useStrings } from "../blocks/locale.js";
+/** Payload's fixed words; override them under `payload` in LocaleProvider's `strings`. */
+export const payloadStrings = {
+    copy: "Copy",
+    copied: "Copied",
+    copyFailed: "Couldn’t copy",
+    shell: "Shell",
+    text: "Text",
+};
+// Language names are the same in every language; only the generic ones ("Shell", "Text") come from the strings table.
+const knownLabels = { json: "JSON", xml: "XML", sql: "SQL", yaml: "YAML", html: "HTML", css: "CSS", js: "JavaScript", ts: "TypeScript", tsx: "TSX", python: "Python" };
+const translatedLabels = { bash: "shell", sh: "shell", text: "text" };
 /** "json" → "JSON", "python" → "Python", short unknown ones upper-cased ("hcl" → "HCL"). */
-const languageLabel = (lang) => knownLabels[lang] ?? (lang.length <= 4 ? lang.toUpperCase() : lang.charAt(0).toUpperCase() + lang.slice(1));
+const languageLabel = (lang, t) => {
+    const key = translatedLabels[lang];
+    if (key)
+        return t(key);
+    return knownLabels[lang] ?? (lang.length <= 4 ? lang.toUpperCase() : lang.charAt(0).toUpperCase() + lang.slice(1));
+};
 /**
  * A block of code or query text from the agent: a query it ran, code it
  * wrote, a config file. Rendered as text in a sunken well, with its language and a copy
- * control that only says "Copied" once the clipboard took it.
+ * control that only says "Copied" once the clipboard took it. `bare` drops the frame and
+ * the caption, for a card or panel that already has its own.
+ *
+ * Code is split into tokens (keywords, strings, comments…) rendered as spans of text, never as HTML. They're coloured
+ * when `highlight` is set, or anywhere under `data-syntax="highlight"` (set it on `<html>` for the whole app).
  */
-function Payload({ language, text, title, className, }) {
+function Payload({ language, text, title, bare = false, highlight, className, }) {
     const { state, copy } = useCopy();
-    return (_jsxs("figure", { "data-slot": "payload", className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " Copied"] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " Couldn\u2019t copy"] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " Copy"] })) })] }), _jsx("pre", { className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", children: _jsx("code", { children: text }) })] }));
+    const t = useStrings("payload", payloadStrings);
+    const syntax = highlight === undefined ? undefined : highlight ? "highlight" : "off";
+    const code = _jsx(Code, { text: text, language: language });
+    if (bare) {
+        return (_jsx("pre", { "data-slot": "payload", "data-bare": "", "data-language": language, "data-syntax": syntax, className: cn("max-h-80 overflow-auto rounded-md bg-sunken px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", className), children: code }));
+    }
+    return (_jsxs("figure", { "data-slot": "payload", "data-language": language, "data-syntax": syntax, className: cn("overflow-hidden rounded-lg border bg-sunken", className), children: [_jsxs("figcaption", { className: "flex items-center justify-between gap-2 border-b px-3 py-1.5", children: [_jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [_jsx("span", { className: "font-medium text-foreground", children: languageLabel(language, t) }), title && _jsxs("span", { children: [" \u00B7 ", title] })] }), _jsx("button", { type: "button", onClick: () => copy(text), "aria-live": "polite", className: "inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-xs text-muted-foreground transition-colors duration-150 outline-none hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: state === "copied" ? (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-3 text-success-text" }), " ", t("copied")] })) : state === "failed" ? (_jsxs(_Fragment, { children: [_jsx(X, { className: "size-3 text-destructive-text" }), " ", t("copyFailed")] })) : (_jsxs(_Fragment, { children: [_jsx(Copy, { className: "size-3" }), " ", t("copy")] })) })] }), _jsx("pre", { className: "max-h-80 overflow-auto px-3 py-2.5 font-mono text-xs leading-relaxed text-foreground", children: code })] }));
+}
+/** The code as token spans. Each token is a text child, so nothing in it is parsed as markup. */
+function Code({ text, language }) {
+    const tokens = React.useMemo(() => tokenize(text, language), [text, language]);
+    return (_jsx("code", { children: tokens.map((tok, i) => tok.type === "plain" ? (_jsx(React.Fragment, { children: tok.text }, i)) : (_jsx("span", { "data-token": tok.type, children: tok.text }, i))) }));
 }
 export { Payload };

package/dist/chat/prompt-suggestions.d.ts

@@ -1,15 +1,19 @@
 import type { PromptSuggestion } from "../lib/chat.js";
+/** PromptSuggestions' fixed words; override them under `promptSuggestions` in LocaleProvider's `strings`. */
+export declare const promptSuggestionsStrings: {
+    label: string;
+};
 /**
  * Prompts to start from. Choosing one puts it in the composer to edit, rather
  * than sending it, because suggestions are model output too. Loading shows
  * placeholders of the right shape; an empty list renders nothing.
  */
-declare function PromptSuggestions({ suggestions, onChoose, label, loading, variant, className, }: {
+declare function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading, variant, className, }: {
     /** What to offer. */
     suggestions: PromptSuggestion[];
     /** Called with the chosen one; put it in the composer to edit rather than sending it. */
     onChoose: (suggestion: PromptSuggestion) => void;
-    /** The heading above the suggestions. */
+    /** The heading above the suggestions; "Try asking" by default. */
     label?: string;
     /** Shows placeholders while suggestions load. */
     loading?: boolean;

package/dist/chat/prompt-suggestions.js

@@ -3,16 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowUpRight, Sparkles } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { Skeleton } from "../ui/skeleton.js";
+import { useStrings } from "../blocks/locale.js";
+/** PromptSuggestions' fixed words; override them under `promptSuggestions` in LocaleProvider's `strings`. */
+export const promptSuggestionsStrings = {
+    label: "Try asking",
+};
 /**
  * Prompts to start from. Choosing one puts it in the composer to edit, rather
  * than sending it, because suggestions are model output too. Loading shows
  * placeholders of the right shape; an empty list renders nothing.
  */
-function PromptSuggestions({ suggestions, onChoose, label = "Try asking", loading = false, variant = "chips", className, }) {
+function PromptSuggestions({ suggestions, onChoose, label: labelProp, loading = false, variant = "chips", className, }) {
+    const t = useStrings("promptSuggestions", promptSuggestionsStrings);
+    const label = labelProp ?? t("label");
     if (!loading && suggestions.length === 0)
         return null;
     return (_jsxs("section", { "data-slot": "prompt-suggestions", "aria-label": label, className: cn("flex flex-col gap-2", className), children: [_jsxs("p", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [_jsx(Sparkles, { "aria-hidden": true, className: "size-3" }), " ", label] }), _jsx("div", { className: cn(variant === "cards" ? "grid gap-2 sm:grid-cols-2" : "flex flex-wrap gap-1.5"), children: loading
                     ? Array.from({ length: variant === "cards" ? 4 : 3 }, (_, i) => (_jsx(Skeleton, { className: variant === "cards" ? "h-16 rounded-xl" : "h-8 w-44 rounded-lg" }, i)))
-                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-left text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm 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", children: s.text }, s.id))) })] }));
+                    : suggestions.map((s) => variant === "cards" ? (_jsxs("button", { type: "button", onClick: () => onChoose(s), className: "group/suggestion flex items-start justify-between gap-3 rounded-xl border bg-card p-3 text-start text-sm transition-[border-color,box-shadow,transform] duration-150 ease-standard outline-none hover:border-border-strong hover:shadow-raised active:scale-[0.99] focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx("span", { children: s.text }), _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-colors group-hover/suggestion:text-accent-text" })] }, s.id)) : (_jsx("button", { type: "button", onClick: () => onChoose(s), className: "rounded-lg border bg-card px-3 py-1.5 text-sm 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", children: s.text }, s.id))) })] }));
 }
 export { PromptSuggestions };

package/dist/chat/reasoning.d.ts

@@ -1,5 +1,20 @@
 import * as React from "react";
 import type { ReasoningEntry } from "../lib/chat.js";
+/** Reasoning's fixed words; override them under `reasoning` in LocaleProvider's `strings`. */
+export declare const reasoningStrings: {
+    verified: string;
+    believed: string;
+    assumed: string;
+    reasoning: string;
+    steps: {
+        one: string;
+        other: string;
+    };
+    assumedCount: string;
+    thinking: string;
+    evidence: string;
+    assumption: string;
+};
 /**
  * The agent's stated reasoning above its answer. Each step says what it rests
  * on: verified against evidence, believed, or assumed (with the assumption

package/dist/chat/reasoning.js

@@ -5,10 +5,18 @@ import { Brain, ChevronRight } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { ShimmerLabel } from "../blocks/streaming-text.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
-const basisLabel = {
+import { useStrings } from "../blocks/locale.js";
+/** Reasoning's fixed words; override them under `reasoning` in LocaleProvider's `strings`. */
+export const reasoningStrings = {
     verified: "Verified",
     believed: "Believed",
     assumed: "Assumed",
+    reasoning: "Reasoning",
+    steps: { one: "{count} step", other: "{count} steps" },
+    assumedCount: "{count} assumed",
+    thinking: "Thinking",
+    evidence: "Evidence:",
+    assumption: "Assumption:",
 };
 const basisTone = {
     verified: "bg-success-weak text-success-text",
@@ -22,10 +30,11 @@ const basisTone = {
  * when it answers.
  */
 function Reasoning({ entries, thinking = false, thoughtFor, className, }) {
+    const t = useStrings("reasoning", reasoningStrings);
     const [open, setOpen] = React.useState(thinking);
     React.useEffect(() => setOpen(thinking), [thinking]);
     const assumed = entries.filter((e) => e.basis === "assumed").length;
-    const summary = thinking ? null : (_jsxs(_Fragment, { children: ["Reasoning", thoughtFor && _jsxs(_Fragment, { children: [" \u00B7 ", thoughtFor] }), " \u00B7 ", entries.length, " ", entries.length === 1 ? "step" : "steps", assumed > 0 && _jsxs("span", { className: "text-warning-text", children: [" \u00B7 ", assumed, " assumed"] })] }));
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1.5 rounded-md py-0.5 pr-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: "Thinking" }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ml-1.5 flex flex-col gap-3 border-l pl-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -left-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: basisLabel[e.basis] })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: ["Evidence: ", e.evidence] }) : _jsxs(_Fragment, { children: ["Assumption: ", e.assumption] }) })] }, e.id))) }) })] }));
+    const summary = thinking ? null : (_jsxs(_Fragment, { children: [t("reasoning"), thoughtFor && _jsxs(_Fragment, { children: [" \u00B7 ", thoughtFor] }), " \u00B7 ", t("steps", { count: entries.length }), assumed > 0 && _jsxs("span", { className: "text-warning-text", children: [" \u00B7 ", t("assumedCount", { count: assumed })] })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "reasoning", className: cn("group/reasoning", className), children: [_jsxs(CollapsibleTrigger, { className: "inline-flex items-center gap-1.5 rounded-md py-0.5 pe-1.5 text-xs text-muted-foreground outline-none transition-colors duration-150 hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(Brain, { "aria-hidden": true, className: cn("size-3.5", thinking && "text-accent-text") }), thinking ? _jsx(ShimmerLabel, { className: "text-xs", children: t("thinking") }) : summary, _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3 transition-transform duration-200 ease-standard group-data-[state=open]/reasoning:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("ol", { className: "mt-2 ms-1.5 flex flex-col gap-3 border-s ps-4", children: entries.map((e) => (_jsxs("li", { className: "relative animate-rise-in", children: [_jsx("span", { "aria-hidden": true, className: "absolute top-1.5 -start-[1.2rem] size-1.5 rounded-full bg-border-strong" }), _jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [_jsx("p", { className: "text-sm font-medium", children: e.title }), _jsx("span", { className: cn("rounded-xs px-1 text-2xs font-medium", basisTone[e.basis]), children: t(e.basis) })] }), e.body && _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: e.body }), _jsx("p", { className: "mt-1 text-xs text-faint-foreground", children: e.basis === "verified" ? _jsxs(_Fragment, { children: [t("evidence"), " ", e.evidence] }) : _jsxs(_Fragment, { children: [t("assumption"), " ", e.assumption] }) })] }, e.id))) }) })] }));
 }
 export { Reasoning };

package/dist/chat/thread-divider.d.ts

@@ -0,0 +1,18 @@
+/** ThreadDivider's fixed words; override them under `threadDivider` in LocaleProvider's `strings`. */
+export declare const threadDividerStrings: {
+    today: string;
+    yesterday: string;
+};
+/**
+ * A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of
+ * the conversation ("Drafting", "Review"). Read by screen readers as a separator with that label. Dates wait for the
+ * browser's clock and time zone, like every time in Candor, so server and browser render the same thing.
+ */
+declare function ThreadDivider({ date, label, className, }: {
+    /** A day to mark, shown as Today, Yesterday or the date in the locale. With neither this nor `label`, a plain rule. */
+    date?: Date | string;
+    /** A chapter or any other label; wins over `date`. */
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { ThreadDivider };

package/dist/chat/thread-divider.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { useFormat, useLocale, useStrings } from "../blocks/locale.js";
+import { useNow } from "../blocks/relative-time.js";
+/** ThreadDivider's fixed words; override them under `threadDivider` in LocaleProvider's `strings`. */
+export const threadDividerStrings = {
+    today: "Today",
+    yesterday: "Yesterday",
+};
+/** The calendar day of a time, as y-m-d in a time zone (the browser's when left out). */
+function dayOf(d, timeZone) {
+    return new Intl.DateTimeFormat("en-CA", { year: "numeric", month: "2-digit", day: "2-digit", ...(timeZone && { timeZone }) }).format(d);
+}
+/**
+ * A rule across the thread with a label in the middle: a day ("Today", "Yesterday", "5 Nov 2026") or a chapter of
+ * the conversation ("Drafting", "Review"). Read by screen readers as a separator with that label. Dates wait for the
+ * browser's clock and time zone, like every time in Candor, so server and browser render the same thing.
+ */
+function ThreadDivider({ date, label, className, }) {
+    const t = useStrings("threadDivider", threadDividerStrings);
+    const fmt = useFormat();
+    const now = useNow();
+    const { timeZone } = useLocale();
+    let text = label ?? "";
+    if (!label && date !== undefined) {
+        const d = typeof date === "string" ? new Date(date) : date;
+        if (now !== null) {
+            const day = dayOf(d, timeZone);
+            const today = dayOf(new Date(now), timeZone);
+            const yesterday = dayOf(new Date(now - 86_400_000), timeZone);
+            text = day === today ? t("today") : day === yesterday ? t("yesterday") : fmt.date(d, "date");
+        }
+        else
+            text = fmt.date(d, "date");
+    }
+    return (_jsxs("div", { "data-slot": "thread-divider", role: "separator", "aria-label": text || undefined, className: cn("flex items-center gap-3 py-1 text-xs font-medium text-muted-foreground", className), children: [_jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" }), _jsx("span", { "aria-hidden": true, children: text }), _jsx("span", { "aria-hidden": true, className: "h-px flex-1 bg-border" })] }));
+}
+export { ThreadDivider };

package/dist/chat/thread-event.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+/**
+ * A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched
+ * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
+ * system lines look the same. Text here is the app's own, never model output.
+ */
+declare function ThreadEvent({ icon: Icon, tone, at, children, className, ...props }: {
+    /** The glyph before the text; `null` for none. Default: an info mark. */
+    icon?: LucideIcon | null;
+    /** "quiet" (the default) or "attention", for an event a reader shouldn't miss. */
+    tone?: "quiet" | "attention";
+    /** When it happened, shown after the text as a relative time. */
+    at?: string;
+    /** What happened, in a short line. */
+    children: React.ReactNode;
+    className?: string;
+} & Omit<React.ComponentProps<"div">, "children">): React.JSX.Element;
+export { ThreadEvent };

package/dist/chat/thread-event.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Info } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { RelativeTime } from "../blocks/relative-time.js";
+/**
+ * A quiet, centred line in a thread for something that happened rather than something said: "Sam joined", "Switched
+ * to the staging environment", "Run stopped by a guardrail". System messages are drawn with it too, so app events and
+ * system lines look the same. Text here is the app's own, never model output.
+ */
+function ThreadEvent({ icon: Icon = Info, tone = "quiet", at, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "thread-event", "data-tone": tone, className: cn("flex items-center justify-center gap-1.5 py-1 text-center text-xs", tone === "attention" ? "text-attention-text" : "text-faint-foreground", className), ...props, children: [Icon && _jsx(Icon, { "aria-hidden": true, className: "size-3 shrink-0" }), children, at && (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx(RelativeTime, { date: at })] }))] }));
+}
+export { ThreadEvent };

package/dist/chat/thread.d.ts

@@ -1,4 +1,9 @@
 import * as React from "react";
+/** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
+export declare const threadStrings: {
+    messages: string;
+    jumpToLatest: string;
+};
 /**
  * The scrolling message column. It follows new content while you're at the
  * bottom and stops following the moment you scroll up to read, offering a

package/dist/chat/thread.js

@@ -3,6 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ArrowDown } from "lucide-react";
 import { cn } from "../lib/utils.js";
+import { useStrings } from "../blocks/locale.js";
+/** Thread's fixed words; override them under `thread` in LocaleProvider's `strings`. */
+export const threadStrings = {
+    messages: "Messages",
+    jumpToLatest: "Jump to latest",
+};
 /**
  * The scrolling message column. It follows new content while you're at the
  * bottom and stops following the moment you scroll up to read, offering a
@@ -10,6 +16,7 @@ import { cn } from "../lib/utils.js";
  * the composer as `footer`.
  */
 function Thread({ children, empty, footer, className, contentClassName, }) {
+    const t = useStrings("thread", threadStrings);
     const scroller = React.useRef(null);
     const content = React.useRef(null);
     const pinnedRef = React.useRef(true);
@@ -51,10 +58,10 @@ function Thread({ children, empty, footer, className, contentClassName, }) {
         lastTop.current = top;
     };
     const hasMessages = React.Children.count(children) > 0;
-    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, className: "h-full overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": "Messages", className: cn("mx-auto flex w-full max-w-3xl flex-col gap-7 px-4 py-6", contentClassName), children: hasMessages ? children : empty }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
+    return (_jsxs("div", { "data-slot": "thread", className: cn("flex min-h-0 flex-col", className), children: [_jsxs("div", { className: "relative min-h-0 flex-1", children: [_jsx("div", { ref: scroller, onScroll: onScroll, className: "h-full overflow-y-auto overscroll-contain", children: _jsx("div", { ref: content, role: "log", "aria-label": t("messages"), className: cn("mx-auto flex w-full max-w-(--cd-thread-width) flex-col gap-7 px-4 py-6", contentClassName), children: hasMessages ? children : empty }) }), !pinned && hasMessages && (_jsxs("button", { type: "button", onClick: () => {
                             pinnedRef.current = true;
                             setPinned(true);
                             toBottom("smooth");
-                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { className: "size-3" }), " Jump to latest"] })), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-3xl px-4 pb-4", children: footer })] }));
+                        }, className: "absolute bottom-3 left-1/2 z-10 inline-flex -translate-x-1/2 items-center gap-1.5 rounded-full border bg-popover px-3 py-1.5 text-xs font-medium shadow-float animate-in fade-in-0 slide-in-from-bottom-1", children: [_jsx(ArrowDown, { "aria-hidden": true, className: "size-3" }), " ", t("jumpToLatest")] })), _jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 bottom-0 h-6 bg-gradient-to-t from-background to-transparent" })] }), footer && _jsx("div", { className: "mx-auto w-full max-w-(--cd-thread-width) px-4 pb-4", children: footer })] }));
 }
 export { Thread };

package/dist/chat/tool-call.d.ts

@@ -1,5 +1,17 @@
 import * as React from "react";
 import type { ToolCall as ToolCallData } from "../lib/chat.js";
+/** ToolCall's fixed words; override them under `toolCall` in LocaleProvider's `strings`. */
+export declare const toolCallStrings: {
+    input: string;
+    output: string;
+    calls: {
+        one: string;
+        other: string;
+    };
+    done: string;
+    failed: string;
+    working: string;
+};
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by

package/dist/chat/tool-call.js

@@ -5,22 +5,35 @@ import { ChevronRight, Wrench } from "lucide-react";
 import { cn } from "../lib/utils.js";
 import { StepMark } from "../blocks/step-list.js";
 import { ShimmerLabel } from "../blocks/streaming-text.js";
-import { statusLabel } from "../lib/status.js";
+import { useStatusLabel } from "../lib/status.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { Payload } from "./payload.js";
+import { useStrings } from "../blocks/locale.js";
+/** ToolCall's fixed words; override them under `toolCall` in LocaleProvider's `strings`. */
+export const toolCallStrings = {
+    input: "Input",
+    output: "Output",
+    calls: { one: "{count} tool call", other: "{count} tool calls" },
+    done: "{count} done",
+    failed: "{count} failed",
+    working: "working",
+};
 /**
  * One tool call as a compact row: what it did in plain words, its status, and
  * how long it took. Expands to the input and output. A failed call opens by
  * default and leads with its error.
  */
 function ToolCall({ call, className, }) {
+    const t = useStrings("toolCall", toolCallStrings);
+    const statusLabel = useStatusLabel();
     const failed = call.status === "failed";
     const [open, setOpen] = React.useState(failed);
     const hasDetail = Boolean(call.input || call.output || call.error);
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-left outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel[call.status]] })] }), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:rotate-90" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ml-[1.375rem] flex flex-col gap-2 border-l pl-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.input && _jsx(Payload, { language: "json", title: "Input", text: call.input }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: "Output", text: call.output })] }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call", "data-status": call.status, className: cn("group/tool", className), children: [_jsxs(CollapsibleTrigger, { disabled: !hasDetail, className: "flex w-full items-center gap-2.5 rounded-md px-1.5 py-1 text-start outline-none transition-colors duration-150 enabled:hover:bg-accent focus-visible:ring-[3px] focus-visible:ring-ring/40", children: [_jsx(StepMark, { status: call.status }), _jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [call.status === "running" ? _jsx(ShimmerLabel, { className: "font-normal", children: call.title }) : call.title, _jsxs("span", { className: "sr-only", children: [" \u2014 ", statusLabel(call.status)] })] }), _jsx("code", { className: "hidden shrink-0 font-mono text-2xs text-faint-foreground sm:inline", children: call.tool }), call.duration && _jsx("span", { className: "shrink-0 text-xs tabular-nums text-faint-foreground", children: call.duration }), hasDetail && (_jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 shrink-0 text-faint-foreground transition-transform duration-200 ease-standard group-data-[state=open]/tool:[transform:rotate(90deg)]" }))] }), _jsx(CollapsibleContent, { className: "data-[state=open]:animate-in data-[state=open]:fade-in-0", children: _jsxs("div", { className: "mt-1 mb-2 ms-[1.375rem] flex flex-col gap-2 border-s ps-3.5", children: [call.error && (_jsx("p", { className: "rounded-md bg-destructive-weak px-2.5 py-1.5 text-xs text-destructive-text", children: call.error })), call.input && _jsx(Payload, { language: "json", title: t("input"), text: call.input }), call.output && _jsx(Payload, { language: call.outputLanguage ?? "text", title: t("output"), text: call.output })] }) })] }));
 }
 /** A run of tool calls, with a count when it's long enough to fold. */
 function ToolCallGroup({ calls, className, }) {
+    const t = useStrings("toolCall", toolCallStrings);
     const done = calls.filter((c) => c.status === "succeeded").length;
     const failed = calls.filter((c) => c.status === "failed").length;
     const running = calls.some((c) => c.status === "running");
@@ -28,6 +41,6 @@ function ToolCallGroup({ calls, className, }) {
     if (calls.length <= 2) {
         return (_jsx("div", { "data-slot": "tool-call-group", className: cn("flex flex-col", className), children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }));
     }
-    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [calls.length, " tool calls", done > 0 && ` · ${done} done`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", failed, " failed"] }), running && " · working"] }), _jsx(ChevronRight, { "aria-hidden": true, className: "size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:rotate-90" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, "data-slot": "tool-call-group", className: cn("group/tools rounded-lg border bg-card", className), children: [_jsxs(CollapsibleTrigger, { className: "flex w-full items-center gap-2 px-3 py-2 text-start text-xs text-muted-foreground outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/40 rounded-lg", children: [_jsx(Wrench, { "aria-hidden": true, className: "size-3.5" }), _jsxs("span", { className: "flex-1", children: [t("calls", { count: calls.length }), done > 0 && ` · ${t("done", { count: done })}`, failed > 0 && _jsxs("span", { className: "text-destructive-text", children: [" \u00B7 ", t("failed", { count: failed })] }), running && ` · ${t("working")}`] }), _jsx(ChevronRight, { "aria-hidden": true, className: "rtl:-scale-x-100 size-3.5 transition-transform duration-200 ease-standard group-data-[state=open]/tools:[transform:rotate(90deg)]" })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "flex flex-col border-t px-1.5 py-1.5", children: calls.map((c) => (_jsx(ToolCall, { call: c }, c.id))) }) })] }));
 }
 export { ToolCall, ToolCallGroup };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
 export * from "./blocks/terms.js";
+export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
 export * from "./blocks/status-dot.js";
 export * from "./blocks/step-list.js";
@@ -14,6 +15,7 @@ export * from "./blocks/surface.js";
 export * from "./chat/agent-avatar.js";
 export * from "./chat/entity-chip.js";
 export * from "./chat/citation.js";
+export * from "./lib/highlight.js";
 export * from "./chat/payload.js";
 export * from "./chat/message-content.js";
 export * from "./chat/message.js";
@@ -21,7 +23,11 @@ export * from "./chat/message-actions.js";
 export * from "./chat/reasoning.js";
 export * from "./chat/tool-call.js";
 export * from "./chat/thread.js";
+export * from "./chat/thread-divider.js";
+export * from "./chat/thread-event.js";
+export * from "./chat/folded-turns.js";
 export * from "./chat/composer.js";
+export * from "./chat/attachment-preview.js";
 export * from "./chat/prompt-suggestions.js";
 export * from "./chat/context-meter.js";
 export * from "./chat/card-registry.js";

package/dist/index.js

@@ -3,6 +3,7 @@ export * from "./lib/status.js";
 export * from "./lib/use-copy.js";
 export * from "./lib/use-shortcut.js";
 export * from "./blocks/terms.js";
+export * from "./blocks/locale.js";
 export * from "./blocks/locked.js";
 export * from "./blocks/status-dot.js";
 export * from "./blocks/step-list.js";
@@ -14,6 +15,7 @@ export * from "./blocks/surface.js";
 export * from "./chat/agent-avatar.js";
 export * from "./chat/entity-chip.js";
 export * from "./chat/citation.js";
+export * from "./lib/highlight.js";
 export * from "./chat/payload.js";
 export * from "./chat/message-content.js";
 export * from "./chat/message.js";
@@ -21,7 +23,11 @@ export * from "./chat/message-actions.js";
 export * from "./chat/reasoning.js";
 export * from "./chat/tool-call.js";
 export * from "./chat/thread.js";
+export * from "./chat/thread-divider.js";
+export * from "./chat/thread-event.js";
+export * from "./chat/folded-turns.js";
 export * from "./chat/composer.js";
+export * from "./chat/attachment-preview.js";
 export * from "./chat/prompt-suggestions.js";
 export * from "./chat/context-meter.js";
 export * from "./chat/card-registry.js";

package/dist/lib/chat.d.ts

@@ -44,7 +44,7 @@ export type MessageAuthor = {
 export type EntityKind = string;
 export type EntityRef = {
     kind: EntityKind;
-    /** The identifier, e.g. "Account.Region__c" or "orders.status". */
+    /** The identifier, e.g. "orders.status" or "billing.invoice.due_date". */
     name: string;
     /** A friendlier label when there is one, e.g. "Region". */
     label?: string;
@@ -65,6 +65,12 @@ export type InlineNode = {
     text: string;
 }
 /** A value read from the environment (a count, a setting). Shown with its source on hover. */
+ | {
+    kind: "measured";
+    text: string;
+    source?: string;
+}
+/** @deprecated Renamed `measured`; still rendered the same way until 2.0. */
  | {
     kind: "orgData";
     text: string;
@@ -136,6 +142,20 @@ export type PayloadLanguage = string;
 export type MessageBlock = {
     kind: "paragraph";
     nodes: InlineNode[];
+}
+/**
+ * Text exactly as someone typed it: line breaks and spacing kept, nothing parsed. For a person's own words, so
+ * `*this*` stays `*this*` and a pasted list keeps its lines.
+ */
+ | {
+    kind: "plain";
+    text: string;
+}
+/** A heading inside a reply. Levels are relative to the message, 1 the largest; the page's own headings sit above. */
+ | {
+    kind: "heading";
+    level: 1 | 2 | 3;
+    nodes: InlineNode[];
 } | {
     kind: "list";
     ordered?: boolean;
@@ -165,6 +185,11 @@ export type MessageBlock = {
     card: string;
     props: unknown;
     summary: string;
+}
+/** Files sent with the message, shown as tiles. New in 1.1: a `switch` over kinds needs a `default` branch. */
+ | {
+    kind: "attachments";
+    files: Attachment[];
 };
 export type MessageStatus = "streaming" | "complete" | "interrupted" | "failed";
 export type Message = {
@@ -209,7 +234,12 @@ export type SlashCommand = {
 export type Attachment = {
     id: string;
     name: string;
+    /** In bytes. */
     size?: number;
+    /** e.g. "image/png", "application/pdf": picks the icon, and allows an image preview. */
+    mediaType?: string;
+    /** A thumbnail your app serves (or a blob: URL), shown for images. Never a URL from model output. */
+    previewUrl?: string;
     /** 0–1 while uploading; absent when done. */
     progress?: number;
     error?: string;

package/dist/lib/highlight.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A small syntax highlighter for code an agent shows: it splits text into typed tokens (keyword, string, comment…),
+ * and Payload renders each as a span. The output is text, never HTML, so nothing in the code can run or inject markup.
+ * It covers the languages agents show most (JS/TS, Python, SQL, JSON, shell, YAML, CSS, HTML/XML, Go, Rust, Java, C)
+ * in a few kilobytes; anything else comes back as one plain token.
+ */
+export type TokenType = "keyword" | "string" | "number" | "comment" | "function" | "property" | "type" | "tag" | "variable" | "operator" | "plain";
+export type Token = {
+    type: TokenType;
+    text: string;
+};
+/** Whether `language` has a grammar here. */
+export declare function canHighlight(language: string): boolean;
+/** The text split into typed tokens; their texts joined give back the input exactly. */
+export declare function tokenize(text: string, language: string): Token[];