@peers-app/peers-ui 0.28.3 → 0.28.5

package/dist/components/data-grid/autocomplete.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from "react";
+import { type GridValue } from "./reactive";
+/** Single-selection lookup, independent of any table, ORM, or contract. */
+export interface AutocompleteProps<T> {
+    /** Current selection; observable updates are reflected without recreating the control. */
+    value: GridValue<T | null>;
+    /** Local choices in display order, optionally supplied by a Peers observable. */
+    options?: GridValue<readonly T[]>;
+    /** Remote search. Stale responses are ignored and the signal is aborted on replacement. */
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<readonly T[]>;
+    getOptionKey: (option: T) => string;
+    getOptionLabel: (option: T) => string;
+    /** Explicit write boundary; a writable local observable can be passed directly. */
+    onChange: (value: T | null) => void;
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    minLength?: number;
+    debounceMs?: number;
+    maxResults?: number;
+    inputRef?: Ref<HTMLInputElement>;
+    invalid?: boolean;
+}
+/**
+ * Searchable, clearable Bootstrap combobox inspired by JobTrak's Typeahead/FK controls.
+ * Arrow keys and Enter belong to the popup while open; Tab selects a highlighted result
+ * and continues naturally. The popup is portaled so a scrolling grid cannot clip it.
+ */
+export declare function Autocomplete<T>(props: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-grid/autocomplete.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = Autocomplete;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const reactive_1 = require("./reactive");
+const emptyOptions = [];
+// Bootstrap button states remain available without drawing separate button boxes.
+const indicatorStyle = {
+    width: "2rem",
+    height: "100%",
+    padding: 0,
+    border: 0,
+    "--bs-btn-color": "var(--bs-tertiary-color)",
+    "--bs-btn-hover-color": "var(--bs-secondary-color)",
+    "--bs-btn-active-color": "var(--bs-body-color)",
+    "--bs-btn-disabled-color": "var(--bs-tertiary-color)",
+    "--bs-btn-bg": "transparent",
+    "--bs-btn-hover-bg": "transparent",
+    "--bs-btn-active-bg": "transparent",
+    "--bs-btn-disabled-bg": "transparent",
+};
+/**
+ * Searchable, clearable Bootstrap combobox inspired by JobTrak's Typeahead/FK controls.
+ * Arrow keys and Enter belong to the popup while open; Tab selects a highlighted result
+ * and continues naturally. The popup is portaled so a scrolling grid cannot clip it.
+ */
+function Autocomplete(props) {
+    const value = (0, reactive_1.useGridValue)(props.value);
+    const options = (0, reactive_1.useGridValue)(props.options ?? emptyOptions);
+    const id = (0, react_1.useId)();
+    const input = (0, react_1.useRef)(null);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [query, setQuery] = (0, react_1.useState)(null);
+    const [active, setActive] = (0, react_1.useState)(-1);
+    const [remote, setRemote] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)("");
+    const [position, setPosition] = (0, react_1.useState)({ left: 0, top: 0, width: 0, maxHeight: 240 });
+    const search = query ?? "";
+    const eligible = search.length >= (props.minLength ?? 0);
+    const results = (props.loadOptions
+        ? remote
+        : options.filter((option) => props.getOptionLabel(option).toLocaleLowerCase().includes(search.toLocaleLowerCase()))).slice(0, props.maxResults ?? 100);
+    (0, react_1.useEffect)(() => {
+        if (!open || props.disabled || !eligible || !props.loadOptions) {
+            setLoading(false);
+            setRemote([]);
+            return;
+        }
+        const controller = new AbortController();
+        let current = true;
+        setLoading(true);
+        setRemote([]);
+        setError("");
+        const timer = setTimeout(async () => {
+            try {
+                const rows = await props.loadOptions?.(search, controller.signal);
+                if (current)
+                    setRemote(rows ?? []);
+            }
+            catch (cause) {
+                if (current)
+                    setError(cause instanceof Error ? cause.message : "Could not load choices");
+            }
+            finally {
+                if (current)
+                    setLoading(false);
+            }
+        }, props.debounceMs ?? 150);
+        return () => {
+            current = false;
+            controller.abort();
+            clearTimeout(timer);
+        };
+    }, [open, props.disabled, search, eligible, props.loadOptions, props.debounceMs]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!open)
+            return;
+        const place = () => {
+            const rect = input.current?.parentElement?.getBoundingClientRect();
+            if (!rect)
+                return;
+            const below = window.innerHeight - rect.bottom - 8;
+            const height = Math.min(240, Math.max(100, below >= 140 ? below : rect.top - 8));
+            setPosition({
+                left: rect.left,
+                width: rect.width,
+                top: below >= 140 ? rect.bottom : Math.max(8, rect.top - height),
+                maxHeight: height,
+            });
+        };
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [open]);
+    (0, react_1.useEffect)(() => {
+        if (open && active >= 0)
+            document.getElementById(`${id}-${active}`)?.scrollIntoView?.({ block: "nearest" });
+    }, [open, active, id]);
+    const close = () => {
+        setOpen(false);
+        setQuery(null);
+        setActive(-1);
+    };
+    const choose = (option) => {
+        props.onChange(option);
+        close();
+    };
+    const setRef = (node) => {
+        input.current = node;
+        if (typeof props.inputRef === "function")
+            props.inputRef(node);
+        else if (props.inputRef)
+            props.inputRef.current = node;
+    };
+    const show = open && !props.disabled;
+    const showClear = (props.clearable ?? !props.required) && value !== null;
+    const selectedLabel = value === null ? "" : props.getOptionLabel(value);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "peers-autocomplete position-relative", style: { minWidth: 0, width: "100%" }, children: [(0, jsx_runtime_1.jsx)("input", { ref: setRef, className: `form-control ${props.invalid ? "is-invalid" : ""}`, style: {
+                    minWidth: 0,
+                    paddingRight: props.invalid
+                        ? showClear
+                            ? "6.25rem"
+                            : "4.25rem"
+                        : showClear
+                            ? "4.75rem"
+                            : "2.75rem",
+                    backgroundPosition: props.invalid
+                        ? `right ${showClear ? "4.75rem" : "2.75rem"} center`
+                        : undefined,
+                }, role: "combobox", "aria-label": props.label, "aria-autocomplete": "list", "aria-expanded": show, "aria-controls": show ? id : undefined, "aria-activedescendant": show && active >= 0 && results[active] ? `${id}-${active}` : undefined, "aria-invalid": props.invalid || undefined, autoComplete: "off", value: query ?? selectedLabel, placeholder: props.placeholder, disabled: props.disabled, required: props.required, onFocus: (event) => {
+                    event.target.select();
+                }, onBlur: close, onChange: (event) => {
+                    setQuery(event.target.value);
+                    setError("");
+                    if (props.loadOptions) {
+                        setRemote([]);
+                        setLoading(true);
+                    }
+                    setOpen(true);
+                    setActive(-1);
+                }, onKeyDown: (event) => {
+                    if (event.nativeEvent.isComposing || event.ctrlKey || event.metaKey || event.altKey)
+                        return;
+                    if (event.key === "ArrowDown" || (event.key === "ArrowUp" && show)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpen(true);
+                        setActive((prior) => event.key === "ArrowDown"
+                            ? Math.min(prior + 1, results.length - 1)
+                            : prior <= 0
+                                ? results.length - 1
+                                : prior - 1);
+                    }
+                    else if (event.key === "Enter" && show) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        const option = results[active >= 0 ? active : 0];
+                        if (eligible && option && !loading && !error)
+                            choose(option);
+                    }
+                    else if (event.key === "Escape" && (show || query !== null)) {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        close();
+                    }
+                    else if (event.key === "Tab" &&
+                        eligible &&
+                        show &&
+                        active >= 0 &&
+                        results[active] &&
+                        !loading &&
+                        !error) {
+                        choose(results[active]);
+                    }
+                } }), (0, jsx_runtime_1.jsxs)("span", { className: "position-absolute top-0 end-0 h-100 d-flex align-items-center", style: { paddingRight: "0.25rem" }, children: [showClear && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn d-inline-flex align-items-center justify-content-center", style: indicatorStyle, tabIndex: -1, "aria-label": `Clear ${props.label}`, disabled: props.disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                            choose(null);
+                            input.current?.focus();
+                        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 4 8 8M12 4l-8 8", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: {
+                            height: "55%",
+                            borderLeft: "1px solid var(--bs-border-color)",
+                            marginInline: "0.125rem",
+                        } }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn d-inline-flex align-items-center justify-content-center", style: indicatorStyle, tabIndex: -1, "aria-label": `Show ${props.label} choices`, disabled: props.disabled, onMouseDown: (event) => event.preventDefault(), onClick: () => {
+                            input.current?.focus();
+                            setQuery(null);
+                            setActive(-1);
+                            setOpen(!open);
+                        }, children: (0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] }), show &&
+                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: id, role: "listbox", "aria-label": `${props.label} choices`, className: "border rounded bg-body text-body shadow", style: { position: "fixed", ...position, overflowY: "auto", zIndex: 1080 }, children: loading || error || !eligible || !results.length ? ((0, jsx_runtime_1.jsx)("div", { className: `p-2 ${error ? "text-danger" : "text-body-secondary"}`, role: "status", children: loading
+                            ? "Loading…"
+                            : error ||
+                                (!eligible ? `Type at least ${props.minLength} characters` : "No matches") })) : (results.map((option, index) => ((0, jsx_runtime_1.jsx)("div", { id: `${id}-${index}`, role: "option", "aria-selected": value !== null && props.getOptionKey(value) === props.getOptionKey(option), className: `px-3 py-2 ${active === index ? "text-bg-primary" : ""}`, style: { cursor: "pointer" }, onMouseEnter: () => setActive(index), onMouseDown: (event) => event.preventDefault(), onClick: () => choose(option), children: props.getOptionLabel(option) }, props.getOptionKey(option))))) }), document.body)] }));
+}

