@crisp-ui-kit/crisp 0.57.0 → 0.57.2

package/dist/esm/product/memberssettings/memberssettings.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Filter, MoreHorizontal, Search, User, UsersRound } from "lucide-react";
+import * as React from "react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Badge } from "../../components/badge/index.js";
+import { Button } from "../../components/button/index.js";
+import { Dialog, DialogBody, DialogFooter } from "../../components/dialog/index.js";
+import { FormField } from "../../components/formfield/index.js";
+import { Select } from "../../components/select/index.js";
+import { useTablistKeyboard } from "../../components/tabs/tabs-keyboard.js";
+import { Textarea } from "../../components/textarea/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { memberssettingsRecipe } from "./memberssettings.recipe.js";
+/**
+ * Attio's "Members and teams" settings page (crisp#636, P-119/P-120):
+ * title + description, a Members/Teams segmented switcher, a
+ * search+Filter+Invite toolbar, and the members table (User/Role/Teams).
+ * Compose `InviteMembersDialog` alongside for the "Invite members" flow.
+ */
+export function MembersSettings({ members, searchValue, onSearchChange, onFilterClick, onInviteClick, onRowMenuClick, tab: tabProp, onTabChange, teamsContent, className, title = "Members and teams", description = "Manage workspace members and teams, set access levels, and invite new users.", learnMoreLabel = "Learn more", learnMoreHref = "#", membersTabLabel = "Members", teamsTabLabel = "Teams", tablistLabel = "Members and teams", searchPlaceholder = "Search name or email", filterLabel = "Filter", inviteLabel = "Invite members", userColumnLabel = "User", roleColumnLabel = "Role", teamsColumnLabel = "Teams", memberActionsLabel = "Member actions", noTeamsLabel = "No teams yet", ...rest }) {
+    const [internalTab, setInternalTab] = React.useState("members");
+    const tab = tabProp ?? internalTab;
+    const setTab = (next) => {
+        if (tabProp === undefined)
+            setInternalTab(next);
+        onTabChange?.(next);
+    };
+    const listRef = React.useRef(null);
+    const tabEntries = [
+        {
+            value: "members",
+            label: membersTabLabel,
+            icon: _jsx(User, { size: 16 }),
+        },
+        {
+            value: "teams",
+            label: teamsTabLabel,
+            icon: _jsx(UsersRound, { size: 16 }),
+        },
+    ];
+    const { onKeyDown, tabIndexFor } = useTablistKeyboard({
+        tabs: tabEntries,
+        active: tab,
+        select: (value) => setTab(value),
+        listRef,
+    });
+    return (_jsx("div", { className: memberssettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-memberssettings-page", children: [_jsxs("div", { className: "crisp-memberssettings-heading", children: [_jsx("h1", { className: "crisp-memberssettings-title", children: title }), _jsxs("p", { className: "crisp-memberssettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsx("div", { ref: listRef, className: "crisp-memberssettings-tabpair", role: "tablist", "aria-label": tablistLabel, onKeyDown: onKeyDown, children: tabEntries.map((t) => (_jsxs("button", { type: "button", role: "tab", "data-value": t.value, "aria-selected": tab === t.value, "data-selected": tab === t.value ? "" : undefined, tabIndex: tabIndexFor(t.value), className: "crisp-memberssettings-tab", onClick: () => setTab(t.value), children: [t.icon, t.label] }, t.value))) }), tab === "members" ? (_jsxs("div", { role: "tabpanel", "aria-label": membersTabLabel, children: [_jsxs("div", { className: "crisp-memberssettings-toolbar", children: [_jsxs("div", { className: "crisp-memberssettings-search", children: [_jsx(Search, { size: 16 }), _jsx("input", { value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), placeholder: searchPlaceholder })] }), _jsxs("button", { type: "button", className: "crisp-memberssettings-filterbtn", onClick: onFilterClick, children: [_jsx(Filter, { size: 14 }), filterLabel] }), _jsx("button", { type: "button", className: "crisp-memberssettings-invitebtn", onClick: onInviteClick, children: inviteLabel })] }), _jsx("div", { className: "crisp-memberssettings-table-wrap", children: _jsxs("table", { className: "crisp-memberssettings-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: userColumnLabel }), _jsx("th", { children: roleColumnLabel }), _jsx("th", { children: teamsColumnLabel })] }) }), _jsx("tbody", { children: members.map((m) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: "crisp-memberssettings-user", children: [m.avatarSrc ? (_jsx("img", { className: "crisp-memberssettings-avatarimg", src: m.avatarSrc, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "circle", tone: "brand", children: String(m.name).charAt(0) })), _jsxs("div", { className: "crisp-memberssettings-usermeta", children: [_jsxs("span", { children: [m.name, m.isYou ? " (You)" : ""] }), _jsx("span", { className: "crisp-memberssettings-useremail", children: m.email })] })] }) }), _jsx("td", { children: m.role === "Admin" ? (_jsx(Badge, { tone: "purple", children: m.role })) : (m.role) }), _jsxs("td", { children: [m.teams ?? "—", _jsx("button", { type: "button", className: "crisp-memberssettings-kebab", "aria-label": memberActionsLabel, onClick: () => onRowMenuClick?.(m), children: _jsx(MoreHorizontal, { size: 16 }) })] })] }, m.id))) })] }) })] })) : (_jsx("div", { role: "tabpanel", "aria-label": teamsTabLabel, children: teamsContent ?? (_jsx("div", { className: "crisp-memberssettings-teamspanel", children: noTeamsLabel })) }))] }) }));
+}
+MembersSettings.displayName = "MembersSettings";
+/**
+ * Attio's "Invite members" modal (crisp#636, P-120), measured live: 708px
+ * wide, a multi-email composer, an "Invite as" select (default Member) and
+ * an optional "Add to team" search-or-create select, footer "Send Invites".
+ */
+export function InviteMembersDialog({ open, onOpenChange, emails, onEmailsChange, inviteAs, onInviteAsChange, team, onTeamChange, teamOptions = [], onSend, title = "Invite members", emailsPlaceholder = "Send Invite to ...", inviteAsFieldLabel = "Invite as", memberOptionLabel = "Member — can edit", adminOptionLabel = "Admin — full access", addToTeamFieldLabel = "Add to team", addToTeamPlaceholder = "Search or create a team", sendLabel = "Send Invites ⌘⏎", ...rest }) {
+    const inviteAsOptions = [
+        { value: "member", label: memberOptionLabel },
+        { value: "admin", label: adminOptionLabel },
+    ];
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, title: title, width: 708, ...rest, children: [_jsxs(DialogBody, { children: [_jsx("div", { className: "crisp-memberssettings-invitefield", children: _jsx(Textarea, { value: emails, onChange: (e) => onEmailsChange(e.target.value), placeholder: emailsPlaceholder, rows: 3 }) }), _jsx(FormField, { label: inviteAsFieldLabel, children: _jsx(Select, { options: inviteAsOptions, value: inviteAs, onValueChange: (v) => onInviteAsChange(v) }) }), _jsx(FormField, { label: addToTeamFieldLabel, optional: true, children: _jsx(Select, { options: teamOptions, value: team, onValueChange: onTeamChange, placeholder: addToTeamPlaceholder, searchable: true }) })] }), _jsx(DialogFooter, { children: _jsx(Button, { intent: "primary", onClick: onSend, children: sendLabel }) })] }));
+}
+InviteMembersDialog.displayName = "InviteMembersDialog";

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

@@ -0,0 +1,80 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/members-and-teams
+// (crisp#636, P-119/P-120). The Members/Teams switcher is a plain segmented
+// pill toggle -- NOT the shared `Tabs` primitive, which always reserves an
+// 8px baseline strip and draws an ink underline (crisp#749's own tabs
+// recipe comment): this page's tab container measured a clean 28px, no
+// baseline, no underline, bg transparent. Reusing `Tabs` here would paint a
+// baseline Attio's own switcher doesn't have.
+const config = defineRecipe({
+    name: "memberssettings",
+    base: `& .crisp-memberssettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-memberssettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 28px; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: ${c.fgPrimary}; }
+    & .crisp-memberssettings-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: ${c.space["1.5"]}; height: 32px; padding: 0 ${c.space["2.5"]} 0 ${c.space["2"]}; border-radius: 9px; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgMuted}; }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-memberssettings-search input::placeholder { color: ${c.fgMuted}; }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: ${c.bgRaised}; }
+    /* your-moon/crisp#979: bgBrandContrast, not bgBrandSolid -- the accent
+       (#0298d9) only clears 3.23:1 with white; the darker sibling clears
+       4.5:1+, same fix already applied to Button/Badge/Avatar (#897) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${c.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, ${c.bgBrandContrast} 12%, transparent), 0 3px 6px -2px color-mix(in srgb, ${c.bgBrandContrast} 8%, transparent); color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 ${c.space["4"]}; text-align: start; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); border-bottom: 1px solid ${c.borderSubtle}; background: ${c.bgSurface}; }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 ${c.space["4"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: ${c.radius.full}; object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: ${c.space["2"]}; min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: ${c.text.lg}; font-weight: ${c.weight.regular}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: ${c.space["8"]} 0; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
+
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: ${c.space["1.5"]}; }
+    & .crisp-memberssettings-invitelabel { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const memberssettingsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/product/notificationssettings/index.js

@@ -0,0 +1 @@
+export { NotificationsSettings, } from "./notificationssettings.js";

package/dist/esm/product/notificationssettings/notificationssettings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bell, Mail, MonitorSmartphone } from "lucide-react";
+import { Checkbox } from "../../components/checkbox/index.js";
+import { Switch } from "../../components/switch/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { notificationssettingsRecipe } from "./notificationssettings.recipe.js";
+/**
+ * Attio's "Notifications" settings page (crisp#630, P-083): title +
+ * description, a "Daily digest" card (a single toggle row), and a
+ * "Collaboration notifications" matrix — a header row plus one row per
+ * event, each with an Email and an App checkbox. Measured live.
+ */
+export function NotificationsSettings({ dailyDigestEnabled, onDailyDigestChange, rows, onEmailChange, onAppChange, className, title = "Notifications", description = "Customize your notification settings to stay informed without being overwhelmed.", learnMoreLabel = "Learn more", learnMoreHref = "#", dailyDigestSectionTitle = "Daily digest", dailyDigestRowTitle = "Enable daily digest", dailyDigestRowDescription = "Includes tasks overdue and due today. Sent every morning if any tasks are due or overdue.", collaborationSectionTitle = "Collaboration notifications", notifyMeAboutLabel = "Notify me about", emailColumnLabel = "Email", appColumnLabel = "App", ...rest }) {
+    return (_jsx("div", { className: notificationssettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-notificationssettings-page", children: [_jsxs("div", { className: "crisp-notificationssettings-heading", children: [_jsx("h1", { className: "crisp-notificationssettings-title", children: title }), _jsxs("p", { className: "crisp-notificationssettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsxs("div", { className: "crisp-notificationssettings-section", children: [_jsx("h2", { className: "crisp-notificationssettings-sectiontitle", children: dailyDigestSectionTitle }), _jsxs("div", { className: "crisp-notificationssettings-digestcard", children: [_jsxs("div", { className: "crisp-notificationssettings-digesttext", children: [_jsx("span", { className: "crisp-notificationssettings-rowtitle", children: dailyDigestRowTitle }), _jsx("span", { className: "crisp-notificationssettings-rowdesc", children: dailyDigestRowDescription })] }), _jsx(Switch, { checked: dailyDigestEnabled, onCheckedChange: onDailyDigestChange, "aria-label": dailyDigestRowTitle })] })] }), _jsxs("div", { className: "crisp-notificationssettings-section", children: [_jsx("h2", { className: "crisp-notificationssettings-sectiontitle", children: collaborationSectionTitle }), _jsxs("div", { className: "crisp-notificationssettings-matrix", children: [_jsxs("div", { className: "crisp-notificationssettings-matrixhead", children: [_jsxs("span", { className: "crisp-notificationssettings-matrixhead-about", children: [_jsx(Bell, { size: 14 }), notifyMeAboutLabel] }), _jsxs("span", { className: "crisp-notificationssettings-matrixhead-col", children: [_jsx(Mail, { size: 14 }), emailColumnLabel] }), _jsxs("span", { className: "crisp-notificationssettings-matrixhead-col", children: [_jsx(MonitorSmartphone, { size: 14 }), appColumnLabel] })] }), rows.map((row) => (_jsxs("div", { className: "crisp-notificationssettings-matrixrow", children: [_jsxs("div", { className: "crisp-notificationssettings-matrixrow-about", children: [_jsx("span", { className: "crisp-notificationssettings-rowtitle", children: row.title }), _jsx("span", { className: "crisp-notificationssettings-rowdesc", children: row.description })] }), _jsx("div", { className: "crisp-notificationssettings-matrixrow-col", children: _jsx(Checkbox, { checked: row.email, onChange: (e) => onEmailChange(row.id, e.target.checked), "aria-label": `${emailColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) }), _jsx("div", { className: "crisp-notificationssettings-matrixrow-col", children: _jsx(Checkbox, { checked: row.app, onChange: (e) => onAppChange(row.id, e.target.checked), "aria-label": `${appColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) })] }, row.id)))] })] })] }) }));
+}
+NotificationsSettings.displayName = "NotificationsSettings";

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

@@ -0,0 +1,41 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/notifications
+// (crisp#630, P-083). Two sections, each a 16/600 heading over a bordered
+// 12px-radius card: "Daily digest" (a single 56px row, label 14/500 +
+// description 12/500/63%-opacity, a Switch trailing) and "Collaboration
+// notifications" (a header row -- 12/500/63%-opacity labels -- then 7 rows,
+// each 52px, a title/description pair on the left and two Checkboxes,
+// right-aligned under Email/App, per row).
+const config = defineRecipe({
+    name: "notificationssettings",
+    base: `& .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["6"]}; padding: ${c.space["2"]} ${c.space["3"]}; border: 1px solid ${c.borderSubtle}; border-radius: 12px; background: ${c.bgSurface}; }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-notificationssettings-rowtitle { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-notificationssettings-rowdesc { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid ${c.borderSubtle}; border-radius: 12px; overflow: hidden; background: ${c.bgSurface}; }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: ${c.space["3"]}; padding: 0 ${c.space["4"]}; height: 40px; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: ${c.space["1.5"]}; flex: 1; min-width: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; width: 64px; flex-shrink: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: ${c.space["3"]}; padding: ${c.space["2"]} ${c.space["4"]}; min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid ${c.borderSubtle}; }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: ${c.space["1"]}; flex: 1; min-width: 0; }
+    & .crisp-notificationssettings-matrixrow-col { display: flex; align-items: center; justify-content: center; width: 64px; flex-shrink: 0; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const notificationssettingsRecipe = resolveRecipe(config);
+export default config;

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

@@ -1,14 +1,16 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity as ActivityIcon, CalendarClock, ChevronDown, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
+import { Drawer } from "../../components/drawer/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
 import { Select } from "../../components/select/index.js";
 import { Spinner } from "../../components/spinner/index.js";
 import { Switch } from "../../components/switch/index.js";
 import { Tabs } from "../../components/tabs/index.js";
 import { cx, isRtlElement, useCrispComponentDefaults } from "../../core/index.js";
+import { CommentsPanel, } from "../comments/index.js";
 import { tagTone } from "./column.js";
 import { editableInputType, useEditableField } from "./editable-field.js";
 import { recordpageRecipe } from "./recordpage.recipe.js";
@@ -33,9 +35,16 @@ export const recordPageLabels = {
     breadcrumb: "Breadcrumb",
     editRecord: "Edit record",
     recordActions: "Record actions",
-    addToFavourites: "Add to favourites",
-    removeFromFavourites: "Remove from favourites",
+    // US spelling, matching Attio's own live text exactly (#621) — this string
+    // is shared with the entity header's favourite-star aria-label, so both
+    // read "favorites" now, not just the menu.
+    addToFavourites: "Add to favorites",
+    removeFromFavourites: "Remove from favorites",
     copyRecordLink: "Copy record link",
+    configurePage: "Configure page",
+    copyPageUrl: "Copy page URL",
+    copyRecordId: "Copy record ID",
+    mergeRecords: "Merge records",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
     // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
@@ -50,6 +59,8 @@ export const recordPageLabels = {
     composeEmail: "Compose email",
     askAttio: "Ask AI",
     addToList: "Add to list",
+    share: "Share",
+    comments: "Comments",
     noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
@@ -262,7 +273,14 @@ function NotesSection({ notes, onAdd, labels, }) {
     return (_jsxs("section", { children: [_jsx(SectionHead, { title: labels.tabs.notes, count: notes.length, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && (_jsx(Composer, { labels: labels, multiline: true, placeholder: labels.notePlaceholder, submitLabel: labels.saveNote, onCancel: () => setOpen(false), onSubmit: (t) => {
                     onAdd(t);
                     setOpen(false);
-                } })), notes.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => (_jsxs("div", { className: "crisp-recordpage-note", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), _jsxs("div", { className: "crisp-recordpage-note-body", children: [_jsxs("div", { className: "crisp-recordpage-note-head", children: [_jsx("span", { className: "crisp-recordpage-note-author", children: labels.you }), _jsx("span", { className: "crisp-recordpage-note-time", children: n.time })] }), _jsx("div", { className: "crisp-recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? (_jsx("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (
+            // #871: one line, not a two-row card -- measured live: avatar,
+            // then the note's own title and body run together inline, then a
+            // relative time at the far end of the SAME row. No author name at
+            // all (Attio's real preview never shows one here, only the note's
+            // own content) -- `labels.you` stays defined for a consumer that
+            // still wants it elsewhere, just unused in this exact spot now.
+            notes.map((n) => (_jsxs("div", { className: "crisp-recordpage-note", children: [_jsxs("span", { className: "crisp-recordpage-note-left", children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), n.title && (_jsx("span", { className: "crisp-recordpage-note-title", children: n.title })), _jsx("span", { className: "crisp-recordpage-note-text", children: n.text })] }), _jsx("span", { className: "crisp-recordpage-note-time", children: n.time })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
@@ -295,13 +313,51 @@ function EmptyCard({ icon, children, }) {
  * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
  * (also exported from this package).
  */
-export function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+export function RecordDetails({ record, columns, sections, onEdit, labels, className, resizable = false, width: controlledWidth, defaultWidth = DETAILS_DEFAULT_W, onWidthChange, minWidth = DETAILS_MIN_W, maxWidth = DETAILS_MAX_W, ...rest }) {
     const t = useRecordPageLabels(labels);
     const { editingKey, pendingKey, error, openEditing, closeEditing, commit } = useEditableField(onEdit);
     const [detailsOpen, setDetailsOpen] = React.useState(true);
     const [searchOpen, setSearchOpen] = React.useState(false);
     const [fieldQuery, setFieldQuery] = React.useState("");
     const [showAllValues, setShowAllValues] = React.useState(false);
+    // #930: controlled/uncontrolled width, same split as RecordPanel's own
+    // resizable width -- only read when `resizable`, same reasoning as
+    // RecordPanel's own (a non-resizing consumer has no business carrying
+    // width state at all).
+    const [internalWidth, setInternalWidth] = React.useState(defaultWidth);
+    const width = controlledWidth ?? internalWidth;
+    const setWidth = (next) => {
+        const clamped = Math.max(minWidth, Math.min(maxWidth, next));
+        if (controlledWidth === undefined)
+            setInternalWidth(clamped);
+        onWidthChange?.(clamped);
+    };
+    const [detailsResizing, setDetailsResizing] = React.useState(false);
+    const detailsDragRef = React.useRef(null);
+    const onDetailsResizeDown = (e) => {
+        // This column is a leading (left-docked) rail, the mirror image of
+        // RecordPanel's own trailing (right-docked) one -- a rightward pull
+        // grows it in LTR, the same direction RecordPage's own internal aside
+        // resize already uses (#212/#255).
+        detailsDragRef.current = {
+            x: e.clientX,
+            w: width,
+            dir: isRtlElement(e.currentTarget) ? -1 : 1,
+        };
+        setDetailsResizing(true);
+        e.target.setPointerCapture(e.pointerId);
+    };
+    const onDetailsResizeMove = (e) => {
+        const r = detailsDragRef.current;
+        if (!r)
+            return;
+        setWidth(r.w + r.dir * (e.clientX - r.x));
+    };
+    const onDetailsResizeUp = (e) => {
+        detailsDragRef.current = null;
+        setDetailsResizing(false);
+        e.target.releasePointerCapture(e.pointerId);
+    };
     const fields = columns.filter((col) => col.type !== "entity");
     const q = fieldQuery.trim().toLowerCase();
     const matches = (col) => !q || col.label.toLowerCase().includes(q);
@@ -338,7 +394,7 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
         groups = [{ title: undefined, fields: shown }];
     }
     const totalShown = groups.reduce((n, g) => n + g.fields.length, 0);
-    return (_jsxs("div", { className: cx("crisp-recordpage-section", className), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
+    return (_jsxs("div", { className: cx("crisp-recordpage-section", className), "data-resizable": resizable ? "" : undefined, style: resizable ? { width } : undefined, ...rest, children: [_jsxs("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? (_jsx("input", { 
                         // biome-ignore lint/a11y/noAutofocus: focusing the just-opened field search is expected
                         autoFocus: true, type: "text", className: "crisp-recordpage-fieldsearch", placeholder: t.searchPlaceholder, "aria-label": t.searchFields, value: fieldQuery, onChange: (e) => setFieldQuery(e.target.value), onKeyDown: (e) => {
                             if (e.key === "Escape") {
@@ -412,7 +468,13 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
                                 setSearchOpen(next);
                                 if (!next)
                                     setFieldQuery("");
-                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsx("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) })))] }));
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : (_jsx("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) }))), resizable && (_jsx("div", { className: "crisp-recordpage-detailresize", "data-active": detailsResizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(width), "aria-valuemin": minWidth, "aria-valuemax": maxWidth, tabIndex: 0, onPointerDown: onDetailsResizeDown, onPointerMove: onDetailsResizeMove, onPointerUp: onDetailsResizeUp, onKeyDown: (e) => {
+                    if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
+                        return;
+                    const rtl = isRtlElement(e.currentTarget);
+                    const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    setWidth(grow ? width + 16 : width - 16);
+                } }))] }));
 }
 RecordDetails.displayName = "RecordDetails";
 /**
@@ -423,7 +485,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, ...rest }) {
+export function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, onClose, closeLabel = "Close", onPrevious, previousRecordLabel = "Previous record", onNext, nextRecordLabel = "Next record", counterLabel, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
@@ -435,6 +497,11 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const [internalTasks, setInternalTasks] = React.useState([]);
     const notes = notesProp ?? internalNotes;
     const tasks = tasksProp ?? internalTasks;
+    // Comments follow the same controlled/self-contained duality (#864).
+    const [internalComments, setInternalComments] = React.useState([]);
+    const comments = commentsProp ?? internalComments;
+    const [commentsOpen, setCommentsOpen] = React.useState(false);
+    const me = currentUser ?? { id: "me", name: "You" };
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Drag-resizable left details column.
     const [detailsW, setDetailsW] = React.useState(DETAILS_DEFAULT_W);
@@ -593,6 +660,31 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
         }
         setInternalTasks((n) => n.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
     };
+    const postComment = (text, threadId) => {
+        if (commentsProp) {
+            onPostComment?.(text, threadId);
+            return;
+        }
+        if (threadId == null) {
+            setInternalComments((prev) => [
+                {
+                    id: nextId(),
+                    root: { id: nextId(), author: me, time: t.justNow, body: text },
+                },
+                ...prev,
+            ]);
+            return;
+        }
+        setInternalComments((prev) => prev.map((th) => th.id === threadId
+            ? {
+                ...th,
+                replies: [
+                    ...(th.replies ?? []),
+                    { id: nextId(), author: me, time: t.justNow, body: text },
+                ],
+            }
+            : th));
+    };
     // A small, plausible activity feed derived from the record's own fields.
     const domain = byKey.get("domain");
     const cats = byKey.get("categories");
@@ -649,7 +741,7 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", children: [_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] }), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), _jsx(MenuItem, { icon: _jsx(Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return (_jsxs("div", { className: recordpageRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? (_jsxs("div", { className: "crisp-recordpage-peekbar", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && (_jsxs("span", { className: "crisp-recordpage-peek-pager", children: [_jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: _jsx(ChevronUp, { size: 16, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && (_jsx("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : (_jsxs("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [_jsx("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), _jsx("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), _jsx("span", { className: "crisp-recordpage-crumb-name", children: name })] })), _jsxs("div", { className: "crisp-recordpage-actions", children: [_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: _jsx(MessageSquare, { size: 15, strokeWidth: 1.75 }) }), _jsxs("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [_jsx(Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && (_jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? (_jsx(Minimize2, { size: 15, strokeWidth: 1.75 })) : (_jsx(Maximize2, { size: 15, strokeWidth: 1.75 })) })), _jsxs(Menu, { align: "end", "aria-label": t.recordActions, trigger: _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [_jsx(MenuItem, { icon: _jsx(Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), _jsx(MenuItem, { icon: _jsx(Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), _jsx(MenuItem, { icon: _jsx(Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), _jsx(MenuSeparator, {}), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), _jsxs("div", { className: "crisp-recordpage-body", children: [_jsxs("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [_jsxs("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? (_jsx("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : (_jsx(Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), _jsx("span", { className: "crisp-recordpage-entity-name", children: name }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: _jsx(Pencil, { size: 15, strokeWidth: 1.75 }) }), _jsx("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: _jsx(Star, { size: 15, strokeWidth: 1.75 }) })] }), _jsxs("div", { className: "crisp-recordpage-quickactions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), _jsxs("button", { type: "button", className: "crisp-recordpage-compose", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => (_jsx("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: _jsx(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), _jsx(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), _jsxs("div", { className: "crisp-recordpage-section", children: [_jsx(SectionHead, { title: t.tabs.lists, action: _jsxs("button", { type: "button", className: "crisp-recordpage-addbtn", children: [_jsx(Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), _jsx("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), _jsx("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -661,6 +753,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
+                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -23,6 +23,21 @@ const config = defineRecipe({
     & * { box-sizing: border-box; }
 
     & .crisp-recordpage-topbar { display: flex; align-items: center; gap: ${c.space["2"]}; height: 44px; flex-shrink: 0; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    /* #624: expanding a peek to its full record keeps a hybrid header
+       (Close/Previous/Next/counter) instead of reverting to the plain
+       breadcrumb above -- measured live on a real expanded record: 49px
+       tall (not 44px), 8px/10px padding, same borderSubtle hairline. Same
+       tokens as product/recordpanel's own already-shipped toolbar, not
+       new values -- this is the same row, reused in a second component. */
+    & .crisp-recordpage-topbar[data-peek] { height: 49px; padding: ${c.space["2"]} ${c.space["2.5"]}; }
+    & .crisp-recordpage-peekbar { display: flex; align-items: center; }
+    & .crisp-recordpage-peek-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: transparent; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-peek-iconbtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-peek-pager { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-inline-start: ${c.space["3"]}; }
+    & .crisp-recordpage-peek-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: ${e.field}; color: ${c.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-recordpage-peek-navbtn:hover:not(:disabled) { background: ${c.bgRaised}; }
+    & .crisp-recordpage-peek-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    & .crisp-recordpage-peek-counter { margin-inline-start: ${c.space["3"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; }
     & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 ${c.space["1.5"]}; margin: 0 calc(-1 * ${c.space["1.5"]}) 0 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; cursor: pointer; }
     & .crisp-recordpage-crumb:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
@@ -42,6 +57,17 @@ const config = defineRecipe({
     & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
     & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, ${c.bgBrandSolid} 55%, transparent); }
+    /* #930: RecordDetails' own standalone resize handle -- same visible
+       hit-slop/line-highlight shape as .crisp-recordpage-resizer just above,
+       just absolutely positioned at the trailing edge instead of a 0-width
+       flex sibling, since RecordDetails always returns a single root (the
+       same internal-strip placement RecordPanel's own resize handle uses,
+       mirrored to the opposite edge -- this column is leading, RecordPanel
+       is trailing). */
+    & .crisp-recordpage-section[data-resizable] { position: relative; }
+    & .crisp-recordpage-detailresize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 9px; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-recordpage-detailresize::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 3px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .crisp-recordpage-detailresize:hover::after, & .crisp-recordpage-detailresize[data-active]::after { background: color-mix(in srgb, ${c.bgBrandSolid} 55%, transparent); }
     & .crisp-recordpage-entity { display: flex; align-items: center; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["1"]} ${c.space["2"]}; }
     & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: ${c.bgRaised}; }
     & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; letter-spacing: -0.3px; color: ${c.fgPrimary}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -175,12 +201,23 @@ const config = defineRecipe({
     & .crisp-recordpage-btn--primary { box-shadow: none; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
-    & .crisp-recordpage-note { display: flex; gap: ${c.space["2.5"]}; padding: ${c.space["2.5"]} 0; border-top: 1px solid ${c.borderSubtle}; }
-    & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
-    & .crisp-recordpage-note-head { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-bottom: ${c.space["0.5"]}; }
-    & .crisp-recordpage-note-author { font-size: ${c.text.md}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
-    & .crisp-recordpage-note-time { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
-    & .crisp-recordpage-note-text { font-size: ${c.text.lg}; color: ${c.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
+    /* #871: one bordered card per note (border-radius.xl, borderSubtle),
+       not a flush divider-list row -- measured live on a real populated
+       note: the whole row is flex space-between, avatar+title+body on the
+       left (its own flex, gap.2), the relative time alone on the right.
+       The real DOM nests an inner clickable button (padding 6/8, radius.md)
+       inside an outer card (padding 4px, radius.xl) -- collapsed into this
+       one non-interactive div's own combined padding (2.5/3) since crisp's
+       NotesSection has no click-to-open behaviour to justify the extra
+       layer. The 6px gap between stacked cards is NOT independently
+       measured (this workspace only ever had one real note to check) --
+       a judgement call off the existing space scale, not a live value. */
+    & .crisp-recordpage-note { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["3"]}; padding: ${c.space["2.5"]} ${c.space["3"]}; border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; }
+    & .crisp-recordpage-note + .crisp-recordpage-note { margin-top: ${c.space["1.5"]}; }
+    & .crisp-recordpage-note-left { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; }
+    & .crisp-recordpage-note-title { flex-shrink: 0; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-recordpage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-recordpage-note-time { flex-shrink: 0; font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
 
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: ${c.space["2"]}; padding: ${c.space["1.5"]} 0; border-top: 1px solid ${c.borderSubtle}; }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: ${c.text.lg}; color: ${c.fgPrimary}; padding-top: 1px; }

package/dist/esm/product/workspacegeneralsettings/index.js

@@ -0,0 +1 @@
+export { WorkspaceGeneralSettings, } from "./workspacegeneralsettings.js";

package/dist/esm/product/workspacegeneralsettings/workspacegeneralsettings.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import { Avatar } from "../../components/avatar/index.js";
+import { Button } from "../../components/button/index.js";
+import { FormField } from "../../components/formfield/index.js";
+import { Input } from "../../components/input/index.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../components/table/index.js";
+import { TextLink } from "../../components/textlink/index.js";
+import { workspacegeneralsettingsRecipe } from "./workspacegeneralsettings.recipe.js";
+/**
+ * Attio's Settings → Workspace → General page (crisp#638, P-128), measured
+ * live: a logo + Name/Slug section, an "Export workspace data" table, and a
+ * "Danger zone" delete-workspace row.
+ */
+export function WorkspaceGeneralSettings({ logoSrc, workspaceInitial, onUploadLogo, name, onNameChange, slug, onCopySlug, exports: exportRows, onStartExport, onDeleteWorkspace, className, title = "General", description = "Change the settings for your current workspace.", learnMoreLabel = "Learn more", learnMoreHref = "#", logoHelpText = "We only support PNGs, JPEGs and GIFs under 10MB", uploadLogoLabel = "Upload logo", nameFieldLabel = "Name", slugFieldLabel = "Slug", copySlugLabel = "Copy slug", exportSectionTitle = "Export workspace data", exportSectionDescription = "Exports are in CSV format and can be downloaded within 7 days", startExportLabel = "Start new export", typeColumnLabel = "Type", dateColumnLabel = "Date", noExportsLabel = "No exports yet", dangerSectionTitle = "Danger zone", deleteWorkspaceTitle = "Delete workspace", deleteWorkspaceWarning = "Once deleted, your workspace cannot be recovered", deleteWorkspaceLabel = "Delete workspace", ...rest }) {
+    return (_jsx("div", { className: workspacegeneralsettingsRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-workspacegeneralsettings-page", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-heading", children: [_jsx("h1", { className: "crisp-workspacegeneralsettings-title", children: title }), _jsxs("p", { className: "crisp-workspacegeneralsettings-desc", children: [description, " ", _jsx(TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-logorow", children: [logoSrc ? (_jsx("img", { src: logoSrc, alt: "", width: 48, height: 48, style: { borderRadius: "30%", objectFit: "cover" } })) : (_jsx(Avatar, { size: "xl", shape: "rounded", tone: "brand", children: workspaceInitial })), _jsxs("div", { className: "crisp-workspacegeneralsettings-logotext", children: [_jsx("span", { className: "crisp-workspacegeneralsettings-logohelp", children: logoHelpText }), _jsx(Button, { intent: "neutral", size: "sm", onClick: onUploadLogo, children: uploadLogoLabel })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-fieldrow", children: [_jsx(FormField, { label: nameFieldLabel, children: _jsx(Input, { value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: slugFieldLabel, children: _jsxs("div", { className: "crisp-workspacegeneralsettings-slugfield", children: [_jsx(Input, { value: slug, readOnly: true }), _jsx("button", { type: "button", className: "crisp-workspacegeneralsettings-copybtn", "aria-label": copySlugLabel, onClick: onCopySlug, children: _jsx(Copy, { size: 16 }) })] }) })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-sectionhead", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-sectionhead-text", children: [_jsx("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: exportSectionTitle }), _jsx("p", { className: "crisp-workspacegeneralsettings-desc", children: exportSectionDescription })] }), _jsx(Button, { intent: "neutral", size: "sm", onClick: onStartExport, children: startExportLabel })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: typeColumnLabel }), _jsx(TableHead, { children: dateColumnLabel })] }) }), _jsx(TableBody, { children: exportRows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 2, children: _jsx("div", { className: "crisp-workspacegeneralsettings-emptyrow", children: noExportsLabel }) }) })) : (exportRows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: row.type }), _jsx(TableCell, { children: row.date })] }, row.id)))) })] })] }), _jsxs("div", { className: "crisp-workspacegeneralsettings-section", children: [_jsx("h2", { className: "crisp-workspacegeneralsettings-sectiontitle", children: dangerSectionTitle }), _jsxs("div", { className: "crisp-workspacegeneralsettings-dangerrow", children: [_jsxs("div", { className: "crisp-workspacegeneralsettings-dangertext", children: [_jsx("span", { className: "crisp-workspacegeneralsettings-rowtitle", children: deleteWorkspaceTitle }), _jsx("span", { className: "crisp-workspacegeneralsettings-dangerwarning", children: deleteWorkspaceWarning })] }), _jsx(Button, { intent: "danger", size: "sm", onClick: onDeleteWorkspace, children: deleteWorkspaceLabel })] })] })] }) }));
+}
+WorkspaceGeneralSettings.displayName = "WorkspaceGeneralSettings";