@crisp-ui-kit/crisp 0.54.2 → 0.54.4

package/dist/esm/product/objectsettings/objectsettings.js

@@ -0,0 +1,322 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, CheckSquare, Clock, DollarSign, FileText, Flag, Hash, Link2, ListChecks, MapPin, MoreHorizontal, Pencil, Phone, Search, SlidersHorizontal, Sparkles, Star, Type as TypeIcon, User as UserIcon, } from "lucide-react";
+import * as React from "react";
+import { Badge } from "../../components/badge/index.js";
+import { DataTable } from "../../components/datatable/index.js";
+import { FormField } from "../../components/formfield/index.js";
+import { Input } from "../../components/input/index.js";
+import { Menu, MenuItem } from "../../components/menu/index.js";
+import { Select } from "../../components/select/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { Tabs } from "../../components/tabs/index.js";
+import { Textarea } from "../../components/textarea/index.js";
+import { useCrispMessage } from "../../core/index.js";
+import { FormDialog } from "../formdialog/index.js";
+import { SettingsSection } from "../settingssection/index.js";
+import { objectsettingsRecipe } from "./objectsettings.recipe.js";
+/**
+ * Settings → Objects (crisp#637, P-122): H1 + subtitle, a search+Filter row,
+ * and a DataTable of every object (icon+name, type, record count,
+ * attribute count, a per-row "…" menu). Measured live against
+ * app.attio.com/<workspace>/settings/data/objects — the plan-gate banner
+ * above the table and the "5/3" object-count pill in the "Object" header
+ * (both billing-tier chrome) are skipped by decision, not oversight.
+ */
+export function ObjectsList({ objects, onOpenObject, onEditObject, onCopyObjectId, onCreateObject, title: titleProp, subtitle: subtitleProp, newObjectLabel: newObjectLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, objectColumnLabel: objectColumnLabelProp, typeColumnLabel: typeColumnLabelProp, recordsColumnLabel: recordsColumnLabelProp, attributesColumnLabel: attributesColumnLabelProp, noRecordsLabel: noRecordsLabelProp, editLabel: editLabelProp, copyIdLabel: copyIdLabelProp, rowMenuLabel, emptyLabel, className, ...rest }) {
+    const title = useCrispMessage(titleProp, "Objects");
+    const subtitle = useCrispMessage(subtitleProp, "Modify and add objects in your workspace");
+    const newObjectLabel = useCrispMessage(newObjectLabelProp, "New custom object");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search objects");
+    const filterLabel = useCrispMessage(filterLabelProp, "Filter");
+    const objectColumnLabel = useCrispMessage(objectColumnLabelProp, "Object");
+    const typeColumnLabel = useCrispMessage(typeColumnLabelProp, "Type");
+    const recordsColumnLabel = useCrispMessage(recordsColumnLabelProp, "Records");
+    const attributesColumnLabel = useCrispMessage(attributesColumnLabelProp, "Attributes");
+    const noRecordsLabel = useCrispMessage(noRecordsLabelProp, "No records");
+    const editLabel = useCrispMessage(editLabelProp, "Edit");
+    const copyIdLabel = useCrispMessage(copyIdLabelProp, "Copy ID");
+    const [query, setQuery] = React.useState("");
+    const filtered = React.useMemo(() => {
+        if (!query.trim())
+            return objects;
+        const q = query.trim().toLowerCase();
+        return objects.filter((o) => String(o.name ?? "")
+            .toLowerCase()
+            .includes(q));
+    }, [objects, query]);
+    const columns = React.useMemo(() => [
+        {
+            key: "name",
+            header: objectColumnLabel,
+            render: (_v, row) => (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { className: "crisp-objectsettings-icon", style: { background: row.iconColor ?? "currentColor" }, children: row.icon }), row.name] })),
+        },
+        {
+            key: "typeLabel",
+            header: typeColumnLabel,
+            render: (_v, row) => (_jsx("span", { className: "crisp-objectsettings-typebadge", children: row.typeLabel })),
+        },
+        {
+            key: "recordCount",
+            header: recordsColumnLabel,
+            align: "left",
+            render: (_v, row) => row.recordCount ? (row.recordCount) : (_jsx("span", { className: "crisp-objectsettings-muted", children: noRecordsLabel })),
+        },
+        {
+            key: "attributeCount",
+            header: attributesColumnLabel,
+        },
+        {
+            key: "actions",
+            header: "",
+            align: "right",
+            render: (_v, row) => (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", "aria-label": rowMenuLabel?.(row) ?? `${row.name}`, style: {
+                        display: "inline-flex",
+                        border: "none",
+                        background: "none",
+                        cursor: "pointer",
+                        color: "inherit",
+                        padding: 4,
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: [_jsx(MenuItem, { icon: _jsx(Pencil, { size: 14 }), onSelect: () => onEditObject?.(row.id), children: editLabel }), _jsx(MenuItem, { onSelect: () => onCopyObjectId?.(row.id), children: copyIdLabel })] })),
+        },
+    ], [
+        objectColumnLabel,
+        typeColumnLabel,
+        recordsColumnLabel,
+        attributesColumnLabel,
+        noRecordsLabel,
+        editLabel,
+        copyIdLabel,
+        onEditObject,
+        onCopyObjectId,
+        rowMenuLabel,
+    ]);
+    return (_jsx("div", { className: objectsettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-objectsettings-page", children: [_jsxs("div", { className: "crisp-objectsettings-head", children: [_jsxs("div", { className: "crisp-objectsettings-heading", children: [_jsx("h1", { className: "crisp-objectsettings-title", children: title }), _jsx("p", { className: "crisp-objectsettings-subtitle", children: subtitle })] }), onCreateObject && (_jsx("button", { type: "button", className: "crisp-objectsettings-filterbtn", onClick: onCreateObject, children: newObjectLabel }))] }), _jsxs("div", { className: "crisp-objectsettings-toolbar", children: [_jsxs("span", { className: "crisp-objectsettings-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchPlaceholder })] }), _jsxs("button", { type: "button", className: "crisp-objectsettings-filterbtn", children: [_jsx(SlidersHorizontal, { size: 14 }), filterLabel] })] }), _jsx(DataTable, { columns: columns, data: filtered, onRowClick: onOpenObject ? (row) => onOpenObject(row.id) : undefined, empty: emptyLabel })] }) }));
+}
+ObjectsList.displayName = "ObjectsList";
+/**
+ * Settings → Objects → an object (crisp#637, P-123, verified live against
+ * .../objects/companies/general): 48px icon tile + name + type badge, a
+ * description line, then a Configuration/Attributes tab bar (Attio's own
+ * tab bar also carries Permissions/Templates/Notifications/Imports — out of
+ * scope here, see #613/#638; only the two rows this task covers are built).
+ * Tab content is a render prop, the same shape crisp's own `Tabs` already
+ * takes, so a consumer composes `ObjectGeneralSection`/
+ * `ObjectAppearanceSection` and `AttributesTable` underneath.
+ */
+export function ObjectDetailPage({ icon, iconColor, name, typeLabel, description, tab, defaultTab = "configuration", onTabChange, attributeCount, configurationLabel: configurationLabelProp, attributesLabel: attributesLabelProp, children, }) {
+    const configurationLabel = useCrispMessage(configurationLabelProp, "Configuration");
+    const attributesLabel = useCrispMessage(attributesLabelProp, "Attributes");
+    const [internalTab, setInternalTab] = React.useState(defaultTab);
+    const active = tab ?? internalTab;
+    const setTab = (v) => {
+        const next = v;
+        if (tab === undefined)
+            setInternalTab(next);
+        onTabChange?.(next);
+    };
+    return (_jsx("div", { className: objectsettingsRecipe(), children: _jsxs("div", { className: "crisp-objectsettings-page", children: [_jsx("div", { className: "crisp-objectsettings-head", children: _jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [_jsx("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), _jsxs("div", { className: "crisp-objectsettings-heading", children: [_jsxs("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && (_jsx(Badge, { tone: "neutral", size: "small", children: typeLabel }))] }), description != null && (_jsx("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), _jsx(Tabs, { value: active, onValueChange: setTab, tabs: [
+                        { value: "configuration", label: configurationLabel },
+                        {
+                            value: "attributes",
+                            label: attributesLabel,
+                            badge: attributeCount,
+                        },
+                    ], children: (v) => children(v) })] }) }));
+}
+ObjectDetailPage.displayName = "ObjectDetailPage";
+/** The Configuration tab's "General" section (crisp#637, P-123): plural/
+ * singular noun inputs side by side, then a slug input Attio locks for
+ * system objects. Composes `SettingsSection` + `FormField`, no new chrome. */
+export function ObjectGeneralSection({ pluralNoun, onPluralNounChange, singularNoun, onSingularNounChange, slug, slugEditable = false, onSlugChange, titleLabel: titleLabelProp, descriptionLabel: descriptionLabelProp, pluralLabel: pluralLabelProp, singularLabel: singularLabelProp, slugLabel: slugLabelProp, slugHelpLabel: slugHelpLabelProp, }) {
+    const titleLabel = useCrispMessage(titleLabelProp, "General");
+    const descriptionLabel = useCrispMessage(descriptionLabelProp, "Set words to describe a single and multiple objects of this type");
+    const pluralLabel = useCrispMessage(pluralLabelProp, "Plural noun");
+    const singularLabel = useCrispMessage(singularLabelProp, "Singular noun");
+    const slugLabel = useCrispMessage(slugLabelProp, "Slug");
+    const slugHelpLabel = useCrispMessage(slugHelpLabelProp, "You can't change the slug of a system object");
+    const pluralId = React.useId();
+    const singularId = React.useId();
+    const slugId = React.useId();
+    return (_jsxs(SettingsSection, { title: titleLabel, description: descriptionLabel, children: [_jsxs("div", { className: "crisp-objectsettings-fieldrow", children: [_jsx(FormField, { label: pluralLabel, htmlFor: pluralId, children: _jsx(Input, { id: pluralId, value: pluralNoun, onChange: (e) => onPluralNounChange?.(e.target.value) }) }), _jsx(FormField, { label: singularLabel, htmlFor: singularId, children: _jsx(Input, { id: singularId, value: singularNoun, onChange: (e) => onSingularNounChange?.(e.target.value) }) })] }), _jsx(FormField, { label: slugLabel, htmlFor: slugId, description: !slugEditable ? slugHelpLabel : undefined, children: _jsx(Input, { id: slugId, value: slug, disabled: !slugEditable, onChange: (e) => onSlugChange?.(e.target.value) }) })] }));
+}
+ObjectGeneralSection.displayName = "ObjectGeneralSection";
+/** The Configuration tab's "Appearance" section (crisp#637, P-123): a single
+ * "Record page layout" row with a "Configure record page" button — the
+ * target flow itself (crisp's own record-page-layout editor) is a separate,
+ * unbuilt surface; this only renders the row and its click. */
+export function ObjectAppearanceSection({ onConfigureRecordPage, titleLabel: titleLabelProp, rowLabel: rowLabelProp, rowDescriptionLabel: rowDescriptionLabelProp, actionLabel: actionLabelProp, }) {
+    const titleLabel = useCrispMessage(titleLabelProp, "Appearance");
+    const rowLabel = useCrispMessage(rowLabelProp, "Record page layout");
+    const rowDescriptionLabel = useCrispMessage(rowDescriptionLabelProp, "Configure tabs, widgets, and layout for this object's record pages");
+    const actionLabel = useCrispMessage(actionLabelProp, "Configure record page");
+    return (_jsx(SettingsSection, { title: titleLabel, children: _jsxs("div", { className: "crisp-objectsettings-fieldrow", style: { alignItems: "center" }, children: [_jsxs("div", { children: [_jsx("div", { style: { fontWeight: 500 }, children: rowLabel }), _jsx("p", { className: "crisp-objectsettings-subtitle", children: rowDescriptionLabel })] }), onConfigureRecordPage && (_jsx("button", { type: "button", className: "crisp-objectsettings-filterbtn", style: { justifySelf: "end" }, onClick: onConfigureRecordPage, children: actionLabel }))] }) }));
+}
+ObjectAppearanceSection.displayName = "ObjectAppearanceSection";
+/**
+ * The Attributes tab's table (crisp#637, P-124, verified live): H2 +
+ * "Create attribute", a search+Filter row, then a DataTable of every
+ * attribute — drag handle (via `DataTable`'s own `onRowsReorder`) + type
+ * icon + name, Data type, a constraint label, and System (grey)/Enriched
+ * (purple) property badges. Row height is DataTable's own 36px; Attio's
+ * measures 40px here — a real, small divergence left to DataTable's owner
+ * rather than patched locally (see the PR).
+ */
+export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchiveAttribute, onReorder, onCreateAttribute, title: titleProp, subtitle: subtitleProp, createLabel: createLabelProp, searchPlaceholder: searchPlaceholderProp, filterLabel: filterLabelProp, nameColumnLabel: nameColumnLabelProp, dataTypeColumnLabel: dataTypeColumnLabelProp, constraintsColumnLabel: constraintsColumnLabelProp, propertiesColumnLabel: propertiesColumnLabelProp, systemLabel: systemLabelProp, enrichedLabel: enrichedLabelProp, editLabel: editLabelProp, archiveLabel: archiveLabelProp, rowActions, emptyLabel, }) {
+    const title = useCrispMessage(titleProp, "Attributes");
+    const subtitle = useCrispMessage(subtitleProp, "Modify and add object attributes");
+    const createLabel = useCrispMessage(createLabelProp, "Create attribute");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search attributes");
+    const filterLabel = useCrispMessage(filterLabelProp, "Filter");
+    const nameColumnLabel = useCrispMessage(nameColumnLabelProp, "Name");
+    const dataTypeColumnLabel = useCrispMessage(dataTypeColumnLabelProp, "Data type");
+    const constraintsColumnLabel = useCrispMessage(constraintsColumnLabelProp, "Constraints");
+    const propertiesColumnLabel = useCrispMessage(propertiesColumnLabelProp, "Properties");
+    const systemLabel = useCrispMessage(systemLabelProp, "System");
+    const enrichedLabel = useCrispMessage(enrichedLabelProp, "Enriched");
+    const editLabel = useCrispMessage(editLabelProp, "Edit");
+    const archiveLabel = useCrispMessage(archiveLabelProp, "Archive");
+    const [query, setQuery] = React.useState("");
+    const filtered = React.useMemo(() => {
+        if (!query.trim())
+            return attributes;
+        const q = query.trim().toLowerCase();
+        return attributes.filter((a) => String(a.name ?? "")
+            .toLowerCase()
+            .includes(q));
+    }, [attributes, query]);
+    const columns = React.useMemo(() => [
+        {
+            key: "name",
+            header: nameColumnLabel,
+            render: (_v, row) => (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                            display: "inline-flex",
+                            color: "var(--crisp-fg-muted, inherit)",
+                        }, children: row.icon }), row.name] })),
+        },
+        { key: "dataType", header: dataTypeColumnLabel },
+        {
+            key: "constraint",
+            header: constraintsColumnLabel,
+            render: (_v, row) => row.constraint ?? null,
+        },
+        {
+            key: "properties",
+            header: propertiesColumnLabel,
+            render: (_v, row) => (_jsxs("span", { style: { display: "flex", gap: 6 }, children: [row.system && (_jsx(Badge, { tone: "neutral", size: "small", children: systemLabel })), row.enriched && (_jsx(Badge, { tone: "purple", size: "small", children: enrichedLabel }))] })),
+        },
+        {
+            key: "actions",
+            header: "",
+            align: "right",
+            render: (_v, row) => (_jsx(Menu, { align: "end", trigger: _jsx("button", { type: "button", "aria-label": `${row.name}`, style: {
+                        display: "inline-flex",
+                        border: "none",
+                        background: "none",
+                        cursor: "pointer",
+                        color: "inherit",
+                        padding: 4,
+                    }, children: _jsx(MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : (_jsxs(_Fragment, { children: [_jsx(MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), _jsx(MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
+        },
+    ], [
+        nameColumnLabel,
+        dataTypeColumnLabel,
+        constraintsColumnLabel,
+        propertiesColumnLabel,
+        systemLabel,
+        enrichedLabel,
+        editLabel,
+        archiveLabel,
+        onEditAttribute,
+        onArchiveAttribute,
+        rowActions,
+    ]);
+    return (_jsx("div", { className: objectsettingsRecipe(), children: _jsxs("div", { className: "crisp-objectsettings-page", children: [_jsxs("div", { className: "crisp-objectsettings-head", children: [_jsxs("div", { className: "crisp-objectsettings-heading", children: [_jsx("h2", { className: "crisp-objectsettings-title", style: { fontSize: 16, lineHeight: "20px" }, children: title }), _jsx("p", { className: "crisp-objectsettings-subtitle", children: subtitle })] }), onCreateAttribute && (_jsx("button", { type: "button", className: "crisp-objectsettings-filterbtn", onClick: onCreateAttribute, children: createLabel }))] }), _jsxs("div", { className: "crisp-objectsettings-toolbar", children: [_jsxs("span", { className: "crisp-objectsettings-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchPlaceholder })] }), _jsxs("button", { type: "button", className: "crisp-objectsettings-filterbtn", children: [_jsx(SlidersHorizontal, { size: 14 }), filterLabel] })] }), _jsx(DataTable, { columns: columns, data: filtered, onRowClick: onOpenAttribute ? (row) => onOpenAttribute(row.id) : undefined, onRowsReorder: onReorder, empty: emptyLabel })] }) }));
+}
+AttributesTable.displayName = "AttributesTable";
+/** Attio's own "Type" group, verbatim (crisp#637, P-126) — icons are
+ * crisp's Lucide choices, not Attio's proprietary set (golden rule 4). */
+export const ATTRIBUTE_TYPE_OPTIONS = [
+    { value: "checkbox", label: "Checkbox", icon: CheckSquare },
+    { value: "currency", label: "Currency", icon: DollarSign },
+    { value: "date", label: "Date", icon: Calendar },
+    { value: "location", label: "Location", icon: MapPin },
+    { value: "multiselect", label: "Multi-select", icon: ListChecks },
+    { value: "number", label: "Number", icon: Hash },
+    { value: "phone", label: "Phone Number", icon: Phone },
+    { value: "rating", label: "Rating", icon: Star },
+    { value: "record", label: "Record", icon: FileText },
+    { value: "relationship", label: "Relationship", icon: Link2, badge: "Pro" },
+    { value: "select", label: "Select", icon: ListChecks },
+    { value: "status", label: "Status", icon: Flag },
+    { value: "text", label: "Text", icon: TypeIcon },
+    { value: "timestamp", label: "Timestamp", icon: Clock },
+    { value: "user", label: "User", icon: UserIcon },
+];
+/** Attio's own "AI Autofill" group, verbatim (crisp#637, P-126) — opt in via
+ * `AttributeTypeSelect`'s `aiAutofillOptions`; omitted by default, since a
+ * consumer with no autofill backend of its own (GRC) has nothing to wire
+ * these to. */
+export const ATTRIBUTE_AI_AUTOFILL_OPTIONS = [
+    { value: "classify-record", label: "Classify record", icon: Sparkles },
+    { value: "prompt-completion", label: "Prompt completion", icon: Sparkles },
+    { value: "summarize-record", label: "Summarize record", icon: Sparkles },
+    { value: "web-agent", label: "Web agent", icon: Sparkles },
+];
+function toSelectOption(o, group) {
+    const Icon = o.icon;
+    return {
+        value: o.value,
+        keywords: o.label,
+        group,
+        label: (_jsxs("span", { className: "crisp-objectsettings-typeoption", children: [_jsx(Icon, { size: 14 }), _jsx("span", { className: "crisp-objectsettings-typeoption-label", children: o.label }), o.badge != null && (_jsx("span", { className: "crisp-objectsettings-typeoption-badge", children: o.badge }))] })),
+    };
+}
+/** The "Attribute Type" dropdown (crisp#637, P-126, verified live): a
+ * searchable, grouped `Select` — reused as-is, not a new picker primitive.
+ * Grouping and the per-item trailing "Pro" badge are composed through
+ * `Select`'s existing `group` field and rich `label` ReactNode. */
+export function AttributeTypeSelect({ value, onValueChange, options = ATTRIBUTE_TYPE_OPTIONS, aiAutofillOptions, aiAutofillGroupLabel: aiAutofillGroupLabelProp, typeGroupLabel: typeGroupLabelProp, searchPlaceholder: searchPlaceholderProp, id, }) {
+    const aiAutofillGroupLabel = useCrispMessage(aiAutofillGroupLabelProp, "AI Autofill");
+    const typeGroupLabel = useCrispMessage(typeGroupLabelProp, "Type");
+    const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search attribute types...");
+    const selectOptions = React.useMemo(() => {
+        const ai = (aiAutofillOptions ?? []).map((o) => toSelectOption(o, aiAutofillGroupLabel));
+        const type = options.map((o) => toSelectOption(o, typeGroupLabel));
+        return [...ai, ...type];
+    }, [aiAutofillOptions, options, aiAutofillGroupLabel, typeGroupLabel]);
+    return (_jsx(Select, { id: id, options: selectOptions, value: value, onValueChange: onValueChange, searchable: true, searchPlaceholder: searchPlaceholder, width: "full" }));
+}
+AttributeTypeSelect.displayName = "AttributeTypeSelect";
+/**
+ * "Create attribute" (crisp#637, P-125, verified live): Attribute Type
+ * select (defaults to Text) + Name (autofocused) + Description (optional)
+ * + an AI-autofill switch row, footer Cancel/Create. Built on `FormDialog`
+ * in its plain (non-`createMode`) shape — Attio's own footer here has a
+ * real Cancel button, unlike the record-create dialog `createMode` models
+ * (crisp#548), so `createMode` would be the wrong fit even though the
+ * button carries the same ⌘↵ hint; that hint is rendered locally instead.
+ */
+export function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillTypeOptions, name, onNameChange, description, onDescriptionChange, aiAutofillEnabled = false, onAiAutofillChange, onSubmit, onClose, busy, error, title: titleProp, attributeTypeLabel: attributeTypeLabelProp, nameLabel: nameLabelProp, descriptionLabel: descriptionLabelProp, descriptionPlaceholder: descriptionPlaceholderProp, aiAutofillLabel: aiAutofillLabelProp, setUpAiAutofillLabel: setUpAiAutofillLabelProp, createLabel: createLabelProp, }) {
+    const title = useCrispMessage(titleProp, "Create attribute");
+    const attributeTypeLabel = useCrispMessage(attributeTypeLabelProp, "Attribute Type");
+    const nameLabel = useCrispMessage(nameLabelProp, "Name");
+    const descriptionLabel = useCrispMessage(descriptionLabelProp, "Description");
+    const descriptionPlaceholder = useCrispMessage(descriptionPlaceholderProp, "Add a description for this attribute");
+    const aiAutofillLabel = useCrispMessage(aiAutofillLabelProp, "AI autofill");
+    const setUpAiAutofillLabel = useCrispMessage(setUpAiAutofillLabelProp, "Set up AI autofill");
+    const createLabel = useCrispMessage(createLabelProp, "Create attribute");
+    const switchId = React.useId();
+    const nameId = React.useId();
+    return (_jsxs(FormDialog, { title: title, submitLabel: _jsxs(_Fragment, { children: [createLabel, _jsxs("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: objectsettingsRecipe(), children: [_jsx(FormField, { label: attributeTypeLabel, children: _jsx(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), _jsx(FormField, { label: nameLabel, htmlFor: nameId, children: _jsx(Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: descriptionLabel, optional: true, children: _jsx(Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), _jsxs("div", { className: "crisp-objectsettings-aiautofill", children: [_jsx("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), _jsxs("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { children: setUpAiAutofillLabel }), _jsx(Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
+}
+CreateAttributeDialog.displayName = "CreateAttributeDialog";
+/**
+ * This folder holds several components (`ObjectsList`, `ObjectDetailPage`,
+ * `AttributesTable`, `CreateAttributeDialog`, …), not one named after the
+ * slug — unlike every other product dir, whose docs `<ManualInstallation>`
+ * resolves an import binding from the folder slug ("avatargroup" →
+ * `AvatarGroup`) by reading this file's exports. This alias exists only so
+ * that resolver finds a match for "objectsettings"; consumers should import
+ * the real names above, never this one.
+ */
+export const ObjectSettings = ObjectsList;

package/dist/esm/product/objectsettings/objectsettings.recipe.js

@@ -0,0 +1,62 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/data/objects and
+// .../objects/companies/{general,attributes} (crisp#637, P-122/P-123/P-124/
+// P-125/P-126). Values with no matching scale token are one-off literals,
+// same precedent as authshell's own 20px title (crisp#637 golden rule 3):
+// the 24/600/28/-0.48 page title, the 12px/16px badge dot sizes, and the
+// 30% squircle radius on the object-icon tile.
+const config = defineRecipe({
+    name: "objectsettings",
+    base: `& .crisp-objectsettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; }
+    & .crisp-objectsettings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: ${c.space["4"]}; }
+    & .crisp-objectsettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; min-width: 0; }
+    & .crisp-objectsettings-title { display: flex; align-items: center; gap: ${c.space["2"]}; font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-objectsettings-subtitle { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; margin: 0; }
+
+    & .crisp-objectsettings-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-objectsettings-search { display: flex; align-items: center; flex: 1; gap: ${c.space["1.5"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2.5"]}; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgMuted}; transition: box-shadow .15s; }
+    & .crisp-objectsettings-search:focus-within { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-objectsettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
+    & .crisp-objectsettings-search input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2.5"]} 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.lg}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-objectsettings-filterbtn:hover { background: ${c.bgRaised}; }
+
+    /* Object / attribute icon tile — Attio's own squircle (measured
+       border-radius: 30%, not a scale token: it's a proportional radius
+       tied to the tile's own size, unlike every other radius crisp uses,
+       which is a fixed px). */
+    & .crisp-objectsettings-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 30%; color: ${c.fgOnBrand}; }
+    & .crisp-objectsettings-icon--lg { width: 48px; height: 48px; border-radius: 16px; }
+
+    /* "Standard"/"Custom" type badge and the muted "No records" cell —
+       plain text, not a Badge pill (measured: transparent background). */
+    & .crisp-objectsettings-typebadge { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }
+    & .crisp-objectsettings-muted { color: ${c.fgMuted}; }
+
+    /* Attribute-type option row (icon + label + optional trailing badge),
+       composed as a Select option's \`label\` ReactNode. */
+    & .crisp-objectsettings-typeoption { display: flex; align-items: center; gap: ${c.space["2"]}; width: 100%; min-width: 0; }
+    & .crisp-objectsettings-typeoption-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-objectsettings-typeoption-badge { flex-shrink: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgBrandSoft}; }
+
+    /* Create-attribute dialog's AI-autofill row and the submit button's
+       ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
+       .crisp-dialog-submit-key, kept local rather than reaching into
+       another component's scoped classes). */
+    & .crisp-objectsettings-aiautofill { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .crisp-objectsettings-aiautofill-label { font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-objectsettings-aiautofill-row { display: flex; align-items: center; gap: ${c.space["2"]}; height: ${c.size.menuRow}; padding: 0 ${c.space["2.5"]}; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderDefault}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; cursor: pointer; }
+    & .crisp-objectsettings-aiautofill-row > svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    & .crisp-objectsettings-aiautofill-row > span { flex: 1; }
+    & .crisp-objectsettings-kbd { display: inline-flex; align-items: center; gap: ${c.space["1"]}; margin-inline-start: ${c.space["1"]}; }
+    & .crisp-objectsettings-kbd kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: inherit; font-family: inherit; font-style: normal; font-size: 10px; }
+
+    & .crisp-objectsettings-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: ${c.space["4"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const objectsettingsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/recordpage/recordpage.recipe.js

@@ -6,6 +6,14 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // column (transparent, border-right) and a flexible main area whose tab bar
 // (14/500 labels over a sliding ink underline) switches content — Overview shows
 // a bordered Highlights stat-grid and an Activity feed.
+//
+// `.crisp-recordpage-panel`'s own `padding-top` (c.space["4"], 16px) was
+// dropped (your-moon/crisp#588): this panel is only ever rendered as Tabs'
+// own children (every branch of `builtinPanel` in recordpage.tsx, all fed to
+// `<Tabs>` below), so it sat inside `.crisp-tabs-panel`, which now carries
+// its own measured 32px top-inset by default — keeping both would have
+// stacked to 48px. Caught by tracing every consumer of `Tabs` before
+// shipping its new default, not by a screenshot.
 const config = defineRecipe({
     name: "recordpage",
     base: `
@@ -125,7 +133,8 @@ const config = defineRecipe({
 
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${c.space["3"]} ${c.space["5"]}; }
 
-    & .crisp-recordpage-panel { padding-top: ${c.space["4"]}; display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    /* no padding-top: Tabs' own panel supplies it now (#588) */
+    & .crisp-recordpage-panel { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
     & .crisp-recordpage-card { border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius["2xl"]}; background: ${c.bgSurface}; overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; letter-spacing: -0.14px; color: ${c.fgPrimary}; padding: ${c.space["3"]} ${c.space["3"]} ${c.space["2"]}; }
     & .crisp-recordpage-hl-card { border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius["2xl"]}; overflow: hidden; }

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

@@ -1,5 +1,5 @@
 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, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plus, Star, Tag, Trash2, TrendingUp, Users, Workflow, X, } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, 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";
@@ -8,15 +8,67 @@ 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 { 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.
+ */
+function ThLabel({ label }) {
+    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.
+    return (_jsx(Tooltip, { content: label, asChild: true, 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"]);
@@ -100,6 +152,8 @@ export const recordsTableLabels = {
     setRecordPlaceholder: "Set a record…",
     noRecords: "No records yet",
     untitled: "Untitled",
+    importCsv: "Import CSV",
+    connectDataSource: "Connect data source",
     agg: {
         none: "None",
         count: "Count all",
@@ -111,6 +165,9 @@ export const recordsTableLabels = {
     },
     op: {
         contains: "contains",
+        doesnotcontain: "does not contain",
+        startswith: "starts with",
+        endswith: "ends with",
         is: "is",
         isnot: "is not",
         empty: "is empty",
@@ -137,8 +194,17 @@ const compact = new Intl.NumberFormat("en", {
 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";
+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);
@@ -152,6 +218,12 @@ function matchesFilter(col, row, cond) {
         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
@@ -433,7 +505,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * 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, ...rest }) {
+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
@@ -1101,7 +1173,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 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("span", { className: "crisp-recordstable-th-label", children: col.label }), _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}` &&
+                                                            : 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 }), _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);
@@ -1170,9 +1242,19 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                             }, 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, { 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
+                                        }), _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(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : (_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 }), _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 &&
+                                : `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 }), _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: "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 = [