@crisp-ui-kit/crisp 0.57.1 → 0.57.3

package/dist/cjs/product/memberssettings/memberssettings.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MembersSettings = MembersSettings;
+exports.InviteMembersDialog = InviteMembersDialog;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const avatar_1 = require("../../components/avatar");
+const badge_1 = require("../../components/badge");
+const button_1 = require("../../components/button");
+const dialog_1 = require("../../components/dialog");
+const formfield_1 = require("../../components/formfield");
+const select_1 = require("../../components/select");
+const tabs_keyboard_1 = require("../../components/tabs/tabs-keyboard");
+const textarea_1 = require("../../components/textarea");
+const textlink_1 = require("../../components/textlink");
+const memberssettings_recipe_1 = require("./memberssettings.recipe");
+/**
+ * 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.
+ */
+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: (0, jsx_runtime_1.jsx)(lucide_react_1.User, { size: 16 }),
+        },
+        {
+            value: "teams",
+            label: teamsTabLabel,
+            icon: (0, jsx_runtime_1.jsx)(lucide_react_1.UsersRound, { size: 16 }),
+        },
+    ];
+    const { onKeyDown, tabIndexFor } = (0, tabs_keyboard_1.useTablistKeyboard)({
+        tabs: tabEntries,
+        active: tab,
+        select: (value) => setTab(value),
+        listRef,
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, memberssettings_recipe_1.memberssettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-memberssettings-title", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "crisp-memberssettings-desc", children: [description, " ", (0, jsx_runtime_1.jsx)(textlink_1.TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), (0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-memberssettings-tabpair", role: "tablist", "aria-label": tablistLabel, onKeyDown: onKeyDown, children: tabEntries.map((t) => ((0, jsx_runtime_1.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" ? ((0, jsx_runtime_1.jsxs)("div", { role: "tabpanel", "aria-label": membersTabLabel, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-toolbar", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 16 }), (0, jsx_runtime_1.jsx)("input", { value: searchValue, onChange: (e) => onSearchChange?.(e.target.value), placeholder: searchPlaceholder })] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-memberssettings-filterbtn", onClick: onFilterClick, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Filter, { size: 14 }), filterLabel] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-memberssettings-invitebtn", onClick: onInviteClick, children: inviteLabel })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-memberssettings-table-wrap", children: (0, jsx_runtime_1.jsxs)("table", { className: "crisp-memberssettings-table", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: userColumnLabel }), (0, jsx_runtime_1.jsx)("th", { children: roleColumnLabel }), (0, jsx_runtime_1.jsx)("th", { children: teamsColumnLabel })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: members.map((m) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-user", children: [m.avatarSrc ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-memberssettings-avatarimg", src: m.avatarSrc, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", tone: "brand", children: String(m.name).charAt(0) })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-memberssettings-usermeta", children: [(0, jsx_runtime_1.jsxs)("span", { children: [m.name, m.isYou ? " (You)" : ""] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-memberssettings-useremail", children: m.email })] })] }) }), (0, jsx_runtime_1.jsx)("td", { children: m.role === "Admin" ? ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "purple", children: m.role })) : (m.role) }), (0, jsx_runtime_1.jsxs)("td", { children: [m.teams ?? "—", (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-memberssettings-kebab", "aria-label": memberActionsLabel, onClick: () => onRowMenuClick?.(m), children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16 }) })] })] }, m.id))) })] }) })] })) : ((0, jsx_runtime_1.jsx)("div", { role: "tabpanel", "aria-label": teamsTabLabel, children: teamsContent ?? ((0, jsx_runtime_1.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".
+ */
+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 ((0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, width: 708, ...rest, children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-memberssettings-invitefield", children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { value: emails, onChange: (e) => onEmailsChange(e.target.value), placeholder: emailsPlaceholder, rows: 3 }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: inviteAsFieldLabel, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: inviteAsOptions, value: inviteAs, onValueChange: (v) => onInviteAsChange(v) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: addToTeamFieldLabel, optional: true, children: (0, jsx_runtime_1.jsx)(select_1.Select, { options: teamOptions, value: team, onValueChange: onTeamChange, placeholder: addToTeamPlaceholder, searchable: true }) })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "primary", onClick: onSend, children: sendLabel }) })] }));
+}
+InviteMembersDialog.displayName = "InviteMembersDialog";

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

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.memberssettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "memberssettings",
+    base: `& .crisp-memberssettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; font-family: ${tokens_1.contract.font.sans}; }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-memberssettings-desc { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; height: 28px; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-memberssettings-tab[data-selected] { color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSubtle}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 0 ${tokens_1.contract.space["2.5"]} 0 ${tokens_1.contract.space["2"]}; border-radius: 9px; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-memberssettings-search input::placeholder { color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${tokens_1.contract.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: ${tokens_1.contract.fgPrimary}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: ${tokens_1.contract.bgBrandContrast}; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, ${tokens_1.contract.bgBrandContrast} 12%, transparent), 0 3px 6px -2px color-mix(in srgb, ${tokens_1.contract.bgBrandContrast} 8%, transparent); color: ${tokens_1.contract.fgOnBrand}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.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 ${tokens_1.contract.borderSubtle}; overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 ${tokens_1.contract.space["4"]}; text-align: start; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 ${tokens_1.contract.space["4"]}; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: ${tokens_1.contract.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: ${tokens_1.contract.space["2"]}; min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.regular}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: ${tokens_1.contract.fgMuted}; cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: ${tokens_1.contract.bgRaised}; color: ${tokens_1.contract.fgPrimary}; }
+
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: ${tokens_1.contract.space["8"]} 0; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.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: ${tokens_1.contract.space["1.5"]}; }
+    & .crisp-memberssettings-invitelabel { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgMuted}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.memberssettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsSettings = void 0;
+var notificationssettings_1 = require("./notificationssettings");
+Object.defineProperty(exports, "NotificationsSettings", { enumerable: true, get: function () { return notificationssettings_1.NotificationsSettings; } });

package/dist/cjs/product/notificationssettings/notificationssettings.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsSettings = NotificationsSettings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const checkbox_1 = require("../../components/checkbox");
+const switch_1 = require("../../components/switch");
+const textlink_1 = require("../../components/textlink");
+const notificationssettings_recipe_1 = require("./notificationssettings.recipe");
+/**
+ * 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.
+ */
+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 ((0, jsx_runtime_1.jsx)("div", { className: (0, notificationssettings_recipe_1.notificationssettingsRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-page", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-heading", children: [(0, jsx_runtime_1.jsx)("h1", { className: "crisp-notificationssettings-title", children: title }), (0, jsx_runtime_1.jsxs)("p", { className: "crisp-notificationssettings-desc", children: [description, " ", (0, jsx_runtime_1.jsx)(textlink_1.TextLink, { href: learnMoreHref, children: learnMoreLabel })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-section", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-notificationssettings-sectiontitle", children: dailyDigestSectionTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-digestcard", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-digesttext", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowtitle", children: dailyDigestRowTitle }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowdesc", children: dailyDigestRowDescription })] }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: dailyDigestEnabled, onCheckedChange: onDailyDigestChange, "aria-label": dailyDigestRowTitle })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-section", children: [(0, jsx_runtime_1.jsx)("h2", { className: "crisp-notificationssettings-sectiontitle", children: collaborationSectionTitle }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrix", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixhead", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-about", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 14 }), notifyMeAboutLabel] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-col", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 14 }), emailColumnLabel] }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-notificationssettings-matrixhead-col", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MonitorSmartphone, { size: 14 }), appColumnLabel] })] }), rows.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixrow", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-notificationssettings-matrixrow-about", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowtitle", children: row.title }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-notificationssettings-rowdesc", children: row.description })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notificationssettings-matrixrow-col", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: row.email, onChange: (e) => onEmailChange(row.id, e.target.checked), "aria-label": `${emailColumnLabel}: ${typeof row.title === "string" ? row.title : row.id}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-notificationssettings-matrixrow-col", children: (0, jsx_runtime_1.jsx)(checkbox_1.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/cjs/product/notificationssettings/notificationssettings.recipe.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.notificationssettingsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "notificationssettings",
+    base: `& .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["6"]}; font-family: ${tokens_1.contract.font.sans}; }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["0.5"]}; }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.48px; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgMuted}; margin: 0; }
+
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; margin: 0; }
+
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["6"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["3"]}; border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 12px; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["1"]}; }
+    & .crisp-notificationssettings-rowtitle { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-notificationssettings-rowdesc { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid ${tokens_1.contract.borderSubtle}; border-radius: 12px; overflow: hidden; background: ${tokens_1.contract.bgSurface}; }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; padding: 0 ${tokens_1.contract.space["4"]}; height: 40px; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; flex: 1; min-width: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; width: 64px; flex-shrink: 0; font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: ${tokens_1.contract.space["3"]}; padding: ${tokens_1.contract.space["2"]} ${tokens_1.contract.space["4"]}; min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: ${tokens_1.contract.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: [],
+});
+exports.notificationssettingsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPage = exports.RecordDetails = exports.useEditableField = exports.editableInputType = exports.tagTone = void 0;
+exports.recordpageRecipe = exports.recordPageLabels = exports.RecordPageMain = exports.RecordPage = exports.RecordDetails = exports.useEditableField = exports.editableInputType = exports.tagTone = void 0;
 var column_1 = require("./column");
 Object.defineProperty(exports, "tagTone", { enumerable: true, get: function () { return column_1.tagTone; } });
 var editable_field_1 = require("./editable-field");
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "useEditableField", { enumerable: true, get: func
 var recordpage_1 = require("./recordpage");
 Object.defineProperty(exports, "RecordDetails", { enumerable: true, get: function () { return recordpage_1.RecordDetails; } });
 Object.defineProperty(exports, "RecordPage", { enumerable: true, get: function () { return recordpage_1.RecordPage; } });
+Object.defineProperty(exports, "RecordPageMain", { enumerable: true, get: function () { return recordpage_1.RecordPageMain; } });
 Object.defineProperty(exports, "recordPageLabels", { enumerable: true, get: function () { return recordpage_1.recordPageLabels; } });
 var recordpage_recipe_1 = require("./recordpage.recipe");
 Object.defineProperty(exports, "recordpageRecipe", { enumerable: true, get: function () { return recordpage_recipe_1.recordpageRecipe; } });

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

@@ -35,11 +35,13 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.recordPageLabels = void 0;
 exports.RecordDetails = RecordDetails;
+exports.RecordPageMain = RecordPageMain;
 exports.RecordPage = RecordPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
+const button_1 = require("../../components/button");
 const checkbox_1 = require("../../components/checkbox");
 const drawer_1 = require("../../components/drawer");
 const menu_1 = require("../../components/menu");
@@ -100,6 +102,22 @@ exports.recordPageLabels = {
     share: "Share",
     comments: "Comments",
     noLists: "This record has not been added to any lists.",
+    filters: "Filters",
+    addMeeting: "Add meeting",
+    noFiles: "No files",
+    filesHint: "Drag a file here or choose one from your computer.",
+    newFolder: "New folder",
+    uploadFile: "Upload file",
+    fileMoreActions: "More file actions",
+    noDealsFound: "No Deals found",
+    noDealsHint: "There are no related records for this relationship.",
+    newDeal: "New Deal",
+    noEmails: "No emails",
+    noEmailsHint: "This record doesn't have any emails, or they may be hidden due to permissions.",
+    configureMailbox: "Configure mailbox",
+    upgradeToViewCalls: "Upgrade to view calls",
+    callsUpgradeHint: "No call recordings yet! Upgrade to Pro to start recording calls.",
+    upgrade: "Upgrade",
     highlights: "Highlights",
     recordDetails: "Record Details",
     searchFields: "Search fields",
@@ -311,7 +329,14 @@ function NotesSection({ notes, onAdd, labels, }) {
     return ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: labels.tabs.notes, count: notes.length, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", onClick: () => setOpen(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), labels.newNote] }) }), open && ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: labels.noNotesYet })) : (notes.map((n) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-body", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-author", children: labels.you }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-time", children: n.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-note-text", children: n.text })] })] }, n.id))))] }));
+                } })), notes.length === 0 && !open ? ((0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-note", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-note-left", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: "neutral", children: "Y" }), n.title && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-title", children: n.title })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-text", children: n.text })] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-note-time", children: n.time })] }, n.id))))] }));
 }
 function TasksSection({ tasks, onAdd, onToggle, labels, }) {
     const [open, setOpen] = React.useState(false);
@@ -344,13 +369,51 @@ function EmptyCard({ icon, children, }) {
  * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
  * (also exported from this package).
  */
-function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }) {
+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 } = (0, editable_field_1.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: (0, core_1.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);
@@ -387,7 +450,7 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, .
         groups = [{ title: undefined, fields: shown }];
     }
     const totalShown = groups.reduce((n, g) => n + g.fields.length, 0);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-recordpage-section", className), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.jsx)("input", { 
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)("crisp-recordpage-section", className), "data-resizable": resizable ? "" : undefined, style: resizable ? { width } : undefined, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-detailhead", children: [searchOpen ? ((0, jsx_runtime_1.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") {
@@ -461,9 +524,37 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, .
                                 setSearchOpen(next);
                                 if (!next)
                                     setFieldQuery("");
-                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) })))] }));
+                            }, children: showAllValues ? t.viewLess : t.viewAllValues }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-noresults", children: t.noFieldsMatch(fieldQuery) }))), resizable && ((0, jsx_runtime_1.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 = (0, core_1.isRtlElement)(e.currentTarget);
+                    const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
+                    setWidth(grow ? width + 16 : width - 16);
+                } }))] }));
 }
 RecordDetails.displayName = "RecordDetails";
+/**
+ * The main/tab-content column's own box, on its own (#750) — the same
+ * "standalone piece" `RecordDetails` already is for the Details column,
+ * mirrored to the other side of the layout. `RecordPage` composes this
+ * internally for its own tabbed body (below) — this exact box, not a second
+ * copy — so a consumer building a custom record page (its own tab set, its
+ * own menu, `RecordDetails` for the left column, but not the full
+ * `RecordPage`, which hardcodes the CRM tab set) gets the same
+ * Attio-measured inset: `flex: 1; min-width: 0; display: flex;
+ * flex-direction: column; min-height: 0; overflow-y: auto; padding: 12px
+ * 20px` (`recordpage.recipe.ts`'s own `.crisp-recordpage-main`) — without
+ * reaching for that internal class name directly, the only option before
+ * this existed.
+ *
+ * Needs the same single `.crisp-recordpage`-scoped ancestor `RecordDetails`
+ * already documents — wrap both in `recordpageRecipe()`, the way
+ * `RecordPage`'s own root does.
+ */
+function RecordPageMain({ className, children, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)("main", { className: (0, core_1.cx)("crisp-recordpage-main", className), ...rest, children: children }));
+}
+RecordPageMain.displayName = "RecordPageMain";
 /**
  * The full-page company record view — the page that opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
@@ -472,7 +563,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-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, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
+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
@@ -704,13 +795,19 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
             case "overview":
                 return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [highlights !== false && ((0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-section-title", children: t.highlights }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-card", children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-hl-cell", children: [h.icon && ((0, jsx_runtime_1.jsx)(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-label", children: h.label }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-hl-value", children: h.value ?? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] })), activityFeed, (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }), (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
-                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: activityFeed });
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsxs)("section", { children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.activity, action: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-tabtoolbar", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 14, strokeWidth: 1.75 }), t.filters] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.addMeeting] })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed", children: activity.map((a) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-feed-dot", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Activity, { size: 13, strokeWidth: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-feed-body", children: [a.text, (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }) }));
+            case "files":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noFiles }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.filesHint }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.newFolder] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 1.75 }), t.uploadFile] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.fileMoreActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })] })] }) }));
+            case "deals":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noDealsFound }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.noDealsHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "md", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newDeal] }) })] }) }));
             case "notes":
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-panel", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.emails }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title", children: t.noEmails }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.noEmailsHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsx)(button_1.Button, { intent: "primary", size: "md", children: t.configureMailbox }) })] }) })] }));
+            case "calls":
+                return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-illustrated", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-title crisp-recordpage-illustrated-title--lg", children: t.upgradeToViewCalls }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-desc", children: t.callsUpgradeHint }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-illustrated-actions", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "md", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Zap, { size: 15, strokeWidth: 1.75 }), t.upgrade] }) })] }) }));
             default:
                 return ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-panel", children: (0, jsx_runtime_1.jsx)(EmptyCard, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
@@ -728,7 +825,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", "data-peek": onClose ? "" : undefined, children: [onClose ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-peekbar", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-iconbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75 }) }), (onPrevious || onNext) && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-recordpage-peek-pager", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": previousRecordLabel, disabled: !onPrevious, onClick: onPrevious, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-peek-navbtn", "aria-label": nextRecordLabel, disabled: !onNext, onClick: onNext, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16, strokeWidth: 1.75 }) })] })), counterLabel != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-peek-counter", children: counterLabel }))] })) : ((0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.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.
@@ -740,6 +837,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
+                        } }), (0, jsx_runtime_1.jsx)(RecordPageMain, { children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";