@xenosystem/elements-react 0.0.1

package/LICENSE

@@ -0,0 +1,18 @@
+Copyright (c) 2026 XENO Corporation. All rights reserved.
+
+PROPRIETARY AND CONFIDENTIAL.
+
+This software and its source code are the confidential and proprietary property
+of XENO Corporation. No licence, express or implied, is granted to any person to
+use, copy, modify, merge, publish, distribute, sublicense, or sell copies of this
+software, in whole or in part, without the prior written permission of XENO
+Corporation.
+
+Unauthorised copying of this file, via any medium, is strictly prohibited.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
+AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# @xenosystem/elements-react
+
+**Web + Electron renderer**
+
+> Status: 🔵 **planned** — see [`../../SPEC.md`](../../SPEC.md) §13 for the build order.
+
+Interprets `@xenosystem/elements` declarations as React components and web components.
+
+**Not built yet** — Phase 2. The contract lands first, deliberately (`SPEC.md` §13).
+
+## When it is built, it must
+
+1. **Honour every declared axis.** Silently ignoring one produces an element that looks
+   interactive and isn't — the worst failure in the set.
+2. **Never invent state.** No `pressed` binding in the declaration means pressed looks like idle.
+3. **Map input modalities** per `docs/STATE-MODEL.md` §3 — including the **agent** row, or
+   agent-driven UI diverges from what a human would have seen.
+4. **Be visually indistinguishable** from every other renderer given the same declaration. Testable, and tested.
+5. **Add nothing.** No renderer-local colours, timings or easing.
+
+## Hard constraints
+
+- **CSS-first, 0 kb runtime.** Axes become `data-*` attributes; bindings become CSS custom
+  properties and transitions. This diverges from the 2026 norm (@animateicons, LivelyIcons,
+  Itshover all build on `motion/react`) because XENO elements must run inside **sandboxed
+  iframes** and survive **web export**, where a JS animation runtime is weight in every sandbox
+  and a dependency that cannot be removed later.
+- **`motion` is an opt-in entry point only** (`/motion`), for genuinely orchestrated cases —
+  multi-step morphs, physics. ~4.6 kb with `m` + `LazyMotion` vs 34 kb naive. **Never a
+  dependency of the base renderer.**
+- **No barrel.** Per-element entry points, `sideEffects: false`. A single index importing
+  everything is why `lucide-react` is 2.4 MB — and `lucide-react/dynamic` collapses to an empty
+  chunk in production builds.
+- **Base UI is an implementation detail here**, used for composite behaviour and accessibility.
+  It is never exposed as the system's foundation. (Radix stalled after the WorkOS acquisition;
+  Base UI reached v1.0 in Dec 2025 with full-time MUI engineering.)
+- **Components are generated**, never hand-written. Editing one to fix a glyph means the
+  declaration is wrong.
+
+---
+Part of [`xeno-elements`](../../README.md). Visual authority: [`DESIGN_SYSTEM.md`](../../DESIGN_SYSTEM.md) — LOCKED.

package/dist/XenoElement.d.ts

@@ -0,0 +1,39 @@
+import type { ReactElement, SVGProps } from 'react';
+import type { ElementDeclaration, ElementState } from '@xenosystem/elements/schema';
+/**
+ * `<XenoElement>` — the XENO web renderer.
+ *
+ * It interprets a declaration (pure DATA) into SVG via the SHARED {@link interpret} core, so it draws
+ * byte-for-byte what the reference `renderSvg` serializer draws (SPEC §6: two renderers must be
+ * visually indistinguishable). It adds nothing of its own — no colours, no timings.
+ *
+ * ## Why there is no per-icon component (and no barrel)
+ * This is ONE component parameterised by data, not 300 generated components. The failure mode the spec
+ * pre-registers — lucide's 2.4 MB barrel — comes from a module that imports every icon. Here the glyph
+ * is `decl`, imported per-id from `@xenosystem/elements` (which itself forbids barrelling
+ * declarations), so a product pulls in exactly the elements it names and nothing else.
+ *
+ * ## CSS-first, 0 kb
+ * State is not animated in JS. Every axis the element declares becomes a `data-<axis>` attribute on the
+ * root; a stylesheet (`./xeno-element.css`) is where token-driven transitions attach. A geometry
+ * variant swap (e.g. bookmark off↔on) is re-rendered from `state` — no animation runtime, ever.
+ */
+/**
+ * Everything an `<svg>` accepts, plus the element's own four. The passthrough matters for one case
+ * above all: a glyph rendered NEXT TO its own label is decorative, and a decorative icon must be
+ * `aria-hidden` or a screen reader announces the same thing twice. The declaration cannot know which
+ * it is — only the call site can — so the caller has to be able to say.
+ */
+export interface XenoElementProps extends Omit<SVGProps<SVGSVGElement>, 'ref' | 'strokeWidth' | 'className'> {
+    /** The element to render. Import it per-id from `@xenosystem/elements`. */
+    readonly decl: ElementDeclaration;
+    /** Discrete state. Missing axes default to enabled / off / idle. */
+    readonly state?: Partial<ElementState>;
+    /** Pixel width/height. Default 24; the viewBox is always the declared one. */
+    readonly size?: number;
+    /** Override the weight-derived stroke width. */
+    readonly strokeWidth?: number;
+    /** Extra class on the root `<svg>`. `xeno-element` is always present. */
+    readonly className?: string;
+}
+export declare function XenoElement({ decl, state, size, strokeWidth, className, ...rest }: XenoElementProps): ReactElement;

