@crisp-ui-kit/crisp 0.57.2 → 0.57.3

package/dist/datepickerfield.css

@@ -1,9 +1,9 @@
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
@@ -18,3 +18,9 @@
     & .crisp-datepickerfield-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}

package/dist/datepickerfield.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface DatepickerfieldVariants {
-
+  width?: "full" | "auto";
 }
 
-export declare const datepickerfieldRecipe: RecipeFn<{  }>;
+export declare const datepickerfieldRecipe: RecipeFn<{ width: { full: string; auto: string } }>;

package/dist/datepickerfield.layered.css

@@ -1,10 +1,10 @@
 @layer crisp-components {
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; width: 100%; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
+    & .crisp-datepickerfield-trigger { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; background: none; color: inherit; font-family: inherit; font-size: inherit; white-space: nowrap; cursor: pointer; }
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
@@ -19,4 +19,10 @@
     & .crisp-datepickerfield-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
 }
+.crisp-datepickerfield--width_full {
+  width: 100%;
+}
+.crisp-datepickerfield--width_auto {
+  width: auto;
+}
 }

package/dist/esm/components/breadcrumb/breadcrumb.js

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

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

@@ -121,6 +121,34 @@ const spec = defineSpec({
                 fontSize: c.text.md,
                 borderRadius: c.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: c.space["1.5"],
+                fontSize: "10px",
+                fontWeight: c.weight.regular,
+                lineHeight: "15px",
+                letterSpacing: "normal",
+                borderRadius: c.radius.sm,
+                gap: c.space["1"],
+            },
             md: {
                 decls: {
                     height: "28px",

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

@@ -73,7 +73,9 @@ const spec = 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/esm/components/datatable/datatable.recipe.js

@@ -113,7 +113,13 @@ const config = defineRecipe({
     & .crisp-datatable-group-count { margin-inline-start: ${c.space["1.5"]}; color: ${c.fgMuted}; font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["1"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.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. */
@@ -200,7 +206,7 @@ const config = 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: ${c.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: clip; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
@@ -286,7 +292,7 @@ const config = 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: ${c.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.fgPrimary} 9%, transparent); }
+    & .crisp-datatable-entity-name { overflow: clip; text-overflow: ellipsis; white-space: nowrap; font-weight: ${c.weight.medium}; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.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. */
@@ -332,7 +338,7 @@ const config = 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: ${c.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link { color: ${c.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/esm/components/datepickerfield/datepickerfield.js

@@ -22,7 +22,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder: placeholderProp, variant = "default", format = defaultFormat, clearable = true, clearLabel: clearLabelProp, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export 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 = useCrispMessage(placeholderProp, "Set date…");
     const clearLabel = useCrispMessage(clearLabelProp, "Clear date");
@@ -43,7 +43,7 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
         onValueChange?.(null);
         onChange?.(null);
     };
-    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [_jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
+    return (_jsx("div", { className: datepickerfieldRecipe({ width, className }), ...rest, children: _jsxs("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [_jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(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/esm/components/datepickerfield/datepickerfield.recipe.js

@@ -10,7 +10,7 @@ const config = defineRecipe({
     display: inline-flex; font-family: ${c.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: ${c.radius.md}; background: transparent;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
@@ -19,6 +19,7 @@ const config = defineRecipe({
     & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
     & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
     & .crisp-datepickerfield-trigger {
+      flex: 1; min-width: 0;
       display: inline-flex; align-items: center; gap: ${c.space["2"]};
       height: 100%; padding: 0 ${c.space["2.5"]}; margin: 0;
       border: none; background: none; color: inherit; font-family: inherit;
@@ -48,8 +49,20 @@ const config = defineRecipe({
     }
     & .crisp-datepickerfield-preset:hover { background: color-mix(in srgb, ${c.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: [],
 });
 export const datepickerfieldRecipe = Object.assign(resolveRecipe(config), {

package/dist/esm/components/menu/menu.js

@@ -104,12 +104,28 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
         document.addEventListener("keydown", onKey);
         return () => document.removeEventListener("keydown", onKey);
     }, [open, close]);
-    const { onKeyDown: onContentKeyDown } = useMenuKeyboard({
+    const { onKeyDown: onContentKeyDown, items } = 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,
@@ -125,7 +141,7 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
     });
     return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _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: _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: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, count, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -21,7 +21,13 @@ const config = 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: ${c.size.tableRow}; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.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: ${c.size.tableRow}; padding: 0 ${c.space["3"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.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/esm/core/floating-portal.js

@@ -16,10 +16,11 @@ import { createPortal } from "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
@@ -35,6 +36,8 @@ import { createPortal } from "react-dom";
  * element carrying that attribute.
  */
 export function FloatingPortal({ children, sourceRef, }) {
+    if (typeof window === "undefined")
+        return children;
     const theme = sourceRef.current
         ?.closest("[data-theme]")
         ?.getAttribute("data-theme");

package/dist/esm/product/inbox/inbox.js

@@ -18,10 +18,18 @@ export function Inbox({ notifications = [], title: titleProp, tabs, activeTab, o
     // own `empty`.
     const crispMessages = 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 = 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
@@ -32,6 +40,6 @@ export function Inbox({ notifications = [], title: titleProp, tabs, activeTab, o
         select: (id) => onTabChange?.(id),
         listRef,
     });
-    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_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 && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), emptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: emptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
+    return (_jsxs("div", { className: inboxRecipe({ className }), ...rest, children: [_jsxs("div", { className: "crisp-inbox-head", children: [_jsx("div", { className: "crisp-inbox-title", children: title }), tabs && tabs.length > 0 && (_jsx("div", { ref: listRef, className: "crisp-inbox-tabs", role: "tablist", "aria-label": tabsLabel, onKeyDown: onKeyDown, children: tabs.map((t) => (_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 && (_jsxs("span", { className: "crisp-inbox-tab-count", children: ["(", t.count, ")"] }))] }, t.id))) }))] }), notifications.length === 0 ? (_jsxs("div", { className: "crisp-inbox-empty", children: [_jsx("span", { className: "crisp-inbox-empty-icon", children: _jsx(Bell, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-inbox-empty-title", children: emptyTitle }), emptySubtitle != null && (_jsx("div", { className: "crisp-inbox-empty-sub", children: emptySubtitle })), resolvedEmptyAction != null && (_jsx("div", { className: "crisp-inbox-empty-action", children: resolvedEmptyAction }))] })) : (_jsx("div", { className: "crisp-inbox-list", children: notifications.map((n) => (_jsxs("button", { type: "button", className: "crisp-inbox-row", onClick: n.onClick, children: [n.avatar != null && (_jsx("span", { className: "crisp-inbox-row-avatar", children: n.avatar })), _jsxs("span", { className: "crisp-inbox-row-body", children: [_jsx("span", { className: "crisp-inbox-row-msg", children: n.message }), n.time != null && (_jsx("span", { className: "crisp-inbox-row-time", children: n.time }))] }), n.unread && _jsx("span", { className: "crisp-inbox-row-unread" })] }, n.id))) }))] }));
 }
 Inbox.displayName = "Inbox";

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

@@ -1,4 +1,4 @@
 export { tagTone, } from "./column.js";
 export { editableInputType, useEditableField, } from "./editable-field.js";
-export { RecordDetails, RecordPage, recordPageLabels, } from "./recordpage.js";
+export { RecordDetails, RecordPage, RecordPageMain, recordPageLabels, } from "./recordpage.js";
 export { recordpageRecipe } from "./recordpage.recipe.js";

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

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
+import { Activity as ActivityIcon, CalendarClock, ChevronDown, ChevronUp, CircleDollarSign, Copy, DollarSign, FileText, Folder, Inbox, Landmark, LayoutGrid, ListFilter, Mail, Maximize2, Merge, MessageSquare, Minimize2, MoreHorizontal, Pencil, Phone, Plus, Search, Settings, Sparkles, SquareCheck, Star, Trash2, Users, UsersRound, Workflow, X, Zap, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
+import { Button } from "../../components/button/index.js";
 import { Checkbox } from "../../components/checkbox/index.js";
 import { Drawer } from "../../components/drawer/index.js";
 import { Menu, MenuItem, MenuSeparator } from "../../components/menu/index.js";
@@ -62,6 +63,22 @@ export const 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",
@@ -477,6 +494,28 @@ export function RecordDetails({ record, columns, sections, onEdit, labels, class
                 } }))] }));
 }
 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.
+ */
+export function RecordPageMain({ className, children, ...rest }) {
+    return (_jsx("main", { className: 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
@@ -717,13 +756,19 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
             case "overview":
                 return (_jsxs("div", { className: "crisp-recordpage-panel", children: [highlights !== false && (_jsxs("section", { children: [_jsx("div", { className: "crisp-recordpage-section-title", children: t.highlights }), _jsx("div", { className: "crisp-recordpage-hl-card", children: _jsx("div", { className: "crisp-recordpage-hl-grid", children: highlights.map((h) => (_jsxs("div", { className: "crisp-recordpage-hl-cell", children: [h.icon && (_jsx(h.icon, { className: "crisp-recordpage-hl-icon", size: 15, strokeWidth: 1.75 })), _jsx("div", { className: "crisp-recordpage-hl-label", children: h.label }), _jsx("div", { className: "crisp-recordpage-hl-value", children: h.value ?? (_jsx("span", { className: "crisp-recordpage-hl-value--empty", children: h.empty })) })] }, h.label))) }) })] })), activityFeed, _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.emails, count: 0 }), emailsEmpty] }), _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }), _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t })] }));
             case "activity":
-                return _jsx("div", { className: "crisp-recordpage-panel", children: activityFeed });
+                return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsxs("section", { children: [_jsx(SectionHead, { title: t.tabs.activity, action: _jsxs("span", { className: "crisp-recordpage-tabtoolbar", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75 }), t.filters] }), _jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.addMeeting] })] }) }), _jsx("div", { className: "crisp-recordpage-feed", children: activity.map((a) => (_jsxs("div", { className: "crisp-recordpage-feed-item", children: [_jsx("span", { className: "crisp-recordpage-feed-dot", children: _jsx(ActivityIcon, { size: 13, strokeWidth: 2 }) }), _jsxs("div", { className: "crisp-recordpage-feed-body", children: [a.text, _jsx("div", { className: "crisp-recordpage-feed-time", children: a.time })] })] }, a.id))) })] }) }));
+            case "files":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Folder, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noFiles }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.filesHint }), _jsxs("div", { className: "crisp-recordpage-illustrated-actions", children: [_jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.newFolder] }), _jsxs("button", { type: "button", className: "crisp-recordpage-action", children: [_jsx(Plus, { size: 14, strokeWidth: 1.75 }), t.uploadFile] }), _jsx("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.fileMoreActions, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75 }) })] })] }) }));
+            case "deals":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Merge, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noDealsFound }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.noDealsHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsxs(Button, { intent: "primary", size: "md", children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newDeal] }) })] }) }));
             case "notes":
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(NotesSection, { notes: notes, onAdd: addNote, labels: t }) }));
             case "tasks":
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(TasksSection, { tasks: tasks, onAdd: addTask, onToggle: toggleTask, labels: t }) }));
             case "emails":
