@xenosystem/elements-react 0.0.1

package/dist/containers/Table.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLAttributes, ReactElement, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+/**
+ * Dense table PRIMITIVES — the thin, purely-presentational wrappers over the native table elements
+ * (`table`/`thead`/`tbody`/`tr`/`th`/`td`). They carry only the `xeno-*` classes so the locked table
+ * grammar (border-collapse, hairline row rules, muted 600-weight headers, NO zebra striping, NO
+ * vertical rules) lives entirely in `table.css`. Compose them by hand, or reach for {@link DataTable}
+ * for the column/row convenience. Alignment rides the `data-align` seam; a selected row rides the
+ * `selection` axis (`data-selection` + `aria-selected`) — monochrome, never a coloured glow.
+ */
+/** Cell text alignment — the only three the grammar allows. */
+export type ColumnAlign = 'left' | 'center' | 'right';
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    readonly children?: ReactNode;
+}
+export declare function Table({ className, children, ...rest }: TableProps): ReactElement;
+export interface THeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    readonly children?: ReactNode;
+}
+export declare function THead({ className, children, ...rest }: THeadProps): ReactElement;
+export interface TBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    readonly children?: ReactNode;
+}
+export declare function TBody({ className, children, ...rest }: TBodyProps): ReactElement;
+export interface TrProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Presentational selection state — rides the `selection` axis. Omit for a plain row. */
+    readonly selected?: boolean;
+    readonly children?: ReactNode;
+}
+export declare function Tr({ selected, className, children, ...rest }: TrProps): ReactElement;
+export interface ThProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    readonly align?: ColumnAlign;
+    readonly children?: ReactNode;
+}
+export declare function Th({ align, scope, className, children, ...rest }: ThProps): ReactElement;
+export interface TdProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
+    readonly align?: ColumnAlign;
+    readonly children?: ReactNode;
+}
+export declare function Td({ align, className, children, ...rest }: TdProps): ReactElement;

package/dist/containers/Table.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function Table({ className, children, ...rest }) {
+    return (_jsx("table", { className: cx('xeno-table', className), ...rest, children: children }));
+}
+export function THead({ className, children, ...rest }) {
+    return (_jsx("thead", { className: cx('xeno-thead', className), ...rest, children: children }));
+}
+export function TBody({ className, children, ...rest }) {
+    return (_jsx("tbody", { className: cx('xeno-tbody', className), ...rest, children: children }));
+}
+export function Tr({ selected, className, children, ...rest }) {
+    return (_jsx("tr", { className: cx('xeno-tr', className), "data-selection": selected === undefined ? undefined : selected ? 'on' : 'off', "aria-selected": selected, ...rest, children: children }));
+}
+export function Th({ align, scope = 'col', className, children, ...rest }) {
+    return (_jsx("th", { className: cx('xeno-th', className), scope: scope, "data-align": align, ...rest, children: children }));
+}
+export function Td({ align, className, children, ...rest }) {
+    return (_jsx("td", { className: cx('xeno-td', className), "data-align": align, ...rest, children: children }));
+}

package/dist/containers/Tile.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+/**
+ * `<Tile>` — a square icon tile (radius-md, `var(--xeno-surface)`) that centres a single glyph drawn by
+ * the shared `<XenoElement>` renderer, so it inherits the monochrome ink and adds no colour of its own.
+ * The chat's file/attachment affordance: a small surface square holding a file/folder/image glyph.
+ *
+ * `size` is the box edge in px (e.g. 24 / 32); the glyph defaults to half the edge and can be pinned
+ * with `glyphSize`.
+ */
+export interface TileProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style'> {
+    /** The glyph to centre — imported per-id from `@xenosystem/elements`. */
+    readonly icon: ElementDeclaration;
+    /** Box edge in px. Default 32. */
+    readonly size?: number;
+    /** Glyph px. Defaults to half the box edge. */
+    readonly glyphSize?: number;
+}
+export declare function Tile({ icon, size, glyphSize, className, ...rest }: TileProps): ReactElement;

package/dist/containers/Tile.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+export function Tile({ icon, size = 32, glyphSize, className, ...rest }) {
+    const glyph = glyphSize ?? Math.round(size * 0.5);
+    return (_jsx("span", { className: cx('xeno-tile', className), style: { ['--xeno-tile-size']: `${size}px` }, ...rest, children: _jsx(XenoElement, { decl: icon, size: glyph }) }));
+}

