@crisp-ui-kit/crisp 0.2.0 → 0.7.0

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

@@ -0,0 +1,1054 @@
+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 { DatePickerField } from "../../components/datepickerfield/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, useMenuKeyboard } 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];
+}
+export const recordsTableLabels = {
+    selectAll: "Select all",
+    sort: "Sort",
+    sortField: "Sort field",
+    sortDirection: "Sort direction",
+    removeSort: "Remove sort",
+    reorderSort: "Reorder sort",
+    addSort: "Add sort",
+    ascending: "Ascending",
+    descending: "Descending",
+    noSorts: "No sorts applied to this view.",
+    learnSorting: "Learn about sorting",
+    filter: "Filter",
+    addFilter: "Add filter",
+    filterByField: "Filter by field",
+    filterByPlaceholder: "Filter by…",
+    filterValuePlaceholder: "Value…",
+    selectCondition: "Select condition",
+    clearFilter: "Clear filter",
+    addColumn: "Add column",
+    columnLabel: "Column label",
+    editColumnLabel: "Edit column label",
+    hideFromView: "Hide from view",
+    moveLeft: "Move left",
+    moveRight: "Move right",
+    sortAscending: "Sort ascending",
+    sortDescending: "Sort descending",
+    newRecord: "New record",
+    createRecord: "Create record",
+    createMore: "Create more",
+    newButton: "New",
+    more: "More",
+    moreActions: "More actions",
+    recordActions: "Record actions",
+    copy: "Copy",
+    duplicate: "Duplicate",
+    addToList: "Add to list",
+    inAList: "In a list",
+    delete: "Delete",
+    sendEmail: "Send email",
+    exportCsv: "Export CSV",
+    runWorkflow: "Run workflow",
+    calculate: "Calculate",
+    emptyPlaceholder: "Empty",
+    setRecordPlaceholder: "Set a record…",
+    noRecords: "No records yet",
+    untitled: "Untitled",
+    agg: {
+        none: "None",
+        count: "Count all",
+        filled: "Not empty",
+        sum: "Sum",
+        avg: "Average",
+        min: "Min",
+        max: "Max",
+    },
+    op: {
+        contains: "contains",
+        is: "is",
+        isnot: "is not",
+        empty: "is empty",
+        notempty: "is not empty",
+    },
+    newRecordTitle: (entity) => `New ${entity}`,
+    setFieldPlaceholder: (field) => `Set ${field}…`,
+    newColumnLabel: (index) => `Field ${index}`,
+    sortedBy: (first, extra) => `Sorted by ${first}${extra ? ` +${extra}` : ""}`,
+    filterCount: (active) => (active ? `Filter · ${active}` : "Filter"),
+    recordCount: (n) => `${n} record${n === 1 ? "" : "s"}`,
+    conditionTitle: (field) => `${field} condition`,
+};
+// 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_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", labels, }) {
+    // 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": labels.inAList })) : null] }));
+}
+function CellView({ column, row, pinned, onOpenPage, avatarTone = "brand", labels, }) {
+    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, { labels: labels, 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, labels, }) {
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: "Search records\u2026", "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: onChange, options: (column.refOptions ?? []).map((o) => ({
+            value: o.value,
+            label: o.label,
+        })) }));
+}
+function TagsCell({ column, row, options, onChange, labels, }) {
+    const value = row[column.key] ?? [];
+    return (_jsx(MultiSelect, { options: options, value: value, onValueChange: onChange, placeholder: labels.emptyPlaceholder, 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(DatePickerField, { 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, labels, }) {
+    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 || labels.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: labels.newRecordTitle(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: labels.setFieldPlaceholder(col.label), onKeyDown: (e) => {
+                                if (e.key === "Enter" && (e.metaKey || e.ctrlKey))
+                                    submit();
+                            } })] }, col.key))) }), _jsxs(DialogFooter, { children: [_jsxs("span", { className: "dialog-more", children: [labels.createMore, _jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore })] }), _jsxs("button", { type: "button", className: "dialog-submit", onClick: submit, children: [labels.createRecord, _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({ labels, 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 t = React.useMemo(() => ({
+        ...recordsTableLabels,
+        ...labels,
+        agg: { ...recordsTableLabels.agg, ...labels?.agg },
+        op: { ...recordsTableLabels.op, ...labels?.op },
+    }), [labels]);
+    const [openMenu, setOpenMenu] = React.useState(null);
+    // the element that opened the current menu, so Esc/select can hand focus back
+    const menuReturn = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const ctxRef = React.useRef(null);
+    const ctxReturn = React.useRef(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 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: t.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 INTO `toKey`'s slot (drag-to-reorder) — the slot the
+    // dragover indicator highlights, and the same result the header menu's "Move
+    // left"/"Move right" gives for a neighbouring column. 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);
+            const to = prev.findIndex((c) => c.key === toKey);
+            if (from < 1 || to < 1)
+                return prev;
+            const next = [...prev];
+            const [moved] = next.splice(from, 1);
+            // insert at the TARGET'S ORIGINAL index, which is the slot the dragover
+            // indicator highlighted. Re-finding the target after the splice shifts
+            // every rightward drag one slot left, so an adjacent one does nothing.
+            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);
+    };
+    // the two `role="menu"` popovers driven by `openMenu`; the sort and filter
+    // popovers are dialogs and keep their own focus handling
+    const roleMenuOpen = !!openMenu && (openMenu.startsWith("col:") || openMenu.startsWith("sum:"));
+    const closeRoleMenu = React.useCallback(() => {
+        setOpenMenu(null);
+        menuReturn.current?.focus();
+    }, []);
+    const { onKeyDown: onMenuKeyDown } = useMenuKeyboard({
+        open: roleMenuOpen,
+        close: closeRoleMenu,
+        dismiss: () => setOpenMenu(null),
+        contentRef: menuRef,
+    });
+    const closeCtxMenu = React.useCallback(() => {
+        setCtxMenu(null);
+        ctxReturn.current?.focus();
+    }, []);
+    const { onKeyDown: onCtxKeyDown } = useMenuKeyboard({
+        open: !!ctxMenu,
+        close: closeCtxMenu,
+        dismiss: () => setCtxMenu(null),
+        contentRef: ctxRef,
+    });
+    const openColumnMenu = (key, el) => {
+        if (openMenu === `col:${key}`) {
+            setOpenMenu(null);
+            return;
+        }
+        const r = el.getBoundingClientRect();
+        setMenuPos({ top: r.bottom + 4, left: r.left });
+        menuReturn.current = el;
+        setOpenMenu(`col:${key}`);
+    };
+    const addColumn = () => {
+        idCounter.current += 1;
+        const key = `field-${idCounter.current}`;
+        setCols((prev) => [
+            ...prev,
+            { key, label: t.newColumnLabel(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
+                                        ? t.sortedBy(cols.find((c) => c.key === sorts[0].key)?.label ?? "", sorts.length - 1)
+                                        : t.sort] }), openMenu === "sort" && (_jsxs("div", { className: "recordstable-menu recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? (_jsx("div", { className: "recordstable-sort-empty", children: t.noSorts })) : (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": t.reorderSort, 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": t.sortField }), _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 }), t.ascending] })),
+                                                        keywords: t.ascending,
+                                                    },
+                                                    {
+                                                        value: "desc",
+                                                        label: (_jsxs("span", { className: "recordstable-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), t.descending] })),
+                                                        keywords: t.descending,
+                                                    },
+                                                ], "aria-label": t.sortDirection }), _jsx("button", { type: "button", className: "recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, 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 }), t.addSort] }) }), _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 }), t.learnSorting] }) })] }))] }), _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": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), t.filterCount(activeFilters)] }), openMenu === "filter" && (_jsxs("div", { className: "recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_jsx("input", { className: "recordstable-menu-input", placeholder: t.filterByPlaceholder, "aria-label": t.filterByField, 
+                                        // 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": "dialog", "aria-expanded": open, 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: t.op[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "recordstable-fchip-op", children: t.selectCondition }))] }), _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: "dialog", "aria-label": `${col?.label} condition`, 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: [t.op[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: t.filterValuePlaceholder, "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" }), _jsx("span", { className: "recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && (_jsxs("button", { type: "button", className: "recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), _jsxs("div", { ref: scrollRef, className: "recordstable-scroll", tabIndex: -1, "data-scrolled": scrolledX ? "" : undefined, onKeyDown: onGridKeyDown, onScroll: (e) => {
+                    const left = e.currentTarget.scrollLeft > 0;
+                    setScrolledX((prev) => (prev === left ? prev : left));
+                }, 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": t.selectAll, 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": t.columnLabel, 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", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
+                                                                        setRenamingCol(col.key);
+                                                                        setOpenMenu(null);
+                                                                    }, children: [_jsx(Pencil, { size: 15, strokeWidth: 1.75 }), t.editColumnLabel] }), cols.length > 1 && (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => hideColumn(col.key), children: [_jsx(EyeOff, { size: 15, strokeWidth: 1.75 }), t.hideFromView] }))] }), 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": t.addColumn, 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();
+                                        ctxReturn.current = document.activeElement;
+                                        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-enriched": col.enriched ? "" : undefined, "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, { labels: t, column: col, row: row, onChange: (v) => setCell(row.id, col.key, v) })) : col.type === "tags" ? (_jsx(TagsCell, { labels: t, 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, { labels: t, 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,
+                                                                });
+                                                                menuReturn.current = e.currentTarget;
+                                                                setOpenMenu(`sum:${col.key}`);
+                                                            }, children: res ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "recordstable-sum-label", children: t.calculate })) }), sumOpen &&
+                                                            rootRef.current &&
+                                                            createPortal(_jsx("div", { ref: menuRef, className: "recordstable-menu recordstable-menu--fixed recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => (_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[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" : t.noRecords, 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 }), t.clearFilter] })) : (_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_jsxs("button", { type: "button", className: "recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), 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: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _jsx(CreateRecordDialog, { labels: t, 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", { ref: ctxRef, className: "recordstable-menu recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [_jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "recordstable-menu-item recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.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`,
+    },
+}));