@crisp-ui-kit/crisp 0.54.1 → 0.54.3

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

@@ -34,6 +34,7 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultRows = exports.defaultColumns = exports.parseCellDate = exports.formatCellDate = exports.recordsTableLabels = void 0;
+exports.isLabelTruncated = isLabelTruncated;
 exports.tagTone = tagTone;
 exports.RecordsTable = RecordsTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -52,9 +53,61 @@ const menu_1 = require("../../components/menu");
 const multiselect_1 = require("../../components/multiselect");
 const select_1 = require("../../components/select");
 const switch_1 = require("../../components/switch");
+const tooltip_1 = require("../../components/tooltip");
 const core_1 = require("../../core");
 const company_logos_1 = require("./company-logos");
 const recordstable_recipe_1 = require("./recordstable.recipe");
+// #534: whether an element's own content is being cut off by its own box --
+// the same fact `.crisp-recordstable-th-label`'s CSS ellipsis is silently
+// applying, exported so the comparison itself (not layout) can be
+// mutation-tested without a real browser. Identical to DataTable's own
+// `isLabelTruncated` (components/datatable/datatable.tsx) -- not shared
+// because `product/` can depend on `components/` but not the other way, and
+// this file already duplicates DataTable's other measured header behaviour
+// rather than reach across that boundary.
+function isLabelTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+/**
+ * The header label span: plain when it fits, wrapped in the shared `Tooltip`
+ * (full text, `asChild` so the wrapper never displaces the ellipsis CSS the
+ * span already carries -- see `Tooltip`'s own `asChild` doc) once it's
+ * actually cut off. Re-measures on mount and on resize (column drag,
+ * viewport change, label change) via `ResizeObserver`; SSR-safe the same way
+ * `MiddleTruncate` is -- the DOM is only touched inside an effect, so the
+ * server (and the first client paint) renders the plain span.
+ */
+function ThLabel({ label }) {
+    const ref = React.useRef(null);
+    const [overflowing, setOverflowing] = React.useState(false);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `label` isn't read in the body, but a rename (col.label changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
+    React.useLayoutEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        const measure = () => setOverflowing(isLabelTruncated(el));
+        measure();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [label]);
+    // `Tooltip` always wraps the SAME span (never swapped in/out of the tree
+    // based on `overflowing`) so the span's own DOM node identity survives
+    // every toggle -- a real-browser-only bug (happy-dom has no
+    // ResizeObserver, so the test suite never exercised this path): swapping
+    // between a bare `<span>` and `<Tooltip asChild><span/></Tooltip>` changes
+    // the element type at this position, so React unmounts the old span and
+    // mounts a new one; the effect above never re-runs (its deps are
+    // `[label]`, unchanged), so its ResizeObserver keeps watching the now
+    // -detached old node, whose deferred initial callback then reports 0x0 and
+    // flips `overflowing` straight back to false -- the tooltip would never
+    // actually show. `open={false}` when it fits keeps the Tooltip mounted
+    // (asChild costs no extra DOM either way) but pins it permanently closed,
+    // so hovering a non-overflowing header still opens nothing.
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: label, asChild: true, open: overflowing ? undefined : false, children: (0, jsx_runtime_1.jsx)("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
+}
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
 // types whose cell is an always-interactive picker (not double-click-to-edit)
 const PICKER = new Set(["status", "reference", "date", "tags"]);