package/dist/content/Callout.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+/**
+ * `<Callout>` — a left-ruled aside for markdown blockquotes. A 2px rule, `14px` of inset, muted italic
+ * ink — the quiet, set-apart voice. The `danger` tone is the one place a hue is allowed: the rule (and
+ * the glyph, if there is one) swaps to `--xeno-danger`. `data-tone` on the root is the CSS seam.
+ *
+ * ## Why `danger` gets a glyph and `default` does not
+ *
+ * A default callout is an aside — a quieter voice inside the prose — and stamping a mark on it changes
+ * what it is. A danger callout is the opposite: its whole job is "stop and read this", and a glyph is
+ * the fastest way to say so. So `danger` carries `xeno.alert` unless told otherwise, `default` carries
+ * nothing unless asked, and either can be overridden with `icon`.
+ */
+export type CalloutTone = 'default' | 'danger';
+export interface CalloutProps extends Omit<HTMLAttributes<HTMLQuoteElement>, 'children'> {
+    readonly children?: ReactNode;
+    /** `danger` recolours the rule and glyph to `--xeno-danger`; otherwise the block stays monochrome. */
+    readonly tone?: CalloutTone;
+    /**
+     * A glyph before the text. Defaults to `xeno.alert` on the `danger` tone and to none otherwise; pass
+     * `false` to suppress the danger default, or a declaration to set your own on either tone.
+     */
+    readonly icon?: ElementDeclaration | false;
+    /**
+     * Play the entrance on mount: the rule draws down from the top while the text arrives behind it.
+     * Opt-in, the same way `<Button enter>` is — a page of callouts rendered at once should not all
+     * animate themselves into existence, but a single one that has just SURFACED should.
+     */
+    readonly enter?: boolean;
+}
+export declare function Callout({ children, tone, icon, enter, className, ...rest }: CalloutProps): ReactElement;

package/dist/content/Callout.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+import Alert from '@xenosystem/elements/elements/alert';
+/** Glyph px — sized against the italic body text, not the 24px grid. */
+const GLYPH_PX = 15;
+export function Callout({ children, tone = 'default', icon, enter = false, className, ...rest }) {
+    const glyph = icon === false ? undefined : (icon ?? (tone === 'danger' ? Alert : undefined));
+    return (_jsxs("blockquote", { className: cx('xeno-callout', className), "data-tone": tone, "data-icon": glyph !== undefined ? '' : undefined, "data-enter": enter ? '' : undefined, ...rest, children: [glyph !== undefined && (_jsx("span", { className: "xeno-callout-icon", "aria-hidden": "true", children: _jsx(XenoElement, { decl: glyph, size: GLYPH_PX }) })), glyph !== undefined ? _jsx("div", { className: "xeno-callout-body", children: children }) : children] }));
+}

package/dist/content/Caret.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+/**
+ * `<Caret>` — the thin blinking caret that trails streaming text. A hairline `--xeno-text` block that
+ * blinks via a CSS keyframe; under `prefers-reduced-motion` it holds solid (the keyframe only attaches
+ * under `no-preference`). Purely decorative, so it is `aria-hidden`.
+ */
+export interface CaretProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+}
+export declare function Caret({ className, ...rest }: CaretProps): ReactElement;

package/dist/content/Caret.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function Caret({ className, ...rest }) {
+    return _jsx("span", { className: cx('xeno-caret', className), "aria-hidden": "true", ...rest });
+}

package/dist/content/CodeBlock.d.ts

