@crisp-ui-kit/crisp 0.50.0 → 0.52.0

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

@@ -0,0 +1,42 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
+// Attio's floating "compose window" — measured live from an existing note,
+// read-only, 2026-09-24 (#427). Re-checked independently against the same
+// live note a second time before shipping — every number below matched.
+//
+// The panel itself is NOT a new visual recipe: `bgOverlayFrost` 60% +
+// `blur(15px)` + `elevation.modal`'s 3-layer shadow + 16px radius (`2xl`) are
+// the exact same measured values `Dialog` already carries — Attio's own note
+// window and crisp's existing modal panel are the same surface family. What
+// IS new here is the header (a breadcrumb plus minimize/pin/close, not a
+// title plus close) and `[data-minimized]`.
+//
+// Minimizing does NOT produce a bar/tray/dock — that was this file's first
+// pass, before minimizing was ever actually exercised against a live note.
+// Re-measured: nothing appears anywhere on screen; the note's own subtree
+// stays mounted with `visibility: hidden; opacity: 0` (see composewindow.tsx's
+// doc comment for the four ways this was confirmed). `[data-minimized]`
+// reproduces exactly that — hidden, not display:none, so state and scroll
+// position survive until a consumer sets `minimized={false}` again.
+const config = defineRecipe({
+    name: "composewindow",
+    base: `display: contents; font-family: ${c.font.sans};
+    & .crisp-composewindow-backdrop { position: fixed; inset: 0; z-index: 60; background: transparent; pointer-events: none; }
+    & .crisp-composewindow-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh ${c.space["4"]} ${c.space["4"]}; pointer-events: none; }
+    & .crisp-composewindow-content { pointer-events: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: ${c.space["1"]}; border-radius: ${c.radius["2xl"]}; background: color-mix(in srgb, ${c.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${e.modal}; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-composewindow-content[data-minimized] { visibility: hidden; opacity: 0; }
+    & .crisp-composewindow-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-composewindow-header { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${c.space["2"]} 0 ${c.space["4"]}; border-bottom: 1px solid ${c.borderSubtle}; }
+    & .crisp-composewindow-breadcrumb { display: flex; align-items: center; gap: ${c.space["1"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.md}; color: ${c.fgMuted}; }
+    & .crisp-composewindow-actions { display: flex; align-items: center; gap: ${c.space["0.5"]}; flex-shrink: 0; }
+    & .crisp-composewindow-action-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-composewindow-action-btn:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
+    & .crisp-composewindow-action-btn[data-state="on"] { background: color-mix(in srgb, ${c.bgBrandSolid} 14%, transparent); color: ${c.bgBrandSolid}; }
+    & .crisp-composewindow-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: ${c.space["5"]} ${c.space["4"]}; }
+    & .crisp-composewindow-content-body { display: flex; flex-direction: column; gap: ${c.space["4"]}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const composewindowRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/composewindow/index.js

@@ -0,0 +1,2 @@
+export { ComposeWindow, ComposeWindowBody, } from "./composewindow.js";
+export { composewindowRecipe } from "./composewindow.recipe.js";

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

@@ -1,9 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowUp, Check, ChevronsUpDown, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
+import { ArrowDown, ArrowUp, Check, ChevronsUpDown, CircleUserRound, GripVertical, Plus, Search, SlidersHorizontal, } from "lucide-react";
 import * as React from "react";
-import { formatCellDate, isRtlElement, parseCellDate } from "../../core/index.js";
+import { cellDatePrecision, formatCellDate, isRtlElement, parseCellDate, } from "../../core/index.js";
+import { Avatar } from "../avatar/index.js";
 import { Checkbox } from "../checkbox/index.js";
 import { Menu, MenuItem } from "../menu/index.js";
+import { Select } from "../select/index.js";
+import { Spinner } from "../spinner/index.js";
+import { Switch } from "../switch/index.js";
 import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from "../table/index.js";
 import { datatableRecipe } from "./datatable.recipe.js";
 /** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
@@ -22,6 +26,26 @@ function toDateInputValue(v) {
     }
     return "";
 }
+/** A `datetime-local` input needs `yyyy-mm-ddThh:mm`, in local time. Unlike
+ * `toDateInputValue`, this reads the value with a REAL `new Date(v)`, not
+ * `parseCellDate` -- `parseCellDate` exists specifically to treat a
+ * date-ONLY string as local midnight rather than UTC midnight (#221); a
+ * datetime value already carries its own time-of-day (and, if present, its
+ * own offset), so the ordinary `Date` constructor is the correct parse, and
+ * `parseCellDate` would silently discard the time half this type exists to
+ * keep (#432). Returns "" when it cannot be parsed, same contract as
+ * `toDateInputValue`. */
+function toDateTimeInputValue(v) {
+    const d = v instanceof Date
+        ? v
+        : typeof v === "string" || typeof v === "number"
+            ? new Date(v)
+            : null;
+    if (!d || Number.isNaN(d.getTime()))
+        return "";
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
 function cellValue(col, row) {
     if (col.accessor)
         return col.accessor(row);
@@ -56,21 +80,46 @@ function initials(name) {
     const p = name.trim().split(/\s+/);
     return ((p[0]?.[0] ?? "") + (p[1]?.[0] ?? "")).toUpperCase() || "?";
 }
-// One Intl.DateTimeFormat per locale, built lazily and reused — constructing
-// a formatter per cell render would be wasteful on a large grid.
+// One Intl.DateTimeFormat per locale (and per precision it's asked to print),
+// built lazily and reused — constructing a formatter per cell render would be
+// wasteful on a large grid.
 const DATE_FMT_CACHE = new Map();
-function dateFmt(locale) {
-    let fmt = DATE_FMT_CACHE.get(locale);
+function dateFmtCached(cache, locale, options) {
+    let fmt = cache.get(locale);
     if (!fmt) {
-        fmt = new Intl.DateTimeFormat(locale, {
-            month: "short",
-            day: "numeric",
-            year: "numeric",
-        });
-        DATE_FMT_CACHE.set(locale, fmt);
+        fmt = new Intl.DateTimeFormat(locale, options);
+        cache.set(locale, fmt);
     }
     return fmt;
 }
+function dateFmt(locale) {
+    return dateFmtCached(DATE_FMT_CACHE, locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+// "Sep 1998" — a value that named a month but not a day (#312).
+const MONTH_FMT_CACHE = new Map();
+function monthFmt(locale) {
+    return dateFmtCached(MONTH_FMT_CACHE, locale, {
+        month: "short",
+        year: "numeric",
+    });
+}
+// Same caching, extended with the time-of-day fields `dateFmt` deliberately
+// omits (#432) -- its own cache/formatter, not `dateFmt` with options bolted
+// on, so `date`'s own output can never shift by adding this type.
+const DATETIME_FMT_CACHE = new Map();
+function dateTimeFmt(locale) {
+    return dateFmtCached(DATETIME_FMT_CACHE, locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+    });
+}
 function formatCell(type, v, symbol, locale = "en-US") {
     if (type === "number")
         return typeof v === "number" ? v.toLocaleString(locale) : asText(v);
@@ -82,8 +131,29 @@ function formatCell(type, v, symbol, locale = "en-US") {
         // parseCellDate, not `new Date(v)`: a date-only value is UTC midnight per
         // ECMA-262, and formatting that in the reader's timezone renders it a day
         // early west of UTC (#221, the same defect #220 fixed in RecordsTable).
-        const d = v ? parseCellDate(String(v)) : null;
-        return d ? dateFmt(locale).format(d) : asText(v);
+        const raw = v ? String(v) : "";
+        const d = raw ? parseCellDate(raw) : null;
+        if (!d)
+            return asText(v);
+        // parseCellDate fills in a missing month/day so a year-only or
+        // year-month value can become a Date; only print the precision the raw
+        // value actually carried, or "1998" renders as an invented "Jan 1, 1998"
+        // (#312).
+        const precision = cellDatePrecision(raw);
+        if (precision === "year")
+            return String(d.getFullYear());
+        if (precision === "month")
+            return monthFmt(locale).format(d);
+        return dateFmt(locale).format(d);
+    }
+    if (type === "datetime") {
+        // A REAL `new Date(v)`, not `parseCellDate` -- see toDateTimeInputValue's
+        // own comment; this value carries a time-of-day `parseCellDate` would
+        // discard.
+        const d = v instanceof Date ? v : v ? new Date(String(v)) : null;
+        return d && !Number.isNaN(d.getTime())
+            ? dateTimeFmt(locale).format(d)
+            : asText(v);
     }
     return asText(v);
 }
@@ -96,7 +166,9 @@ function formatCell(type, v, symbol, locale = "en-US") {
 // display string belongs -- as an entity's name, a status' label -- while the
 // raw value keeps driving structure and tone.
 function renderTyped(col, value, avatarTone, display, locale = "en-US") {
-    const empty = _jsx("span", { className: "crisp-datatable-muted", children: "\u2014" });
+    // Attio's own empty cell is genuinely blank -- no placeholder character at
+    // all, for any column type (#412).
+    const empty = null;
     switch (col.type) {
         case "entity": {
             const raw = (typeof value === "object" && value ? value : { name: asText(value) });
@@ -135,6 +207,44 @@ function renderTyped(col, value, avatarTone, display, locale = "en-US") {
     }
 }
 const CHECK_W = 40;
+// A sentinel that can't collide with a real record id (crisp never generates
+// one, and a consumer's own ids come from their own data store) -- picking
+// this row calls `onCreateReference`, not the cell's own commit (#449).
+const CREATE_REFERENCE_VALUE = "__crisp_create_reference__";
+/** The 16px avatar Attio's own reference picker draws before every option's
+ * label -- a photo when the option carries one, a generic person glyph
+ * otherwise (measured live, #449 -- the same measurement and component
+ * shape as RecordsTable's own `ReferenceCell`, which this mirrors). */
+function dataReferenceOptionLabel(o) {
+    return (_jsxs("span", { className: "crisp-datatable-refoption", children: [_jsx(Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? (_jsx("img", { src: o.avatar, alt: "" })) : (_jsx(CircleUserRound, { size: 12, strokeWidth: 1.75, "aria-hidden": "true" })) }), o.label] }));
+}
+/** `editor: "reference"`'s picker, its own component (not inline in the
+ * row-render loop) because it needs its own `useState` for the search query
+ * -- one instance per cell, same reasoning `select`/`switch` don't need a
+ * component of their own but this does. */
+function DataReferenceEditor({ col, value, isPending, onCommit, }) {
+    const [query, setQuery] = React.useState("");
+    const options = (col.refOptions ?? []).map((o) => ({
+        value: o.value,
+        label: dataReferenceOptionLabel(o),
+        keywords: o.label,
+    }));
+    if (col.onCreateReference) {
+        options.push({
+            value: CREATE_REFERENCE_VALUE,
+            label: (_jsxs("span", { className: "crisp-datatable-refoption crisp-datatable-refoption--create", children: [_jsx(Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), `Create ${col.createLabel ?? "record"}`] })),
+            // always reachable regardless of the typed query -- it's an action,
+            // not a record to filter away
+            keywords: query,
+        });
+    }
+    return (_jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+            if (v === CREATE_REFERENCE_VALUE)
+                col.onCreateReference?.(query);
+            else
+                onCommit(v);
+        } }));
+}
 export function DataTable({ columns: columnsProp, data, selectable = false, selectedIds, onSelectionChange, selectAllLabel = "Select all rows", selectRowLabel = (row) => `Select row ${row.id}`, selectionAnnouncement = (count) => count === 0 ? "Selection cleared" : `${count} selected`, columnMenu = false, onColumnsChange, groupBy, onRowsReorder, error, sort: sortProp, defaultSort, onSortChange, filterable = false, searchPlaceholder = "Search…", searchLabel = "Search table", onEdit, stickyFirst = true, stickyLast = false, locale: localeProp, avatarTone = "brand", surface, interactive = false, onRowClick, onAddRow, addRowLabel = "New record", empty = "No results.", showCount = true, countLabel = (shown, total) => shown === total
     ? `${total} ${total === 1 ? "row" : "rows"}`
     : `${shown} of ${total}`, toolbar, className, reorderRowLabel = "Reorder row", ...rest }) {
@@ -234,6 +344,10 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         setSelectionText(selectionAnnouncement(selected.size));
     }
     const [editing, setEditing] = React.useState(null);
+    // Set only while an async `onEdit` is in flight (#385) -- a sync `onEdit`
+    // never touches either of these.
+    const [pending, setPending] = React.useState(null);
+    const [editError, setEditError] = React.useState(null);
     const [scrolledX, setScrolledX] = React.useState(false);
     // Mirrors `scrolledX` for the trailing edge: true while there is still
     // unrevealed content sliding under the sticky trailing column, i.e. while
@@ -344,9 +458,18 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
      * sibling — rather than giving every type the same text box:
      *   number/currency   numeric, with a decimal keypad on touch
      *   date              a native date field
+     *   datetime          a native datetime field -- `type="date"` drops the
+     *                     time-of-day half of the value on commit; this is the
+     *                     one type that keeps it (#432), via a native
+     *                     `datetime-local` field rather than a custom popover:
+     *                     the plain-editor family is native-input-backed
+     *                     throughout, and the browser's own picker already
+     *                     carries both a calendar and a time control.
      *   text/entity       a plain text field
      * `status`, `reference` and `tags` are pickers in RecordsTable, not
-     * double-click editors, so they are not editable here either.
+     * double-click editors, so they are not editable here either -- except
+     * `editor: "reference"` (#432), which is a picker for the same reason
+     * `select`/`switch` are: always live, no double-click gate.
      */
     function editorFor(col) {
         switch (col.type) {
@@ -355,6 +478,8 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                 return { type: "number", inputMode: "decimal", step: "any" };
             case "date":
                 return { type: "date" };
+            case "datetime":
+                return { type: "datetime-local" };
             default:
                 return { type: "text", inputMode: "text" };
         }
@@ -398,11 +523,15 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
             return;
         }
         else if (e.key === "Enter") {
-            if (columns[c]?.editable) {
+            // select/switch columns have no separate editing mode to enter --
+            // they're already their own live widget (#385); Enter there is a
+            // no-op here, same as any other non-editable cell that isn't wired to
+            // onRowClick.
+            if (columns[c]?.editable && !columns[c]?.editor) {
                 e.preventDefault();
-                setEditing({ id: selCell.id, key: selCell.key });
+                openEditing(selCell.id, selCell.key);
             }
-            else if (onRowClick) {
+            else if (!columns[c]?.editable && onRowClick) {
                 e.preventDefault();
                 onRowClick(rows[r]);
             }
@@ -413,8 +542,43 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
         e.preventDefault();
         setSelCell({ id: rows[nr].id, key: columns[nc].key });
     }
+    // Opening a cell's editor also clears any stale error left over from a
+    // PREVIOUS failed commit on it (#385) -- otherwise a rejection from three
+    // edits ago would still be sitting there while the reader tries again.
+    function openEditing(id, key) {
+        setEditError(null);
+        setEditing({ id, key });
+    }
+    // Async-aware (#385): a sync `onEdit` (returns undefined) commits exactly
+    // as before -- close the editor immediately. A Promise-returning `onEdit`
+    // keeps the editor open with a pending state while it settles, then either
+    // closes it (resolve) or closes it AND reverts to the last-known-good
+    // value while showing the rejection's message beside the cell (reject).
+    // The revert needs no extra code: this component never mutates `data`
+    // itself, so once `editing` clears, the cell simply shows `data` again.
     function commitEdit(id, key, value) {
-        onEdit?.(id, key, value);
+        setEditError(null);
+        const result = onEdit?.(id, key, value);
+        if (result && typeof result.then === "function") {
+            setPending({ id, key });
+            result.then(() => {
+                setPending(null);
+                setEditing(null);
+            }, (err) => {
+                setPending(null);
+                setEditing(null);
+                setEditError({
+                    id,
+                    key,
+                    message: err instanceof Error
+                        ? err.message
+                        : typeof err === "string"
+                            ? err
+                            : "Could not save",
+                });
+            });
+            return;
+        }
         setEditing(null);
     }
     const totalCols = columns.length + (selectable ? 1 : 0) + (showGrip ? 1 : 0);
@@ -548,7 +712,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 14, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
                                     return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": `Rename column`, onBlur: (e) => {
@@ -590,38 +754,55 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                             const isEditing = editing?.id === row.id && editing?.key === col.key;
                                             const value = cellValue(col, row);
                                             const sticky = dataStickyCol(i);
+                                            const isPending = pending?.id === row.id && pending?.key === col.key;
+                                            const errorHere = editError?.id === row.id && editError?.key === col.key
+                                                ? editError.message
+                                                : null;
+                                            // A select/switch editable column is ALWAYS its own
+                                            // live widget -- no double-click gate, no separate
+                                            // edit/view mode, the same convention RecordsTable's
+                                            // status/reference pickers already use: choosing a
+                                            // value or flipping a toggle IS the commit gesture
+                                            // (#385).
+                                            if (col.editable && col.editor) {
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? (_jsx(Select, { variant: "ghost", "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: col.options ?? [], onValueChange: (v) => commitEdit(row.id, col.key, v) })) : col.editor === "reference" ? (_jsx(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : (_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));
+                                            }
                                             if (isEditing) {
-                                                return (_jsx(TableCell, { align: alignFor(col), ...sticky, 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, defaultValue: col.type === "date"
-                                                            ? toDateInputValue(value)
-                                                            : asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
-                                                            if (e.key === "Enter")
+                                                return (_jsxs(TableCell, { align: alignFor(col), ...sticky, 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)
+                                                                : col.type === "datetime"
+                                                                    ? toDateTimeInputValue(value)
+                                                                    : asText(value), "aria-label": `Edit ${col.key}`, onKeyDown: (e) => {
+                                                                if (isPending)
+                                                                    return;
+                                                                if (e.key === "Enter")
+                                                                    commitEdit(row.id, col.key, e.currentTarget.value);
+                                                                else if (e.key === "Escape")
+                                                                    setEditing(null);
+                                                            }, onBlur: (e) => {
+                                                                if (isPending)
+                                                                    return;
                                                                 commitEdit(row.id, col.key, e.currentTarget.value);
-                                                            else if (e.key === "Escape")
-                                                                setEditing(null);
-                                                        }, onBlur: (e) => commitEdit(row.id, col.key, e.currentTarget.value) }) }, col.key));
+                                                            } }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }, col.key));
                                             }
-                                            return (_jsx(TableCell, { align: alignFor(col), ...sticky, className: col.editable
+                                            return (_jsxs(TableCell, { align: alignFor(col), ...sticky, className: col.editable
                                                     ? "crisp-datatable-editable"
                                                     : undefined, "data-selected": selCell?.id === row.id && selCell?.key === col.key
                                                     ? ""
-                                                    : undefined, onClick: (e) => {
-                                                    // the keyboard model's anchor; also opens the
-                                                    // editor when the column allows it
+                                                    : undefined, onClick: () => {
+                                                    // the keyboard model's anchor -- a single click
+                                                    // only selects. A genuine double-click (or Enter
+                                                    // on the selected cell) opens the editor (#411),
+                                                    // matching RecordsTable's own onDoubleClick.
                                                     setSelCell({ id: row.id, key: col.key });
                                                     gridRef.current?.focus({ preventScroll: true });
-                                                    if (col.editable) {
-                                                        // Opening the inline editor must not also fire
-                                                        // the row's onRowClick and navigate away. Every
-                                                        // other cell click has to keep bubbling, or
-                                                        // onRowClick never fires at all.
-                                                        e.stopPropagation();
-                                                        setEditing({ id: row.id, key: col.key });
-                                                    }
-                                                }, children: col.render
-                                                    ? col.render(value, row)
-                                                    : renderTyped(col, value, avatarTone, col.format?.(value, row), locale) }, col.key));
+                                                }, onDoubleClick: col.editable
+                                                    ? () => openEditing(row.id, col.key)
+                                                    : undefined, children: [col.render
+                                                        ? col.render(value, row)
+                                                        : renderTyped(col, value, avatarTone, col.format?.(value, row), locale), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && (_jsxs(TableFooter, { children: [hasSummary && (_jsxs(TableRow, { children: [showGrip && _jsx(TableCell, { ...stickyCol(-2) }), selectable && _jsx(TableCell, { ...stickyCol(-1) }), columns.map((col, i) => (_jsx(TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && (_jsx(TableRow, { children: _jsx(TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: _jsxs("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";

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

@@ -48,10 +48,16 @@ const config = defineRecipe({
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
     & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
     & .crisp-datatable-sort { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
-    & th[data-align="right"] .crisp-datatable-sort { justify-content: flex-end; padding-inline-end: 0; }
-    & th[data-align="right"] .crisp-datatable-th-inner { justify-content: flex-end; }
+    /* A right-aligned column's header keeps its field-icon + label packed at
+       the START, matching its own values only in that the VALUES right-align
+       -- Attio's own right-aligned header (measured live: "Twitter follower
+       count") keeps the icon+label left and only the trailing column-menu
+       icon sits pinned to the right edge, independent of the label's width
+       (#406, reversing #393's own justify-content: flex-end here). The
+       chevron's own margin-inline-start: auto below already pins IT to the
+       end of a flex-start row with no override needed -- that's what pins
+       the trailing icon on Attio too. */
     & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: ${c.fgMuted}; opacity: 0; transition: opacity .12s; }
-    & th[data-align="right"] .crisp-datatable-chevron { margin-inline-start: 0; order: -1; }
     & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
     & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: ${c.fgPrimary}; }
     /* sticky first column(s) + horizontal scroll shadow — RecordsTable's feel */
@@ -74,6 +80,34 @@ const config = defineRecipe({
     & .crisp-datatable-editable:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, ${c.bgSurface}); cursor: text; }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 ${c.space["1.5"]}; border: none; border-radius: ${c.radius.sm}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px ${c.bgBrandSolid}; }
+    /* An async onEdit's in-flight state (#385) -- the field/picker dims and
+       stops accepting input rather than disappearing, so the just-typed or
+       just-chosen value stays visible while its commit is pending. Same
+       treatment Input already gives its own disabled state. */
+    & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
+    & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: ${c.space["1"]}; color: ${c.fgMuted}; vertical-align: middle; }
+    /* The rejection's message, beside the cell's own content -- a sibling in
+       the TableCell, never nested inside a column's own render output, so a
+       hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       it. Block-level: the row grows to fit it rather than floating over
+       the row below, so it can never end up clipped by the scroll
+       container's overflow the way a position:fixed escape would need
+       guarding against. */
+    & .crisp-datatable-edit-error { display: block; padding: ${c.space["0.5"]} 0 0; font-size: ${c.text.sm}; color: ${c.bgDanger}; }
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so
+       the cell IS the picker: same chromeless-fill treatment as
+       RecordsTable's own --picker cells (measured there already; DataTable
+       shares RecordsTable's grid, Golden Rule 0). */
+    & .crisp-datatable-td--picker { padding: 0; }
+    & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: ${c.space["1"]}; height: ${c.size.tableRow}; padding: 0 ${c.space["2"]}; }
+    & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
+    & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: ${c.space["2"]}; }
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- same measured
+       values as RecordsTable's own .crisp-recordstable-refoption*. */
+    & .crisp-datatable-refoption { display: flex; align-items: center; gap: ${c.space["2"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
+    & .crisp-datatable-refoption--create { color: ${c.fgMuted}; }
     & .crisp-datatable-empty { padding: ${c.space["8"]} ${c.space["3"]}; text-align: center; color: ${c.fgMuted}; font-size: ${c.text.lg}; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }

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

@@ -1,2 +1,8 @@
 export { DataTable, } from "./datatable.js";
+// `EntityValue` (identical shape, `{ name: string; avatar?: string }`) is
+// deliberately NOT re-exported here: `product/recordstable`'s own barrel
+// already exports a type of that name at the package root, and re-exporting
+// this module's copy too makes `EntityValue` an ambiguous export (TS2308) --
+// verified by trying it. A DataTable consumer needing the type imports it
+// from there; it's the same shape either table would want.
 export { datatableRecipe } from "./datatable.recipe.js";

package/dist/esm/components/datepickerfield/datepickerfield.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CalendarDays } from "lucide-react";
+import { CalendarDays, X } from "lucide-react";
 import * as React from "react";
 import { DatePicker, } from "../datepicker/index.js";
 import { Popover } from "../popover/index.js";
@@ -21,7 +21,7 @@ const fromDate = (d) => ({
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
+export function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder = "Set date…", variant = "default", format = defaultFormat, clearable = true, clearLabel = "Clear date", presets, calendarProps, "aria-label": ariaLabel, className, ...rest }) {
     const [internal, setInternal] = React.useState(defaultValue ?? null);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -33,19 +33,29 @@ export function DatePickerField({ value, defaultValue, onValueChange, onChange,
         onChange?.(d);
         setOpen(false);
     };
-    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
-                    // DatePickerProps is a union over selectionMode, and TypeScript
-                    // cannot narrow it through a spread: it tries every branch and
-                    // reports the range one as missing props. The field is always
-                    // single-select, so the shape is pinned here rather than inferred.
-                    , { ...{
-                            ...calendarProps,
-                            selectionMode: "single",
-                            value: selected ? fromDate(selected) : undefined,
-                            onValueChange: (next) => {
-                                if (next)
-                                    pick(toDate(next));
-                            },
-                        } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }) }));
+    const clear = () => {
+        if (value === undefined)
+            setInternal(null);
+        onValueChange?.(null);
+        onChange?.(null);
+    };
+    return (_jsx("div", { className: datepickerfieldRecipe({ className }), ...rest, children: _jsxs("div", { className: "crisp-datepickerfield-box", "data-ghost": variant === "ghost" ? "" : undefined, "data-placeholder": selected ? undefined : "", children: [_jsx(Popover, { open: open, onOpenChange: setOpen, "aria-label": ariaLabel, trigger: _jsxs("button", { type: "button", className: "crisp-datepickerfield-trigger", "aria-label": ariaLabel, children: [_jsx(CalendarDays, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), selected ? format(selected) : placeholder] }), children: _jsxs("div", { className: "crisp-datepickerfield-panel", children: [_jsx(DatePicker
+                            // DatePickerProps is a union over selectionMode, and TypeScript
+                            // cannot narrow it through a spread: it tries every branch and
+                            // reports the range one as missing props. The field is always
+                            // single-select, so the shape is pinned here rather than inferred.
+                            , { ...{
+                                    ...calendarProps,
+                                    selectionMode: "single",
+                                    value: selected ? fromDate(selected) : undefined,
+                                    onValueChange: (next) => {
+                                        if (next)
+                                            pick(toDate(next));
+                                    },
+                                } }), presets && presets.length > 0 && (_jsx("div", { className: "crisp-datepickerfield-presets", children: presets.map((p, i) => (_jsx("button", { type: "button", className: "crisp-datepickerfield-preset", onClick: () => pick(p.date()), children: p.label }, typeof p.label === "string" ? p.label : i))) }))] }) }), clearable && selected && (_jsx("button", { type: "button", className: "crisp-datepickerfield-clear", "aria-label": clearLabel, onClick: (e) => {
+                        // not the trigger button's own click -- Popover would open
+                        e.stopPropagation();
+                        clear();
+                    }, children: _jsx(X, { size: 13, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }) }));
 }
 DatePickerField.displayName = "DatePickerField";

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

@@ -9,18 +9,35 @@ const config = defineRecipe({
     base: `
     display: inline-flex; font-family: ${c.font.sans};
 
-    & .crisp-datepickerfield-trigger {
-      display: inline-flex; align-items: center; gap: ${c.space["2"]};
-      box-sizing: border-box; height: 32px; padding: 0 ${c.space["2.5"]}; margin: 0;
-      border: none; border-radius: ${c.radius.md}; background: transparent;
+    & .crisp-datepickerfield-box {
+      display: inline-flex; align-items: center;
+      box-sizing: border-box; height: 32px; margin: 0;
+      border-radius: ${c.radius.md}; background: transparent;
       box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.fgPrimary} 7%, transparent);
       color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.lg};
-      white-space: nowrap; cursor: pointer;
     }
