@crisp-ui-kit/crisp 0.54.11 → 0.55.1

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

@@ -1,1322 +0,0 @@
-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, CircleUserRound, Copy, CopyPlus, CornerDownLeft, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plug, Plus, Star, Tag, Trash2, TrendingUp, Upload, 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 { Tooltip } from "../../components/tooltip/index.js";
-import { isInsideLaterFloatingLayer, isRtlElement, useCrispComponentDefaults, usePrefersReducedMotion, } from "../../core/index.js";
-import { companyLogos } from "./company-logos.js";
-import { recordstableRecipe } from "./recordstable.recipe.js";
-// #534: whether an element's own content is being cut off by its own box --
-// the same fact `.crisp-recordstable-th-label`'s CSS ellipsis is silently
-// applying, exported so the comparison itself (not layout) can be
-// mutation-tested without a real browser. Identical to DataTable's own
-// `isLabelTruncated` (components/datatable/datatable.tsx) -- not shared
-// because `product/` can depend on `components/` but not the other way, and
-// this file already duplicates DataTable's other measured header behaviour
-// rather than reach across that boundary.
-export function isLabelTruncated(el) {
-    return el.scrollWidth > el.clientWidth;
-}
-/**
- * The header label span: plain when it fits, wrapped in the shared `Tooltip`
- * (full text, `asChild` so the wrapper never displaces the ellipsis CSS the
- * span already carries -- see `Tooltip`'s own `asChild` doc) once it's
- * actually cut off. Re-measures on mount and on resize (column drag,
- * viewport change, label change) via `ResizeObserver`; SSR-safe the same way
- * `MiddleTruncate` is -- the DOM is only touched inside an effect, so the
- * server (and the first client paint) renders the plain span.
- *
- * #580: a `referencedType` column (Attio's own `type: "reference"`) appends
- * that type's icon + name after the label and switches to `Tooltip`'s
- * `"reference"` chrome variant (Attio's second, structurally distinct
- * tooltip — same background/colour/radius/padding/font as the plain one, a
- * different `box-shadow`, crisp#563). Every other column stays label-only,
- * the `"plain"` variant #534/#558 shipped.
- */
-function ThLabel({ label, referencedType, }) {
-    const ref = React.useRef(null);
-    const [overflowing, setOverflowing] = React.useState(false);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: `label` isn't read in the body, but a rename (col.label changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
-    React.useLayoutEffect(() => {
-        const el = ref.current;
-        if (!el)
-            return;
-        const measure = () => setOverflowing(isLabelTruncated(el));
-        measure();
-        if (typeof ResizeObserver === "undefined")
-            return;
-        const ro = new ResizeObserver(measure);
-        ro.observe(el);
-        return () => ro.disconnect();
-    }, [label]);
-    // `Tooltip` always wraps the SAME span (never swapped in/out of the tree
-    // based on `overflowing`) so the span's own DOM node identity survives
-    // every toggle -- a real-browser-only bug (happy-dom has no
-    // ResizeObserver, so the test suite never exercised this path): swapping
-    // between a bare `<span>` and `<Tooltip asChild><span/></Tooltip>` changes
-    // the element type at this position, so React unmounts the old span and
-    // mounts a new one; the effect above never re-runs (its deps are
-    // `[label]`, unchanged), so its ResizeObserver keeps watching the now
-    // -detached old node, whose deferred initial callback then reports 0x0 and
-    // flips `overflowing` straight back to false -- the tooltip would never
-    // actually show. `open={false}` when it fits keeps the Tooltip mounted
-    // (asChild costs no extra DOM either way) but pins it permanently closed,
-    // so hovering a non-overflowing header still opens nothing.
-    const ReferenceIcon = referencedType?.icon;
-    const content = referencedType ? (_jsxs("span", { className: "crisp-tooltip-reference-row", children: [label, ReferenceIcon && _jsx(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (label);
-    return (_jsx(Tooltip, { content: content, asChild: true, variant: referencedType ? "reference" : "plain", open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
-}
-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",
-    searchRecordsPlaceholder: "Search records…",
-    searchOptionsPlaceholder: "Search options…",
-    selectedCount: "Selected",
-    selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
-    delete: "Delete",
-    sendEmail: "Send email",
-    runWorkflow: "Run workflow",
-    calculate: "Calculate",
-    emptyPlaceholder: "Empty",
-    setRecordPlaceholder: "Set a record…",
-    noRecords: "No records yet",
-    untitled: "Untitled",
-    importCsv: "Import CSV",
-    connectDataSource: "Connect data source",
-    agg: {
-        none: "None",
-        count: "Count all",
-        filled: "Not empty",
-        sum: "Sum",
-        avg: "Average",
-        min: "Min",
-        max: "Max",
-    },
-    op: {
-        contains: "contains",
-        doesnotcontain: "does not contain",
-        startswith: "starts with",
-        endswith: "ends with",
-        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",
-    "doesnotcontain",
-    "startswith",
-    "endswith",
-    "is",
-    "isnot",
-    "empty",
-    "notempty",
-];
-const opNeedsValue = (op) => op !== "empty" && op !== "notempty";
-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 === "doesnotcontain")
-        return !t.includes(v);
-    if (cond.op === "startswith")
-        return t.startsWith(v);
-    if (cond.op === "endswith")
-        return t.endsWith(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: "crisp-recordstable-entity", children: [showImg ? (_jsx("img", { className: "crisp-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: "crisp-recordstable-entity-name crisp-recordstable-entity-name--link", onClick: (e) => {
-                    e.stopPropagation();
-                    onOpenPage();
-                }, children: value.name })) : (_jsx("span", { className: "crisp-recordstable-entity-name", children: value.name })), pinned ? (_jsx(Star, { className: "crisp-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 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)) {
-        // Attio's own empty cell is genuinely blank -- no placeholder character
-        // at all (#412).
-        return null;
-    }
-    // `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: "crisp-recordstable-cell crisp-recordstable-cell--tags", children: value.map((t) => (_jsx("span", { className: "crisp-recordstable-tag", "data-tone": tagTone(t), children: t }, t))) }));
-        case "number":
-            return (_jsx("span", { className: "crisp-recordstable-cell crisp-recordstable-cell--num", children: display ??
-                    (typeof value === "number" ? value.toLocaleString() : value) }));
-        case "url":
-            return (_jsx("a", { className: "crisp-recordstable-link", href: `https://${value}`, target: "_blank", rel: "noreferrer", onClick: (e) => e.stopPropagation(), children: display ?? value }));
-        case "date":
-            return (_jsx("span", { className: "crisp-recordstable-muted", children: display ?? value }));
-        case "currency": {
-            const n = typeof value === "number" ? value : Number(value);
-            return (_jsx("span", { className: "crisp-recordstable-cell crisp-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: "crisp-recordstable-muted", children: "\u2014" });
-            return (_jsxs("span", { className: "crisp-recordstable-status", children: [_jsx("span", { className: "crisp-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: "crisp-recordstable-entity", children: [_jsx(Avatar, { size: "sm", shape: "rounded", tone: avatarTone === "hashed" ? avatarToneFor(label) : "brand", children: label.charAt(0) }), _jsx("span", { className: "crisp-recordstable-entity-name", children: label })] }));
-        }
-        default:
-            return (_jsx("span", { className: "crisp-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 measured 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 ?? [] }));
-}
-// A sentinel that can't collide with a real record id (crisp never generates
-// one, and a consumer's own ids come from their own data store) -- picking
-// this row calls `onCreateReference`, not `onChange` (#449).
-const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
-/** The 16px avatar Attio's own reference picker draws before every option's
- * label -- a photo when the option carries one, a generic person glyph
- * otherwise (measured live, #449: Attio's own fallback is an icon, not
- * initials -- a different, deliberate choice from the entity cell's own
- * initials fallback elsewhere in this file). */
-function referenceOptionLabel(o) {
-    return (_jsxs("span", { className: "crisp-recordstable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-recordstable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
-}
-function ReferenceCell({ column, row, onChange, labels, }) {
-    const [query, setQuery] = React.useState("");
-    const options = (column.refOptions ?? []).map((o) => ({
-        value: o.value,
-        label: referenceOptionLabel(o),
-        keywords: o.label,
-    }));
-    if (column.onCreateReference) {
-        options.push({
-            value: CREATE_REFERENCE_VALUE,
-            label: (_jsxs("span", { className: "crisp-recordstable-refoption crisp-recordstable-refoption--create", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), `Create ${column.createLabel ?? "record"}`] })),
-            // always reachable regardless of the typed query -- it's an action,
-            // not a record to filter away
-            keywords: query,
-        });
-    }
-    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: labels.searchRecordsPlaceholder, onSearchChange: setQuery, "aria-label": column.label, placeholder: labels.setRecordPlaceholder, value: row[column.key] ?? undefined, onValueChange: (v) => {
-            if (v === CREATE_REFERENCE_VALUE)
-                column.onCreateReference?.(query);
-            else
-                onChange(v);
-        }, options: options }));
-}
-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: labels.searchOptionsPlaceholder, "aria-label": column.label }));
-}
-/**
- * A date-only cell is a CALENDAR DATE, not an instant. ECMA-262 parses the
- * date-only ISO forms — `1998`, `1998-09`, `1998-09-04` — as UTC midnight, and
- * the field then renders that instant in the reader's own timezone. A
- * `founded: "1998"` field therefore read **Dec 31, 1997** for every reader west
- * of UTC, at every hour of every day, and a date picked east of UTC
- * round-tripped back a day short through `toISOString()` (#220).
- *
- * A string that carries a time is left alone: that one really is an instant,
- * and shifting it would move the moment it names.
- */
-// parseCellDate/formatCellDate moved to core/cell-date.ts so DataTable shares
-// one implementation rather than a second copy -- #221 was this defect fixed
-// here (#220) and left in DataTable. Re-exported because they were already
-// reachable from this module's public surface.
-// imported for use here AND re-exported, because a bare `export ... from` does
-// not bind the names locally
-import { cellDatePrecision, formatCellDate, parseCellDate, } from "../../core/index.js";
-export { formatCellDate, parseCellDate };
-// "1998" for a year-only raw value, "Sep 1998" for year-month, and the full
-// "Sep 4, 1998" only once the raw value actually named a day (#312) --
-// DatePickerField's own default format always prints full precision, since
-// as a general calendar field it has no raw string to read a precision from.
-function formatByPrecision(d, precision) {
-    if (precision === "year")
-        return String(d.getFullYear());
-    return d.toLocaleDateString(undefined, {
-        month: "short",
-        day: precision === "month" ? undefined : "numeric",
-        year: "numeric",
-    });
-}
-function DateCell({ column, row, onChange, }) {
-    const raw = row[column.key];
-    const value = parseCellDate(raw);
-    const precision = raw ? cellDatePrecision(raw) : "day";
-    return (_jsx(DatePickerField, { variant: "ghost", "aria-label": column.label, value: value, 
-        // Out of scope for #394 (which added Clear to DatePickerField itself):
-        // a cell's OWN clear-to-empty affordance is a different, unmeasured
-        // question, and this callback's `string` contract has no "empty" of
-        // its own to report yet. Keeps this cell's exact pre-#394 behavior.
-        clearable: false, 
-        // #417: the trigger displays the value at its stored precision
-        // (year-only stays year-only) rather than always a full date.
-        format: (d) => formatByPrecision(d, precision), onChange: (d) => {
-            if (d)
-                onChange(formatCellDate(d));
-        } }));
-}
-/**
- * The "New <object>" create modal — measured from a 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 blank (#412)
-            }
-            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: "crisp-dialog-field", children: [_jsx("label", { className: "crisp-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: "crisp-dialog-more", children: [_jsx(Switch, { checked: createMore, onCheckedChange: setCreateMore, "aria-label": labels.createMore }), labels.createMore] }), _jsxs("button", { type: "button", className: "crisp-dialog-submit", onClick: submit, children: [labels.createRecord, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: _jsx(CornerDownLeft, { size: 10, strokeWidth: 2 }) })] })] })] })] }));
-}
-/**
- * A measured-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`.
- *
- * @deprecated Reach for `DataTable` instead — a single Attio-exact records
- * grid replaces the separate table variants. `RecordsTable` has no
- * consumers left (checked GRC and the fms/Mercury admin) and is slated for
- * removal in a future minor.
- */
-export function RecordsTable({ labels, columns: columnsProp = defaultColumns, rows: rowsProp = defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", emptyStateExtra, className, ...rest }) {
-    const [cols, setCols] = React.useState(columnsProp);
-    const [data, setData] = React.useState(rowsProp);
-    // The table owns `cols`/`data` so it can rename a column, edit a cell, or
-    // append a record without a round trip. That state is seeded from the props,
-    // so without these it would be a mount-time SNAPSHOT: an app that renders
-    // `rows={[]}` and re-renders with fetched rows would show "No records yet"
-    // for ever. Re-seed whenever the caller hands us a new array -- caller wins,
-    // exactly as DataTable does for its columns. Local edits survive until then,
-    // because a caller passing a stable array never triggers this.
-    React.useEffect(() => setCols(columnsProp), [columnsProp]);
-    React.useEffect(() => setData(rowsProp), [rowsProp]);
-    // 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);
-    // A measured-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>`
-    // crisp/#471: same "provider sits between the built-in default and this
-    // instance's own explicit labels prop" order as RecordPage's own — see
-    // its comment. Several entries here (`selectionAnnouncement`, `sortedBy`,
-    // `recordCount`, …) are formatter functions, which is why this goes
-    // through `useCrispComponentDefaults`, not `useCrispMessage`.
-    const providerLabels = useCrispComponentDefaults("recordsTable");
-    const t = React.useMemo(() => ({
-        ...recordsTableLabels,
-        ...providerLabels,
-        ...labels,
-        agg: {
-            ...recordsTableLabels.agg,
-            ...providerLabels?.agg,
-            ...labels?.agg,
-        },
-        op: { ...recordsTableLabels.op, ...providerLabels?.op, ...labels?.op },
-    }), [labels, providerLabels]);
-    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?.(".crisp-select-listbox, .crisp-multiselect-listbox, .datepicker-cal, .crisp-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(".crisp-recordstable-menu, [data-menu-trigger]"))
-                return;
-            // #339: a Select/MultiSelect/Menu opened from inside this popover now
-            // portals to document.body, so it's no longer inside
-            // .crisp-recordstable-menu by DOM containment -- check the shared
-            // floating-layer stack too.
-            if (isInsideLaterFloatingLayer(t, null))
-                return;
-            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) => {
-            const t = e.target;
-            if (t.closest(".crisp-recordstable-ctx"))
-                return;
-            if (isInsideLaterFloatingLayer(t, null))
-                return;
-            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]);
-    // The selection is announced from a region that is part of the table and
-    // outlives every selection, because the bulk bar the consumer mounts on the
-    // first pick cannot announce its own arrival (#234). Derived by adjusting
-    // state during render rather than in an effect: it must not fire on mount —
-    // nobody has selected anything yet — and it has to cover a `selectedIds`
-    // change the consumer makes as well as a click in the table.
-    const prevSelectedCount = React.useRef(selected.size);
-    const [selectionAnnouncement, setSelectionAnnouncement] = React.useState("");
-    if (prevSelectedCount.current !== selected.size) {
-        prevSelectedCount.current = selected.size;
-        setSelectionAnnouncement(t.selectionAnnouncement(selected.size));
-    }
-    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);
-        // The arrows follow what the user SEES. Under RTL the first column renders
-        // rightmost, so ArrowLeft moves to the next column and ArrowRight to the
-        // previous — the grid's own half-conversion, of the same kind the resize
-        // grips had (#255).
-        else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-            const rtl = isRtlElement(e.currentTarget);
-            const forward = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
-            nc = forward ? Math.min(cols.length - 1, c + 1) : Math.max(0, 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;
-    // The header checkbox speaks for the rows you can SEE. Rebuilding the whole
-    // set from `visibleRows` would silently drop anything an active filter is
-    // hiding -- on a surface with a bulk Delete, that loses a selection the user
-    // made. Add/remove the visible rows and leave the rest of the set alone.
-    const toggleAll = () => {
-        const next = new Set(selected);
-        for (const r of visibleRows) {
-            if (allSelected)
-                next.delete(r.id);
-            else
-                next.add(r.id);
-        }
-        setSelected(next);
-    };
-    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));
-    /**
-     * Keep the selected cell on screen.
-     *
-     * Focus stays on the scroll region, never on a cell, so the browser has
-     * nothing to scroll to: the arrow keys moved the outline and the viewport
-     * stayed put. Measured in Chrome on a 384px-tall region over 40 rows —
-     * twenty ArrowDowns left `scrollTop` at 0 with the selected cell 761px below
-     * the top edge, i.e. the user was driving a selection they could not see
-     * (#257).
-     *
-     * `nearest` on both axes: a cell already in view is left exactly where it
-     * is, which is what makes this safe to run after a click too.
-     *
-     * No `behavior` of our own — the page's `scroll-behavior` decides, and it
-     * jumps rather than glides — except under reduced motion, where an explicit
-     * "auto" is the only thing that beats a host page that set
-     * `scroll-behavior: smooth` on the scroller (#208's rule: JS motion reads
-     * the preference itself, because CSS cannot reach an explicit argument).
-     */
-    const reduceMotion = usePrefersReducedMotion();
-    React.useEffect(() => {
-        if (!selCell)
-            return;
-        const cell = scrollRef.current?.querySelector(`[data-cell="${CSS.escape(`${selCell.id}:${selCell.key}`)}"]`);
-        cell?.scrollIntoView({
-            block: "nearest",
-            inline: "nearest",
-            ...(reduceMotion ? { behavior: "auto" } : null),
-        });
-    }, [selCell, reduceMotion]);
-    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 entityCol = cols.find((c) => c.type === "entity");
-    // "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))
-            // Pass the real column: `cellText` -> `rawText` reads `col.type` to pull
-            // an entity's `.name`, so a `{key, label}` stand-in with no `type` falls
-            // through to String(value) and yields "[object Object]".
-            .map((r) => (entityCol ? cellText(entityCol, 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, grip) => {
-        // A table's columns reverse under RTL — measured — so the grip sits on the
-        // column's leading edge there and a rightward pull must SHRINK it. The
-        // anchor is `inset-inline-end`; this is the other half (#214).
-        const dir = isRtlElement(grip) ? -1 : 1;
-        // 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 + dir * (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, ...rest, children: [_jsxs("div", { className: "crisp-recordstable-toolbar", children: [_jsxs("span", { className: "crisp-recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-recordstable-tool${sorts.length ? " crisp-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: "crisp-recordstable-menu crisp-recordstable-sortpop", role: "dialog", "aria-label": t.sort, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-recordstable-sort-empty", children: t.noSorts })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-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: "crisp-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: "crisp-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: "crisp-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: "crisp-recordstable-sort-dir", value: s.dir, onValueChange: (d) => setSortDir(i, d), options: [
-                                                    {
-                                                        value: "asc",
-                                                        label: (_jsxs("span", { className: "crisp-recordstable-sort-optlabel", children: [_jsx(ArrowUpNarrowWide, { size: 15, strokeWidth: 1.75 }), t.ascending] })),
-                                                        keywords: t.ascending,
-                                                    },
-                                                    {
-                                                        value: "desc",
-                                                        label: (_jsxs("span", { className: "crisp-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: "crisp-recordstable-sort-remove", onClick: () => removeSort(i), "aria-label": t.removeSort, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-recordstable-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-recordstable-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.addSort] }) }), _jsx("div", { className: "crisp-recordstable-sort-foot", children: t.learnSortingHref ? (_jsxs("a", { className: "crisp-recordstable-sort-learn", href: t.learnSortingHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) : (_jsxs("span", { className: "crisp-recordstable-sort-learn", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), t.learnSorting] })) })] }))] }), _jsxs("span", { className: "crisp-recordstable-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-recordstable-tool crisp-recordstable-tool--ghost${activeFilters ? " crisp-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: "crisp-recordstable-menu", role: "dialog", "aria-label": t.addFilter, children: [_jsx("input", { className: "crisp-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: "crisp-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: "crisp-recordstable-toolgroup", children: [_jsxs("span", { className: "crisp-recordstable-fchip", children: [_jsxs("button", { type: "button", className: "crisp-recordstable-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-recordstable-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-recordstable-fchip-op", children: t.op[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-recordstable-fchip-val", children: cond.value }))] })) : (_jsx("span", { className: "crisp-recordstable-fchip-op", children: t.selectCondition }))] }), _jsx("button", { type: "button", className: "crisp-recordstable-fchip-x", "aria-label": `Remove ${col?.label} filter`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-recordstable-menu", role: "dialog", "aria-label": `${col?.label} condition`, children: [_jsxs("div", { className: "crisp-recordstable-menu-head", children: [col?.label, " condition"] }), OP_ORDER.map((op) => (_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [t.op[op], cond.op === op ? (_jsx(Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-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: "crisp-recordstable-spacer" }), _jsx("span", { className: "crisp-recordstable-count", children: t.recordCount(visibleRows.length) }), showNew && (_jsxs("button", { type: "button", className: "crisp-recordstable-new", onClick: () => setCreating(true), children: [_jsx(Plus, { size: 15, strokeWidth: 2, "aria-hidden": "true" }), t.newButton] }))] }), _jsxs("div", { ref: scrollRef, className: "crisp-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: "crisp-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: "crisp-recordstable-th crisp-recordstable-col-check", children: _jsx("span", { className: "crisp-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: `crisp-recordstable-th${i === 0 ? " crisp-recordstable-col-entity" : ""}`, "data-sorted": sc?.dir, "aria-sort": sorts[0]?.key === col.key
-                                                    ? sorts[0].dir === "asc"
-                                                        ? "ascending"
-                                                        : "descending"
-                                                    : "none", "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: "crisp-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: "crisp-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: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { label: col.label, referencedType: col.referencedType }), _jsx("span", { className: "crisp-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: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-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: "crisp-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: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-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: "crisp-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: "crisp-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, e.currentTarget);
-                                                        }, onClick: (e) => e.stopPropagation() })] }, col.key));
-                                        }), _jsx("th", { className: "crisp-recordstable-th crisp-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: "crisp-recordstable-td crisp-recordstable-col-check", children: _jsx("span", { className: "crisp-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;
-                                            // The first column is the record's NAME — it is what the row
-                                            // is, not a value the row has. As a `<th scope="row">` a
-                                            // screen reader reads "Google, Employees, 182,000" across the
-                                            // row instead of a bare "182,000", and the same header is
-                                            // repeated in every cell's context (#231).
-                                            const Cell = (i === 0 ? "th" : "td");
-                                            return (_jsxs(Cell, { scope: i === 0 ? "row" : undefined, "data-cell": `${row.id}:${col.key}`, className: `crisp-recordstable-td${i === 0 ? " crisp-recordstable-col-entity" : ""}${canEdit ? " crisp-recordstable-td--editable" : ""}${isPicker ? " crisp-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: `crisp-recordstable-edit${col.type === "number" ? " crisp-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: "crisp-recordstable-open", "aria-label": `Open ${cellText(col, row)}`, onClick: (e) => {
-                                                            e.stopPropagation();
-                                                            onOpenRecord(row);
-                                                        }, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }))] }, col.key));
-                                        }), _jsx("td", { className: "crisp-recordstable-td crisp-recordstable-addcol" })] }, row.id))) }), _jsx("tfoot", { children: _jsxs("tr", { children: [_jsx("td", { className: "crisp-recordstable-sum crisp-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: `crisp-recordstable-sum${i === 0 ? " crisp-recordstable-col-entity" : ""}`, children: _jsxs("span", { className: "crisp-recordstable-toolgroup crisp-recordstable-sumgroup", children: [_jsx("button", { type: "button", className: "crisp-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: "crisp-recordstable-sum-label", children: t.agg[a] }), _jsx("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : (_jsx("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
-                                                            rootRef.current &&
-                                                            createPortal(_jsx("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-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: "crisp-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: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), _jsx("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? (_jsx("div", { className: "crisp-recordstable-empty", children: _jsx(EmptyState
-                        // #603: the unfiltered zero-records state, when the consumer
-                        // opts into the extra CTAs, uses Attio's own larger measured
-                        // tile (Users/Workspaces, 138px) instead of the 45px
-                        // filtered-to-zero ring -- two different Attio surfaces.
-                        , { 
-                            // #603: the unfiltered zero-records state, when the consumer
-                            // opts into the extra CTAs, uses Attio's own larger measured
-                            // tile (Users/Workspaces, 138px) instead of the 45px
-                            // filtered-to-zero ring -- two different Attio surfaces.
-                            variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(Inbox, { size: !activeFilters && emptyStateExtra ? 40 : 18, strokeWidth: 1.25, "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(_Fragment, { children: [_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [_jsx(Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, 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 }), _jsx(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(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: "crisp-recordstable-menu crisp-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: "crisp-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: "crisp-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: "crisp-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: "crisp-recordstable-menu-item crisp-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`,
-    },
-}));