@@ -0,0 +1,36 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+/**
+ * `<CodeBlock>` — a monochrome, self-contained code surface (NO syntax-colour highlighter, by design).
+ *
+ * Shell is greyscale (canvas card + hairline border); the ink is the code. The header carries an
+ * uppercase mono language label and a right-aligned row of icon actions — Copy (with a ~1.5s "copied"
+ * confirmation), an optional Collapse toggle, and an optional Run (only when `onRun` is given). A
+ * `collapsible` block hides its body behind a "N lines" summary. An optional `output` panel below
+ * reports a run: Running… / ok text / error text (the only place a hue — `--xeno-danger` — appears).
+ *
+ * CSS-first: `data-collapsed` on the root drives body↔summary visibility and the chevron rotation; the
+ * transient copied state swaps the glyph to Check and adds `.is-copied`. Behaviour is hand-rolled — the
+ * copy timeout is created only inside the handler (never at module scope) and cleared on unmount.
+ */
+export type CodeBlockOutputStatus = 'running' | 'ok' | 'error';
+export interface CodeBlockOutput {
+    /** Lifecycle of a run this block triggered. */
+    readonly status: CodeBlockOutputStatus;
+    /** stdout / stderr / result text (omitted while `running`). */
+    readonly text?: string;
+}
+export interface CodeBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The source to display. Rendered verbatim, monochrome, no tokenisation. */
+    readonly code: string;
+    /** Language label, shown uppercased in the header (defaults to `code`). */
+    readonly language?: string;
+    /** When true, the body can fold behind an "N lines" summary. */
+    readonly collapsible?: boolean;
+    /** Initial folded state for a `collapsible` block. */
+    readonly defaultCollapsed?: boolean;
+    /** Show a Run action in the header; called on press. */
+    readonly onRun?: () => void;
+    /** Attach a run-output panel below the body. */
+    readonly output?: CodeBlockOutput;
+}
+export declare function CodeBlock({ code, language, collapsible, defaultCollapsed, onRun, output, className, ...rest }: CodeBlockProps): ReactElement;

package/dist/content/CodeBlock.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { IconButton } from '../controls/IconButton.js';
+import { cx } from '../controls/util.js';
+import Copy from '@xenosystem/elements/elements/copy';
+import Check from '@xenosystem/elements/elements/check';
+import ChevronDown from '@xenosystem/elements/elements/chevron-down';
+import Terminal from '@xenosystem/elements/elements/terminal';
+/** Count of source lines, tolerant of a single trailing newline. */
+function countLines(code) {
+    if (code === '')
+        return 0;
+    return code.replace(/\n$/, '').split('\n').length;
+}
+export function CodeBlock({ code, language, collapsible = false, defaultCollapsed = false, onRun, output, className, ...rest }) {
+    const [copied, setCopied] = useState(false);
+    const [collapsed, setCollapsed] = useState(collapsible ? defaultCollapsed : false);
+    const timer = useRef(undefined);
+    const bodyId = useId();
+    // Clear a pending "copied" timeout if the block unmounts first.
+    useEffect(() => () => {
+        if (timer.current !== undefined)
+            clearTimeout(timer.current);
+    }, []);
+    /**
+     * The acknowledgement waits for the write to actually succeed. Firing it alongside the call meant the
+     * glyph swapped to Check and the label announced "Copied" whether or not anything reached the
+     * clipboard — and `writeText` rejects routinely: an insecure context, a denied permission, or the
+     * very common `NotAllowedError` when the document does not have focus. A control that reports a
+     * result it did not get is worse than one that reports nothing.
+     */
+    const confirm = () => {
+        setCopied(true);
+        if (timer.current !== undefined)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setCopied(false), 1500);
+    };
+    const handleCopy = () => {
+        if (typeof navigator === 'undefined' || !navigator.clipboard)
+            return;
+        navigator.clipboard.writeText(code).then(confirm, () => {
+            // Swallowed on purpose: the failure is already reported by the acknowledgement not appearing,
+            // and an unhandled rejection here would surface as a console error the user cannot act on.
+        });
+    };
+    const lines = countLines(code);
+    const lineLabel = `${lines} ${lines === 1 ? 'line' : 'lines'}`;
+    return (_jsxs("div", { className: cx('xeno-code', className), "data-collapsed": collapsed ? 'true' : 'false', "data-availability": "enabled", ...rest, children: [_jsxs("div", { className: "xeno-code-header", children: [_jsx("span", { className: "xeno-code-lang", children: language ?? 'code' }), _jsxs("div", { className: "xeno-code-actions", children: [onRun && (_jsx(IconButton, { icon: Terminal, "aria-label": "Run", size: "xs", className: "xeno-code-action", onClick: onRun })), collapsible && (_jsx(IconButton, { icon: ChevronDown, "aria-label": collapsed ? 'Expand' : 'Collapse', size: "xs", className: "xeno-code-action xeno-code-collapse", "aria-expanded": !collapsed, "aria-controls": bodyId, onClick: () => setCollapsed((c) => !c) })), _jsx(IconButton, { icon: copied ? Check : Copy, "aria-label": copied ? 'Copied' : 'Copy', size: "xs", className: cx('xeno-code-action', 'xeno-code-copy', copied && 'is-copied'), onClick: handleCopy })] })] }), _jsx("pre", { id: bodyId, className: "xeno-code-body", tabIndex: 0, children: _jsx("code", { className: "xeno-code-code", children: code }) }), collapsible && (_jsx("button", { type: "button", className: "xeno-code-summary", "aria-controls": bodyId, "aria-expanded": !collapsed, onClick: () => setCollapsed(false), children: lineLabel })), output && (_jsx("div", { className: "xeno-code-output", "data-status": output.status, role: "status", "aria-live": "polite", children: output.status === 'running' ? (_jsx("span", { className: "xeno-code-output-running", children: "Running\u2026" })) : (_jsx("pre", { className: "xeno-code-output-text", children: output.text ?? '' })) }))] }));
+}

