@crisp-ui-kit/crisp 0.54.0 → 0.54.2

package/dist/cjs/tokens/semantic.js

@@ -13,6 +13,8 @@ exports.semantic = {
     bgRaised: "gray50",
     borderDefault: "line200",
     borderSubtle: "line100",
+    /** ImportDialog's dashed dropzone border — see palette.ts's `line150`. */
+    borderDropzone: "line150",
     ringNeutral: "ringNeutral",
     ringField: "ringField",
     ringSwitch: "ringSwitch",
@@ -32,6 +34,10 @@ exports.semantic = {
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
     bgDangerSolid: "red700",
+    /** Solid critical/destructive TEXT (not a fill) — an overdue due-date, a
+     * destructive menu item's label. Distinct from `bgDanger` (a fill colour)
+     * and `fgDangerSoft` (a soft badge pill's text, a different measured hex). */
+    fgDanger: "red500",
     /** The 2px ring a text field shows while focused. */
     strokeFieldFocus: "fieldFocus",
     /** Unavailable/disabled content: unselected wheel rows, unpickable dates. */
@@ -63,4 +69,9 @@ exports.semantic = {
     fgWarningSoft: "softWarningText",
     fgDangerSoft: "softDangerText",
     fgNeutralSoft: "softNeutralText",
+    /** Badge's purple/role-pill tone (crisp#506) — see palette.ts's comment
+     * on `purpleTint`/`softPurpleText`/`purpleRing` for the measurement. */
+    bgPurpleSoft: "purpleTint",
+    fgPurpleSoft: "softPurpleText",
+    ringPurpleSoft: "purpleRing",
 };

package/dist/datatable.css

@@ -46,6 +46,9 @@
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
@@ -63,23 +66,25 @@
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); 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); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
-    /* The rejection's message, beside the cell's own content -- a sibling in the TableCell, never nested inside a column's own render output, so a
-       hover-only wrapper (a Tooltip, say) around a custom render can't hide it. Block-level: the row grows to fit it rather than floating over the row below, so it can never end up clipped by the scroll container's overflow the way a position:fixed escape would need
-       guarding against. */
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so
-       the cell IS the picker: same chromeless-fill treatment as
-       RecordsTable's own --picker cells (measured there already; DataTable shares RecordsTable's grid, Golden Rule 0). */
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* 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*. */
+    /* 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-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
@@ -96,12 +101,7 @@
     & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-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); }
@@ -114,11 +114,10 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

package/dist/datatable.layered.css

@@ -47,6 +47,9 @@
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
@@ -64,23 +67,25 @@
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); 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); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    /* An async onEdit's in-flight state (#385) -- the field/picker dims and stops accepting input rather than disappearing, so the just-typed or just-chosen value stays visible while its commit is pending. Same treatment Input already gives its own disabled state. */
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
-    /* The rejection's message, beside the cell's own content -- a sibling in the TableCell, never nested inside a column's own render output, so a
-       hover-only wrapper (a Tooltip, say) around a custom render can't hide it. Block-level: the row grows to fit it rather than floating over the row below, so it can never end up clipped by the scroll container's overflow the way a position:fixed escape would need
-       guarding against. */
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so
-       the cell IS the picker: same chromeless-fill treatment as
-       RecordsTable's own --picker cells (measured there already; DataTable shares RecordsTable's grid, Golden Rule 0). */
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* 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*. */
+    /* 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-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
@@ -97,12 +102,7 @@
     & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
     & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
-    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
-    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
-    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
-    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
-    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-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); }
@@ -115,11 +115,10 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
-       hairline doubling as the drop indicator (it tints toward the brand
-       colour as the active drop target). The affordance + geometry are
-       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
-       pointer-events implementation. */
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
+       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       draggable + dataTransfer, the same one column reorder already uses
+       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }

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

