@crisp-ui-kit/crisp 0.50.0 → 0.52.0

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

@@ -5,6 +5,13 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // per theme — light uses a blue-tinted 3-layer shadow, dark drops to a plain
 // 2-layer black shadow) with a bordered header (title + close), a scrollable
 // body, and a bordered footer for the primary action.
+//
+// #414: the footer's submit-key caps (⌘/Enter) used to be one span drawing a
+// visible pill (18px, 22%-white background). Attio's own are two separate
+// TRANSPARENT 16x16 glyphs, 4px apart. Their 3px/10px/4px measured values sit
+// between crisp's token steps (space has no 3px, radius starts at 6px, text
+// starts at 11px) — raw px per Golden Rule 3's "genuinely intrinsic size"
+// exception, same as a chip's odd 7px corner.
 const config = defineRecipe({
     name: "dialog",
     base: `display: contents; font-family: ${c.font.sans};
@@ -23,7 +30,8 @@ const config = defineRecipe({
     & .crisp-dialog-field-label { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: ${c.space["2"]}; margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgMuted}; cursor: pointer; }
     & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: ${c.space["2"]}; height: 28px; padding: 0 ${c.space["1"]} 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: ${c.fgOnBrand}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
-    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: rgba(255,255,255,0.22); font-size: ${c.text.xs}; }`,
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: ${c.space["1"]}; }
+    & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: ${c.fgOnBrand}; font-family: inherit; font-style: normal; font-size: 10px; }`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/menu/menu.js

@@ -12,7 +12,7 @@ const MenuContext = React.createContext(null);
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }) {
+export function Menu({ trigger, children, align = "start", open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }) {
     // The surface and the button that opens it were two unconnected nodes: the
     // menu/dialog had no id, so nothing could point at it, and no accessible
     // name, so a screen reader announced a bare "menu"/"dialog". Labelling the
@@ -123,7 +123,9 @@ export function Menu({ trigger, children, align = "start", open: openProp, defau
             setOpen(!open);
         },
     });
-    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
+    return (_jsxs("div", { ref: rootRef, className: menuRecipe({ className }), children: [triggerEl, open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsx("div", { ref: contentRef, className: contentClassName
+                        ? `crisp-menu-content ${contentClassName}`
+                        : "crisp-menu-content", role: "menu", id: surfaceId, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerId, "data-align": align, "data-up": up ? "" : undefined, style: pos, onKeyDown: onContentKeyDown, children: _jsx(MenuContext.Provider, { value: { close }, children: children }) }) }))] }));
 }
 Menu.displayName = "Menu";
 export function MenuItem({ children, icon, shortcut, danger, disabled, onSelect, closeOnSelect = true, }) {

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

@@ -19,6 +19,12 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // intact WITHIN the portaled subtree, only the link back to the
 // trigger-holding root broke). A flat recordstable-tag selector also works
 // unchanged wherever it's rendered, portaled or not, so it needs no split.
+// This is a third, hand-pasted copy of `recordTagCss`
+// (product/recordstable/recordstable.tag.ts) rather than a splice of it:
+// that helper is written `& .crisp-recordstable-tag { ... }` for nesting
+// under a recipe's `base`, which doesn't compile to anything inside a flat
+// `globalCss` block. Keep the two in sync by hand (#380 added the measured
+// `box-shadow: inset 0 0 0 1px <tone ring colour>` here to match).
 const config = defineRecipe({
     name: "multiselect",
     base: `