package/dist/components/data-grid/data-grid.d.ts

@@ -0,0 +1,56 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type GridValue } from "./reactive";
+/** Stable lookup value; labels can change without changing the stored relationship. */
+export interface DataGridOption {
+    value: string;
+    label: string;
+}
+/** One entry in a multi-column sort, in priority order. */
+export interface DataGridSort {
+    columnId: string;
+    direction: "asc" | "desc";
+}
+/** Declarative column, with optional editing, lookup, custom actions, and totals. */
+export interface DataGridColumn<T> {
+    id: string;
+    label: string;
+    type?: "text" | "number" | "date" | "boolean" | "select";
+    width?: CSSProperties["width"];
+    /** Column width hint in pixels, including cell padding; editors fit the remaining space. */
+    minWidth?: number;
+    getValue?: (row: T) => unknown;
+    /** Omit to make this a display/action column. Numbers remain text until the owner validates. */
+    editable?: boolean | ((row: T) => boolean);
+    required?: boolean;
+    options?: GridValue<readonly DataGridOption[]>;
+    renderCell?: (row: T) => ReactNode;
+    sortValue?: (row: T) => string | number | null | undefined;
+    sortable?: boolean;
+    footer?: (rows: readonly T[]) => ReactNode;
+    align?: "left" | "right" | "center";
+}
+/** Persistence-free grid. Owners stage edits and validate/save through their own tools. */
+export interface DataGridProps<T> {
+    rows: GridValue<readonly T[]>;
+    columns: readonly DataGridColumn<T>[];
+    rowKey: (row: T) => string;
+    rowLabel?: (row: T) => string;
+    label: string;
+    onCellChange: (row: T, columnId: string, value: string | boolean) => void;
+    /** Optional controlled or observable sort; use onSortChange as its explicit write boundary. */
+    sort?: GridValue<readonly DataGridSort[]>;
+    defaultSort?: readonly DataGridSort[];
+    onSortChange?: (sort: DataGridSort[]) => void;
+    disabled?: boolean;
+    getRowError?: (row: T) => string | undefined;
+    onAddRow?: () => void;
+    addRowLabel?: string;
+    className?: string;
+}
+/**
+ * An always-editable, Bootstrap grid ported from JobTrak's spreadsheet interactions.
+ * Up/down move vertically; left/right move at caret boundaries or when all text is selected.
+ * Enter moves to the next row's first editor. Native Tab/Shift+Tab are preserved, and popup
+ * editors can consume keys. Sorting never mutates caller rows; focus retains a stable order.
+ */
+export declare function DataGrid<T>(props: DataGridProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-grid/data-grid.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = DataGrid;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const autocomplete_1 = require("./autocomplete");
+const reactive_1 = require("./reactive");
+const noSort = [];
+/**
+ * An always-editable, Bootstrap grid ported from JobTrak's spreadsheet interactions.
+ * Up/down move vertically; left/right move at caret boundaries or when all text is selected.
+ * Enter moves to the next row's first editor. Native Tab/Shift+Tab are preserved, and popup
+ * editors can consume keys. Sorting never mutates caller rows; focus retains a stable order.
+ */
+function DataGrid(props) {
+    const rows = (0, reactive_1.useGridValue)(props.rows);
+    const [localSort, setLocalSort] = (0, react_1.useState)(props.defaultSort ?? noSort);
+    const sort = (0, reactive_1.useGridValue)(props.sort ?? localSort);
+    const table = (0, react_1.useRef)(null);
+    const add = (0, react_1.useRef)(null);
+    const order = (0, react_1.useRef)([]);
+    const pendingNew = (0, react_1.useRef)(null);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const sorted = (0, react_1.useMemo)(() => {
+        const next = [...rows];
+        if (focused && order.current.length) {
+            const rank = new Map(order.current.map((id, index) => [id, index]));
+            next.sort((a, b) => (rank.get(props.rowKey(a)) ?? Infinity) - (rank.get(props.rowKey(b)) ?? Infinity));
+        }
+        else {
+            next.sort((a, b) => {
+                for (const spec of sort) {
+                    const column = props.columns.find((item) => item.id === spec.columnId);
+                    const av = column?.sortValue?.(a) ?? column?.getValue?.(a) ?? "";
+                    const bv = column?.sortValue?.(b) ?? column?.getValue?.(b) ?? "";
+                    const result = typeof av === "number" && typeof bv === "number"
+                        ? av - bv
+                        : String(av).localeCompare(String(bv), undefined, {
+                            numeric: true,
+                            sensitivity: "base",
+                        });
+                    if (result)
+                        return spec.direction === "asc" ? result : -result;
+                }
+                return 0;
+            });
+        }
+        order.current = next.map(props.rowKey);
+        return next;
+    }, [rows, sort, props.columns, props.rowKey, focused]);
+    const focusCell = (r, c) => {
+        const cell = table.current?.querySelector(`[data-grid-row="${r}"][data-grid-col="${c}"]`);
+        const target = cell?.querySelector("input:not(:disabled),textarea:not(:disabled),button:not(:disabled):not([tabindex='-1']),select:not(:disabled)");
+        if (!target)
+            return false;
+        target.focus();
+        target.select?.();
+        return true;
+    };
+    const focusNextRow = (r) => {
+        for (let row = r; row < sorted.length; row++) {
+            for (let col = 0; col < props.columns.length; col++) {
+                if (props.columns[col].editable && focusCell(row, col))
+                    return true;
+            }
+        }
+        if (add.current && !add.current.disabled) {
+            add.current.focus();
+            return true;
+        }
+        return false;
+    };
+    const onKey = (event, r, c) => {
+        if (event.defaultPrevented ||
+            event.nativeEvent.isComposing ||
+            event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.shiftKey)
+            return;
+        const target = event.target;
+        if (target.tagName === "BUTTON" && event.key === "Enter")
+            return;
+        let moved = false;
+        if (event.key === "Enter")
+            moved = focusNextRow(r + 1);
+        if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+            const step = event.key === "ArrowUp" ? -1 : 1;
+            for (let row = r + step; row >= 0 && row < sorted.length; row += step) {
+                if (focusCell(row, c)) {
+                    moved = true;
+                    break;
+                }
+            }
+        }
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+            const textInput = target.tagName === "INPUT" || target.tagName === "TEXTAREA";
+            const all = textInput && target.selectionStart === 0 && target.selectionEnd === target.value.length;
+            const atEdge = !textInput ||
+                target.selectionStart === null ||
+                all ||
+                (event.key === "ArrowLeft"
+                    ? target.selectionStart === 0 && target.selectionEnd === 0
+                    : target.selectionStart === target.value.length);
+            if (!atEdge)
+                return;
+            const step = event.key === "ArrowLeft" ? -1 : 1;
+            const count = props.columns.length;
+            for (let index = r * count + c + step; index >= 0 && index < sorted.length * count; index += step) {
+                if (focusCell(Math.floor(index / count), index % count)) {
+                    moved = true;
+                    break;
+                }
+            }
+        }
+        if (moved) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    const toggleSort = (column, append) => {
+        const prior = sort.find((entry) => entry.columnId === column.id);
+        const rest = append ? sort.filter((entry) => entry.columnId !== column.id) : [];
+        const next = prior?.direction === "desc"
+            ? rest
+            : [...rest, { columnId: column.id, direction: prior ? "desc" : "asc" }];
+        setFocused(false);
+        setLocalSort(next);
+        props.onSortChange?.(next);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: `table-responsive ${props.className ?? ""}`, children: (0, jsx_runtime_1.jsxs)("table", { ref: table, className: "table table-striped table-hover table-bordered align-middle mb-0", "aria-label": props.label, style: {
+                tableLayout: "fixed",
+                minWidth: props.columns.reduce((sum, column) => sum + (column.minWidth ?? (typeof column.width === "number" ? column.width : 80)), 0),
+            }, onFocus: () => setFocused(true), onBlur: (event) => {
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    setFocused(false);
+            }, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { children: props.columns.map((column) => {
+                            const spec = sort.find((entry) => entry.columnId === column.id);
+                            const sortable = column.sortable !== false && Boolean(column.getValue || column.sortValue);
+                            return ((0, jsx_runtime_1.jsx)("th", { scope: "col", style: { width: column.width, minWidth: column.minWidth, whiteSpace: "nowrap" }, "aria-sort": sort[0]?.columnId === column.id
+                                    ? spec?.direction === "asc"
+                                        ? "ascending"
+                                        : "descending"
+                                    : undefined, children: sortable ? ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "btn p-0 border-0 text-body fw-bold text-start", title: "Sort; Shift-click adds another column", onClick: (e) => toggleSort(column, e.shiftKey), children: [column.label, spec && ((0, jsx_runtime_1.jsxs)("span", { "aria-hidden": "true", children: [" ", spec.direction === "asc" ? "↓" : "↑", sort.length > 1 ? sort.indexOf(spec) + 1 : ""] }))] })) : (column.label) }, column.id));
+                        }) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: sorted.map((row, r) => {
+                        const key = props.rowKey(row);
+                        const label = props.rowLabel?.(row) || key;
+                        const error = props.getRowError?.(row);
+                        return ((0, jsx_runtime_1.jsx)(GridRow, { row: row, columns: props.columns, label: label, index: r, error: error, disabled: props.disabled, onChange: props.onCellChange, onKey: onKey, onMount: (node) => {
+                                if (node && pendingNew.current && !pendingNew.current.has(key)) {
+                                    pendingNew.current = null;
+                                    const input = node.querySelector("input:not(:disabled)");
+                                    input?.focus();
+                                    input?.select?.();
+                                }
+                            } }, key));
+                    }) }), (props.onAddRow || props.columns.some((column) => column.footer)) && ((0, jsx_runtime_1.jsxs)("tfoot", { children: [props.columns.some((column) => column.footer) && ((0, jsx_runtime_1.jsx)("tr", { children: props.columns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: "fw-bold", style: { textAlign: column.align }, children: column.footer?.(rows) }, column.id))) })), props.onAddRow && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: props.columns.length, children: (0, jsx_runtime_1.jsxs)("button", { ref: add, type: "button", className: "btn btn-outline-secondary btn-sm", disabled: props.disabled, onClick: () => {
+                                        pendingNew.current = new Set(rows.map(props.rowKey));
+                                        props.onAddRow?.();
+                                    }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-plus-lg", "aria-hidden": "true" }), " ", props.addRowLabel || "Add row"] }) }) }))] }))] }) }));
+}
+function GridRow({ row, columns, label, index, error, disabled, onChange, onKey, onMount, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { ref: onMount, className: error ? "table-danger" : undefined, children: columns.map((column, c) => ((0, jsx_runtime_1.jsx)("td", { "data-grid-row": index, "data-grid-col": c, style: { textAlign: column.align ?? (column.type === "number" ? "right" : undefined) }, onKeyDown: (event) => onKey(event, index, c), children: (0, jsx_runtime_1.jsx)(GridCell, { row: row, column: column, label: `${column.label} — ${label}`, disabled: disabled, invalid: !!error, onChange: (value) => onChange(row, column.id, value) }) }, column.id))) }), error && ((0, jsx_runtime_1.jsx)("tr", { className: "table-danger", children: (0, jsx_runtime_1.jsxs)("td", { colSpan: columns.length, role: "alert", children: [label, ": ", error] }) }))] }));
+}
+function GridCell({ row, column, label, disabled, invalid, onChange, }) {
+    const options = (0, reactive_1.useGridValue)(column.options ?? []);
+    const editable = typeof column.editable === "function" ? column.editable(row) : column.editable;
+    const raw = column.getValue?.(row);
+    if (!editable)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: column.renderCell?.(row) ?? (raw == null ? "" : String(raw)) });
+    if (column.type === "select")
+        return ((0, jsx_runtime_1.jsx)(autocomplete_1.Autocomplete, { label: label, value: options.find((option) => option.value === raw) ??
+                (raw ? { value: String(raw), label: `Unavailable (${String(raw)})` } : null), options: options, getOptionKey: (option) => option.value, getOptionLabel: (option) => option.label, onChange: (option) => onChange(option?.value ?? ""), disabled: disabled, required: column.required, invalid: invalid }));
+    return ((0, jsx_runtime_1.jsx)("input", { "aria-label": label, "aria-invalid": invalid || undefined, required: column.required, disabled: disabled, type: column.type === "boolean" ? "checkbox" : column.type === "date" ? "date" : "text", className: `${column.type === "boolean" ? "form-check-input" : "form-control"}${invalid ? " is-invalid" : ""}`, style: {
+            // Column sizing belongs to the table; reusing it here would consume the cell padding.
+            minWidth: 0,
+            textAlign: column.type === "number" ? "right" : undefined,
+        }, inputMode: column.type === "number" ? "decimal" : undefined, value: column.type === "boolean" ? undefined : String(raw ?? ""), checked: column.type === "boolean" ? Boolean(raw) : undefined, onChange: (event) => onChange(column.type === "boolean" ? event.target.checked : event.target.value) }));
+}