@@ -60,6 +60,16 @@ const spec = defineSpec({
                 color: c.fgDangerSoft,
                 boxShadow: ring(c.bgDanger, 30),
             },
+            // crisp#506: a distinct purple used for role-style labels (Attio's own
+            // "Admin" role pill), not a status/severity colour -- the other five
+            // tones don't cover this hue. Unlike those, these are the measured
+            // *solid* values directly (not a color-mix tint of a base accent):
+            // Attio's own pill background reads a flat, opaque rgb(), no alpha.
+            purple: {
+                background: c.bgPurpleSoft,
+                color: c.fgPurpleSoft,
+                boxShadow: `inset 0 0 0 1px ${c.ringPurpleSoft}`,
+            },
         },
         size: {
             small: {

package/dist/esm/components/datatable/datatable.js

@@ -301,7 +301,7 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
                     onCommit(v);
             } }) }));
 }
-export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
+export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel: selectAllLabelProp, selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder: searchPlaceholderProp, searchLabel: searchLabelProp, onEdit, stickyFirst = true, stickyLast = false, scrollProps, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel: addRowLabelProp, empty: emptyProp, showCount = true, countLabel, toolbar, className, reorderRowLabel: reorderRowLabelProp, sortAscendingLabel: sortAscendingLabelProp, sortDescendingLabel: sortDescendingLabelProp, moveColumnLeftLabel: moveColumnLeftLabelProp, moveColumnRightLabel: moveColumnRightLabelProp, editColumnLabel: editColumnLabelProp, hideColumnLabel: hideColumnLabelProp, renameColumnLabel: renameColumnLabelProp, viewSettingsLabel: viewSettingsLabelProp, columnsGroupLabel: columnsGroupLabelProp, ...rest }) {
     // crisp/#471: same resolution order as TableToolbar's own — an explicit
     // prop wins, then the provider's translation of the built-in English
     // default, then that default itself with no provider in the tree.
@@ -782,6 +782,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         return (_jsx(ChevronsUpDown, { className: "crisp-datatable-chevron", size: 13, strokeWidth: 2 }));
     }
     return (_jsxs("div", { ref: gridRef, className: datatableRecipe({ className }), tabIndex: -1, onKeyDown: onGridKeyDown, ...rest, children: [_jsx("div", { className: "crisp-datatable-live", role: "status", "aria-live": "polite", children: selectionText }), (filterable || showCount || toolbar || columnMenu) && (_jsxs("div", { className: "crisp-datatable-toolbar", children: [columnMenu && (_jsxs(Menu, { align: "start", trigger: _jsxs("button", { type: "button", className: "crisp-datatable-viewsettings", children: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75 }), viewSettingsLabel] }), children: [_jsx("div", { className: "crisp-datatable-group-label", children: columnsGroupLabel }), allColumns.map((c) => (_jsxs(MenuItem, { onSelect: () => c.hidden ? showColumn(c.key) : hideColumn(c.key), children: [_jsx(Check, { size: 14, strokeWidth: 2, style: { opacity: c.hidden ? 0 : 1 } }), typeof c.header === "string" ? c.header : c.key] }, c.key)))] })), filterable && (_jsxs("span", { className: "crisp-datatable-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { type: "search", placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), "aria-label": searchLabel })] })), showCount && (_jsx("span", { className: "crisp-datatable-count", children: resolvedCountLabel(rows.length, data.length) })), toolbar] })), _jsxs(Table, { interactive: interactive, surface: surface, style: { minWidth }, scrollProps: {
+                    ...scrollProps,
                     ref: scrollRef,
                     onScroll: (e) => {
                         const el = e.currentTarget;

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

@@ -66,6 +66,10 @@ const config = defineRecipe({
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: ${c.bgSurface}; }
     & th[data-sticky] { z-index: 3; }
+    /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
+       \`tfoot td { z-index: 2 }\`), which \`td[data-sticky]\`'s own higher-specificity
+       \`z-index: 1\` would otherwise undercut -- keep it level with the row it's in. */
+    & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); }
     & .crisp-table-scroll[data-scrolled-x] [data-sticky-edge] { clip-path: inset(0 -38px 0 0); box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }

package/dist/esm/components/mentionchip/index.js

@@ -0,0 +1,2 @@
+export { MentionChip } from "./mentionchip.js";
+export { mentionChipRecipe } from "./mentionchip.recipe.js";

package/dist/esm/components/mentionchip/mentionchip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Primitive } from "../../core/index.js";
+import { mentionChipRecipe } from "./mentionchip.recipe.js";
+/**
+ * A standalone "@mention" chip — the same look `RichTextEditor` draws
+ * inline while an editor is live (`.crisp-rte-mention`), exported on its
+ * own for a consumer rendering a mention OUTSIDE a mounted editor: a
+ * comment thread, a note's collapsed preview, anywhere a stored
+ * `@[Name](actor:id)`-shaped token needs to read as a person, not literal
+ * markup. Renders whatever `children` is given (the trigger character
+ * included, if the caller wants one, matching how `RichTextEditor`'s own
+ * chip includes it) rather than assuming an `@` prefix itself — plain text,
+ * no built-in click/remove behaviour (none was asked for; add one once a
+ * real interaction is measured, the same reasoning `Chip`'s own doc gives
+ * for not guessing a remove affordance).
+ */
+export const MentionChip = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    return (_jsx(Primitive.span, { ref: ref, asChild: asChild, className: mentionChipRecipe({ className }), ...props }));
+});
+MentionChip.displayName = "MentionChip";

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

@@ -0,0 +1,35 @@
+import { defineSpec, resolveRecipe, specToRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// The exact same values `product/richtext`'s own inline "@mention" span
+// uses (`.crisp-rte-mention`, richtext.recipe.ts) — not re-measured against
+// Attio independently (#428's own doc: no live @mention was reachable to
+// read computed styles from, and typing one to create one is off-limits),
+// reused verbatim from the one measured "brand" tag/chip this repo already
+// has (Chip's own `tone="brand"`). Pulled out to its own top-level recipe,
+// rather than importing richtext's, because `.crisp-rte-mention`'s CSS is
+// nested under richtext's own root selector (`&`, i.e. native CSS
+// nesting) — it only resolves inside a mounted `RichTextEditor`. A
+// standalone consumer rendering a mention OUTSIDE an editor (a comment
+// thread, a note preview list) needs the same look with no such ancestor,
+// which is what this recipe is for. Kept deliberately un-pill-shaped (no
+// fixed height, no ring) unlike Chip's own `brand` tone: this reads as
+// tinted text flowing inside a sentence, the same as a live mention does
+// mid-edit, not a standalone tag sitting in its own table cell.
+const spec = defineSpec({
+    name: "mention-chip",
+    base: {
+        display: "inline",
+        borderRadius: c.radius.chip,
+        paddingInline: c.space["1"],
+        background: `color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent)`,
+        color: `color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary})`,
+        fontWeight: c.weight.medium,
+        cursor: "default",
+    },
+});
+const config = specToRecipe(spec);
+export const mentionChipRecipe = Object.assign(resolveRecipe(config), {
+    config,
+});
+export { spec };
+export default config;

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

@@ -8,18 +8,30 @@ import { contract as c } from "../../tokens/index.js";
 const config = defineRecipe({
     name: "table",
     base: `display: block; box-sizing: border-box; background: ${c.bgSurface};
-    & .crisp-table-scroll { overflow-x: auto; }
+    /* #554: both axes -- a consumer bounds the height via \`scrollProps\`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
+       the summary row are sticky, on the scroll container rather than the
+       cells" -- docs/study/attio-table.md). Unbounded, \`overflow: auto\`
+       shows no vertical scrollbar and nothing sticks, so this is a no-op
+       for every existing consumer that never set a height. */
+    & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     /* #465: 12px, not crisp's old 8px -- measured on a live header cell
        (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; }
-    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+    /* #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]\`,
+       z-index 3), so the corner always wins. */
+    & th { position: sticky; top: 0; z-index: 2; height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    /* #554: sticky to the bottom, mirroring \`.crisp-recordstable-sum\`. */
+    & tfoot td { position: sticky; bottom: 0; z-index: 2; border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: start; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,

package/dist/esm/core/floating-stack.js

@@ -48,6 +48,23 @@ export function isInsideLaterFloatingLayer(target, self) {
     }
     return false;
 }
+/**
+ * True when a layer is registered strictly after `self` — i.e. `self` has
+ * spawned a still-open nested layer of its own (a row's kebab `Menu` inside
+ * `SavedViews`' own panel, e.g.).
+ *
+ * This is `hasOpenFloatingLayer`'s sibling for a caller that DOES register
+ * itself on this stack: `hasOpenFloatingLayer` reads "is the stack
+ * non-empty", which is always true for such a caller once its own layer is
+ * open — checking that before closing on Escape would defer to itself
+ * forever and Escape would never close it. `self`'s own position on the
+ * stack has to be excluded from the count, which `hasOpenFloatingLayer`
+ * cannot do since it takes no argument.
+ */
+export function hasNestedFloatingLayer(self) {
+    const selfIndex = self ? stack.indexOf(self) : -1;
+    return selfIndex + 1 < stack.length;
+}
 /**
  * True when at least one `Select`/`MultiSelect`/`Menu`/`Popover`/
  * `ContextMenu` is currently open, anywhere (#361).

package/dist/esm/core/index.js

@@ -5,7 +5,7 @@ export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
 export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
-export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
+export { hasNestedFloatingLayer, hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
 export { CrispMessagesProvider, useCrispComponentDefaults, useCrispMessage, useCrispMessages, } from "./i18n.js";
 export { matchMentionTrigger, } from "./mention.js";

package/dist/esm/index.js

@@ -33,6 +33,7 @@ export * from "./components/heatmapchart/index.js";
 export * from "./components/input/index.js";
 export * from "./components/kbd/index.js";
 export * from "./components/linechart/index.js";
+export * from "./components/mentionchip/index.js";
 export * from "./components/menu/index.js";
 export * from "./components/middletruncate/index.js";
 export * from "./components/multiselect/index.js";
@@ -65,13 +66,16 @@ export * from "./core/index.js";
 // product screens (Sidebar, RecordsTable, RecordPage, Inbox, …). Use them as-is
 // or as composition references for your own data; `components/` above holds
 // the generic primitives (Table, DataTable, Button, …) to build your own UI from.
+export * from "./product/activityfeed/index.js";
 export * from "./product/appshell/index.js";
 export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
+export * from "./product/formdialog/index.js";
 export * from "./product/headerbar/index.js";
+export * from "./product/importdialog/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";
@@ -80,11 +84,14 @@ export * from "./product/recordpage/index.js";
 export * from "./product/recordpanel/index.js";
 export * from "./product/recordstable/index.js";
 export * from "./product/richtext/index.js";
+export * from "./product/savedviews/index.js";
 export * from "./product/settingssection/index.js";
 export * from "./product/settingsshell/index.js";
 export * from "./product/sidebar/index.js";
 export * from "./product/statlist/index.js";
 export * from "./product/tasklist/index.js";
+export * from "./product/taskstable/index.js";
+export * from "./product/themepicker/index.js";
 export * from "./product/trialbanner/index.js";
 export * from "./product/viewtoggle/index.js";
 // design tokens + recipe core (for building custom components)

package/dist/esm/product/activityfeed/activityfeed.js

@@ -0,0 +1,32 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { activityfeedRecipe } from "./activityfeed.recipe.js";
+/**
+ * A record's own event timeline — a vertically stacked, bordered list of
+ * `ActivityFeedRow`s, capped at a readable content width. Built for
+ * internal/grc's per-record "Activity" tab (crisp#462 SHELL/forms gap): it
+ * replaces a hand-rolled `<div className="mx-auto max-w-3xl space-y-4
+ * p-6">`. No live Attio re-measurement behind its own chrome this pass (the
+ * CDP bridge was unreachable when this was built) — see the recipe's own
+ * doc comment for which already-measured crisp values it reuses instead of
+ * a new guess.
+ */
+export function ActivityFeed({ className, children, ...rest }) {
+    return (_jsx("div", { className: activityfeedRecipe({ className }), ...rest, children: children }));
+}
+ActivityFeed.displayName = "ActivityFeed";
+/** One event row: actor + action + timestamp, with an optional diff list
+ *  underneath. The last row in an `ActivityFeed` draws no divider. */
+export function ActivityFeedRow({ actor, action, when, children, }) {
+    return (_jsxs("div", { className: "crisp-activityfeed-row", children: [_jsxs("div", { className: "crisp-activityfeed-row-head", children: [actor, action, _jsx("span", { className: "crisp-activityfeed-row-spacer" }), _jsx("span", { className: "crisp-activityfeed-row-when", children: when })] }), children] }));
+}
+ActivityFeedRow.displayName = "ActivityFeedRow";
+/** One changed-field line under an `ActivityFeedRow` — "Field: before →
+ *  after", or "Field: set to after" when there is no known prior value. */
+export function ActivityFeedDiffItem({ field, before, after, }) {
+    return (_jsxs("li", { className: "crisp-activityfeed-diff-item", children: [_jsx("span", { className: "crisp-activityfeed-diff-field", children: field }), " ", before !== undefined ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-activityfeed-diff-before", children: before }), " ", _jsx("span", { "aria-hidden": "true", children: "\u2192" }), " ", _jsx("span", { children: after })] })) : (_jsx("span", { children: after }))] }));
+}
+ActivityFeedDiffItem.displayName = "ActivityFeedDiffItem";
+export function ActivityFeedDiffList({ children, }) {
+    return _jsx("ul", { className: "crisp-activityfeed-diff", children: children });
+}
+ActivityFeedDiffList.displayName = "ActivityFeedDiffList";

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

@@ -0,0 +1,32 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A record's own event timeline (crisp#462 gap: internal/grc's ActivityTab
+// hand-rolled this as a bare `<div className="mx-auto max-w-3xl space-y-4
+// p-6">` list of bordered rows). No live Attio re-measurement behind these
+// values this pass -- the CDP bridge to the owner's Vivaldi was unreachable
+// when this was built (documented in the component's own doc comment) --
+// so this reuses already-measured crisp values throughout rather than a new
+// guess: `space["6"]` (24px) padding is RecordPanel's own content padding,
+// the row's bottom border reuses `borderSubtle` (the same divider every
+// other bordered row in this codebase draws with), and the 767px content
+// cap matches SettingsSection's own measured content width.
+const config = defineRecipe({
+    name: "activityfeed",
+    base: `box-sizing: border-box; max-width: 767px; margin-inline: auto; padding: ${c.space["6"]};
+    display: flex; flex-direction: column; gap: ${c.space["4"]};
+    & .crisp-activityfeed-row { display: flex; flex-direction: column; gap: ${c.space["2"]}; padding-bottom: ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-activityfeed-row:last-of-type { border-bottom: none; padding-bottom: 0; }
+    & .crisp-activityfeed-row-head { display: flex; align-items: center; gap: ${c.space["2"]}; }
+    & .crisp-activityfeed-row-spacer { flex: 1; }
+    & .crisp-activityfeed-row-when { font-size: ${c.text.xs}; color: ${c.fgMuted}; white-space: nowrap; }
+    & .crisp-activityfeed-diff { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-activityfeed-diff-item { padding-inline-start: ${c.space["8"]}; font-size: ${c.text.md}; }
+    & .crisp-activityfeed-diff-field { color: ${c.fgMuted}; }
+    & .crisp-activityfeed-diff-before { color: ${c.fgMuted}; text-decoration: line-through; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const activityfeedRecipe = resolveRecipe(config);
+export default config;

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

@@ -0,0 +1,2 @@
+export { ActivityFeed, ActivityFeedDiffItem, ActivityFeedDiffList, ActivityFeedRow, } from "./activityfeed.js";
+export { activityfeedRecipe } from "./activityfeed.recipe.js";