@peers-app/peers-ui 0.28.4 → 0.28.6

package/dist/command-palette/command-palette-ui.d.ts

@@ -1 +1,2 @@
+/** Searchable overlay for launching apps, running commands, and starting threads. */
 export declare function CommandPaletteOverlay(): import("react/jsx-runtime").JSX.Element | null;

package/dist/command-palette/command-palette-ui.js

@@ -12,6 +12,7 @@ const system_apps_1 = require("../system-apps");
 const tabs_state_1 = require("../tabs-layout/tabs-state");
 const routes_loader_1 = require("../ui-router/routes-loader");
 const command_palette_1 = require("./command-palette");
+/** Searchable overlay for launching apps, running commands, and starting threads. */
 function CommandPaletteOverlay() {
     const [isOpen] = (0, hooks_1.useObservable)(command_palette_1.isCommandPaletteOpen);
     const [_persistedQuery] = (0, hooks_1.useObservable)(command_palette_1.commandSearchQuery);
@@ -198,15 +199,15 @@ function CommandPaletteOverlay() {
             if (e.target === e.currentTarget) {
                 (0, command_palette_1.closeCommandPalette)();
             }
-        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "bg-white text-dark"}`, style: {
+        }, children: (0, jsx_runtime_1.jsxs)("div", { className: `${isDark ? "bg-dark text-light" : "peers-surface text-body"}`, style: {
                 width: "90%",
                 maxWidth: "600px",
                 borderRadius: "12px",
                 boxShadow: isDark ? "0 20px 40px rgba(0, 0, 0, 0.5)" : "0 20px 40px rgba(0, 0, 0, 0.1)",
-                border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                border: isDark ? "1px solid #495057" : "1px solid var(--peers-surface-border)",
                 overflow: "hidden",
             }, children: [(0, jsx_runtime_1.jsx)("div", { className: "p-3 border-bottom", style: {
-                        borderBottomColor: isDark ? "#495057" : "#dee2e6",
+                        borderBottomColor: isDark ? "#495057" : "var(--peers-surface-border)",
                     }, children: (0, jsx_runtime_1.jsxs)("div", { className: "position-relative", children: [(0, jsx_runtime_1.jsx)("i", { className: "bi-search position-absolute", style: {
                                     left: "12px",
                                     top: "50%",
@@ -230,7 +231,7 @@ function CommandPaletteOverlay() {
                                     border: "none",
                                     outline: "none",
                                     boxShadow: "none",
-                                    backgroundColor: isDark ? "#343a40" : "#f8f9fa",
+                                    backgroundColor: isDark ? "#343a40" : "var(--peers-surface-bg)",
                                 } })] }) }), (0, jsx_runtime_1.jsx)("div", { style: {
                         maxHeight: "400px",
                         overflowY: "auto",
@@ -275,11 +276,13 @@ function CommandPaletteOverlay() {
                                                                     fontSize: "16px",
                                                                     color: isSelected ? (isDark ? "#ffffff" : "#0d6efd") : "#6c757d",
                                                                     minWidth: "16px",
-                                                                } })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: command.label }), command.description && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: command.description }))] })] }), command.shortcut && ((0, jsx_runtime_1.jsx)("div", { className: `small px-2 py-1 rounded ${isDark ? "bg-secondary bg-opacity-50" : "bg-light"}`, style: {
+                                                                } })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "fw-medium", children: command.label }), command.description && ((0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: command.description }))] })] }), command.shortcut && ((0, jsx_runtime_1.jsx)("div", { className: `small px-2 py-1 rounded ${isDark ? "bg-secondary bg-opacity-50" : "bg-body"}`, style: {
                                                             fontSize: "11px",
                                                             fontFamily: "monospace",
                                                             color: isDark ? "#adb5bd" : "#6c757d",
-                                                            border: isDark ? "1px solid #495057" : "1px solid #dee2e6",
+                                                            border: isDark
+                                                                ? "1px solid #495057"
+                                                                : "1px solid var(--peers-surface-border)",
                                                         }, children: command.shortcut }))] }, command.id));
                                         })] }, category))), searchQuery.trim() && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "px-3 py-1 small text-muted fw-bold text-uppercase", style: { fontSize: "11px", letterSpacing: "0.5px" }, children: "Actions" }), (0, jsx_runtime_1.jsx)("div", { className: `px-3 py-2 d-flex align-items-center ${(allItems.length === 0 || selectedIndex >= allItems.length) &&
                                             searchQuery.trim()
@@ -290,7 +293,7 @@ function CommandPaletteOverlay() {
                                             cursor: "pointer",
                                             transition: "background-color 0.1s ease",
                                             borderTop: allItems.length > 0
-                                                ? `1px solid ${isDark ? "#495057" : "#dee2e6"}`
+                                                ? `1px solid ${isDark ? "#495057" : "var(--peers-surface-border)"}`
                                                 : "none",
                                             marginTop: allItems.length > 0 ? "8px" : "0",
                                             paddingTop: allItems.length > 0 ? "12px" : "8px",
@@ -310,7 +313,7 @@ function CommandPaletteOverlay() {
                                                             : "#6c757d",
                                                         minWidth: "16px",
                                                     } }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "fw-medium", children: ["Start new thread:", " ", (0, jsx_runtime_1.jsxs)("span", { className: "text-muted", children: [searchQuery.trim().slice(0, 50), searchQuery.trim().length > 50 ? "..." : ""] })] }), (0, jsx_runtime_1.jsx)("div", { className: "small text-muted", style: { fontSize: "12px" }, children: "Press Enter to create" })] })] }) })] }))] })) }), (0, jsx_runtime_1.jsxs)("div", { className: `px-3 py-2 small text-muted border-top d-flex align-items-center justify-content-between`, style: {
-                        borderTopColor: isDark ? "#495057" : "#dee2e6",
+                        borderTopColor: isDark ? "#495057" : "var(--peers-surface-border)",
                         fontSize: "11px",
                     }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u21B5" }), " to select"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "\u2191\u2193" }), " to navigate"] }), (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)("kbd", { className: "small", children: "esc" }), " to close"] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [allItems.length, " result", allItems.length !== 1 ? "s" : "", searchQuery.trim() && allItems.length === 0 && " • Start thread"] })] })] }) }));
 }

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];
+}