-    & .crisp-datepickerfield-trigger[data-ghost] { background: transparent; box-shadow: none; }
-    & .crisp-datepickerfield-trigger[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
-    & .crisp-datepickerfield-trigger[data-placeholder] { color: ${c.fgMuted}; }
+    & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
+    & .crisp-datepickerfield-trigger {
+      display: inline-flex; align-items: center; gap: ${c.space["2"]};
+      height: 100%; padding: 0 ${c.space["2.5"]}; margin: 0;
+      border: none; background: none; color: inherit; font-family: inherit;
+      font-size: inherit; white-space: nowrap; cursor: pointer;
+    }
+    & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: ${c.fgMuted}; }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: ${c.fgMuted}; }
+    /* Reuses TableToolbar's measured filter-chip remove button
+       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same
+       small inline "clear this value" affordance, not a freshly-measured
+       one: no live Attio composition for a DatePickerField-equivalent
+       clear was reachable this round (#394). */
+    & .crisp-datepickerfield-clear {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 20px; height: 20px; margin-inline-end: ${c.space["1"]}; padding: 0;
+      border: none; border-radius: ${c.radius.sm}; background: none;
+      color: ${c.fgMuted}; font-family: inherit; cursor: pointer;
+    }
+    & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, ${c.fgPrimary} 10%, transparent); color: ${c.fgPrimary}; }
 
     & .crisp-datepickerfield-panel { padding: ${c.space["2"]}; width: 300px; }
     & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; }