@crisp-ui-kit/crisp 0.57.2 → 0.57.3

package/dist/button.css

@@ -24,6 +24,9 @@
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
+.crisp-button--size_xs {
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+}
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);
     &[data-icon-start] { padding-inline-start: var(--crisp-space-1-5); }

package/dist/button.d.ts

@@ -2,9 +2,9 @@ import type { RecipeFn } from "../core/types";
 
 export interface ButtonVariants {
   intent?: "primary" | "neutral" | "danger" | "ghost";
-  size?: "sm" | "md" | "lg";
+  size?: "sm" | "xs" | "md" | "lg";
   shape?: "text" | "icon";
   touchTarget?: boolean;
 }
 
-export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; md: string; lg: string }; shape: { text: string; icon: string }; touchTarget: { true: string; false: string } }>;
+export declare const buttonRecipe: RecipeFn<{ intent: { primary: string; neutral: string; danger: string; ghost: string }; size: { sm: string; xs: string; md: string; lg: string }; shape: { text: string; icon: string }; touchTarget: { true: string; false: string } }>;

package/dist/button.layered.css

@@ -25,6 +25,9 @@
 .crisp-button--size_sm {
   height: 24px; padding-inline: var(--crisp-space-1-5); font-size: var(--crisp-text-md); border-radius: var(--crisp-radius-md);
 }
+.crisp-button--size_xs {
+  height: 20px; padding-inline: var(--crisp-space-1-5); font-size: 10px; font-weight: var(--crisp-weight-regular); line-height: 15px; letter-spacing: normal; border-radius: var(--crisp-radius-sm); gap: var(--crisp-space-1);
+}
 .crisp-button--size_md {
   height: 28px; padding-inline: var(--crisp-space-2); font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-md);
     &[data-icon-start] { padding-inline-start: var(--crisp-space-1-5); }

package/dist/chip.css

@@ -2,7 +2,7 @@
   display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; max-width: 100%; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
 }
 .crisp-chip--truncate_true {
-  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+  & .crisp-chip-label { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; display: block; }
 }
 .crisp-chip--truncate_false {
   

package/dist/chip.layered.css

@@ -3,7 +3,7 @@
   display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; max-width: 100%; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
 }
 .crisp-chip--truncate_true {
-  & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
+  & .crisp-chip-label { min-width: 0; overflow: clip; text-overflow: ellipsis; white-space: nowrap; display: block; }
 }
 .crisp-chip--truncate_false {
   

package/dist/cjs/components/breadcrumb/breadcrumb.js

@@ -55,7 +55,7 @@ function Breadcrumb({ items, separator, "aria-label": ariaLabelProp, className,
     return ((0, jsx_runtime_1.jsx)("nav", { "aria-label": ariaLabel, className: (0, breadcrumb_recipe_1.breadcrumbRecipe)({ className }), ...rest, children: items.map((item, i) => {
             const last = i === items.length - 1;
             const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.icon, item.label] }));
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-breadcrumb-item", href: item.href, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
+            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [last ? ((0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-item", "aria-current": "page", children: content })) : item.href ? ((0, jsx_runtime_1.jsx)("a", { className: "crisp-breadcrumb-item", href: item.href, onClick: item.onClick, children: content })) : ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-breadcrumb-item", onClick: item.onClick, children: content })), !last && (0, jsx_runtime_1.jsx)("span", { className: "crisp-breadcrumb-sep", children: sep })] }, i));
         }) }));
 }
 Breadcrumb.displayName = "Breadcrumb";

package/dist/cjs/components/button/button.recipe.js

