@crisp-ui-kit/crisp 0.54.4 → 0.54.6

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

@@ -98,29 +98,44 @@ const config = (0, core_1.defineRecipe)({
        RichTextEditor's own \`.crisp-rte-mention\` (crisp#428), reused here
        rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 12%, transparent); color: ${tokens_1.contract.bgBrandSolid}; font-weight: ${tokens_1.contract.weight.medium}; user-select: none; }
-
+    ${core_1.rtlFlipCss}`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+    // Two pieces below intentionally live OUTSIDE the nested \`base\` above,
+    // the same reason Menu's own \`.crisp-menu-content\` does (menu.recipe.ts's
+    // own comment, crisp#357): nesting compiles to a descendant combinator
+    // scoped to \`.crisp-comments\`, which needs real DOM containment. Both of
+    // these escape it -- \`ReactionPicker\` because \`Popover\` portals its
+    // content to \`document.body\`, and \`CommentCountBadge\` because it's built
+    // to be dropped into a table cell that has no \`.crisp-comments\` ancestor
+    // at all (its own module doc comment). Nested, this shipped invisible:
+    // \`CommentCountBadge\`'s dot rendered at 0×0 and the reaction picker fell
+    // back to \`Popover\`'s own generic (unstyled-by-this-recipe) surface --
+    // caught taking this component's own screenshots, not by any gate, since
+    // \`spec-check\` reads recipe source text and both classes were right there
+    // in it.
+    globalCss: `
     /* Reaction picker -- see \`ReactionPicker\`'s own doc comment: the exact
        chrome wasn't independently pixel-measured this pass (screenshot
        capture broke mid-session), so this reuses Menu's already-measured
        floating-popover shell rather than a new value. */
-    & .crisp-comments-reactionpicker { width: 240px; padding: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.floating}; }
-    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); }
-    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: ${tokens_1.contract.space["0.5"]}; max-height: 160px; overflow-y: auto; }
-    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-    & .crisp-comments-reactionpicker-item:hover { background: ${tokens_1.contract.bgRaised}; }
+    .crisp-comments-reactionpicker { font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 240px; padding: ${tokens_1.contract.space["2"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: ${tokens_1.elevation.floating}; }
+    .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["2"]}; border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 40%, transparent); }
+    .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: ${tokens_1.contract.space["0.5"]}; max-height: 160px; overflow-y: auto; }
+    .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    .crisp-comments-reactionpicker-item:hover { background: ${tokens_1.contract.bgRaised}; }
 
     /* Row badge (CommentCountBadge) -- lives in its own class family so the
        grid lanes can drop it into a cell without pulling in the panel's
        CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
        icon + 12px count text, both at 55% ink, replacing the dot. */
-    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); }
-    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 38%, transparent); }
-    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
-    ${core_1.rtlFlipCss}`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    .crisp-comments-badge { box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); }
+    .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 38%, transparent); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
+  `,
 });
 exports.commentsRecipe = (0, core_1.resolveRecipe)(config);
 exports.default = config;

package/dist/cjs/product/recordstable/recordstable.js

@@ -76,8 +76,15 @@ function isLabelTruncated(el) {
  * viewport change, label 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) renders the plain span.
+ *
+ * #580: a `referencedType` column (Attio's own `type: "reference"`) appends
+ * that type's icon + name after the label and switches to `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 label-only,
+ * the `"plain"` variant #534/#558 shipped.
  */
