@crisp-ui-kit/crisp 0.54.4 → 0.54.5

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/personchip/personchip.js

@@ -45,6 +45,12 @@ function initials(name) {
  * fixed-size.
  */
 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 })] }));
+    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 })] }));
 }
 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/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: () => {

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/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/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/personchip/personchip.js

@@ -42,6 +42,12 @@ function initials(name) {
  * fixed-size.
  */
 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 })] }));
+    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 })] }));
 }
 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

package/dist/esm/product/comments/comments.js

@@ -8,13 +8,6 @@ import { Menu, MenuCheckboxItem, MenuItem } from "../../components/menu/index.js
 import { Popover } from "../../components/popover/index.js";
 import { matchMentionTrigger, useCrispMessage, } from "../../core/index.js";
 import { commentsRecipe } from "./comments.recipe.js";
-/** 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 (_jsx(CornerUpLeft, { "data-rtl-flip": "", size: size, strokeWidth: 2, "aria-hidden": "true" }));
-}
 const DEFAULT_EMOJI = [
     "👍",
     "👎",
@@ -121,7 +114,7 @@ export 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);
@@ -257,15 +250,15 @@ const Composer = React.forwardRef(function Composer({ placeholder, postLabel, me
                         e.preventDefault();
                         submit();
                     }
-                } }), _jsxs("div", { className: "crisp-comments-composer-foot", children: [_jsxs("div", { className: "crisp-comments-composer-tools", children: [_jsx("button", { type: "button", className: "crisp-comments-tool", "aria-label": replyToolLabel, children: _jsx(ReplyGlyph, { size: 14 }) }), _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: "@" })] }), _jsx("button", { type: "button", className: "crisp-comments-post", disabled: empty, onClick: submit, children: postLabel })] }), mention &&
+                } }), _jsxs("div", { className: "crisp-comments-composer-foot", children: [_jsx("div", { className: "crisp-comments-composer-tools", children: _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: "@" }) }), _jsx("button", { type: "button", className: "crisp-comments-post", disabled: empty, onClick: submit, children: postLabel })] }), mention &&
                 renderMentionPicker?.({
                     query: mention.query,
                     anchor: mention.anchor,
@@ -274,7 +267,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 (_jsxs("div", { className: "crisp-comments-row", children: [_jsx(AuthorAvatar, { author: comment.author }), _jsxs("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && (_jsxs("div", { className: "crisp-comments-resolved-label", children: [_jsx(Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), _jsxs("div", { className: "crisp-comments-row-head", children: [_jsx("span", { className: "crisp-comments-author", children: comment.author.name }), _jsx("span", { className: "crisp-comments-time", children: comment.time })] }), _jsx("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && (_jsxs("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => (_jsxs("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [_jsx("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), _jsx(Popover, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: _jsx(SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), _jsxs("div", { className: "crisp-comments-row-actions", children: [onReply && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: _jsx(ReplyGlyph, { size: 16 }) })), _jsx(Popover, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: _jsx(Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), _jsx(MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
+    return (_jsxs("div", { className: "crisp-comments-row", children: [_jsx(AuthorAvatar, { author: comment.author }), _jsxs("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && (_jsxs("div", { className: "crisp-comments-resolved-label", children: [_jsx(Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), _jsxs("div", { className: "crisp-comments-row-head", children: [_jsx("span", { className: "crisp-comments-author", children: comment.author.name }), _jsx("span", { className: "crisp-comments-time", children: comment.time })] }), _jsx("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && (_jsxs("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => (_jsxs("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [_jsx("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), _jsx(Popover, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: _jsx(SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), _jsxs("div", { className: "crisp-comments-row-actions", children: [onReply && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: _jsx(CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), _jsx(Popover, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: _jsx(Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), _jsx(MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
 }
 /**
  * Per-record comment threads (crisp#625) — measured live on app.attio.com's
@@ -285,7 +278,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.
  */