package/dist/content/Collapsible.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+/**
+ * `<Collapsible>` — a "Thoughts"-style disclosure. The summary row pairs a lightbulb glyph (the Sun
+ * element, the nearest monochrome stand-in) with a label and a rotating chevron; pressing it folds the
+ * body. The body is set apart like a {@link Callout}: a 2px `--xeno-border` left rule with `12px` inset.
+ *
+ * State is controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`, internal state). The open
+ * axis is stamped on the root as `data-open`; the chevron rotates from CSS off that seam — no JS motion.
+ */
+export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The always-visible label of the disclosure row. */
+    readonly summary: ReactNode;
+    /** The foldaway body. */
+    readonly children?: ReactNode;
+    /** Initial open state when uncontrolled. */
+    readonly defaultOpen?: boolean;
+    /** Controlled open state. When set, `onOpenChange` owns transitions. */
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** The summary glyph — imported per-id from `@xenosystem/elements`. Defaults to the lightbulb-like Sun. */
+    readonly icon?: ElementDeclaration;
+}
+export declare function Collapsible({ summary, children, defaultOpen, open, onOpenChange, icon, className, ...rest }: CollapsibleProps): ReactElement;

package/dist/content/Collapsible.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import Sun from '@xenosystem/elements/elements/sun';
+import ChevronDown from '@xenosystem/elements/elements/chevron-down';
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+export function Collapsible({ summary, children, defaultOpen = false, open, onOpenChange, icon = Sun, className, ...rest }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const isOpen = open !== undefined ? open : uncontrolled;
+    const bodyId = useId();
+    const labelId = useId();
+    const toggle = () => {
+        const next = !isOpen;
+        if (open === undefined)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    return (_jsxs("div", { className: cx('xeno-collapsible', className), "data-open": isOpen ? '' : undefined, ...rest, children: [_jsxs("button", { type: "button", className: "xeno-collapsible-summary", "aria-expanded": isOpen, "aria-controls": bodyId, onClick: toggle, children: [_jsx("span", { className: "xeno-collapsible-icon", "aria-hidden": "true", children: _jsx(XenoElement, { decl: icon, size: 16 }) }), _jsx("span", { id: labelId, className: "xeno-collapsible-label", children: summary }), _jsx("span", { className: "xeno-collapsible-chevron", "aria-hidden": "true", children: _jsx(XenoElement, { decl: ChevronDown, size: 16 }) })] }), _jsx("div", { id: bodyId, className: "xeno-collapsible-body", role: "region", "aria-labelledby": labelId, hidden: !isOpen, children: children })] }));
+}

package/dist/content/InlineCode.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<InlineCode>` — a `<code>` run for inline monospace spans inside prose (markdown `` `code` ``).
+ *
+ * Monochrome by design: a `--xeno-surface` chip, `radius-sm` corners, `2px 6px` padding, and — the
+ * reconciliation the app owed — ink at `--xeno-text` rather than the legacy peach. No hue ever appears
+ * here; it is pure shell. Wraps rather than overflowing so a long token cannot blow out the line box.
+ */
+export interface InlineCodeProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    readonly children?: ReactNode;
+}
+export declare function InlineCode({ children, className, ...rest }: InlineCodeProps): ReactElement;

package/dist/content/InlineCode.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function InlineCode({ children, className, ...rest }) {
+    return (_jsx("code", { className: cx('xeno-inline-code', className), ...rest, children: children }));
+}

package/dist/content/ModelPicker.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type ControlSizeToken } from '../controls/util.js';
+/**
+ * `<ModelPicker>` — a model chooser: a trigger button (leading glyph + current model + a chevron) that
+ * opens a panel of options. It is the same monochrome grammar as the controls — a `button` on the
+ * `availability` axis, options on the `selection` axis (`data-selection` + `aria-selected`), and a
+ * hand-rolled overlay (a relative wrapper + an absolute panel, no portal lib).
+ *
+ * Two panel layouts via `layout`:
+ *  - `tray` — an absolute dropdown of grouped rows (a provider header + model rows); the selected row is
+ *    marked with a check glyph on a `--xeno-control` ground.
+ *  - `rail` — a horizontal, scrollable strip of compact chips with left/right fade edges; the selected
+ *    chip sits on `--xeno-control`.
+ *
+ * Controlled selection (`value` / `onChange`) and optionally controlled open state (`open` /
+ * `onOpenChange`). Esc and an outside click close it; keyboard nav is hand-rolled (Arrow keys move the
+ * active option, Home/End jump, Enter/Space select) via `aria-activedescendant`.
+ */
+export interface ModelOption {
+    readonly id: string;
+    readonly label: string;
+    /** The vendor/family label — becomes a group header (tray) or a chip eyebrow (rail). */
+    readonly provider?: string;
+}
+export type ModelPickerLayout = 'tray' | 'rail';
+export interface ModelPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    readonly options: readonly ModelOption[];
+    /** The selected option id. */
+    readonly value: string;
+    readonly onChange?: (id: string) => void;
+    readonly layout?: ModelPickerLayout;
+    readonly size?: ControlSizeToken;
+    /** The trigger's leading glyph — defaults to Gear (pass Terminal, etc.). */
+    readonly triggerIcon?: ElementDeclaration;
+    /** Shown on the trigger when `value` matches no option. */
+    readonly placeholder?: string;
+    readonly disabled?: boolean;
+    /** Controlled open state; omit to let the component own it. */
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Accessible name for the trigger and the listbox. */
+    readonly label?: string;
+}
+export declare function ModelPicker({ options, value, onChange, layout, size, triggerIcon, placeholder, disabled, open, onOpenChange, label, className, ...rest }: ModelPickerProps): ReactElement;

package/dist/content/ModelPicker.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from '../controls/util.js';
+import Gear from '@xenosystem/elements/elements/gear';
+import ChevronDown from '@xenosystem/elements/elements/chevron-down';
+import Check from '@xenosystem/elements/elements/check';
+export function ModelPicker({ options, value, onChange, layout = 'tray', size = 'md', triggerIcon, placeholder = 'Select a model', disabled = false, open, onOpenChange, label, className, ...rest }) {
+    const baseId = useId();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const isControlledOpen = open !== undefined;
+    const [internalOpen, setInternalOpen] = useState(false);
+    const isOpen = isControlledOpen ? open : internalOpen;
+    const [activeIndex, setActiveIndex] = useState(0);
+    const setOpen = (next) => {
+        if (!isControlledOpen)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    };
+    const glyph = iconPx(size);
+    const n = options.length;
+    const selected = options.find((o) => o.id === value);
+    // On open: sync the active option to the selection, focus the panel, and wire outside-click to close.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const idx = options.findIndex((o) => o.id === value);
+        setActiveIndex(idx >= 0 ? idx : 0);
+        panelRef.current?.focus();
+        const onDocPointer = (e) => {
+            if (rootRef.current && !rootRef.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', onDocPointer);
+        return () => document.removeEventListener('mousedown', onDocPointer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOpen]);
+    const close = () => {
+        setOpen(false);
+        triggerRef.current?.focus();
+    };
+    const select = (opt) => {
+        onChange?.(opt.id);
+        setOpen(false);
+        triggerRef.current?.focus();
+    };
+    const move = (delta) => {
+        if (n === 0)
+            return;
+        setActiveIndex((cur) => (cur + delta + n) % n);
+    };
+    const onTriggerKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (!isOpen)
+                setOpen(true);
+        }
+    };
+    const onPanelKeyDown = (e) => {
+        switch (e.key) {
+            case 'Escape':
+                e.preventDefault();
+                close();
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                e.preventDefault();
+                move(1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                e.preventDefault();
+                move(-1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                setActiveIndex(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                setActiveIndex(n > 0 ? n - 1 : 0);
+                break;
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                const opt = options[activeIndex];
+                if (opt)
+                    select(opt);
+                break;
+            }
+            case 'Tab':
+                setOpen(false);
+                break;
+            default:
+                break;
+        }
+    };
+    const availability = disabled ? 'disabled' : 'enabled';
+    const listLabel = label ?? 'Model options';
+    const activeId = `${baseId}-opt-${activeIndex}`;
+    // Group tray rows by provider, preserving first-seen order and each option's flat index (nav is flat).
+    const groups = [];
+    options.forEach((opt, index) => {
+        const found = groups.find((g) => g.provider === opt.provider);
+        if (found)
+            found.items.push({ opt, index });
+        else
+            groups.push({ items: [{ opt, index }], ...(opt.provider !== undefined ? { provider: opt.provider } : {}) });
+    });
+    return (_jsxs("div", { ref: rootRef, className: cx('xeno-model-picker', className), "data-layout": layout, "data-open": isOpen ? 'true' : 'false', "data-availability": availability, ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", className: cx('xeno-btn', 'xeno-mp-trigger'), "data-variant": "secondary", "data-availability": availability, ...sizeAttr(size), disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": isOpen, ...(label !== undefined ? { 'aria-label': label } : {}), onClick: () => {
+                    if (!disabled)
+                        setOpen(!isOpen);
+                }, onKeyDown: onTriggerKeyDown, children: [_jsx(XenoElement, { decl: triggerIcon ?? Gear, size: glyph }), _jsx("span", { className: cx('xeno-mp-label', !selected && 'xeno-mp-placeholder'), children: selected ? selected.label : placeholder }), _jsx("span", { className: "xeno-mp-chevron", "aria-hidden": "true", children: _jsx(XenoElement, { decl: ChevronDown, size: glyph }) })] }), isOpen && layout === 'tray' && (_jsx("div", { ref: panelRef, className: "xeno-mp-panel xeno-mp-panel--tray", role: "listbox", tabIndex: -1, "aria-label": listLabel, "aria-activedescendant": activeId, onKeyDown: onPanelKeyDown, children: groups.map((group, gi) => (_jsxs("div", { className: "xeno-mp-group", role: "group", ...(group.provider !== undefined ? { 'aria-label': group.provider } : {}), children: [group.provider !== undefined && _jsx("div", { className: "xeno-mp-group-label", children: group.provider }), group.items.map(({ opt, index }) => {
+                            const isSel = opt.id === value;
+                            return (_jsxs("div", { id: `${baseId}-opt-${index}`, role: "option", "aria-selected": isSel, className: "xeno-mp-option", "data-selection": isSel ? 'on' : 'off', "data-active": index === activeIndex ? 'true' : undefined, onMouseEnter: () => setActiveIndex(index), onClick: () => select(opt), children: [_jsx("span", { className: "xeno-mp-check", "aria-hidden": "true", children: isSel && _jsx(XenoElement, { decl: Check, size: glyph }) }), _jsx("span", { className: "xeno-mp-option-name", children: opt.label })] }, opt.id));
+                        })] }, group.provider ?? `__ungrouped-${gi}`))) })), isOpen && layout === 'rail' && (_jsx("div", { ref: panelRef, className: "xeno-mp-panel xeno-mp-panel--rail", role: "listbox", "aria-orientation": "horizontal", tabIndex: -1, "aria-label": listLabel, "aria-activedescendant": activeId, onKeyDown: onPanelKeyDown, children: _jsx("div", { className: "xeno-mp-rail-viewport", children: _jsx("div", { className: "xeno-mp-rail", children: options.map((opt, index) => {
+                            const isSel = opt.id === value;
+                            return (_jsxs("div", { id: `${baseId}-opt-${index}`, role: "option", "aria-selected": isSel, className: "xeno-mp-chip", "data-selection": isSel ? 'on' : 'off', "data-active": index === activeIndex ? 'true' : undefined, title: opt.provider !== undefined ? `${opt.provider} · ${opt.label}` : opt.label, onMouseEnter: () => setActiveIndex(index), onClick: () => select(opt), children: [opt.provider !== undefined && _jsx("span", { className: "xeno-mp-chip-provider", children: opt.provider }), _jsx("span", { className: "xeno-mp-chip-label", children: opt.label }), isSel && (_jsx("span", { className: "xeno-mp-chip-check", "aria-hidden": "true", children: _jsx(XenoElement, { decl: Check, size: Math.max(12, glyph - 2) }) }))] }, opt.id));
+                        }) }) }) }))] }));
+}

package/dist/content/SourceCard.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+/**
+ * `sourceInitial` — the placeholder glyph for a source with no favicon: the domain's first letter,
+ * upper-cased, with a leading `www.` stripped. Exported so <SourcesDisclosure> draws the same avatar
+ * fallback as <SourceCard>.
+ */
+export declare function sourceInitial(domain: string): string;
+/**
+ * `<SourceCard>` — a link-embed row: a leading favicon/thumb TILE (square, radius-md — or a placeholder
+ * carrying the domain initial when no favicon), then the title (`--xeno-text`), the domain (`--xeno-muted`),
+ * and an optional snippet. Card radius, a hairline border, and on hover the border lifts to `--xeno-muted`.
+ *
+ * When `href` is set the whole row is an `<a>` (the accessible name is its own text; the tile is decorative).
+ * With no `href` it degrades to a passive `<div>` embed.
+ */
+export interface SourceCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    readonly title: string;
+    readonly domain: string;
+    readonly href?: string;
+    readonly snippet?: string;
+    readonly favicon?: string;
+}
+export declare function SourceCard({ title, domain, href, snippet, favicon, className, ...rest }: SourceCardProps): ReactElement;

package/dist/content/SourceCard.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+/**
+ * `sourceInitial` — the placeholder glyph for a source with no favicon: the domain's first letter,
+ * upper-cased, with a leading `www.` stripped. Exported so <SourcesDisclosure> draws the same avatar
+ * fallback as <SourceCard>.
+ */
+export function sourceInitial(domain) {
+    const cleaned = domain.replace(/^www\./i, '').trim();
+    const first = cleaned[0]; // noUncheckedIndexedAccess: string | undefined
+    return (first ?? '?').toUpperCase();
+}
+export function SourceCard({ title, domain, href, snippet, favicon, className, ...rest }) {
+    const tile = (_jsx("span", { className: "xeno-source-card-tile", "data-placeholder": favicon === undefined ? '' : undefined, "aria-hidden": "true", children: favicon !== undefined ? (_jsx("img", { className: "xeno-source-card-favicon", src: favicon, alt: "", loading: "lazy" })) : (sourceInitial(domain)) }));
+    const body = (_jsxs("span", { className: "xeno-source-card-body", children: [_jsx("span", { className: "xeno-source-card-title", children: title }), _jsx("span", { className: "xeno-source-card-domain", children: domain }), snippet !== undefined && _jsx("span", { className: "xeno-source-card-snippet", children: snippet })] }));
+    const cls = cx('xeno-source-card', className);
+    return href !== undefined ? (_jsxs("a", { className: cls, "data-availability": "enabled", href: href, ...rest, children: [tile, body] })) : (_jsxs("div", { className: cls, "data-availability": "enabled", ...rest, children: [tile, body] }));
+}

package/dist/content/SourcesDisclosure.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactElement } from 'react';
+/** One referenced source — the row model shared by the stack avatar and the expanded <SourceCard>. */
+export interface SourceRef {
+    readonly title: string;
+    readonly domain: string;
+    readonly href?: string;
+    readonly snippet?: string;
+    readonly favicon?: string;
+}
+/**
+ * `<SourcesDisclosure>` — a BORDERLESS header row: a rotating chevron, the word "Sources", an overlapping
+ * favicon STACK (square tiles, -8px overlap, +N overflow), and a mono, muted count. Clicking the header
+ * toggles a panel of <SourceCard> rows.
+ *
+ * Disclosure state is controlled (`open` / `onOpenChange`) or uncontrolled (`defaultOpen`, internal state).
+ * The open axis is stamped on the root as `data-open`; the chevron rotates from CSS off that seam.
+ */
+export interface SourcesDisclosureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    readonly sources: readonly SourceRef[];
+    readonly defaultOpen?: boolean;
+    readonly open?: boolean;
+    readonly onOpenChange?: (open: boolean) => void;
+    /** How many favicons to stack before collapsing the rest into a +N overflow tile. Default 4. */
+    readonly maxAvatars?: number;
+}
+export declare function SourcesDisclosure({ sources, defaultOpen, open, onOpenChange, maxAvatars, className, ...rest }: SourcesDisclosureProps): ReactElement;

package/dist/content/SourcesDisclosure.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import ChevronDown from '@xenosystem/elements/elements/chevron-down';
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+import { SourceCard, sourceInitial } from './SourceCard.js';
+export function SourcesDisclosure({ sources, defaultOpen = false, open, onOpenChange, maxAvatars = 4, className, ...rest }) {
+    const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+    const isOpen = open !== undefined ? open : uncontrolled;
+    const panelId = useId();
+    const toggle = () => {
+        const next = !isOpen;
+        if (open === undefined)
+            setUncontrolled(next);
+        onOpenChange?.(next);
+    };
+    const shown = sources.slice(0, maxAvatars);
+    const overflow = sources.length - shown.length;
+    return (_jsxs("div", { className: cx('xeno-sources', className), "data-open": isOpen ? '' : undefined, ...rest, children: [_jsxs("button", { type: "button", className: "xeno-sources-header", "aria-expanded": isOpen, "aria-controls": panelId, onClick: toggle, children: [_jsx("span", { className: "xeno-sources-chevron", "aria-hidden": "true", children: _jsx(XenoElement, { decl: ChevronDown, size: 16 }) }), _jsx("span", { className: "xeno-sources-label", children: "Sources" }), _jsxs("span", { className: "xeno-sources-stack", "aria-hidden": "true", children: [shown.map((s, i) => (_jsx("span", { className: "xeno-sources-avatar", style: { zIndex: shown.length - i }, children: s.favicon !== undefined ? (_jsx("img", { src: s.favicon, alt: "", loading: "lazy" })) : (sourceInitial(s.domain)) }, i))), overflow > 0 && (_jsxs("span", { className: "xeno-sources-avatar xeno-sources-overflow", style: { zIndex: 0 }, children: ["+", overflow] }))] }), _jsx("span", { className: "xeno-sources-count", children: sources.length })] }), _jsx("div", { id: panelId, className: "xeno-sources-panel", role: "region", "aria-label": "Sources", hidden: !isOpen, children: sources.map((s, i) => (_jsx(SourceCard, { title: s.title, domain: s.domain, ...(s.href !== undefined ? { href: s.href } : {}), ...(s.snippet !== undefined ? { snippet: s.snippet } : {}), ...(s.favicon !== undefined ? { favicon: s.favicon } : {}) }, i))) })] }));
+}

package/dist/controls/Button.d.ts

@@ -0,0 +1,39 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+import { type ControlSizeToken } from './util.js';
+/**
+ * `<Button>` — the first non-icon element: the `composite` that proves the "an icon is not a different
+ * thing from a button" unification (SPEC §3.1). It honours the SAME axes as an icon — `availability`
+ * (enabled/disabled/busy) via `data-availability` — and composes an icon into its slot through the very
+ * same `<XenoElement>` renderer. Variants and sizes come from the design tokens; behaviour is a plain
+ * button (Base UI later).
+ */
+/**
+ * `quiet` is the chrome button: a hairline border at rest, muted ink, and it comes forward only when
+ * you reach for it. It is neither of its neighbours — `outline` is bordered but reads at full strength
+ * and brightens its BORDER on hover, `ghost` has the right ink and no border at all. The set already
+ * held this shape: `danger` is bordered-and-muted with a red hover, and the neutral member of the pair
+ * was simply missing, so products wrote it themselves in five lines of utility classes.
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'outline' | 'quiet' | 'danger';
+export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+    readonly variant?: ButtonVariant;
+    readonly size?: ControlSizeToken;
+    /** A glyph before the label — imported per-id from `@xenosystem/elements`. */
+    readonly leadingIcon?: ElementDeclaration;
+    /** A glyph after the label. */
+    readonly trailingIcon?: ElementDeclaration;
+    /** Work in progress — maps to the `busy` availability. */
+    readonly busy?: boolean;
+    /** Play the entrance animation on mount (the locked "send button" appear: fade + slide + scale up). */
+    readonly enter?: boolean;
+    readonly children?: ReactNode;
+}
+/**
+ * Ref-forwarding, and it is load-bearing rather than tidy. These buttons anchor things: a popover
+ * positions against the one that opened it, a focus-restore puts focus back on it after a dialog
+ * closes. On React 19 `ref` is an ordinary prop and a plain function component would pass it through;
+ * on React 18 — still inside this package's peer range — `createElement` STRIPS it, so the consumer's
+ * `ref.current` stays null and the anchor silently lands at 0,0. Same reasoning as `RadioRow`.
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;