@hackcove/ui-react 0.9.2 → 0.10.1

package/dist/SidebarLayout.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, focusRing } from "./cx.js";
+import { cx } from "./cx.js";
+import { FoldedColumn } from "./foldedColumn.js";
+import { scrollStopProps, useScrollStop } from "./scrollStop.js";
 import { STICKY_ASIDE_MD, STICKY_SCROLL_MD } from "./stickyColumn.js";
 /**
  * A `rail` of links beside the `children` canvas, in the Container the shell already gives every
@@ -10,9 +12,11 @@ import { STICKY_ASIDE_MD, STICKY_SCROLL_MD } from "./stickyColumn.js";
  * a rail taller than the screen scrolls itself, so its last link is reachable. Below `md` it stacks
  * above the canvas and nothing sticks. A long rail sets `railLabel`:
  * below `md` it then folds behind a disclosure of that name, closed, so the page comes first on a
- * phone, and from `md` it is the same rail. Upgrading from 0.2: the rail no longer has a fill, a
+ * phone, and from `md` it is the same rail; `railLabel` also names the rail's `<aside>` landmark. Upgrading from 0.2: the rail no longer has a fill, a
  * border or a fixed height, and it no longer sits beside the canvas on a phone.
  */
 export function SidebarLayout({ rail, railLabel, children, ...rest }) {
-    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: cx("w-full shrink-0 md:w-56", STICKY_ASIDE_MD), children: _jsx("div", { className: STICKY_SCROLL_MD, children: railLabel === undefined ? (rail) : (_jsxs("details", { className: "group md:[&::details-content]:[content-visibility:visible]", children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 md:hidden [&::-webkit-details-marker]:hidden", focusRing), children: [railLabel, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: "mt-2 md:mt-0", children: rail })] })) }) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
+    const { attach, stop } = useScrollStop();
+    const { props, ring } = scrollStopProps(stop, { label: railLabel });
+    return (_jsxs("div", { ...rest, className: "flex flex-col gap-8 md:flex-row md:gap-10", children: [_jsx("aside", { className: cx("w-full shrink-0 md:w-56", STICKY_ASIDE_MD), "aria-label": railLabel, children: _jsx("div", { ref: attach, ...props, className: cx(STICKY_SCROLL_MD, ring), children: railLabel === undefined ? (rail) : (_jsx(FoldedColumn, { from: "md", label: railLabel, children: rail })) }) }), _jsx("div", { className: "min-w-0 flex-1", children: children })] }));
 }

package/dist/Stack.d.ts

@@ -62,13 +62,21 @@ type StackProps = StackBase & (({
 } & Unstyled<Omit<ComponentPropsWithoutRef<"ol">, "children">>));
 /**
  * A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside
- * it. Its blocks are `gap` apart, `md` by default as in a `Stack`.
+ * it. Its blocks are `gap` apart, `md` by default as in a `Stack`. `rule` draws a hairline under the
+ * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
+ * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export declare function Section({ title, actions, gap, width, children, ...rest }: {
+export declare function Section({ title, actions, rule, gap, width, children, ...rest }: {
     /** A `SectionHeading` at the top, which names the section. */
     title?: ReactNode;
     /** Buttons or links at the end of the title row. */
     actions?: ReactNode;
+    /**
+     * A hairline under the title row across the section's width, `actions` included. Needs a `title`
+     * or `actions`.
+     * @default false
+     */
+    rule?: boolean | undefined;
     /**
      * The space between blocks: `xs` gap-2, `sm` gap-4, `md` gap-6, `lg` gap-8, `xl` gap-12 (gap-16 from `sm`).
      * @default md

package/dist/Stack.js

@@ -49,9 +49,11 @@ function Box({ tag: Tag, ...props }) {
 }
 /**
  * A `<section>` Stack with an optional `SectionHeading` title (which names it) and `actions` beside
- * it. Its blocks are `gap` apart, `md` by default as in a `Stack`.
+ * it. Its blocks are `gap` apart, `md` by default as in a `Stack`. `rule` draws a hairline under the
+ * title row, `actions` included, as `SectionHeading`'s `rule` does for a bare heading. A line
+ * between two sections is a `Divider` in the `Stack` that holds them.
  */
-export function Section({ title, actions, gap = "md", width = "default", children, ...rest }) {
+export function Section({ title, actions, rule = false, gap = "md", width = "default", children, ...rest }) {
     const titleId = useId();
-    return (_jsxs(Stack, { as: "section", ...rest, gap: gap, width: width, "aria-labelledby": title ? titleId : rest["aria-labelledby"], children: [(title || actions) && (_jsxs("div", { className: "flex items-center justify-between gap-4", children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
+    return (_jsxs(Stack, { as: "section", ...rest, gap: gap, width: width, "aria-labelledby": title ? titleId : rest["aria-labelledby"], children: [(title || actions) && (_jsxs("div", { className: cx("flex items-center justify-between gap-4", rule && "border-b border-slate-200/70 pb-2"), children: [title && _jsx(SectionHeading, { id: titleId, children: title }), actions && _jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })] })), children] }));
 }

package/dist/StatusPages.d.ts

@@ -6,15 +6,25 @@ type StatusPageProps = {
     title?: ReactNode;
     /** Replaces the default body copy. */
     children?: ReactNode;
-    /** The primary action; the home link turns outline beside it. */
+    /**
+     * The primary action; the home link turns outline beside it. This is the one way to a button
+     * worded differently: pass `action` and leave out `homeHref`, so there is no "Back to home" link.
+     * There is no label prop.
+     */
     action?: ReactNode;
     /** Adds a "Back to home" button linking here. With neither this nor `renderHome` there is no home link. */
     homeHref?: string;
     /** Draws the home link with the app's own router `<Link>`, as on `Button`. */
     renderHome?: LinkRender;
 } & Passthrough;
-/** 404: the page is not there. */
-export declare function NotFound(props: StatusPageProps): ReactElement;
+/**
+ * 404: the page is not there. `numeral` draws a large "404" above the title, for a site whose 404
+ * is a designed page; the digits are fixed. Off, the page is the title and copy alone.
+ */
+export declare function NotFound({ numeral, ...props }: StatusPageProps & {
+    /** Draws a large "404" above the title. Off by default. The digits are fixed: there is no text prop. */
+    numeral?: boolean | undefined;
+}): ReactElement;
 /**
  * 500 or any failure. `detail` is the error text, shown in a `CodeBlock` under the copy; pass it
  * only where a reader may see it (a request id, a message), never a stack trace. `onRetry` adds a

package/dist/StatusPages.js

@@ -11,17 +11,20 @@ function homeLink(variant, href, render) {
         return null;
     return (_jsx(Button, { href: href, variant: variant, children: "Back to home" }));
 }
-function StatusPage({ copy, title, children, action, homeHref, renderHome, extra, ...rest }) {
+function StatusPage({ copy, title, children, action, homeHref, renderHome, extra, mark, ...rest }) {
     const home = homeLink(action === undefined ? "primary" : "outline", homeHref, renderHome);
-    return (_jsxs(CenteredLayout, { ...rest, title: title ?? copy.title, subtitle: children ?? copy.body, children: [extra, (action || home) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [action, home] }))] }));
+    return (_jsxs(CenteredLayout, { ...rest, mark: mark, title: title ?? copy.title, subtitle: children ?? copy.body, children: [extra, (action || home) && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [action, home] }))] }));
 }
 const retry = (onRetry) => onRetry && _jsx(Button, { onClick: onRetry, children: "Try again" });
-/** 404: the page is not there. */
-export function NotFound(props) {
+/**
+ * 404: the page is not there. `numeral` draws a large "404" above the title, for a site whose 404
+ * is a designed page; the digits are fixed. Off, the page is the title and copy alone.
+ */
+export function NotFound({ numeral = false, ...props }) {
     return (_jsx(StatusPage, { copy: {
             title: "Page not found",
             body: "The page you are looking for does not exist or has moved.",
-        }, ...props }));
+        }, mark: numeral ? (_jsx("p", { className: "text-6xl font-semibold tracking-tight text-violet-600", children: "404" })) : undefined, ...props }));
 }
 /**
  * 500 or any failure. `detail` is the error text, shown in a `CodeBlock` under the copy; pass it

package/dist/Switch.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+import type { Unstyled } from "./props.js";
+import type { Size } from "./size.js";
+type Naming = {
+    /** The text beside the switch; the whole label is a click target. */
+    label: NonNullable<ReactNode>;
+    "aria-label"?: string | undefined;
+} | {
+    label?: undefined;
+    /** A bare switch (a table cell) has no words to name it: this is its name. */
+    "aria-label": string;
+};
+type SwitchProps = Naming & {
+    /** Whether it is on. The caller owns it: there is no uncontrolled mode. */
+    checked: boolean;
+    /** Called with the next value when the person flips it. Not called while `busy`. */
+    onChange: (checked: boolean) => void;
+    /** A muted line under the label that says more. It is the switch's `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * The label's text size and the switch with it.
+     * @default md
+     */
+    size?: Size | undefined;
+    /**
+     * The change is being saved: `aria-busy`, and a click or a key does nothing. It keeps its colour
+     * and its focus, which a native `disabled` would lose when the save starts.
+     */
+    busy?: boolean | undefined;
+} & Unstyled<Omit<ComponentPropsWithoutRef<"button">, "type" | "role" | "children" | "onChange" | "aria-checked" | "aria-busy" | "aria-disabled" | "aria-label">>;
+/**
+ * An on/off switch for a setting that takes effect at once, usually by saving it to a server: a
+ * native `<button role="switch" aria-checked>`. It is controlled: the caller owns `checked` and
+ * flips it in `onChange`. A value sent with a form is a `Checkbox`, not a Switch. Give it a `label`
+ * (the whole label is the click target), or in a table cell leave the label out and name it with
+ * `aria-label`. `description` is a muted line under the label, and the switch's
+ * `aria-describedby`. `size` is `sm`, `md` (the default) or `lg`. `busy` is for the save in
+ * flight: clicks and keys do nothing, and the switch keeps its colour and its focus. `disabled` is
+ * the native one, washed out.
+ */
+export declare function Switch({ label, description, size, busy, "aria-describedby": describedBy, ...rest }: SwitchProps): ReactElement;
+export {};

package/dist/Switch.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, focusRing } from "./cx.js";
+import { useDescription, Words } from "./labelWords.js";
+/**
+ * The label's gap and text, the track, its thumb and the thumb's slide, by `size`. The track is a
+ * 2px border plus 2px of padding, so the thumb is the track's height less 8px and slides the
+ * track's width less 8px less its own width.
+ */
+const SIZE = {
+    sm: { label: "gap-2 text-xs", track: "h-5 w-9", thumb: "h-3 w-3", slide: "translate-x-4" },
+    md: { label: "gap-2.5 text-sm", track: "h-6 w-11", thumb: "h-4 w-4", slide: "translate-x-5" },
+    lg: { label: "gap-3 text-base", track: "h-7 w-13", thumb: "h-5 w-5", slide: "translate-x-6" },
+};
+// Off is an outline of the text colour with a thumb of the same colour; on is the accent filled,
+// with a thumb in its pale text colour. `border-current` and `bg-current` are no palette colour.
+const OFF = "border-current text-slate-500";
+const ON = "border-violet-600 bg-violet-600 text-violet-50";
+/** `not-allowed` for a disabled switch, `progress` for a busy one, and the pointer otherwise. */
+function cursorOf(disabled, busy) {
+    if (disabled)
+        return "cursor-not-allowed";
+    return busy ? "cursor-progress" : "cursor-pointer";
+}
+/** A disabled switch washes out as a Button does; a busy one is only a little dimmer. */
+function washOf(disabled, busy) {
+    return cx(cursorOf(disabled, busy), disabled && "opacity-50", busy && "opacity-85");
+}
+/** The switch itself: the track, with the thumb in it. */
+function Track({ checked, onChange, size, busy, disabled, onClick, className, ...rest }) {
+    const { track, thumb, slide } = SIZE[size];
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-busy": busy || undefined, "aria-disabled": busy || undefined, disabled: disabled, className: cx("inline-flex shrink-0 items-center rounded-full border-2 p-0.5", track, checked ? ON : OFF, className, focusRing), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || busy)
+                return;
+            onChange(!checked);
+        }, ...rest, children: _jsx("span", { "aria-hidden": "true", className: cx("block rounded-full bg-current transition-transform motion-reduce:transition-none", thumb, checked ? slide : "translate-x-0") }) }));
+}
+/**
+ * An on/off switch for a setting that takes effect at once, usually by saving it to a server: a
+ * native `<button role="switch" aria-checked>`. It is controlled: the caller owns `checked` and
+ * flips it in `onChange`. A value sent with a form is a `Checkbox`, not a Switch. Give it a `label`
+ * (the whole label is the click target), or in a table cell leave the label out and name it with
+ * `aria-label`. `description` is a muted line under the label, and the switch's
+ * `aria-describedby`. `size` is `sm`, `md` (the default) or `lg`. `busy` is for the save in
+ * flight: clicks and keys do nothing, and the switch keeps its colour and its focus. `disabled` is
+ * the native one, washed out.
+ */
+export function Switch({ label, description, size = "md", busy = false, "aria-describedby": describedBy, ...rest }) {
+    const { descriptionId, describedIds } = useDescription(description, describedBy);
+    const wash = washOf(rest.disabled, busy);
+    const track = (_jsx(Track, { ...rest, size: size, busy: busy, className: label === undefined ? wash : cursorOf(rest.disabled, busy), ...(describedIds ? { "aria-describedby": describedIds } : {}) }));
+    if (label === undefined)
+        return track;
+    const start = descriptionId !== undefined;
+    return (_jsxs("label", { className: cx("inline-flex text-slate-700", start ? "items-start" : "items-center", SIZE[size].label, wash), children: [track, _jsx("span", { className: cx(start && "mt-0.5"), children: _jsx(Words, { label: label, description: description, id: descriptionId }) })] }));
+}

package/dist/TableEditCell.d.ts

@@ -1,13 +1,15 @@
 import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { TableCell } from "./Table.js";
 /**
- * A `TableCell` whose value opens an editor in place. It shows `children` as a button with a dotted
- * underline; a click, Enter or Space swaps it for `renderEditor(close)` and moves the focus into the
- * editor. The cell keeps its own open state. The editor calls `close` when it has saved, and Esc
- * closes it: both put the focus back on the value. A press outside it or Tab out of it closes it too and leaves the
- * focus where it went, so the editor saves its value on its own change or submit, never on a close.
- * Put the control in the cell itself, not in a popover of its own, which counts as outside. Takes
- * `TableCell`'s `align`, `tone`, `numeric`, `mono`, `indent` and `secondary`.
+ * A `TableCell` whose value opens an editor in place: a cell that holds one `InlineEdit` and
+ * nothing else. It shows `children` as a button with a dotted underline; a click, Enter or Space
+ * swaps it for `renderEditor(close)` and moves the focus into the editor. The editor calls `close`
+ * when it has saved, and Esc closes it: both put the focus back on the value. A press outside it or
+ * Tab out of it closes it too and leaves the focus where it went, so the editor saves its value on
+ * its own change or submit, never on a close. Put the control in the cell itself, not in a popover
+ * of its own, which counts as outside. Takes `TableCell`'s `align`, `tone`, `numeric`, `mono`,
+ * `indent` and `secondary`. For an edit trigger in a cell that holds other content too, put an
+ * `InlineEdit` in a `TableCell`.
  */
 export declare function TableEditCell({ label, renderEditor, children, ...cell }: {
     /** What the button does, for a screen reader, heard after the value: "Edit category". It also names the editor. */

package/dist/TableEditCell.js

@@ -1,58 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { cx, focusRing } from "./cx.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InlineEdit } from "./InlineEdit.js";
 import { TableCell } from "./Table.js";
-/** What takes the focus when the editor opens, unless the editor already took it (`autoFocus`). */
-const FOCUSABLE = "input, select, textarea, button, a[href]";
-/** Whether `target` is a node outside `box`. */
-function isOutside(box, target) {
-    return target instanceof Node && box !== null && !box.contains(target);
-}
-/** Closes the editor when a press lands outside `box`, for as long as `open`. */
-function useDismissOnOutsidePress(box, open, dismiss) {
-    useEffect(() => {
-        if (!open)
-            return undefined;
-        const onPress = (event) => {
-            if (isOutside(box.current, event.target))
-                dismiss();
-        };
-        document.addEventListener("pointerdown", onPress);
-        return () => document.removeEventListener("pointerdown", onPress);
-    }, [box, open, dismiss]);
-}
 /**
- * A `TableCell` whose value opens an editor in place. It shows `children` as a button with a dotted
- * underline; a click, Enter or Space swaps it for `renderEditor(close)` and moves the focus into the
- * editor. The cell keeps its own open state. The editor calls `close` when it has saved, and Esc
- * closes it: both put the focus back on the value. A press outside it or Tab out of it closes it too and leaves the
- * focus where it went, so the editor saves its value on its own change or submit, never on a close.
- * Put the control in the cell itself, not in a popover of its own, which counts as outside. Takes
- * `TableCell`'s `align`, `tone`, `numeric`, `mono`, `indent` and `secondary`.
+ * A `TableCell` whose value opens an editor in place: a cell that holds one `InlineEdit` and
+ * nothing else. It shows `children` as a button with a dotted underline; a click, Enter or Space
+ * swaps it for `renderEditor(close)` and moves the focus into the editor. The editor calls `close`
+ * when it has saved, and Esc closes it: both put the focus back on the value. A press outside it or
+ * Tab out of it closes it too and leaves the focus where it went, so the editor saves its value on
+ * its own change or submit, never on a close. Put the control in the cell itself, not in a popover
+ * of its own, which counts as outside. Takes `TableCell`'s `align`, `tone`, `numeric`, `mono`,
+ * `indent` and `secondary`. For an edit trigger in a cell that holds other content too, put an
+ * `InlineEdit` in a `TableCell`.
  */
 export function TableEditCell({ label, renderEditor, children, ...cell }) {
-    const [phase, setPhase] = useState("closed");
-    const open = phase === "open";
-    const box = useRef(null);
-    const trigger = useRef(null);
-    const dismiss = useCallback(() => setPhase("closed"), []);
-    const close = () => setPhase("returning");
-    useDismissOnOutsidePress(box, open, dismiss);
-    useEffect(() => {
-        if (phase === "returning")
-            trigger.current?.focus();
-        if (phase === "open" && !box.current?.contains(document.activeElement))
-            box.current?.querySelector(FOCUSABLE)?.focus();
-    }, [phase]);
-    const onKeyDown = (event) => {
-        if (event.key !== "Escape")
-            return;
-        event.preventDefault();
-        event.stopPropagation();
-        close();
-    };
-    return (_jsx(TableCell, { ...cell, children: open ? (_jsx("div", { ref: box, role: "group", "aria-label": label, className: "-mx-2 -my-1", onKeyDown: onKeyDown, onBlur: (event) => {
-                if (isOutside(event.currentTarget, event.relatedTarget))
-                    dismiss();
-            }, children: renderEditor(close) })) : (_jsxs("button", { ref: trigger, type: "button", onClick: () => setPhase("open"), className: cx("-mx-2 -my-1 block w-[calc(100%+1rem)] cursor-pointer rounded-md px-2 py-1 [text-align:inherit] underline decoration-dotted underline-offset-4 transition hover:bg-slate-100", focusRing), children: [children, _jsxs("span", { className: "sr-only", children: [" ", label] })] })) }));
+    return (_jsx(TableCell, { ...cell, children: _jsx(InlineEdit, { label: label, renderEditor: renderEditor, children: children }) }));
 }

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/foldedColumn.d.ts

@@ -0,0 +1,18 @@
+import { type ReactElement, type ReactNode } from "react";
+/** The breakpoint a folded column opens up at: below it the column sits behind a disclosure. */
+export type FoldFrom = "md" | "lg";
+/**
+ * A side column that folds behind a native `<details>` disclosure named `label`, closed, below
+ * `from`, and is the same column, always open, from `from` up. The column stays mounted while it is
+ * folded, so state inside it is kept. Shared by `SidebarLayout` (`md`) and `SideColumn` (`lg`).
+ *
+ * From `from` up the CSS shows the content of the closed `<details>` (the first frame, and a page
+ * that never hydrates). But a closed `<details>` is hidden to the accessibility tree and to axe, so
+ * once mounted an effect also opens it for real from `from` up and closes it again below. There is
+ * no `open` prop, so React never fights the browser's toggle and the server markup stays closed.
+ */
+export declare function FoldedColumn({ from, label, children, }: {
+    from: FoldFrom;
+    label: string;
+    children: ReactNode;
+}): ReactElement;

package/dist/foldedColumn.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cx, focusRing } from "./cx.js";
+// Each variant is written out whole, so Tailwind sees every class.
+const FOLD = {
+    md: {
+        query: "(width >= 48rem)",
+        content: "md:[&::details-content]:[content-visibility:visible]",
+        summary: "md:hidden",
+        body: "md:mt-0",
+    },
+    lg: {
+        query: "(width >= 64rem)",
+        content: "lg:[&::details-content]:[content-visibility:visible]",
+        summary: "lg:hidden",
+        body: "lg:mt-0",
+    },
+};
+/**
+ * A side column that folds behind a native `<details>` disclosure named `label`, closed, below
+ * `from`, and is the same column, always open, from `from` up. The column stays mounted while it is
+ * folded, so state inside it is kept. Shared by `SidebarLayout` (`md`) and `SideColumn` (`lg`).
+ *
+ * From `from` up the CSS shows the content of the closed `<details>` (the first frame, and a page
+ * that never hydrates). But a closed `<details>` is hidden to the accessibility tree and to axe, so
+ * once mounted an effect also opens it for real from `from` up and closes it again below. There is
+ * no `open` prop, so React never fights the browser's toggle and the server markup stays closed.
+ */
+export function FoldedColumn({ from, label, children, }) {
+    const fold = FOLD[from];
+    const details = useRef(null);
+    useEffect(() => {
+        const el = details.current;
+        if (!el || typeof window.matchMedia !== "function")
+            return undefined;
+        const wide = window.matchMedia(fold.query);
+        const sync = () => {
+            el.open = wide.matches;
+        };
+        sync();
+        wide.addEventListener("change", sync);
+        return () => wide.removeEventListener("change", sync);
+    }, [fold.query]);
+    return (_jsxs("details", { ref: details, className: cx("group", fold.content), children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center justify-between rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", fold.summary, focusRing), children: [label, _jsx("svg", { viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", className: "shrink-0 text-slate-500 group-open:rotate-180", children: _jsx("path", { d: "M5 8l5 5 5-5" }) })] }), _jsx("div", { className: cx("mt-2", fold.body), children: children })] }));
+}

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

