@crisp-ui-kit/crisp 0.54.4 → 0.54.6

package/dist/authshell.css

@@ -1,13 +1,17 @@
 .crisp-authshell {
   min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-single-pane] { justify-content: center; }
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    &[data-single-pane] .crisp-authshell-pane { flex: 0 0 auto; padding: 0; }
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }

package/dist/authshell.layered.css

@@ -1,14 +1,18 @@
 @layer crisp-components {
 .crisp-authshell {
   min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-single-pane] { justify-content: center; }
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    &[data-single-pane] .crisp-authshell-pane { flex: 0 0 auto; padding: 0; }
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }

package/dist/chip.css

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

package/dist/chip.layered.css

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

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

@@ -30,6 +30,18 @@ const spec = (0, core_1.defineSpec)({
         // -- `inline-flex` items don't by default -- which `truncate` below
         // depends on and any consumer constraining a Chip's width already needs.
         minWidth: 0,
+        // Caps the chip at its containing block's width (#668) -- `min-width: 0`
+        // alone only lets it shrink inside a flex/grid row with `flex-shrink`;
+        // it does nothing in a plain block or table-cell ancestor (GRC's own
+        // `DataTable` cells, a render-uniform `<td>`, not a flex row), where the
+        // chip just grew to content width and overflowed instead. Checked
+        // Attio's own actor chip for a value to match instead of guessing one:
+        // `max-width: none` there too -- it has no pixel cap either, and stays
+        // contained only because its own ancestor chain is a real flex row the
+        // whole way down, which `Chip` alone can't assume for every consumer.
+        // `100%` is the honest equivalent: never wider than the container,
+        // whatever kind of container it is.
+        maxWidth: "100%",
         paddingInline: tokens_1.contract.space["1"],
         borderRadius: tokens_1.contract.radius.chip,
         fontSize: tokens_1.contract.text.lg,

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

@@ -63,8 +63,16 @@ function isLabelTruncated(el) {
  * viewport change, header text change) via `ResizeObserver`; SSR-safe the
  * same way `MiddleTruncate` is -- the DOM is only touched inside an effect,
  * so the server (and the first client paint) render the closed tooltip.
+ *
+ * #580: a `referencedType` column appends that type's icon + name after the
+ * label (Attio's own reference-column tooltip, e.g. "Primary location" +
+ * Country's icon + "Country") and uses `Tooltip`'s `"reference"` chrome
+ * variant -- Attio's second, structurally distinct tooltip (same
+ * background/colour/radius/padding/font as the plain one, a different
+ * `box-shadow`, crisp#563). Every other column stays exactly as #534/#558
+ * shipped: label-only, the `"plain"` variant.
  */
-function ThLabel({ header }) {
+function ThLabel({ header, referencedType, }) {
     const ref = React.useRef(null);
     const [overflowing, setOverflowing] = React.useState(false);
     // biome-ignore lint/correctness/useExhaustiveDependencies: `header` isn't read in the body, but a rename (col.header changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
@@ -93,7 +101,9 @@ function ThLabel({ header }) {
     // actually show. `open={false}` when it fits keeps the Tooltip mounted
     // (asChild costs no extra DOM either way) but pins it permanently closed,
     // so hovering a non-overflowing header still opens nothing.
-    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: header, asChild: true, open: overflowing ? undefined : false, children: (0, jsx_runtime_1.jsx)("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
+    const ReferenceIcon = referencedType?.icon;
+    const content = referencedType ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tooltip-reference-row", children: [header, ReferenceIcon && (0, jsx_runtime_1.jsx)(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (header);
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: content, asChild: true, variant: referencedType ? "reference" : "plain", open: overflowing ? undefined : false, children: (0, jsx_runtime_1.jsx)("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
 }
 /** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
  * a display string. Returns "" when it cannot be parsed, so the field opens
@@ -289,6 +299,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
             // translation) can never silently repaint the chip
             return ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
+        case "url":
+        case "email": {
+            const text = display || asText(value);
+            if (!text)
+                return empty;
+            return ((0, jsx_runtime_1.jsx)("a", { className: "crisp-datatable-link", href: col.type === "url" ? `https://${text}` : `mailto:${text}`, target: col.type === "url" ? "_blank" : undefined, rel: col.type === "url" ? "noreferrer" : undefined, 
+                // Same reasoning as `entity`'s `onEntityClick` link above: the
+                // link's own navigation must not also fire the row's onRowClick.
+                onClick: (ev) => ev.stopPropagation(), children: text }));
+        }
         default: {
             const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
@@ -424,7 +444,8 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
             keywords: query,
         });
     }
-    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+    const isActor = col.editor === "actor";
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "contents" }, children: (0, jsx_runtime_1.jsx)(select_1.Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder ?? (isActor ? "Search people…" : undefined), emptyLabel: col.refEmptyLabel ?? (isActor ? "No users" : undefined), onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
                 if (v === CREATE_REFERENCE_VALUE)
                     col.onCreateReference?.(query);
                 else
@@ -1199,7 +1220,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { header: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { header: col.header, referencedType: col.referencedType }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), ...dataStickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.jsx)("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
@@ -1280,7 +1301,9 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing &&
-                                                    (col.editor === "select" || col.editor === "reference")) {
+                                                    (col.editor === "select" ||
+                                                        col.editor === "reference" ||
+                                                        col.editor === "actor")) {
                                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire

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

@@ -144,6 +144,12 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${tokens_1.contract.bgOrange} 16%, transparent); color: color-mix(in srgb, ${tokens_1.contract.bgOrange} 82%, ${tokens_1.contract.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${tokens_1.contract.fgMuted}; }
+    /* url/email cell types (#654) -- same measured values as RecordsTable's
+       own .crisp-recordstable-link, which this mirrors: no underline at
+       rest, underline on hover, own-colour text rather than a browser-blue
+       link. */
+    & .crisp-datatable-link { color: ${tokens_1.contract.fgPrimary}; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link:hover { text-decoration: underline; }
     /* 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

package/dist/cjs/components/personchip/personchip.js

@@ -42,9 +42,19 @@ function initials(name) {
  * Composes `Chip`'s `truncate` CSS directly rather than its string-only
  * auto-wrap (children here is an avatar plus a name, not a single string),
  * so the name gets its own `.crisp-chip-label` span while the avatar stays
- * fixed-size.
+ * fixed-size. `trailing` (#683) is the same idea for a consumer's own
+ * icon/badge after the name — inside the chip's own flex row rather than a
+ * second one a consumer would otherwise wrap this in, which needs its own
+ * `min-width: 0` to keep shrinking correctly and, missing that, overflows
+ * its container the same way #668 did before `Chip` itself was fixed.
  */
-function PersonChip({ name, avatar, muted, className, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(chip_1.Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), children: avatar ? (0, jsx_runtime_1.jsx)("img", { src: avatar, alt: "" }) : initials(name) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-chip-label", style: muted ? { color: tokens_1.contract.fgNeutralMuted } : undefined, children: name })] }));
+function PersonChip({ name, avatar, muted, trailing, className, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(chip_1.Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), 
+                // Explicit rather than relying on the flex default (a fixed-size,
+                // non-wrapping element's own min-content floor already resists
+                // shrinking in every browser tested) — #668 asked "does the avatar
+                // stay" as its own question, so it gets its own undeniable answer
+                // rather than an implicit one.
+                style: { flexShrink: 0 }, children: avatar ? (0, jsx_runtime_1.jsx)("img", { src: avatar, alt: "" }) : initials(name) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-chip-label", style: muted ? { color: tokens_1.contract.fgNeutralMuted } : undefined, children: name }), trailing != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-personchip-trailing", style: { flexShrink: 0 }, children: trailing }))] }));
 }
 PersonChip.displayName = "PersonChip";

package/dist/cjs/components/tabletoolbar/tabletoolbar.js

@@ -177,7 +177,7 @@ function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -200,6 +200,10 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     const deleteFilterLabel = (0, core_1.useCrispMessage)(deleteFilterLabelProp, "Delete filter");
     const ascendingLabel = (0, core_1.useCrispMessage)(ascendingLabelProp, "Ascending");
     const descendingLabel = (0, core_1.useCrispMessage)(descendingLabelProp, "Descending");
+    const viewSettingsLabel = (0, core_1.useCrispMessage)(viewSettingsLabelProp, "View settings");
+    const reorderAttributeLabel = (0, core_1.useCrispMessage)(reorderAttributeLabelProp, "Reorder attribute");
+    const addAttributeToViewLabel = (0, core_1.useCrispMessage)(addAttributeToViewLabelProp, "Add attribute to view");
+    const searchAttributesPlaceholder = (0, core_1.useCrispMessage)(searchAttributesPlaceholderProp, "Search attributes…");
     // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
     // their own — a whole lookup table, not one string — so they translate
     // straight from the provider's dictionary at the two spots they render
@@ -211,10 +215,17 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
     // gets `columns` on the other, unchanged from before either prop existed.
     const sortColumns = sortColumnsProp ?? columns ?? [];
     const filterColumns = filterColumnsProp ?? columns ?? [];
+    const viewColumns = viewColumnsProp ?? columns ?? [];
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
+    // #590: "everything shown" unless told otherwise -- lazy initializer so
+    // this only reads `viewColumns` once, at mount, the same way `defaultSorts`/
+    // `defaultFilters` above seed once and are never re-derived from a prop
+    // that may keep changing identity across renders.
+    const [shownKeysState, setShownKeysState] = React.useState(() => defaultShownKeys ?? viewColumns.map((c) => c.key));
     const sorts = sortsProp ?? sortsState;
     const filters = filtersProp ?? filtersState;
+    const shownKeys = shownKeysProp ?? shownKeysState;
     const putSorts = (next) => {
         if (sortsProp === undefined)
             setSortsState(next);
@@ -225,11 +236,28 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
             setFiltersState(next);
         onFiltersChange?.(next);
     };
+    const putShownKeys = (next) => {
+        if (shownKeysProp === undefined)
+            setShownKeysState(next);
+        onShownKeysChange?.(next);
+    };
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
     // filters the "isanyof" checkbox list, same lifetime as filterQuery above
     const [anyOfQuery, setAnyOfQuery] = React.useState("");
+    const [dragAttr, setDragAttr] = React.useState(null);
+    // #590: the popover has two screens -- the draggable shown-attribute list
+    // (default) and, behind "Add attribute to view", a search list of the
+    // rest. Measured live, 2026-09-25: clicking "View settings" opens a
+    // `role="dialog"` of dnd-kit `aria-roledescription="sortable"` rows --
+    // grip, type icon, label -- with no search box, ending in a static
+    // "Add attribute to view" row; each row also carries a "View attribute
+    // menu" kebab whose own contents weren't explored (undefined scope, not
+    // built here -- hiding an attribute is a trailing control instead, see
+    // the hide button below).
+    const [addingAttribute, setAddingAttribute] = React.useState(false);
+    const [addAttrQuery, setAddAttrQuery] = React.useState("");
     // close any open menu on outside click (anything not inside a menu or its
     // trigger) or Escape
     React.useEffect(() => {
@@ -292,6 +320,27 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
         putFilters(filters.filter((c) => c.id !== id));
         setOpenMenu(null);
     };
+    // #590: shown attributes, in `shownKeys`' order -- a key with no matching
+    // `viewColumns` entry (stale state after a column is removed upstream)
+    // drops out rather than rendering a blank row.
+    const shownAttrs = shownKeys
+        .map((k) => viewColumns.find((c) => c.key === k))
+        .filter((c) => c != null);
+    const hiddenAttrs = viewColumns.filter((c) => !shownKeys.includes(c.key));
+    const moveAttr = (from, to) => {
+        if (from === to)
+            return;
+        const next = [...shownKeys];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        putShownKeys(next);
+    };
+    const hideAttr = (key) => putShownKeys(shownKeys.filter((k) => k !== key));
+    const showAttr = (key) => {
+        putShownKeys([...shownKeys, key]);
+        setAddingAttribute(false);
+        setAddAttrQuery("");
+    };
     // #594: the filter chip's kebab is a real role="menu" (crisp/#188's shared
     // model — arrows, Home/End, typeahead, Escape), not a hand-rolled div like
     // the sort/condition popovers above (those are role="dialog", which makes
@@ -381,7 +430,31 @@ function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: fi
                                                         });
                                                     }, children: v }, v));
                                             })] }))] }))] }, cond.id));
