@butinapp/ui 0.1.0

package/dist/components/data-table.js

@@ -0,0 +1,252 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getCoreRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Columns3, Download, Search } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLabels } from '../i18n/context.js';
+import { cn } from '../lib/utils.js';
+import { Checkbox } from './checkbox.js';
+import { formatRows, normalizeTablePrefs, selection as sel, sortRows } from './data-table-model.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu.js';
+import { Input } from './input.js';
+// First entry is the default selection (see pageSize seeding below).
+const DEFAULT_PAGE_SIZES = [15, 25, 50, 100];
+// Generic, headless, theme-portable table. TanStack owns sorting/column-order/visibility/pagination;
+// selection (external Set) and grouping (manual collapsible sections over the sorted rows) are layered
+// on top so grouping stays fully controllable. Pure — prefs in via props, export out via callback.
+export const DataTable = ({ columns, rows, getRowId, selection, onSelectionChange, grouped, expandable, paginated, pageSizes = DEFAULT_PAGE_SIZES, initialState, onStateChange, onExport, exportName = 'export', toolbar, toolbarExtra, actionBar, emptyLabel, searchFloating = true }) => {
+    const t = useLabels();
+    const selectable = Boolean(selection && onSelectionChange);
+    const usePaging = Boolean(paginated) && !grouped;
+    // Local, ephemeral row expansion (which rows have their detail open) — never persisted, same as group
+    // collapse below. `expand` bundles the per-row hooks the rows need; absent when no expandable prop.
+    const [expandedRows, setExpandedRows] = useState(new Set());
+    const expand = expandable
+        ? {
+            detail: expandable,
+            isOpen: (id) => expandedRows.has(id),
+            toggle: (id) => setExpandedRows((prev) => {
+                const next = new Set(prev);
+                if (next.has(id)) {
+                    next.delete(id);
+                }
+                else {
+                    next.add(id);
+                }
+                return next;
+            })
+        }
+        : undefined;
+    // Sanitize persisted prefs against the CURRENT column keys before seeding — a plugin may have added/
+    // removed/renamed columns since the prefs were saved. Seeded once; later changes are local state.
+    const seed = useMemo(() => normalizeTablePrefs(initialState, columns.map((c) => c.key)), [initialState, columns]);
+    // The controlled state the seed maps to. Computed from `seed` so it tracks the persisted prefs, which the
+    // host loads asynchronously — the real values arrive AFTER first mount.
+    const seedStates = useMemo(() => ({
+        sorting: (seed.sort ? [{ id: seed.sort.key, desc: seed.sort.dir === 'desc' }] : []),
+        columnOrder: (seed.columnOrder ?? []),
+        columnVisibility: (seed.columnVisibility ?? {}),
+        pageSize: seed.pageSize ?? pageSizes[0] ?? 15
+    }), [seed, pageSizes]);
+    const [sorting, setSorting] = useState(seedStates.sorting);
+    const [columnOrder, setColumnOrder] = useState(seedStates.columnOrder);
+    const [columnVisibility, setColumnVisibility] = useState(seedStates.columnVisibility);
+    const [pageSize, setPageSize] = useState(seedStates.pageSize);
+    const [pageIndex, setPageIndex] = useState(0);
+    const [query, setQuery] = useState('');
+    // The host owns persistence and may recreate `onStateChange` every render; hold it in a ref so emitting
+    // never depends on (and never re-fires from) its identity churning.
+    const onStateChangeRef = useRef(onStateChange);
+    onStateChangeRef.current = onStateChange;
+    // Adopt the seed whenever its CONTENT changes — the persisted prefs load after first mount, so re-seed the
+    // controlled state once they arrive, and mark that change programmatic (`skipEmit`) so it is NOT echoed back
+    // to the host. Without this, the post-load emit would clobber the just-loaded config with the pre-load
+    // default. Compared by content (not object identity) so a host refetch returning the same values is a no-op
+    // and never discards an unsaved in-flight edit.
+    const seedSig = JSON.stringify(seedStates);
+    const appliedSig = useRef(seedSig);
+    const skipEmit = useRef(false);
+    useEffect(() => {
+        if (appliedSig.current === seedSig) {
+            return;
+        }
+        appliedSig.current = seedSig;
+        skipEmit.current = true;
+        setSorting(seedStates.sorting);
+        setColumnOrder(seedStates.columnOrder);
+        setColumnVisibility(seedStates.columnVisibility);
+        setPageSize(seedStates.pageSize);
+    }, [seedSig, seedStates]);
+    // Emit prefs on a USER change (sort/order/visibility/pageSize); the host debounces before persisting. The
+    // first run (mount) and any programmatic seed-adopt are skipped, so only real edits persist.
+    const firstRun = useRef(true);
+    useEffect(() => {
+        if (firstRun.current) {
+            firstRun.current = false;
+            return;
+        }
+        if (skipEmit.current) {
+            skipEmit.current = false;
+            return;
+        }
+        onStateChangeRef.current?.({
+            sort: sorting[0] ? { key: sorting[0].id, dir: sorting[0].desc ? 'desc' : 'asc' } : undefined,
+            columnOrder: columnOrder.length > 0 ? columnOrder : undefined,
+            columnVisibility,
+            pageSize
+        });
+    }, [sorting, columnOrder, columnVisibility, pageSize]);
+    const tanCols = useMemo(() => columns.map((col) => ({
+        id: col.key,
+        accessorFn: (row) => (col.sortValue ? col.sortValue(row) : row[col.key]),
+        header: col.label,
+        enableSorting: col.sortable !== false,
+        enableHiding: col.hideable !== false
+    })), [columns]);
+    const table = useReactTable({
+        data: rows,
+        columns: tanCols,
+        state: { sorting, columnOrder, columnVisibility, ...(usePaging ? { pagination: { pageIndex, pageSize } } : {}) },
+        onSortingChange: setSorting,
+        onColumnOrderChange: setColumnOrder,
+        onColumnVisibilityChange: setColumnVisibility,
+        getRowId: (row) => getRowId(row),
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel()
+    });
+    // The fully-resolved, ordered, visible leaf columns (for export + drag reorder + header render).
+    const leafCols = table.getVisibleLeafColumns();
+    const visibleModelCols = useMemo(() => leafCols.map((c) => columns.find((dc) => dc.key === c.id)).filter((c) => c != null), [leafCols, columns]);
+    // Sorted, search-filtered rows (raw Row objects). Search matches across export values, case-insensitive.
+    const filtered = useMemo(() => {
+        const sorted = sorting[0]
+            ? sortRows(rows, { key: sorting[0].id, dir: sorting[0].desc ? 'desc' : 'asc' }, columns)
+            : rows;
+        const q = query.trim().toLowerCase();
+        if (!q) {
+            return sorted;
+        }
+        return sorted.filter((row) => columns.some((c) => {
+            const v = c.exportValue ? c.exportValue(row) : row[c.key];
+            return v != null && String(v).toLowerCase().includes(q);
+        }));
+    }, [rows, sorting, query, columns]);
+    const allIds = useMemo(() => filtered.map(getRowId), [filtered, getRowId]);
+    const pageRows = usePaging ? filtered.slice(pageIndex * pageSize, pageIndex * pageSize + pageSize) : filtered;
+    // Master select-all state for the header checkbox: checked when every filtered row is selected,
+    // indeterminate when only some are. Clicking selects all filtered rows (across pages/groups), or clears.
+    const allSelected = selectable && selection ? sel.allOn(selection, allIds) : false;
+    const someSelected = selectable && selection ? !allSelected && allIds.some((id) => selection.has(id)) : false;
+    const masterChecked = allSelected ? true : someSelected ? 'indeterminate' : false;
+    const doExport = (format) => {
+        const blob = formatRows(visibleModelCols, filtered, format);
+        onExport?.({ text: blob.text, mime: blob.mime }, `${exportName}.${blob.ext}`);
+    };
+    // Native HTML5 drag reorder on header cells -> columnOrder.
+    const dragId = useRef(null);
+    const onDrop = (targetId) => {
+        const src = dragId.current;
+        dragId.current = null;
+        if (!src || src === targetId) {
+            return;
+        }
+        const order = leafCols.map((c) => c.id);
+        const from = order.indexOf(src);
+        const to = order.indexOf(targetId);
+        order.splice(to, 0, order.splice(from, 1)[0]);
+        setColumnOrder(order);
+    };
+    const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+    // The top toolbar is just a collapsed search affordance (an icon that expands into an input, right-aligned)
+    // so it costs almost no space; select-all lives in the header-row checkbox; column/export live in the footer.
+    const hideableCount = table.getAllLeafColumns().filter((c) => c.getCanHide()).length;
+    const showColumnsMenu = Boolean(toolbar?.columns) && hideableCount > 0;
+    const searchEnabled = Boolean(toolbar?.search);
+    // The search floats up into the right of the section's title row (absolute, negative-top) so it costs the
+    // table no vertical space — the data starts at the very top. Sticky offsets therefore ignore it.
+    const headTop = 'top-0';
+    const groupTop = 'top-9';
+    const columnsMenu = showColumnsMenu ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 outline-none", children: [_jsx(Columns3, { className: "size-3.5" }), " ", t.tableColumns] }), _jsx(DropdownMenuContent, { align: "end", children: table
+                    .getAllLeafColumns()
+                    .filter((c) => c.getCanHide())
+                    .map((c) => {
+                    const dc = columns.find((x) => x.key === c.id);
+                    return (_jsx(DropdownMenuCheckboxItem, { checked: c.getIsVisible(), onCheckedChange: (v) => c.toggleVisibility(v), children: dc?.label ?? c.id }, c.id));
+                }) })] })) : null;
+    const exportMenu = onExport ? (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 outline-none", children: [_jsx(Download, { className: "size-3.5" }), " ", t.tableExport] }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuItem, { onSelect: () => doExport('csv'), children: "CSV" }), _jsx(DropdownMenuItem, { onSelect: () => doExport('json'), children: "JSON" })] })] })) : null;
+    return (_jsxs("div", { className: "relative space-y-2", children: [searchEnabled ? (_jsx("div", { className: cn('z-30 flex items-center justify-end', searchFloating && 'absolute -top-8 right-0'), children: _jsx(TableSearch, { query: query, onChange: setQuery, placeholder: t.searchPlaceholder }) })) : null, filtered.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: emptyLabel ?? t.noRows })) : (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { className: "text-muted-foreground", children: _jsxs("tr", { className: "text-left", children: [expand ? _jsx("th", { className: cn('bg-card sticky z-10 w-6 border-b py-1 pl-0.5', headTop) }) : null, selectable ? (_jsx("th", { className: cn('bg-card sticky z-10 w-6 border-b py-1 pr-3 pl-0.5', headTop), children: _jsx(Checkbox, { checked: masterChecked, onCheckedChange: () => onSelectionChange?.(sel.setGroup(selection, allIds, !allSelected)), "aria-label": t.tableSelectAll(allIds.length) }) })) : null, leafCols.map((c) => {
+                                    const dc = columns.find((x) => x.key === c.id);
+                                    const sorted = c.getIsSorted();
+                                    return (_jsx("th", { draggable: true, onDragStart: () => (dragId.current = c.id), onDragOver: (e) => e.preventDefault(), onDrop: () => onDrop(c.id), className: cn('bg-card sticky z-10 border-b py-1 font-medium select-none last:pr-0', headTop, 
+                                        // Right-aligned (numeric) columns get extra trailing room so the figures don't crowd the
+                                        // next column's label/badge.
+                                        dc?.align === 'right' ? 'pr-8 text-right' : 'pr-4', dc?.noWrap && 'whitespace-nowrap', dc?.grow && 'w-full', dc?.minWidth), children: _jsxs("button", { className: "hover:text-foreground inline-flex items-center gap-1", disabled: !c.getCanSort(), onClick: c.getToggleSortingHandler(), children: [dc?.label ?? c.id, c.getCanSort() ? (sorted === 'asc' ? (_jsx(ArrowUp, { className: "size-3" })) : sorted === 'desc' ? (_jsx(ArrowDown, { className: "size-3" })) : (_jsx(ChevronsUpDown, { className: "size-3 opacity-40" }))) : null] }) }, c.id));
+                                })] }) }), _jsx("tbody", { children: grouped ? (_jsx(Groups, { rows: filtered, grouped: grouped, visibleModelCols: visibleModelCols, selectable: selectable, selection: selection, onSelectionChange: onSelectionChange, getRowId: getRowId, stickyTop: groupTop, expand: expand })) : (pageRows.map((row) => (_jsx(DataRow, { row: row, cols: visibleModelCols, selectable: selectable, checked: selection?.has(getRowId(row)) ?? false, onToggle: () => onSelectionChange?.(sel.toggle(selection, getRowId(row))), expand: expand, rowId: getRowId(row) }, getRowId(row))))) })] })), filtered.length > 0 ? (_jsxs("div", { className: "text-muted-foreground flex items-center gap-2 pt-1 text-xs", children: [_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [toolbarExtra, _jsx("span", { className: "tabular-nums", children: t.tableRowCount(filtered.length) })] }), usePaging ? (_jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx("button", { className: "hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent inline-flex size-7 items-center justify-center rounded-md border", disabled: pageIndex === 0, onClick: () => setPageIndex((i) => i - 1), "aria-label": t.tablePrev, children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx("span", { className: "border-input inline-flex h-7 min-w-12 items-center justify-center rounded-md border px-2 tabular-nums", children: t.tablePageOf(pageIndex + 1, totalPages) }), _jsx("button", { className: "hover:bg-accent disabled:opacity-40 disabled:hover:bg-transparent inline-flex size-7 items-center justify-center rounded-md border", disabled: pageIndex + 1 >= totalPages, onClick: () => setPageIndex((i) => i + 1), "aria-label": t.tableNext, children: _jsx(ChevronRight, { className: "size-4" }) }), _jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { className: "hover:bg-accent inline-flex h-7 items-center gap-1 rounded-md border px-2 outline-none", children: [t.tablePerPage(pageSize), " ", _jsx(ChevronDown, { className: "size-3.5 opacity-60" })] }), _jsx(DropdownMenuContent, { align: "center", children: pageSizes.map((n) => (_jsx(DropdownMenuItem, { onSelect: () => {
+                                                setPageSize(n);
+                                                setPageIndex(0);
+                                            }, children: t.tablePerPage(n) }, n))) })] })] })) : null, _jsxs("div", { className: "flex flex-1 items-center justify-end gap-3", children: [columnsMenu, exportMenu] })] })) : null, actionBar ? (_jsx("div", { className: "bg-card sticky bottom-0 flex flex-wrap items-center gap-2 border-t py-3", children: actionBar })) : null] }));
+};
+// Collapsed-by-default search: a magnifier button that expands into an input on click, so the top of the
+// table costs only an icon's width until you actually search. Stays expanded while a query is present;
+// Escape or blurring an empty field collapses it back to the icon.
+const TableSearch = ({ query, onChange, placeholder }) => {
+    const [open, setOpen] = useState(false);
+    const expanded = open || query.length > 0;
+    if (!expanded) {
+        return (_jsx("button", { type: "button", onClick: () => setOpen(true), "aria-label": placeholder, className: "text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-7 items-center justify-center rounded-md outline-none", children: _jsx(Search, { className: "size-4" }) }));
+    }
+    return (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2 size-3.5 -translate-y-1/2" }), _jsx(Input, { autoFocus: true, value: query, onChange: (e) => onChange(e.target.value), onBlur: () => {
+                    if (query.length === 0) {
+                        setOpen(false);
+                    }
+                }, onKeyDown: (e) => {
+                    if (e.key === 'Escape') {
+                        onChange('');
+                        setOpen(false);
+                    }
+                }, placeholder: placeholder, className: "h-7 w-48 pl-7 text-xs" })] }));
+};
+const DataRow = ({ row, cols, selectable, checked, onToggle, expand, rowId }) => {
+    const t = useLabels();
+    const detail = expand ? expand.detail(row) : null;
+    const isOpen = Boolean(expand && rowId != null && expand.isOpen(rowId));
+    const colSpan = cols.length + (selectable ? 1 : 0) + (expand ? 1 : 0);
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: "border-border/50 hover:bg-muted/30 border-t transition-colors", children: [expand ? (_jsx("td", { className: "w-6 py-1 pl-0.5 align-middle", children: detail != null ? (_jsx("button", { onClick: () => rowId != null && expand.toggle(rowId), "aria-expanded": isOpen, "aria-label": t.toggleRowDetails, className: "text-muted-foreground hover:text-foreground inline-flex", children: isOpen ? _jsx(ChevronDown, { className: "size-3.5" }) : _jsx(ChevronRight, { className: "size-3.5" }) })) : null })) : null, selectable ? (_jsx("td", { className: "py-1 pr-3 pl-0.5 align-middle", children: _jsx(Checkbox, { checked: checked, onCheckedChange: onToggle }) })) : null, cols.map((c) => (_jsx("td", { className: cn('py-1 tabular-nums last:pr-0', 
+                        // Match the header: right-aligned numerics keep extra trailing room from the next column.
+                        c.align === 'right' ? 'pr-8 text-right' : 'pr-4', c.noWrap && 'whitespace-nowrap', 
+                        // The greedy column takes all leftover width (w-full) without its content forcing the table wider
+                        // (max-w-0) — its cell truncates to fit. No overflow-clip on the td, so a cell popover still escapes.
+                        c.grow && 'w-full max-w-0', c.minWidth), children: c.cell ? c.cell(row) : String(row[c.key] ?? '') }, c.key)))] }), isOpen && detail != null ? (_jsx("tr", { className: "border-border/40 border-t", children: _jsx("td", { colSpan: colSpan, className: "bg-muted/20 px-2 py-2", children: detail }) })) : null] }));
+};
+// Partition the (already sorted/filtered) rows into collapsible category sections. Each section header
+// carries a select-all checkbox + count + chevron + optional per-group action. Collapse is local state.
+const Groups = ({ rows, grouped, visibleModelCols, selectable, selection, onSelectionChange, getRowId, stickyTop, expand }) => {
+    const [collapsed, setCollapsed] = useState(new Set());
+    const order = grouped.order ?? [];
+    const keys = [...new Set([...order, ...rows.map(grouped.by)])].filter((k) => rows.some((r) => grouped.by(r) === k));
+    const colSpan = visibleModelCols.length + (selectable ? 1 : 0) + (expand ? 1 : 0);
+    // A single category adds no information — its header would just be visual noise (and the cramped inline
+    // action the user flagged). Render the rows flat; the top toolbar still owns select-all / none.
+    if (keys.length <= 1) {
+        return (_jsx(_Fragment, { children: rows.map((row) => (_jsx(DataRow, { row: row, cols: visibleModelCols, selectable: selectable, checked: selection?.has(getRowId(row)) ?? false, onToggle: () => onSelectionChange?.(sel.toggle(selection, getRowId(row))), expand: expand, rowId: getRowId(row) }, getRowId(row)))) }));
+    }
+    return (_jsx(_Fragment, { children: keys.map((key) => {
+            const groupRows = rows.filter((r) => grouped.by(r) === key);
+            const ids = groupRows.map(getRowId);
+            const selectedIds = selection ? ids.filter((id) => selection.has(id)) : [];
+            const allOn = selectable && selection ? sel.allOn(selection, ids) : false;
+            const isOpen = !collapsed.has(key);
+            return (_jsx(GroupSection, { groupKey: key, count: groupRows.length, colSpan: colSpan, stickyTop: stickyTop, isOpen: isOpen, allOn: allOn, selectable: selectable, onToggleOpen: () => setCollapsed((prev) => {
+                    const next = new Set(prev);
+                    if (next.has(key)) {
+                        next.delete(key);
+                    }
+                    else {
+                        next.add(key);
+                    }
+                    return next;
+                }), onToggleAll: () => onSelectionChange?.(sel.setGroup(selection, ids, !allOn)), action: grouped.groupAction?.(key, ids, selectedIds), children: isOpen
+                    ? groupRows.map((row) => (_jsx(DataRow, { row: row, cols: visibleModelCols, selectable: selectable, checked: selection?.has(getRowId(row)) ?? false, onToggle: () => onSelectionChange?.(sel.toggle(selection, getRowId(row))), expand: expand, rowId: getRowId(row) }, getRowId(row))))
+                    : null }, key));
+        }) }));
+};
+const GroupSection = ({ groupKey, count, colSpan, stickyTop, isOpen, allOn, selectable, onToggleOpen, onToggleAll, action, children }) => (_jsxs(_Fragment, { children: [_jsx("tr", { className: cn('bg-muted sticky z-[5] border-y', stickyTop), children: _jsx("td", { colSpan: colSpan, className: "bg-muted py-1.5", children: _jsxs("div", { className: "flex items-center gap-2 pl-0.5 text-xs font-medium", children: [selectable ? (_jsx(Checkbox, { checked: allOn, onCheckedChange: onToggleAll, "aria-label": `Select all ${groupKey}` })) : null, _jsxs("button", { onClick: onToggleOpen, className: "hover:text-foreground inline-flex items-center gap-1.5", "aria-expanded": isOpen, children: [isOpen ? _jsx(ChevronDown, { className: "size-3.5" }) : _jsx(ChevronRight, { className: "size-3.5" }), groupKey, _jsx("span", { className: "text-muted-foreground font-normal", children: count })] }), action ? _jsx("span", { className: "ml-auto", children: action }) : null] }) }) }), children] }));

