@crisp-ui-kit/crisp 0.54.11 → 0.55.0

package/dist/cjs/product/recordpage/recordpage.js

@@ -50,6 +50,20 @@ const core_1 = require("../../core");
 const column_1 = require("./column");
 const editable_field_1 = require("./editable-field");
 const recordpage_recipe_1 = require("./recordpage.recipe");
+// crisp/#798: the details column's own drag clamp -- re-measured live on
+// Attio's own record page (a real drag test, not a source read): min 619px,
+// max 1170px, default (also the double-click-reset target) 734px. These
+// replace an earlier, much narrower 300/560/320 that was never actually
+// checked against Attio and turned out roughly half the real max. Confirmed
+// live these are literal px, not a viewport ratio: at a narrower emulated
+// width the already-dragged-to-max column shrank below 1170px, but its OWN
+// `getComputedStyle(...).width` still read a plain px number the whole
+// time (not a `%`) — that shrink is ordinary flex-shrink (both panels
+// share `flex: 1 1 auto` and can't both keep their preferred width once the
+// window is too narrow), not the clamp itself changing with viewport width.
+const DETAILS_MIN_W = 619;
+const DETAILS_MAX_W = 1170;
+const DETAILS_DEFAULT_W = 734;
 function valueEmpty(v) {
     return v == null || v === "" || (Array.isArray(v) && v.length === 0);
 }
@@ -457,7 +471,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const tasks = tasksProp ?? internalTasks;
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Drag-resizable left details column.
-    const [detailsW, setDetailsW] = React.useState(320);
+    const [detailsW, setDetailsW] = React.useState(DETAILS_DEFAULT_W);
     const [resizing, setResizing] = React.useState(false);
     const dragRef = React.useRef(null);
     const onResizeDown = (e) => {
@@ -475,7 +489,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         if (!dragRef.current)
             return;
         const next = dragRef.current.w + dragRef.current.dir * (e.clientX - dragRef.current.x);
-        setDetailsW(Math.max(300, Math.min(560, next)));
+        setDetailsW(Math.max(DETAILS_MIN_W, Math.min(DETAILS_MAX_W, next)));
     };
     const onResizeUp = (e) => {
         dragRef.current = null;
@@ -660,7 +674,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (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, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": 300, "aria-valuemax": 560, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (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, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.copyRecordLink, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.logANote, children: (0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.linkRecords, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": t.createATask, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareCheck, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -669,7 +683,9 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             // half-conversion the drag had, one handler away (#255).
                             const rtl = (0, core_1.isRtlElement)(e.currentTarget);
                             const grow = e.key === (rtl ? "ArrowLeft" : "ArrowRight");
-                            setDetailsW((w) => grow ? Math.min(560, w + 16) : Math.max(300, w - 16));
+                            setDetailsW((w) => grow
+                                ? Math.min(DETAILS_MAX_W, w + 16)
+                                : Math.max(DETAILS_MIN_W, w - 16));
                         } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
 }
 RecordPage.displayName = "RecordPage";

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, ClipboardPaste, Copy, GripVertical, History, Lock, PanelRight, Plus, Search, SlidersHorizontal, X, } from "lucide-react";
 import * as React from "react";
-import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, useCrispMessage, useCrispMessages, usePrefersReducedMotion, } from "../../core/index.js";
 // crisp/#601 supersession: a deliberate exception to "DS atoms stay
 // generic; product components compose them" (AUTHORING.md) -- the row's
 // own comment affordance is `CommentCountBadge` (product/comments, #625),
@@ -1033,14 +1033,48 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
     const colAriaIndex = (i) => ariaColIndexBase + i + 1;
     const allSelected = rows.length > 0 && rows.every((r) => selected.has(r.id));
     const someSelected = selected.size > 0 && !allSelected;
+    // crisp/#782, ported from RecordsTable's own already-shipped logic: the
+    // header checkbox speaks for the rows you can SEE. Rebuilding the whole
+    // set from `rows` (the filtered/visible set) would silently drop any
+    // selection an active filter is hiding -- add/remove only the visible
+    // rows and leave the rest of `selected` alone.
     function toggleAll() {
-        setSelected(allSelected ? new Set() : new Set(rows.map((r) => r.id)));
+        const next = new Set(selected);
+        for (const r of rows) {
+            if (allSelected)
+                next.delete(r.id);
+            else
+                next.add(r.id);
+        }
+        setSelected(next);
     }
     function toggleRow(id) {
         const next = new Set(selected);
         next.has(id) ? next.delete(id) : next.add(id);
         setSelected(next);
     }