package/dist/components/data-grid/index.d.ts

@@ -0,0 +1,3 @@
+export { Autocomplete, type AutocompleteProps } from "./autocomplete";
+export { DataGrid, type DataGridColumn, type DataGridOption, type DataGridProps, type DataGridSort, } from "./data-grid";
+export type { GridValue } from "./reactive";

package/dist/components/data-grid/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = exports.Autocomplete = void 0;
+var autocomplete_1 = require("./autocomplete");
+Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return autocomplete_1.Autocomplete; } });
+var data_grid_1 = require("./data-grid");
+Object.defineProperty(exports, "DataGrid", { enumerable: true, get: function () { return data_grid_1.DataGrid; } });

package/dist/components/data-grid/reactive.d.ts

@@ -0,0 +1,5 @@
+import type { ReadonlyObservable } from "@peers-app/peers-sdk";
+/** A plain value or a Peers observable/computed, read without acquiring write authority. */
+export type GridValue<T> = T | ReadonlyObservable<T>;
+/** Subscribe through Peers' concurrent-safe React adapter; never write to the source. */
+export declare function useGridValue<T>(source: GridValue<T>): T;

package/dist/components/data-grid/reactive.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGridValue = useGridValue;
+const use_observable_1 = require("../../hooks/use-observable");
+/** Subscribe through Peers' concurrent-safe React adapter; never write to the source. */
+function useGridValue(source) {
+    // useObservable's public overload accepts a writable union; we use only its read side.
+    return (0, use_observable_1.useObservable)(source)[0];
+}