package/dist/components/dialog.d.ts

@@ -0,0 +1,11 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import type { ComponentProps, ReactNode } from 'react';
+export declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DialogContent: ({ className, children, ...props }: ComponentProps<typeof DialogPrimitive.Content>) => import("react").JSX.Element;
+export declare const DialogHeader: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const DialogTitle: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => import("react").JSX.Element;
+export declare const DialogDescription: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => import("react").JSX.Element;

package/dist/components/dialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// A centered modal dialog (radix Dialog) over a dimmed backdrop — for focused, occasional tasks (profile
+// management). Use <Sheet> instead for the side-drawer/inspector pattern. Theme-portable via shadcn tokens.
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogContent = ({ className, children, ...props }) => (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(DialogPrimitive.Content, { className: cn(
+            // `calc(100%-2rem)` keeps a gutter so the dialog never bleeds edge-to-edge on a narrow window.
+            'bg-background fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-lg border p-6 shadow-lg', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', className), ...props, children: [children, _jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 absolute top-4 right-4 rounded-sm focus-visible:ring-2 focus-visible:outline-none", children: _jsx(X, { className: "size-4" }) })] })] }));
+export const DialogHeader = ({ children }) => (_jsx("div", { className: "flex flex-col gap-1", children: children }));
+export const DialogTitle = ({ className, ...props }) => (_jsx(DialogPrimitive.Title, { className: cn('text-lg font-semibold tracking-tight', className), ...props }));
+export const DialogDescription = ({ className, ...props }) => (_jsx(DialogPrimitive.Description, { className: cn('text-muted-foreground text-sm', className), ...props }));

package/dist/components/dropdown-menu.d.ts

@@ -0,0 +1,7 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const DropdownMenu: import("react").FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuContent: ({ className, sideOffset, align, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>) => import("react").JSX.Element;
+export declare const DropdownMenuItem: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item>) => import("react").JSX.Element;
+export declare const DropdownMenuCheckboxItem: ({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => import("react").JSX.Element;

package/dist/components/dropdown-menu.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// Small app-styled dropdown (radix) — outside-click + escape dismiss for free. Used for the DataTable
+// column menu, export menu, and page-size picker. CheckboxItem stays open on toggle (multi-select menus).
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuContent = ({ className, sideOffset = 4, align = 'end', ...props }) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { sideOffset: sideOffset, align: align, className: cn('bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0', className), ...props }) }));
+export const DropdownMenuItem = ({ className, ...props }) => (_jsx(DropdownMenuPrimitive.Item, { className: cn('focus:bg-accent flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-none select-none', className), ...props }));
+export const DropdownMenuCheckboxItem = ({ className, children, ...props }) => (_jsxs(DropdownMenuPrimitive.CheckboxItem
+// Keep the menu open while toggling several columns in a row.
+, { 
+    // Keep the menu open while toggling several columns in a row.
+    onSelect: (e) => e.preventDefault(), className: cn('focus:bg-accent relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-6 text-xs outline-none select-none', className), ...props, children: [_jsx("span", { className: "absolute left-1 flex size-4 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Check, { className: "size-3.5" }) }) }), children] }));

package/dist/components/echart.d.ts

@@ -0,0 +1,5 @@
+import * as echarts from 'echarts';
+export declare const EChart: ({ option, height }: {
+    option: echarts.EChartsOption;
+    height?: number;
+}) => import("react").JSX.Element;

package/dist/components/echart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as echarts from 'echarts';
+import { useEffect, useRef } from 'react';
+// Minimal ECharts wrapper: init once, setOption on change, resize + dispose. Canvas can't ride the CSS
+// cascade, so callers feed it concrete token colors from useEchartsTheme().
+export const EChart = ({ option, height = 200 }) => {
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    useEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+        const chart = echarts.init(containerRef.current, null, { renderer: 'canvas' });
+        chartRef.current = chart;
+        const observer = new ResizeObserver(() => chart.resize());
+        observer.observe(containerRef.current);
+        return () => {
+            observer.disconnect();
+            chart.dispose();
+            chartRef.current = null;
+        };
+    }, []);
+    useEffect(() => {
+        chartRef.current?.setOption(option, true);
+    }, [option]);
+    return _jsx("div", { ref: containerRef, style: { width: '100%', height } });
+};

package/dist/components/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const Input: ({ className, type, ...props }: React.ComponentProps<'input'>) => React.JSX.Element;
+export { Input };

package/dist/components/input.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { cn } from '../lib/utils.js';
+const Input = ({ className, type, ...props }) => (_jsx("input", { type: type, "data-slot": "input", className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className), ...props }));
+export { Input };

package/dist/components/label.d.ts

@@ -0,0 +1,3 @@
+import { Label as LabelPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Label: ({ className, ...props }: ComponentProps<typeof LabelPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/label.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label as LabelPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// A form label (radix) — fades + blocks pointer events when its peer/group is disabled.
+export const Label = ({ className, ...props }) => (_jsx(LabelPrimitive.Root, { "data-slot": "label", className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), ...props }));

package/dist/components/progress.d.ts

@@ -0,0 +1,4 @@
+export declare const Progress: ({ value, className }: {
+    value: number;
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/progress.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+// A thin horizontal progress bar. `value` is a 0..1 fraction (clamped). Theme-portable: track is `bg-muted`,
+// fill is `bg-primary`, so it takes the host's palette. Width-driven, no animation.
+export const Progress = ({ value, className }) => {
+    const pct = Math.max(0, Math.min(1, value)) * 100;
+    return (_jsx("div", { role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, className: cn('bg-muted h-1.5 w-full overflow-hidden rounded-full', className), children: _jsx("div", { className: "bg-primary h-full rounded-full", style: { width: `${pct}%` } }) }));
+};

package/dist/components/select.d.ts

@@ -0,0 +1,11 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+export declare const Select: ({ id, value, options, onValueChange, placeholder }: {
+    id?: string;
+    value: string;
+    options: SelectOption[];
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+}) => import("react").JSX.Element;

package/dist/components/select.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronDown } from 'lucide-react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+export const Select = ({ id, value, options, onValueChange, placeholder }) => (_jsxs(SelectPrimitive.Root, { value: value, onValueChange: onValueChange, children: [_jsxs(SelectPrimitive.Trigger, { id: id, className: cn('border-input dark:bg-input/30 flex h-8 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-sm whitespace-nowrap shadow-xs outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] data-[placeholder]:text-muted-foreground'), children: [_jsx(SelectPrimitive.Value, { placeholder: placeholder }), _jsx(SelectPrimitive.Icon, { children: _jsx(ChevronDown, { className: "size-4 opacity-60" }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { position: "popper", sideOffset: 4, className: cn('bg-popover text-popover-foreground relative z-50 max-h-72 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-md border shadow-md', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0'), children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: options.map((o) => (_jsxs(SelectPrimitive.Item, { value: o.value, className: cn('focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none'), children: [_jsx(SelectPrimitive.ItemText, { children: o.label }), _jsx(SelectPrimitive.ItemIndicator, { className: "absolute right-2 flex items-center", children: _jsx(Check, { className: "size-4" }) })] }, o.value))) }) }) })] }));

