@crisp-ui-kit/crisp 0.54.3 → 0.54.4

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

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

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

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

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

@@ -23,7 +23,16 @@ const config = defineRecipe({
     & .crisp-taskstable-colhead-cell { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
 
     & .crisp-taskstable-row { display: flex; align-items: center; gap: ${c.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: ${c.text.lg}; font-weight: ${c.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: ${c.radius.full}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.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, ${c.fgPrimary} 30%, transparent); }

package/dist/listpage.css

@@ -3,7 +3,14 @@
     & .crisp-listpage-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); }
     & .crisp-listpage-toolbar-lead { display: flex; align-items: center; gap: var(--crisp-space-2); }
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
-    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    /* #641: trailing (View settings / New) has to reach the toolbar's own
+       inline-end edge on its own -- the only thing pushing it there used
+       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       never renders. A bare margin-inline-start: auto here is safely
+       overridden by the more specific rule right below whenever count IS
+       present, so the two cases don't fight -- count's own auto margin
+       still does the pushing there, this one only fires when it's absent. */
+    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: var(--crisp-space-2); margin-inline-start: auto; }
     & .crisp-listpage-count + .crisp-listpage-toolbar-trail { margin-inline-start: var(--crisp-space-3); }
     & .crisp-listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-3) var(--crisp-space-3); }
     & .crisp-listpage-section-label { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/listpage.layered.css

@@ -4,7 +4,14 @@
     & .crisp-listpage-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); }
     & .crisp-listpage-toolbar-lead { display: flex; align-items: center; gap: var(--crisp-space-2); }
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
-    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    /* #641: trailing (View settings / New) has to reach the toolbar's own
+       inline-end edge on its own -- the only thing pushing it there used
+       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       never renders. A bare margin-inline-start: auto here is safely
+       overridden by the more specific rule right below whenever count IS
+       present, so the two cases don't fight -- count's own auto margin
+       still does the pushing there, this one only fires when it's absent. */
+    & .crisp-listpage-toolbar-trail { display: flex; align-items: center; gap: var(--crisp-space-2); margin-inline-start: auto; }
     & .crisp-listpage-count + .crisp-listpage-toolbar-trail { margin-inline-start: var(--crisp-space-3); }
     & .crisp-listpage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-3) var(--crisp-space-3); }
     & .crisp-listpage-section-label { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }

package/dist/objectsettings.css

@@ -0,0 +1,49 @@
+.crisp-objectsettings {
+  & .crisp-objectsettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); }
+    & .crisp-objectsettings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--crisp-space-4); }
+    & .crisp-objectsettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); min-width: 0; }
+    & .crisp-objectsettings-title { display: flex; align-items: center; gap: var(--crisp-space-2); font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-objectsettings-subtitle { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-objectsettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-objectsettings-search { display: flex; align-items: center; flex: 1; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-muted); transition: box-shadow .15s; }
+    & .crisp-objectsettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-objectsettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
+    & .crisp-objectsettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-objectsettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* 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: var(--crisp-fg-on-brand); }
+    & .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: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
+    & .crisp-objectsettings-muted { color: var(--crisp-fg-muted); }
+
+    /* 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: var(--crisp-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: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-soft); }
+    /* 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: var(--crisp-space-1-5); }
+    & .crisp-objectsettings-aiautofill-label { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-aiautofill-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-default); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-objectsettings-aiautofill-row > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-aiautofill-row > span { flex: 1; }
+    & .crisp-objectsettings-kbd { display: inline-flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: var(--crisp-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: var(--crisp-space-4); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-objectsettings, .crisp-objectsettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/objectsettings.d.ts

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

package/dist/objectsettings.layered.css

@@ -0,0 +1,51 @@
+@layer crisp-components {
+.crisp-objectsettings {
+  & .crisp-objectsettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); }
+    & .crisp-objectsettings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--crisp-space-4); }
+    & .crisp-objectsettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); min-width: 0; }
+    & .crisp-objectsettings-title { display: flex; align-items: center; gap: var(--crisp-space-2); font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-objectsettings-subtitle { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-objectsettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-objectsettings-search { display: flex; align-items: center; flex: 1; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-muted); transition: box-shadow .15s; }
+    & .crisp-objectsettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-objectsettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
+    & .crisp-objectsettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-objectsettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* 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: var(--crisp-fg-on-brand); }
+    & .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: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
+    & .crisp-objectsettings-muted { color: var(--crisp-fg-muted); }
+
+    /* 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: var(--crisp-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: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-soft); }
+    /* 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: var(--crisp-space-1-5); }
+    & .crisp-objectsettings-aiautofill-label { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-aiautofill-row { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); box-shadow: inset 0 0 0 1px var(--crisp-border-default); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-objectsettings-aiautofill-row > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-objectsettings-aiautofill-row > span { flex: 1; }
+    & .crisp-objectsettings-kbd { display: inline-flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: var(--crisp-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: var(--crisp-space-4); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-objectsettings, .crisp-objectsettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}