@raybase/datasheet-grid 0.0.2 → 0.1.2

package/dist/cells.js

@@ -0,0 +1,800 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createTextColumn, keyColumn } from "./engine.js";
+import { formatDate, formatDateTime, isNullValue, isPrimitiveArray, parseStoredDate, parseTypedDate, toIsoDate } from "./utils.js";
+import { cx, icons, KindGlyph } from "./ui.js";
+import { pillBase, pillColor, referencePill } from "./colors.js";
+import { Popover } from "./popover.js";
+const cellWrap = "flex h-full w-full items-center overflow-hidden px-[10px]";
+// The library's stock text/number columns commit on every keystroke
+// (continuousUpdates), which makes Escape unable to discard edits. These
+// variants only commit on blur/Enter so Escape reverts the cell.
+function nullDisplayText(value) {
+    return isNullValue(value) ? "" : String(value);
+}
+export function NullToken() {
+    return null;
+}
+function columnAllowsClear(column) {
+    return !column.required && !column.primaryKey && !column.auto;
+}
+function clearValue(rowData, allowClear) {
+    return allowClear ? null : rowData;
+}
+function textCellColumnFor(column) {
+    return {
+        ...createTextColumn({
+            continuousUpdates: false,
+            formatBlurredInput: (value) => nullDisplayText(value),
+            parseUserInput: (value) => value,
+            parsePastedValue: (value) => {
+                const text = value.replace(/[\n\r]+/g, " ").trim();
+                return text;
+            }
+        }),
+        deleteValue: () => "",
+        isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+    };
+}
+/** Core's `raybaseSecretRedacted`: what a set `secret()` column reads as, and the write that leaves it alone. */
+export const secretRedactedMarker = "[REDACTED]";
+const secretMask = "••••••••";
+// A secret cell never shows a value: a set secret reads as a mask, editing
+// starts blank, an edit left blank keeps the stored secret, and Delete clears it.
+function secretCellColumnFor() {
+    return {
+        ...createTextColumn({
+            continuousUpdates: false,
+            placeholder: "Not set",
+            formatBlurredInput: (value) => (isEmptyValue(value) ? "" : secretMask),
+            formatInputOnFocus: () => "",
+            formatForCopy: () => "",
+            parseUserInput: (value) => (value === "" ? secretRedactedMarker : value),
+            parsePastedValue: (value) => value.replace(/[\n\r]+/g, "").trim() || secretRedactedMarker
+        }),
+        deleteValue: () => null,
+        copyValue: () => "",
+        isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+    };
+}
+function intCellColumnFor(column) {
+    const allowClear = columnAllowsClear(column);
+    return {
+        ...createTextColumn({
+            continuousUpdates: false,
+            alignRight: true,
+            formatBlurredInput: (value) => (typeof value === "number" ? new Intl.NumberFormat().format(value) : nullDisplayText(value)),
+            parseUserInput: (value) => {
+                const number = parseFloat(value);
+                return Number.isNaN(number) ? null : Math.round(number);
+            },
+            parsePastedValue: (value) => {
+                const number = parseFloat(value);
+                return Number.isNaN(number) ? null : Math.round(number);
+            }
+        }),
+        deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+        pasteValue: ({ rowData, value }) => {
+            const number = parseFloat(value);
+            if (Number.isNaN(number))
+                return allowClear ? null : rowData;
+            return Math.round(number);
+        },
+        isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+    };
+}
+function floatCellColumnFor(column) {
+    const allowClear = columnAllowsClear(column);
+    return {
+        ...createTextColumn({
+            continuousUpdates: false,
+            alignRight: true,
+            formatBlurredInput: (value) => (typeof value === "number" ? new Intl.NumberFormat().format(value) : nullDisplayText(value)),
+            parseUserInput: (value) => {
+                const number = parseFloat(value);
+                return Number.isNaN(number) ? null : number;
+            },
+            parsePastedValue: (value) => {
+                const number = parseFloat(value);
+                return Number.isNaN(number) ? null : number;
+            }
+        }),
+        deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+        pasteValue: ({ rowData, value }) => {
+            const number = parseFloat(value);
+            if (Number.isNaN(number))
+                return allowClear ? null : rowData;
+            return number;
+        },
+        isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+    };
+}
+const popoverSearchInput = "h-8 w-full rounded-md border border-zinc-200 bg-white px-2.5 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-zinc-400 focus:outline-none";
+const popoverFooterButton = "inline-flex h-7 items-center gap-1.5 rounded-md px-2 text-xs font-medium text-zinc-500 transition-colors hover:bg-zinc-100 hover:text-zinc-900";
+/**
+ * Detect a plain click (not a drag) so cell selection drags still work.
+ * Tracks mouseup/mousemove on the document because the grid re-renders cells
+ * mid-click, which can swallow the matching mouseup on the element itself.
+ */
+function useClickToOpen(onOpen, enabled) {
+    const startRef = useRef(null);
+    const cleanupRef = useRef(null);
+    useEffect(() => () => cleanupRef.current?.(), []);
+    return {
+        onMouseDown: (event) => {
+            if (!enabled)
+                return;
+            startRef.current = { x: event.clientX, y: event.clientY };
+            cleanupRef.current?.();
+            const onMouseUp = (upEvent) => {
+                cleanupRef.current?.();
+                if (upEvent.button !== 0)
+                    return;
+                const start = startRef.current;
+                startRef.current = null;
+                if (!start || Math.abs(upEvent.clientX - start.x) > 4 || Math.abs(upEvent.clientY - start.y) > 4)
+                    return;
+                onOpen();
+            };
+            const onMouseMove = (moveEvent) => {
+                const start = startRef.current;
+                if (start && (Math.abs(moveEvent.clientX - start.x) > 4 || Math.abs(moveEvent.clientY - start.y) > 4)) {
+                    startRef.current = null;
+                }
+            };
+            document.addEventListener("mouseup", onMouseUp, true);
+            document.addEventListener("mousemove", onMouseMove, true);
+            cleanupRef.current = () => {
+                document.removeEventListener("mouseup", onMouseUp, true);
+                document.removeEventListener("mousemove", onMouseMove, true);
+                cleanupRef.current = null;
+            };
+        }
+    };
+}
+export function PickerValue({ value, columnData }) {
+    if (value === null || value === undefined)
+        return React.createElement(NullToken, null);
+    if (value === "")
+        return null;
+    if (columnData.variant === "enum") {
+        return React.createElement("span", { className: cx(pillBase, pillColor(value, columnData.enumValues)) },
+            React.createElement("span", { className: "truncate" }, value));
+    }
+    const option = columnData.options.find((candidate) => candidate.id === value);
+    if (!option)
+        return React.createElement("span", { className: "truncate font-mono text-[12px] text-zinc-400" }, value);
+    return React.createElement("span", { className: cx(pillBase, referencePill) },
+        React.createElement("span", { className: "truncate" }, option.label));
+}
+export function PickerPopover({ anchor, columnData, value, onPick, onClose }) {
+    const [query, setQuery] = useState("");
+    const [highlight, setHighlight] = useState(0);
+    const listRef = useRef(null);
+    const inputRef = useRef(null);
+    const normalized = query.trim().toLowerCase();
+    const filtered = normalized
+        ? columnData.options.filter((option) => option.label.toLowerCase().includes(normalized) || option.id.toLowerCase().includes(normalized))
+        : columnData.options;
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        setHighlight(0);
+    }, [normalized]);
+    useEffect(() => {
+        listRef.current?.querySelector('[data-highlight="true"]')?.scrollIntoView({ block: "nearest" });
+    }, [highlight]);
+    const pick = (next) => {
+        onPick(next);
+        onClose();
+    };
+    return (React.createElement(Popover, { anchor: anchor, onClose: onClose, minWidth: 240, maxWidth: 360, matchAnchorWidth: true },
+        React.createElement("div", { className: "border-b border-zinc-100 p-2" },
+            React.createElement("input", { ref: inputRef, className: popoverSearchInput, value: query, placeholder: columnData.variant === "reference" ? "Find a record…" : "Find an option…", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                    // Keep grid-level key handling out of the editor (it would re-enter edit mode).
+                    event.stopPropagation();
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        setHighlight((current) => Math.min(current + 1, filtered.length - 1));
+                    }
+                    else if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        setHighlight((current) => Math.max(current - 1, 0));
+                    }
+                    else if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (filtered[highlight])
+                            pick(filtered[highlight].id);
+                    }
+                } })),
+        React.createElement("div", { ref: listRef, className: "max-h-60 overflow-auto py-1", role: "listbox" },
+            value && columnData.allowClear ? (React.createElement("button", { type: "button", className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-zinc-400 hover:bg-zinc-50 hover:text-zinc-700", onMouseDown: (event) => {
+                    event.preventDefault();
+                    pick(null);
+                } },
+                icons.closeSmall,
+                "Clear value")) : null,
+            filtered.map((option, index) => {
+                const isSelected = option.id === value;
+                const isHighlighted = index === highlight;
+                return (React.createElement("button", { type: "button", key: option.id, role: "option", "aria-selected": isSelected, "data-highlight": isHighlighted || undefined, className: cx("flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm", isHighlighted ? "bg-zinc-100" : "hover:bg-zinc-50"), onMouseEnter: () => setHighlight(index), onMouseDown: (event) => {
+                        event.preventDefault();
+                        pick(option.id);
+                    } },
+                    columnData.variant === "enum" ? (React.createElement("span", { className: cx(pillBase, pillColor(option.label, columnData.enumValues)) }, option.label)) : (React.createElement("span", { className: "min-w-0 flex-1 truncate text-zinc-700" }, option.label)),
+                    isSelected ? React.createElement("span", { className: "ml-auto shrink-0 text-zinc-500" }, icons.checkmark) : null));
+            }),
+            !filtered.length ? React.createElement("div", { className: "px-3 py-6 text-center text-sm text-zinc-400" }, "No matches") : null)));
+}
+export function PickerCell({ rowData, setRowData, active, focus, disabled, columnData, stopEditing }) {
+    const wrapRef = useRef(null);
+    const [clickedOpen, setClickedOpen] = useState(false);
+    const open = (focus || clickedOpen) && !disabled;
+    // Like text and date cells: the first click only selects the cell; clicking
+    // an already-active cell (or Enter / double-click) opens the dropdown.
+    const clickHandlers = useClickToOpen(() => setClickedOpen(true), !disabled && !open && active);
+    useEffect(() => {
+        if (!focus)
+            setClickedOpen(false);
+    }, [focus]);
+    const close = () => {
+        setClickedOpen(false);
+        if (focus)
+            stopEditing({ nextRow: false });
+    };
+    return (React.createElement("div", { ref: wrapRef, className: cx(cellWrap, active && !disabled && "cursor-pointer"), ...clickHandlers },
+        React.createElement(PickerValue, { value: rowData ?? null, columnData: columnData }),
+        open ? (React.createElement(PickerPopover, { anchor: wrapRef.current, columnData: columnData, value: rowData ?? null, onPick: (next) => setRowData(next), onClose: close })) : null));
+}
+// ---------------------------------------------------------------------------
+// Boolean
+// ---------------------------------------------------------------------------
+const booleanFalsyText = new Set(["", "false", "no", "off", "disabled", "0", "n", "f", "unchecked", "undefined", "null"]);
+export function BooleanCell({ rowData, setRowData, focus, active, disabled, stopEditing }) {
+    useLayoutEffect(() => {
+        if (!focus || disabled)
+            return;
+        setRowData(!rowData);
+        stopEditing({ nextRow: false });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focus, disabled]);
+    if (isNullValue(rowData)) {
+        return React.createElement("div", { className: cellWrap },
+            React.createElement(NullToken, null));
+    }
+    return (React.createElement("input", { className: "dsg-checkbox", tabIndex: -1, type: "checkbox", disabled: disabled, checked: Boolean(rowData), onMouseDown: () => {
+            if (!active)
+                setRowData(!rowData);
+        }, onChange: () => null }));
+}
+// ---------------------------------------------------------------------------
+// Date / datetime
+// ---------------------------------------------------------------------------
+function startOfMonth(date) {
+    return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+export function Calendar({ selected, onPick }) {
+    const today = new Date();
+    const [view, setView] = useState(() => startOfMonth(selected ?? today));
+    const selectedTime = selected?.getTime();
+    useEffect(() => {
+        if (selected)
+            setView(startOfMonth(selected));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedTime]);
+    const days = [];
+    const gridStart = new Date(view.getFullYear(), view.getMonth(), 1 - view.getDay());
+    for (let i = 0; i < 42; i++) {
+        days.push(new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
+    }
+    return (React.createElement("div", { className: "px-3 pb-2 pt-1.5" },
+        React.createElement("div", { className: "mb-1 flex items-center justify-between" },
+            React.createElement("button", { type: "button", className: popoverFooterButton, onMouseDown: (event) => event.preventDefault(), onClick: () => setView(new Date(view.getFullYear(), view.getMonth() - 1, 1)), "aria-label": "Previous month" }, icons.chevronLeft),
+            React.createElement("div", { className: "text-[13px] font-semibold text-zinc-900" }, view.toLocaleDateString(undefined, { month: "long", year: "numeric" })),
+            React.createElement("button", { type: "button", className: popoverFooterButton, onMouseDown: (event) => event.preventDefault(), onClick: () => setView(new Date(view.getFullYear(), view.getMonth() + 1, 1)), "aria-label": "Next month" }, icons.chevronRight)),
+        React.createElement("div", { className: "grid grid-cols-7 text-center" },
+            ["S", "M", "T", "W", "T", "F", "S"].map((label, index) => (React.createElement("div", { key: index, className: "py-1 text-[10px] font-semibold uppercase text-zinc-400" }, label))),
+            days.map((day) => {
+                const inMonth = day.getMonth() === view.getMonth();
+                const isSelected = selected ? sameDay(day, selected) : false;
+                const isToday = sameDay(day, today);
+                return (React.createElement("button", { type: "button", key: day.toISOString(), className: cx("mx-auto flex h-7 w-7 items-center justify-center rounded-md text-xs tabular-nums transition-colors", isSelected ? "bg-zinc-950 font-semibold text-white" : "hover:bg-zinc-100", !isSelected && (inMonth ? "text-zinc-700" : "text-zinc-300"), !isSelected && isToday && "font-semibold text-zinc-950 ring-1 ring-inset ring-zinc-300"), onMouseDown: (event) => event.preventDefault(), onClick: () => onPick(day) }, day.getDate()));
+            }))));
+}
+function toLocalTimeInput(date) {
+    return `${`${date.getHours()}`.padStart(2, "0")}:${`${date.getMinutes()}`.padStart(2, "0")}`;
+}
+export function DatePopover({ anchor, value, withTime, allowClear, onCommit, onClose }) {
+    // Edits buffer locally; picking a day commits dates immediately, while
+    // datetime edits commit on click-away/Enter and Escape discards them.
+    const [draft, setDraft] = useState(value);
+    const selected = parseStoredDate(draft);
+    const [text, setText] = useState(() => draftInputText(parseStoredDate(value), value, withTime));
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const commitAndClose = (next) => {
+        if (next !== value)
+            onCommit(next);
+        onClose();
+    };
+    const updateDraft = (next) => {
+        setDraft(next);
+        setText(draftInputText(parseStoredDate(next), next, withTime));
+    };
+    const pickDay = (date) => {
+        if (!withTime) {
+            commitAndClose(toIsoDate(date));
+            return;
+        }
+        const next = new Date(date.getFullYear(), date.getMonth(), date.getDate(), selected?.getHours() ?? 12, selected?.getMinutes() ?? 0);
+        updateDraft(next.toISOString());
+    };
+    const pickTime = (time) => {
+        const [hours, minutes] = time.split(":").map(Number);
+        if (Number.isNaN(hours))
+            return;
+        const base = selected ?? new Date();
+        updateDraft(new Date(base.getFullYear(), base.getMonth(), base.getDate(), hours, minutes || 0).toISOString());
+    };
+    const submitText = () => {
+        const trimmed = text.trim();
+        if (!trimmed) {
+            if (!allowClear)
+                return;
+            commitAndClose(null);
+            return;
+        }
+        const parsed = parseTypedDate(trimmed);
+        if (!parsed)
+            return;
+        commitAndClose(withTime ? parsed.toISOString() : toIsoDate(parsed));
+    };
+    return (React.createElement(Popover, { anchor: anchor, onClose: (reason) => (reason === "escape" ? onClose() : commitAndClose(draft)), minWidth: 264, maxWidth: 300 },
+        React.createElement("div", { className: "flex items-center gap-1.5 border-b border-zinc-100 p-2" },
+            React.createElement("input", { ref: inputRef, className: popoverSearchInput, value: text, placeholder: withTime ? "YYYY-MM-DD HH:MM" : "YYYY-MM-DD", onChange: (event) => setText(event.target.value), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key !== "Enter")
+                        return;
+                    event.preventDefault();
+                    submitText();
+                } }),
+            withTime ? (React.createElement("input", { type: "time", className: "h-8 shrink-0 rounded-md border border-zinc-200 bg-white px-1.5 text-sm text-zinc-900 focus:border-zinc-400 focus:outline-none", value: selected ? toLocalTimeInput(selected) : "", onChange: (event) => pickTime(event.target.value), onKeyDown: (event) => event.stopPropagation() })) : null),
+        React.createElement(Calendar, { selected: selected, onPick: pickDay }),
+        React.createElement("div", { className: "flex items-center justify-between border-t border-zinc-100 px-2 py-1.5" },
+            React.createElement("button", { type: "button", className: popoverFooterButton, onMouseDown: (event) => event.preventDefault(), onClick: () => (withTime ? updateDraft(new Date().toISOString()) : commitAndClose(toIsoDate(new Date()))) },
+                icons.calendar,
+                "Today"),
+            draft && allowClear ? (React.createElement("button", { type: "button", className: popoverFooterButton, onMouseDown: (event) => event.preventDefault(), onClick: () => commitAndClose(null) },
+                icons.closeSmall,
+                "Clear")) : null)));
+}
+function draftInputText(parsed, raw, withTime) {
+    if (withTime)
+        return parsed ? `${toIsoDate(parsed)} ${toLocalTimeInput(parsed)}` : "";
+    return parsed ? toIsoDate(parsed) : raw ?? "";
+}
+export function DateCell({ rowData, setRowData, focus, disabled, columnData, stopEditing }) {
+    const wrapRef = useRef(null);
+    const display = columnData.withTime ? formatDateTime(rowData) : formatDate(rowData);
+    return (React.createElement("div", { ref: wrapRef, className: cellWrap },
+        isNullValue(rowData) ? React.createElement(NullToken, null) : React.createElement("span", { className: cx("truncate text-sm", disabled ? "text-zinc-500" : "text-zinc-900") }, display),
+        focus && !disabled ? (React.createElement(DatePopover, { anchor: wrapRef.current, value: typeof rowData === "string" ? rowData : null, withTime: columnData.withTime, allowClear: columnData.allowClear, onCommit: (next) => setRowData(next), onClose: () => stopEditing({ nextRow: false }) })) : null));
+}
+export function LongTextCell({ rowData, setRowData, focus, disabled, stopEditing }) {
+    const wrapRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [draft, setDraft] = useState(null);
+    useLayoutEffect(() => {
+        if (focus && !disabled) {
+            setDraft(typeof rowData === "string" ? rowData : "");
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [focus, disabled]);
+    useEffect(() => {
+        if (draft === null)
+            return;
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        }
+    }, [draft !== null]);
+    const commitAndClose = () => {
+        if (draft !== null && draft !== (rowData ?? ""))
+            setRowData(draft);
+        setDraft(null);
+        stopEditing({ nextRow: false });
+    };
+    const discardAndClose = () => {
+        setDraft(null);
+        stopEditing({ nextRow: false });
+    };
+    return (React.createElement("div", { ref: wrapRef, className: cellWrap },
+        isNullValue(rowData) ? React.createElement(NullToken, null) : React.createElement("span", { className: "truncate text-sm text-zinc-900" }, typeof rowData === "string" ? rowData.replace(/\n/g, " ") : ""),
+        focus && !disabled && draft !== null ? (React.createElement(Popover, { anchor: wrapRef.current, onClose: (reason) => (reason === "escape" ? discardAndClose() : commitAndClose()), minWidth: 320, maxWidth: 520, matchAnchorWidth: true },
+            React.createElement("textarea", { ref: textareaRef, className: "block max-h-[320px] min-h-[140px] w-full resize-y rounded-t-lg border-0 bg-transparent p-3 text-sm leading-relaxed text-zinc-900 placeholder:text-zinc-400 focus:outline-none", value: draft, placeholder: "Write something\u2026", onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                        event.preventDefault();
+                        commitAndClose();
+                    }
+                } }),
+            React.createElement("div", { className: "rounded-b-lg border-t border-zinc-100 bg-zinc-50/60 px-3 py-1.5 text-[11px] text-zinc-400" }, "Click away to save \u00B7 Esc to cancel"))) : null));
+}
+function asTags(value) {
+    return isPrimitiveArray(value) ? value.map(String) : [];
+}
+export function TagPills({ tags }) {
+    return (React.createElement(React.Fragment, null, tags.map((tag, index) => (React.createElement("span", { key: `${tag}-${index}`, className: cx(pillBase, "shrink-0", pillColor(tag)) },
+        React.createElement("span", { className: "max-w-[160px] truncate" }, tag))))));
+}
+export function TagsEditorPopover({ anchor, tags, suggestions, onCommit, onCancel }) {
+    // Edits are buffered locally so Escape can discard the whole session.
+    const [draft, setDraftTags] = useState(tags);
+    const [query, setQuery] = useState("");
+    const [highlight, setHighlight] = useState(0);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const normalized = query.trim().toLowerCase();
+    const available = suggestions.filter((tag) => !draft.includes(tag) && (!normalized || tag.toLowerCase().includes(normalized)));
+    const exactExists = suggestions.some((tag) => tag.toLowerCase() === normalized) || draft.some((tag) => tag.toLowerCase() === normalized);
+    const canCreate = Boolean(normalized) && !exactExists;
+    const optionCount = available.length + (canCreate ? 1 : 0);
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+    useEffect(() => {
+        setHighlight(0);
+    }, [normalized]);
+    useEffect(() => {
+        listRef.current?.querySelector('[data-highlight="true"]')?.scrollIntoView({ block: "nearest" });
+    }, [highlight]);
+    const addTag = (tag) => {
+        const trimmed = tag.trim();
+        if (!trimmed || draft.includes(trimmed))
+            return;
+        setDraftTags((current) => [...current, trimmed]);
+        setQuery("");
+    };
+    const removeTag = (index) => {
+        setDraftTags((current) => current.filter((_, i) => i !== index));
+    };
+    const confirm = () => onCommit(draft);
+    return (React.createElement(Popover, { anchor: anchor, onClose: (reason) => (reason === "escape" ? onCancel() : confirm()), minWidth: 280, maxWidth: 380, matchAnchorWidth: true },
+        React.createElement("div", { className: "flex flex-wrap items-center gap-1 border-b border-zinc-100 p-2" },
+            draft.map((tag, index) => (React.createElement("span", { key: `${tag}-${index}`, className: cx(pillBase, pillColor(tag), "gap-1 pr-1") },
+                React.createElement("span", { className: "max-w-[140px] truncate" }, tag),
+                React.createElement("button", { type: "button", className: "flex h-4 w-4 items-center justify-center rounded-full text-current opacity-50 transition-opacity hover:opacity-100", "aria-label": `Remove ${tag}`, onMouseDown: (event) => {
+                        event.preventDefault();
+                        removeTag(index);
+                    } }, icons.closeSmall)))),
+            React.createElement("input", { ref: inputRef, className: "h-7 min-w-[90px] flex-1 bg-transparent px-1 text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none", value: query, placeholder: draft.length ? "Add another…" : "Add a tag…", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
+                    event.stopPropagation();
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        setHighlight((current) => Math.min(current + 1, optionCount - 1));
+                    }
+                    else if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        setHighlight((current) => Math.max(current - 1, 0));
+                    }
+                    else if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (highlight < available.length && available[highlight])
+                            addTag(available[highlight]);
+                        else if (canCreate)
+                            addTag(query);
+                        else if (!normalized)
+                            confirm();
+                    }
+                    else if (event.key === "Backspace" && !query && draft.length) {
+                        removeTag(draft.length - 1);
+                    }
+                } })),
+        React.createElement("div", { ref: listRef, className: "max-h-48 overflow-auto py-1" },
+            available.map((tag, index) => (React.createElement("button", { type: "button", key: tag, "data-highlight": index === highlight || undefined, className: cx("flex w-full items-center px-3 py-1.5 text-left text-sm", index === highlight ? "bg-zinc-100" : "hover:bg-zinc-50"), onMouseEnter: () => setHighlight(index), onMouseDown: (event) => {
+                    event.preventDefault();
+                    addTag(tag);
+                } },
+                React.createElement("span", { className: cx(pillBase, pillColor(tag)) }, tag)))),
+            canCreate ? (React.createElement("button", { type: "button", "data-highlight": highlight === available.length || undefined, className: cx("flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm text-zinc-600", highlight === available.length ? "bg-zinc-100" : "hover:bg-zinc-50"), onMouseEnter: () => setHighlight(available.length), onMouseDown: (event) => {
+                    event.preventDefault();
+                    addTag(query);
+                } },
+                icons.plus,
+                "Add ",
+                React.createElement("span", { className: cx(pillBase, pillColor(query.trim())) }, query.trim()))) : null,
+            !available.length && !canCreate ? (React.createElement("div", { className: "px-3 py-4 text-center text-sm text-zinc-400" }, suggestions.length ? "No matches" : "Type to add tags")) : null)));
+}
+export function TagsCell({ rowData, setRowData, focus, disabled, columnData, stopEditing }) {
+    const wrapRef = useRef(null);
+    const tags = asTags(rowData);
+    return (React.createElement("div", { ref: wrapRef, className: cx(cellWrap, "gap-1") },
+        isNullValue(rowData) ? React.createElement(NullToken, null) : React.createElement(TagPills, { tags: tags }),
+        focus && !disabled ? (React.createElement(TagsEditorPopover, { anchor: wrapRef.current, tags: tags, suggestions: columnData.suggestions, onCommit: (next) => {
+                setRowData(next);
+                stopEditing({ nextRow: false });
+            }, onCancel: () => stopEditing({ nextRow: false }) })) : null));
+}
+// ---------------------------------------------------------------------------
+// JSON (objects and anything that isn't a primitive array)
+// ---------------------------------------------------------------------------
+export function JsonEditorPopover({ anchor, value, allowClear, onCommit, onClose }) {
+    const [draft, setDraft] = useState(() => (value === null || value === undefined ? "" : JSON.stringify(value, null, 2)));
+    const textareaRef = useRef(null);
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        if (textarea) {
+            textarea.focus();
+            textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+        }
+    }, []);
+    let parsed = null;
+    let parseError = "";
+    const trimmed = draft.trim();
+    if (trimmed) {
+        try {
+            parsed = JSON.parse(trimmed);
+        }
+        catch (error) {
+            parseError = error instanceof Error ? error.message.replace(/^JSON\.parse: /, "") : "Invalid JSON";
+        }
+    }
+    const valid = !parseError && (allowClear || Boolean(trimmed));
+    const save = () => {
+        if (!valid)
+            return;
+        onCommit(trimmed ? parsed : null);
+        onClose();
+    };
+    return (React.createElement(Popover, { anchor: anchor, onClose: onClose, minWidth: 340, maxWidth: 520, matchAnchorWidth: true },
+        React.createElement("textarea", { ref: textareaRef, className: "block max-h-[320px] min-h-[160px] w-full resize-y rounded-t-lg border-0 bg-transparent p-3 font-mono text-[12px] leading-relaxed text-zinc-900 placeholder:text-zinc-400 focus:outline-none", value: draft, placeholder: "null", spellCheck: false, onChange: (event) => setDraft(event.target.value), onKeyDown: (event) => {
+                event.stopPropagation();
+                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                    event.preventDefault();
+                    save();
+                }
+            } }),
+        React.createElement("div", { className: "flex items-center justify-between gap-2 rounded-b-lg border-t border-zinc-100 bg-zinc-50/60 px-2 py-1.5" },
+            React.createElement("span", { className: cx("truncate px-1 text-[11px]", valid ? "text-zinc-400" : "text-red-600") }, valid ? "JSON" : parseError || "Required"),
+            React.createElement("div", { className: "flex shrink-0 items-center gap-1" },
+                React.createElement("button", { type: "button", className: popoverFooterButton, onMouseDown: (event) => event.preventDefault(), onClick: onClose }, "Cancel"),
+                React.createElement("button", { type: "button", className: "inline-flex h-7 items-center rounded-md bg-zinc-950 px-2.5 text-xs font-medium text-white transition-colors hover:bg-zinc-800 disabled:opacity-40", disabled: !valid, onMouseDown: (event) => event.preventDefault(), onClick: save }, "Save")))));
+}
+export function JsonCell({ rowData, setRowData, focus, disabled, columnData, stopEditing }) {
+    const wrapRef = useRef(null);
+    const display = rowData === null || rowData === undefined || rowData === "" ? "" : JSON.stringify(rowData);
+    return (React.createElement("div", { ref: wrapRef, className: cellWrap },
+        isNullValue(rowData) ? React.createElement(NullToken, null) : React.createElement("span", { className: "truncate font-mono text-[12px] text-zinc-600" }, display),
+        focus && !disabled ? (React.createElement(JsonEditorPopover, { anchor: wrapRef.current, value: rowData, allowClear: columnData.allowClear, onCommit: (next) => setRowData(next), onClose: () => stopEditing({ nextRow: false }) })) : null));
+}
+export function HeaderTitle({ columnKey, column, sort }) {
+    const isSorted = sort?.activeKey === columnKey;
+    return (React.createElement("span", { className: cx("flex min-w-0 items-center gap-1.5", sort && "cursor-context-menu"), title: "Right-click for column menu" },
+        React.createElement("span", { className: "shrink-0 text-zinc-400" },
+            React.createElement(KindGlyph, { kind: column.kind, hasEnum: Boolean(column.enumValues?.length) })),
+        React.createElement("span", { className: "truncate" }, column.label),
+        column.required && !column.primaryKey && !column.auto ? React.createElement("span", { className: "text-zinc-300" }, "*") : null,
+        isSorted ? React.createElement("span", { className: "text-[10px] text-zinc-500" }, sort.direction === "asc" ? "↑" : "↓") : null));
+}
+const minResizeWidth = 70;
+function HeaderResizeHandle({ columnKey, handlers }) {
+    return (React.createElement("span", { className: "rb-col-resize", title: "Drag to resize \u00B7 double-click to reset", onMouseDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            const headerCell = event.target.closest(".dsg-cell");
+            const startWidth = headerCell?.getBoundingClientRect().width ?? 150;
+            const startX = event.clientX;
+            document.body.classList.add("rb-col-resizing");
+            const onMove = (moveEvent) => {
+                handlers.onResize(columnKey, Math.max(minResizeWidth, Math.round(startWidth + moveEvent.clientX - startX)));
+            };
+            const onUp = () => {
+                document.removeEventListener("mousemove", onMove);
+                document.removeEventListener("mouseup", onUp);
+                document.body.classList.remove("rb-col-resizing");
+                handlers.onResizeEnd();
+            };
+            document.addEventListener("mousemove", onMove);
+            document.addEventListener("mouseup", onUp);
+        }, onDoubleClick: (event) => {
+            event.stopPropagation();
+            handlers.onResizeReset(columnKey);
+        } }));
+}
+function isEmptyValue(value) {
+    return value === null || value === undefined || value === "" || (Array.isArray(value) && !value.length);
+}
+// The grid freezes grow:0 columns at their basis, so basis carries the
+// preferred pixel width; minWidth only guards shrinking columns.
+const layoutByKind = {
+    id: { basis: 200, minWidth: 140, grow: 0 },
+    text: { basis: 160, minWidth: 120, grow: 1 },
+    longText: { basis: 240, minWidth: 160, grow: 2 },
+    integer: { basis: 100, minWidth: 80, grow: 0 },
+    real: { basis: 110, minWidth: 80, grow: 0 },
+    boolean: { basis: 100, minWidth: 80, grow: 0 },
+    date: { basis: 140, minWidth: 120, grow: 0 },
+    datetime: { basis: 190, minWidth: 150, grow: 0 },
+    json: { basis: 220, minWidth: 160, grow: 1 },
+    ref: { basis: 200, minWidth: 150, grow: 1 }
+};
+const enumLayout = { basis: 160, minWidth: 120, grow: 0 };
+function baseColumnFor(key, column, input) {
+    const allowClear = columnAllowsClear(column);
+    if (column.enumValues?.length) {
+        const enumValues = column.enumValues;
+        return {
+            component: PickerCell,
+            columnData: { variant: "enum", options: enumValues.map((value) => ({ id: value, label: value })), allowClear, enumValues },
+            disableKeys: true,
+            keepFocus: true,
+            deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+            copyValue: ({ rowData }) => rowData ?? "",
+            pasteValue: ({ rowData, value }) => {
+                const text = value.trim();
+                if (!text)
+                    return clearValue(rowData, allowClear);
+                return enumValues.find((candidate) => candidate.toLowerCase() === text.toLowerCase()) ?? rowData ?? null;
+            },
+            isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+        };
+    }
+    if (column.references) {
+        const options = input.references[key] ?? [];
+        return {
+            component: PickerCell,
+            columnData: { variant: "reference", options, allowClear },
+            disableKeys: true,
+            keepFocus: true,
+            deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+            copyValue: ({ rowData }) => rowData ?? "",
+            pasteValue: ({ rowData, value }) => {
+                const text = value.trim();
+                if (!text)
+                    return clearValue(rowData, allowClear);
+                const byId = options.find((option) => option.id === text);
+                if (byId)
+                    return byId.id;
+                const byLabel = options.find((option) => option.label.toLowerCase() === text.toLowerCase());
+                if (byLabel)
+                    return byLabel.id;
+                return text;
+            },
+            isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+        };
+    }
+    switch (column.kind) {
+        case "boolean":
+            return {
+                component: BooleanCell,
+                columnData: { allowClear },
+                disableKeys: true,
+                keepFocus: true,
+                deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+                copyValue: ({ rowData }) => (isNullValue(rowData) ? "" : rowData ? "YES" : "NO"),
+                pasteValue: ({ rowData, value }) => {
+                    const text = value.trim().toLowerCase();
+                    if (!text)
+                        return clearValue(rowData, allowClear);
+                    return !booleanFalsyText.has(text);
+                },
+                isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+            };
+        case "integer":
+            return intCellColumnFor(column);
+        case "real":
+            return floatCellColumnFor(column);
+        case "date":
+        case "datetime":
+            return {
+                component: DateCell,
+                columnData: { withTime: column.kind === "datetime", allowClear },
+                disableKeys: true,
+                keepFocus: true,
+                deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+                copyValue: ({ rowData }) => rowData ?? "",
+                pasteValue: ({ rowData, value }) => {
+                    const text = value.trim();
+                    if (!text)
+                        return clearValue(rowData, allowClear);
+                    const parsed = parseTypedDate(text);
+                    if (!parsed)
+                        return rowData ?? null;
+                    return column.kind === "datetime" ? parsed.toISOString() : toIsoDate(parsed);
+                },
+                isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+            };
+        case "secret":
+            return secretCellColumnFor();
+        case "longText":
+            return {
+                component: LongTextCell,
+                columnData: { allowClear },
+                disableKeys: true,
+                keepFocus: true,
+                deleteValue: () => "",
+                copyValue: ({ rowData }) => rowData ?? "",
+                pasteValue: ({ value }) => value,
+                isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+            };
+        case "json": {
+            if (input.jsonModes[key] === "tags") {
+                return {
+                    component: TagsCell,
+                    columnData: { suggestions: input.tagSuggestions[key] ?? [], allowClear },
+                    disableKeys: true,
+                    keepFocus: true,
+                    deleteValue: () => [],
+                    copyValue: ({ rowData }) => (isPrimitiveArray(rowData) ? rowData.join(", ") : ""),
+                    pasteValue: ({ rowData, value }) => {
+                        const text = value.trim();
+                        if (!text)
+                            return [];
+                        try {
+                            const parsed = JSON.parse(text);
+                            if (Array.isArray(parsed))
+                                return parsed;
+                        }
+                        catch {
+                            // fall through to comma parsing
+                        }
+                        return text.split(",").map((part) => part.trim()).filter(Boolean);
+                    },
+                    isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+                };
+            }
+            return {
+                component: JsonCell,
+                columnData: { allowClear },
+                disableKeys: true,
+                keepFocus: true,
+                deleteValue: ({ rowData }) => clearValue(rowData, allowClear),
+                copyValue: ({ rowData }) => (rowData === null || rowData === undefined ? "" : JSON.stringify(rowData)),
+                pasteValue: ({ rowData, value }) => {
+                    const text = value.trim();
+                    if (!text)
+                        return clearValue(rowData, allowClear);
+                    try {
+                        return JSON.parse(text);
+                    }
+                    catch {
+                        return rowData ?? null;
+                    }
+                },
+                isCellEmpty: ({ rowData }) => isEmptyValue(rowData)
+            };
+        }
+        default:
+            return textCellColumnFor(column);
+    }
+}
+export function buildGridColumns(input) {
+    return Object.entries(input.table.columns).map(([key, column]) => {
+        const layout = column.enumValues?.length ? enumLayout : layoutByKind[column.kind] ?? { basis: 160, minWidth: 120, grow: 1 };
+        const userWidth = input.columnWidths?.[key];
+        const baseCellClassName = column.kind === "id" || column.primaryKey ? "rb-cell-id" : column.kind === "secret" ? "rb-cell-secret" : undefined;
+        return {
+            ...keyColumn(key, baseColumnFor(key, column, input)),
+            title: (React.createElement(React.Fragment, null,
+                React.createElement(HeaderTitle, { columnKey: key, column: column, sort: input.sort }),
+                input.resize ? React.createElement(HeaderResizeHandle, { columnKey: key, handlers: input.resize }) : null)),
+            disabled: input.readOnly || column.primaryKey || Boolean(column.auto),
+            // A user-resized column keeps its exact width; others use kind defaults.
+            basis: userWidth ?? layout.basis,
+            minWidth: userWidth ?? layout.minWidth,
+            grow: userWidth === undefined ? layout.grow : 0,
+            shrink: userWidth === undefined ? 1 : 0,
+            cellClassName: ({ rowData, rowIndex }) => cx(baseCellClassName, isNullValue(rowData[key]) && "rb-cell-null", input.dirtyCellKeys?.get(rowIndex)?.has(key) && "rb-cell-dirty")
+        };
+    });
+}
+//# sourceMappingURL=cells.js.map