@crisp-ui-kit/crisp 0.54.3 → 0.54.4

package/dist/comments.layered.css

@@ -0,0 +1,82 @@
+@layer crisp-components {
+.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; }
+    & .crisp-comments-head { display: flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; height: 49px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); }
+    & .crisp-comments-headbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-headbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-comments-title-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    & .crisp-comments-title { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-comments-breadcrumb { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-comments-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-comments-body--pad-top { padding-top: var(--crisp-space-3); }
+    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body two lines below. Hover actions fade in flush with the name line. */
+    & .crisp-comments-row { position: relative; display: flex; gap: var(--crisp-space-1-5); }
+    & .crisp-comments-row-main { flex: 1; min-width: 0; }
+    & .crisp-comments-row-head { display: flex; align-items: baseline; gap: var(--crisp-space-1-5); height: 20px; }
+    & .crisp-comments-author { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
+    & .crisp-comments-time { font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; }
+    & .crisp-comments-resolved-label { display: flex; align-items: center; gap: var(--crisp-space-1); margin-bottom: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-comments-body-text { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
+    /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
+    & .crisp-comments-row-actions { position: absolute; top: 0; inset-inline-end: 0; display: flex; opacity: 0; pointer-events: none; background: var(--crisp-bg-surface); }
+    & .crisp-comments-row:hover .crisp-comments-row-actions, & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
+    & .crisp-comments-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
+    & .crisp-comments-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-comments-action[data-active] { color: var(--crisp-bg-brand-solid); }
+    /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill, padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
+    & .crisp-comments-reactions { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-1-5); }
+    & .crisp-comments-reaction { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 28px; padding: 4px 8px 4px 6px; border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); font-family: inherit; font-size: 12px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-comments-reaction[data-reacted] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
+    & .crisp-comments-reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--crisp-radius-md); background: transparent; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-row:hover .crisp-comments-reaction-add { opacity: 1; }
+    & .crisp-comments-reaction-add:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    /* Reply-in-thread view -- an indented block of replies below the root. */
+    & .crisp-comments-replies { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); padding-inline-start: var(--crisp-space-4); border-inline-start: 1px solid var(--crisp-border-subtle); }
+    & .crisp-comments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-size: var(--crisp-text-lg); }
+    /* Composer -- measured: 14px/20px body text, 16px gap above the reply/mention icon row, Comment button 84x32 padding 6px 10px radius 9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4 disabled / 1 enabled (no color/background change between the two). */
+    & .crisp-comments-composer { flex-shrink: 0; padding: var(--crisp-space-3) var(--crisp-space-4) var(--crisp-space-4); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-comments-field { min-height: 20px; max-height: 120px; overflow-y: auto; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); outline: none; white-space: pre-wrap; word-break: break-word; }
+    & .crisp-comments-field:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: 2px; }
+    & .crisp-comments-field:empty::before { content: attr(data-placeholder); color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    & .crisp-comments-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--crisp-space-4); }
+    & .crisp-comments-composer-tools { display: flex; align-items: center; gap: var(--crisp-space-1); }
+    & .crisp-comments-tool { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 45%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-comments-tool:hover { color: var(--crisp-fg-primary); }
+    /* Same fill/shadow as Button's own intent="primary" (crisp/button.recipe.ts) --
+       confirmed byte-identical against the live "Comment" button's computed box-shadow, so this reuses that literal rather than re-deriving it. 32px/radius.lg/6px-10px padding has no matching Button `size` yet (24/28/40 are the three that exist), so this stays hand-rolled instead of stretching one of those. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-on-brand); cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { background: var(--crisp-bg-brand-solid-pressed); }
+    & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
+    /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding, elevation.floating -- a plain reuse of crisp's own Menu, so no rules
+       live here; kept as a comment for the record. */
+
+    /* 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); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-comments, .crisp-comments * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+}

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

@@ -1,20 +1,30 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, Plus, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
-import { MenuCheckboxItem } from "../menu/index.js";
+import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
 const OP_LABELS = {
     contains: "contains",
+    doesnotcontain: "does not contain",
+    startswith: "starts with",
+    endswith: "ends with",
     is: "is",
     isnot: "is not",
     isanyof: "is any of",
     empty: "is empty",
     notempty: "is not empty",
 };
+// #619: order and label set match Attio's own text-filter operator picker
+// verbatim (measured live, per RecordsTable's own #578 port of the same
+// set: contains · does not contain · starts with · ends with · is · is not ·
+// empty · not empty).
 const OP_ORDER = [
     "contains",
+    "doesnotcontain",
+    "startswith",
+    "endswith",
     "is",
     "isnot",
     "empty",
@@ -23,7 +33,12 @@ const OP_ORDER = [
 // "isanyof" is appended only for a column that supplies `values` — there is
 // nothing to check off otherwise.
 const opsFor = (col) => col?.values?.length ? [...OP_ORDER, "isanyof"] : OP_ORDER;
-const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const opNeedsValue = (op) => op === "contains" ||
+    op === "doesnotcontain" ||
+    op === "startswith" ||
+    op === "endswith" ||
+    op === "is" ||
+    op === "isnot";
 const opNeedsValues = (op) => op === "isanyof";
 // "Department is any of IT, Finance" past two values becomes "… +N": the
 // chip is one line, and a field can have far more than two facet values.
@@ -71,9 +86,15 @@ export function applyFilters(rows, filters, get = (row, key) => row[key]) {
         const v = f.value.trim().toLowerCase();
         if (f.op === "contains")
             return t.includes(v);
+        if (f.op === "doesnotcontain")
+            return !t.includes(v);
+        if (f.op === "startswith")
+            return t.startsWith(v);
+        if (f.op === "endswith")
+            return t.endsWith(v);
         if (f.op === "is")
             return t === v;
-        return t !== v;
+        return t !== v; // isnot
     }));
 }
 /**
@@ -117,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, 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, ...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
@@ -136,6 +157,8 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const filterFieldLabel = useCrispMessage(filterFieldLabelProp, "Filter by field");
     const filterFieldPlaceholder = useCrispMessage(filterFieldPlaceholderProp, "Filter by…");
     const filterValuePlaceholder = useCrispMessage(filterValuePlaceholderProp, "Value…");
+    const filterOptionsLabel = useCrispMessage(filterOptionsLabelProp, "Filter options");
+    const deleteFilterLabel = useCrispMessage(deleteFilterLabelProp, "Delete filter");
     const ascendingLabel = useCrispMessage(ascendingLabelProp, "Ascending");
     const descendingLabel = useCrispMessage(descendingLabelProp, "Descending");
     // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
@@ -230,6 +253,19 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         putFilters(filters.filter((c) => c.id !== id));
         setOpenMenu(null);
     };
+    // #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
+    // no such promise). `openMenu` already only ever names ONE open surface at
+    // a time, so one hook call at the top level — not one per filter row,
+    // which would break the Rules of Hooks inside `filters.map` below — tracks
+    // whichever chip's kebab is currently open via its content ref.
+    const kebabMenuRef = React.useRef(null);
+    const { onKeyDown: onKebabKeyDown } = useMenuKeyboard({
+        open: typeof openMenu === "string" && openMenu.startsWith("fkebab:"),
+        close: () => setOpenMenu(null),
+        contentRef: kebabMenuRef,
+    });
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template — crisp/#471's
@@ -279,10 +315,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                     .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => addFilter(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }))] }), filters.map((cond) => {
                     const col = filterColumns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
+                    const kebabOpen = openMenu === `fkebab:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
                     return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "aria-label": `${crispMessages.Remove ?? "Remove"} ${col?.label} ${crispMessages.filter ?? "filter"}`, onClick: () => removeFilter(cond.id), children: _jsx(X, { size: 13, strokeWidth: 2 }) })] }), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsx("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => removeFilter(cond.id), children: deleteFilterLabel }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

package/dist/esm/index.js

@@ -73,6 +73,7 @@ export * from "./product/appshell/index.js";
 export * from "./product/authshell/index.js";
 export * from "./product/board/index.js";
 export * from "./product/command/index.js";
+export * from "./product/comments/index.js";
 export * from "./product/entitycard/index.js";
 export * from "./product/flowcanvas/index.js";
 export * from "./product/formdialog/index.js";
@@ -81,6 +82,7 @@ export * from "./product/importdialog/index.js";
 export * from "./product/inbox/index.js";
 export * from "./product/listpage/index.js";
 export * from "./product/navitem/index.js";
+export * from "./product/objectsettings/index.js";
 export * from "./product/onboarding/index.js";
 export * from "./product/recordpage/index.js";
 export * from "./product/recordpanel/index.js";

package/dist/esm/product/board/board.js

@@ -1,18 +1,74 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
 import * as React from "react";
+import { Menu, MenuItem } from "../../components/menu/index.js";
 import { isRtlElement, useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
+const BOARD_AGG_ORDER = [
+    "countEmpty",
+    "countFilled",
+    "percentEmpty",
+    "percentFilled",
+    "sum",
+    "average",
+    "max",
+    "min",
+];
+// English default text, looked up through `useCrispMessages()` (crisp/#471)
+// the same way Board's other built-in fragments already are.
+const AGG_LABEL = {
+    countEmpty: "Count empty",
+    countFilled: "Count filled",
+    percentEmpty: "Percent empty",
+    percentFilled: "Percent filled",
+    sum: "Sum",
+    average: "Average",
+    max: "Max",
+    min: "Min",
+};
+function computeBoardAgg(agg, values) {
+    const filled = values.filter((v) => v != null);
+    const total = values.length;
+    switch (agg) {
+        case "countEmpty":
+            return String(total - filled.length);
+        case "countFilled":
+            return String(filled.length);
+        case "percentEmpty":
+            return total === 0
+                ? "0%"
+                : `${Math.round(((total - filled.length) / total) * 100)}%`;
+        case "percentFilled":
+            return total === 0
+                ? "0%"
+                : `${Math.round((filled.length / total) * 100)}%`;
+        case "sum":
+            return filled.reduce((a, b) => a + b, 0).toLocaleString();
+        case "average":
+            return filled.length === 0
+                ? "0"
+                : (filled.reduce((a, b) => a + b, 0) / filled.length).toLocaleString(undefined, { maximumFractionDigits: 2 });
+        case "max":
+            return filled.length === 0 ? "—" : Math.max(...filled).toLocaleString();
+        case "min":
+            return filled.length === 0 ? "—" : Math.min(...filled).toLocaleString();
+    }
+}
 /**
  * A kanban board with native drag-and-drop between columns. Cards are
  * `draggable`; dropping one on a column reparents it via `onCardsChange`
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, className, ...rest }) {
     // crisp/#471: same resolution order as every other component's own —
     // explicit prop, then a CrispMessagesProvider's translation of the English
     // default, then that default itself.
     const newCardLabel = useCrispMessage(newCardLabelProp, "New");
+    // #604: which BoardAgg each column's footer shows, keyed by column id.
+    // Unset (undefined) means the column still shows the "+ Add calculation"
+    // trigger, exactly like the table footer's own per-column state.
+    const [colAgg, setColAgg] = React.useState({});
     const crispMessages = useCrispMessages();
     const announceMove = announceMoveProp ??
         ((column, card) => card
@@ -92,7 +148,9 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                         // Ctrl+Right at the last column still reaches the browser
                                         if (delta && moveByKey(card, delta))
                                             e.preventDefault();
-                                    }, children: renderCard(card) }, card.id)))] })] }, col.id));
+                                    }, children: renderCard(card) }, card.id)))] }), calc && (_jsx("div", { className: "crisp-board-col-footer", children: _jsx(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
+                                                    AGG_LABEL[colAgg[col.id]] }), _jsx("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
+                                        "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => (_jsxs(MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? (_jsx(Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
             }), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "polite", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -32,6 +32,16 @@ const config = defineRecipe({
     & .crisp-board-card[data-dragging] { opacity: 0.4; }
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    /* #604: a per-column calc footer, mirroring the table's own (measured
+       live, Deals pipeline). Sits below the scrollable card body, not
+       inside it or pinned to it -- Attio's own is position: static, not
+       sticky, so it's a plain flex-shrink:0 sibling here too. */
+    & .crisp-board-col-footer { flex-shrink: 0; padding: ${c.space["1"]} 0; }
+    & .crisp-board-col-calc { display: flex; align-items: center; justify-content: center; gap: ${c.space["1"]}; width: 100%; height: 28px; padding: ${c.space["1"]} ${c.space["2"]}; margin: 0; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); cursor: pointer; }
+    & .crisp-board-col-calc:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-board-col-calc[data-empty] { opacity: 0.7; }
+    & .crisp-board-col-calc-label { text-transform: capitalize; }
+    & .crisp-board-col-calc-value { color: ${c.fgPrimary}; font-variant-numeric: tabular-nums; }
     /* announced, never drawn */
     & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;