package/dist/XenoElement.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { interpret } from '@xenosystem/generate';
+const Shape = (s, i, morph) => {
+    // A solid part is painted and explicitly un-stroked; an outline part omits both and inherits the
+    // root's `fill:none; stroke:currentColor`.
+    const paint = s.fill !== undefined ? { fill: s.fill, stroke: 'none' } : {};
+    if (s.kind === 'rect') {
+        return _jsx("rect", { className: "xeno-part", "data-part": i, x: s.x, y: s.y, width: s.w, height: s.h, rx: s.rx, ...paint }, i);
+    }
+    // A morphable path carries its `d` a SECOND time, as a custom property. The attribute stays the
+    // fallback and stays authoritative wherever CSS `d` is unsupported; the property is the thing a
+    // stylesheet can interpolate, because changing a custom property is a computed-value change and `d`
+    // transitions. React swaps the value on re-render and the browser does the rest — still no runtime.
+    const morphStyle = morph ? { '--part-d': `path('${s.d}')` } : undefined;
+    return _jsx("path", { className: "xeno-part", "data-part": i, d: s.d, fillRule: s.fillRule, style: morphStyle, ...paint }, i);
+};
+export function XenoElement({ decl, state, size, strokeWidth, className, ...rest }) {
+    const scene = interpret(decl, {
+        ...(state !== undefined ? { state } : {}),
+        ...(size !== undefined ? { size } : {}),
+        ...(strokeWidth !== undefined ? { strokeWidth } : {}),
+        ...(className !== undefined ? { className } : {}),
+    });
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: scene.size, height: scene.size, viewBox: scene.viewBox, fill: "none", stroke: "currentColor", strokeWidth: scene.strokeWidth, strokeLinecap: "butt", strokeLinejoin: "round", role: scene.role, "aria-label": scene.label, "data-glyph": scene.glyph, ...(scene.morph ? { 'data-morph': 'on' } : {}), "data-xeno-element": "", className: scene.className ? `xeno-element ${scene.className}` : 'xeno-element', ...scene.data, ...rest, children: scene.shapes.map((s, i) => Shape(s, i, scene.morph)) }));
+}

package/dist/containers/Avatar.d.ts

@@ -0,0 +1,42 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+/**
+ * `<Avatar>` — a person/agent tile. Grammar-consistent: a rounded SQUARE (`radius.xs`), NEVER a circle.
+ * Content resolves by priority — an `<img>` when `src` is given (object-fit: cover), else a glyph
+ * (declaration) drawn by the shared renderer when `icon` is given, else uppercase INITIALS derived from
+ * `name` (muted ink on the control surface). The root is `role="img"` with an accessible label so a
+ * screen reader announces the person once (ARIA hides the leaf content), whatever the visual fallback.
+ */
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Pixel edge length of the square. Default 24. */
+    readonly size?: number;
+    /** Image source — highest priority; rendered object-fit: cover. */
+    readonly src?: string;
+    /** Display name — initials fallback, and the accessible label when `alt` is absent. */
+    readonly name?: string;
+    /** Glyph declaration — the middle fallback, drawn in muted ink. */
+    readonly icon?: ElementDeclaration;
+    /** Accessible label / image alt. Falls back to `name`, then a generic label. */
+    readonly alt?: string;
+}
+export declare function Avatar({ size, src, name, icon, alt, className, style, ...rest }: AvatarProps): ReactElement;
+/** One entry in an {@link AvatarStack} — the same content priority as {@link Avatar}. */
+export interface AvatarStackItem {
+    readonly src?: string;
+    readonly name?: string;
+    readonly icon?: ElementDeclaration;
+}
+/**
+ * `<AvatarStack>` — overlapping avatar squares. Each tile is pulled left and carries a 2px `--xeno-canvas`
+ * ring so the overlap reads as a stack; earlier tiles sit on top. When there are more items than `max`,
+ * a trailing `+N` overflow tile stands in for the remainder.
+ */
+export interface AvatarStackProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** People/agents to stack. */
+    readonly items: readonly AvatarStackItem[];
+    /** Maximum tiles shown before collapsing into a `+N` overflow tile. Default 4. */
+    readonly max?: number;
+    /** Pixel edge length of every tile. Default 24. */
+    readonly size?: number;
+}
+export declare function AvatarStack({ items, max, size, className, style, ...rest }: AvatarStackProps): ReactElement;

