@hackcove/ui-react 0.10.0 → 0.10.2

package/dist/InputShell.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CONTROL_WIDTH, controlClass } from "./control.js";
 import { cx } from "./cx.js";
-/** Where a leading icon sits, and its size, by the control's size. */
+/**
+ * Where a leading icon sits, and its size, by the control's size. The wrapper is a flex box centred
+ * on the field, so the icon's own box centres too, and its one child is sized whether it is a bare
+ * `<svg>` or an `Icon`.
+ */
 const ICON = {
-    sm: "left-2 [&>svg]:h-3.5 [&>svg]:w-3.5",
-    md: "left-3 [&>svg]:h-4 [&>svg]:w-4",
-    lg: "left-4 [&>svg]:h-5 [&>svg]:w-5",
+    sm: "left-2 [&>*]:size-3.5",
+    md: "left-3 [&>*]:size-4",
+    lg: "left-4 [&>*]:size-5",
 };
 /** The prefix text's inset and size, by the control's size. */
 const PREFIX = {
@@ -13,9 +17,17 @@ const PREFIX = {
     md: "pl-3 text-sm",
     lg: "pl-4 text-base",
 };
-/** The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package. */
+/**
+ * The relative wrapper of an `Input` that holds more than the field: a leading `icon` and, for search, the clear button. Not exported from the package.
+ *
+ * Inside a Card or row (`liftInteractive`, which is `isolate`) the field is lifted to `z-10`, and
+ * its opaque background would paint over a z-auto icon. So the icon ranks `z-20` there. It is
+ * scoped to an `isolate` ancestor so a field elsewhere on the page never outranks AppShell's
+ * sticky header (`z-10`). The clear button is a lifted `button` and comes after the field, so it
+ * already sits above it.
+ */
 export function InputShell({ icon, size = "md", width = "full", children, }) {
-    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 -translate-y-1/2 text-slate-400", ICON[size]), children: icon })), children] }));
+    return (_jsxs("div", { className: cx("relative", width === "auto" && "inline-block", width !== "full" && CONTROL_WIDTH[width]), children: [icon !== undefined && (_jsx("span", { "aria-hidden": "true", className: cx("pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center leading-none text-slate-400 in-[.isolate]:z-20", ICON[size]), children: icon })), children] }));
 }
 /**
  * The field box of an `Input` with a `prefix`: the control look and the focus ring sit on the

package/dist/ToolCallCard.d.ts

@@ -0,0 +1,16 @@
+import type { ReactElement, ReactNode } from "react";
+import type { Passthrough } from "./props.js";
+/**
+ * One tool call in a chat: a closed panel whose line says which tool, what it was doing and how it
+ * went; opening it shows the arguments and the result. The status is a word, not only a colour.
+ */
+export declare function ToolCallCard({ name, status, summary, children, ...rest }: {
+    /** The tool's name, set in the monospace face. */
+    name: string;
+    /** How the call went: `running`, `done` or `error`, drawn as Running, Done or Failed. */
+    status: "running" | "done" | "error";
+    /** One line on what it did; a long one is cut off with an ellipsis. */
+    summary?: string | undefined;
+    /** The arguments and the result, shown while open. */
+    children: ReactNode;
+} & Passthrough): ReactElement;

package/dist/ToolCallCard.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Disclosure } from "./Disclosure.js";
+import { Pill } from "./Pill.js";
+const STATUS = {
+    running: { word: "Running", tone: "slate" },
+    done: { word: "Done", tone: "emerald" },
+    error: { word: "Failed", tone: "red" },
+};
+/**
+ * One tool call in a chat: a closed panel whose line says which tool, what it was doing and how it
+ * went; opening it shows the arguments and the result. The status is a word, not only a colour.
+ */
+export function ToolCallCard({ name, status, summary, children, ...rest }) {
+    const { word, tone } = STATUS[status];
+    return (_jsx(Disclosure, { ...rest, bordered: true, summary: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsx("span", { className: "max-w-1/2 shrink-0 truncate font-mono", children: name }), _jsx("span", { className: "min-w-0 flex-1 truncate font-normal text-slate-500", children: summary }), _jsx("span", { className: "shrink-0", children: _jsx(Pill, { tone: tone, children: word }) })] }), children: children }));
+}

