@atmos.build/ui 0.1.0

package/dist/components/property-list.js

@@ -0,0 +1,313 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ChevronRight, Plus, X } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+const DEFAULT_LABELS = {
+    empty: '—',
+    redacted: 'Redacted',
+    yes: 'Yes',
+    no: 'No',
+    fields: (n) => `${n} ${n === 1 ? 'field' : 'fields'}`,
+    items: (n) => `${n} ${n === 1 ? 'item' : 'items'}`,
+    addItem: 'Add item',
+    removeItem: 'Remove item',
+};
+const ISO_DATE_RE = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)?$/;
+const URL_RE = /^https?:\/\/\S+$/i;
+const LONG_STRING = 56;
+export function humanizeKey(key) {
+    const spaced = key
+        .replace(/[_-]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/\s+/g, ' ')
+        .trim();
+    if (!spaced)
+        return key;
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1).toLowerCase();
+}
+function isPlainObject(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+function isEmptyScalar(value) {
+    return value === null || value === undefined || (typeof value === 'string' && value.trim() === '');
+}
+function isScalarArray(value) {
+    return Array.isArray(value) && value.every((item) => !isPlainObject(item) && !Array.isArray(item));
+}
+export function formatScalar(value, locale) {
+    if (isEmptyScalar(value))
+        return { kind: 'empty', text: '' };
+    if (typeof value === 'boolean')
+        return { kind: 'bool', text: '', bool: value };
+    if (typeof value === 'number')
+        return { kind: 'number', text: String(value) };
+    const s = String(value);
+    if (URL_RE.test(s))
+        return { kind: 'url', text: s };
+    if (ISO_DATE_RE.test(s)) {
+        const date = new Date(s);
+        if (!Number.isNaN(date.getTime())) {
+            const hasTime = s.includes('T');
+            const text = new Intl.DateTimeFormat(locale, hasTime ? { dateStyle: 'medium', timeStyle: 'short' } : { dateStyle: 'medium' }).format(date);
+            return { kind: 'date', text };
+        }
+    }
+    return { kind: 'text', text: s };
+}
+function getAtPath(root, path) {
+    return path.reduce((acc, key) => (acc == null ? acc : acc[key]), root);
+}
+function setAtPath(root, path, value) {
+    if (path.length === 0)
+        return value;
+    const [head, ...rest] = path;
+    if (Array.isArray(root)) {
+        const copy = root.slice();
+        copy[head] = setAtPath(root[head], rest, value);
+        return copy;
+    }
+    const obj = (isPlainObject(root) ? root : {});
+    const key = head;
+    return { ...obj, [key]: setAtPath(obj[key], rest, value) };
+}
+function removeAtPath(root, path) {
+    const parentPath = path.slice(0, -1);
+    const key = path[path.length - 1];
+    const parent = getAtPath(root, parentPath);
+    if (Array.isArray(parent)) {
+        return setAtPath(root, parentPath, parent.filter((_, i) => i !== key));
+    }
+    if (isPlainObject(parent)) {
+        const { [key]: _removed, ...next } = parent;
+        return setAtPath(root, parentPath, next);
+    }
+    return root;
+}
+const EditContext = React.createContext({
+    editable: false,
+    set: () => { },
+    removeItem: () => { },
+});
+const GroupContext = React.createContext({ isOpen: () => true, toggle: () => { } });
+const LabelsContext = React.createContext(DEFAULT_LABELS);
+const LocaleContext = React.createContext(undefined);
+const ScalarRenderContext = React.createContext(undefined);
+const KeyFormatContext = React.createContext(undefined);
+function useKeyLabel() {
+    return React.useContext(KeyFormatContext) ?? humanizeKey;
+}
+const useIsoLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+// --- value editors / views --------------------------------------------------
+function BoolValue({ path, value }) {
+    const labels = React.useContext(LabelsContext);
+    const { editable, set } = React.useContext(EditContext);
+    const dot = (_jsx("span", { className: cn('size-1.5 rounded-full', value ? 'bg-foreground/70' : 'border-muted-foreground/50 border bg-transparent') }));
+    const body = (_jsxs(_Fragment, { children: [dot, value ? labels.yes : labels.no] }));
+    const base = 'bg-muted text-foreground inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[11px]';
+    if (!editable)
+        return _jsx("span", { className: base, children: body });
+    return (_jsx("button", { type: "button", role: "switch", "aria-checked": value, onClick: () => set(path, !value), className: cn(base, 'hover:bg-muted/70 focus-visible:ring-ring cursor-pointer border border-transparent focus-visible:ring-2 focus-visible:outline-none'), children: body }));
+}
+function ScalarInput({ path, value }) {
+    const labels = React.useContext(LabelsContext);
+    const { set } = React.useContext(EditContext);
+    const wasNumber = typeof value === 'number';
+    const commit = (raw) => {
+        if (raw === '')
+            return set(path, null);
+        const trimmed = raw.trim();
+        if (wasNumber && /^-?\d+(\.\d+)?$/.test(trimmed))
+            return set(path, Number(trimmed));
+        set(path, raw);
+    };
+    return (_jsx("input", { "data-hybrid-value": true, value: value == null ? '' : String(value), placeholder: labels.empty, spellCheck: false, onChange: (e) => commit(e.currentTarget.value), className: cn('text-foreground placeholder:text-muted-foreground/60 w-full min-w-0 rounded-sm border border-transparent bg-transparent px-1 py-0.5 text-right text-[12.5px] leading-5 outline-none', 'hover:border-input focus:border-ring focus:bg-background focus:ring-ring/30 focus:ring-2', 'group-data-[stacked]/row:text-left', wasNumber && 'tabular-nums') }));
+}
+function ScalarTextarea({ path, value }) {
+    const { set } = React.useContext(EditContext);
+    const ref = React.useRef(null);
+    const grow = React.useCallback(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, []);
+    useIsoLayoutEffect(grow, [grow, value]);
+    return (_jsx("textarea", { ref: ref, rows: 1, value: value, spellCheck: false, onChange: (e) => {
+            set(path, e.currentTarget.value);
+            grow();
+        }, className: "text-foreground border-input focus:border-ring focus:ring-ring/30 mt-1 block w-full resize-none overflow-hidden rounded-sm border bg-transparent px-1.5 py-1 text-[12.5px] leading-5 outline-none focus:ring-2" }));
+}
+function ScalarView({ value, locale, fieldKey, }) {
+    const labels = React.useContext(LabelsContext);
+    const renderScalar = React.useContext(ScalarRenderContext);
+    if (renderScalar) {
+        const custom = renderScalar(value, fieldKey ?? '');
+        if (custom !== undefined)
+            return _jsx(_Fragment, { children: custom });
+    }
+    const f = formatScalar(value, locale);
+    if (f.kind === 'empty')
+        return _jsx("span", { className: "text-muted-foreground", children: labels.empty });
+    if (f.kind === 'number')
+        return _jsx("span", { className: "tabular-nums", children: f.text });
+    if (f.kind === 'url') {
+        return (_jsx("a", { href: f.text, target: "_blank", rel: "noopener noreferrer", className: "text-primary break-all underline underline-offset-2 hover:opacity-80", children: f.text }));
+    }
+    if (f.kind === 'date')
+        return _jsx("span", { children: f.text });
+    return _jsx("span", { className: "group-data-[stacked]/row:break-words", children: f.text });
+}
+function ScalarArrayValue({ path, value }) {
+    const labels = React.useContext(LabelsContext);
+    const { editable, set, removeItem } = React.useContext(EditContext);
+    const renderScalar = React.useContext(ScalarRenderContext);
+    const arrayKey = String(path[path.length - 1] ?? '');
+    const [adding, setAdding] = React.useState(false);
+    const chip = 'bg-muted inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[11px]';
+    return (_jsxs(_Fragment, { children: [value.map((item, i) => {
+                const custom = renderScalar?.(item, arrayKey);
+                return (_jsxs("span", { className: chip, children: [custom !== undefined ? custom : String(item), editable ? (_jsx("button", { type: "button", "aria-label": labels.removeItem, onClick: () => removeItem([...path, i]), className: "text-muted-foreground hover:text-destructive -mr-0.5 rounded-sm", children: _jsx(X, { className: "size-3", strokeWidth: 1.8 }) })) : null] }, i));
+            }), editable ? (adding ? (_jsx("input", { ref: (el) => el?.focus(), "aria-label": labels.addItem, spellCheck: false, onBlur: (e) => {
+                    const v = e.currentTarget.value.trim();
+                    if (v)
+                        set([...path, value.length], v);
+                    setAdding(false);
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Enter')
+                        e.currentTarget.blur();
+                    if (e.key === 'Escape')
+                        setAdding(false);
+                }, className: "border-ring bg-background focus:ring-ring/30 w-24 rounded-sm border px-1.5 py-0.5 text-[11px] outline-none focus:ring-2" })) : (_jsx("button", { type: "button", "aria-label": labels.addItem, onClick: () => setAdding(true), className: "border-input text-muted-foreground hover:text-foreground hover:border-ring inline-flex items-center rounded-sm border border-dashed px-1.5 py-0.5", children: _jsx(Plus, { className: "size-3", strokeWidth: 1.8 }) }))) : null] }));
+}
+// --- rows -------------------------------------------------------------------
+function HybridRow({ keyName, children }) {
+    const label = useKeyLabel()(keyName);
+    return (_jsxs("div", { "data-hybrid-row": true, className: "group/row border-border/55 flex flex-wrap items-baseline gap-x-3 gap-y-0.5 border-t py-1 first:border-t-0", children: [_jsx("span", { className: "text-foreground shrink-0 text-[12.5px] leading-5", title: label, children: label }), children] }));
+}
+/**
+ * The right-aligned value slot that collapses to full-width on overflow. The slot
+ * clips inline overflow; the inner `Measured` probe lays out at its natural width
+ * (`w-max`) so the measurement pass can compare it against the slot's width
+ * regardless of alignment direction.
+ */
+function Slot({ children }) {
+    return (_jsx("div", { className: "ml-auto flex min-w-0 flex-1 overflow-hidden text-[12.5px] leading-5 group-data-[stacked]/row:mt-0.5 group-data-[stacked]/row:basis-full group-data-[stacked]/row:overflow-visible", children: children }));
+}
+function Measured({ children }) {
+    return (_jsx("div", { "data-hybrid-value": true, className: "ml-auto flex w-max max-w-none flex-nowrap justify-end gap-1 text-right whitespace-nowrap group-data-[stacked]/row:w-full group-data-[stacked]/row:flex-wrap group-data-[stacked]/row:justify-start group-data-[stacked]/row:text-left group-data-[stacked]/row:break-words", children: children }));
+}
+function ScalarField({ path, keyName, value, locale, }) {
+    const { editable } = React.useContext(EditContext);
+    const keyLabel = useKeyLabel();
+    if (typeof value === 'boolean') {
+        return (_jsx(HybridRow, { keyName: keyName, children: _jsx(Slot, { children: _jsx("span", { className: "ml-auto", children: _jsx(BoolValue, { path: path, value: value }) }) }) }));
+    }
+    if (editable && typeof value === 'string' && value.length > LONG_STRING) {
+        return (_jsxs("div", { className: "border-border/55 flex flex-col border-t py-1 first:border-t-0", children: [_jsx("span", { className: "text-foreground text-[12.5px] leading-5", children: keyLabel(keyName) }), _jsx(ScalarTextarea, { path: path, value: value })] }));
+    }
+    return (_jsx(HybridRow, { keyName: keyName, children: _jsx(Slot, { children: editable ? (_jsx(ScalarInput, { path: path, value: value })) : (_jsx(Measured, { children: _jsx(ScalarView, { value: value, locale: locale, fieldKey: keyName }) })) }) }));
+}
+function ScalarArrayField({ path, keyName, value, }) {
+    return (_jsx(HybridRow, { keyName: keyName, children: _jsx(Slot, { children: _jsx(Measured, { children: _jsx(ScalarArrayValue, { path: path, value: value }) }) }) }));
+}
+function Group({ path, keyName, value, depth, }) {
+    const labels = React.useContext(LabelsContext);
+    const { isOpen, toggle } = React.useContext(GroupContext);
+    const key = path.join('');
+    const open = isOpen(key, depth);
+    const count = Array.isArray(value) ? value.length : Object.keys(value).length;
+    const summary = Array.isArray(value) ? labels.items(count) : labels.fields(count);
+    const keyLabel = useKeyLabel();
+    return (_jsxs("div", { className: "group/row border-border/55 border-t py-1 first:border-t-0", children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => toggle(key, depth), className: "focus-visible:ring-ring flex w-full items-center gap-1.5 rounded-sm text-left text-[12.5px] focus-visible:ring-2 focus-visible:outline-none", children: [_jsx(ChevronRight, { className: cn('text-muted-foreground size-2.5 shrink-0 transition-transform', open && 'rotate-90'), strokeWidth: 2 }), _jsx("span", { className: "text-foreground font-medium", children: keyLabel(keyName) }), _jsx("span", { className: "text-muted-foreground/70", children: summary })] }), open ? (_jsx("div", { className: "border-border mt-1 ml-1 border-l-2 pl-2.5", children: _jsx(ValueNode, { value: value, path: path, depth: depth + 1 }) })) : null] }));
+}
+function ValueNode({ value, path, depth }) {
+    const locale = React.useContext(LocaleContext);
+    const labels = React.useContext(LabelsContext);
+    if (isPlainObject(value)) {
+        const entries = Object.entries(value);
+        if (entries.length === 0)
+            return _jsx("span", { className: "text-muted-foreground text-[12.5px]", children: labels.empty });
+        return (_jsx("div", { className: "min-w-0", children: entries.map(([k, child]) => (_jsx(Row, { path: [...path, k], keyName: k, value: child, depth: depth, locale: locale }, k))) }));
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return _jsx("span", { className: "text-muted-foreground text-[12.5px]", children: labels.empty });
+        if (isScalarArray(value)) {
+            // A bare scalar array at the top: render as a single value block.
+            return (_jsx("div", { className: "flex flex-wrap gap-1 text-[12.5px]", children: _jsx(ScalarArrayValue, { path: path, value: value }) }));
+        }
+        return (_jsx("div", { className: "flex min-w-0 flex-col gap-1", children: value.map((item, i) => (_jsx("div", { className: "border-border/55 border-t pt-1 first:border-t-0 first:pt-0", children: _jsx(ValueNode, { value: item, path: [...path, i], depth: depth }) }, i))) }));
+    }
+    // Bare scalar at the top level.
+    return (_jsx("div", { className: "text-[12.5px]", children: _jsx(ScalarView, { value: value, locale: locale, fieldKey: String(path[path.length - 1] ?? '') }) }));
+}
+function Row({ path, keyName, value, depth, locale, }) {
+    if (isPlainObject(value) || (Array.isArray(value) && !isScalarArray(value))) {
+        return (_jsx(Group, { path: path, keyName: keyName, value: value, depth: depth }));
+    }
+    if (isScalarArray(value))
+        return _jsx(ScalarArrayField, { path: path, keyName: keyName, value: value });
+    return _jsx(ScalarField, { path: path, keyName: keyName, value: value, locale: locale });
+}
+/**
+ * Renders an arbitrary JSON-ish value as friendly, labeled fields — humanized
+ * keys, formatted primitives (dates, links, yes/no), collapsible nested groups.
+ * Scalar rows are hybrid: the value sits inline (right-aligned) when it fits the
+ * width and drops to its own full-width line when it doesn't, so values never
+ * shred vertically in a narrow panel. With `editable`, scalars become inline
+ * editors. The non-technical alternative to a raw JSON dump. App-agnostic:
+ * inject localized `labels`.
+ */
+export function PropertyList({ value, redacted = false, labels, locale, collapseDepth = 3, editable = false, onValueChange, renderScalar, formatKey, className, ...props }) {
+    const merged = React.useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
+    const [overrides, setOverrides] = React.useState(() => new Map());
+    const rootRef = React.useRef(null);
+    const groupCtx = React.useMemo(() => ({
+        isOpen: (key, depth) => {
+            const stored = overrides.get(key);
+            return stored === undefined ? depth < collapseDepth : stored;
+        },
+        toggle: (key, depth) => setOverrides((prev) => {
+            const next = new Map(prev);
+            const stored = prev.get(key);
+            const current = stored === undefined ? depth < collapseDepth : stored;
+            next.set(key, !current);
+            return next;
+        }),
+    }), [overrides, collapseDepth]);
+    const editCtx = React.useMemo(() => ({
+        editable: editable && Boolean(onValueChange),
+        set: (path, next) => onValueChange?.(setAtPath(value, path, next)),
+        removeItem: (path) => onValueChange?.(removeAtPath(value, path)),
+    }), [editable, onValueChange, value]);
+    // Hybrid measurement: always measure in the un-stacked state, then decide.
+    const measure = React.useCallback(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const rows = Array.from(root.querySelectorAll('[data-hybrid-row]'));
+        rows.forEach((r) => delete r.dataset.stacked);
+        void root.offsetWidth;
+        rows.forEach((r) => {
+            const measured = r.querySelector('[data-hybrid-value]');
+            if (!measured)
+                return;
+            const isField = measured.tagName === 'INPUT' || measured.tagName === 'TEXTAREA';
+            const available = isField ? measured.clientWidth : (measured.parentElement?.clientWidth ?? 0);
+            if (measured.scrollWidth > available + 1)
+                r.dataset.stacked = '';
+        });
+    }, []);
+    useIsoLayoutEffect(measure);
+    React.useEffect(() => {
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        const ro = new ResizeObserver(() => measure());
+        ro.observe(root);
+        return () => ro.disconnect();
+    }, [measure]);
+    return (_jsx("div", { ref: rootRef, "data-slot": "property-list", className: cn('min-w-0 text-[12.5px]', className), ...props, children: redacted ? (_jsxs("span", { className: "text-muted-foreground/70 inline-flex items-center gap-1 font-mono text-[11px]", children: [_jsx("span", { className: "bg-muted-foreground/40 size-1 rounded-full" }), merged.redacted] })) : (_jsx(LabelsContext.Provider, { value: merged, children: _jsx(LocaleContext.Provider, { value: locale, children: _jsx(GroupContext.Provider, { value: groupCtx, children: _jsx(EditContext.Provider, { value: editCtx, children: _jsx(ScalarRenderContext.Provider, { value: renderScalar, children: _jsx(KeyFormatContext.Provider, { value: formatKey, children: _jsx(ValueNode, { value: value, path: [], depth: 0 }) }) }) }) }) }) })) }));
+}