-                }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-toolgroup", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost", onClick: () => {
+                                if (openMenu === "viewsettings") {
+                                    setOpenMenu(null);
+                                }
+                                else {
+                                    setAddingAttribute(false);
+                                    setAddAttrQuery("");
+                                    setOpenMenu("viewsettings");
+                                }
+                            }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "viewsettings", "data-menu-trigger": true, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel] }), openMenu === "viewsettings" &&
+                            (addingAttribute ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: [(0, jsx_runtime_1.jsx)("input", { className: "crisp-tabletoolbar-menu-input", placeholder: searchAttributesPlaceholder, "aria-label": searchAttributesPlaceholder, 
+                                        // biome-ignore lint/a11y/noAutofocus: focus the search box on open, same as Filter's field picker
+                                        autoFocus: true, value: addAttrQuery, onChange: (e) => setAddAttrQuery(e.target.value) }), hiddenAttrs
+                                        .filter((col) => col.label
+                                        .toLowerCase()
+                                        .includes(addAttrQuery.trim().toLowerCase()))
+                                        .map((col) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => showAttr(col.key), children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)("span", { style: { width: 15 } })), col.label] }, col.key)))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                                            if (dragAttr !== null)
+                                                e.preventDefault();
+                                        }, onDrop: () => {
+                                            if (dragAttr !== null)
+                                                moveAttr(dragAttr, i);
+                                            setDragAttr(null);
+                                        }, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.GripVertical, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? ((0, jsx_runtime_1.jsx)(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), (0, jsx_runtime_1.jsx)("div", { className: "crisp-tabletoolbar-sort-addrow", children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-spacer" }), count != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

package/dist/cjs/components/tooltip/tooltip.js

@@ -68,7 +68,7 @@ function mergeRefs(...refs) {
  * carry them for the same reason it can't carry `aria-describedby` (below):
  * a screen reader reads state off the focused element, not an ancestor.
  */
-exports.Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, "aria-describedby": restDescribedBy, 
+exports.Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, variant = "plain", "aria-describedby": restDescribedBy, 
 // Not forwarded, even though a composer's other rest props are
 // (below): `style` sizes a VISUAL box, and Tooltip's wrapper has none
 // of its own -- the box that matters is whatever the consumer's own
@@ -152,7 +152,7 @@ style: _style, ...rest }, forwardedRef) => {
     };
     const portal = open &&
         pos != null &&
-        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: tipId, role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)(), style: {
+        (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { id: tipId, role: "tooltip", className: (0, tooltip_recipe_1.tooltipRecipe)({ variant }), style: {
                 left: pos.left,
                 top: pos.top,
                 transform: pos.below

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

@@ -14,6 +14,16 @@ const tokens_1 = require("../../tokens");
 // (#101112, the same "dark pill" ink NavItem's own text uses) and
 // line100's light hex (#eeeff1) — both theme-constant, same as before,
 // just the wrong pair.
+//
+// crisp#563: this `boxShadow` is Attio's PLAIN tooltip (a truncated header
+// label, measured on "Twitter follower count") — still an uncorroborated
+// single sample, flagged for its own re-measurement pass, not touched here.
+// Attio has a SECOND, visually similar but structurally different tooltip
+// for a reference-column header (icon + the referenced type's name after
+// the label, crisp#580) with its own measured shadow — an inset ring plus
+// two offset shadows, `variant: "reference"` below. Background, text
+// colour, radius, padding and font are identical between the two measured
+// samples; only the shadow differs.
 const spec = (0, core_1.defineSpec)({
     name: "tooltip",
     base: {
@@ -38,7 +48,34 @@ const spec = (0, core_1.defineSpec)({
         // An at-rule whose body is declarations rather than rules, so a part
         // expresses it directly: the entry state the overlay animates from.
         { selector: "@starting-style", decls: { opacity: 0 } },
+        // #580: the icon + referenced-type-name row a `variant="reference"`
+        // consumer (DataTable/RecordsTable's `ThLabel`) composes into `content`.
+        // Lives here, not in the caller's inline style, so it reads its gap from
+        // the token contract like every other measured value on this surface —
+        // `content` is portaled straight into this bubble regardless of which
+        // component built the JSX, so a nested selector reaches it the same way
+        // it reaches anything else rendered inside `.crisp-tooltip`.
+        {
+            selector: "& .crisp-tooltip-reference-row",
+            decls: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: tokens_1.contract.space["1"],
+            },
+        },
     ],
+    variants: {
+        variant: {
+            // Inherits `base`'s boxShadow untouched -- crisp#563 updates that
+            // single value when it re-measures the plain tooltip, and this
+            // variant picks the correction up for free.
+            plain: {},
+            reference: {
+                boxShadow: "rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0",
+            },
+        },
+    },
+    defaultVariants: { variant: "plain" },
 });
 exports.spec = spec;
 const config = (0, core_1.specToRecipe)(spec);

package/dist/cjs/product/authshell/authshell.js

@@ -16,6 +16,6 @@ function AuthShell({ progress, logo, title, children, preview, footer, className
     const pct = hasProgress
         ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
         : 0;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, authshell_recipe_1.authshellRecipe)({ className }), ...rest, children: [hasProgress && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-logo", children: logo }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-pane", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-body", children: [title != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-title", children: title })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-footer", children: footer })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, authshell_recipe_1.authshellRecipe)({ className }), "data-single-pane": preview == null ? "" : undefined, ...rest, children: [hasProgress && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-logo", children: logo }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-pane", children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-authshell-body", children: [title != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-title", children: title })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && (0, jsx_runtime_1.jsx)("div", { className: "crisp-authshell-footer", children: footer })] }));
 }
 AuthShell.displayName = "AuthShell";

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

@@ -10,25 +10,43 @@ const tokens_1 = require("../../tokens");
 // from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
 // at the container query below) — the pane drops out in JS somewhere between a
 // measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
+//
+// crisp#653: that two-pane card's own 692px height, border and 420px pane
+// width were measured for a SPECIFIC screen with a real product-preview
+// pane -- omitting `preview` (`data-single-pane`, set by the component) used
+// to keep all three anyway, leaving a bordered box with a huge empty area
+// under short content. Attio's own single-pane screen (`app.attio.com/login`,
+// reachable in a fresh logged-out browser context -- no session needed) has
+// NO card at all: every ancestor of its "Sign in" heading measured
+// `border: 0px none`, `box-shadow: none`, `background: transparent`, a
+// 360-364px content column (not 420px), sized to its own content and
+// roughly centred in the viewport rather than pinned near the top.
+// `data-single-pane` now drops the card chrome and narrows the body to
+// match; the two-pane card is unchanged.
 const config = (0, core_1.defineRecipe)({
     name: "authshell",
     base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
     background: ${tokens_1.contract.bgSurface}; font-family: ${tokens_1.contract.font.sans}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; color: ${tokens_1.contract.fgPrimary};
     -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 
+    &[data-single-pane] { justify-content: center; }
+
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${tokens_1.contract.borderDefault}; }
     & .crisp-authshell-progress-fill { height: 2px; background: ${tokens_1.contract.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
     & .crisp-authshell-logo { margin-top: ${tokens_1.contract.space["8"]}; height: 24px; display: flex; align-items: center; }
 
     & .crisp-authshell-card { margin-top: ${tokens_1.contract.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${tokens_1.contract.borderSubtle}; overflow: hidden; }
+    &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }
 
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    &[data-single-pane] .crisp-authshell-pane { flex: 0 0 auto; padding: 0; }
 
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: ${tokens_1.contract.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${tokens_1.contract.fgPrimary} 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, ${tokens_1.contract.bgSubtle} 0%, transparent) 0%, ${tokens_1.contract.bgSubtle} 100%); pointer-events: none; }
 
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${tokens_1.contract.space["8"]}; align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
 
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.4px; color: ${tokens_1.contract.fgPrimary}; align-self: stretch; }
 

package/dist/cjs/product/comments/comments.js

@@ -46,13 +46,6 @@ const menu_1 = require("../../components/menu");
 const popover_1 = require("../../components/popover");
 const core_1 = require("../../core");
 const comments_recipe_1 = require("./comments.recipe");
-/** A single literal JSX occurrence for the reply glyph, used at two sizes --
- * so the RTL-mirroring sweep (which counts the flip-marker attribute against
- * source-text occurrences, not runtime renders) sees one mark for one
- * direction-bearing icon, not two. */
-function ReplyGlyph({ size }) {
-    return ((0, jsx_runtime_1.jsx)(lucide_react_1.CornerUpLeft, { "data-rtl-flip": "", size: size, strokeWidth: 2, "aria-hidden": "true" }));
-}
 const DEFAULT_EMOJI = [
     "👍",
     "👎",
@@ -159,7 +152,7 @@ function serializeComposerField(field) {
  * disabled until the field holds text. Uncontrolled — reads its own DOM on
  * submit, the same shape `RichTextEditor` uses for its body.
  */
-const Composer = React.forwardRef(function Composer({ placeholder, postLabel, mentionTrigger, renderMentionPicker, replyToolLabel, mentionToolLabel, onSubmit, }, ref) {
+const Composer = React.forwardRef(function Composer({ placeholder, postLabel, mentionTrigger, renderMentionPicker, mentionToolLabel, onSubmit, }, ref) {
     const fieldRef = React.useRef(null);
     const [empty, setEmpty] = React.useState(true);
     const [mention, setMention] = React.useState(null);
@@ -295,15 +288,15 @@ const Composer = React.forwardRef(function Composer({ placeholder, postLabel, me
                         e.preventDefault();
                         submit();
                     }
-                } }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-composer-foot", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-composer-tools", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-tool", "aria-label": replyToolLabel, children: (0, jsx_runtime_1.jsx)(ReplyGlyph, { size: 14 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-tool", "aria-label": mentionToolLabel, onClick: () => {
-                                    const field = fieldRef.current;
-                                    if (!field)
-                                        return;
-                                    field.focus();
-                                    document.execCommand("insertText", false, mentionTrigger);
-                                    syncEmpty();
-                                    updateMention();
-                                }, children: "@" })] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-post", disabled: empty, onClick: submit, children: postLabel })] }), mention &&
+                } }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-composer-foot", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-composer-tools", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-tool", "aria-label": mentionToolLabel, onClick: () => {
+                                const field = fieldRef.current;
+                                if (!field)
+                                    return;
+                                field.focus();
+                                document.execCommand("insertText", false, mentionTrigger);
+                                syncEmpty();
+                                updateMention();
+                            }, children: "@" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-post", disabled: empty, onClick: submit, children: postLabel })] }), mention &&
                 renderMentionPicker?.({
                     query: mention.query,
                     anchor: mention.anchor,
@@ -312,7 +305,7 @@ const Composer = React.forwardRef(function Composer({ placeholder, postLabel, me
                 })] }));
 });
 function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel, copyLinkLabel, deleteLabel, addReactionLabel, reactionSearchLabel, emojiOptions, resolvable, resolved, resolvedLabel, onReply, onReact, onResolve, onCopyLink, onDeleteRequest, }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row", children: [(0, jsx_runtime_1.jsx)(AuthorAvatar, { author: comment.author }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-resolved-label", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-author", children: comment.author.name }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-time", children: comment.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-actions", children: [onReply && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: (0, jsx_runtime_1.jsx)(ReplyGlyph, { size: 16 }) })), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row", children: [(0, jsx_runtime_1.jsx)(AuthorAvatar, { author: comment.author }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-resolved-label", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-author", children: comment.author.name }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-time", children: comment.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-actions", children: [onReply && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
 }
 /**
  * Per-record comment threads (crisp#625) — measured live on app.attio.com's
@@ -323,7 +316,7 @@ function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel,
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
  */
-function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerReplyToolLabel: composerReplyToolLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }) {
+function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved = false, onShowResolvedChange, onlyMine = false, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions = DEFAULT_EMOJI, mentionTrigger = "@", renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }) {
     const closeLabel = (0, core_1.useCrispMessage)(closeLabelProp, "Close");
     const backLabel = (0, core_1.useCrispMessage)(backLabelProp, "Back");
     const title = (0, core_1.useCrispMessage)(titleProp, "All comments");
@@ -349,7 +342,6 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
     const deleteConfirmBody = (0, core_1.useCrispMessage)(deleteConfirmBodyProp, "You're about to delete this comment. Once deleted it cannot be restored.");
     const deleteConfirmActionLabel = (0, core_1.useCrispMessage)(deleteConfirmActionLabelProp, "Delete");
     const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
-    const composerReplyToolLabel = (0, core_1.useCrispMessage)(composerReplyToolLabelProp, "Reply");
     const composerMentionToolLabel = (0, core_1.useCrispMessage)(composerMentionToolLabelProp, "Mention someone");
     const [internalActiveId, setInternalActiveId] = React.useState(null);
     const activeThreadId = activeThreadIdProp ?? internalActiveId;
@@ -394,7 +386,7 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
                             ? resolvedByYouLabel
                             : (resolvedByLabel?.(t.resolvedBy.name) ??
                                 `Resolved by ${t.resolvedBy.name}`)
-                        : undefined, onReply: () => setActiveThreadId(t.id), onReact: (emoji) => onReact(t.id, t.root.id, emoji), onResolve: onResolve ? () => onResolve(t.id) : undefined, onCopyLink: () => copyLink(t.id, t.root.id), onDeleteRequest: () => setDeleteTarget({ threadId: t.id, commentId: t.root.id }) }, t.id)))) }), (0, jsx_runtime_1.jsx)(Composer, { placeholder: activeThread ? replyPlaceholder : composerPlaceholder, postLabel: activeThread ? replyPostLabel : postLabel, mentionTrigger: mentionTrigger, renderMentionPicker: renderMentionPicker, replyToolLabel: composerReplyToolLabel, mentionToolLabel: composerMentionToolLabel, onSubmit: (text) => onPost(text, activeThread ? activeThread.id : null) }, activeThread ? activeThread.id : "root"), (0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
+                        : undefined, onReply: () => setActiveThreadId(t.id), onReact: (emoji) => onReact(t.id, t.root.id, emoji), onResolve: onResolve ? () => onResolve(t.id) : undefined, onCopyLink: () => copyLink(t.id, t.root.id), onDeleteRequest: () => setDeleteTarget({ threadId: t.id, commentId: t.root.id }) }, t.id)))) }), (0, jsx_runtime_1.jsx)(Composer, { placeholder: activeThread ? replyPlaceholder : composerPlaceholder, postLabel: activeThread ? replyPostLabel : postLabel, mentionTrigger: mentionTrigger, renderMentionPicker: renderMentionPicker, mentionToolLabel: composerMentionToolLabel, onSubmit: (text) => onPost(text, activeThread ? activeThread.id : null) }, activeThread ? activeThread.id : "root"), (0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
                     if (!open)
                         setDeleteTarget(null);
                 }, title: deleteConfirmTitle, children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogBody, { children: deleteConfirmBody }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", size: "md", onClick: () => setDeleteTarget(null), children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "danger", size: "md", onClick: () => {