@@ -138,6 +191,8 @@ exports.recordsTableLabels = {
     setRecordPlaceholder: "Set a record…",
     noRecords: "No records yet",
     untitled: "Untitled",
+    importCsv: "Import CSV",
+    connectDataSource: "Connect data source",
     agg: {
         none: "None",
         count: "Count all",
@@ -149,6 +204,9 @@ exports.recordsTableLabels = {
     },
     op: {
         contains: "contains",
+        doesnotcontain: "does not contain",
+        startswith: "starts with",
+        endswith: "ends with",
         is: "is",
         isnot: "is not",
         empty: "is empty",
@@ -175,8 +233,17 @@ const compact = new Intl.NumberFormat("en", {
 const CHECK_W = 40;
 const ADDCOL_W = 44;
 const colWidth = (col) => col.width ?? (col.type === "entity" ? 240 : 180);
-const OP_ORDER = ["contains", "is", "isnot", "empty", "notempty"];
-const opNeedsValue = (op) => op === "contains" || op === "is" || op === "isnot";
+const OP_ORDER = [
+    "contains",
+    "doesnotcontain",
+    "startswith",
+    "endswith",
+    "is",
+    "isnot",
+    "empty",
+    "notempty",
+];
+const opNeedsValue = (op) => op !== "empty" && op !== "notempty";
 function matchesFilter(col, row, cond) {
     if (cond.op === "empty")
         return !isFilled(col, row);
@@ -190,6 +257,12 @@ function matchesFilter(col, row, cond) {
         return true;
     if (cond.op === "contains")
         return t.includes(v);
+    if (cond.op === "doesnotcontain")
+        return !t.includes(v);
+    if (cond.op === "startswith")
+        return t.startsWith(v);
+    if (cond.op === "endswith")
+        return t.endsWith(v);
     if (cond.op === "is")
         return t === v;
     return t !== v; // isnot
@@ -472,7 +545,7 @@ function CreateRecordDialog({ open, onOpenChange, columns, entityLabel, onCreate
  * and a floating bulk-action bar (delete / deselect) when rows are selected.
  * Selection can be controlled via `selectedIds`/`onSelectionChange`.
  */
-function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", className, ...rest }) {
+function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, rows: rowsProp = exports.defaultRows, selectedIds, onSelectionChange, showNew = true, allowAddColumn = true, onOpenRecord, onOpenRecordPage, avatarTone = "brand", emptyStateExtra, className, ...rest }) {
     const [cols, setCols] = React.useState(columnsProp);
     const [data, setData] = React.useState(rowsProp);
     // The table owns `cols`/`data` so it can rename a column, edit a cell, or
@@ -1140,7 +1213,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-th-label", children: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)(ThLabel, { label: col.label }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sort", children: (0, jsx_runtime_1.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-menu-sep" }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);
@@ -1209,9 +1282,19 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                                                             }, children: res ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.agg[a] }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-value", children: res.value })] })) : ((0, jsx_runtime_1.jsx)("span", { className: "crisp-recordstable-sum-label", children: t.calculate })) }), sumOpen &&
                                                             rootRef.current &&
                                                             (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--up", role: "menu", "aria-label": `${col.label} summary`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: aggOptions(col).map((opt) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitemradio", tabIndex: -1, "aria-checked": a === opt, "data-on": a === opt ? "" : undefined, onClick: () => setAggValue(col.key, opt), children: [t.agg[opt], a === opt ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "crisp-recordstable-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, opt))) }), rootRef.current)] }) }, col.key));
-                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState, { variant: "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
+                                        }), (0, jsx_runtime_1.jsx)("td", { className: "crisp-recordstable-sum crisp-recordstable-addcol" })] }) })] }), visibleRows.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-empty", children: (0, jsx_runtime_1.jsx)(emptystate_1.EmptyState
+                        // #603: the unfiltered zero-records state, when the consumer
+                        // opts into the extra CTAs, uses Attio's own larger measured
+                        // tile (Users/Workspaces, 138px) instead of the 45px
+                        // filtered-to-zero ring -- two different Attio surfaces.
+                        , { 
+                            // #603: the unfiltered zero-records state, when the consumer
+                            // opts into the extra CTAs, uses Attio's own larger measured
+                            // tile (Users/Workspaces, 138px) instead of the 45px
+                            // filtered-to-zero ring -- two different Attio surfaces.
+                            variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: !activeFilters && emptyStateExtra ? 40 : 18, strokeWidth: 1.25, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] })) }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "crisp-recordstable-menu crisp-recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

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

@@ -43,7 +43,32 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-rte-body h1 { font-size: ${tokens_1.contract.text.xl}; line-height: 28px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.3px; margin-top: ${tokens_1.contract.space["4"]}; }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: ${tokens_1.contract.weight.semibold}; letter-spacing: -0.2px; margin-top: ${tokens_1.contract.space["3"]}; }
     & .crisp-rte-body h3 { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.semibold}; margin-top: ${tokens_1.contract.space["2.5"]}; }