-function ThLabel({ label }) {
+function ThLabel({ label, referencedType, }) {
     const ref = React.useRef(null);
     const [overflowing, setOverflowing] = React.useState(false);
     // biome-ignore lint/correctness/useExhaustiveDependencies: `label` isn't read in the body, but a rename (col.label 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.
@@ -106,7 +113,9 @@ function ThLabel({ label }) {
     // 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: label, asChild: true, open: overflowing ? undefined : false, children: (0, jsx_runtime_1.jsx)("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
+    const ReferenceIcon = referencedType?.icon;
+    const content = referencedType ? ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-tooltip-reference-row", children: [label, ReferenceIcon && (0, jsx_runtime_1.jsx)(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (label);
+    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-recordstable-th-label", children: label }) }));
 }
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
 // types whose cell is an always-interactive picker (not double-click-to-edit)
@@ -1213,7 +1222,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { label: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { label: col.label, referencedType: col.referencedType }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);

package/dist/cjs/product/richtext/richtext.js

@@ -159,6 +159,17 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     // The Range covering a live "/query" (trigger included), mirroring the
     // mention primitive below — only set in "slash" mode.
     const slashRangeRef = React.useRef(null);
+    // #672: the selection the user actually had when they opened the toolbar's
+    // "Body ▾" menu — only set in "toolbar" mode. That menu's own search
+    // input steals DOM focus from the body the moment it opens, so by the
+    // time an item is picked, `window.getSelection()` no longer points at
+    // the block the user meant; without this, `run()`'s `body.focus()`
+    // resets the caret to the start of the document (the FIRST block)
+    // instead, and every conversion landed there regardless of what was
+    // selected. Cloned, since the live Range would otherwise track DOM
+    // mutations (and the selection moving to the search input) between now
+    // and when it's restored.
+    const toolbarSelectionRef = React.useRef(null);
     const blockSearchRef = React.useRef(null);
     const [mention, setMention] = React.useState(null);
     // The Range covering the live "@query" text (trigger included) — kept
@@ -264,6 +275,7 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     }, [readOnly]);
     const closeBlockMenu = React.useCallback(() => {
         slashRangeRef.current = null;
+        toolbarSelectionRef.current = null;
         setBlockMenu(null);
     }, []);
     /** Mirrors the mention-trigger detection below: only handles the caret
@@ -442,6 +454,14 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
             sel?.removeAllRanges();
             sel?.addRange(range);
         }
+        else if (blockMenu?.mode === "toolbar" && toolbarSelectionRef.current) {
+            // #672: no trigger text to delete here (nothing was typed to open
+            // this menu) -- just put the selection back where the user actually
+            // had it, before `applyBlockItem` -> `run()` refocuses the body.
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(toolbarSelectionRef.current);
+        }
         applyBlockItem(item.id);
         closeBlockMenu();
     };
@@ -464,14 +484,21 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     const toggleBlockMenuFromToolbar = () => {
         if (!bar)
             return;
-        setBlockMenu((cur) => cur?.mode === "toolbar"
-            ? null
-            : {
+        setBlockMenu((cur) => {
+            if (cur?.mode === "toolbar")
+                return null;
+            // #672: capture the live selection NOW, before the menu's own search
+            // input (focused by the effect below) steals it away.
+            const sel = window.getSelection();
+            toolbarSelectionRef.current =
+                sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+            return {
                 anchor: { x: bar.x, y: bar.y },
                 query: "",
                 highlighted: 0,
                 mode: "toolbar",
-            });
+            };
+        });
     };
     // biome-ignore lint/correctness/useExhaustiveDependencies: syncEmpty only reads/writes stable refs, same as run()'s own call to it just below
     const insertMention = React.useCallback((item) => {

package/dist/comments.css

@@ -1,3 +1,24 @@
+
+    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact
+       chrome wasn't independently pixel-measured this pass (screenshot
+       capture broke mid-session), so this reuses Menu's already-measured
+       floating-popover shell rather than a new value. */
+    .crisp-comments-reactionpicker { font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
+    .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
+    .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
+
+    /* Row badge (CommentCountBadge) -- lives in its own class family so the
+       grid lanes can drop it into a cell without pulling in the panel's
+       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
+       icon + 12px count text, both at 55% ink, replacing the dot. */
+    .crisp-comments-badge { box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
+    .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
+  
 .crisp-comments {
   display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%; background: var(--crisp-bg-surface); border-inline-start: 1px solid var(--crisp-border-subtle); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -53,21 +74,6 @@
     /* An inserted "@mention" chip in the composer -- same shape as
        RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
-
-    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact chrome wasn't independently pixel-measured this pass (screenshot
-       capture broke mid-session), so this reuses Menu's already-measured floating-popover shell rather than a new value. */
-    & .crisp-comments-reactionpicker { width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
-    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
-    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
-    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
-    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-    & .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
-    /* Row badge (CommentCountBadge) -- lives in its own class family so the grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
-    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
-    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/comments.layered.css

@@ -1,4 +1,25 @@
 @layer crisp-components {
+
+    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact
+       chrome wasn't independently pixel-measured this pass (screenshot
+       capture broke mid-session), so this reuses Menu's already-measured
+       floating-popover shell rather than a new value. */
+    .crisp-comments-reactionpicker { font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
+    .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
+    .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
+
+    /* Row badge (CommentCountBadge) -- lives in its own class family so the
+       grid lanes can drop it into a cell without pulling in the panel's
+       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
+       icon + 12px count text, both at 55% ink, replacing the dot. */
+    .crisp-comments-badge { box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
+    .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
+  
 .crisp-comments {
   display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%; background: var(--crisp-bg-surface); border-inline-start: 1px solid var(--crisp-border-subtle); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -54,21 +75,6 @@
     /* An inserted "@mention" chip in the composer -- same shape as
        RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
-
-    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact chrome wasn't independently pixel-measured this pass (screenshot
-       capture broke mid-session), so this reuses Menu's already-measured floating-popover shell rather than a new value. */
-    & .crisp-comments-reactionpicker { width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
-    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
-    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
-    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
-    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-    & .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
-    /* Row badge (CommentCountBadge) -- lives in its own class family so the grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
-    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
-    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/datatable.css

@@ -114,10 +114,14 @@
     & .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. */
+    /* 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: var(--crisp-fg-primary); 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
+       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

@@ -115,10 +115,14 @@
     & .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. */
+    /* 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: var(--crisp-fg-primary); 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
+       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/chip/chip.recipe.js

@@ -27,6 +27,18 @@ const spec = 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: c.space["1"],
         borderRadius: c.radius.chip,
         fontSize: c.text.lg,

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

@@ -26,8 +26,16 @@ export 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.
@@ -56,7 +64,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 (_jsx(Tooltip, { content: header, asChild: true, open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
+    const ReferenceIcon = referencedType?.icon;
+    const content = referencedType ? (_jsxs("span", { className: "crisp-tooltip-reference-row", children: [header, ReferenceIcon && _jsx(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (header);
+    return (_jsx(Tooltip, { content: content, asChild: true, variant: referencedType ? "reference" : "plain", open: overflowing ? undefined : false, children: _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
@@ -252,6 +262,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
             // translation) can never silently repaint the chip
             return (_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 (_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";
@@ -387,7 +407,8 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
             keywords: query,
         });
     }
-    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(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 (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(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
@@ -1162,7 +1183,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header, referencedType: col.referencedType }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
                                     return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), ...dataStickyCol(i), children: [renaming === col.key ? (_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) => {
@@ -1243,7 +1264,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_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 (_jsxs(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/esm/components/datatable/datatable.recipe.js

@@ -141,6 +141,12 @@ const config = defineRecipe({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${c.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: ${c.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/esm/components/personchip/personchip.js

@@ -39,9 +39,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.
  */
-export function PersonChip({ name, avatar, muted, className, ...props }) {
-    return (_jsxs(Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), children: avatar ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name })] }));
+export function PersonChip({ name, avatar, muted, trailing, className, ...props }) {
+    return (_jsxs(Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [_jsx(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 ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name }), trailing != null && (_jsx("span", { className: "crisp-personchip-trailing", style: { flexShrink: 0 }, children: trailing }))] }));
 }
 PersonChip.displayName = "PersonChip";

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
@@ -138,7 +138,7 @@ export 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.
  */
-export 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 }) {
+export 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
@@ -161,6 +161,10 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const deleteFilterLabel = useCrispMessage(deleteFilterLabelProp, "Delete filter");
     const ascendingLabel = useCrispMessage(ascendingLabelProp, "Ascending");
     const descendingLabel = useCrispMessage(descendingLabelProp, "Descending");
+    const viewSettingsLabel = useCrispMessage(viewSettingsLabelProp, "View settings");
+    const reorderAttributeLabel = useCrispMessage(reorderAttributeLabelProp, "Reorder attribute");
+    const addAttributeToViewLabel = useCrispMessage(addAttributeToViewLabelProp, "Add attribute to view");
+    const searchAttributesPlaceholder = 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
@@ -172,10 +176,17 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     // 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);
@@ -186,11 +197,28 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
             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(() => {
@@ -253,6 +281,27 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         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
@@ -342,7 +391,31 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                         });
                                                     }, children: v }, v));
                                             })] }))] }))] }, cond.id));
-                }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                }), _jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" }), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_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: [_jsx(SlidersHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), viewSettingsLabel] }), openMenu === "viewsettings" &&
+                            (addingAttribute ? (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": addAttributeToViewLabel, children: [_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) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => showAttr(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] })) : (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": viewSettingsLabel, children: [shownAttrs.map((col, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
+                                            if (dragAttr !== null)
+                                                e.preventDefault();
+                                        }, onDrop: () => {
+                                            if (dragAttr !== null)
+                                                moveAttr(dragAttr, i);
+                                            setDragAttr(null);
+                                        }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _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: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] }), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone