@atmos.build/ui 0.1.0

package/dist/components/system-load/meter-row.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { LoadMeter } from './load-meter.js';
+import { LOAD_TEXT, resolveLoadReading } from './load-tone.js';
+/**
+ * Short enough that the reading sits inside a line of text rather than spanning the surface,
+ * long enough to tell a quarter from a half. A popover has no room for an instrument.
+ */
+const DEFAULT_ROW_BLOCKS = 5;
+/**
+ * The grid the rows inside it borrow. Each row is its own subgrid, so a stack of readings
+ * puts its blocks and its figures on the same two edges however wide the labels run — which
+ * a row that sized itself could not do, and which is the whole reason a column of readings
+ * scans as one instrument.
+ */
+export function MeterRowGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "meter-row-group", className: cn('grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-x-2.5 gap-y-1.5', className), ...props }));
+}
+/**
+ * A reading on one line: what it measures, a short run of blocks filled to it, the figure.
+ * ResourceMeter is the same reading given a panel to live in; this is the form that belongs
+ * beside rows of text, where a full-width track would claim the surface for a single number.
+ */
+export function MeterRow({ label, percent, detail, caption, alertAt, labelHidden, className, ...props }) {
+    const { value, reading, tone } = resolveLoadReading(percent, detail, alertAt);
+    return (_jsxs("div", { "data-slot": "meter-row", "data-tone": tone, className: cn('col-span-3 grid grid-cols-subgrid items-center', className), ...props, children: [_jsx("span", { className: cn('text-muted-foreground truncate text-[11.5px]', labelHidden && 'sr-only'), children: label }), _jsx(LoadMeter, { label: label, percent: value, detail: reading, blocks: DEFAULT_ROW_BLOCKS, alertAt: alertAt, size: "sm" }), _jsx("span", { className: cn('shrink-0 font-mono text-[11.5px] tabular-nums', LOAD_TEXT[tone]), children: reading }), caption ? (_jsx("p", { className: "text-muted-foreground/75 col-span-3 mt-0.5 font-mono text-[10.5px]", children: caption })) : null] }));
+}

package/dist/components/system-load/resource-meter.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface ResourceMeterProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** What is being measured — "Memory", "Storage". */
+    label: string;
+    /** Utilisation, 0–100. */
+    percent: number;
+    /** The reading in the reader's units, already formatted: "27.9 GB of 64 GB". */
+    detail?: string;
+    /** How many blocks the line is long; each one is a slice of the whole. */
+    blocks?: number;
+    /** Past this reading the meter turns red. Left out, it never does. */
+    alertAt?: number;
+}
+/**
+ * A label, a line of blocks filled to the reading, and the reading itself. The line is
+ * drawn in the same units as the core grid above it, so a panel of them reads as one
+ * instrument rather than as a stack of unrelated bars.
+ */
+export declare function ResourceMeter({ label, percent, detail, blocks, alertAt, className, ...props }: ResourceMeterProps): React.JSX.Element;

package/dist/components/system-load/resource-meter.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../../lib/cn.js';
+import { LoadMeter } from './load-meter.js';
+import { LOAD_TEXT, resolveLoadReading } from './load-tone.js';
+/**
+ * A label, a line of blocks filled to the reading, and the reading itself. The line is
+ * drawn in the same units as the core grid above it, so a panel of them reads as one
+ * instrument rather than as a stack of unrelated bars.
+ */
+export function ResourceMeter({ label, percent, detail, blocks, alertAt, className, ...props }) {
+    const { value, reading, tone } = resolveLoadReading(percent, detail, alertAt);
+    return (_jsxs("div", { "data-slot": "resource-meter", "data-tone": tone, className: cn('grid grid-cols-[minmax(0,5rem)_auto_1fr] items-center gap-3', className), ...props, children: [_jsx("span", { className: "truncate text-[12.5px]", children: label }), _jsx(LoadMeter, { label: label, percent: value, detail: detail, blocks: blocks, alertAt: alertAt }), _jsx("span", { className: cn('truncate font-mono text-[11.5px] tabular-nums', LOAD_TEXT[tone]), children: reading })] }));
+}