package/dist/components/separator.d.ts

@@ -0,0 +1,3 @@
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Separator: ({ className, orientation, decorative, ...props }: ComponentProps<typeof SeparatorPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/separator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// A hairline divider (radix). Horizontal by default; pass orientation="vertical" inside a flex row.
+export const Separator = ({ className, orientation = 'horizontal', decorative = true, ...props }) => (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), ...props }));

package/dist/components/service-icon.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export type ServiceIconResolver = (service: {
+    id?: string;
+    name?: string;
+    color?: string;
+}, size: number) => ReactNode;
+export declare const ServiceIconProvider: ({ resolve, children }: {
+    resolve?: ServiceIconResolver;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const readableOn: (hex: string) => string;
+export declare const ServiceIcon: ({ id, icon, name, color, size, className }: {
+    id?: string;
+    icon?: string;
+    name?: string;
+    color?: string;
+    size?: number;
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/service-icon.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { cn } from '../lib/utils.js';
+const ServiceIconContext = createContext(undefined);
+// Wrap a tree to override how `<ServiceIcon>` draws: every icon consults `resolve` first, so an embed can map
+// plugin ids to its own logos without threading a prop through the shell. No provider → the monogram default.
+export const ServiceIconProvider = ({ resolve, children }) => (_jsx(ServiceIconContext.Provider, { value: resolve, children: children }));
+// Pick a legible letter color (near-black or white) for a solid brand-color tile, by the brand color's
+// luminance — so the monogram reads on any accent, in either theme. Falls back to white for non-hex colors.
+export const readableOn = (hex) => {
+    const m = hex.replace('#', '');
+    const full = m.length === 3 ? m.replace(/./g, (c) => c + c) : m;
+    if (full.length !== 6) {
+        return '#fff';
+    }
+    const r = parseInt(full.slice(0, 2), 16) / 255;
+    const g = parseInt(full.slice(2, 4), 16) / 255;
+    const b = parseInt(full.slice(4, 6), 16) / 255;
+    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    return luminance > 0.62 ? '#15181c' : '#fff';
+};
+// A service's brand mark. We don't ship third-party logos — instead a service renders a brand-colored
+// letter monogram (its name's initial on a solid tile of `meta.color`, with an auto-contrast glyph). A host
+// can override per service via `ServiceIconProvider` (keyed on `id`), or a plugin can supply its OWN `icon`
+// data-URI; absent both, the monogram is the default. Pure + prop-driven, so it renders identically in the
+// app and a snapshot embed. The box is always `size`×`size` so rows stay aligned regardless of which branch
+// renders.
+export const ServiceIcon = ({ id, icon, name, color, size = 16, className }) => {
+    const resolved = useContext(ServiceIconContext)?.({ id, name, color }, size);
+    if (resolved != null && resolved !== false) {
+        return (_jsx("span", { "aria-hidden": "true", className: cn('inline-flex shrink-0 items-center justify-center overflow-hidden', className), style: { width: size, height: size }, children: resolved }));
+    }
+    if (icon) {
+        return (_jsx("img", { src: icon, alt: "", width: size, height: size, className: cn('shrink-0 rounded-sm object-contain', className) }));
+    }
+    const letter = name?.trim().charAt(0).toUpperCase();
+    if (letter) {
+        return (_jsx("span", { "aria-hidden": "true", className: cn('inline-flex shrink-0 items-center justify-center rounded-[5px] font-semibold', className), style: {
+                width: size,
+                height: size,
+                fontSize: Math.round(size * 0.62),
+                lineHeight: 1,
+                backgroundColor: color ?? 'var(--muted)',
+                color: color ? readableOn(color) : 'var(--muted-foreground)'
+            }, children: letter }));
+    }
+    const dot = Math.max(6, Math.round(size / 2));
+    return (_jsx("span", { className: cn('inline-flex shrink-0 items-center justify-center', className), style: { width: size, height: size }, children: _jsx("span", { className: "rounded-full", style: { width: dot, height: dot, backgroundColor: color ?? 'var(--border)' } }) }));
+};

package/dist/components/sheet.d.ts

@@ -0,0 +1,10 @@
+import { Dialog } from 'radix-ui';
+import type { ComponentProps, ReactNode } from 'react';
+export declare const Sheet: import("react").FC<Dialog.DialogProps>;
+export declare const SheetTrigger: import("react").ForwardRefExoticComponent<Dialog.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: import("react").ForwardRefExoticComponent<Dialog.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SheetContent: ({ className, children, ...props }: ComponentProps<typeof Dialog.Content>) => import("react").JSX.Element;
+export declare const SheetHeader: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const SheetTitle: ({ className, ...props }: ComponentProps<typeof Dialog.Title>) => import("react").JSX.Element;

package/dist/components/sheet.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { Dialog } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// A right-side slide-over (radix Dialog). Used for the connection drawer; theme-portable via shadcn tokens.
+export const Sheet = Dialog.Root;
+export const SheetTrigger = Dialog.Trigger;
+export const SheetClose = Dialog.Close;
+export const SheetContent = ({ className, children, ...props }) => (_jsxs(Dialog.Portal, { children: [_jsx(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }), _jsxs(Dialog.Content, { className: cn('bg-background fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col gap-4 overflow-y-auto border-l p-6 shadow-lg', 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right', className), ...props, children: [children, _jsx(Dialog.Close, { className: "text-muted-foreground hover:text-foreground absolute top-4 right-4", children: _jsx(X, { className: "size-4" }) })] })] }));
+export const SheetHeader = ({ children }) => (_jsx("div", { className: "flex flex-col gap-1", children: children }));
+export const SheetTitle = ({ className, ...props }) => (_jsx(Dialog.Title, { className: cn('text-lg font-semibold tracking-tight', className), ...props }));

package/dist/components/skeleton.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentProps } from 'react';
+export declare const Skeleton: ({ className, ...props }: ComponentProps<'div'>) => import("react").JSX.Element;

package/dist/components/skeleton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+// A shimmering placeholder block. Compose several to mirror the shape of the content that's loading.
+export const Skeleton = ({ className, ...props }) => (_jsx("div", { "data-slot": "skeleton", className: cn('bg-muted/60 animate-pulse rounded-md', className), ...props }));

package/dist/components/sparkline.d.ts

@@ -0,0 +1,7 @@
+export declare const Sparkline: ({ values, width, height, strokeWidth, className }: {
+    values: number[];
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    className?: string;
+}) => import("react").JSX.Element | null;

package/dist/components/sparkline.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../lib/utils.js';
+// A compact inline trend line for a table cell — a row's per-day series at a glance. Pure SVG (no chart
+// engine), so it's cheap to render once per row. Stroke is `currentColor`, so the line takes the cell's text
+// color (set via className) and stays theme-portable. A series shorter than two finite points renders nothing.
+export const Sparkline = ({ values, width = 72, height = 20, strokeWidth = 1.5, className }) => {
+    const points = values.filter((v) => Number.isFinite(v));
+    if (points.length < 2) {
+        return null;
+    }
+    const min = Math.min(...points);
+    const max = Math.max(...points);
+    const span = max - min;
+    const pad = strokeWidth;
+    const usable = height - pad * 2;
+    const stepX = width / (points.length - 1);
+    // A flat series (all equal) pins to the vertical middle so it reads as a baseline, not a spike.
+    const y = (v) => (span === 0 ? height / 2 : pad + (1 - (v - min) / span) * usable);
+    const d = points.map((v, i) => `${i === 0 ? 'M' : 'L'}${(i * stepX).toFixed(2)} ${y(v).toFixed(2)}`).join(' ');
+    const last = points[points.length - 1];
+    return (_jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", className: cn('text-muted-foreground inline-block overflow-visible align-middle', className), "aria-hidden": true, children: [_jsx("path", { d: d, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinejoin: "round", strokeLinecap: "round" }), _jsx("circle", { cx: width, cy: y(last), r: strokeWidth, fill: "currentColor" })] }));
+};

package/dist/components/switch.d.ts

@@ -0,0 +1,3 @@
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Switch: ({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) => import("react").JSX.Element;

package/dist/components/switch.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import { cn } from '../lib/utils.js';
+// On/off toggle (radix). Semantic tokens only, so it inherits the host theme.
+export const Switch = ({ className, ...props }) => (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn('focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { className: "bg-background pointer-events-none block size-4 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5" }) }));

package/dist/components/tabs.d.ts

@@ -0,0 +1,8 @@
+import { Tabs as TabsPrimitive } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Tabs: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) => import("react").JSX.Element;
+export declare const TabsList: ({ className, variant, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
+    variant?: 'pill' | 'line';
+}) => import("react").JSX.Element;
+export declare const TabsTrigger: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) => import("react").JSX.Element;
+export declare const TabsContent: ({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) => import("react").JSX.Element;