-    & .crisp-rte-body ul, & .crisp-rte-body ol { padding-inline-start: ${tokens_1.contract.space["5"]}; }
+    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped
+       ul, ol { list-style: none }, specificity 0,0,1) was winning every
+       list marker outright -- this rule set padding but never declared
+       list-style-type, so there was no higher-specificity value (this
+       selector is 0,1,1) to beat the reset with. Split into two
+       single-selector rules, each declaring its own marker type, rather
+       than the old single comma-joined rule ( .crisp-rte-body ul, &
+       .crisp-rte-body ol ) the issue flagged as malformed.
+       #611: padding-inline-start re-measured live once CRUD on the
+       measurement workspace was allowed (a "zz-parity" note with a
+       bulleted list, a nested bulleted list, and a numbered list) --
+       Attio's own <ul>/<ol> measures 36px (getComputedStyle,
+       ~36.1353px), not the 20px placeholder #575 shipped with no real
+       content to check against. 36px isn't in tokens/scale.ts (steps
+       stop at 24px, jump to 32px) and is a single component-intrinsic
+       value, so it stays a raw px per AUTHORING.md's golden rule 4b
+       rather than being rounded to an existing token or added to the
+       shared scale. Marker colour (currentColor via the already-measured
+       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) ==
+       #101112 exactly) and the ~4px li-to-li gap (the existing li
+       margin-top rule below) were re-checked at the same time and
+       already matched -- only the padding was wrong. Attio doesn't vary
+       marker type for a nested list either (nested <ul> is disc too,
+       not circle), which this already doesn't attempt. */
+    & .crisp-rte-body ul { list-style-type: disc; padding-inline-start: 36px; }
+    & .crisp-rte-body ol { list-style-type: decimal; padding-inline-start: 36px; }
     & .crisp-rte-body li { margin-top: ${tokens_1.contract.space["1"]}; }
     & .crisp-rte-body blockquote { padding-inline-start: ${tokens_1.contract.space["3"]}; border-inline-start: 2px solid ${tokens_1.contract.borderDefault}; color: ${tokens_1.contract.fgMuted}; }
     & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: ${tokens_1.contract.text.md}; padding: 1px ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); }

package/dist/cjs/product/savedviews/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.savedviewsRecipe = exports.SavedViews = void 0;
+var savedviews_1 = require("./savedviews");
+Object.defineProperty(exports, "SavedViews", { enumerable: true, get: function () { return savedviews_1.SavedViews; } });
+var savedviews_recipe_1 = require("./savedviews.recipe");
+Object.defineProperty(exports, "savedviewsRecipe", { enumerable: true, get: function () { return savedviews_recipe_1.savedviewsRecipe; } });

package/dist/cjs/product/savedviews/savedviews.js