package/dist/components/tab-title-bar.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface TabTitleBarProps {
+    left: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+    chromeFont?: string;
+    dataTestId?: string;
+}
+export declare function TabTitleBar({ left, actions, className, chromeFont, dataTestId, }: TabTitleBarProps): import("react").JSX.Element;
+export declare function tabTitleBarButtonClass(className?: string, opts?: {
+    iconOnly?: boolean;
+}): string;

package/dist/components/tab-title-bar.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DetailTopBar, detailTopBarButtonClass } from './detail-top-bar.js';
+export function TabTitleBar({ left, actions, className, chromeFont, dataTestId, }) {
+    return (_jsx(DetailTopBar, { trail: left, actions: actions, chromeFont: chromeFont, className: className, dataTestId: dataTestId }));
+}
+export function tabTitleBarButtonClass(className, opts = {}) {
+    return detailTopBarButtonClass(className, opts);
+}

package/dist/components/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Table({ className, ...props }: React.ComponentProps<'table'>): React.JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): React.JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): React.JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): React.JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): React.JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): React.JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): React.JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): React.JSX.Element;
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/components/table.js

@@ -0,0 +1,29 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/cn.js';
+function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn('w-full caption-bottom text-sm', className), ...props }) }));
+}
+function TableHeader({ className, ...props }) {
+    return _jsx("thead", { "data-slot": "table-header", className: cn('[&_tr]:border-b', className), ...props });
+}
+function TableBody({ className, ...props }) {
+    return (_jsx("tbody", { "data-slot": "table-body", className: cn('[&_tr:last-child]:border-0', className), ...props }));
+}
+function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', className), ...props }));
+}
+function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn('hover:bg-muted/40 data-[state=selected]:bg-muted border-b transition-colors', className), ...props }));
+}
+function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn('text-muted-foreground h-9 px-3 text-left align-middle font-mono text-[11px] font-medium whitespace-nowrap', '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props }));
+}
+function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn('px-3 py-2.5 align-middle text-[13px] whitespace-nowrap', '[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className), ...props }));
+}
+function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn('text-muted-foreground mt-4 text-sm', className), ...props }));
+}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/dist/components/tabs.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "line" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, children, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/components/tabs.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import { cn } from '../lib/cn.js';
+function Tabs({ className, orientation = "horizontal", ...props }) {
+    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
+}
+const tabsListVariants = cva("group/tabs-list relative inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+    variants: {
+        variant: {
+            default: "bg-muted group-data-horizontal/tabs:h-8",
+            line: "gap-1 bg-transparent group-data-horizontal/tabs:min-h-8",
+        },
+    },
+    defaultVariants: {
+        variant: "line",
+    },
+});
+function TabsList({ className, variant = "line", children, ...props }) {
+    const listRef = React.useRef(null);
+    const [orientation, setOrientation] = React.useState("horizontal");
+    const [indicator, setIndicator] = React.useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        visible: false,
+    });
+    const [animate, setAnimate] = React.useState(false);
+    React.useEffect(() => {
+        if (variant !== "line")
+            return;
+        const list = listRef.current;
+        if (!list)
+            return;
+        const update = () => {
+            setOrientation(list
+                .closest('[data-slot="tabs"]')
+                ?.getAttribute("data-orientation") === "vertical"
+                ? "vertical"
+                : "horizontal");
+            const active = list.querySelector('[data-slot="tabs-trigger"][data-state="active"]');
+            if (!active) {
+                setIndicator((prev) => ({ ...prev, visible: false }));
+                return;
+            }
+            setIndicator({
+                left: active.offsetLeft,
+                top: active.offsetTop,
+                width: active.offsetWidth,
+                height: active.offsetHeight,
+                visible: true,
+            });
+        };
+        update();
+        const frame = requestAnimationFrame(() => setAnimate(true));
+        const mutation = new MutationObserver(update);
+        mutation.observe(list, {
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-state"],
+        });
+        const resize = new ResizeObserver(update);
+        resize.observe(list);
+        list
+            .querySelectorAll('[data-slot="tabs-trigger"]')
+            .forEach((el) => resize.observe(el));
+        return () => {
+            cancelAnimationFrame(frame);
+            mutation.disconnect();
+            resize.disconnect();
+        };
+    }, [variant, children]);
+    return (_jsxs(TabsPrimitive.List, { ref: listRef, "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props, children: [variant === "line" ? (_jsx("span", { "aria-hidden": true, "data-slot": "tabs-indicator", className: cn("pointer-events-none absolute z-0 bg-foreground", animate &&
+                    "transition-[left,top,width,height,opacity] duration-150 ease-[cubic-bezier(0.4,0,0.2,1)]", indicator.visible ? "opacity-100" : "opacity-0"), style: orientation === "vertical"
+                    ? {
+                        top: indicator.top,
+                        height: indicator.height,
+                        right: 0,
+                        width: 2,
+                    }
+                    : {
+                        left: indicator.left,
+                        width: indicator.width,
+                        bottom: 0,
+                        height: 2,
+                    } })) : null, children] }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
+}
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/components/template-chip-input.d.ts