+    // crisp/#781: Shift+Click on a row checkbox selects the whole contiguous
+    // range from the last plain click (the anchor) to this row -- confirmed
+    // live, the mouse counterpart to #749's Shift+Arrow keyboard gesture,
+    // sharing the same `rowSelectAnchor` state and the same recompute-the-
+    // whole-span shape (not accumulate) so shift-clicking back toward the
+    // anchor shrinks the same way clicking away from it grows. A plain click
+    // both toggles normally AND re-anchors, so the NEXT Shift+Click extends
+    // from wherever the user last plain-clicked, matching Attio.
+    function toggleRowOrExtend(id, shiftKey) {
+        if (shiftKey && rowSelectAnchor != null) {
+            const anchorIdx = rows.findIndex((r) => r.id === rowSelectAnchor);
+            const idx = rows.findIndex((r) => r.id === id);
+            if (anchorIdx >= 0 && idx >= 0) {
+                const lo = Math.min(anchorIdx, idx);
+                const hi = Math.max(anchorIdx, idx);
+                setSelected(new Set(rows.slice(lo, hi + 1).map((r) => r.id)));
+                return;
+            }
+        }
+        setRowSelectAnchor(id);
+        toggleRow(id);
+    }
     function cycleSort(key) {
         // Clicking a header drives a single sort, as before. Multi-sort is supplied
         // by the caller through the `sort` prop (built in a sort popover).
@@ -1247,6 +1281,28 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             setSelected(new Set(rows.map((rw) => rw.id)));
             return;
         }
+        // crisp/#772: Cmd/Ctrl+ArrowUp jumps the selected cell to the first row,
+        // Cmd/Ctrl+ArrowDown to the last -- confirmed live (Attio's own help
+        // drawer documents "Jump to top"/"Jump to bottom" on these exact
+        // bindings). `!e.shiftKey` guards this from stealing Cmd+Shift+Arrow,
+        // a separate gesture (#773, extend-selection-to-first/last) that falls
+        // through to the Shift+Arrow branch below untouched. Placed before that
+        // branch for the same reason: without the guard, Cmd+Shift+Arrow would
+        // still reach it (that branch doesn't check metaKey/ctrlKey either),
+        // just not do the "jump" part -- the guard here is what keeps the two
+        // gestures from fighting over the same keys.
+        if ((e.metaKey || e.ctrlKey) &&
+            !e.shiftKey &&
+            (e.key === "ArrowUp" || e.key === "ArrowDown")) {
+            const r0 = rows.findIndex((row) => row.id === selCell.id);
+            if (r0 < 0)
+                return;
+            e.preventDefault();
+            const nr0 = e.key === "ArrowUp" ? 0 : rows.length - 1;
+            setSelCell({ id: rows[nr0].id, key: selCell.key });
+            clipboardProxyRef.current?.select();
+            return;
+        }
         // crisp/#749: Shift+ArrowUp/Down extends the row-checkbox selection --
         // confirmed live, distinct from Shift+Click's cell-range gesture above
         // (that one is `selAnchor`; this is `rowSelectAnchor`, and the two
@@ -1398,15 +1454,21 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         }
         setEditing(null);
     }
+    const reduceMotion = usePrefersReducedMotion();
     // crisp/#577 -- keyboard nav to an off-screen (virtualized-out) cell