package/dist/control.js

@@ -31,7 +31,7 @@ export function controlClass(size = "md", width = "full") {
     return [
         CONTROL_WIDTH[width],
         CONTROL_SIZE[size],
-        `rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`,
+        `rounded-lg border border-slate-300 bg-white text-slate-900 placeholder:text-slate-400 text-ellipsis transition hover:border-violet-400 disabled:opacity-50 ${focusRing}`,
     ]
         .filter(Boolean)
         .join(" ");

package/dist/highlight.d.ts

@@ -4,13 +4,14 @@
  * highlighted code exactly as it recolours everything else.
  *
  * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
- * returns the code as one plain run, so nothing is coloured where no language is named.
+ * returns the code as one plain run, so nothing is coloured where no language is named. The
+ * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
+ * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
+ * `<style>` as CSS) and `yaml`.
  */
-export type CodeLanguage = "text" | "tsx" | "ts" | "json" | "bash" | "css";
-export type TokenKind = "plain" | "comment" | "keyword" | "string" | "number" | "tag" | "attr" | "function";
-export type Token = {
-    text: string;
-    kind: TokenKind;
-};
+import type { Token } from "./highlightKit.js";
+export { consoleCommands } from "./highlightConsole.js";
+export type { Token, TokenKind } from "./highlightKit.js";
+export type CodeLanguage = "text" | "tsx" | "ts" | "js" | "json" | "bash" | "console" | "css" | "html" | "yaml";
 /** The coloured runs of `code`. The text of every token joined back together is `code`. */
 export declare function highlight(code: string, language: CodeLanguage): Token[];

package/dist/highlight.js

@@ -4,8 +4,15 @@
  * highlighted code exactly as it recolours everything else.
  *
  * The grammars are deliberately shallow — enough for examples, not a compiler front end. `text`
- * returns the code as one plain run, so nothing is coloured where no language is named.
+ * returns the code as one plain run, so nothing is coloured where no language is named. The
+ * languages: `text`, `tsx`, `ts`, `js`, `json`, `bash`, `console` (a shell session: `$ ` commands
+ * scanned as bash, everything else output), `css`, `html` (with `<script>` scanned as JS and
+ * `<style>` as CSS) and `yaml`.
  */