@@ -74,14 +80,14 @@ const config = defineRecipe({
     .crisp-multiselect-option[aria-selected="true"] .crisp-multiselect-check { background: ${c.bgBrandSolid}; box-shadow: none; color: #fff; }
     .crisp-multiselect-empty { padding: ${c.space["3"]} ${c.space["2"]}; text-align: center; font-size: ${c.text.md}; color: ${c.fgMuted}; }
 
-    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); }
-    .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); }
-    .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
+    .crisp-recordstable-tag { display: inline-flex; align-items: center; height: ${c.size.chip}; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.chip}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: color-mix(in srgb, ${c.fgPrimary} 82%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
+    .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: color-mix(in srgb, ${c.bgBrandSolid} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, ${c.bgSuccess} 16%, transparent); color: color-mix(in srgb, ${c.bgSuccess} 78%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgSuccess} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, ${c.bgWarning} 18%, transparent); color: color-mix(in srgb, ${c.bgWarning} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgWarning} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, ${c.bgDanger} 15%, transparent); color: color-mix(in srgb, ${c.bgDanger} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgDanger} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, ${c.bgPurple} 16%, transparent); color: color-mix(in srgb, ${c.bgPurple} 80%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgPurple} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, ${c.bgCyan} 18%, transparent); color: color-mix(in srgb, ${c.bgCyan} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgCyan} 30%, transparent); }
+    .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgOrange} 30%, transparent); }
   `,
     variants: {
         // Same ring Select's `invalid` draws — see that recipe's comment.

package/dist/esm/components/select/select.js

@@ -16,7 +16,7 @@ function optionText(o) {
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
+export function Select({ options, value, defaultValue, onValueChange, name, required, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", onSearchChange, emptyLabel = "No results", disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }) {
     // Virtual focus: DOM focus stays on the trigger (or the search field), and the
     // active option is named by `aria-activedescendant`. That is the only thing a
     // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
@@ -165,6 +165,7 @@ export function Select({ options, value, defaultValue, onValueChange, name, requ
                 onChange: () => { } })), _jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, "aria-invalid": invalid === true || undefined, disabled: disabled, "data-open": open ? "" : undefined, className: "crisp-select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "crisp-select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "crisp-select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "crisp-select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "crisp-select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsx(FloatingPortal, { sourceRef: rootRef, children: _jsxs("div", { ref: listboxRef, id: listboxId, className: "crisp-select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "crisp-select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                         setQuery(e.target.value);
                                         setHighlight(0);
+                                        onSearchChange?.(e.target.value);
                                     }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "crisp-select-empty", children: emptyLabel })) : (filtered.map((opt, i) => {
                             const isSel = opt.value === selected;
                             // #343: a header renders once per run of same-`group`

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

@@ -11,11 +11,11 @@ const config = defineRecipe({
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: ${c.font.sans}; font-size: ${c.text.lg}; color: ${c.fgPrimary}; }
     & th, & td { position: relative; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; border-bottom: 1px solid ${c.borderSubtle}; border-inline-end: 1px solid ${c.borderSubtle}; text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
+    & th { height: ${c.size.tableHeader}; background: ${c.bgSurface}; border-top: 1px solid ${c.borderSubtle}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; letter-spacing: -0.14px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); user-select: none; }
     & td { color: ${c.fgPrimary}; background: ${c.bgSurface}; }
     & th:last-child, & td:last-child { border-inline-end: none; }
     & tbody tr:last-child td { border-bottom: none; }
-    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: none; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & tfoot td { border-top: 1px solid ${c.borderSubtle}; border-bottom: 1px solid ${c.borderSubtle}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
     & caption { padding: ${c.space["2"]} ${c.space["2"]}; text-align: start; font-size: ${c.text.sm}; color: ${c.fgMuted}; caption-side: bottom; }
     & td[data-align="right"], & th[data-align="right"] { text-align: end; }
     & td[data-align="center"], & th[data-align="center"] { text-align: center; }`,
@@ -28,8 +28,17 @@ const config = defineRecipe({
         // card (default): the bordered rounded surface, unchanged for existing
         // consumers. bleed: drops the outer border/radius/inset so the grid runs
         // edge-to-edge, like RecordsTable's real full-page records grid.
+        //
+        // #439: th/tfoot td now carry their own top/bottom border (below) so a
+        // bleed table's header and calc footer close the same way Attio's own
+        // do. card's own 4-side border already draws that top/bottom edge, so
+        // strip the cells' copies there -- same reasoning as `:last-child`
+        // dropping the inline-end border and `tbody tr:last-child` dropping the
+        // bottom one: the container's edge wins, cells never double it.
         surface: {
-            card: `border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; overflow: hidden;`,
+            card: `border: 1px solid ${c.borderSubtle}; border-radius: ${c.radius.xl}; overflow: hidden;
+        & th { border-top: none; }
+        & tfoot td { border-bottom: none; }`,
             bleed: `border: none; border-radius: 0;`,
         },
     },

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

@@ -20,7 +20,7 @@ export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { di
     & .${CLASS_PREFIX}${p}-search svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: ${c.text.md}; color: ${c.fgPrimary}; width: 180px; }
     & .${CLASS_PREFIX}${p}-search input::placeholder { color: ${c.fgMuted}; }
-    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; transition: background-color .12s; }
+    & .${CLASS_PREFIX}${p}-tool { display: inline-flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.row}; margin: 0; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; background: transparent; box-shadow: inset 0 0 0 1px ${c.borderDefault}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .${CLASS_PREFIX}${p}-tool:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-tool svg { flex-shrink: 0; color: ${c.fgMuted}; }
     & .${CLASS_PREFIX}${p}-tool--active { background: ${c.bgRaised}; }

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