@@ -12,6 +12,7 @@ export { Container } from "./Container.js";
 export { PageHeader, type PageHeaderProps } from "./PageHeader.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
 export { SidebarLayout } from "./SidebarLayout.js";
+export { SideColumn, type SideColumnWidth } from "./SideColumn.js";
 export { StickyBar } from "./StickyBar.js";
 export { ErrorPage, Forbidden, Maintenance, NotFound, Offline } from "./StatusPages.js";
 export { Cluster, ClusterGrow, type ClusterAlign, type ClusterGap, type ClusterJustify, } from "./Cluster.js";
@@ -27,10 +28,14 @@ export { Callout, type CalloutTone } from "./Callout.js";
 export { ListRow, type ListRowProps } from "./ListRow.js";
 export { OutlineRegion, RegionFrame, type RegionRect } from "./OutlineRegion.js";
 export { type CellTone, type RowTone, Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { InlineEdit } from "./InlineEdit.js";
 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";
@@ -50,6 +55,7 @@ export { Tabs, type Tab, type TabsProps } from "./Tabs.js";
 export { SegmentedControl, type Segment } from "./SegmentedControl.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { Switch } from "./Switch.js";
 export { Radio, RadioGroup } from "./RadioGroup.js";
 export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
@@ -70,6 +76,7 @@ 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 { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, 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";

package/dist/index.js

@@ -12,6 +12,7 @@ export { Container } from "./Container.js";
 export { PageHeader } from "./PageHeader.js";
 export { CardGrid, CenteredLayout, DetailLayout, FormLayout, FullBleedLayout, ListLayout, ProseLayout, } from "./PageLayouts.js";
 export { SidebarLayout } from "./SidebarLayout.js";
+export { SideColumn } from "./SideColumn.js";
 export { StickyBar } from "./StickyBar.js";
 export { ErrorPage, Forbidden, Maintenance, NotFound, Offline } from "./StatusPages.js";
 export { Cluster, ClusterGrow, } from "./Cluster.js";
@@ -27,10 +28,14 @@ export { Callout } from "./Callout.js";
 export { ListRow } from "./ListRow.js";
 export { OutlineRegion, RegionFrame } from "./OutlineRegion.js";
 export { Table, TableBody, TableCell, TableFoot, TableGroupRow, TableHead, TableHeaderCell, TableRow, } from "./Table.js";
+export { InlineEdit } from "./InlineEdit.js";
 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";
@@ -48,6 +53,7 @@ export { Tabs } from "./Tabs.js";
 export { SegmentedControl } from "./SegmentedControl.js";
 export { FilterGroup } from "./FilterGroup.js";
 export { Checkbox } from "./Checkbox.js";
+export { Switch } from "./Switch.js";
 export { Radio, RadioGroup } from "./RadioGroup.js";
 export { FileDrop } from "./FileDrop.js";
 export { CopyButton } from "./CopyButton.js";
@@ -66,6 +72,7 @@ export { Image } from "./Image.js";
 export { MediaTile } from "./MediaTile.js";
 export { ScrollStrip } from "./ScrollStrip.js";
 export { TextLink } from "./TextLink.js";
+export { ToolCallCard } from "./ToolCallCard.js";
 export { Caption, Display, Lead, Overline, PageHeading, SectionHeading, SubsectionHeading, Text, } from "./typography.js";
 export { DateField } from "./DateField.js";
 export { fromISODate, toISODate } from "./isoDate.js";

package/dist/labelWords.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+/** The label, with its muted description under it when there is one. */
+export declare function Words({ label, description, id, }: {
+    label: ReactNode;
+    description: ReactNode;
+    id: string | undefined;
+}): ReactNode;
+/** The description's id (none without a description) and the control's whole `aria-describedby`. */
+export declare function useDescription(description: ReactNode, describedBy: string | undefined): {
+    descriptionId: string | undefined;
+    describedIds: string;
+};

package/dist/labelWords.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+/** The label, with its muted description under it when there is one. */
+export function Words({ label, description, id, }) {
+    if (id === undefined)
+        return label;
+    return (_jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { children: label }), _jsx("span", { id: id, className: "text-xs text-slate-500", children: description })] }));
+}
+/** The description's id (none without a description) and the control's whole `aria-describedby`. */
+export function useDescription(description, describedBy) {
+    const generatedId = useId();
+    const descriptionId = description != null && description !== false ? generatedId : undefined;
+    return { descriptionId, describedIds: [describedBy, descriptionId].filter(Boolean).join(" ") };
+}