@@ -0,0 +1,36 @@
+import { type KeyboardEvent, type MutableRefObject } from 'react';
+import type { TemplateToken } from './template-input.js';
+export type TemplateChipInputHandle = {
+    focus: () => void;
+    getSelection: () => {
+        start: number;
+        end: number;
+    };
+    setSelection: (offset: number) => void;
+    getBoundingClientRect: () => DOMRect | null;
+};
+export type TemplateChipInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    /** Token ranges within `value`; each renders as an atomic chip. */
+    tokens?: ReadonlyArray<TemplateToken>;
+    multiline?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+    className?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    /** Fires whenever the caret moves (offsets are in `value` space). */
+    onSelect?: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+    handleRef?: MutableRefObject<TemplateChipInputHandle | null>;
+    removeTokenLabel?: string;
+    'aria-label'?: string;
+};
+/**
+ * A template-string editor that renders each `{{ … }}` token as an atomic
+ * inline chip with a friendly label. The value stays the raw template string;
+ * chips are presentation only. Deleting a chip (× or backspace) removes the
+ * whole token from the value.
+ */
+export declare function TemplateChipInput({ value, onChange, tokens, multiline, placeholder, invalid, className, onFocus, onBlur, onSelect, onKeyDown, handleRef, removeTokenLabel, 'aria-label': ariaLabel, }: TemplateChipInputProps): import("react").JSX.Element;

package/dist/components/template-chip-input.js