@@ -124,6 +124,34 @@ const spec = (0, core_1.defineSpec)({
                 fontSize: tokens_1.contract.text.md,
                 borderRadius: tokens_1.contract.radius.md,
             },
+            // crisp#688: Attio's own 20px small button, split out of #682 rather
+            // than redefining `sm` -- 72 existing `size="sm"` call sites (sidebar,
+            // comments, recordpage, workspacegeneralsettings, personchip,
+            // datatable) already rely on sm's 24px, unverified against `xs`'s own
+            // context. Box measured live on app.attio.com Home/Tasks ("View all",
+            // "Today, <date>", the date-stepper's Previous/Next-day icon
+            // buttons): 20px height, 6px radius, 6px inline padding on text
+            // buttons (a 20x20 icon-only button centers a 16px icon the same way
+            // shape="icon" already does for every other size, so it needs no
+            // extra rule), 4px gap between multiple children.
+            //
+            // The label itself is NOT 14px/#682's tracking -- getComputedStyle on
+            // the live button (fonts loaded, DPR 2, zero zoom/transform anywhere
+            // in the ancestor chain) reads 10px/regular/15px line-height/normal
+            // tracking, independently matching `recordpanel.recipe.ts`'s own
+            // "View all" measurement (10px/400) elsewhere in this codebase. 10px
+            // sits below the text scale's 11px floor, so it's a literal here, the
+            // same as recordpanel's.
+            xs: {
+                height: "20px",
+                paddingInline: tokens_1.contract.space["1.5"],
+                fontSize: "10px",
+                fontWeight: tokens_1.contract.weight.regular,
+                lineHeight: "15px",
+                letterSpacing: "normal",
+                borderRadius: tokens_1.contract.radius.sm,
+                gap: tokens_1.contract.space["1"],
+            },
             md: {
                 decls: {
                     height: "28px",

package/dist/cjs/components/chip/chip.recipe.js

@@ -76,7 +76,9 @@ const spec = (0, core_1.defineSpec)({
                         selector: "& .crisp-chip-label",
                         decls: {
                             minWidth: 0,
-                            overflow: "hidden",
+                            // #719: `clip`, not `hidden` -- immune to a programmatic
+                            // `scrollLeft` assignment; renders the ellipsis identically.
+                            overflow: "clip",
                             textOverflow: "ellipsis",
                             whiteSpace: "nowrap",
                             display: "block",

package/dist/cjs/components/datatable/datatable.recipe.js

@@ -116,7 +116,13 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-group-count { margin-inline-start: ${tokens_1.contract.space["1.5"]}; color: ${tokens_1.contract.fgMuted}; font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${tokens_1.contract.size.row}; margin: 0; padding: 0 ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${tokens_1.contract.bgBrandSolid}; }
-    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    /* #719: overflow: clip, not hidden, on every truncation rule below --
+       hidden still honours a programmatic scrollLeft assignment (found via
+       a screenshot tool that pans anything with scrollWidth > clientWidth),
+       blanking or fragmenting the visible text even though real user
+       scrolling was already blocked. clip renders the ellipsis identically
+       and leaves no scroll position to move. */
+    & .crisp-datatable-th-label { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     /* #465: 12px per the comment above (and Attio's measured header cell
        padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
        own documented value. */
@@ -203,7 +209,7 @@ const config = (0, core_1.defineRecipe)({
     /* reference picker: a leading 16px avatar per option, plus a trailing
        "Create X" row when the consumer supplies one (#449) -- same measured
        values as RecordsTable's own .crisp-recordstable-refoption*. */
-    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${tokens_1.contract.fgMuted}; }
     & .crisp-datatable-empty { padding: ${tokens_1.contract.space["8"]} ${tokens_1.contract.space["3"]}; text-align: center; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.lg}; }
@@ -289,7 +295,7 @@ const config = (0, core_1.defineRecipe)({
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: ${tokens_1.contract.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 9%, transparent); }
     /* #893: shared by the button (onEntityClick, a different record) and
        the anchor (href, the row's own record) -- was button-only, which
        silently left a real <a> unstyled the day #893 added one. */
@@ -335,7 +341,7 @@ const config = (0, core_1.defineRecipe)({
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
-    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
     /* phone cell type/editor (#765) -- measured live: the dial-code prefix
        is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text

package/dist/cjs/components/datepickerfield/datepickerfield.js

@@ -58,7 +58,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", width = "full", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = (0, core_1.useCrispMessage)(placeholderProp, "Set date…");
     const clearLabel = (0, core_1.useCrispMessage)(clearLabelProp, "Clear date");
@@ -79,7 +79,7 @@ function DatePickerField({ value, defaultValue, onValueChange, onChange, placeho
         onValueChange?.(null);
         onChange?.(null);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, datepickerfield_recipe_1.datepickerfieldRecipe)({ width, className }), ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [(0, jsx_runtime_1.jsx)(popover_1.Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-datepickerfield-panel", children: [(0, jsx_runtime_1.jsx)(datepicker_1.DatePicker
                             // DatePickerProps is a union over selectionMode, and TypeScript
                             // cannot narrow it through a spread: it tries every branch and
                             // reports the range one as missing props. The field is always

package/dist/cjs/components/datepickerfield/datepickerfield.recipe.js

@@ -13,7 +13,7 @@ const config = (0, core_1.defineRecipe)({
     display: inline-flex; font-family: ${tokens_1.contract.font.sans};
 
     & .crisp-datepickerfield-box {
-      display: inline-flex; align-items: center;
+      display: inline-flex; align-items: center; width: 100%;
       box-sizing: border-box; height: 32px; margin: 0;
       border-radius: ${tokens_1.contract.radius.md}; background: transparent;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent);
@@ -22,6 +22,7 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     & .crisp-datepickerfield-trigger {
+      flex: 1; min-width: 0;
       display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["2"]};
       height: 100%; padding: 0 ${tokens_1.contract.space["2.5"]}; margin: 0;
       border: none; background: none; color: inherit; font-family: inherit;
@@ -51,8 +52,20 @@ const config = (0, core_1.defineRecipe)({
     }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); }
   `,
-    variants: {},
-    defaultVariants: {},
+    variants: {
+        // crisp#980: full (default) fills its container, matching Select's own
+        // width variant/default -- so a form composing DatePickerField alongside
+        // Input/Select via FormField gets one consistent column width across
+        // every field type, not just some of them. auto sizes to content, the
+        // behaviour every consumer got unconditionally before this.
+        width: {
+            full: `width: 100%;`,
+            auto: `width: auto;`,
+        },
+    },
+    defaultVariants: {
+        width: "full",
+    },
     compoundVariants: [],
 });
 exports.datepickerfieldRecipe = Object.assign((0, core_1.resolveRecipe)(config), {

package/dist/cjs/components/menu/menu.js

@@ -144,12 +144,28 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = (0, menu_keyboard_1.useMenuKeyboard)({
+    const { onKeyDown: onContentKeyDown, items } = (0, menu_keyboard_1.useMenuKeyboard)({
         open,
         close,
         dismiss: () => setOpen(false),
         contentRef,
     });
+    // Roving tabindex (crisp#964): every item hardcodes tabIndex={-1} for the
+    // arrow-key model above, which means none of them is ever a real Tab stop
+    // on its own -- kept in sync with wherever focus actually lands, same as
+    // MenuSheet's identical fix (#966).
+    const onContentFocus = React.useCallback((e) => {
+        for (const el of items())
+            el.tabIndex = -1;
+        e.target.tabIndex = 0;
+    }, [items]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const [first] = items();
+        if (first)
+            first.tabIndex = 0;
+    }, [open, items]);
     const triggerEl = React.cloneElement(trigger, {
         ref: triggerRef,
         id: triggerId,
@@ -165,7 +181,7 @@ function Menu({ trigger, children, align = "start", open: openProp, defaultOpen,
     });
     return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, menu_recipe_1.menuRecipe)({ className }), children: [triggerEl, open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsx)("div", { ref: contentRef, className: contentClassName
                         ? `crisp-menu-content ${contentClassName}`
-                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, onFocus: onContentFocus, children: (0, jsx_runtime_1.jsx)(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {

package/dist/cjs/components/table/table.recipe.js

@@ -24,7 +24,13 @@ const config = (0, core_1.defineRecipe)({
        (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
-    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    /* #719: overflow: clip, not hidden -- both render the ellipsis
+       identically, but hidden still honours a programmatic scrollLeft
+       assignment (a screenshot tool, a browser extension) even though it
+       already blocks user-driven wheel/scrollbar input; clip leaves no
+       scroll position for anything to move, so the truncated text can
+       never be panned out of view. */
+    & th, & td { position: relative; height: ${tokens_1.contract.size.tableRow}; padding: 0 ${tokens_1.contract.space["3"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; border-inline-end: 1px solid ${tokens_1.contract.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        \`.crisp-recordstable-th\`. z-index 2 sits above a plain body cell (auto)
        and below a sticky-column corner cell (DataTable's \`th[data-sticky]\`,

package/dist/cjs/core/floating-portal.js

@@ -52,10 +52,11 @@ const react_dom_1 = require("react-dom");
  * `Dialog` was rendering offset by the dialog's own box instead of anchored
  * to its trigger.
  *
- * Every caller renders this conditionally on its own `open` state, which
- * starts `false` and is driven only by client interaction — never a prop a
- * fixture sets true at mount (unlike Dialog/Drawer/Command) — so this never
- * touches `document` during SSR, the same safety Tooltip already had.
+ * Every caller renders this conditionally on its own `open` state. A fixture
+ * CAN set that true at mount (crisp#964 needs exactly that, to give Menu's
+ * roving-tabindex guard something to inspect), so this checks for `window`
+ * itself rather than assuming the caller never does — the same guard
+ * `@zag-js/react`'s own `Portal` uses for the identical reason.
  *
  * `sourceRef` is the caller's own root — still in its original DOM position,
  * never portaled — used to carry a `data-theme` set on some ancestor of it
@@ -71,6 +72,8 @@ const react_dom_1 = require("react-dom");
  * element carrying that attribute.
  */
 function FloatingPortal({ children, sourceRef, }) {
+    if (typeof window === "undefined")
+        return children;
     const theme = sourceRef.current
         ?.closest("[data-theme]")
         ?.getAttribute("data-theme");

package/dist/cjs/product/inbox/inbox.js

@@ -54,10 +54,18 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
     // own `empty`.
     const crispMessages = (0, core_1.useCrispMessages)();
     const title = titleProp ?? crispMessages.Notifications ?? "Notifications";
-    const emptyTitle = emptyTitleProp ?? crispMessages["No notifications"] ?? "No notifications";
-    const emptySubtitle = emptySubtitleProp ??
+    // A tab's own empty copy wins over the instance-level prop, which wins
+    // over the built-in default — same precedence as `title`/`emptyAction`.
+    const activeTabDef = tabs?.find((t) => t.id === activeTab);
+    const emptyTitle = activeTabDef?.emptyTitle ??
+        emptyTitleProp ??
+        crispMessages["No notifications"] ??
+        "No notifications";
+    const emptySubtitle = activeTabDef?.emptySubtitle ??
+        emptySubtitleProp ??
         crispMessages["Notifications such as mentions and important updates will be displayed here."] ??
         "Notifications such as mentions and important updates will be displayed here.";
+    const resolvedEmptyAction = activeTabDef?.emptyAction ?? emptyAction;
     const tabsLabel = (0, core_1.useCrispMessage)(tabsLabelProp, "Notification views");
     // crisp's shared tablist model, the one `Tabs` runs (#195). Hand-rolling a
     // second one is how Inbox ended up with no arrow keys, no roving tabindex
@@ -68,6 +76,6 @@ function Inbox({ notifications = [], title: titleProp, tabs, activeTab, onTabCha
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, inbox_recipe_1.inboxRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-head", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && ((0, jsx_runtime_1.jsx)("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "tab", "aria-selected": t.id === activeTab, tabIndex: tabIndexFor(t.id), "data-value": t.id, disabled: t.disabled, className: "crisp-inbox-tab", "data-active": t.id === activeTab ? "" : undefined, onClick: () => onTabChange?.(t.id), children: [t.label, t.count != null && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-inbox-empty", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-empty-icon", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Bell, { size: 40, strokeWidth: 1.25 }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), resolvedEmptyAction != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-empty-action", children: resolvedEmptyAction }))] })) : ((0, jsx_runtime_1.jsx)("div", { className: "crisp-inbox-list", children: notifications.map((n) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-inbox-row-body", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && (0, jsx_runtime_1.jsx)("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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",
@@ -515,6 +533,28 @@ function RecordDetails({ record, columns, sections, onEdit, labels, className, r
                 } }))] }));
 }
 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
@@ -755,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 }) }));
         }
@@ -791,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";

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

@@ -229,6 +229,31 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; padding: ${tokens_1.contract.space["6"]} ${tokens_1.contract.space["3"]}; border: 1px dashed ${tokens_1.contract.borderDefault}; border-radius: ${tokens_1.contract.radius.xl}; color: ${tokens_1.contract.fgMuted}; font-size: ${tokens_1.contract.text.md}; text-align: center; }
     & .crisp-recordpage-emptycard svg { color: ${tokens_1.contract.fgMuted}; opacity: 0.7; }
 
+    /* #622: the Activity tab's own toolbar -- "Filters" + "+ Add meeting",
+       both the same measured button chrome as the topbar's own action
+       buttons (28px, e.field shadow, 14/500 label). */
+    & .crisp-recordpage-tabtoolbar { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
+
+    /* #622: Files tab's empty state -- measured live on Attio's own record
+       page (a company with no files uploaded). The 138x138 dotted-grid
+       backdrop is the same measured tile EmptyState's records variant uses
+       (crisp/#603), duplicated here rather than composed through that
+       component because this surface's title (16/600) and body (14/500,
+       63%-mixed fgPrimary, not the flat fgMuted EmptyState uses) measure to
+       their own values, matching neither of that component's existing
+       variants. */
+    & .crisp-recordpage-panel--center { flex: 1; align-items: center; justify-content: center; }
+    & .crisp-recordpage-illustrated { display: flex; flex-direction: column; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: ${tokens_1.contract.space["2"]}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${tokens_1.contract.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: ${tokens_1.contract.text.xl}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    /* #988: the Calls tab's own gated state measures a larger 20/24 title
+       than Files/Deals' 16/600 -- Attio's own "empty view" pattern (the
+       same 20/600 EmptyState's page/records variants already carry, not a
+       one-off). */
+    & .crisp-recordpage-illustrated-title--lg { font-size: 20px; line-height: 24px; }
+    & .crisp-recordpage-illustrated-desc { max-width: 320px; 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); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: ${tokens_1.contract.space["1.5"]}; margin-top: ${tokens_1.contract.space["2"]}; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${tokens_1.contract.size.chip}; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.chip}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 82%, transparent); }

package/dist/datatable.css

@@ -98,7 +98,13 @@
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    /* #719: overflow: clip, not hidden, on every truncation rule below --
+       hidden still honours a programmatic scrollLeft assignment (found via
+       a screenshot tool that pans anything with scrollWidth > clientWidth),
+       blanking or fragmenting the visible text even though real user
+       scrolling was already blocked. clip renders the ellipsis identically
+       and leaves no scroll position to move. */
+    & .crisp-datatable-th-label { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     /* #465: 12px per the comment above (and Attio's measured header cell
        padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
        own documented value. */
@@ -185,7 +191,7 @@
     /* reference picker: a leading 16px avatar per option, plus a trailing
        "Create X" row when the consumer supplies one (#449) -- same measured
        values as RecordsTable's own .crisp-recordstable-refoption*. */
-    & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
     & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
@@ -261,7 +267,7 @@
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     /* #893: shared by the button (onEntityClick, a different record) and
        the anchor (href, the row's own record) -- was button-only, which
        silently left a real <a> unstyled the day #893 added one. */
@@ -312,7 +318,7 @@
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
-    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
     /* phone cell type/editor (#765) -- measured live: the dial-code prefix
        is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text

package/dist/datatable.layered.css

@@ -99,7 +99,13 @@
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+    /* #719: overflow: clip, not hidden, on every truncation rule below --
+       hidden still honours a programmatic scrollLeft assignment (found via
+       a screenshot tool that pans anything with scrollWidth > clientWidth),
+       blanking or fragmenting the visible text even though real user
+       scrolling was already blocked. clip renders the ellipsis identically
+       and leaves no scroll position to move. */
+    & .crisp-datatable-th-label { overflow: clip; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     /* #465: 12px per the comment above (and Attio's measured header cell
        padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
        own documented value. */
@@ -186,7 +192,7 @@
     /* reference picker: a leading 16px avatar per option, plus a trailing
        "Create X" row when the consumer supplies one (#449) -- same measured
        values as RecordsTable's own .crisp-recordstable-refoption*. */
-    & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
     & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
@@ -262,7 +268,7 @@
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
     /* #893: shared by the button (onEntityClick, a different record) and
        the anchor (href, the row's own record) -- was button-only, which
        silently left a real <a> unstyled the day #893 added one. */
@@ -313,7 +319,7 @@
        own .crisp-recordstable-link, which this mirrors: no underline at
        rest, underline on hover, own-colour text rather than a browser-blue
        link. */
-    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
     /* phone cell type/editor (#765) -- measured live: the dial-code prefix
        is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text