@@ -0,0 +1,207 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SavedViews = SavedViews;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const menu_1 = require("../../components/menu");
+const select_1 = require("../../components/select");
+const core_1 = require("../../core");
+const savedviews_recipe_1 = require("./savedviews.recipe");
+/**
+ * A saved-view switcher — measured from Attio's "All Companies ▾" menu. A
+ * chip trigger opens a popover listing every saved view as a `role="option"`
+ * row (leading coloured icon, name, a hover-revealed kebab of
+ * rename/duplicate/delete), plus a trailing "Create new view" row. The
+ * active view is marked `aria-selected`/`aria-current="page"` and mirrored
+ * onto the trigger's own icon/label.
+ *
+ * Keyboard: while the trigger has focus and the panel is open, ↑/↓ move a
+ * virtual highlight (`aria-activedescendant`, the same "focus stays on the
+ * trigger" model `Select`/`MultiSelect` use without a search field), Enter
+ * chooses the highlighted row, Escape closes — deferring to a still-open
+ * kebab submenu first (`hasOpenFloatingLayer`), so Escape closes one layer
+ * at a time.
+ */
+function SavedViews({ label, icon, views, activeId, onSelect, onCreate, onRename, onDuplicate, onDelete, onToggleFavorite, createLabel: createLabelProp, renameLabel: renameLabelProp, duplicateLabel: duplicateLabelProp, deleteLabel: deleteLabelProp, favoriteLabel: favoriteLabelProp, viewOptionsLabel: viewOptionsLabelProp, className, "aria-label": ariaLabel, ...rest }) {
+    const createLabel = (0, core_1.useCrispMessage)(createLabelProp, "Create new view");
+    const renameLabel = (0, core_1.useCrispMessage)(renameLabelProp, "Rename");
+    const duplicateLabel = (0, core_1.useCrispMessage)(duplicateLabelProp, "Duplicate");
+    const deleteLabel = (0, core_1.useCrispMessage)(deleteLabelProp, "Delete");
+    const favoriteLabel = (0, core_1.useCrispMessage)(favoriteLabelProp, "Add to favorites");
+    const viewOptionsLabel = (0, core_1.useCrispMessage)(viewOptionsLabelProp, "View options");
+    const autoId = React.useId();
+    const triggerId = `${autoId}-trigger`;
+    // role="combobox" (below) does not take its name from content — unlike a
+    // plain button, aria-activedescendant is only valid on a widget role that
+    // supports it (Select's/MultiSelect's own !searchable trigger is the same
+    // shape). aria-labelledby, resolved recursively, DOES read a referenced
+    // node's own text, so pointing it at the visible label span gives the
+    // trigger a name equal to what's on screen without a second, redundant
+    // aria-label prop — self-referencing (aria-labelledby={triggerId} on the
+    // trigger itself) does not work, since the referenced node's own
+    // name-from-content restriction still applies to it.
+    const triggerLabelId = `${autoId}-trigger-label`;
+    const panelId = `${autoId}-panel`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
+    const [open, setOpen] = React.useState(false);
+    const [up, setUp] = React.useState(false);
+    const [pos, setPos] = React.useState({});
+    const [highlight, setHighlight] = React.useState(-1);
+    const rootRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const panelRef = React.useRef(null);
+    const activeView = views.find((v) => v.id === activeId) ?? null;
+    // the trailing "Create new view" row is one more enabled index, past every
+    // real view
+    const createIndex = views.length;
+    const openPanel = () => {
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (rect) {
+            const { style, up: flipUp } = (0, core_1.placeFloating)({
+                rect,
+                gap: 4,
+                flipBelow: 280,
+                anchor: triggerRef.current,
+            });
+            setUp(flipUp);
+            setPos(style);
+        }
+        setHighlight(-1);
+        setOpen(true);
+    };
+    const close = React.useCallback(() => {
+        setOpen(false);
+        triggerRef.current?.focus({ preventScroll: true });
+    }, []);
+    const commit = () => {
+        if (highlight === createIndex) {
+            onCreate();
+            close();
+        }
+        else {
+            const v = views[highlight];
+            if (v) {
+                onSelect(v.id);
+                close();
+            }
+        }
+    };
+    const { onKeyDown: onNavKeys } = (0, select_1.useListboxKeyboard)({
+        enabledIndexes: Array.from({ length: views.length + 1 }, (_, i) => i),
+        highlight,
+        setHighlight,
+        commit,
+        close,
+        dismiss: () => setOpen(false),
+    });
+    // Registers the portaled panel on the shared floating-layer stack (#339)
+    // so a kebab's own Menu (also portaled, also registered) counts as
+    // "inside" this layer for outside-click purposes, and so this panel's own
+    // Escape can defer to it below.
+    React.useEffect(() => {
+        if (!open || !panelRef.current)
+            return;
+        return (0, core_1.registerFloatingLayer)(panelRef.current);
+    }, [open]);
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const target = e.target;
+            if (rootRef.current?.contains(target))
+                return;
+            if (panelRef.current?.contains(target))
+                return;
+            if ((0, core_1.isInsideLaterFloatingLayer)(target, panelRef.current))
+                return;
+            setOpen(false);
+        };
+        document.addEventListener("pointerdown", onDown);
+        return () => document.removeEventListener("pointerdown", onDown);
+    }, [open]);
+    // Escape defers to a still-open kebab submenu (core/floating-stack.ts):
+    // without this, both this panel's listener AND the kebab Menu's own
+    // Escape listener fire on the same keydown and both close at once, which
+    // is the double-close bug that module's doc comment warns about. One
+    // Escape now closes the kebab; a second closes the panel.
+    //
+    // `hasNestedFloatingLayer`, not `hasOpenFloatingLayer`: this panel
+    // registers ITSELF on the stack (below), so a plain "is the stack
+    // non-empty" check would always be true the moment this panel is open and
+    // Escape would never reach `close()` — `hasNestedFloatingLayer` excludes
+    // this panel's own slot and only counts a layer registered after it.
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if ((0, core_1.hasNestedFloatingLayer)(panelRef.current))
+                return;
+            close();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [open, close]);
+    const triggerIcon = activeView ? activeView.icon : icon;
+    const triggerLabel = activeView ? activeView.name : label;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, savedviews_recipe_1.savedviewsRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: triggerId, type: "button", 
+                // combobox, not the bare default "button" role: aria-activedescendant
+                // (the virtual-focus highlight, same model Select/MultiSelect use
+                // without a search field) is only valid on a widget role that
+                // supports it, and combobox's aria-haspopup explicitly allows
+                // "dialog" — the value Attio's own trigger measures — alongside the
+                // more common "listbox".
+                role: "combobox", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": open ? panelId : undefined, "aria-activedescendant": open && highlight >= 0 ? optionId(highlight) : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, "data-open": open ? "" : undefined, className: "crisp-savedviews-trigger", onClick: () => (open ? setOpen(false) : openPanel()), onKeyDown: (e) => {
+                    if (open)
+                        onNavKeys(e);
+                    else if (e.key === "ArrowDown" || e.key === "Enter") {
+                        e.preventDefault();
+                        openPanel();
+                    }
+                }, children: [triggerIcon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-trigger-icon", children: triggerIcon })), (0, jsx_runtime_1.jsx)("span", { id: triggerLabelId, className: "crisp-savedviews-trigger-label", children: triggerLabel }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "crisp-savedviews-trigger-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsx)(core_1.FloatingPortal, { sourceRef: rootRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: panelRef, id: panelId, role: "listbox", "aria-label": ariaLabel, "aria-labelledby": ariaLabel ? undefined : triggerLabelId, className: "crisp-savedviews-panel", "data-up": up ? "" : undefined, style: pos, children: [views.map((v, i) => {
+                            const selected = v.id === activeId;
+                            return ((0, jsx_runtime_1.jsxs)("div", { id: optionId(i), role: "option", "aria-selected": selected, "aria-current": selected ? "page" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(i), onClick: () => {
+                                    onSelect(v.id);
+                                    close();
+                                }, children: [v.icon != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", children: v.icon })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: v.name }), v.shared && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-shared", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Users2, { size: 12, strokeWidth: 1.75 }) })), (0, jsx_runtime_1.jsx)("div", { className: "crisp-savedviews-kebab-slot", onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-savedviews-kebab", "aria-label": viewOptionsLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreVertical, { size: 14, strokeWidth: 1.75 }) }), children: [onToggleFavorite && ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onToggleFavorite(v.id), children: favoriteLabel })), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onRename(v.id), children: renameLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: () => onDuplicate(v.id), children: duplicateLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: () => onDelete(v.id), children: deleteLabel })] }) })] }, v.id));
+                        }), (0, jsx_runtime_1.jsxs)("div", { id: optionId(createIndex), role: "option", "aria-selected": false, "data-highlighted": highlight === createIndex ? "" : undefined, className: "crisp-savedviews-row", onMouseEnter: () => setHighlight(createIndex), onClick: () => {
+                                onCreate();
+                                close();
+                            }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-icon", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-savedviews-row-label", children: createLabel })] })] }) }))] }));
+}
+SavedViews.displayName = "SavedViews";

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

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.savedviewsRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// A saved-view switcher — measured live from Attio's own "All Companies ▾"
+// trigger (app.attio.com/techpartners/companies): a 28px chip opens a
+// popover of 32px `role="option"` rows, each revealing a 20px kebab on
+// hover that opens a second, identical-chrome popover of rename/duplicate/
+// delete actions. The trigger stays un-portaled (`&`-nested); the panel and
+// its rows portal to document.body (#339), so they live in `globalCss`, not
+// nested under `&` — the same split Menu/MultiSelect use and for the same
+// reason: a descendant selector needs real DOM containment, which the
+// portal breaks.
+//
+// Panel chrome (radius 12 / 4px padding / elevation.floating) and row height
+// (32px) are the exact values Menu's own `crisp-menu-content`/`crisp-menu-item`
+// already carry — reused by reference (radius.xl, space["1"], size.menuRow,
+// elevation.floating), not re-measured, since it is the same overlay
+// surface. The panel's measured 308.75×182 size is deliberately NOT
+// hardcoded — it grows with the number of views — so width/height are left
+// to content, with the same 200px floor Menu's own popover uses.
+const config = (0, core_1.defineRecipe)({
+    name: "savedviews",
+    base: `
+    position: relative; display: inline-flex; font-family: ${tokens_1.contract.font.sans};
+    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+
+    /* Trigger fill measured rgb(246,247,247); bgRaised's light value is
+       #f4f4f5 (244,244,245) — a 2-unit-per-channel difference, inside
+       screenshot/anti-aliasing noise, not a second real colour. Reusing the
+       token (Lesson 3 — tokens, not raw px/hex) gets a correct,
+       already-established dark-mode fill for free instead of a light-only
+       literal; AUTHORING.md Lesson 29 is the case where that shortcut went
+       wrong (a flat colour that stayed visible where the reference had
+       none) — this is the opposite risk (a token that already flips per
+       theme, applied to the closest measured match). */
+    & .crisp-savedviews-trigger {
+      box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+      height: ${tokens_1.contract.size.row}; margin: 0; padding: ${tokens_1.contract.space["1"]} ${tokens_1.contract.space["1.5"]};
+      border: none; border-radius: ${tokens_1.contract.radius.md}; background: ${tokens_1.contract.bgRaised};
+      font-family: inherit; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary};
+      cursor: pointer; white-space: nowrap; transition: background-color .12s ease;
+    }
+    & .crisp-savedviews-trigger:hover,
+    & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, ${tokens_1.contract.bgRaised}); }
+    & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; }
+    & .crisp-savedviews-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-savedviews-trigger-chevron { flex-shrink: 0; color: ${tokens_1.contract.fgMuted}; }
+  `,
+    globalCss: `
+    /* pointer-events: auto (#375) — see Menu/MultiSelect's matching comment:
+       a modal Dialog sets pointer-events: none on document.body, and a
+       portaled layer outside Zag's knowledge inherits that lock. */
+    .crisp-savedviews-panel {
+      font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+      position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: ${tokens_1.contract.space.px};
+      min-width: 200px; max-height: 360px; overflow-y: auto; padding: ${tokens_1.contract.space["1"]};
+      border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgPopover};
+      box-shadow: ${tokens_1.elevation.floating};
+      transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
+    }
+    .crisp-savedviews-panel[data-up] { transform-origin: bottom left; }
+    .crisp-savedviews-panel { @starting-style { opacity: 0; transform: scale(0.97) translateY(-1px); } }
+
+    .crisp-savedviews-row {
+      box-sizing: border-box; position: relative; display: flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]};
+      height: ${tokens_1.contract.size.menuRow}; flex-shrink: 0; padding: ${tokens_1.contract.space["1.5"]} ${tokens_1.contract.space["2"]};
+      border-radius: ${tokens_1.contract.radius.md}; cursor: pointer; -webkit-user-select: none; user-select: none;
+    }
+    .crisp-savedviews-row:hover, .crisp-savedviews-row[data-highlighted] { background: ${tokens_1.contract.bgRaised}; }
+    .crisp-savedviews-row-icon { flex-shrink: 0; display: inline-flex; width: ${tokens_1.contract.size.icon}; height: ${tokens_1.contract.size.icon}; color: ${tokens_1.contract.fgMuted}; }
+    .crisp-savedviews-row-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-savedviews-row[aria-selected="true"] .crisp-savedviews-row-label { font-weight: ${tokens_1.contract.weight.semibold}; }
+    .crisp-savedviews-row-shared { flex-shrink: 0; display: inline-flex; color: ${tokens_1.contract.fgMuted}; }
+
+    /* The kebab's own <Menu> is wrapped in a slot div (savedviews.tsx) that
+       stops a click from bubbling — through the REACT tree, which a portal
+       does not leave, even though the Menu's content is a DOM sibling under
+       document.body — into the row's own onClick. The slot, not the kebab
+       button itself, is what the row's flex layout pushes to the trailing
+       edge. */
+    .crisp-savedviews-kebab-slot { flex-shrink: 0; margin-inline-start: auto; }
+    /* 20px / 4px padding is a component-intrinsic size (AUTHORING.md §4b —
+       "a badge's 20px" is the named example), used once here: raw, not a
+       scale step. */
+    .crisp-savedviews-kebab {
+      box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; padding: ${tokens_1.contract.space["1"]}; margin: 0;
+      border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; cursor: pointer;
+      opacity: 0; transition: opacity .1s ease, background-color .12s ease, color .12s ease;
+    }
+    .crisp-savedviews-row:hover .crisp-savedviews-kebab,
+    .crisp-savedviews-row:focus-within .crisp-savedviews-kebab,
+    .crisp-savedviews-kebab[data-open] { opacity: 1; }
+    .crisp-savedviews-kebab:hover, .crisp-savedviews-kebab[data-open] { background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.savedviewsRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

package/dist/cjs/product/taskstable/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.taskstableRecipe = exports.TasksTable = void 0;
+var taskstable_1 = require("./taskstable");
+Object.defineProperty(exports, "TasksTable", { enumerable: true, get: function () { return taskstable_1.TasksTable; } });
+var taskstable_recipe_1 = require("./taskstable.recipe");
+Object.defineProperty(exports, "taskstableRecipe", { enumerable: true, get: function () { return taskstable_recipe_1.taskstableRecipe; } });

package/dist/cjs/product/taskstable/taskstable.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TasksTable = TasksTable;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("../../core");
+const listpage_1 = require("../listpage");
+const taskstable_recipe_1 = require("./taskstable.recipe");
+function Cell({ flex, className, children, }) {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, core_1.cx)("crisp-taskstable-cell", className), style: { flex }, children: children }));
+}
+/**
+ * A grouped due-date table pattern — Attio's Tasks page. Composes
+ * `ListPage`'s toolbar and group-row chrome (both class-compatible; see
+ * taskstable.recipe.ts) with a typed column/cell layer: a title+checkbox
+ * row grouped into due-date sections, a due-date cell that goes red past
+ * due, and consumer-supplied record/assignee chip slots.
+ */
+function TasksTable({ columns, groups, leading, trailing, emptyLabel: emptyLabelProp, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, className, ...rest }) {
+    const crispMessages = (0, core_1.useCrispMessages)();
+    const emptyLabel = emptyLabelProp ?? crispMessages["No tasks"] ?? "No tasks";
+    const completeLabel = (0, core_1.useCrispMessage)(completeLabelProp, "Mark complete");
+    const incompleteLabel = (0, core_1.useCrispMessage)(incompleteLabelProp, "Mark incomplete");
+    const flexOf = (key) => columns.find((col) => col.key === key)?.flex ?? 1;
+    const total = groups.reduce((s, g) => s + g.rows.length, 0);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, core_1.cx)((0, taskstable_recipe_1.taskstableRecipe)({ className }), (0, listpage_1.listpageRecipe)()), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-listpage-toolbar", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-listpage-toolbar-lead", children: leading }), trailing != null && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-listpage-toolbar-trail", children: trailing }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-listpage-body", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-taskstable-colhead", children: columns.map((col) => ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-taskstable-colhead-cell", style: { flex: col.flex ?? 1 }, children: [col.icon, col.label] }, col.key))) }), total === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-taskstable-empty", children: emptyLabel })) : (groups.map((g) => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-listpage-group", children: [g.label, (0, jsx_runtime_1.jsx)("span", { className: "crisp-listpage-group-count", children: g.count })] }), g.rows.map((row) => ((0, jsx_runtime_1.jsx)(listpage_1.ListRow, { children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-taskstable-row", style: { flex: 1 }, children: [(0, jsx_runtime_1.jsxs)(Cell, { flex: flexOf("title"), children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", className: "crisp-taskstable-check", checked: !!row.done, "aria-label": row.done ? incompleteLabel : completeLabel, onChange: () => row.onToggle?.(!row.done) }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-taskstable-title", children: row.title })] }), (0, jsx_runtime_1.jsx)(Cell, { flex: flexOf("due"), children: row.due != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-taskstable-due", "data-overdue": row.due.overdue ? "" : undefined, children: row.due.label })) }), (0, jsx_runtime_1.jsx)(Cell, { flex: flexOf("record"), children: row.record }), (0, jsx_runtime_1.jsx)(Cell, { flex: flexOf("assignee"), children: row.assignee })] }) }, row.id)))] }, g.id))))] })] }));
+}
+TasksTable.displayName = "TasksTable";