@@ -0,0 +1,271 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, } from 'react';
+import { cn } from '../lib/cn.js';
+const CHIP_BRACES_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:11px;height:11px;flex:none"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>';
+const CHIP_X_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:10px;height:10px;flex:none"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
+function serialize(root) {
+    let out = '';
+    root.childNodes.forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            out += node.textContent ?? '';
+            return;
+        }
+        if (node instanceof HTMLElement) {
+            const raw = node.dataset.raw;
+            if (raw !== undefined) {
+                out += raw;
+                return;
+            }
+            if (node.tagName === 'BR') {
+                out += '\n';
+                return;
+            }
+            out += node.textContent ?? '';
+        }
+    });
+    return out;
+}
+/** Serialized length a node contributes (chips count as their raw template text). */
+function nodeLength(node) {
+    if (node.nodeType === Node.TEXT_NODE)
+        return (node.textContent ?? '').length;
+    if (node instanceof HTMLElement) {
+        if (node.dataset.raw !== undefined)
+            return node.dataset.raw.length;
+        if (node.tagName === 'BR')
+            return 1;
+        return (node.textContent ?? '').length;
+    }
+    return 0;
+}
+function selectionOffsets(root) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return { start: 0, end: 0 };
+    const range = selection.getRangeAt(0);
+    return {
+        start: pointOffset(root, range.startContainer, range.startOffset),
+        end: pointOffset(root, range.endContainer, range.endOffset),
+    };
+}
+function pointOffset(root, container, offset) {
+    if (container === root) {
+        let acc = 0;
+        for (let index = 0; index < offset; index += 1) {
+            const child = root.childNodes.item(index);
+            if (child)
+                acc += nodeLength(child);
+        }
+        return acc;
+    }
+    let acc = 0;
+    for (const child of Array.from(root.childNodes)) {
+        if (child === container || child.contains(container)) {
+            if (child.nodeType === Node.TEXT_NODE)
+                return acc + offset;
+            if (child instanceof HTMLElement && child.dataset.raw !== undefined) {
+                // Inside a chip: snap to its end.
+                return acc + child.dataset.raw.length;
+            }
+            return acc + offset;
+        }
+        acc += nodeLength(child);
+    }
+    return acc;
+}
+function placeCaret(root, target) {
+    const selection = window.getSelection();
+    if (!selection)
+        return;
+    let acc = 0;
+    for (const child of Array.from(root.childNodes)) {
+        const length = nodeLength(child);
+        if (target <= acc + length) {
+            const range = document.createRange();
+            if (child.nodeType === Node.TEXT_NODE) {
+                range.setStart(child, Math.max(0, Math.min(target - acc, length)));
+            }
+            else {
+                // A chip (or other element): put the caret before or after it whole.
+                if (target - acc <= length / 2)
+                    range.setStartBefore(child);
+                else
+                    range.setStartAfter(child);
+            }
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+            return;
+        }
+        acc += length;
+    }
+    const range = document.createRange();
+    range.selectNodeContents(root);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+function chipElement(raw, token, removeLabel) {
+    const chip = document.createElement('span');
+    chip.contentEditable = 'false';
+    chip.dataset.raw = raw;
+    chip.title = token.title ?? raw;
+    chip.className = cn('mx-px inline-flex h-[18px] max-w-full min-w-0 items-center gap-1 rounded-full py-0 pr-0.5 pl-1.5 align-[-3px] text-[11px] leading-none', token.valid ? 'bg-primary/10 text-primary' : 'bg-destructive/10 text-destructive');
+    const glyph = document.createElement('span');
+    glyph.innerHTML = CHIP_BRACES_SVG;
+    glyph.style.display = 'inline-flex';
+    chip.appendChild(glyph);
+    const label = document.createElement('span');
+    label.textContent = token.label ?? token.title ?? raw.replace(/^\{\{\s*|\s*\}\}$/g, '');
+    label.className = 'min-w-0 truncate';
+    chip.appendChild(label);
+    const remove = document.createElement('button');
+    remove.type = 'button';
+    remove.dataset.chipRemove = 'true';
+    remove.setAttribute('aria-label', removeLabel);
+    remove.className =
+        'flex size-3.5 shrink-0 items-center justify-center rounded-full hover:bg-current/15';
+    remove.innerHTML = CHIP_X_SVG;
+    chip.appendChild(remove);
+    return chip;
+}
+function rebuild(root, value, tokens, removeLabel) {
+    root.textContent = '';
+    let cursor = 0;
+    for (const token of tokens) {
+        if (token.start > cursor) {
+            root.appendChild(document.createTextNode(value.slice(cursor, token.start)));
+        }
+        root.appendChild(chipElement(value.slice(token.start, token.end), token, removeLabel));
+        cursor = token.end;
+    }
+    if (cursor < value.length)
+        root.appendChild(document.createTextNode(value.slice(cursor)));
+}
+function tokensKey(tokens) {
+    return tokens
+        .map((token) => `${token.start}:${token.end}:${token.valid ? 1 : 0}:${token.label ?? ''}`)
+        .join('|');
+}
+function insertPlainText(root, text) {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0)
+        return;
+    const range = selection.getRangeAt(0);
+    if (!root.contains(range.startContainer))
+        return;
+    range.deleteContents();
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.collapse(true);
+    selection.removeAllRanges();
+    selection.addRange(range);
+}
+/**
+ * A template-string editor that renders each `{{ … }}` token as an atomic
+ * inline chip with a friendly label. The value stays the raw template string;
+ * chips are presentation only. Deleting a chip (× or backspace) removes the
+ * whole token from the value.
+ */
+export function TemplateChipInput({ value, onChange, tokens = [], multiline, placeholder, invalid, className, onFocus, onBlur, onSelect, onKeyDown, handleRef, removeTokenLabel = 'Remove', 'aria-label': ariaLabel, }) {
+    const rootRef = useRef(null);
+    const renderedRef = useRef(null);
+    const focusedRef = useRef(false);
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const key = tokensKey(tokens);
+        const rendered = renderedRef.current;
+        if (rendered && rendered.value === value && rendered.key === key)
+            return;
+        const caret = focusedRef.current ? selectionOffsets(root).start : null;
+        rebuild(root, value, tokens, removeTokenLabel);
+        renderedRef.current = { value, key };
+        if (caret !== null)
+            placeCaret(root, Math.min(caret, value.length));
+    });
+    useLayoutEffect(() => {
+        if (!handleRef)
+            return;
+        handleRef.current = {
+            focus: () => rootRef.current?.focus(),
+            getSelection: () => {
+                const root = rootRef.current;
+                return root ? selectionOffsets(root) : { start: 0, end: 0 };
+            },
+            setSelection: (offset) => {
+                const root = rootRef.current;
+                if (!root)
+                    return;
+                root.focus();
+                placeCaret(root, offset);
+            },
+            getBoundingClientRect: () => rootRef.current?.getBoundingClientRect() ?? null,
+        };
+        return () => {
+            handleRef.current = null;
+        };
+    }, [handleRef]);
+    const emit = () => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const next = serialize(root);
+        renderedRef.current = { value: next, key: renderedRef.current?.key ?? '' };
+        onChange(next);
+    };
+    return (_jsxs("div", { className: "relative min-w-0 flex-1", children: [_jsx("div", { ref: rootRef, role: "textbox", "aria-multiline": multiline || undefined, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, contentEditable: true, suppressContentEditableWarning: true, spellCheck: false, tabIndex: 0, className: cn('bg-background w-full rounded-md border px-2 text-[12px] outline-none', multiline
+                    ? 'min-h-[72px] py-1.5 leading-6 break-words whitespace-pre-wrap'
+                    : 'h-8 overflow-x-auto leading-[30px] whitespace-nowrap [scrollbar-width:none]', invalid ? 'border-destructive/70' : 'border-border/60', className), onInput: emit, onFocus: () => {
+                    focusedRef.current = true;
+                    onFocus?.();
+                }, onBlur: () => {
+                    focusedRef.current = false;
+                    onBlur?.();
+                }, onKeyUp: () => onSelect?.(), onClick: (event) => {
+                    // A contenteditable host is not labelable, so inside a <label> the
+                    // label's implicit control is some other element (e.g. a trailing
+                    // insert button) and the click's default activation would move focus
+                    // there. Cancel it; the caret was already placed on mousedown.
+                    event.preventDefault();
+                    const target = event.target;
+                    const removeButton = target.closest('[data-chip-remove]');
+                    if (removeButton) {
+                        const chip = removeButton.closest('[data-raw]');
+                        const root = rootRef.current;
+                        if (chip && root) {
+                            chip.remove();
+                            const next = serialize(root);
+                            renderedRef.current = { value: next, key: renderedRef.current?.key ?? '' };
+                            onChange(next);
+                        }
+                        return;
+                    }
+                    onSelect?.();
+                }, onPaste: (event) => {
+                    event.preventDefault();
+                    const text = event.clipboardData.getData('text/plain');
+                    const root = rootRef.current;
+                    if (!root || !text)
+                        return;
+                    insertPlainText(root, multiline ? text : text.replace(/\n+/g, ' '));
+                    emit();
+                }, onKeyDown: (event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        if (multiline) {
+                            const root = rootRef.current;
+                            if (root) {
+                                insertPlainText(root, '\n');
+                                emit();
+                            }
+                        }
+                        onKeyDown?.(event);
+                        return;
+                    }
+                    onKeyDown?.(event);
+                } }), value === '' && placeholder ? (_jsx("span", { "aria-hidden": true, className: cn('text-muted-foreground/70 pointer-events-none absolute inset-x-0 top-0 truncate px-2 text-[12px]', multiline ? 'py-1.5 leading-6' : 'leading-[30px]'), children: placeholder })) : null] }));
+}