package/dist/containers/Avatar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XenoElement } from '../XenoElement.js';
+import { cx } from '../controls/util.js';
+/** First letters of the first and last word (uppercased); a single word yields its first two letters. */
+const initialsOf = (name) => {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return '';
+    if (parts.length === 1) {
+        const only = parts[0] ?? '';
+        return only.slice(0, 2).toUpperCase();
+    }
+    const first = parts[0] ?? '';
+    const last = parts[parts.length - 1] ?? '';
+    return (first.charAt(0) + last.charAt(0)).toUpperCase();
+};
+export function Avatar({ size = 24, src, name, icon, alt, className, style, ...rest }) {
+    const variant = src !== undefined ? 'image' : icon !== undefined ? 'icon' : name !== undefined ? 'initials' : 'empty';
+    const label = alt ?? name ?? 'Avatar';
+    const rootStyle = { ['--xeno-avatar-size']: `${size}px`, ...style };
+    const content = src !== undefined ? (_jsx("img", { className: "xeno-avatar-img", src: src, alt: "", draggable: false })) : icon !== undefined ? (_jsx(XenoElement, { decl: icon, size: Math.round(size * 0.58) })) : name !== undefined ? (_jsx("span", { className: "xeno-avatar-initials", "aria-hidden": "true", children: initialsOf(name) })) : null;
+    return (_jsx("span", { className: cx('xeno-avatar', className), "data-variant": variant, role: "img", "aria-label": label, style: rootStyle, ...rest, children: content }));
+}
+export function AvatarStack({ items, max = 4, size = 24, className, style, ...rest }) {
+    const visible = items.slice(0, max);
+    const overflow = items.length - visible.length;
+    const rootStyle = { ['--xeno-avatar-size']: `${size}px`, ...style };
+    return (_jsxs("div", { className: cx('xeno-avatar-stack', className), role: "group", style: rootStyle, ...rest, children: [visible.map((item, i) => (_jsx(Avatar, { size: size, style: { zIndex: visible.length - i }, ...(item.src !== undefined ? { src: item.src } : {}), ...(item.name !== undefined ? { name: item.name } : {}), ...(item.icon !== undefined ? { icon: item.icon } : {}) }, i))), overflow > 0 ? (_jsx("span", { className: "xeno-avatar xeno-avatar-more", "data-variant": "more", role: "img", "aria-label": `${overflow} more`, style: { ['--xeno-avatar-size']: `${size}px`, zIndex: 0 }, children: _jsxs("span", { className: "xeno-avatar-initials", "aria-hidden": "true", children: ["+", overflow] }) })) : null] }));
+}