package/dist/components/property-panel.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { type PropertyListLabels } from './property-list.js';
+export interface PropertyPanelLabels extends PropertyListLabels {
+    /** Segmented-control tab for the friendly field view. */
+    formatted: string;
+    /** Segmented-control tab for the raw JSON view. */
+    raw: string;
+    /** Copy-to-clipboard button (idle). */
+    copy: string;
+    /** Copy-to-clipboard button (just copied). */
+    copied: string;
+    /** Shown under the raw editor when the text isn't valid JSON. */
+    invalidJson: string;
+}
+type View = 'formatted' | 'raw';
+export interface PropertyPanelProps extends Omit<React.ComponentProps<'div'>, 'onChange' | 'title'> {
+    /** Any JSON-ish value. */
+    value: unknown;
+    /** Replace the whole rendering with the redacted note. */
+    redacted?: boolean;
+    /** Turn the formatted view into inline editors and the raw view into a textarea. */
+    editable?: boolean;
+    /** Called with the next value on every valid edit (formatted or raw). */
+    onValueChange?: (next: unknown) => void;
+    /** Editable only: reports whether the current raw text parses to a valid JSON object. */
+    onValidityChange?: (valid: boolean) => void;
+    /** Localized copy; superset of the field-renderer labels. */
+    labels?: Partial<PropertyPanelLabels>;
+    /** BCP-47 locale for date formatting. */
+    locale?: string;
+    /** Nesting depth at/beyond which groups collapse by default. */
+    collapseDepth?: number;
+    /** Which view to open on. */
+    defaultView?: View;
+    /** Controlled view: when set, the segmented control is hidden and the view is fixed by the host. */
+    view?: View;
+    /** Optional heading rendered inline with the view toggle (e.g. a section label). */
+    title?: React.ReactNode;
+    /** Extra classes for the body container. */
+    bodyClassName?: string;
+    /** Per-scalar renderer for the formatted view (see {@link PropertyList.renderScalar}). */
+    renderScalar?: (value: unknown, key: string) => React.ReactNode | undefined;
+    /** Key-label formatter for the formatted view (see {@link PropertyList.formatKey}). */
+    formatKey?: (key: string) => string;
+}
+/**
+ * A JSON-ish value with a Formatted ⇄ Raw toggle. Formatted uses {@link PropertyList}
+ * (hybrid key/value fields, collapsible groups, optionally editable); Raw is a
+ * copy-friendly JSON view (a read-only block with a copy button, or an editable
+ * textarea). In editable mode the two views stay in sync and invalid raw JSON is
+ * surfaced without emitting a change. application-agnostic: inject localized `labels`.
+ */
+export declare function PropertyPanel({ value, redacted, editable, onValueChange, onValidityChange, labels, locale, collapseDepth, defaultView, view: controlledView, title, bodyClassName, renderScalar, formatKey, className, ...props }: PropertyPanelProps): React.JSX.Element;
+export {};