package/dist/components/template-input.d.ts

@@ -0,0 +1,24 @@
+import { type KeyboardEvent, type MutableRefObject } from 'react';
+export type TemplateToken = {
+    start: number;
+    end: number;
+    valid: boolean;
+    label?: string;
+    title?: string;
+};
+export type TemplateInputProps = {
+    value: string;
+    onChange: (value: string) => void;
+    tokens?: ReadonlyArray<TemplateToken>;
+    multiline?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+    className?: string;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onSelect?: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    controlRef?: MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>;
+    'aria-label'?: string;
+};
+export declare function TemplateInput({ value, onChange, tokens, multiline, placeholder, invalid, className, onFocus, onBlur, onSelect, onKeyDown, controlRef, 'aria-label': ariaLabel, }: TemplateInputProps): import("react").JSX.Element;

package/dist/components/template-input.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, } from 'react';
+import { cn } from '../lib/cn.js';
+function segments(value, tokens) {
+    const out = [];
+    let cursor = 0;
+    tokens.forEach((token, i) => {
+        if (token.start > cursor)
+            out.push(value.slice(cursor, token.start));
+        out.push(_jsx("mark", { title: token.title, className: cn('rounded-[3px] box-decoration-clone', token.valid
+                ? 'bg-primary/12 text-primary'
+                : 'bg-destructive/10 text-destructive decoration-destructive/50 underline decoration-wavy underline-offset-2'), children: value.slice(token.start, token.end) }, i));
+        cursor = token.end;
+    });
+    if (cursor < value.length)
+        out.push(value.slice(cursor));
+    if (value.endsWith('\n'))
+        out.push(' ');
+    return out;
+}
+export function TemplateInput({ value, onChange, tokens = [], multiline, placeholder, invalid, className, onFocus, onBlur, onSelect, onKeyDown, controlRef, 'aria-label': ariaLabel, }) {
+    const backdropRef = useRef(null);
+    const syncScroll = (el) => {
+        const backdrop = backdropRef.current;
+        if (!backdrop)
+            return;
+        backdrop.scrollLeft = el.scrollLeft;
+        backdrop.scrollTop = el.scrollTop;
+    };
+    const metrics = cn('w-full rounded-md border px-2 text-[12px]', multiline
+        ? 'min-h-[72px] resize-none py-1.5 font-mono text-[11px] leading-4'
+        : 'h-8 leading-[30px]');
+    const controlStyle = { color: 'transparent', caretColor: 'var(--foreground)' };
+    const setControl = (el) => {
+        if (controlRef)
+            controlRef.current = el;
+    };
+    const shared = {
+        value,
+        placeholder,
+        'aria-label': ariaLabel,
+        onFocus,
+        onBlur,
+        onSelect,
+        onKeyDown,
+        style: controlStyle,
+        className: cn(metrics, 'bg-background placeholder:text-muted-foreground/70 relative', invalid ? 'border-destructive/70' : 'border-border/60', className),
+    };
+    return (_jsxs("div", { className: "relative", children: [multiline ? (_jsx("textarea", { ...shared, ref: setControl, onChange: (e) => {
+                    onChange(e.currentTarget.value);
+                    syncScroll(e.currentTarget);
+                }, onScroll: (e) => syncScroll(e.currentTarget) })) : (_jsx("input", { ...shared, ref: setControl, onChange: (e) => {
+                    onChange(e.currentTarget.value);
+                    syncScroll(e.currentTarget);
+                }, onScroll: (e) => syncScroll(e.currentTarget) })), _jsx("div", { ref: backdropRef, "aria-hidden": true, className: cn(metrics, 'text-foreground pointer-events-none absolute inset-0 overflow-hidden border-transparent', multiline ? 'break-words whitespace-pre-wrap' : 'whitespace-pre', className), children: segments(value, tokens) })] }));
+}

package/dist/components/terminal-spinner.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'react';
+export type TerminalSpinnerTone = 'neutral' | 'accent' | 'muted';
+export interface TerminalSpinnerProps {
+    fps?: number;
+    tone?: TerminalSpinnerTone;
+    ariaLabel?: string;
+    status?: string;
+    rotateMs?: number;
+    className?: string;
+}
+export declare function TerminalSpinner({ fps, tone, ariaLabel, className, }: TerminalSpinnerProps): JSX.Element;