package/dist/components/router.js

@@ -51,7 +51,6 @@ const settings_page_1 = require("../screens/settings/settings-page");
 // import { TaskList } from "../screens/tasks/task-list";
 const tool_details_1 = require("../screens/tools/tool-details");
 const tool_list_1 = require("../screens/tools/tool-list");
-const tool_test_details_1 = require("../screens/tools/tool-test-details");
 const variable_details_1 = require("../screens/variables/variable-details");
 const variable_list_1 = require("../screens/variables/variable-list");
 const workflow_details_1 = require("../screens/workflows/workflow-details");
@@ -129,16 +128,10 @@ function Router({ path: providedPath } = {}) {
             const workflowId = parts[0];
             return (0, jsx_runtime_1.jsx)(workflow_details_1.WorkflowDetails, { workflowId: workflowId });
         }
-        if (path === "tools") {
+        // Saved tabs from the removed tool-test screens fall back to the catalog.
+        if (path === "tools" || /^tools\/tests(?:\/|$)/.test(path)) {
             return (0, jsx_runtime_1.jsx)(tool_list_1.ToolList, {});
         }
-        if (path.match(/^tools\/tests\//)) {
-            const parts = path.split("/");
-            parts.shift();
-            parts.shift();
-            const toolTestId = parts[0];
-            return (0, jsx_runtime_1.jsx)(tool_test_details_1.ToolTestDetails, { toolTestId: toolTestId });
-        }
         if (path.match(/^tools\//)) {
             const parts = path.split("/");
             parts.shift();

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./components/data-grid";
 export * from "./components/inverse-lazy-list";
 export type { IEditorEffects, IMarkdownEditorProps } from "./components/markdown-editor/editor";
 export { MarkdownEditor } from "./components/markdown-editor/editor";

package/dist/index.js

@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.updateActiveTabTitle = exports.goToTabPath = exports.closeCurrentTab = exports.activeTabs = exports.activeTabId = exports.setRootLayout = exports.selectedRootLayoutId = exports.getRootLayouts = exports.getRootLayout = exports.DEFAULT_ROOT_LAYOUT_ID = exports.TabsLayoutApp = exports.RootLayoutHost = exports.LayoutPicker = exports.unregisterGlobalOverlay = exports.registerGlobalOverlay = exports.globalOverlays = exports.openLink = exports.mainContentPath = exports.isDesktop = exports.Typeahead = exports.MarkdownEditor = void 0;
+__exportStar(require("./components/data-grid"), exports);
 __exportStar(require("./components/inverse-lazy-list"), exports);
 var editor_1 = require("./components/markdown-editor/editor");
 Object.defineProperty(exports, "MarkdownEditor", { enumerable: true, get: function () { return editor_1.MarkdownEditor; } });

package/dist/screens/settings/settings-page.js

@@ -84,7 +84,7 @@ const AppearanceSettingsTab = () => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Appearance" }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(color_mode_dropdown_1.ColorModeDropdown, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsx)(layout_picker_1.LayoutPicker, {}) })] }));
 };
 const AdvancedSettingsTab = () => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(AutoUpdatePeersCore, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(CleanupOldDataDir, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h5", { className: "mb-3", children: "Advanced Settings" }), (0, jsx_runtime_1.jsx)(PackagesRootDirectory, {}), (0, jsx_runtime_1.jsx)(ReloadPackagesOnPageRefresh, {}), (0, jsx_runtime_1.jsx)(ResetDeviceSyncInfos, {}), (0, jsx_runtime_1.jsx)(DeleteLocalDatabase, {}), (0, jsx_runtime_1.jsx)(CleanupOldDataDir, {}), (0, jsx_runtime_1.jsx)(ResetChangeTracking, {})] }));
 };
 const ProfileSection = () => {
     const me = (0, hooks_1.usePromise)(async () => {
@@ -134,13 +134,6 @@ const ReloadPackagesOnPageRefresh = () => {
                     (0, peers_sdk_1.reloadPackagesOnPageRefresh)(checked);
                 } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `Checking this will reload all packages very time the page is loaded.  Particularly useful while developing packages.` })] }));
 };