@@ -110,8 +110,19 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * `RecordsTable` renders this same measured chrome internally; this is the
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
+ *
+ * Sort and Filter read the same `columns` list by default, but can be given
+ * their own (`sortColumns`/`filterColumns`) when a consumer's two menus
+ * genuinely offer different fields — Attio's own Tasks page does exactly
+ * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
+ * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", 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 = "Sort", reorderSortLabel = "Reorder sort", noSortsLabel = "No sorts applied to this view.", addSortLabel = "Add sort", learnSortingLabel = "Learn about sorting", selectConditionLabel = "Select condition", sortFieldLabel = "Sort field", sortDirectionLabel = "Sort direction", removeSortLabel = "Remove sort", filterFieldLabel = "Filter by field", filterFieldPlaceholder = "Filter by…", filterValuePlaceholder = "Value…", ascendingLabel = "Ascending", descendingLabel = "Descending", sortTriggerLabel, filterTriggerLabel, inline, ...rest }) {
+    // Each side falls back to the shared `columns` independently — a caller
+    // that only overrides one (Filter's own Record/Created by, say) still
+    // gets `columns` on the other, unchanged from before either prop existed.
+    const sortColumns = sortColumnsProp ?? columns ?? [];
+    const filterColumns = filterColumnsProp ?? columns ?? [];
     const [sortsState, setSortsState] = React.useState(defaultSorts ?? []);
     const [filtersState, setFiltersState] = React.useState(defaultFilters ?? []);
     const sorts = sortsProp ?? sortsState;
@@ -158,7 +169,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     }, [openMenu]);
     const addSort = () => {
         const used = new Set(sorts.map((s) => s.key));
-        const col = columns.find((c) => !used.has(c.key));
+        const col = sortColumns.find((c) => !used.has(c.key));
         if (col)
             putSorts([...sorts, { key: col.key, dir: "asc" }]);
     };
@@ -197,9 +208,9 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template.
     const sortedLabel = sortTriggerLabel
-        ? sortTriggerLabel(sorts, columns)
+        ? sortTriggerLabel(sorts, sortColumns)
         : sorts.length