-    // scrolls it into the rendered window, on both axes. Column scroll-into-
-    // view runs regardless of `height` -- the horizontal scroll container (and
-    // its own virtualization) exists either way; row scroll-into-view only
-    // makes sense once `height` gives the grid an internal vertical scroll
-    // position to move. `widths` is read only indirectly, through `colWidth`'s
-    // closure over it -- biome can't see that, but a column resize while a
-    // cell is selected genuinely needs to re-run this to keep it in view, so
-    // the dependency is real even though the lint rule can't prove it.
+    // scrolls it into the rendered window, on both axes. `renderItems`/
+    // `rowOffsets` are computed unconditionally (`height == null` just makes
+    // them a no-op elsewhere, see the comment above `renderItems`), so this
+    // runs on both axes regardless of `height` too (crisp/#780 -- it used to
+    // gate the vertical half on `height != null`, on the reasoning that only
+    // `height` gives the grid an internal scroll position to move; that's
+    // wrong when the grid's own container still scrolls without an explicit
+    // height, e.g. inside a shorter ancestor, matching `RecordsTable`'s own
+    // already-shipped #257 fix, which had no such gate). `widths` is read only
+    // indirectly, through `colWidth`'s closure over it -- biome can't see
+    // that, but a column resize while a cell is selected genuinely needs to
+    // re-run this to keep it in view, so the dependency is real even though
+    // the lint rule can't prove it.
     // biome-ignore lint/correctness/useExhaustiveDependencies: widths is read via colWidth's closure, see comment above
     React.useEffect(() => {
         if (!selCell)
@@ -1414,28 +1476,37 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         const el = scrollRef.current;
         if (!el)
             return;
-        // Sets `viewport` directly from the SAME value just assigned to the
-        // real DOM property, rather than waiting for a follow-up `scroll` event
-        // to round-trip through the `onScroll` handler above -- a real browser
-        // does fire one when `scrollTop`/`scrollLeft` is set programmatically,
-        // but relying on that would make this effect's own visible result (the
+        // `el.scrollTo` rather than a direct `el.scrollTop =`/`el.scrollLeft =`
+        // assignment (crisp/#780, matching RecordsTable's own #208/#257 rule):
+        // property assignment is ALWAYS instant, so it can never honour a
+        // consumer's own `scroll-behavior: smooth` on this container; `scrollTo`
+        // defers to that CSS when no `behavior` is given, and only forces
+        // `"auto"` under `prefers-reduced-motion`, which is the one case that
+        // must win even over a host page's own smooth-scroll opt-in.
+        const scrollTo = (opts) => el.scrollTo({
+            ...opts,
+            ...(reduceMotion ? { behavior: "auto" } : null),
+        });
+        // Sets `viewport` directly from the SAME value just passed to
+        // `scrollTo`, rather than waiting for a follow-up `scroll` event to
+        // round-trip through the `onScroll` handler above -- a real browser
+        // does fire one when the scroll position changes programmatically, but
+        // relying on that would make this effect's own visible result (the
         // newly-selected cell actually rendering) depend on a second render
         // triggered from outside React's own update, which is both slower and
         // one more thing that has to be true for this to work.
-        if (height != null) {
-            const itemIndex = rowIdToItemIndex.get(selCell.id);
-            if (itemIndex != null) {
-                const itemTop = rowOffsets[itemIndex];
-                const itemBottom = itemTop + renderItems[itemIndex].height;
-                if (itemTop < el.scrollTop) {
-                    el.scrollTop = itemTop;
-                    setViewport((v) => ({ ...v, top: itemTop }));
-                }
-                else if (itemBottom > el.scrollTop + el.clientHeight) {
-                    const newTop = itemBottom - el.clientHeight;
-                    el.scrollTop = newTop;
-                    setViewport((v) => ({ ...v, top: newTop }));
-                }
+        const itemIndex = rowIdToItemIndex.get(selCell.id);
+        if (itemIndex != null) {
+            const itemTop = rowOffsets[itemIndex];
+            const itemBottom = itemTop + renderItems[itemIndex].height;
+            if (itemTop < el.scrollTop) {
+                scrollTo({ top: itemTop });
+                setViewport((v) => ({ ...v, top: itemTop }));
+            }
+            else if (itemBottom > el.scrollTop + el.clientHeight) {
+                const newTop = itemBottom - el.clientHeight;
+                scrollTo({ top: newTop });
+                setViewport((v) => ({ ...v, top: newTop }));
             }
         }
         const ci = columns.findIndex((c) => c.key === selCell.key);
@@ -1445,24 +1516,24 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 left += colWidth(columns[i]);
             const right = left + colWidth(columns[ci]);
             if (left < el.scrollLeft) {
-                el.scrollLeft = left;
+                scrollTo({ left });
                 setViewport((v) => ({ ...v, left }));
             }
             else if (right > el.scrollLeft + el.clientWidth) {
                 const newLeft = right - el.clientWidth;
-                el.scrollLeft = newLeft;
+                scrollTo({ left: newLeft });
                 setViewport((v) => ({ ...v, left: newLeft }));
             }
         }
     }, [
         selCell,
-        height,
         columns,
         widths,
         selectable,
         rowIdToItemIndex,
         rowOffsets,
         renderItems,
+        reduceMotion,
     ]);
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
     const hasSummary = columns.some((c) => c.summary || c.calc);
@@ -1836,12 +1907,33 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     }, onDragEnd: () => {
                                                         setDragRowId(null);
                                                         setDropRowId(null);
-                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), onChange: () => toggleRow(row.id) }) }) })), colSlots.map((slot) => {
+                                                    }, children: _jsx(GripVertical, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }) })), selectable && (_jsx(TableCell, { className: "crisp-datatable-col-check", "aria-colindex": showGrip ? 2 : 1, ...stickyCol(-1), onClick: (e) => e.stopPropagation(), children: _jsx("span", { className: "crisp-datatable-check", children: _jsx(Checkbox, { "aria-label": selectRowLabel(row), checked: selected.has(row.id), 
+                                                        // preventDefault stops the native check/change
+                                                        // this click would otherwise also fire -- this
+                                                        // handler is the single source of truth so a
+                                                        // Shift+Click's range-select and a plain
+                                                        // click's toggle-and-re-anchor never race each
+                                                        // other (crisp/#781).
+                                                        onClick: (e) => {
+                                                            e.preventDefault();
+                                                            toggleRowOrExtend(row.id, e.shiftKey);
+                                                        }, onChange: () => { } }) }) })), colSlots.map((slot) => {
                                                 if (slot.type === "spacer") {
                                                     return (_jsx("td", { role: "presentation", "aria-hidden": "true", style: { padding: 0, border: "none" } }, `__spacer_${slot.side}`));
                                                 }
                                                 const col = columns[slot.i];
                                                 const i = slot.i;
+                                                // crisp/#779, matching RecordsTable's own #231 fix:
+                                                // column 0 is the row's own identity (its name), not
+                                                // a value it holds -- a screen reader crossing the
+                                                // row should read "Google, Employees, 182,000", not a
+                                                // bare "182,000". Spread onto every TableCell this
+                                                // column can render as (every editor branch, not just
+                                                // the default one), since the row-identity semantics
+                                                // don't depend on which editor is open.
+                                                const rowHeaderProps = i === 0
+                                                    ? { as: "th", scope: "row" }
+                                                    : undefined;
                                                 const isEditing = editing?.id === row.id && editing?.key === col.key;
                                                 const value = cellValue(col, row);
                                                 const sticky = dataStickyCol(i);
@@ -1864,14 +1956,14 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 // right). See the `isEditing` block below for their
                                                 // actual editor.
                                                 if (col.editable && col.editor === "switch") {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 // crisp/#760: `editor: "rating"` is the same always-
                                                 // live shape as `switch` above -- clicking a star IS
                                                 // the commit gesture, confirmed live.
                                                 if (col.editable && col.editor === "rating") {
                                                     const n = typeof value === "number" ? value : Number(value);
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(RatingStars, { "aria-label": `Edit ${col.key}`, value: Number.isNaN(n) ? 0 : n, max: col.maxRating ?? 5, onChange: (next) => commitEdit(row.id, col.key, String(next)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 // crisp/#761: `editor: "checkbox"` is a THIRD always-
                                                 // live boolean shape, distinct from `switch` --
@@ -1880,13 +1972,13 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 // toggle. Reuses crisp's own `Checkbox` (already the
                                                 // measured 16px/r6/brand-fill grid checkbox).
                                                 if (col.editable && col.editor === "checkbox") {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Checkbox, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onChange: (e) => commitEdit(row.id, col.key, String(e.currentTarget.checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing &&
                                                     (col.editor === "select" ||
                                                         col.editor === "reference" ||
                                                         col.editor === "actor")) {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire
                                                         // the row's onRowClick. Escape is handled by
@@ -1900,7 +1992,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                         onClick: (e) => e.stopPropagation(), children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(DataSelectEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })) : (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v), onCancel: () => setEditing(null) })), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing) {
-                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
+                                                    return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, onClick: (e) => e.stopPropagation(), children: [_jsx("input", { className: "crisp-datatable-edit", 
                                                                 // biome-ignore lint/a11y/noAutofocus: focus the field the moment it opens
                                                                 autoFocus: true, ...editorFor(col), "data-editor": editorFor(col).type, disabled: isPending, defaultValue: col.type === "date"
                                                                     ? toDateInputValue(value)
@@ -1959,7 +2051,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 const isExpanded = expandedCell?.id === row.id &&
                                                     expandedCell?.key === col.key;
                                                 const cellContent = (_jsxs(_Fragment, { children: [!isExpanded && rendered, errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere })), isExpanded && (_jsx("div", { className: "crisp-datatable-cell-overlay", onClick: (e) => e.stopPropagation(), children: rendered }))] }));
-                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: col.editable
+                                                return (_jsx(ContextMenu, { asChild: true, variant: "dark", menuLabel: cellMenuLabel, items: cellMenuItems(row, col), children: _jsx(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, ...rowHeaderProps, className: col.editable
                                                             ? "crisp-datatable-editable"
                                                             : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                             ? ""

package/dist/esm/components/resizablepanel/resizablepanel.js

@@ -122,6 +122,15 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
         const finalWidth = rect ? Math.round(rect.width) : width;
         commitSize(finalWidth);
     }
+    // crisp/#795: double-click resets to `defaultSize`, confirmed live on
+    // Attio's own record-page divider (dragged 722px -> 924px, double-click
+    // snapped it back to exactly 722px -- its own default/initial width, not
+    // some other fixed value). Reuses `commitSize`, the same commit path a
+    // drag already uses, so persistence (`storageKey`) picks up the reset the
+    // same way it picks up a drag -- no separate reset-specific write.
+    function onHandleDoubleClick() {
+        commitSize(defaultSize);
+    }
     const maxStyle = max == null ? undefined : typeof max === "number" ? `${max}px` : max;
     const panelSizeStyle = {
         width,
@@ -130,6 +139,6 @@ export function ResizablePanel({ side = "left", size, defaultSize = 280, onSizeC
     };
     return (_jsxs("div", { ref: containerRef, className: resizablepanelRecipe({ className }), ...rest, children: [_jsx("div", { className: "crisp-resizablepanel-spacer", style: floating ? { width: 0 } : { width, minWidth: min, maxWidth: maxStyle } }), _jsxs("div", { ref: panelRef, className: "crisp-resizablepanel-panel", "data-side": side, "data-floating": floating ? "true" : "false", style: panelSizeStyle, children: [_jsx("div", { className: "crisp-resizablepanel-inner", children: children }), _jsx("div", { className: handleVariant === "column"
                             ? "crisp-resizablepanel-handle crisp-resizablepanel-handle--column"
-                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
+                            : "crisp-resizablepanel-handle", "data-side": side, "data-dragging": dragging ? "true" : undefined, "data-handle": "", onPointerDown: onHandlePointerDown, onPointerMove: onHandlePointerMove, onPointerUp: onHandlePointerUp, onDoubleClick: onHandleDoubleClick, children: handleVariant === "column" && (_jsx("span", { className: "crisp-resizablepanel-handle-inner", "aria-hidden": "true" })) })] })] }));
 }
 ResizablePanel.displayName = "ResizablePanel";

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

@@ -28,7 +28,14 @@ export const TableRow = React.forwardRef((props, ref) => _jsx("tr", { ref: ref,
 TableRow.displayName = "TableRow";
 export const TableHead = React.forwardRef(({ align, ...props }, ref) => _jsx("th", { ref: ref, "data-align": align, ...props }));
 TableHead.displayName = "TableHead";
-export const TableCell = React.forwardRef(({ align, ...props }, ref) => _jsx("td", { ref: ref, "data-align": align, ...props }));
+export const TableCell = React.forwardRef(({ align, as, ...props }, ref) => {
+    // Cast to "td", same as RecordsTable's own dynamic-tag precedent --
+    // `props` (which may carry `scope`) would otherwise need to satisfy
+    // both <td> and <th>'s JSX attribute types at once for a bare union
+    // element name.
+    const Cell = (as ?? "td");
+    return _jsx(Cell, { ref: ref, "data-align": align, ...props });
+});
 TableCell.displayName = "TableCell";
 export const TableCaption = React.forwardRef((props, ref) => _jsx("caption", { ref: ref, ...props }));
 TableCaption.displayName = "TableCaption";