package/dist/containers/Badges.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * Badges — a family of inline, non-interactive markers (SPEC: containers/Badges).
+ *
+ * These are STATIC glyphs of text: they carry no availability/selection axis (nothing to press or
+ * toggle), so the only `data-*` seam is `data-tone` on the tonal members. They stay inside the
+ * monochrome shell — surface/border/muted greys — with ONE sanctioned exception: `StatusPill` may
+ * carry a status hue. `success`/`warning` arrive as an inline `--xeno-pill-tone` var straight from
+ * the status TOKEN (so the value can never drift from the data); `danger` resolves to the theme's
+ * `--xeno-danger`. Grammar holds throughout: rounded squares, never circles.
+ */
+export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The label. Rendered uppercase, mono, 10px. */
+    readonly children: ReactNode;
+    /** Badge is the neutral base of the family; `StatusPill` adds the semantic tones. */
+    readonly tone?: 'neutral';
+}
+/**
+ * `<Badge>` — a mono uppercase micro-label on a surface chip (10px / .05em / radius-sm, hairline
+ * border, muted foreground). The neutral base of the family.
+ */
+export declare function Badge({ children, tone, className, ...rest }: BadgeProps): ReactElement;
+export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger';
+export interface StatusPillProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'style'> {
+    readonly children: ReactNode;
+    /** Colours the text + border. `neutral` stays greyscale; the rest carry a status hue. */
+    readonly tone?: StatusTone;
+    /** Prepend a small rounded-square status dot echoing the tone (via `currentColor`). */
+    readonly dot?: boolean;
+}
+/**
+ * `<StatusPill>` — like {@link Badge}, but a `tone` paints the text + border. `success`/`warning`
+ * inject their status token as the inline `--xeno-pill-tone` var; `danger` uses `--xeno-danger`.
+ * `data-tone` on the root is the state seam the CSS reads.
+ */
+export declare function StatusPill({ children, tone, dot, className, ...rest }: StatusPillProps): ReactElement;
+export interface CountBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The number to show. Hidden entirely when `<= 0` unless `showZero`. */
+    readonly count: number;
+    /** Keep the badge (showing `0`) at a zero count. */
+    readonly showZero?: boolean;
+    /** Cap the display — anything above renders as `{max}+`. Defaults to 99. */
+    readonly max?: number;
+}
+/**
+ * `<CountBadge>` — a tiny numeric chip (min-width square, radius-sm, tabular figures) for counts and
+ * unread indicators. Renders nothing at zero unless `showZero`, and caps large values at `{max}+`.
+ */
+export declare function CountBadge({ count, showZero, max, className, ...rest }: CountBadgeProps): ReactElement | null;
+export interface CitationBadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The citation number. */
+    readonly index: number;
+    /** The source label before the number — the `XS` in `[XS:n]`. Defaults to `XS`. */
+    readonly label?: string;
+}
+/**
+ * `<CitationBadge>` — an inline monospace source marker in the `[XS:n]` shape, subtle by default
+ * (surface chip, hairline border, muted brackets) with the index emphasised to text colour. Sized to
+ * sit on a line of running text.
+ */
+export declare function CitationBadge({ index, label, className, ...rest }: CitationBadgeProps): ReactElement;

package/dist/containers/Badges.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { status } from '@xenosystem/elements/tokens';
+import { cx } from '../controls/util.js';
+/**
+ * `<Badge>` — a mono uppercase micro-label on a surface chip (10px / .05em / radius-sm, hairline
+ * border, muted foreground). The neutral base of the family.
+ */
+export function Badge({ children, tone = 'neutral', className, ...rest }) {
+    return (_jsx("span", { className: cx('xeno-badge', className), "data-tone": tone, ...rest, children: children }));
+}
+/**
+ * `<StatusPill>` — like {@link Badge}, but a `tone` paints the text + border. `success`/`warning`
+ * inject their status token as the inline `--xeno-pill-tone` var; `danger` uses `--xeno-danger`.
+ * `data-tone` on the root is the state seam the CSS reads.
+ */
+export function StatusPill({ children, tone = 'neutral', dot = false, className, ...rest }) {
+    // success/warning are not theme vars — resolve them from the status TOKEN into an inline CSS var.
+    // neutral/danger need no inline var (neutral = the base greys, danger = --xeno-danger in CSS).
+    const toneStyle = tone === 'success'
+        ? { ['--xeno-pill-tone']: status.success }
+        : tone === 'warning'
+            ? { ['--xeno-pill-tone']: status.warning }
+            : undefined;
+    return (_jsxs("span", { className: cx('xeno-statuspill', className), "data-tone": tone, ...(toneStyle ? { style: toneStyle } : {}), ...rest, children: [dot && _jsx("span", { className: "xeno-statuspill-dot", "aria-hidden": "true" }), children] }));
+}
+/**
+ * `<CountBadge>` — a tiny numeric chip (min-width square, radius-sm, tabular figures) for counts and
+ * unread indicators. Renders nothing at zero unless `showZero`, and caps large values at `{max}+`.
+ */
+export function CountBadge({ count, showZero = false, max = 99, className, ...rest }) {
+    if (count <= 0 && !showZero)
+        return null;
+    const label = count > max ? `${max}+` : String(count);
+    return (_jsx("span", { className: cx('xeno-countbadge', className), ...rest, children: label }));
+}
+/**
+ * `<CitationBadge>` — an inline monospace source marker in the `[XS:n]` shape, subtle by default
+ * (surface chip, hairline border, muted brackets) with the index emphasised to text colour. Sized to
+ * sit on a line of running text.
+ */
+export function CitationBadge({ index, label = 'XS', className, ...rest }) {
+    return (_jsxs("span", { className: cx('xeno-citation', className), ...rest, children: ["[", label, ":", _jsx("span", { className: "xeno-citation-index", children: index }), "]"] }));
+}