-            ? `Sorted by ${columns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
+            ? `Sorted by ${sortColumns.find((c) => c.key === sorts[0].key)?.label}${sorts.length > 1 ? ` +${sorts.length - 1}` : ""}`
             : "Sort";
     return (_jsx("div", { className: tabletoolbarRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-tabletoolbar-toolbar", "data-inline": inline ? "" : undefined, children: [_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool${sorts.length ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "sort" ? null : "sort"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "sort", "data-menu-trigger": true, children: [_jsx(ArrowUpDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), sortedLabel] }), openMenu === "sort" && (_jsxs("div", { ref: sortListRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-sortpop", role: "dialog", "aria-label": sortLabel, children: [sorts.length === 0 ? (_jsx("div", { className: "crisp-tabletoolbar-sort-empty", children: noSortsLabel })) : (sorts.map((s, i) => (_jsxs("div", { className: "crisp-tabletoolbar-sort-row", onDragOver: (e) => {
                                         if (dragSort !== null)
@@ -208,7 +219,7 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                         if (dragSort !== null)
                                             moveSort(dragSort, i);
                                         setDragSort(null);
-                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: columns.map((c) => ({
+                                    }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderSortLabel, draggable: true, onDragStart: () => setDragSort(i), onDragEnd: () => setDragSort(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsx(Select, { className: "crisp-tabletoolbar-sort-field", searchable: true, value: s.key, onValueChange: (k) => setSortField(i, k), options: sortColumns.map((c) => ({
                                                 value: c.key,
                                                 label: c.icon ? (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(c.icon, { size: 15, strokeWidth: 1.75 }), c.label] })) : (c.label),
                                                 keywords: c.label,
@@ -229,12 +240,12 @@ export function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsC
                                         ? `Filter · ${activeFilters}`
                                         : "Filter"] }), openMenu === "filter" && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
                                     // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), columns
+                                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
                                     .filter((col) => col.label
                                     .toLowerCase()
                                     .includes(filterQuery.trim().toLowerCase()))
                                     .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 = columns.find((c) => c.key === cond.key);
+                    const col = filterColumns.find((c) => c.key === cond.key);
                     const open = openMenu === `fcond:${cond.id}`;
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);

package/dist/esm/core/caret-rect.js

@@ -0,0 +1,70 @@
+/**
+ * The pixel position of a caret index inside a `<textarea>`/`<input>`, in
+ * viewport coordinates — where a mention picker anchors.
+ *
+ * Neither element exposes caret geometry directly, so this uses the standard
+ * mirror-div technique: an off-screen div replicating every computed style
+ * that affects text layout (font, padding, border, wrapping), holding the
+ * same text up to the caret plus a marker span. The marker's own
+ * `getBoundingClientRect()`, translated back onto the real field's box, is
+ * the caret's actual rendered position — nothing here guesses at line
+ * height or character width itself.
+ */
+export function caretRectInField(field, index) {
+    const div = document.createElement("div");
+    const style = window.getComputedStyle(field);
+    const mirrored = [
+        "boxSizing",
+        "width",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "fontStyle",
+        "letterSpacing",
+        "lineHeight",
+        "textTransform",
+        "textIndent",
+        "textAlign",
+        "wordSpacing",
+        "tabSize",
+    ];
+    for (const prop of mirrored)
+        div.style.setProperty(prop, style[prop]);
+    div.style.position = "absolute";
+    div.style.visibility = "hidden";
+    div.style.top = "0";
+    div.style.left = "-9999px";
+    div.style.whiteSpace =
+        field instanceof HTMLTextAreaElement ? "pre-wrap" : "pre";
+    div.style.wordWrap = "break-word";
+    div.style.overflow = "hidden";
+    div.style.height = "auto";
+    const value = field.value;
+    div.textContent = value.slice(0, index);
+    const marker = document.createElement("span");
+    // a trailing empty span collapses to zero width and reports the wrong x —
+    // give it a hair of content so its box sits exactly at the caret
+    marker.textContent = value.slice(index, index + 1) || ".";
+    div.appendChild(marker);
+    document.body.appendChild(div);
+    div.scrollTop = field.scrollTop;
+    div.scrollLeft = field.scrollLeft;
+    const fieldRect = field.getBoundingClientRect();
+    const divRect = div.getBoundingClientRect();
+    const markerRect = marker.getBoundingClientRect();
+    const x = fieldRect.left + (markerRect.left - divRect.left) - div.scrollLeft;
+    const y = fieldRect.top +
+        (markerRect.top - divRect.top) -
+        div.scrollTop +
+        markerRect.height;
+    document.body.removeChild(div);
+    return { x, y };
+}

package/dist/esm/core/cell-date.js

@@ -31,3 +31,13 @@ export function formatCellDate(d) {
     const pad = (n) => String(n).padStart(2, "0");
     return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
 }
+export function cellDatePrecision(raw) {
+    const m = DATE_ONLY.exec(raw);
+    if (!m)
+        return "day";
+    if (!m[2])
+        return "year";
+    if (!m[3])
+        return "month";
+    return "day";
+}

package/dist/esm/core/index.js

@@ -1,4 +1,5 @@
-export { formatCellDate, parseCellDate } from "./cell-date.js";
+export { caretRectInField } from "./caret-rect.js";
+export { cellDatePrecision, formatCellDate, parseCellDate, } from "./cell-date.js";
 export { cx } from "./cx.js";
 export { defineRecipe } from "./define.js";
 export { withDescribedBy } from "./dialog-description.js";
@@ -6,6 +7,7 @@ export { isRtlElement } from "./direction.js";
 export { FloatingPortal } from "./floating-portal.js";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack.js";
 export { formValueStyle } from "./form-value.js";
+export { matchMentionTrigger, } from "./mention.js";
 export { placeFloating, } from "./place-floating.js";
 export { Primitive } from "./primitive.js";
 export { resolveRecipe } from "./resolve.js";
@@ -14,4 +16,5 @@ export { defineSpec, specToRecipe } from "./spec.js";
 export { useFocusAfterRemoval } from "./use-focus-after-removal.js";
 export { useFormReset } from "./use-form-reset.js";
 export { useLabelAssociation } from "./use-label-association.js";
+export { useMentionTrigger, } from "./use-mention-trigger.js";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion.js";

package/dist/esm/core/mention.js

@@ -0,0 +1,29 @@
+/**
+ * Is there an active "@query" mention trigger ending at the caret?
+ *
+ * Matches the rule every "@mention" implementation (GitHub, Slack, Linear)
+ * actually uses: the trigger character must start a word — the very first
+ * character, or preceded by whitespace — and nothing between it and the
+ * caret may contain whitespace. `foo@bar` is an email/handle stuck to a word,
+ * not a trigger; `@jo next` has already moved past the mention it typed.
+ *
+ * Takes plain text rather than a live DOM node so it is one pure function
+ * usable against a `<textarea>`'s `value` and a `contentEditable` text
+ * node's content alike, and is the one thing here worth unit-testing on its
+ * own — everything downstream of it (caret geometry, DOM insertion) needs a
+ * real browser to verify.
+ */
+export function matchMentionTrigger(textBeforeCaret, trigger = "@") {
+    if (!trigger)
+        return null;
+    const start = textBeforeCaret.lastIndexOf(trigger);
+    if (start === -1)
+        return null;
+    const before = start > 0 ? textBeforeCaret[start - 1] : undefined;
+    if (before !== undefined && !/\s/.test(before))
+        return null;
+    const query = textBeforeCaret.slice(start + trigger.length);
+    if (/\s/.test(query))
+        return null;
+    return { query, start };
+}

package/dist/esm/core/use-mention-trigger.js

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { caretRectInField } from "./caret-rect.js";
+import { matchMentionTrigger, } from "./mention.js";
+/**
+ * Watches a `<textarea>`/`<input>` for an "@query" mention trigger and
+ * reports where to anchor a consumer-supplied picker (#372).
+ *
+ * crisp draws no picker of its own here — GitHub/Slack/Linear-style @mention
+ * UI varies too much by app (avatars, groups, recent-first ordering, a
+ * "create new person" row) to have one measured shape, and this repo's rule
+ * is measure-first, never invented polish. What is shared and worth owning
+ * centrally is the fiddly, easy-to-get-wrong part: deciding when "@" is
+ * actually a trigger rather than part of a word or an email address (see
+ * `matchMentionTrigger`), and where its picker anchors on screen (see
+ * `caretRectInField`, since neither element exposes caret geometry itself).
+ *
+ * Does not close on blur: a picker built from this needs to survive the
+ * field losing focus to a `mousedown` on one of its own rows, the same
+ * problem every floating surface in this repo solves for itself (see
+ * `RichTextEditor`'s toolbar `keepSel`, or `Popover`'s own outside-pointer-
+ * down listener) — so closing on outside interaction is left to the
+ * consumer's picker, which already knows what counts as "outside" for its
+ * own markup.
+ */
+export function useMentionTrigger(ref, { trigger = "@" } = {}) {
+    const [state, setState] = React.useState({
+        open: false,
+        query: "",
+        anchor: null,
+    });
+    const matchRef = React.useRef(null);
+    const recompute = React.useCallback(() => {
+        const el = ref.current;
+        if (!el || el.selectionStart == null) {
+            matchRef.current = null;
+            setState({ open: false, query: "", anchor: null });
+            return;
+        }
+        const caret = el.selectionStart;
+        const match = matchMentionTrigger(el.value.slice(0, caret), trigger);
+        matchRef.current = match;
+        if (!match) {
+            setState({ open: false, query: "", anchor: null });
+            return;
+        }
+        setState({
+            open: true,
+            query: match.query,
+            anchor: caretRectInField(el, caret),
+        });
+    }, [ref, trigger]);
+    React.useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        // "input" covers typing; "click"/"keyup" cover the caret moving without
+        // the text changing (arrow keys, clicking elsewhere on the same line).
+        el.addEventListener("input", recompute);
+        el.addEventListener("click", recompute);
+        el.addEventListener("keyup", recompute);
+        return () => {
+            el.removeEventListener("input", recompute);
+            el.removeEventListener("click", recompute);
+            el.removeEventListener("keyup", recompute);
+        };
+    }, [ref, recompute]);
+    const close = React.useCallback(() => {
+        matchRef.current = null;
+        setState({ open: false, query: "", anchor: null });
+    }, []);
+    const insert = React.useCallback((text) => {
+        const el = ref.current;
+        const match = matchRef.current;
+        if (!el || !match)
+            return;
+        const caret = el.selectionStart ?? el.value.length;
+        const before = el.value.slice(0, match.start);
+        const after = el.value.slice(caret);
+        el.value = before + text + after;
+        const cursor = before.length + text.length;
+        el.focus();
+        el.setSelectionRange(cursor, cursor);
+        // a controlled consumer listens on "input", the same event typing fires
+        el.dispatchEvent(new Event("input", { bubbles: true }));
+        close();
+    }, [ref, close]);
+    return { ...state, close, insert };
+}

package/dist/esm/index.js

@@ -15,6 +15,7 @@ export * from "./components/card/index.js";
 export * from "./components/checkbox/index.js";
 export * from "./components/chip/index.js";
 export * from "./components/columncalc/index.js";
+export * from "./components/composewindow/index.js";
 export * from "./components/contextmenu/index.js";
 export * from "./components/datatable/index.js";
 export * from "./components/datepicker/index.js";