@crisp-ui-kit/crisp 0.54.3 → 0.54.4

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/taskstable/taskstable.recipe.js

@@ -26,7 +26,16 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; min-width: 0; }
 
     & .crisp-taskstable-row { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
-    & .crisp-taskstable-cell { display: flex; align-items: center; min-width: 0; }
+    /* #642: measured live -- title, due date and assignee name are ALL
+       14px/500 on Attio's own Tasks page. Only -title/-due set their own
+       font-size (and only -title its own weight), so an unstyled consumer
+       slot (a plain PersonChip/RecordChip name span with no font-size of
+       its own) fell through to the browser/body default, 16px/400. Set
+       the ambient font here so it cascades to any slot content that
+       doesn't override it -- -title/-due's own declarations still apply,
+       unchanged, they're just now redundant with this baseline rather
+       than the only source of it. */
+    & .crisp-taskstable-cell { display: flex; align-items: center; min-width: 0; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; }
 
     & .crisp-taskstable-check { appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: ${tokens_1.contract.radius.full}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s; }
     & .crisp-taskstable-check:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 30%, transparent); }

package/dist/comments.css

@@ -0,0 +1,80 @@
+.crisp-comments {
+  display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%; background: var(--crisp-bg-surface); border-inline-start: 1px solid var(--crisp-border-subtle); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    & * { box-sizing: border-box; }
+    & .crisp-comments-head { display: flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; height: 49px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); }
+    & .crisp-comments-headbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-headbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-comments-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    & .crisp-comments-title { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-comments-breadcrumb { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-comments-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-comments-body--pad-top { padding-top: var(--crisp-space-3); }
+    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body two lines below. Hover actions fade in flush with the name line. */
+    & .crisp-comments-row { position: relative; display: flex; gap: var(--crisp-space-1-5); }
+    & .crisp-comments-row-main { flex: 1; min-width: 0; }
+    & .crisp-comments-row-head { display: flex; align-items: baseline; gap: var(--crisp-space-1-5); height: 20px; }
+    & .crisp-comments-author { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-comments-time { font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; }
+    & .crisp-comments-resolved-label { display: flex; align-items: center; gap: var(--crisp-space-1); margin-bottom: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-comments-body-text { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+    /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
+    & .crisp-comments-row-actions { position: absolute; top: 0; inset-inline-end: 0; display: flex; opacity: 0; pointer-events: none; background: var(--crisp-bg-surface); }
+    & .crisp-comments-row:hover .crisp-comments-row-actions, & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
+    & .crisp-comments-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-comments-action[data-active] { color: var(--crisp-bg-brand-solid); }
+    /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill, padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
+    & .crisp-comments-reactions { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-1-5); }
+    & .crisp-comments-reaction { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 28px; padding: 4px 8px 4px 6px; border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); font-family: inherit; font-size: 12px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-comments-reaction[data-reacted] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
+    & .crisp-comments-reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--crisp-radius-md); background: transparent; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-row:hover .crisp-comments-reaction-add { opacity: 1; }
+    & .crisp-comments-reaction-add:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    /* Reply-in-thread view -- an indented block of replies below the root. */
+    & .crisp-comments-replies { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); padding-inline-start: var(--crisp-space-4); border-inline-start: 1px solid var(--crisp-border-subtle); }
+    & .crisp-comments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-size: var(--crisp-text-lg); }
+    /* Composer -- measured: 14px/20px body text, 16px gap above the reply/mention icon row, Comment button 84x32 padding 6px 10px radius 9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4 disabled / 1 enabled (no color/background change between the two). */
+    & .crisp-comments-composer { flex-shrink: 0; padding: var(--crisp-space-3) var(--crisp-space-4) var(--crisp-space-4); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-comments-field { min-height: 20px; max-height: 120px; overflow-y: auto; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); outline: none; white-space: pre-wrap; word-break: break-word; }
+    & .crisp-comments-field:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; }
+    & .crisp-comments-field:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    & .crisp-comments-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--crisp-space-4); }
+    & .crisp-comments-composer-tools { display: flex; align-items: center; gap: var(--crisp-space-1); }
+    & .crisp-comments-tool { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 45%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-comments-tool:hover { color: var(--crisp-fg-primary); }
+    /* Same fill/shadow as Button's own intent="primary" (crisp/button.recipe.ts) --
+       confirmed byte-identical against the live "Comment" button's computed box-shadow, so this reuses that literal rather than re-deriving it. 32px/radius.lg/6px-10px padding has no matching Button `size` yet (24/28/40 are the three that exist), so this stays hand-rolled instead of stretching one of those. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-on-brand); cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { background: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
+    /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding, elevation.floating -- a plain reuse of crisp's own Menu, so no rules
+       live here; kept as a comment for the record. */
+
+    /* An inserted "@mention" chip in the composer -- same shape as
+       RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here rather than re-derived since it's the same atomic-chip affordance. */
+    & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
+
+    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact chrome wasn't independently pixel-measured this pass (screenshot
+       capture broke mid-session), so this reuses Menu's already-measured floating-popover shell rather than a new value. */
+    & .crisp-comments-reactionpicker { width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
+    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
+    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    & .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
+    /* Row badge (CommentCountBadge) -- lives in its own class family so the grid lanes can drop it into a cell without pulling in the panel's
+       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
+       icon + 12px count text, both at 55% ink, replacing the dot. */
+    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
+    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
+    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-comments, .crisp-comments * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/comments.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface CommentsVariants {
+
+}
+
+export declare const commentsRecipe: RecipeFn<{  }>;