package/dist/components/property-panel.js

@@ -0,0 +1,87 @@
+'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 { CopyButton } from './copy-button.js';
+import { PropertyList } from './property-list.js';
+const DEFAULT_PANEL_LABELS = {
+    empty: '—',
+    redacted: 'Redacted',
+    yes: 'Yes',
+    no: 'No',
+    fields: (n) => `${n} ${n === 1 ? 'field' : 'fields'}`,
+    items: (n) => `${n} ${n === 1 ? 'item' : 'items'}`,
+    addItem: 'Add item',
+    removeItem: 'Remove item',
+    formatted: 'Formatted',
+    raw: 'Raw',
+    copy: 'Copy',
+    copied: 'Copied',
+    invalidJson: 'Input must be valid JSON.',
+};
+function serialize(value) {
+    try {
+        return JSON.stringify(value ?? {}, null, 2);
+    }
+    catch {
+        return '{}';
+    }
+}
+function parseObject(text) {
+    try {
+        const parsed = JSON.parse(text || '{}');
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+            return { ok: false };
+        return { ok: true, value: parsed };
+    }
+    catch {
+        return { ok: false };
+    }
+}
+function SegButton({ active, children, onClick, }) {
+    return (_jsx("button", { type: "button", role: "tab", "aria-selected": active, onClick: onClick, className: cn('focus-visible:ring-ring rounded-sm px-2 py-0.5 font-mono text-[10.5px] transition-colors focus-visible:ring-2 focus-visible:outline-none', active
+            ? 'bg-background text-foreground shadow-sm'
+            : 'text-foreground/80 hover:text-foreground'), children: children }));
+}
+/**
+ * A JSON-ish value with a Formatted ⇄ Raw toggle. Formatted uses {@link PropertyList}
+ * (hybrid key/value fields, collapsible groups, optionally editable); Raw is a
+ * copy-friendly JSON view (a read-only block with a copy button, or an editable
+ * textarea). In editable mode the two views stay in sync and invalid raw JSON is
+ * surfaced without emitting a change. application-agnostic: inject localized `labels`.
+ */
+export function PropertyPanel({ value, redacted = false, editable = false, onValueChange, onValidityChange, labels, locale, collapseDepth = 3, defaultView = 'formatted', view: controlledView, title, bodyClassName, renderScalar, formatKey, className, ...props }) {
+    const merged = React.useMemo(() => ({ ...DEFAULT_PANEL_LABELS, ...labels }), [labels]);
+    const [internalView, setView] = React.useState(defaultView);
+    const view = controlledView ?? internalView;
+    const controlled = controlledView != null;
+    const [rawText, setRawText] = React.useState(() => serialize(value));
+    const [rawInvalid, setRawInvalid] = React.useState(false);
+    const goToRaw = () => {
+        setRawText(serialize(value));
+        setRawInvalid(false);
+        setView('raw');
+    };
+    const goToFormatted = () => {
+        if (rawInvalid)
+            return;
+        setView('formatted');
+    };
+    const onRawChange = (text) => {
+        setRawText(text);
+        const result = parseObject(text);
+        if (result.ok) {
+            setRawInvalid(false);
+            onValidityChange?.(true);
+            onValueChange?.(result.value);
+        }
+        else {
+            setRawInvalid(true);
+            onValidityChange?.(false);
+        }
+    };
+    if (redacted) {
+        return (_jsx("div", { className: cn('min-w-0', className), ...props, children: _jsx("div", { className: bodyClassName, children: _jsx(PropertyList, { value: value, redacted: true, labels: merged, locale: locale }) }) }));
+    }
+    return (_jsxs("div", { className: cn('min-w-0', className), ...props, children: [controlled && !title ? null : (_jsxs("div", { className: cn('mb-1 flex items-center gap-2', title ? 'justify-between' : 'justify-end'), children: [title ? _jsx("div", { className: "min-w-0 flex-1 truncate", children: title }) : null, _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [controlled ? null : (_jsxs("div", { role: "tablist", className: "bg-muted inline-flex gap-0.5 rounded-md p-0.5", children: [_jsx(SegButton, { active: view === 'formatted', onClick: goToFormatted, children: merged.formatted }), _jsx(SegButton, { active: view === 'raw', onClick: goToRaw, children: merged.raw })] })), _jsx(CopyButton, { size: "card", value: serialize(value), label: merged.copy, copiedLabel: merged.copied })] })] })), _jsx("div", { className: cn(view === 'raw' && 'border-border/60 bg-background rounded-md border', bodyClassName), children: view === 'formatted' ? (_jsx("div", { className: "border-border border-l-2 pl-2.5", children: _jsx(PropertyList, { value: value, labels: merged, locale: locale, collapseDepth: collapseDepth, ...(renderScalar ? { renderScalar } : {}), ...(formatKey ? { formatKey } : {}), ...(editable ? { editable, onValueChange } : {}) }) })) : editable ? (_jsx("textarea", { value: rawText, spellCheck: false, onChange: (e) => onRawChange(e.currentTarget.value), className: cn('text-foreground min-h-[160px] w-full resize-y bg-transparent p-2 font-mono text-[11px] leading-relaxed outline-none', rawInvalid && 'text-destructive') })) : (_jsx("pre", { className: "text-foreground p-2 font-mono text-[11px] leading-relaxed break-words whitespace-pre-wrap", children: serialize(value) })) }), rawInvalid ? (_jsx("p", { className: "text-destructive mt-1 text-[11px]", children: merged.invalidJson })) : null] }));
+}

package/dist/components/property-selector.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+export interface PropertySelectorLabels {
+    noMatches: string;
+    create: string;
+}
+export interface PropertySelectorItem {
+    id: string;
+    label: string;
+    description?: string;
+    keywords?: string[];
+    icon?: ReactNode;
+    shortcut?: string;
+    selected?: boolean;
+}
+export interface PropertySelectorProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    items: PropertySelectorItem[];
+    onSelect: (item: PropertySelectorItem) => void;
+    allowCreate?: boolean;
+    onCreate?: (label: string) => void;
+    createLabel?: string;
+    searchPlaceholder: string;
+    triggerKey?: string;
+    contentClassName?: string;
+    /**
+     * Merge the popover-trigger semantics onto the trigger element itself instead
+     * of a wrapping div. Use this when the trigger is a direct member of a
+     * ButtonGroup so the group's corner-radius/border rules reach the button.
+     */
+    triggerAsChild?: boolean;
+    'aria-label'?: string;
+    labels?: Partial<PropertySelectorLabels>;
+}
+export declare function PropertySelector({ open, onOpenChange, children, items, onSelect, allowCreate, onCreate, createLabel, searchPlaceholder, triggerKey, contentClassName, triggerAsChild, 'aria-label': ariaLabel, labels: labelsProp, }: PropertySelectorProps): import("react").JSX.Element;