package/dist/containers/Card.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<Card>` — the base surface box (SPEC: containers). A monochrome pane on `--xeno-surface` with a
+ * hairline border and card radius. It is NOT a control: it carries no availability/selection axis. Its
+ * one stateful seam is `interactive` — the ONLY case XENO permits a hover-lift (the shell otherwise kills
+ * hover motion; lifts are reserved for artifact-like affordances), exposed as `data-interactive` so the
+ * lift lives entirely in CSS behind `prefers-reduced-motion`.
+ */
+export type CardVariant = 'flat' | 'elevated';
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** `flat` sits on `--xeno-surface`; `elevated` swaps to `--xeno-elevated` + a soft shadow. */
+    readonly variant?: CardVariant;
+    /** Opt in to the hover-lift (translateY + border brighten). Off by default — XENO kills hover motion. */
+    readonly interactive?: boolean;
+    /** Lift strength when interactive: `subtle` (default, -1px) or `strong` (-3px + soft shadow, the
+     * artifact-card affordance). */
+    readonly lift?: 'subtle' | 'strong';
+    /** Optional slot above the body, split by a hairline. */
+    readonly header?: ReactNode;
+    /** Optional slot below the body, split by a hairline. */
+    readonly footer?: ReactNode;
+    readonly children?: ReactNode;
+}
+export declare function Card({ variant, interactive, lift, header, footer, className, children, ...rest }: CardProps): ReactElement;

package/dist/containers/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function Card({ variant = 'flat', interactive = false, lift = 'subtle', header, footer, className, children, ...rest }) {
+    return (_jsxs("div", { className: cx('xeno-card', className), "data-variant": variant, "data-interactive": interactive ? 'true' : 'false', "data-lift": lift, ...rest, children: [header !== undefined && _jsx("div", { className: "xeno-card-header", children: header }), _jsx("div", { className: "xeno-card-body", children: children }), footer !== undefined && _jsx("div", { className: "xeno-card-footer", children: footer })] }));
+}

package/dist/containers/Chip.d.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { ElementDeclaration } from '@xenosystem/elements/schema';
+/**
+ * `<Chip>` — a small SQUARE token (radius-control, 1px border) that carries a label with an optional
+ * leading glyph and an optional remove `x`. It honours the `selection` axis via `data-selection`
+ * (`on` fills with `var(--xeno-control)`) — the SAME axis the bookmark icon and ToggleButton use.
+ *
+ * Two shapes fall out of one element:
+ *   - a display/removable token — the body is a plain `<span>`; `onRemove` adds a bare `x` button;
+ *   - a filter/toggle chip — supply `onSelectedChange` and the body becomes a `role`-correct toggle
+ *     `<button aria-pressed>` (native Enter/Space), with the remove `x` a SIBLING button so no
+ *     interactive element is ever nested inside another.
+ *
+ * Sizes come from the design tokens (`sizeAttr` + `size.css`), so a chip's metrics can never drift
+ * from the data.
+ */
+export type ChipSize = 'sm' | 'md';
+export interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'style' | 'children'> {
+    /** The chip label. */
+    readonly children?: ReactNode;
+    /** A glyph before the label — imported per-id from `@xenosystem/elements`. */
+    readonly leadingIcon?: ElementDeclaration;
+    /** Presentational selection — drives `data-selection`. */
+    readonly selected?: boolean;
+    /** Provide to make the chip a controlled toggle (the body becomes a `button aria-pressed`). */
+    readonly onSelectedChange?: (selected: boolean) => void;
+    /** Provide to render a trailing remove `x`. */
+    readonly onRemove?: () => void;
+    /** Accessible name for the remove button. */
+    readonly removeLabel?: string;
+    readonly size?: ChipSize;
+    readonly disabled?: boolean;
+}
+export declare function Chip({ children, leadingIcon, selected, onSelectedChange, onRemove, removeLabel, size, disabled, className, ...rest }: ChipProps): ReactElement;

package/dist/containers/Chip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { XenoElement } from '../XenoElement.js';
+import { sizeAttr, iconPx, cx } from '../controls/util.js';
+import X from '@xenosystem/elements/elements/x';
+export function Chip({ children, leadingIcon, selected = false, onSelectedChange, onRemove, removeLabel = 'Remove', size = 'md', disabled = false, className, ...rest }) {
+    const availability = disabled ? 'disabled' : 'enabled';
+    const glyph = iconPx(size);
+    const selectable = onSelectedChange !== undefined;
+    const inner = (_jsxs(_Fragment, { children: [leadingIcon && _jsx(XenoElement, { decl: leadingIcon, size: glyph }), children != null && _jsx("span", { className: "xeno-chip-label", children: children })] }));
+    return (_jsxs("span", { className: cx('xeno-chip', className), "data-selection": selected ? 'on' : 'off', "data-availability": availability, "data-removable": onRemove ? 'true' : undefined, ...sizeAttr(size), ...rest, children: [selectable ? (_jsx("button", { type: "button", className: "xeno-chip-body xeno-chip-select", "aria-pressed": selected, disabled: disabled, onClick: (e) => {
+                    if (!e.defaultPrevented)
+                        onSelectedChange?.(!selected);
+                }, children: inner })) : (_jsx("span", { className: "xeno-chip-body", children: inner })), onRemove && (_jsx("button", { type: "button", className: "xeno-chip-remove", "aria-label": removeLabel, disabled: disabled, onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove?.();
+                }, children: _jsx(XenoElement, { decl: X, size: Math.max(12, glyph - 2) }) }))] }));
+}

package/dist/containers/DataTable.d.ts

@@ -0,0 +1,28 @@
+import type { ReactElement, ReactNode, TableHTMLAttributes } from 'react';
+import { type ColumnAlign } from './Table.js';
+/**
+ * `<DataTable>` — the column/row convenience over the {@link Table} primitives. Purely presentational:
+ * you hand it `columns` (a header, an optional `render`, an optional `align`) and `rows`; it draws the
+ * locked dense table for you. A column with no `render` reads `row[column.key]` verbatim. Row identity
+ * comes from `getRowKey` (falls back to the index). When `rows` is empty and `empty` is supplied, a
+ * single muted, column-spanning cell is drawn instead of an empty body.
+ */
+export interface DataTableColumn<T> {
+    /** Stable column id; also the property read from the row when `render` is absent. */
+    readonly key: string;
+    /** Header cell content. */
+    readonly header: ReactNode;
+    /** Custom cell renderer — overrides the default `row[key]` lookup. */
+    readonly render?: (row: T, rowIndex: number) => ReactNode;
+    /** Cell text alignment for both the header and the column's body cells. */
+    readonly align?: ColumnAlign;
+}
+export interface DataTableProps<T> extends Omit<TableHTMLAttributes<HTMLTableElement>, 'children'> {
+    readonly columns: readonly DataTableColumn<T>[];
+    readonly rows: readonly T[];
+    /** Row identity — defaults to the row index. */
+    readonly getRowKey?: (row: T, index: number) => string | number;
+    /** Shown (column-spanning, muted) when `rows` is empty. */
+    readonly empty?: ReactNode;
+}
+export declare function DataTable<T>({ columns, rows, getRowKey, empty, ...rest }: DataTableProps<T>): ReactElement;

package/dist/containers/DataTable.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, THead, TBody, Tr, Th, Td } from './Table.js';
+export function DataTable({ columns, rows, getRowKey, empty, ...rest }) {
+    return (_jsxs(Table, { ...rest, children: [_jsx(THead, { children: _jsx(Tr, { children: columns.map((col) => (_jsx(Th, { ...(col.align !== undefined ? { align: col.align } : {}), children: col.header }, col.key))) }) }), _jsx(TBody, { children: rows.length === 0 && empty !== undefined ? (_jsx(Tr, { children: _jsx(Td, { className: "xeno-table-empty", colSpan: columns.length, children: empty }) })) : (rows.map((row, rowIndex) => {
+                    const key = getRowKey ? getRowKey(row, rowIndex) : rowIndex;
+                    return (_jsx(Tr, { children: columns.map((col) => {
+                            const content = col.render
+                                ? col.render(row, rowIndex)
+                                : row[col.key];
+                            return (_jsx(Td, { ...(col.align !== undefined ? { align: col.align } : {}), children: content }, col.key));
+                        }) }, key));
+                })) })] }));
+}

package/dist/containers/ListRow.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<ListRow>` — a selectable / actionable row in a list. It is the container counterpart to the Tier-1
+ * controls: appearance is CSS-first, driven by the `data-selection` and `data-availability` axes, and
+ * behaviour is hand-rolled (no Base UI). A row has three slots — a `leading` glyph/avatar, a middle
+ * that stacks a `title` over an optional `subtitle` (both truncate), and a `trailing` slot for
+ * meta / actions.
+ *
+ * ## Element & interaction
+ * A row is a passive `div` by default. Give it an `onSelect` (or `as="button"`) and it becomes a
+ * full-width `button`: hover paints `--xeno-hover`, and the `selection` axis (`data-selection="on"`)
+ * paints `--xeno-control`. A native button already fires on Enter/Space; when a row is forced to a
+ * `div` while still carrying an `onSelect` (`as="div"`) it gets `role="button"`, a tab stop, and a
+ * hand-rolled Enter/Space handler so the keyboard path is identical. Set `option` for listbox rows —
+ * the root then reports `role="option"` + `aria-selected`.
+ */
+export interface ListRowProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'onSelect' | 'children'> {
+    /** Leading slot — a glyph, avatar, or any node. Presentational (aria-hidden). */
+    readonly leading?: ReactNode;
+    /** The primary line. Truncates with an ellipsis. */
+    readonly title: ReactNode;
+    /** An optional secondary line under the title. Truncates with an ellipsis. */
+    readonly subtitle?: ReactNode;
+    /** Trailing slot — meta text or an actions cluster, pinned to the end. */
+    readonly trailing?: ReactNode;
+    /** Persistent selection — paints `--xeno-control` and reflects on the `selection` axis. */
+    readonly selected?: boolean;
+    /** Activate handler. Its presence makes the row a full-width button unless `as="div"`. */
+    readonly onSelect?: () => void;
+    /** Force the rendered element. Defaults to `button` when `onSelect` is set, else `div`. */
+    readonly as?: 'div' | 'button';
+    /** Report the row as a listbox `option` (`role="option"` + `aria-selected`). */
+    readonly option?: boolean;
+    /** Maps to the `disabled` availability; blocks activation and removes the tab stop. */
+    readonly disabled?: boolean;
+}
+export declare function ListRow({ leading, title, subtitle, trailing, selected, onSelect, as, option, disabled, className, onClick, onKeyDown, ...rest }: ListRowProps): ReactElement;

