@crisp-ui-kit/crisp 0.1.0 → 0.5.0

package/dist/esm/product/recordstable/recordstable.js

@@ -0,0 +1,963 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, Copy, CopyPlus, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Avatar } from "../../components/avatar/index.js";
+import { BulkBar, BulkBarButton } from "../../components/bulkbar/index.js";
+import { Button } from "../../components/button/index.js";
+import { Checkbox } from "../../components/checkbox/index.js";
+import { DatePicker } from "../../components/datepicker/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { EmptyState } from "../../components/emptystate/index.js";
+import { Input } from "../../components/input/index.js";
+import { Menu, MenuItem } from "../../components/menu/index.js";
+import { MultiSelect } from "../../components/multiselect/index.js";
+import { Select } from "../../components/select/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { companyLogos } from "./company-logos.js";
+import { recordstableRecipe } from "./recordstable.recipe.js";
+const EDITABLE = new Set(["text", "number", "url", "currency"]);
+// types whose cell is an always-interactive picker (not double-click-to-edit)
+const PICKER = new Set(["status", "reference", "date", "tags"]);
+// a `render` column owns its content fully — never editable, never a picker
+const canEditCol = (col) => EDITABLE.has(col.type ?? "text") && !col.render;
+const isPickerCol = (col) => PICKER.has(col.type ?? "text") && !col.render;
+// deterministic pastel colour per tag value (a select option keeps its colour)
+const TAG_TONES = [
+    "brand",
+    "success",
+    "warning",
+    "danger",
+    "purple",
+    "cyan",
+    "orange",
+];
+export function tagTone(t) {
+    let h = 0;
+    for (let i = 0; i < t.length; i++)
+        h = (h * 31 + t.charCodeAt(i)) >>> 0;
+    return TAG_TONES[h % TAG_TONES.length];
+}
+// deterministic per-name colour for `avatarTone="hashed"` — a distinct
+// palette from TAG_TONES because it must stay within the tones the `Avatar`
+// DS component itself supports (no "success"/"warning"/"danger").
+const AVATAR_TONES = ["brand", "orange", "cyan", "purple", "green"];
+function avatarToneFor(name) {
+    let h = 0;
+    for (let i = 0; i < name.length; i++)
+        h = (h * 31 + name.charCodeAt(i)) >>> 0;
+    return AVATAR_TONES[h % AVATAR_TONES.length];
+}
+const AGG_LABELS = {
+    none: "None",
+    count: "Count all",
+    filled: "Not empty",
+    sum: "Sum",
+    avg: "Average",
+    min: "Min",
+    max: "Max",
+};
+// currency is numeric data too — it gets the same numeric aggregations as
+// `number` (only `number` auto-defaults to Sum on mount; currency starts at
+// "none" like every other type and is picked explicitly from this menu)
+const aggOptions = (col) => col.type === "number" || col.type === "currency"
+    ? ["sum", "avg", "min", "max", "count", "filled", "none"]
+    : ["count", "filled", "none"];
+const compact = new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+});
+const CHECK_W = 40;
+const ADDCOL_W = 44;
+const colWidth = (col) => col.width ?? (col.type === "entity" ? 240 : 180);
+const OP_LABELS = {
+    contains: "contains",
+    is: "is",
+    isnot: "is not",
+    empty: "is empty",
+    notempty: "is not empty",
+};
+const OP_ORDER = ["contains", "is", "isnot", "empty", "notempty"];
+const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+function matchesFilter(col, row, cond) {
+    if (cond.op === "empty")
+        return !isFilled(col, row);
+    if (cond.op === "notempty")
+        return isFilled(col, row);
+    // filter always reads the raw underlying value, never `format`'s display
+    // string — a formatted "$1,200" must still match a filter value of "1200"
+    const t = rawText(col, row).toLowerCase();
+    const v = cond.value.trim().toLowerCase();
+    if (!v)
+        return true;
+    if (cond.op === "contains")
+        return t.includes(v);
+    if (cond.op === "is")
+        return t === v;
+    return t !== v; // isnot
+}
+// the raw value stringified, ignoring `format`/`render` entirely — the basis
+// for filtering and the fallback for `cellText`'s copy path
+function rawText(col, row) {
+    const v = row[col.key];
+    if (v == null)
+        return "";
+    if (col.type === "entity")
+        return v.name ?? "";
+    if (Array.isArray(v))
+        return v.join(", ");
+    return String(v);
+}
+// what ⌘C / row-copy / CSV export puts on the clipboard for this cell: a
+// `render` column has no serializable node, so this never touches `render` —
+// it uses `format`'s display string when the column has one, else the raw
+// value stringified exactly like a plain column.
+function cellText(col, row) {
+    if (col.format)
+        return col.format(row[col.key], row);
+    return rawText(col, row);
+}
+function isFilled(col, row) {
+    const v = row[col.key];
+    if (v == null || v === "")
+        return false;
+    if (Array.isArray(v))
+        return v.length > 0;
+    if (col.type === "entity")
+        return Boolean(v.name);
+    return true;
+}
+function summarize(col, agg, rows) {
+    if (agg === "none")
+        return null;
+    if (agg === "count")
+        return { label: "count", value: String(rows.length) };
+    if (agg === "filled") {
+        const n = rows.filter((r) => isFilled(col, r)).length;
+        return { label: "filled", value: String(n) };
+    }
+    const nums = rows
+        .map((r) => r[col.key])
+        .filter((v) => typeof v === "number");
+    if (!nums.length)
+        return { label: agg, value: "—" };
+    let n;
+    if (agg === "sum")
+        n = nums.reduce((a, b) => a + b, 0);
+    else if (agg === "avg")
+        n = nums.reduce((a, b) => a + b, 0) / nums.length;
+    else if (agg === "min")
+        n = Math.min(...nums);
+    else
+        n = Math.max(...nums);
+    return { label: agg, value: compact.format(n) };
+}
+function EntityCell({ value, pinned, onOpenPage, avatarTone = "brand", }) {
+    // a real favicon/logo when we have one; fall back to the letter tile if it
+    // 404s or the row has no avatar
+    const [imgFailed, setImgFailed] = React.useState(false);
+    const showImg = Boolean(value.avatar) && !imgFailed;
+    return (_jsxs("span", { className: "recordstable-entity", children: [showImg ? (_jsx("img", { className: "recordstable-fav", src: value.avatar, alt: "", onError: () => setImgFailed(true) })) : (_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(value.name) : "brand", children: value.name.charAt(0) })), onOpenPage ? (_jsx("button", { type: "button", className: "recordstable-entity-name recordstable-entity-name--link", onClick: (e) => {
+                    e.stopPropagation();
+                    onOpenPage();
+                }, children: value.name })) : (_jsx("span", { className: "recordstable-entity-name", children: value.name })), pinned ? (_jsx(Star, { className: "recordstable-pin", size: 13, strokeWidth: 2, "aria-label": "In a list" })) : null] }));
+}
+function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", }) {
+    const value = row[column.key];
+    // `render` fully owns the cell's content — no empty-dash fallback, no
+    // type renderer; it's the only thing drawn here (see the doc comment on
+    // `Column.render`).
+    if (column.render)
+        return _jsx(_Fragment, { children: column.render(value, row) });
+    if (value == null ||
+        value === "" ||
+        (Array.isArray(value) && !value.length)) {
+        return _jsx("span", { className: "recordstable-muted", children: "\u2014" });
+    }
+    // `format` keeps the type renderer's chrome below and only replaces the
+    // text it displays.
+    const display = column.format?.(value, row);
+    switch (column.type) {
+        case "entity":
+            return (_jsx(EntityCell, { value: value, pinned: pinned, onOpenPage: onOpenPage, avatarTone: avatarTone }));
+        case "tags":
+            return (_jsx("span", { className: "recordstable-cell recordstable-cell--tags", children: value.map((t) => (_jsx("span", { className: "recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
+        case "number":
+            return (_jsx("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+                    (typeof value === "number" ? value.toLocaleString() : value) }));
+        case "url":
+            return (_jsx("a", { className: "recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
+        case "date":
+            return _jsx("span", { className: "recordstable-muted", children: display ?? value });
+        case "currency": {
+            const n = typeof value === "number" ? value : Number(value);
+            return (_jsx("span", { className: "recordstable-cell recordstable-cell--num", children: display ??
+                    `${column.symbol ?? "$"}${Number.isFinite(n) ? n.toLocaleString() : value}` }));
+        }
+        case "status": {
+            const opt = column.options?.find((o) => o.value === value);
+            if (!opt)
+                return _jsx("span", { className: "recordstable-muted", children: "\u2014" });
+            return (_jsxs("span", { className: "recordstable-status", children: [_jsx("span", { className: "recordstable-status-dot", style: { background: opt.color } }), display ?? opt.label] }));
+        }
+        case "reference": {
+            const opt = column.refOptions?.find((o) => o.value === value);
+            const label = display ?? opt?.label ?? String(value);
+            return (_jsxs("span", { className: "recordstable-entity", children: [_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), _jsx("span", { className: "recordstable-entity-name", children: label })] }));
+        }
+        default:
+            return (_jsx("span", { className: "recordstable-entity-name", children: display ?? value }));
+    }
+}
+// Always-interactive cell editors for the picker column types (status / date /
+// reference). Each is a ghost crisp control that reads the cell value and
+// commits the new one — matching Attio's inline field editors.
+function StatusCell({ column, row, onChange, }) {
+    return (_jsx(Select, { variant: "ghost", "aria-label": column.label, placeholder: "\u2014", value: row[column.key] ?? undefined, onValueChange: onChange, options: column.options ?? [] }));
+}
+function ReferenceCell({ column, row, onChange, }) {
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "aria-label": column.label, placeholder: "Set a record\u2026", value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
+            value: o.value,
+            label: o.label,
+        })) }));
+}
+function TagsCell({ column, row, options, onChange, }) {
+    const value = row[column.key] ?? [];
+    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: "Empty", searchPlaceholder: "Search options\u2026", "aria-label": column.label }));
+}
+function DateCell({ column, row, onChange, }) {
+    const raw = row[column.key];
+    const value = raw ? new Date(raw) : null;
+    return (_jsx(DatePicker, { variant: "ghost", "aria-label": column.label, value: value, onChange: (d) => onChange(d.toISOString().slice(0, 10)) }));
+}
+/**
+ * The "New <object>" create modal — measured from Attio's create-record dialog:
+ * a stacked label + "Set …" input per column, a "Create more" toggle, and a
+ * primary "Create record" action (⌘↵). Building the row mirrors the inline
+ * editor's per-type coercion so a created record reads back like an edited one.
+ */
+function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate, }) {
+    const [values, setValues] = React.useState({});
+    const [createMore, setCreateMore] = React.useState(false);
+    const firstRef = React.useRef(null);
+    // reset the form each time the modal (re)opens
+    React.useEffect(() => {
+        if (open)
+            setValues({});
+    }, [open]);
+    const set = (key, v) => setValues((prev) => ({ ...prev, [key]: v }));
+    const buildRow = () => {
+        const row = {
+            id: `new-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        };
+        for (const col of columns) {
+            const raw = (values[col.key] ?? "").trim();
+            if (col.type === "entity") {
+                row[col.key] = { name: raw || "Untitled" };
+            }
+            else if (!raw) {
+                // leave empty fields unset so the cell renders its "—" placeholder
+            }
+            else if (col.type === "tags") {
+                row[col.key] = raw
+                    .split(",")
+                    .map((t) => t.trim())
+                    .filter(Boolean);
+            }
+            else if (col.type === "number") {
+                row[col.key] = Number(raw.replace(/[^0-9.-]/g, "")) || null;
+            }
+            else {
+                row[col.key] = raw;
+            }
+        }
+        return row;
+    };
+    const submit = () => {
+        onCreate(buildRow());
+        if (createMore) {
+            setValues({});
+            firstRef.current?.focus();
+        }
+        else {
+            onOpenChange(false);
+        }
+    };
+    const entityCol = columns.find((c) => c.type === "entity");
+    const EntityIcon = entityCol?.icon;
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: `New ${entityLabel}`, icon: EntityIcon ? _jsx(EntityIcon, { size: 16, strokeWidth: 1.75 }) : undefined, width: 720, children: [_jsx(DialogBody, { children: columns.map((col, i) => (_jsxs("div", { className: "dialog-field", children: [_jsx("label", { className: "dialog-field-label", htmlFor: `create-${col.key}`, children: col.label }), _jsx(Input, { id: `create-${col.key}`, ref: i === 0 ? firstRef : undefined, value: values[col.key] ?? "", onChange: (e) => set(col.key, e.currentTarget.value), placeholder: `Set ${col.label}…`, onKeyDown: (e) => {
+                                if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
+                                    submit();
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "dialog-more", children: ["Create more", _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": "Create more" })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: ["Create record", _jsx("span", { className: "dialog-submit-key", children: "\u2318\u21B5" })] })] })] }));
+}
+/**
+ * Attio-style record grid — fully featured. Toolbar (search / sort status /
+ * count / New), sticky checkbox + entity columns, 36px rows, typed cells,
+ * click-to-sort headers, column resize by dragging a header edge, inline cell
+ * editing (double-click a text/number/url/date cell), add-row and add-column,
+ * and a floating bulk-action bar (delete / deselect) when rows are selected.
+ * Selection can be controlled via `selectedIds`/`onSelectionChange`.
+ */
+export function RecordsTable({ columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, }) {
+    const [cols, setCols] = React.useState(columnsProp);
+    const [data, setData] = React.useState(rowsProp);
+    // Attio's multi-criteria sort: an ordered list of {field, direction} rows.
+    const [sorts, setSorts] = React.useState([]);
+    const [dragSort, setDragSort] = React.useState(null);
+    const [editing, setEditing] = React.useState(null);
+    const [renamingCol, setRenamingCol] = React.useState(null);
+    const [creating, setCreating] = React.useState(false);
+    // Attio-style filter: an ordered list of conditions, each shown as a toolbar
+    // chip with an editable value (operator is "contains")
+    const [filterConds, setFilterConds] = React.useState([]);
+    const [filterQuery, setFilterQuery] = React.useState("");
+    // one popover open at a time: "sort" | "filter" | "more" | `sum:<key>`
+    const [openMenu, setOpenMenu] = React.useState(null);
+    // viewport-anchored position for menus that live inside the scroll container
+    // (summary footer, column headers) — rendered fixed to escape the overflow clip
+    const [menuPos, setMenuPos] = React.useState(null);
+    const [pinned, setPinned] = React.useState(() => new Set());
+    const [scrolledX, setScrolledX] = React.useState(false);
+    const [scrolledY, setScrolledY] = React.useState(false);
+    const idCounter = React.useRef(0);
+    // fixed menus (summary / header) portal here — outside the sticky cells'
+    // stacking contexts, but still inside .recordstable so the styles apply
+    const rootRef = React.useRef(null);
+    const scrollRef = React.useRef(null);
+    // spreadsheet-style cell selection (click a cell, arrow-key to navigate)
+    const [selCell, setSelCell] = React.useState(null);
+    // shift-click range selection — anchor row + whether shift was held on click
+    const selAnchor = React.useRef(null);
+    const shiftHeld = React.useRef(false);
+    // right-click row context menu (fixed at the cursor)
+    const [ctxMenu, setCtxMenu] = React.useState(null);
+    // column drag-to-reorder — key of the header currently being dragged
+    const [dragCol, setDragCol] = React.useState(null);
+    // Let a plain vertical wheel scroll the (wide) table horizontally when it has
+    // no vertical overflow of its own — otherwise the wheel just scrolls the page
+    // and the extra columns feel unreachable. Non-passive so we can preventDefault.
+    React.useEffect(() => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            // don't hijack the wheel when it's over an open cell popover (its own list
+            // scrolls) — only map vertical wheel to horizontal for the table itself
+            if (e.target?.closest?.(".select-listbox, .multiselect-listbox, .datepicker-cal, .recordstable-menu"))
+                return;
+            const canH = el.scrollWidth > el.clientWidth;
+            const canV = el.scrollHeight > el.clientHeight;
+            if (canH && !canV && e.deltaX === 0 && e.deltaY !== 0) {
+                el.scrollLeft += e.deltaY;
+                e.preventDefault();
+            }
+        };
+        el.addEventListener("wheel", onWheel, { passive: false });
+        return () => el.removeEventListener("wheel", onWheel);
+    }, []);
+    // close any open menu on outside click (anything not inside a menu or its
+    // trigger) or Escape
+    React.useEffect(() => {
+        if (!openMenu)
+            return;
+        const onDown = (e) => {
+            const t = e.target;
+            if (!t.closest(".recordstable-menu, [data-menu-trigger]"))
+                setOpenMenu(null);
+        };
+        const onKey = (e) => e.key === "Escape" && setOpenMenu(null);
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [openMenu]);
+    // dismiss the right-click row context menu on any outside click / Escape
+    React.useEffect(() => {
+        if (!ctxMenu)
+            return;
+        const onDown = (e) => {
+            if (!e.target.closest(".recordstable-ctx"))
+                setCtxMenu(null);
+        };
+        const onKey = (e) => e.key === "Escape" && setCtxMenu(null);
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [ctxMenu]);
+    const activeFilters = filterConds.length;
+    const addFilter = (key) => {
+        idCounter.current += 1;
+        const id = `filter-${idCounter.current}`;
+        setFilterConds((prev) => [...prev, { id, key, op: "contains", value: "" }]);
+        setFilterQuery("");
+        setOpenMenu(`fcond:${id}`); // open its condition editor right away
+    };
+    const patchFilter = (id, patch) => setFilterConds((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c)));
+    const removeFilter = (id) => {
+        setFilterConds((prev) => prev.filter((c) => c.id !== id));
+        setOpenMenu(null);
+    };
+    const [agg, setAgg] = React.useState(() => {
+        const m = {};
+        for (const col of columnsProp) {
+            m[col.key] =
+                col.type === "number"
+                    ? "sum"
+                    : col.type === "entity"
+                        ? "count"
+                        : "none";
+        }
+        return m;
+    });
+    // selection — controlled if `selectedIds` is provided, else internal
+    const [internalSel, setInternalSel] = React.useState(() => new Set());
+    const selected = React.useMemo(() => (selectedIds ? new Set(selectedIds) : internalSel), [selectedIds, internalSel]);
+    const setSelected = React.useCallback((next) => {
+        onSelectionChange?.([...next]);
+        if (!selectedIds)
+            setInternalSel(next);
+    }, [onSelectionChange, selectedIds]);
+    const filtered = React.useMemo(() => {
+        const active = filterConds.filter((c) => !opNeedsValue(c.op) || c.value.trim());
+        if (!active.length)
+            return data;
+        return data.filter((row) => active.every((cond) => {
+            const col = cols.find((c) => c.key === cond.key);
+            return col ? matchesFilter(col, row, cond) : true;
+        }));
+    }, [data, cols, filterConds]);
+    const visibleRows = React.useMemo(() => {
+        if (sorts.length === 0)
+            return filtered;
+        const getters = sorts.map((s) => {
+            const col = cols.find((c) => c.key === s.key);
+            return (r) => {
+                const v = r[s.key];
+                if (col?.type === "entity")
+                    return v?.name ?? "";
+                if (Array.isArray(v))
+                    return v[0] ?? "";
+                return v ?? "";
+            };
+        });
+        return [...filtered].sort((a, b) => {
+            for (let i = 0; i < sorts.length; i++) {
+                const get = getters[i];
+                const av = get(a);
+                const bv = get(b);
+                const cmp = typeof av === "number" && typeof bv === "number"
+                    ? av - bv
+                    : String(av).localeCompare(String(bv));
+                if (cmp !== 0)
+                    return sorts[i].dir === "asc" ? cmp : -cmp;
+            }
+            return 0;
+        });
+    }, [filtered, cols, sorts]);
+    // arrow-key navigation over the selected cell (spreadsheet-style)
+    const onGridKeyDown = (e) => {
+        if (!selCell || editing)
+            return;
+        // ⌘C / Ctrl+C — copy the selected cell's rendered text to the clipboard
+        if ((e.metaKey || e.ctrlKey) && (e.key === "c" || e.key === "C")) {
+            const row = visibleRows.find((rw) => rw.id === selCell.id);
+            const col = cols.find((cc) => cc.key === selCell.key);
+            if (row && col)
+                navigator.clipboard?.writeText(cellText(col, row));
+            e.preventDefault();
+            return;
+        }
+        const r = visibleRows.findIndex((row) => row.id === selCell.id);
+        const c = cols.findIndex((col) => col.key === selCell.key);
+        if (r < 0 || c < 0)
+            return;
+        let nr = r;
+        let nc = c;
+        if (e.key === "ArrowUp")
+            nr = Math.max(0, r - 1);
+        else if (e.key === "ArrowDown")
+            nr = Math.min(visibleRows.length - 1, r + 1);
+        else if (e.key === "ArrowLeft")
+            nc = Math.max(0, c - 1);
+        else if (e.key === "ArrowRight")
+            nc = Math.min(cols.length - 1, c + 1);
+        else if (e.key === "Escape") {
+            setSelCell(null);
+            return;
+        }
+        else if (e.key === "Enter") {
+            if (canEditCol(cols[c])) {
+                e.preventDefault();
+                setEditing({ id: selCell.id, key: selCell.key });
+            }
+            return;
+        }
+        else
+            return;
+        e.preventDefault();
+        setSelCell({ id: visibleRows[nr].id, key: cols[nc].key });
+    };
+    const allSelected = visibleRows.length > 0 && visibleRows.every((r) => selected.has(r.id));
+    const someSelected = selected.size > 0 && !allSelected;
+    const toggleAll = () => setSelected(allSelected ? new Set() : new Set(visibleRows.map((r) => r.id)));
+    const toggleRow = (id) => {
+        const next = new Set(selected);
+        // shift-click → select the contiguous range from the anchor to this row
+        if (shiftHeld.current && selAnchor.current) {
+            const a = visibleRows.findIndex((r) => r.id === selAnchor.current);
+            const b = visibleRows.findIndex((r) => r.id === id);
+            if (a >= 0 && b >= 0) {
+                const [lo, hi] = a < b ? [a, b] : [b, a];
+                for (let i = lo; i <= hi; i++)
+                    next.add(visibleRows[i].id);
+                shiftHeld.current = false;
+                setSelected(next);
+                return;
+            }
+        }
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        selAnchor.current = id;
+        shiftHeld.current = false;
+        setSelected(next);
+    };
+    const addSort = () => {
+        const used = new Set(sorts.map((s) => s.key));
+        const col = cols.find((c) => !used.has(c.key));
+        if (col)
+            setSorts([...sorts, { key: col.key, dir: "asc" }]);
+    };
+    const moveSort = (from, to) => setSorts((prev) => {
+        if (from === to)
+            return prev;
+        const next = [...prev];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    });
+    const setSortField = (i, key) => setSorts(sorts.map((s, j) => (j === i ? { ...s, key } : s)));
+    const setSortDir = (i, dir) => setSorts(sorts.map((s, j) => (j === i ? { ...s, dir } : s)));
+    const removeSort = (i) => setSorts(sorts.filter((_, j) => j !== i));
+    const commitEdit = (id, key, raw) => {
+        const col = cols.find((c) => c.key === key);
+        const numeric = col?.type === "number" || col?.type === "currency";
+        const coerce = (r) => {
+            if (numeric)
+                return raw === "" ? null : Number(raw.replace(/[^0-9.-]/g, ""));
+            if (col?.type === "tags")
+                return raw
+                    .split(",")
+                    .map((t) => t.trim())
+                    .filter(Boolean);
+            if (col?.type === "entity")
+                return { ...r[key], name: raw };
+            return raw;
+        };
+        setData((prev) => prev.map((r) => (r.id === id ? { ...r, [key]: coerce(r) } : r)));
+        setEditing(null);
+    };
+    // the option set for a `tags` column — the union of every value in that column,
+    // so the tag editor offers the existing options (each keeps a stable colour).
+    const tagOptionsFor = React.useCallback((key) => {
+        const set = new Set();
+        for (const r of data) {
+            const v = r[key];
+            if (Array.isArray(v))
+                for (const t of v)
+                    set.add(t);
+        }
+        return [...set].map((t) => ({ value: t, label: t, tone: tagTone(t) }));
+    }, [data]);
+    // set any cell value directly (used by the status / date / reference pickers)
+    // biome-ignore lint/suspicious/noExplicitAny: cell values are column-type dependent
+    const setCell = (id, key, value) => {
+        setData((prev) => prev.map((r) => (r.id === id ? { ...r, [key]: value } : r)));
+    };
+    const addRow = () => {
+        idCounter.current += 1;
+        const id = `new-${idCounter.current}`;
+        const entityKey = cols.find((c) => c.type === "entity")?.key;
+        const row = { id };
+        if (entityKey)
+            row[entityKey] = { name: "Untitled" };
+        setData((prev) => [...prev, row]);
+        if (entityKey)
+            setEditing(null);
+    };
+    const sortBy = (key, dir) => {
+        setSorts([{ key, dir }]);
+        setOpenMenu(null);
+    };
+    const hideColumn = (key) => {
+        setCols((prev) => prev.filter((c) => c.key !== key));
+        setOpenMenu(null);
+    };
+    // Move a column one slot left/right. The first (entity) column is sticky and
+    // stays pinned, so reordering is clamped to index >= 1.
+    const moveColumn = (key, dir) => {
+        setCols((prev) => {
+            const i = prev.findIndex((c) => c.key === key);
+            const j = i + dir;
+            if (i < 1 || j < 1 || j >= prev.length)
+                return prev;
+            const next = [...prev];
+            [next[i], next[j]] = [next[j], next[i]];
+            return next;
+        });
+        setOpenMenu(null);
+    };
+    // drop the dragged column immediately before `toKey` (drag-to-reorder). The
+    // sticky entity column (index 0) stays pinned — never reorder into slot 0.
+    const reorderColumn = (fromKey, toKey) => {
+        setDragCol(null);
+        if (fromKey === toKey)
+            return;
+        setCols((prev) => {
+            const from = prev.findIndex((c) => c.key === fromKey);
+            let to = prev.findIndex((c) => c.key === toKey);
+            if (from < 1 || to < 1)
+                return prev;
+            const next = [...prev];
+            const [moved] = next.splice(from, 1);
+            to = next.findIndex((c) => c.key === toKey);
+            next.splice(to, 0, moved);
+            return next;
+        });
+    };
+    const renameColumn = (key, label) => {
+        const name = label.trim();
+        if (name)
+            setCols((prev) => prev.map((c) => (c.key === key ? { ...c, label: name } : c)));
+        setRenamingCol(null);
+    };
+    const openColumnMenu = (key, el) => {
+        if (openMenu === `col:${key}`) {
+            setOpenMenu(null);
+            return;
+        }
+        const r = el.getBoundingClientRect();
+        setMenuPos({ top: r.bottom + 4, left: r.left });
+        setOpenMenu(`col:${key}`);
+    };
+    const addColumn = () => {
+        idCounter.current += 1;
+        const key = `field-${idCounter.current}`;
+        setCols((prev) => [
+            ...prev,
+            { key, label: `Field ${prev.length}`, type: "text", width: 160 },
+        ]);
+    };
+    const deleteSelected = () => {
+        setData((prev) => prev.filter((r) => !selected.has(r.id)));
+        setSelected(new Set());
+    };
+    const exportSelected = () => {
+        const picked = data.filter((r) => selected.has(r.id));
+        const esc = (s) => `"${s.replace(/"/g, '""')}"`;
+        const csv = [
+            cols.map((c) => esc(c.label)).join(","),
+            ...picked.map((r) => cols.map((c) => esc(cellText(c, r))).join(",")),
+        ].join("\n");
+        const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "records.csv";
+        a.click();
+        URL.revokeObjectURL(url);
+        setOpenMenu(null);
+    };
+    const entityKey = cols.find((c) => c.type === "entity")?.key;
+    // "Add to list" → pin the selected rows (shows a ★ on the entity)
+    const addToList = () => {
+        setPinned((prev) => new Set([...prev, ...selected]));
+        setSelected(new Set());
+    };
+    // "Send email" → open the mail client addressed to the selected records
+    const sendEmail = () => {
+        const names = data
+            .filter((r) => selected.has(r.id))
+            .map((r) => entityKey ? cellText({ key: entityKey, label: "" }, r) : r.id);
+        window.open(`mailto:?subject=${encodeURIComponent(names.join(", "))}`);
+    };
+    // "Run workflow" → a demo automation: duplicate the selected records
+    const runWorkflow = () => {
+        setData((prev) => {
+            const copies = prev
+                .filter((r) => selected.has(r.id))
+                .map((r) => {
+                idCounter.current += 1;
+                return { ...r, id: `${r.id}-copy-${idCounter.current}` };
+            });
+            return [...prev, ...copies];
+        });
+        setSelected(new Set());
+    };
+    // single-row actions used by the right-click context menu
+    const duplicateRow = (id) => {
+        setData((prev) => {
+            const i = prev.findIndex((r) => r.id === id);
+            if (i < 0)
+                return prev;
+            idCounter.current += 1;
+            const copy = { ...prev[i], id: `${id}-copy-${idCounter.current}` };
+            const next = [...prev];
+            next.splice(i + 1, 0, copy);
+            return next;
+        });
+        setCtxMenu(null);
+    };
+    const deleteRow = (id) => {
+        setData((prev) => prev.filter((r) => r.id !== id));
+        if (selected.has(id)) {
+            const next = new Set(selected);
+            next.delete(id);
+            setSelected(next);
+        }
+        setCtxMenu(null);
+    };
+    const copyRow = (id) => {
+        const row = data.find((r) => r.id === id);
+        const col = cols.find((c) => c.type === "entity");
+        if (row && col)
+            navigator.clipboard?.writeText(cellText(col, row));
+        setCtxMenu(null);
+    };
+    const pinRow = (id) => {
+        setPinned((prev) => new Set([...prev, id]));
+        setCtxMenu(null);
+    };
+    const setAggValue = (key, value) => {
+        setAgg((prev) => ({ ...prev, [key]: value }));
+        setOpenMenu(null);
+    };
+    // column resize via pointer drag on the header edge
+    const resizeCol = (key, startX, startW) => {
+        // guard the whole document during the drag: kill text selection and force a
+        // resize cursor so the gesture doesn't select cells or flicker (was buggy)
+        const prevSelect = document.body.style.userSelect;
+        const prevCursor = document.body.style.cursor;
+        document.body.style.userSelect = "none";
+        document.body.style.cursor = "col-resize";
+        const onMove = (e) => {
+            const w = Math.round(Math.max(72, startW + (e.clientX - startX)));
+            setCols((prev) => prev.map((c) => (c.key === key ? { ...c, width: w } : c)));
+        };
+        const onUp = () => {
+            document.body.style.userSelect = prevSelect;
+            document.body.style.cursor = prevCursor;
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+    };
+    return (_jsxs("div", { className: recordstableRecipe({ className }), ref: rootRef, children: [_jsxs("div", { className: "recordstable-toolbar", children: [_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool${sorts.length ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sorts.length
+                                        ? `Sorted by ${cols.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+                                        : "Sort"] }), openMenu === "sort" && (_jsxs("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": "Sort", children: [sorts.length === 0 ? (_jsx("div", { className: "recordstable-sort-empty", children: "No sorts applied to this view." })) : (sorts.map((s, i) => (_jsxs("div", { className: "recordstable-sort-row", onDragOver: (e) => {
+                                            if (dragSort !== null)
+                                                e.preventDefault();
+                                        }, onDrop: () => {
+                                            if (dragSort !== null)
+                                                moveSort(dragSort, i);
+                                            setDragSort(null);
+                                        }, children: [_jsx("button", { type: "button", className: "recordstable-sort-grip", "aria-label": "Reorder sort", draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "recordstable-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: cols.map((c) => ({
+                                                    value: c.key,
+                                                    label: c.icon ? (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
+                                                    keywords: c.label,
+                                                })), "aria-label": "Sort field" }), _jsx(Select, { className: "recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
+                                                    {
+                                                        value: "asc",
+                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), "Ascending"] })),
+                                                        keywords: "Ascending",
+                                                    },
+                                                    {
+                                                        value: "desc",
+                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), "Descending"] })),
+                                                        keywords: "Descending",
+                                                    },
+                                                ], "aria-label": "Sort direction" }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": "Remove sort", children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "Add sort"] }) }), _jsx("div", { className: "recordstable-sort-foot", children: _jsxs("a", { className: "recordstable-sort-learn", href: "https://attio.com/help", target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), "Learn about sorting"] }) })] }))] }), _jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `recordstable-tool recordstable-tool--ghost${activeFilters ? " recordstable-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "menu", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), activeFilters ? `Filter · ${activeFilters}` : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "menu", children: [_jsx("input", { className: "recordstable-menu-input", placeholder: "Filter by\u2026", "aria-label": "Filter by field", 
+                                        // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                                        autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), cols
+                                        .filter((col) => col.label
+                                        .toLowerCase()
+                                        .includes(filterQuery.trim().toLowerCase()))
+                                        .map((col) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filterConds.map((cond) => {
+                        const col = cols.find((c) => c.key === cond.key);
+                        const open = openMenu === `fcond:${cond.id}`;
+                        const hasValue = !opNeedsValue(cond.op) || cond.value.trim();
+                        return (_jsxs("span", { className: "recordstable-toolgroup", children: [_jsxs("span", { className: "recordstable-fchip", children: [_jsxs("button", { type: "button", className: "recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-fchip-op", children: OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "recordstable-fchip-op", children: "Select condition" }))] }), _jsx("button", { type: "button", className: "recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "recordstable-menu", role: "menu", children: [_jsxs("div", { className: "recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "recordstable-menu-input", placeholder: "Value\u2026", "aria-label": `${col?.label} filter value`, 
+                                            // biome-ignore lint/a11y/noAutofocus: focus the value field
+                                            autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) }))] }))] }, cond.id));
+                    }), _jsx("span", { className: "recordstable-spacer" }), _jsxs("span", { className: "recordstable-count", children: [visibleRows.length, " record", visibleRows.length === 1 ? "" : "s"] }), showNew && (_jsxs("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), "New"] }))] }), _jsxs("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, "data-scrolled-y": scrolledY ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
+                    const left = e.currentTarget.scrollLeft > 0;
+                    const top = e.currentTarget.scrollTop > 0;
+                    setScrolledX((prev) => (prev === left ? prev : left));
+                    setScrolledY((prev) => (prev === top ? prev : top));
+                }, children: [_jsxs("table", { className: "recordstable-table", style: {
+                            // fill the container; the trailing add-column absorbs the slack (a
+                            // flexible filler). minWidth keeps real column widths and drives the
+                            // horizontal scroll once the columns outgrow the container.
+                            width: "100%",
+                            minWidth: CHECK_W +
+                                ADDCOL_W +
+                                cols.reduce((sum, c) => sum + colWidth(c), 0),
+                        }, children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: CHECK_W } }), cols.map((col) => (_jsx("col", { style: { width: colWidth(col) } }, col.key))), _jsx("col", {})] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "recordstable-th recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": "Select all", checked: allSelected, indeterminate: someSelected, onChange: toggleAll }) }) }), cols.map((col, i) => {
+                                            const Icon = col.icon;
+                                            const sc = sorts.find((s) => s.key === col.key);
+                                            return (_jsxs("th", { className: `recordstable-th${i === 0 ? " recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "data-drop": dragCol && dragCol !== col.key && i >= 1 ? "" : undefined, onDragOver: dragCol && i >= 1 ? (e) => e.preventDefault() : undefined, onDrop: dragCol && i >= 1
+                                                    ? (e) => {
+                                                        e.preventDefault();
+                                                        reorderColumn(dragCol, col.key);
+                                                    }
+                                                    : undefined, children: [renamingCol === col.key ? (_jsx("input", { className: "recordstable-th-rename", 
+                                                        // biome-ignore lint/a11y/noAutofocus: focus the rename field the moment it opens
+                                                        autoFocus: true, defaultValue: col.label, "aria-label": "Column label", onKeyDown: (e) => {
+                                                            if (e.key === "Enter")
+                                                                renameColumn(col.key, e.currentTarget.value);
+                                                            else if (e.key === "Escape")
+                                                                setRenamingCol(null);
+                                                        }, onBlur: (e) => renameColumn(col.key, e.currentTarget.value) })) : (_jsxs("button", { type: "button", className: "recordstable-th-inner", "data-menu-trigger": true, "aria-haspopup": "menu", draggable: i >= 1, onDragStart: i >= 1
+                                                            ? (e) => {
+                                                                setDragCol(col.key);
+                                                                e.dataTransfer.effectAllowed = "move";
+                                                            }
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "recordstable-th-label", children: col.label }), _jsx("span", { className: "recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                        rootRef.current &&
+                                                        createPortal(_jsxs("div", { className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", style: menuPos ?? undefined, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), "Sort ascending"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), "Sort descending"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { size: 15, strokeWidth: 1.75 }), "Move left"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { size: 15, strokeWidth: 1.75 }), "Move right"] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => {
+                                                                        setRenamingCol(col.key);
+                                                                        setOpenMenu(null);
+                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), "Edit column label"] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), "Hide from view"] }))] }), rootRef.current), _jsx("span", { className: "recordstable-resize", "aria-hidden": "true", onPointerDown: (e) => {
+                                                            e.preventDefault();
+                                                            e.stopPropagation();
+                                                            const th = e.currentTarget
+                                                                .parentElement;
+                                                            resizeCol(col.key, e.clientX, th ? th.getBoundingClientRect().width : 180);
+                                                        }, onClick: (e) => e.stopPropagation() })] }, col.key));
+                                        }), _jsx("th", { className: "recordstable-th recordstable-addcol", children: allowAddColumn && (_jsx("button", { type: "button", onClick: addColumn, "aria-label": "Add column", children: _jsx(Plus, { size: 15, strokeWidth: 1.75 }) })) })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { "data-selected": selected.has(row.id) ? "" : undefined, onContextMenu: (e) => {
+                                        e.preventDefault();
+                                        setCtxMenu({ x: e.clientX, y: e.clientY, id: row.id });
+                                    }, children: [_jsx("td", { className: "recordstable-td recordstable-col-check", children: _jsx("span", { className: "recordstable-check-inner", children: _jsx(Checkbox, { "aria-label": `Select ${row.id}`, checked: selected.has(row.id), onClick: (e) => {
+                                                        shiftHeld.current = e.shiftKey;
+                                                    }, onChange: () => toggleRow(row.id) }) }) }), cols.map((col, i) => {
+                                            const canEdit = canEditCol(col);
+                                            const isPicker = isPickerCol(col);
+                                            const isEditing = editing?.id === row.id && editing?.key === col.key;
+                                            return (_jsxs("td", { className: `recordstable-td${i === 0 ? " recordstable-col-entity" : ""}${canEdit ? " recordstable-td--editable" : ""}${isPicker ? " recordstable-td--picker" : ""}`, "data-selected": selCell?.id === row.id && selCell?.key === col.key
+                                                    ? ""
+                                                    : undefined, onClick: () => {
+                                                    if (isPicker)
+                                                        return;
+                                                    setSelCell({ id: row.id, key: col.key });
+                                                    scrollRef.current?.focus({ preventScroll: true });
+                                                }, onDoubleClick: canEdit
+                                                    ? () => setEditing({ id: row.id, key: col.key })
+                                                    : undefined, children: [isPicker ? (col.type === "status" ? (_jsx(StatusCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "reference" ? (_jsx(ReferenceCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { column: col, row: row, options: tagOptionsFor(col.key), onChange: (v) => setCell(row.id, col.key, v) })) : (_jsx(DateCell, { column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) }))) : isEditing ? (_jsx("input", { className: `recordstable-edit${col.type === "number" ? " recordstable-edit--num" : ""}`, 
+                                                        // biome-ignore lint/a11y/noAutofocus: focusing the just-opened editor is the expected behavior
+                                                        autoFocus: true, defaultValue: cellText(col, row), onBlur: (e) => commitEdit(row.id, col.key, e.target.value), onKeyDown: (e) => {
+                                                            if (e.key === "Enter")
+                                                                commitEdit(row.id, col.key, e.target.value);
+                                                            if (e.key === "Escape")
+                                                                setEditing(null);
+                                                        } })) : (_jsx(CellView, { column: col, row: row, pinned: i === 0 && pinned.has(row.id), onOpenPage: i === 0 && onOpenRecordPage
+                                                            ? () => onOpenRecordPage(row)
+                                                            : undefined, avatarTone: avatarTone })), i === 0 && onOpenRecord && !isEditing && (_jsx("button", { type: "button", className: "recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            onOpenRecord(row);
+                                                        }, children: _jsx(ArrowUpRight, { size: 15, strokeWidth: 1.75 }) }))] }, col.key));
+                                        }), _jsx("td", { className: "recordstable-td recordstable-addcol" })] }, row.id))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "recordstable-sum recordstable-col-check" }), cols.map((col, i) => {
+                                            const a = agg[col.key] ?? "none";
+                                            const res = summarize(col, a, visibleRows);
+                                            const sumOpen = openMenu === `sum:${col.key}`;
+                                            return (_jsx("td", { className: `recordstable-sum${i === 0 ? " recordstable-col-entity" : ""}`, children: _jsxs("span", { className: "recordstable-toolgroup recordstable-sumgroup", children: [_jsx("button", { type: "button", className: "recordstable-sum-btn", "data-empty": res ? undefined : "", "data-menu-trigger": true, "aria-haspopup": "menu", onClick: (e) => {
+                                                                if (sumOpen) {
+                                                                    setOpenMenu(null);
+                                                                    return;
+                                                                }
+                                                                const r = e.currentTarget.getBoundingClientRect();
+                                                                setMenuPos({
+                                                                    bottom: window.innerHeight - r.top + 4,
+                                                                    right: window.innerWidth - r.right,
+                                                                });
+                                                                setOpenMenu(`sum:${col.key}`);
+                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-sum-label", children: AGG_LABELS[a] }), _jsx("span", { className: "recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "recordstable-sum-label", children: "Calculate" })) }), sumOpen &&
+                                                            rootRef.current &&
+                                                            createPortal(_jsx("div", { className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", style: menuPos ?? undefined, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [AGG_LABELS[opt], a === opt ? (_jsx(Check, { className: "recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
+                                        }), _jsx("td", { className: "recordstable-sum recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "recordstable-empty", children: _jsx(EmptyState, { variant: "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters
+                                ? "No records match that filter"
+                                : "No records yet", description: activeFilters
+                                ? "None of your records match the filters that are set."
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), "Clear filter"] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), "New record"] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), "New record"] }))] }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: "Selected", onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: "Add to list" }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: "Send email" }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: "Run workflow" }), _jsxs(Menu, { align: "end", "aria-label": "More actions", trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: "More" }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: "Export CSV" }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: "Delete" })] })] })), _jsx(CreateRecordDialog, { open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                createPortal(_jsxs("div", { className: "recordstable-menu recordstable-ctx", role: "menu", style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), "Copy"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), "Duplicate"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), "Add to list"] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), "Delete"] })] }), rootRef.current ?? document.body)] }));
+}
+export const defaultColumns = [
+    { key: "company", label: "Company", type: "entity", icon: Building2 },
+    { key: "domain", label: "Domain", type: "url", icon: Globe },
+    {
+        key: "categories",
+        label: "Categories",
+        type: "tags",
+        icon: Tag,
+        width: 240,
+    },
+    {
+        key: "employees",
+        label: "Employees",
+        type: "number",
+        icon: Users,
+        width: 120,
+    },
+    { key: "location", label: "Location", type: "text", icon: MapPin },
+    { key: "stage", label: "Stage", type: "tags", icon: TrendingUp, width: 150 },
+    { key: "ceo", label: "CEO", type: "text", icon: Briefcase, width: 170 },
+    { key: "twitter", label: "Twitter", type: "url", icon: AtSign, width: 150 },
+    {
+        key: "followers",
+        label: "Followers",
+        type: "number",
+        icon: Users,
+        width: 120,
+    },
+    {
+        key: "linkedin",
+        label: "LinkedIn",
+        type: "url",
+        icon: Globe,
+        width: 180,
+    },
+    {
+        key: "founded",
+        label: "Founded",
+        type: "date",
+        icon: Calendar,
+        width: 110,
+    },
+    { key: "arr", label: "Est. ARR", type: "number", icon: Hash, width: 130 },
+];
+// biome-ignore format: one row per line keeps the wide demo dataset readable
+const RAW_ROWS = [
+    { id: "google", company: { name: "Google" }, domain: "google.com", categories: ["Search", "Ads", "Cloud", "AI", "Android", "Maps", "Hardware", "Workspace", "Chrome"], employees: 182000, location: "Mountain View, CA", stage: ["Public"], ceo: "Sundar Pichai", twitter: "twitter.com/google", followers: 29800000, linkedin: "linkedin.com/company/google", founded: "1998", arr: 307000000000 },
+    { id: "stripe", company: { name: "Stripe" }, domain: "stripe.com", categories: ["Payments", "Fintech"], employees: 8000, location: "San Francisco, CA", stage: ["Series I"], ceo: "Patrick Collison", twitter: "twitter.com/stripe", followers: 1200000, linkedin: "linkedin.com/company/stripe", founded: "2010", arr: 16000000000 },
+    { id: "figma", company: { name: "Figma" }, domain: "figma.com", categories: ["Design", "SaaS"], employees: 1300, location: "San Francisco, CA", stage: ["Series E"], ceo: "Dylan Field", twitter: "twitter.com/figma", followers: 540000, linkedin: "linkedin.com/company/figma", founded: "2012", arr: 600000000 },
+    { id: "notion", company: { name: "Notion" }, domain: "notion.so", categories: ["Productivity", "SaaS"], employees: 800, location: "San Francisco, CA", stage: ["Series C"], ceo: "Ivan Zhao", twitter: "twitter.com/notionhq", followers: 480000, linkedin: "linkedin.com/company/notionhq", founded: "2013", arr: 400000000 },
+    { id: "linear", company: { name: "Linear" }, domain: "linear.app", categories: ["Dev tools"], employees: 60, location: "Remote", stage: ["Series B"], ceo: "Karri Saarinen", twitter: "twitter.com/linear", followers: 120000, linkedin: "linkedin.com/company/linear", founded: "2019", arr: 30000000 },
+    { id: "vercel", company: { name: "Vercel" }, domain: "vercel.com", categories: ["Dev tools", "Cloud"], employees: 500, location: "San Francisco, CA", stage: ["Series E"], ceo: "Guillermo Rauch", twitter: "twitter.com/vercel", followers: 310000, linkedin: "linkedin.com/company/vercel", founded: "2015", arr: 100000000 },
+    { id: "openai", company: { name: "OpenAI" }, domain: "openai.com", categories: ["AI", "Research"], employees: 3500, location: "San Francisco, CA", stage: ["Late stage"], ceo: "Sam Altman", twitter: "twitter.com/openai", followers: 4200000, linkedin: "linkedin.com/company/openai", founded: "2015", arr: 3400000000 },
+    { id: "anthropic", company: { name: "Anthropic" }, domain: "anthropic.com", categories: ["AI", "Research"], employees: 1000, location: "San Francisco, CA", stage: ["Series E"], ceo: "Dario Amodei", twitter: "twitter.com/anthropicai", followers: 520000, linkedin: "linkedin.com/company/anthropic", founded: "2021", arr: 1000000000 },
+];
+// Attach a real favicon per company (derived from the domain); the entity cell
+// falls back to a letter tile if it fails to load.
+export const defaultRows = RAW_ROWS.map((r) => ({
+    ...r,
+    company: {
+        ...r.company,
+        avatar: companyLogos[r.domain] ??
+            `https://www.google.com/s2/favicons?domain=${r.domain}&sz=64`,
+    },
+}));