-export 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 }) {
+export 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 = useCrispMessage(closeLabelProp, "Close");
     const backLabel = useCrispMessage(backLabelProp, "Back");
     const title = useCrispMessage(titleProp, "All comments");
@@ -311,7 +304,6 @@ export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, sh
     const deleteConfirmBody = useCrispMessage(deleteConfirmBodyProp, "You're about to delete this comment. Once deleted it cannot be restored.");
     const deleteConfirmActionLabel = useCrispMessage(deleteConfirmActionLabelProp, "Delete");
     const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
-    const composerReplyToolLabel = useCrispMessage(composerReplyToolLabelProp, "Reply");
     const composerMentionToolLabel = useCrispMessage(composerMentionToolLabelProp, "Mention someone");
     const [internalActiveId, setInternalActiveId] = React.useState(null);
     const activeThreadId = activeThreadIdProp ?? internalActiveId;
@@ -356,7 +348,7 @@ export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, sh
                             ? 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)))) }), _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"), _jsxs(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)))) }), _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"), _jsxs(Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
                     if (!open)
                         setDeleteTarget(null);
                 }, title: deleteConfirmTitle, children: [_jsx(DialogBody, { children: deleteConfirmBody }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", size: "md", onClick: () => setDeleteTarget(null), children: cancelLabel }), _jsx(Button, { type: "button", intent: "danger", size: "md", onClick: () => {

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

@@ -95,29 +95,44 @@ const config = 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, ${c.bgBrandSolid} 12%, transparent); color: ${c.bgBrandSolid}; font-weight: ${c.weight.medium}; user-select: none; }
-
+    ${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: ${c.space["2"]}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: ${e.floating}; }
-    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: ${c.space["2"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised}; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
-    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
-    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: ${c.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: ${c.radius.sm}; background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-    & .crisp-comments-reactionpicker-item:hover { background: ${c.bgRaised}; }
+    .crisp-comments-reactionpicker { font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 240px; padding: ${c.space["2"]}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: ${e.floating}; }
+    .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: ${c.space["2"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgRaised}; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; }
+    .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, ${c.fgPrimary} 40%, transparent); }
+    .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: ${c.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: ${c.radius.sm}; background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    .crisp-comments-reactionpicker-item:hover { background: ${c.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: ${c.space["1"]}; border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); }
-    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 38%, transparent); }
-    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
-    ${rtlFlipCss}`,
-    variants: {},
-    defaultVariants: {},
-    compoundVariants: [],
+    .crisp-comments-badge { box-sizing: border-box; font-family: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${c.space["1"]}; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); }
+    .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.fgPrimary} 38%, transparent); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
+  `,
 });
 export const commentsRecipe = resolveRecipe(config);
 export default config;

package/dist/styles.css

@@ -447,7 +447,7 @@
 }
 
 .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; }
@@ -2090,6 +2090,27 @@
   }
 }
 
+
+    /* 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; }
@@ -2145,21 +2166,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/styles.layered.css

@@ -448,7 +448,7 @@
 }
 
 .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; }
@@ -2091,6 +2091,27 @@
   }
 }
 
+
+    /* 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; }
@@ -2146,21 +2167,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/types/components/chip/chip.recipe.d.ts

@@ -6,6 +6,7 @@ declare const spec: {
         readonly gap: "3px";
         readonly height: `var(--${string})`;
         readonly minWidth: 0;
+        readonly maxWidth: "100%";
         readonly paddingInline: `var(--${string})`;
         readonly borderRadius: `var(--${string})`;
         readonly fontSize: `var(--${string})`;

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -119,6 +119,37 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
      */
     inline?: boolean;
     className?: string;
+    /**
+     * The full set of attributes View settings offers — every attribute on
+     * the object, shown or not. Defaults to `columns`. Omit both, along with
+     * `shownKeys`, and the trigger still renders but the popover has nothing
+     * to list, the same "still renders, empty popover" contract `columns`
+     * already documents for Sort/Filter.
+     */
+    viewColumns?: TableToolbarColumn[];
+    /**
+     * Ordered keys of the attributes currently shown in the view — what
+     * the popover's draggable list reflects and reorders. Omit for internal
+     * state, seeded from `defaultShownKeys` or (failing that) every key in
+     * `viewColumns`/`columns`, in their given order — i.e. "everything shown"
+     * unless told otherwise.
+     */
+    shownKeys?: string[];
+    defaultShownKeys?: string[];
+    onShownKeysChange?: (keys: string[]) => void;
+    /** Text on the View settings trigger (default "View settings"). */
+    viewSettingsLabel?: string;
+    /** aria-label on a shown attribute's drag grip (default "Reorder attribute"). */
+    reorderAttributeLabel?: string;
+    /** aria-label on a shown attribute's hide control — receives the
+     *  attribute's label (default `Hide ${label} from view`). */
+    hideAttributeLabel?: (label: string) => string;
+    /** Label on the popover's footer action that opens the add-attribute
+     *  search screen (default "Add attribute to view"), and the heading of
+     *  that screen once open. */
+    addAttributeToViewLabel?: string;
+    /** Placeholder in the add-attribute search box (default "Search attributes…"). */
+    searchAttributesPlaceholder?: string;
 };
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
@@ -145,7 +176,7 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export declare 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 }: TableToolbarProps): React.JSX.Element;
+export declare 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 }: TableToolbarProps): React.JSX.Element;
 export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
     /** Drawn the way Sort/Filter are once a condition is set (#399). */
     active?: boolean;

package/dist/types/product/comments/comments.d.ts

@@ -144,7 +144,6 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
     deleteConfirmBody?: string;
     deleteConfirmActionLabel?: string;
     cancelLabel?: string;
-    composerReplyToolLabel?: string;
     composerMentionToolLabel?: string;
     className?: string;
 };
@@ -157,7 +156,7 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
  */
-export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, 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 }: CommentsPanelProps): React.JSX.Element;
+export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, 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 }: CommentsPanelProps): React.JSX.Element;
 export declare namespace CommentsPanel {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.4",
+  "version": "0.54.5",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",