package/dist/containers/ListRow.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function ListRow({ leading, title, subtitle, trailing, selected = false, onSelect, as, option = false, disabled = false, className, onClick, onKeyDown, ...rest }) {
+    const interactive = onSelect !== undefined;
+    const tag = as ?? (interactive ? 'button' : 'div');
+    const availability = disabled ? 'disabled' : 'enabled';
+    const activate = () => {
+        if (!disabled)
+            onSelect?.();
+    };
+    const body = (_jsxs(_Fragment, { children: [leading !== undefined && (_jsx("span", { className: "xeno-list-row-leading", "aria-hidden": "true", children: leading })), _jsxs("span", { className: "xeno-list-row-body", children: [_jsx("span", { className: "xeno-list-row-title", children: title }), subtitle !== undefined && _jsx("span", { className: "xeno-list-row-subtitle", children: subtitle })] }), trailing !== undefined && _jsx("span", { className: "xeno-list-row-trailing", children: trailing })] }));
+    if (tag === 'button') {
+        // `onKeyDown` is destructured out of props, so unless it is handed back explicitly it is not in
+        // `...rest` either and a caller's handler is silently swallowed — on the DEFAULT branch, since this
+        // is the tag chosen whenever `onSelect` is given. A button needs no key handling of its own (Enter
+        // and Space already click it), so it is simply passed through.
+        return (_jsx("button", { type: "button", className: cx('xeno-list-row', className), "data-selection": selected ? 'on' : 'off', "data-availability": availability, role: option ? 'option' : undefined, "aria-selected": option ? selected : undefined, disabled: disabled, onClick: (e) => {
+                onClick?.(e);
+                if (!e.defaultPrevented)
+                    activate();
+            }, onKeyDown: onKeyDown, ...rest, children: body }));
+    }
+    return (_jsx("div", { className: cx('xeno-list-row', className), "data-selection": selected ? 'on' : 'off', "data-availability": availability, role: option ? 'option' : interactive ? 'button' : undefined, "aria-selected": option ? selected : undefined, "aria-disabled": disabled || undefined, tabIndex: interactive && !disabled ? 0 : undefined, onClick: interactive
+            ? (e) => {
+                onClick?.(e);
+                if (!e.defaultPrevented)
+                    activate();
+            }
+            : onClick, onKeyDown: interactive
+            ? (e) => {
+                onKeyDown?.(e);
+                if (e.defaultPrevented)
+                    return;
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    activate();
+                }
+            }
+            : onKeyDown, ...rest, children: body }));
+}

