@crisp-ui-kit/crisp 0.54.2 → 0.54.4

package/dist/cjs/product/objectsettings/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectsettingsRecipe = exports.ObjectsList = exports.ObjectSettings = exports.ObjectGeneralSection = exports.ObjectDetailPage = exports.ObjectAppearanceSection = exports.CreateAttributeDialog = exports.AttributeTypeSelect = exports.AttributesTable = exports.ATTRIBUTE_TYPE_OPTIONS = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = void 0;
+var objectsettings_1 = require("./objectsettings");
+Object.defineProperty(exports, "ATTRIBUTE_AI_AUTOFILL_OPTIONS", { enumerable: true, get: function () { return objectsettings_1.ATTRIBUTE_AI_AUTOFILL_OPTIONS; } });
+Object.defineProperty(exports, "ATTRIBUTE_TYPE_OPTIONS", { enumerable: true, get: function () { return objectsettings_1.ATTRIBUTE_TYPE_OPTIONS; } });
+Object.defineProperty(exports, "AttributesTable", { enumerable: true, get: function () { return objectsettings_1.AttributesTable; } });
+Object.defineProperty(exports, "AttributeTypeSelect", { enumerable: true, get: function () { return objectsettings_1.AttributeTypeSelect; } });
+Object.defineProperty(exports, "CreateAttributeDialog", { enumerable: true, get: function () { return objectsettings_1.CreateAttributeDialog; } });
+Object.defineProperty(exports, "ObjectAppearanceSection", { enumerable: true, get: function () { return objectsettings_1.ObjectAppearanceSection; } });
+Object.defineProperty(exports, "ObjectDetailPage", { enumerable: true, get: function () { return objectsettings_1.ObjectDetailPage; } });
+Object.defineProperty(exports, "ObjectGeneralSection", { enumerable: true, get: function () { return objectsettings_1.ObjectGeneralSection; } });
+Object.defineProperty(exports, "ObjectSettings", { enumerable: true, get: function () { return objectsettings_1.ObjectSettings; } });
+Object.defineProperty(exports, "ObjectsList", { enumerable: true, get: function () { return objectsettings_1.ObjectsList; } });
+var objectsettings_recipe_1 = require("./objectsettings.recipe");
+Object.defineProperty(exports, "objectsettingsRecipe", { enumerable: true, get: function () { return objectsettings_recipe_1.objectsettingsRecipe; } });

package/dist/cjs/product/objectsettings/objectsettings.js

@@ -0,0 +1,365 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ObjectSettings = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
+exports.ObjectsList = ObjectsList;
+exports.ObjectDetailPage = ObjectDetailPage;
+exports.ObjectGeneralSection = ObjectGeneralSection;
+exports.ObjectAppearanceSection = ObjectAppearanceSection;
+exports.AttributesTable = AttributesTable;
+exports.AttributeTypeSelect = AttributeTypeSelect;
+exports.CreateAttributeDialog = CreateAttributeDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const badge_1 = require("../../components/badge");
+const datatable_1 = require("../../components/datatable");
+const formfield_1 = require("../../components/formfield");
+const input_1 = require("../../components/input");
+const menu_1 = require("../../components/menu");
+const select_1 = require("../../components/select");
+const switch_1 = require("../../components/switch");
+const tabs_1 = require("../../components/tabs");
+const textarea_1 = require("../../components/textarea");
+const core_1 = require("../../core");
+const formdialog_1 = require("../formdialog");
+const settingssection_1 = require("../settingssection");
+const objectsettings_recipe_1 = require("./objectsettings.recipe");
+/**
+ * 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.
+ */
+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 = (0, core_1.useCrispMessage)(titleProp, "Objects");
+    const subtitle = (0, core_1.useCrispMessage)(subtitleProp, "Modify and add objects in your workspace");
+    const newObjectLabel = (0, core_1.useCrispMessage)(newObjectLabelProp, "New custom object");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search objects");
+    const filterLabel = (0, core_1.useCrispMessage)(filterLabelProp, "Filter");
+    const objectColumnLabel = (0, core_1.useCrispMessage)(objectColumnLabelProp, "Object");
+    const typeColumnLabel = (0, core_1.useCrispMessage)(typeColumnLabelProp, "Type");
+    const recordsColumnLabel = (0, core_1.useCrispMessage)(recordsColumnLabelProp, "Records");
+    const attributesColumnLabel = (0, core_1.useCrispMessage)(attributesColumnLabelProp, "Attributes");
+    const noRecordsLabel = (0, core_1.useCrispMessage)(noRecordsLabelProp, "No records");
+    const editLabel = (0, core_1.useCrispMessage)(editLabelProp, "Edit");
+    const copyIdLabel = (0, core_1.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) => ((0, jsx_runtime_1.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-icon", style: { background: row.iconColor ?? "currentColor" }, children: row.icon }), row.name] })),
+        },
+        {
+            key: "typeLabel",
+            header: typeColumnLabel,
+            render: (_v, row) => ((0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-typebadge", children: row.typeLabel })),
+        },
+        {
+            key: "recordCount",
+            header: recordsColumnLabel,
+            align: "left",
+            render: (_v, row) => row.recordCount ? (row.recordCount) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-muted", children: noRecordsLabel })),
+        },
+        {
+            key: "attributeCount",
+            header: attributesColumnLabel,
+        },
+        {
+            key: "actions",
+            header: "",
+            align: "right",
+            render: (_v, row) => ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 14 }), onSelect: () => onEditObject?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onCopyObjectId?.(row.id), children: copyIdLabel })] })),
+        },
+    ], [
+        objectColumnLabel,
+        typeColumnLabel,
+        recordsColumnLabel,
+        attributesColumnLabel,
+        noRecordsLabel,
+        editLabel,
+        copyIdLabel,
+        onEditObject,
+        onCopyObjectId,
+        rowMenuLabel,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, objectsettings_recipe_1.objectsettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-head", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-objectsettings-title", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: subtitle })] }), onCreateObject && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-objectsettings-filterbtn", onClick: onCreateObject, children: newObjectLabel }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchPlaceholder })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-objectsettings-filterbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14 }), filterLabel] })] }), (0, jsx_runtime_1.jsx)(datatable_1.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.
+ */
+function ObjectDetailPage({ icon, iconColor, name, typeLabel, description, tab, defaultTab = "configuration", onTabChange, attributeCount, configurationLabel: configurationLabelProp, attributesLabel: attributesLabelProp, children, }) {
+    const configurationLabel = (0, core_1.useCrispMessage)(configurationLabelProp, "Configuration");
+    const attributesLabel = (0, core_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-page", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-objectsettings-head", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-heading", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "small", children: typeLabel }))] }), description != null && ((0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), (0, jsx_runtime_1.jsx)(tabs_1.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. */
+function ObjectGeneralSection({ pluralNoun, onPluralNounChange, singularNoun, onSingularNounChange, slug, slugEditable = false, onSlugChange, titleLabel: titleLabelProp, descriptionLabel: descriptionLabelProp, pluralLabel: pluralLabelProp, singularLabel: singularLabelProp, slugLabel: slugLabelProp, slugHelpLabel: slugHelpLabelProp, }) {
+    const titleLabel = (0, core_1.useCrispMessage)(titleLabelProp, "General");
+    const descriptionLabel = (0, core_1.useCrispMessage)(descriptionLabelProp, "Set words to describe a single and multiple objects of this type");
+    const pluralLabel = (0, core_1.useCrispMessage)(pluralLabelProp, "Plural noun");
+    const singularLabel = (0, core_1.useCrispMessage)(singularLabelProp, "Singular noun");
+    const slugLabel = (0, core_1.useCrispMessage)(slugLabelProp, "Slug");
+    const slugHelpLabel = (0, core_1.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 ((0, jsx_runtime_1.jsxs)(settingssection_1.SettingsSection, { title: titleLabel, description: descriptionLabel, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: pluralLabel, htmlFor: pluralId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: pluralId, value: pluralNoun, onChange: (e) => onPluralNounChange?.(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: singularLabel, htmlFor: singularId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: singularId, value: singularNoun, onChange: (e) => onSingularNounChange?.(e.target.value) }) })] }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: slugLabel, htmlFor: slugId, description: !slugEditable ? slugHelpLabel : undefined, children: (0, jsx_runtime_1.jsx)(input_1.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. */
+function ObjectAppearanceSection({ onConfigureRecordPage, titleLabel: titleLabelProp, rowLabel: rowLabelProp, rowDescriptionLabel: rowDescriptionLabelProp, actionLabel: actionLabelProp, }) {
+    const titleLabel = (0, core_1.useCrispMessage)(titleLabelProp, "Appearance");
+    const rowLabel = (0, core_1.useCrispMessage)(rowLabelProp, "Record page layout");
+    const rowDescriptionLabel = (0, core_1.useCrispMessage)(rowDescriptionLabelProp, "Configure tabs, widgets, and layout for this object's record pages");
+    const actionLabel = (0, core_1.useCrispMessage)(actionLabelProp, "Configure record page");
+    return ((0, jsx_runtime_1.jsx)(settingssection_1.SettingsSection, { title: titleLabel, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-fieldrow", style: { alignItems: "center" }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: 500 }, children: rowLabel }), (0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: rowDescriptionLabel })] }), onConfigureRecordPage && ((0, jsx_runtime_1.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).
+ */
+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 = (0, core_1.useCrispMessage)(titleProp, "Attributes");
+    const subtitle = (0, core_1.useCrispMessage)(subtitleProp, "Modify and add object attributes");
+    const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
+    const searchPlaceholder = (0, core_1.useCrispMessage)(searchPlaceholderProp, "Search attributes");
+    const filterLabel = (0, core_1.useCrispMessage)(filterLabelProp, "Filter");
+    const nameColumnLabel = (0, core_1.useCrispMessage)(nameColumnLabelProp, "Name");
+    const dataTypeColumnLabel = (0, core_1.useCrispMessage)(dataTypeColumnLabelProp, "Data type");
+    const constraintsColumnLabel = (0, core_1.useCrispMessage)(constraintsColumnLabelProp, "Constraints");
+    const propertiesColumnLabel = (0, core_1.useCrispMessage)(propertiesColumnLabelProp, "Properties");
+    const systemLabel = (0, core_1.useCrispMessage)(systemLabelProp, "System");
+    const enrichedLabel = (0, core_1.useCrispMessage)(enrichedLabelProp, "Enriched");
+    const editLabel = (0, core_1.useCrispMessage)(editLabelProp, "Edit");
+    const archiveLabel = (0, core_1.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) => ((0, jsx_runtime_1.jsxs)("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [(0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("span", { style: { display: "flex", gap: 6 }, children: [row.system && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "small", children: systemLabel })), row.enriched && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "purple", size: "small", children: enrichedLabel }))] })),
+        },
+        {
+            key: "actions",
+            header: "",
+            align: "right",
+            render: (_v, row) => ((0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `${row.name}`, style: {
+                        display: "inline-flex",
+                        border: "none",
+                        background: "none",
+                        cursor: "pointer",
+                        color: "inherit",
+                        padding: 4,
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) }), children: rowActions ? (rowActions(row)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onEditAttribute?.(row.id), children: editLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onArchiveAttribute?.(row.id), children: archiveLabel })] })) })),
+        },
+    ], [
+        nameColumnLabel,
+        dataTypeColumnLabel,
+        constraintsColumnLabel,
+        propertiesColumnLabel,
+        systemLabel,
+        enrichedLabel,
+        editLabel,
+        archiveLabel,
+        onEditAttribute,
+        onArchiveAttribute,
+        rowActions,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-head", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-heading", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-objectsettings-title", style: { fontSize: 16, lineHeight: "20px" }, children: title }), (0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: subtitle })] }), onCreateAttribute && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-objectsettings-filterbtn", onClick: onCreateAttribute, children: createLabel }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-toolbar", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchPlaceholder })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-objectsettings-filterbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14 }), filterLabel] })] }), (0, jsx_runtime_1.jsx)(datatable_1.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). */
+exports.ATTRIBUTE_TYPE_OPTIONS = [
+    { value: "checkbox", label: "Checkbox", icon: lucide_react_1.CheckSquare },
+    { value: "currency", label: "Currency", icon: lucide_react_1.DollarSign },
+    { value: "date", label: "Date", icon: lucide_react_1.Calendar },
+    { value: "location", label: "Location", icon: lucide_react_1.MapPin },
+    { value: "multiselect", label: "Multi-select", icon: lucide_react_1.ListChecks },
+    { value: "number", label: "Number", icon: lucide_react_1.Hash },
+    { value: "phone", label: "Phone Number", icon: lucide_react_1.Phone },
+    { value: "rating", label: "Rating", icon: lucide_react_1.Star },
+    { value: "record", label: "Record", icon: lucide_react_1.FileText },
+    { value: "relationship", label: "Relationship", icon: lucide_react_1.Link2, badge: "Pro" },
+    { value: "select", label: "Select", icon: lucide_react_1.ListChecks },
+    { value: "status", label: "Status", icon: lucide_react_1.Flag },
+    { value: "text", label: "Text", icon: lucide_react_1.Type },
+    { value: "timestamp", label: "Timestamp", icon: lucide_react_1.Clock },
+    { value: "user", label: "User", icon: lucide_react_1.User },
+];
+/** 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. */
+exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = [
+    { value: "classify-record", label: "Classify record", icon: lucide_react_1.Sparkles },
+    { value: "prompt-completion", label: "Prompt completion", icon: lucide_react_1.Sparkles },
+    { value: "summarize-record", label: "Summarize record", icon: lucide_react_1.Sparkles },
+    { value: "web-agent", label: "Web agent", icon: lucide_react_1.Sparkles },
+];
+function toSelectOption(o, group) {
+    const Icon = o.icon;
+    return {
+        value: o.value,
+        keywords: o.label,
+        group,
+        label: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-typeoption", children: [(0, jsx_runtime_1.jsx)(Icon, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-typeoption-label", children: o.label }), o.badge != null && ((0, jsx_runtime_1.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. */
+function AttributeTypeSelect({ value, onValueChange, options = exports.ATTRIBUTE_TYPE_OPTIONS, aiAutofillOptions, aiAutofillGroupLabel: aiAutofillGroupLabelProp, typeGroupLabel: typeGroupLabelProp, searchPlaceholder: searchPlaceholderProp, id, }) {
+    const aiAutofillGroupLabel = (0, core_1.useCrispMessage)(aiAutofillGroupLabelProp, "AI Autofill");
+    const typeGroupLabel = (0, core_1.useCrispMessage)(typeGroupLabelProp, "Type");
+    const searchPlaceholder = (0, core_1.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 ((0, jsx_runtime_1.jsx)(select_1.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.
+ */
+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 = (0, core_1.useCrispMessage)(titleProp, "Create attribute");
+    const attributeTypeLabel = (0, core_1.useCrispMessage)(attributeTypeLabelProp, "Attribute Type");
+    const nameLabel = (0, core_1.useCrispMessage)(nameLabelProp, "Name");
+    const descriptionLabel = (0, core_1.useCrispMessage)(descriptionLabelProp, "Description");
+    const descriptionPlaceholder = (0, core_1.useCrispMessage)(descriptionPlaceholderProp, "Add a description for this attribute");
+    const aiAutofillLabel = (0, core_1.useCrispMessage)(aiAutofillLabelProp, "AI autofill");
+    const setUpAiAutofillLabel = (0, core_1.useCrispMessage)(setUpAiAutofillLabelProp, "Set up AI autofill");
+    const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create attribute");
+    const switchId = React.useId();
+    const nameId = React.useId();
+    return ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.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.
+ */
+exports.ObjectSettings = ObjectsList;

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.objectsettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "objectsettings",
+    base: `& .crisp-objectsettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; }
+    & .crisp-objectsettings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-objectsettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; min-width: 0; }
+    & .crisp-objectsettings-title { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-objectsettings-subtitle { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; margin: 0; }
+
+    & .crisp-objectsettings-toolbar { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-objectsettings-search { display: flex; align-items: center; flex: 1; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; transition: box-shadow .15s; }
+    & .crisp-objectsettings-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-objectsettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-objectsettings-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2.5"]} 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.lg}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-objectsettings-filterbtn:hover { background: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgNeutralSoft}; }
+    & .crisp-objectsettings-muted { color: ${tokens_1.contract.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: ${tokens_1.contract.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: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-objectsettings-aiautofill-label { font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-objectsettings-aiautofill-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: ${tokens_1.contract.size.menuRow}; padding: 0 ${tokens_1.contract.space["2.5"]}; border-radius: ${tokens_1.contract.radius.md}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderDefault}; font-size: ${tokens_1.contract.text.lg}; color: ${tokens_1.contract.fgPrimary}; cursor: pointer; }
+    & .crisp-objectsettings-aiautofill-row > svg { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-objectsettings-aiautofill-row > span { flex: 1; }
+    & .crisp-objectsettings-kbd { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin-inline-start: ${tokens_1.contract.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: ${tokens_1.contract.space["4"]}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.objectsettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -9,6 +9,14 @@ const tokens_1 = require("../../tokens");
 // 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 = (0, core_1.defineRecipe)({
     name: "recordpage",
     base: `
@@ -128,7 +136,8 @@ const config = (0, core_1.defineRecipe)({
 
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["5"]}; }
 
-    & .crisp-recordpage-panel { padding-top: ${tokens_1.contract.space["4"]}; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    /* no padding-top: Tabs' own panel supplies it now (#588) */
+    & .crisp-recordpage-panel { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
     & .crisp-recordpage-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: ${tokens_1.contract.bgSurface}; overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.14px; color: ${tokens_1.contract.fgPrimary}; padding: ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["3"]} ${tokens_1.contract.space["2"]}; }
     & .crisp-recordpage-hl-card { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: ${tokens_1.contract.radius["2xl"]}; overflow: hidden; }