+import { scanConsole } from "./highlightConsole.js";
+import { scanHtml } from "./highlightHtml.js";
+import { scanYaml } from "./highlightYaml.js";
+export { consoleCommands } from "./highlightConsole.js";
 /** The coloured runs of `code`. The text of every token joined back together is `code`. */
 export function highlight(code, language) {
     const tokens = [];
@@ -22,9 +29,16 @@ export function highlight(code, language) {
         emit("plain", code);
     else if (language === "bash")
         scanBash(code, emit);
+    else if (language === "console")
+        scanConsole(code, emit, scanBash);
     else if (language === "css")
         scanCss(code, emit);
-    // JSON is JS with no code around it: keys are strings, `true`/`false`/`null` are keywords.
+    else if (language === "html")
+        scanHtml(code, emit, scanJs, scanCss);
+    else if (language === "yaml")
+        scanYaml(code, emit);
+    // JS, TS and TSX share one scanner. JSON is JS with no code around it: keys are strings,
+    // `true`/`false`/`null` are keywords.
     else
         scanJs(code, emit);
     return tokens;

package/dist/highlightConsole.d.ts

@@ -0,0 +1,9 @@
+import type { Emit, Scanner } from "./highlightKit.js";
+/** A shell session: `$ ` is the prompt, the command after it is bash, other lines are output. */
+export declare function scanConsole(code: string, emit: Emit, bash: Scanner): void;
+/**
+ * What a console block's copy button copies: each command without its `$ `, plus the lines that
+ * continue it as written (the trailing `\\` and the indentation kept, so the paste runs), joined by
+ * newlines. Output is left out. A block with no `$ ` line has no commands, so it is copied as given.
+ */
+export declare function consoleCommands(code: string): string;

package/dist/highlightConsole.js

@@ -0,0 +1,42 @@
+import { splitLines } from "./highlightKit.js";
+const CONSOLE_PROMPT = "$ ";
+/**
+ * The lines of a console session, marked: a line that starts with `$ ` is a command (`prompt`), and
+ * so is every line after a command line that ends with `\\`, which continues it. The rest is output.
+ */
+function consoleLines(code) {
+    let continued = false;
+    return splitLines(code).map(({ body, eol }) => {
+        const prompt = !continued && body.startsWith(CONSOLE_PROMPT);
+        const command = prompt || continued;
+        continued = command && body.endsWith("\\");
+        return { body, eol, command, prompt };
+    });
+}
+/** A shell session: `$ ` is the prompt, the command after it is bash, other lines are output. */
+export function scanConsole(code, emit, bash) {
+    for (const { body, eol, command, prompt } of consoleLines(code)) {
+        if (prompt)
+            emit("prompt", CONSOLE_PROMPT);
+        const text = prompt ? body.slice(CONSOLE_PROMPT.length) : body;
+        if (command)
+            bash(text, emit);
+        else
+            emit("plain", text);
+        emit("plain", eol);
+    }
+}
+/**
+ * What a console block's copy button copies: each command without its `$ `, plus the lines that
+ * continue it as written (the trailing `\\` and the indentation kept, so the paste runs), joined by
+ * newlines. Output is left out. A block with no `$ ` line has no commands, so it is copied as given.
+ */
+export function consoleCommands(code) {
+    const lines = consoleLines(code);
+    if (!lines.some((line) => line.prompt))
+        return code;
+    return lines
+        .filter((line) => line.command)
+        .map((line) => (line.prompt ? line.body.slice(CONSOLE_PROMPT.length) : line.body))
+        .join("\n");
+}

package/dist/highlightHtml.d.ts

@@ -0,0 +1,7 @@
+import type { Emit, Scanner } from "./highlightKit.js";
+/**
+ * HTML: comments, the doctype, tags with their attributes (a start tag may span lines), and text,
+ * which is plain. The content of `<script>` and `<style>` runs to the first closing tag of that
+ * name, wherever it falls, and is scanned with `script` (JS) or `style` (CSS).
+ */
+export declare function scanHtml(code: string, emit: Emit, script: Scanner, style: Scanner): void;

package/dist/highlightHtml.js

@@ -0,0 +1,132 @@
+import { sticky } from "./highlightKit.js";
+const OPEN = /<(\/?)([A-Za-z][\w:-]*)/y;
+const DOCTYPE = /<!doctype\b[^>]*>?/iy;
+const SPACE = /\s+/y;
+const ATTR = /[^\s"'<>/=]+/y;
+const UNQUOTED = /[^\s>"'=<`]+/y;
+/** `>` or `/>` where the tag ends. */
+function tagEnd(code, at) {
+    if (code.startsWith("/>", at))
+        return "/>";
+    return code.charAt(at) === ">" ? ">" : undefined;
+}
+/** The value after an `=`: a quoted string (which may span lines) or a bare run, which stays plain. */
+function takeValue(scan) {
+    const { code, at } = scan;
+    const c = code.charAt(at);
+    if (c === '"' || c === "'") {
+        const close = code.indexOf(c, at + 1);
+        const end = close === -1 ? code.length : close + 1;
+        scan.emit("string", code.slice(at, end));
+        scan.at = end;
+        return true;
+    }
+    const bare = sticky(UNQUOTED, code, at);
+    if (bare === undefined)
+        return false;
+    scan.emit("plain", bare);
+    scan.at += bare.length;
+    return true;
+}
+/** One piece of a tag's insides: space, `=`, a value, an attribute name, or a stray character. */
+function tagStep(scan) {
+    const { code, at } = scan;
+    const space = sticky(SPACE, code, at);
+    if (space !== undefined) {
+        scan.emit("plain", space);
+        scan.at += space.length;
+        return;
+    }
+    if (code.charAt(at) === "=") {
+        scan.emit("plain", "=");
+        scan.afterEquals = true;
+        scan.at += 1;
+        return;
+    }
+    const wasAfterEquals = scan.afterEquals;
+    scan.afterEquals = false;
+    if (wasAfterEquals && takeValue(scan))
+        return;
+    const name = sticky(ATTR, code, at);
+    scan.emit(name === undefined ? "plain" : "attr", name ?? code.charAt(at));
+    scan.at += name?.length ?? 1;
+}
+/** The rest of a tag from just past its name; says where it ended and how. */
+function scanTag(code, from, emit) {
+    const scan = { code, emit, at: from, afterEquals: false };
+    while (scan.at < code.length) {
+        const end = tagEnd(code, scan.at);
+        if (end !== undefined) {
+            emit("plain", end);
+            return { end: scan.at + end.length, closed: true, selfClosed: end === "/>" };
+        }
+        tagStep(scan);
+    }
+    return { end: code.length, closed: false, selfClosed: false };
+}
+/** A comment (which may span lines) or a doctype at `at`: where it ends and its colour. */
+function special(code, at) {
+    if (code.startsWith("<!--", at)) {
+        const close = code.indexOf("-->", at + 4);
+        return { end: close === -1 ? code.length : close + 3, kind: "comment" };
+    }
+    const doctype = sticky(DOCTYPE, code, at);
+    return doctype === undefined ? undefined : { end: at + doctype.length, kind: "keyword" };
+}
+/** The `<script>` or `<style>` start tag whose content is another language, if this is one. */
+function rawOf(name, tag, embedded) {
+    if (!tag.closed || tag.selfClosed)
+        return undefined;
+    if (name === "script")
+        return { name, scan: embedded.script };
+    return name === "style" ? { name, scan: embedded.style } : undefined;
+}
+/** The content of a `<script>` or `<style>`, up to the first closing tag of that name, wherever it falls. */
+function rawContent(code, at, raw, emit) {
+    const closing = new RegExp(`</${raw.name}(?=[\\s/>]|$)`, "gi");
+    closing.lastIndex = at;
+    const end = closing.exec(code)?.index ?? code.length;
+    raw.scan(code.slice(at, end), emit);
+    return end;
+}
+/** A tag at a `<`, or a lone `<` that opens nothing. Returns the index to carry on from. */
+function scanElement(code, at, emit, embedded) {
+    OPEN.lastIndex = at;
+    const open = OPEN.exec(code);
+    if (open === null) {
+        emit("plain", "<");
+        return at + 1;
+    }
+    const [whole, slash = "", tagName = ""] = open;
+    emit("plain", `<${slash}`);
+    emit("tag", tagName);
+    const tag = scanTag(code, at + whole.length, emit);
+    const raw = slash === "" ? rawOf(tagName.toLowerCase(), tag, embedded) : undefined;
+    return raw === undefined ? tag.end : rawContent(code, tag.end, raw, emit);
+}
+/** Markup at a `<`: a comment, a doctype or a tag. Returns the index to carry on from. */
+function scanMarkup(code, at, emit, embedded) {
+    const found = special(code, at);
+    if (found === undefined)
+        return scanElement(code, at, emit, embedded);
+    emit(found.kind, code.slice(at, found.end));
+    return found.end;
+}
+/**
+ * HTML: comments, the doctype, tags with their attributes (a start tag may span lines), and text,
+ * which is plain. The content of `<script>` and `<style>` runs to the first closing tag of that
+ * name, wherever it falls, and is scanned with `script` (JS) or `style` (CSS).
+ */
+export function scanHtml(code, emit, script, style) {
+    let at = 0;
+    while (at < code.length) {
+        if (code.charAt(at) === "<") {
+            at = scanMarkup(code, at, emit, { script, style });
+            continue;
+        }
+        const next = code.indexOf("<", at);
+        const end = next === -1 ? code.length : next;
+        emit("plain", code.slice(at, end));
+        at = end;
+    }
+}

package/dist/highlightKit.d.ts

@@ -0,0 +1,16 @@
+/** The pieces the scanners in `highlight*.ts` share. */
+export type TokenKind = "plain" | "comment" | "keyword" | "string" | "number" | "tag" | "attr" | "function" | "prompt";
+export type Token = {
+    text: string;
+    kind: TokenKind;
+};
+export type Emit = (kind: TokenKind, text: string) => void;
+/** A scanner for a whole run of code, given to a scanner of a language that holds another. */
+export type Scanner = (code: string, emit: Emit) => void;
+/** The text a sticky `pattern` matches at `at`, or `undefined`. */
+export declare function sticky(pattern: RegExp, code: string, at: number): string | undefined;
+/** Each line of `code` without its line break, and the break (`\n`, `\r\n` or nothing at the end). */
+export declare function splitLines(code: string): {
+    body: string;
+    eol: string;
+}[];

package/dist/highlightKit.js

@@ -0,0 +1,23 @@
+/** The pieces the scanners in `highlight*.ts` share. */
+/** The text a sticky `pattern` matches at `at`, or `undefined`. */
+export function sticky(pattern, code, at) {
+    pattern.lastIndex = at;
+    return pattern.exec(code)?.[0];
+}
+/** Each line of `code` without its line break, and the break (`\n`, `\r\n` or nothing at the end). */
+export function splitLines(code) {
+    const out = [];
+    let at = 0;
+    for (;;) {
+        const newline = code.indexOf("\n", at);
+        const end = newline === -1 ? code.length : newline;
+        const bodyEnd = end > at && code.charAt(end - 1) === "\r" ? end - 1 : end;
+        out.push({
+            body: code.slice(at, bodyEnd),
+            eol: code.slice(bodyEnd, newline === -1 ? end : end + 1),
+        });
+        if (newline === -1)
+            return out;
+        at = newline + 1;
+    }
+}

package/dist/highlightYaml.d.ts

@@ -0,0 +1,3 @@
+import type { Emit } from "./highlightKit.js";
+/** Line by line. The lines of a block scalar are one plain run: no comment or key is read in them. */
+export declare function scanYaml(code: string, emit: Emit): void;

package/dist/highlightYaml.js

@@ -0,0 +1,143 @@
+import { splitLines, sticky } from "./highlightKit.js";
+const YAML_MARKER = /-(?: +|$)/y;
+const YAML_KEYWORDS = /^(?:true|false|null|~)$/;
+const YAML_NUMBER = /^-?\d[\d._]*$/;
+const YAML_BLOCK_HEADER = /^[|>](?:[1-9][-+]?|[-+][1-9]?)?$/;
+/**
+ * The index past the quoted scalar at `at` in a YAML line, or `undefined`. A single-quoted scalar
+ * escapes a quote by doubling it (`'it''s'`), a double-quoted one with a backslash.
+ */
+function quotedEnd(line, at) {
+    const quote = line.charAt(at);
+    if (quote !== '"' && quote !== "'")
+        return undefined;
+    let i = at + 1;
+    while (i < line.length) {
+        const c = line.charAt(i);
+        if (quote === '"' && c === "\\")
+            i += 2;
+        else if (c !== quote)
+            i += 1;
+        else if (quote === "'" && line.charAt(i + 1) === "'")
+            i += 2;
+        else
+            return i + 1;
+    }
+    return line.length;
+}
+/** What follows a quoted scalar: spaces, then perhaps a comment. */
+function trailing(rest, emit) {
+    const comment = /^(\s+)(#.*)$/.exec(rest);
+    if (comment === null)
+        emit("plain", rest);
+    else {
+        emit("plain", comment[1] ?? "");
+        emit("comment", comment[2] ?? "");
+    }
+}
+/** A quoted key: the closing quote must be followed by `:` and a space or the line end. */
+function quotedKey(line, at) {
+    const end = quotedEnd(line, at);
+    if (end === undefined || end - at < 2 || line.charAt(end - 1) !== line.charAt(at))
+        return undefined;
+    return /^:(?:\s|$)/.test(line.slice(end)) ? { end, kind: "string" } : undefined;
+}
+/** An unquoted key: the text up to the first `:` that is followed by a space or the line end. */
+function plainKey(line, at) {
+    if ("#[{|>".includes(line.charAt(at)))
+        return undefined;
+    const colon = /:(?:\s|$)/.exec(line.slice(at));
+    if (colon === null || colon.index === 0)
+        return undefined;
+    const text = line.slice(at, at + colon.index);
+    if (/(?:^|\s)#/.test(text))
+        return undefined;
+    return { end: at + text.trimEnd().length, kind: "attr" };
+}
+/** The mapping key at `at`: where its text ends (before the `:`) and its colour. */
+function keyAt(line, at) {
+    const first = line.charAt(at);
+    if (first === "")
+        return undefined;
+    return first === '"' || first === "'" ? quotedKey(line, at) : plainKey(line, at);
+}
+/** The colour of an unquoted scalar read whole. */
+function scalarKind(scalar) {
+    if (YAML_NUMBER.test(scalar))
+        return "number";
+    return YAML_KEYWORDS.test(scalar) ? "keyword" : "plain";
+}
+/** A value: a quoted string, or an unquoted scalar up to a comment. True when it opens a block scalar. */
+function emitValue(line, from, emit) {
+    const value = line.slice(from);
+    if (value === "")
+        return false;
+    if (value.startsWith("#")) {
+        emit("comment", value);
+        return false;
+    }
+    const quoted = quotedEnd(line, from);
+    if (quoted !== undefined) {
+        emit("string", line.slice(from, quoted));
+        trailing(line.slice(quoted), emit);
+        return false;
+    }
+    const comment = /\s#/.exec(value);
+    const scalar = line.slice(from, comment === null ? line.length : from + comment.index).trimEnd();
+    emit(scalarKind(scalar), scalar);
+    const commentAt = comment === null ? line.length : from + comment.index + 1;
+    emit("plain", line.slice(from + scalar.length, commentAt));
+    emit("comment", line.slice(commentAt));
+    return YAML_BLOCK_HEADER.test(scalar);
+}
+/** The `- ` markers from `at`: where the content starts, and the column of the last dash. */
+function emitMarkers(line, at, emit) {
+    let column = at;
+    let next = at;
+    for (;;) {
+        const marker = sticky(YAML_MARKER, line, next);
+        if (marker === undefined)
+            return { at: next, column };
+        column = next;
+        emit("plain", marker);
+        next += marker.length;
+    }
+}
+/**
+ * One YAML line. Returns the column its block scalar's lines must be indented past, when it ends
+ * in `|` or `>`: the key's own column, after any `- ` markers (a key-less item uses its dash's).
+ */
+function scanLine(line, emit) {
+    const indent = line.length - line.trimStart().length;
+    emit("plain", line.slice(0, indent));
+    if (line.charAt(indent) === "#") {
+        emit("comment", line.slice(indent));
+        return undefined;
+    }
+    const markers = emitMarkers(line, indent, emit);
+    let { at, column } = markers;
+    const key = keyAt(line, at);
+    if (key !== undefined) {
+        column = at;
+        emit(key.kind, line.slice(at, key.end));
+        const colon = line.indexOf(":", key.end);
+        emit("plain", line.slice(key.end, colon + 1));
+        at = colon + 1;
+    }
+    const gap = line.length - at - line.slice(at).trimStart().length;
+    emit("plain", line.slice(at, at + gap));
+    return emitValue(line, at + gap, emit) ? column : undefined;
+}
+/** Line by line. The lines of a block scalar are one plain run: no comment or key is read in them. */
+export function scanYaml(code, emit) {
+    let block;
+    for (const { body, eol } of splitLines(code)) {
+        const indent = body.length - body.trimStart().length;
+        if (block !== undefined && (body.trim() === "" || indent > block)) {
+            emit("plain", body + eol);
+            continue;
+        }
+        block = scanLine(body, emit);
+        emit("plain", eol);
+    }
+}

package/dist/icons.d.ts

@@ -4,10 +4,10 @@ import type { ReactElement } from "react";
  * two units of padding (its ink lives in 2..22), is drawn as an outline with a 1.5 stroke, round
  * caps and round joins, and never fills: `GLYPH` below is the only place those are set, so an
  * icon's own shapes carry no `fill`, `stroke` or `stroke-width` (`Icon.test.tsx` holds them to
- * that). A name is the idea the icon stands for, not a product.
+ * that). A name is the idea or action the icon stands for, not a product.
  */
-declare const NAMES: readonly ["diff", "baseline", "review", "ci", "self-host", "privacy", "capture", "branch", "theme", "speed"];
-/** The names of the icon set, one per idea. */
+declare const NAMES: readonly ["diff", "baseline", "review", "ci", "self-host", "privacy", "capture", "branch", "theme", "speed", "search", "chevron-right", "chevron-down", "close", "external-link", "settings", "bell", "check", "plus"];
+/** The names of the icon set: feature ideas, then UI glyphs. */
 export type IconName = (typeof NAMES)[number];
 /** The icon `name` as an `<svg>`: the set's one grid, stroke, caps and joins, drawn in `currentColor`. */
 export declare function iconGlyph(name: IconName): ReactElement;

package/dist/icons.js

@@ -4,7 +4,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * two units of padding (its ink lives in 2..22), is drawn as an outline with a 1.5 stroke, round
  * caps and round joins, and never fills: `GLYPH` below is the only place those are set, so an
  * icon's own shapes carry no `fill`, `stroke` or `stroke-width` (`Icon.test.tsx` holds them to
- * that). A name is the idea the icon stands for, not a product.
+ * that). A name is the idea or action the icon stands for, not a product.
  */
 const NAMES = [
     "diff",
@@ -17,6 +17,15 @@ const NAMES = [
     "branch",
     "theme",
     "speed",
+    "search",
+    "chevron-right",
+    "chevron-down",
+    "close",
+    "external-link",
+    "settings",
+    "bell",
+    "check",
+    "plus",
 ];
 const GLYPHS = {
     /** Before and after, side by side: a minus on the left, a plus on the right. */
@@ -39,6 +48,24 @@ const GLYPHS = {
     theme: (_jsx("path", { d: "M12 3.5S5.75 9.9 5.75 14.25a6.25 6.25 0 0 0 12.5 0C18.25 9.9 12 3.5 12 3.5ZM9 14.5a3 3 0 0 0 3 3" })),
     /** Fast: a bolt. */
     speed: _jsx("path", { d: "M13.25 3 5 13.5h6.25L10.75 21 19 10.5h-6.25Z" }),
+    /** Finding something: a magnifying glass, a circle with its handle to the lower right. */
+    search: (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "10.5", cy: "10.5", r: "6.5" }), _jsx("path", { d: "M15.5 15.5 20.5 20.5" })] })),
+    /** A link or next step: an open chevron pointing right. */
+    "chevron-right": _jsx("path", { d: "m9 5.5 6.5 6.5L9 18.5" }),
+    /** A disclosure or menu: an open chevron pointing down. */
+    "chevron-down": _jsx("path", { d: "m5.5 9 6.5 6.5L18.5 9" }),
+    /** Dismiss: two strokes crossing in an X. */
+    close: _jsx("path", { d: "m5.5 5.5 13 13M18.5 5.5l-13 13" }),
+    /** Leaves the site: a box open at its top right, with an arrow out to the top right. */
+    "external-link": (_jsxs(_Fragment, { children: [_jsx("path", { d: "M10.5 6H7a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-3.5" }), _jsx("path", { d: "M14 4h6v6M20 4l-9.5 9.5" })] })),
+    /** Preferences: a cog, a ring of teeth round a hole. */
+    settings: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M10.59 5.35L10.75 3.09L13.25 3.09L13.41 5.35A6.8 6.8 0 0 1 15.7 6.3L17.42 4.81L19.19 6.58L17.7 8.3A6.8 6.8 0 0 1 18.65 10.59L20.91 10.75L20.91 13.25L18.65 13.41A6.8 6.8 0 0 1 17.7 15.7L19.19 17.42L17.42 19.19L15.7 17.7A6.8 6.8 0 0 1 13.41 18.65L13.25 20.91L10.75 20.91L10.59 18.65A6.8 6.8 0 0 1 8.3 17.7L6.58 19.19L4.81 17.42L6.3 15.7A6.8 6.8 0 0 1 5.35 13.41L3.09 13.25L3.09 10.75L5.35 10.59A6.8 6.8 0 0 1 6.3 8.3L4.81 6.58L6.58 4.81L8.3 6.3A6.8 6.8 0 0 1 10.59 5.35Z" }), _jsx("circle", { cx: "12", cy: "12", r: "2.75" })] })),
+    /** Notifications: a bell with its clapper. */
+    bell: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 9.5a6 6 0 0 1 12 0c0 5 2 6.5 2 6.5H4s2-1.5 2-6.5Z" }), _jsx("path", { d: "M10 19.5a2.2 2.2 0 0 0 4 0" })] })),
+    /** Done or selected: a single tick. */
+    check: _jsx("path", { d: "m4.5 12.5 5 5L19.5 7" }),
+    /** Add or create: two strokes crossing, upright. */
+    plus: _jsx("path", { d: "M12 5v14M5 12h14" }),
 };
 /** The icon `name` as an `<svg>`: the set's one grid, stroke, caps and joins, drawn in `currentColor`. */
 export function iconGlyph(name) {

package/dist/index.d.ts

@@ -33,6 +33,9 @@ export { TableEditCell } from "./TableEditCell.js";
 export { EmptyState } from "./EmptyState.js";
 export { Step, Steps } from "./Steps.js";
 export { Timeline, TimelineItem } from "./Timeline.js";
+export { ChatComposer } from "./ChatComposer.js";
+export { ChatMessage } from "./ChatMessage.js";
+export { ChatThread } from "./ChatThread.js";
 export { Code } from "./Code.js";
 export { CodeBlock } from "./CodeBlock.js";
 export type { CodeLanguage } from "./highlight.js";
@@ -73,7 +76,8 @@ export { Image, type ImageAspect, type ImageProps, type ImageWidth } from "./Ima
 export { MediaTile, type MediaTileProps } from "./MediaTile.js";
 export { ScrollStrip, type ScrollStripProps } from "./ScrollStrip.js";
 export { TextLink, type TextLinkSize } from "./TextLink.js";
-export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
+export { ToolCallCard } from "./ToolCallCard.js";
+export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, type SubsectionHeadingSize, Text, type TextTone, type TypographyColor, type TypographyProps, } from "./typography.js";
 export { DateField, type DateFieldProps } from "./DateField.js";
 export { fromISODate, toISODate } from "./isoDate.js";
 export type { CalendarDate } from "@internationalized/date";

package/dist/index.js

@@ -33,6 +33,9 @@ export { TableEditCell } from "./TableEditCell.js";
 export { EmptyState } from "./EmptyState.js";
 export { Step, Steps } from "./Steps.js";
 export { Timeline, TimelineItem } from "./Timeline.js";
+export { ChatComposer } from "./ChatComposer.js";
+export { ChatMessage } from "./ChatMessage.js";
+export { ChatThread } from "./ChatThread.js";
 export { Code } from "./Code.js";
 export { CodeBlock } from "./CodeBlock.js";
 export { CodeExample } from "./CodeExample.js";
@@ -69,6 +72,7 @@ export { Image } from "./Image.js";
 export { MediaTile } from "./MediaTile.js";
 export { ScrollStrip } from "./ScrollStrip.js";
 export { TextLink } from "./TextLink.js";
-export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
+export { ToolCallCard } from "./ToolCallCard.js";
+export { Caption, Display, Lead, Overline, PageHeading, Prose, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";
 export { fromISODate, toISODate } from "./isoDate.js";