package/dist/containers/MessageBubble.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<MessageBubble>` — the chat message container. One element renders both sides of a conversation and
+ * the difference is the locked design, not a variant: a `user` turn is a right-aligned bubble (surface
+ * fill, hairline border, card radius with the bottom-right corner squared back to `radius-xs`), while an
+ * `assistant` turn is a bare left-aligned prose block — no bubble, monochrome shell, coloured content
+ * lives inside `children`. The `actions` slot is a hover action bar that fades in on `:hover`/`:focus`
+ * and stays hidden while the turn is `streaming`. The role rides the root as `data-role`.
+ */
+export type MessageRole = 'user' | 'assistant';
+export interface MessageBubbleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /** Which side of the conversation this turn is — drives `data-role` and the whole visual treatment. */
+    readonly role: MessageRole;
+    /** The message body: plain text for a user turn, rendered prose for an assistant turn. */
+    readonly children?: ReactNode;
+    /**
+     * What was sent WITH the message — images, files — shown above the body and OUTSIDE the bubble.
+     *
+     * Not `children`. The body is the fill: a bubble with a photo inside it puts a hairline border and
+     * 12px of surface around a picture that already has its own edges, and a turn that is only an image
+     * renders as an empty bubble wearing one. Attachments are their own row, sharing the turn's
+     * alignment and nothing else — which is also why a turn with attachments and no text draws no
+     * bubble at all.
+     */
+    readonly attachments?: ReactNode;
+    /** A hover action bar (copy / regenerate / …) revealed on hover or focus; hidden while streaming. */
+    readonly actions?: ReactNode;
+    /** A display timestamp shown in the meta row (e.g. `"2:14 PM"`). */
+    readonly timestamp?: string;
+    /** While true the turn is still being written — the action bar is suppressed via `data-streaming`. */
+    readonly streaming?: boolean;
+}
+export declare function MessageBubble({ role, children, attachments, actions, timestamp, streaming, className, ...rest }: MessageBubbleProps): ReactElement;

package/dist/containers/MessageBubble.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function MessageBubble({ role, children, attachments, actions, timestamp, streaming = false, className, ...rest }) {
+    const hasMeta = actions !== undefined || timestamp !== undefined;
+    // An empty bubble is a border and a fill around nothing. A turn that is only an attachment has no
+    // body, and should draw none — so the element itself is conditional, not just its contents.
+    const hasBody = children !== undefined && children !== null && children !== false && children !== '';
+    return (_jsxs("div", { className: cx('xeno-message', className), "data-role": role, ...(streaming ? { 'data-streaming': '' } : {}), ...rest, children: [attachments !== undefined && (_jsx("div", { className: "xeno-message-attachments", children: attachments })), hasBody && _jsx("div", { className: "xeno-message-body", children: children }), hasMeta && (_jsxs("div", { className: "xeno-message-meta", children: [timestamp !== undefined && _jsx("time", { className: "xeno-message-time", children: timestamp }), actions !== undefined && (_jsx("div", { className: "xeno-message-actions", role: "group", "aria-label": "Message actions", children: actions }))] }))] }));
+}

package/dist/containers/Panel.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+/**
+ * `<Panel>` — a section container built to `DESIGN_SYSTEM.md` §3.1 "Panel Structure — Separated
+ * Header + Body": a layout-only wrapper holding standalone heading, body and footer slabs, each with
+ * its own surface and border, separated by a 4px gap. §3.1 is explicit that they "are NOT merged into
+ * a single container."
+ *
+ * Give the panel a bounded height and the body scrolls on its own (it is a flex column with a
+ * `min-height: 0` body).
+ *
+ * The footer is `space-between`, so two children land dismiss-left / confirm-right — the arrangement
+ * the products already use for their dialogs. One child sits left; wrap it in a `<span />` first if it
+ * should sit right.
+ */
+export interface PanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    /** Heading label (a node, so a badge or glyph can ride along). Rendered uppercase per §4. */
+    readonly title?: ReactNode;
+    /** Trailing heading slot — buttons, toggles, a menu. */
+    readonly actions?: ReactNode;
+    /** Footer slab. Symmetric with the heading (§4); two children read as left/right. */
+    readonly footer?: ReactNode;
+    readonly children?: ReactNode;
+}
+export declare function Panel({ title, actions, footer, className, children, ...rest }: PanelProps): ReactElement;

package/dist/containers/Panel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../controls/util.js';
+export function Panel({ title, actions, footer, className, children, ...rest }) {
+    const hasHeader = title !== undefined || actions !== undefined;
+    return (_jsxs("div", { className: cx('xeno-panel', className), ...rest, children: [hasHeader && (_jsxs("div", { className: "xeno-panel-header", children: [title !== undefined && _jsx("div", { className: "xeno-panel-title", children: title }), actions !== undefined && _jsx("div", { className: "xeno-panel-actions", children: actions })] })), _jsx("div", { className: "xeno-panel-body", children: children }), footer !== undefined && _jsx("div", { className: "xeno-panel-footer", children: footer })] }));
+}