package/dist/components/property-selector.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId, useMemo, useRef, useState, } from 'react';
+import { Check, Plus } from 'lucide-react';
+import { Slot } from 'radix-ui';
+import { StackedPopover, StackedPopoverContent, StackedPopoverTrigger, } from './popover-stack.js';
+import { Kbd } from './kbd.js';
+import { EmptyState } from './empty-state.js';
+import { cn } from '../lib/cn.js';
+const DEFAULT_LABELS = {
+    noMatches: 'No matches',
+    create: 'Create',
+};
+const CREATE_ROW = '__create__';
+export function PropertySelector({ open, onOpenChange, children, items, onSelect, allowCreate = false, onCreate, createLabel, searchPlaceholder, triggerKey, contentClassName, triggerAsChild = false, 'aria-label': ariaLabel, labels: labelsProp, }) {
+    const labels = { ...DEFAULT_LABELS, ...labelsProp };
+    const [query, setQuery] = useState('');
+    const [activeOverride, setActiveOverride] = useState(null);
+    const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const wheelCleanupRef = useRef(null);
+    const listId = useId();
+    // The list is portalled to <body>, outside the scroll-lock (react-remove-scroll) of any
+    // enclosing dialog. That lock's document-level, bubble-phase `wheel` handler cancels
+    // mouse-wheel scrolling on portalled content (trackpad deltas slip its overscroll heuristic,
+    // discrete wheel ticks don't). Stopping the wheel event at the list keeps it from reaching that
+    // handler, so the list scrolls natively while the dialog's background stays locked. A callback
+    // ref (re)attaches the listener every time the list mounts, since it only exists while open.
+    const listRefCallback = useCallback((node) => {
+        wheelCleanupRef.current?.();
+        wheelCleanupRef.current = null;
+        if (!node)
+            return;
+        const stop = (event) => event.stopPropagation();
+        node.addEventListener('wheel', stop, { passive: true });
+        wheelCleanupRef.current = () => node.removeEventListener('wheel', stop);
+    }, []);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return items;
+        return items.filter((i) => i.label.toLowerCase().includes(q) ||
+            i.description?.toLowerCase().includes(q) ||
+            i.keywords?.some((keyword) => keyword.toLowerCase().includes(q)));
+    }, [items, query]);
+    const trimmedQuery = query.trim();
+    const hasExactMatch = useMemo(() => {
+        if (!trimmedQuery)
+            return false;
+        const needle = trimmedQuery.toLowerCase();
+        return items.some((i) => i.label.toLowerCase() === needle);
+    }, [items, trimmedQuery]);
+    const showCreate = allowCreate && Boolean(onCreate) && trimmedQuery.length > 0 && !hasExactMatch;
+    const rowIds = useMemo(() => {
+        const ids = filtered.map((i) => i.id);
+        if (showCreate)
+            ids.push(CREATE_ROW);
+        return ids;
+    }, [filtered, showCreate]);
+    const activeId = activeOverride && rowIds.includes(activeOverride)
+        ? activeOverride
+        : (rowIds[0] ?? null);
+    const handleOpenChange = useCallback((next) => {
+        if (next) {
+            setQuery('');
+            setActiveOverride(null);
+        }
+        onOpenChange(next);
+    }, [onOpenChange]);
+    const handleSelect = useCallback((item) => {
+        onSelect(item);
+        handleOpenChange(false);
+    }, [onSelect, handleOpenChange]);
+    const handleCreate = useCallback(() => {
+        if (!trimmedQuery || !onCreate)
+            return;
+        onCreate(trimmedQuery);
+        handleOpenChange(false);
+    }, [trimmedQuery, onCreate, handleOpenChange]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            if (rowIds.length === 0)
+                return;
+            e.preventDefault();
+            const idx = activeId ? rowIds.indexOf(activeId) : -1;
+            const delta = e.key === 'ArrowDown' ? 1 : -1;
+            const next = (idx + delta + rowIds.length) % rowIds.length;
+            setActiveOverride(rowIds[next] ?? null);
+            return;
+        }
+        if (e.key === 'Enter') {
+            if (!activeId)
+                return;
+            e.preventDefault();
+            if (activeId === CREATE_ROW) {
+                handleCreate();
+                return;
+            }
+            const item = filtered.find((i) => i.id === activeId);
+            if (item)
+                handleSelect(item);
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            handleOpenChange(false);
+            return;
+        }
+        if (e.key.length === 1 &&
+            !e.metaKey &&
+            !e.ctrlKey &&
+            !e.altKey &&
+            query.length === 0) {
+            const key = e.key.toLowerCase();
+            const hit = items.find((i) => i.shortcut?.toLowerCase() === key);
+            if (hit) {
+                e.preventDefault();
+                handleSelect(hit);
+            }
+        }
+    }, [rowIds, activeId, filtered, items, query.length, handleSelect, handleCreate, handleOpenChange]);
+    const activeDomId = activeId ? `${listId}-row-${activeId}` : undefined;
+    return (_jsxs(StackedPopover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(StackedPopoverTrigger, { asChild: true, children: triggerAsChild ? (_jsx(Slot.Root, { ref: triggerRef, "aria-haspopup": "listbox", "aria-expanded": open, children: children })) : (_jsx("div", { ref: triggerRef, className: "inline-flex w-full", "aria-haspopup": "listbox", "aria-expanded": open, children: children })) }), _jsxs(StackedPopoverContent, { className: cn('w-64 p-0 gap-0 overflow-hidden', contentClassName), align: "start", "aria-label": ariaLabel, onCloseAutoFocus: (e) => {
+                    e.preventDefault();
+                    const el = triggerRef.current;
+                    const focusable = el?.matches('button, [tabindex]:not([tabindex="-1"])')
+                        ? el
+                        : el?.querySelector('button, [tabindex]:not([tabindex="-1"])');
+                    focusable?.focus();
+                }, onOpenAutoFocus: (e) => {
+                    e.preventDefault();
+                    inputRef.current?.focus();
+                }, children: [_jsxs("div", { className: "flex items-center gap-2 px-2.5 pt-2.5 pb-1.5 border-b border-border/60", children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": listId, "aria-expanded": true, "aria-activedescendant": activeDomId, value: query, placeholder: searchPlaceholder, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, className: "flex-1 min-w-0 bg-transparent outline-none text-[13px] placeholder:text-muted-foreground/70" }), triggerKey ? (_jsx(Kbd, { className: "text-[10.5px] shrink-0", children: triggerKey })) : null] }), _jsxs("ul", { ref: listRefCallback, id: listId, role: "listbox", "aria-label": ariaLabel, className: "max-h-[280px] overflow-y-auto overscroll-contain py-1", children: [filtered.length === 0 && !showCreate ? (_jsx("li", { children: _jsx(EmptyState, { title: labels.noMatches, className: "py-6" }) })) : (filtered.map((item) => {
+                                const active = activeId === item.id;
+                                return (
+                                // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+                                _jsxs("li", { id: `${listId}-row-${item.id}`, role: "option", "aria-selected": item.selected ?? false, "data-active": active || undefined, onMouseEnter: () => setActiveOverride(item.id), onClick: () => handleSelect(item), className: cn('mx-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px] text-foreground', 'flex gap-2', item.description ? 'items-start' : 'items-center', active && 'bg-muted'), children: [item.icon ? (_jsx("span", { className: cn('shrink-0 inline-flex items-center justify-center', item.description && 'pt-0.5'), children: item.icon })) : null, _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block truncate", children: item.label }), item.description ? (_jsx("span", { className: "block truncate text-[11px] leading-snug text-muted-foreground", children: item.description })) : null] }), _jsxs("span", { className: cn('shrink-0 inline-flex items-center gap-1 text-muted-foreground', item.description && 'pt-0.5'), children: [item.selected ? _jsx(Check, { className: "size-3.5", "aria-hidden": true }) : null, item.shortcut ? (_jsx(Kbd, { className: "text-[10.5px]", children: item.shortcut })) : null] })] }, item.id));
+                            })), showCreate ? (
+                            // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- keyboard handled by the parent input via aria-activedescendant
+                            _jsxs("li", { id: `${listId}-row-${CREATE_ROW}`, role: "option", "aria-selected": false, "data-active": activeId === CREATE_ROW || undefined, onMouseEnter: () => setActiveOverride(CREATE_ROW), onClick: handleCreate, className: cn('mx-1 mt-1 px-2 py-1.5 rounded-md cursor-pointer text-[13px]', 'flex items-center gap-2', filtered.length > 0 && 'border-t border-border/60 pt-2', activeId === CREATE_ROW && 'bg-muted'), children: [_jsx(Plus, { className: "size-3.5 text-muted-foreground shrink-0", strokeWidth: 1.8, "aria-hidden": true }), _jsxs("span", { className: "text-foreground truncate", children: [createLabel ?? labels.create, ":", ' ', _jsxs("span", { className: "text-foreground/90", children: ["\"", trimmedQuery, "\""] })] })] })) : null] })] })] }));
+}

package/dist/components/provenance-chip.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type ProvenanceMethod = 'dtmf' | 'deterministic' | 'llm';
+export interface ProvenanceChipProps extends Omit<React.ComponentProps<'span'>, 'children'> {
+    method: ProvenanceMethod;
+    label: string;
+    raw?: string;
+    rawLabel?: string;
+    expandLabel?: string;
+    confidence?: number;
+    confidenceLabel?: string;
+}
+export declare function ProvenanceChip({ method, label, raw, rawLabel, expandLabel, confidence, confidenceLabel, className, ...props }: ProvenanceChipProps): React.JSX.Element;