-const AutoUpdatePeersCore = () => {
-    (0, hooks_1.useObservable)(peers_sdk_1.autoUpdatePeersCore);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { htmlFor: "autoUpdatePeersCore", className: "form-label small mt-2 me-2", children: "Auto-update peers-core on startup:" }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: (0, peers_sdk_1.autoUpdatePeersCore)(), onChange: (e) => {
-                    const checked = e.target.checked;
-                    (0, peers_sdk_1.autoUpdatePeersCore)(checked);
-                } }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { markdownContent: `When enabled, the peers-core system package is automatically updated from the bundled version on every app startup. Disable this if you want to manage peers-core manually.` })] }));
-};
 const ResetDeviceSyncInfos = () => {
     return ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("button", { className: "btn btn-secondary btn-sm ms-2", onClick: async () => {
                 try {

package/dist/tabs-layout/tabs-layout.js

@@ -149,7 +149,8 @@ function TabsLayoutInternal({ fillContainer = false } = {}) {
                     alignItems: "center",
                     justifyContent: "center",
                     backgroundColor: _colorMode === "light" ? "rgba(255,255,255,0.85)" : "rgba(0,0,0,0.85)",
-                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-secondary mb-3", role: "status" }), (0, jsx_runtime_1.jsx)("div", { className: `small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`, children: "Switching group..." })] }) })), (0, jsx_runtime_1.jsx)("div", { className: `border-bottom ${_colorMode === "light" ? "bg-light" : "bg-dark"}`, style: {
+                }, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner-border text-secondary mb-3", role: "status" }), (0, jsx_runtime_1.jsx)("div", { className: `small ${_colorMode === "light" ? "text-muted" : "text-secondary"}`, children: "Switching group..." })] }) })), (0, jsx_runtime_1.jsx)("div", { className: "border-bottom", style: {
+                    backgroundColor: "var(--bs-secondary-bg)",
                     borderBottomWidth: "1px",
                     borderBottomColor: _colorMode === "light" ? "#dee2e6" : "#495057",
                 }, children: isMobile ? ((0, jsx_runtime_1.jsx)(MobileTabsHeader, { tabs: tabs, activeTab: activeTab, onSwitch: switchTab, onClose: closeTab, colorMode: _colorMode })) : ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center px-1", style: { height: "36px" }, children: [(0, jsx_runtime_1.jsx)(group_switcher_1.GroupSwitcher, { colorMode: _colorMode, isMobile: false }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "btn btn-sm me-2 d-flex align-items-center", onClick: command_palette_1.openCommandPalette, title: "Search everything (Cmd+K)", style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peers-app/peers-ui",
-  "version": "0.28.3",
+  "version": "0.28.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/peers-app/peers-ui.git"
@@ -36,7 +36,7 @@
     "lint:fix": "biome check --write ."
   },
   "peerDependencies": {
-    "@peers-app/peers-sdk": "^0.28.3",
+    "@peers-app/peers-sdk": "^0.28.5",
     "bootstrap": "^5.3.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -47,7 +47,7 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.27.1",
     "@biomejs/biome": "2.3.11",
-    "@peers-app/peers-sdk": "0.28.3",
+    "@peers-app/peers-sdk": "0.28.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",

package/dist/screens/tools/tool-test-details.d.ts

@@ -1,3 +0,0 @@
-export declare const ToolTestDetails: (props: {
-    toolTestId: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/tools/tool-test-details.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTestDetails = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const loading_indicator_1 = require("../../components/loading-indicator");
-const editor_1 = require("../../components/markdown-editor/editor");
-const save_button_1 = require("../../components/save-button");
-const hooks_1 = require("../../hooks");
-const tabs_state_1 = require("../../tabs-layout/tabs-state");
-const ToolTestDetails = (props) => {
-    const { toolTestId } = props;
-    const tool = (0, hooks_1.useObservableState)(undefined);
-    const toolTest = (0, hooks_1.usePromise)(async () => {
-        const toolTestData = await (0, peers_sdk_1.ToolTests)().get(toolTestId);
-        if (!toolTestData)
-            return null;
-        const _tool = await (0, peers_sdk_1.Tools)().get(toolTestData.toolId);
-        tool(_tool);
-        const doc = (0, peers_sdk_1.ToolTests)().initDoc(toolTestData);
-        (0, tabs_state_1.updateActiveTabTitle)(_tool?.name ? `${_tool.name} Test` : "Tool Test");
-        return doc;
-    });
-    if (toolTest === null) {
-        return (0, jsx_runtime_1.jsx)("div", { children: "ToolTest not found" });
-    }
-    if (!toolTest) {
-        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid mt-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("a", { href: `#tools/${toolTest.toolId}`, children: ["Tool: ", tool()?.name] }), (0, jsx_runtime_1.jsx)("div", { className: "float-end", children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: toolTest }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { height: "calc(100vh - 55px)", overflowY: "auto", width: "100%" }, children: [(0, jsx_runtime_1.jsx)("small", { children: "Test description:" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            border: "1px solid #ccc",
-                            borderRadius: "5px",
-                        }, children: (0, jsx_runtime_1.jsx)(editor_1.MarkdownEditor, { value: toolTest.qs.description, hideToolbar: true }) }), (0, jsx_runtime_1.jsx)("small", { children: "Code:" }), (0, jsx_runtime_1.jsx)("div", { style: {
-                            border: "1px solid #ccc",
-                            borderRadius: "5px",
-                        }, children: (0, jsx_runtime_1.jsx)(editor_1.MarkdownEditor, { value: toolTest.qs.code, hideToolbar: true }) })] })] }));
-};
-exports.ToolTestDetails = ToolTestDetails;

package/dist/screens/tools/tool-test-list.d.ts

@@ -1,3 +0,0 @@
-export declare const ToolTestList: (props: {
-    toolId: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/screens/tools/tool-test-list.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolTestList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = require("react");
-const input_1 = require("../../components/input");
-const globals_1 = require("../../globals");
-const hooks_1 = require("../../hooks");
-const ToolTestList = (props) => {
-    const { toolId } = props;
-    const testsObs = (0, hooks_1.useObservableState)([]);
-    const searchText = (0, hooks_1.useObservableState)("");
-    (0, react_1.useEffect)(() => {
-        (0, peers_sdk_1.ToolTests)()
-            .list({ toolId })
-            .then((tests) => {
-            testsObs(tests);
-        });
-    }, [toolId, testsObs]);
-    const tests = testsObs().filter((test) => test.description.toLowerCase().includes(searchText().toLowerCase()));
-    async function createTest(evt) {
-        if (evt.key !== "Enter")
-            return;
-        evt.preventDefault();
-        // TODO maybe use LLM call to do this?
-        const test = await (0, peers_sdk_1.ToolTests)().insert({
-            toolTestId: (0, peers_sdk_1.newid)(),
-            toolId,
-            description: searchText(),
-            code: "",
-            input: {},
-            output: {},
-        });
-        testsObs([...tests, test]);
-        searchText("");
-        (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`);
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(input_1.Input, { className: "form-control mb-2", value: searchText, onKeyDown: createTest, placeholder: "Search or create new test" }), testsObs().length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("p", { children: "No test for this tool yet" }) })), testsObs().length !== 0 && tests.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("p", { children: "No matching tests found" }) })), tests.map((test, iTest) => {
-                return ((0, jsx_runtime_1.jsx)("p", { onDoubleClick: (_e) => (0, globals_1.mainContentPath)(`tools/tests/${test.toolTestId}`), children: test.description.split("\n")[0] }, iTest));
-            })] }));
-};
-exports.ToolTestList = ToolTestList;