-                return _jsx("div", { className: "crisp-recordpage-panel", children: emailsEmpty });
+                return (_jsxs("div", { className: "crisp-recordpage-panel", children: [_jsx(SectionHead, { title: t.tabs.emails }), _jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Mail, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title", children: t.noEmails }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.noEmailsHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsx(Button, { intent: "primary", size: "md", children: t.configureMailbox }) })] }) })] }));
+            case "calls":
+                return (_jsx("div", { className: "crisp-recordpage-panel crisp-recordpage-panel--center", children: _jsxs("div", { className: "crisp-recordpage-illustrated", children: [_jsx("span", { className: "crisp-recordpage-illustrated-icon", "aria-hidden": "true", children: _jsx(Phone, { size: 40, strokeWidth: 1.25 }) }), _jsx("div", { className: "crisp-recordpage-illustrated-title crisp-recordpage-illustrated-title--lg", children: t.upgradeToViewCalls }), _jsx("div", { className: "crisp-recordpage-illustrated-desc", children: t.callsUpgradeHint }), _jsx("div", { className: "crisp-recordpage-illustrated-actions", children: _jsxs(Button, { intent: "primary", size: "md", children: [_jsx(Zap, { size: 15, strokeWidth: 1.75 }), t.upgrade] }) })] }) }));
             default:
                 return (_jsx("div", { className: "crisp-recordpage-panel", children: _jsx(EmptyCard, { icon: _jsx(Folder, { size: 22, strokeWidth: 1.5 }), children: t.nothingHereYet }) }));
         }
@@ -753,6 +798,6 @@ export function RecordPage({ record, columns, collection = "Records", labels, on
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), _jsx("main", { className: "crisp-recordpage-main", children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
+                        } }), _jsx(RecordPageMain, { children: _jsx(Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), _jsx(Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: _jsx(CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -226,6 +226,31 @@ const config = defineRecipe({
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: ${c.space["1.5"]}; padding: ${c.space["6"]} ${c.space["3"]}; border: 1px dashed ${c.borderDefault}; border-radius: ${c.radius.xl}; color: ${c.fgMuted}; font-size: ${c.text.md}; text-align: center; }
     & .crisp-recordpage-emptycard svg { color: ${c.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: ${c.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: ${c.space["1.5"]}; text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: ${c.space["2"]}; color: color-mix(in srgb, ${c.fgPrimary} 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, ${c.fgPrimary} 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: ${c.text.xl}; font-weight: ${c.weight.semibold}; color: ${c.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: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: ${c.space["1.5"]}; margin-top: ${c.space["2"]}; }
+
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
 
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }

package/dist/recordpage.css

@@ -193,6 +193,29 @@
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); 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: var(--crisp-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: var(--crisp-space-1-5); text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    /* #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: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2); }
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }

package/dist/recordpage.layered.css

@@ -194,6 +194,29 @@
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); 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: var(--crisp-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: var(--crisp-space-1-5); text-align: center; }
+    & .crisp-recordpage-illustrated-icon { display: flex; align-items: center; justify-content: center; width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
+    & .crisp-recordpage-illustrated-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    /* #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: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpage-illustrated-actions { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--crisp-space-1-5); margin-top: var(--crisp-space-2); }
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 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; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }