@crisp-ui-kit/crisp 0.49.0 → 0.51.0

package/dist/datepickerfield.layered.css

@@ -1,11 +1,16 @@
 @layer crisp-components {
 .crisp-datepickerfield {
   display: inline-flex; font-family: var(--crisp-font-sans);
-    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); box-sizing: border-box; height: 32px; padding: 0 var(--crisp-space-2-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-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, var(--crisp-fg-primary) 4%, transparent); }
-    & .crisp-datepickerfield-trigger[data-placeholder] { color: var(--crisp-fg-muted); }
+    & .crisp-datepickerfield-box { display: inline-flex; align-items: center; box-sizing: border-box; height: 32px; margin: 0; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); }
+    & .crisp-datepickerfield-box[data-ghost] { background: transparent; box-shadow: none; }
+    & .crisp-datepickerfield-box[data-ghost]:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+    & .crisp-datepickerfield-trigger { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 100%; padding: 0 var(--crisp-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: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    /* 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: var(--crisp-space-1); padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datepickerfield-panel { padding: var(--crisp-space-2); width: 300px; }
     & .crisp-datepickerfield-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); }
     & .crisp-datepickerfield-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }

package/dist/dialog.css

@@ -15,7 +15,8 @@
     & .crisp-dialog-field-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: var(--crisp-space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
-    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+    & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: var(--crisp-fg-on-brand); font-family: inherit; font-style: normal; font-size: 10px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/dialog.layered.css

@@ -16,7 +16,8 @@
     & .crisp-dialog-field-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: var(--crisp-space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
-    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+    & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+    & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: var(--crisp-fg-on-brand); font-family: inherit; font-style: normal; font-size: 10px; }
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as dialog from "@zag-js/dialog";
+import { normalizeProps, Portal, useMachine } from "@zag-js/react";
+import { Minus, Pin, X } from "lucide-react";
+import * as React from "react";
+import { cx, withDescribedBy } from "../../core/index.js";
+import { composewindowRecipe } from "./composewindow.recipe.js";
+// A globally unique id per mounted instance — see command.tsx/dialog.tsx for
+// the rationale (the machine defers its dismissal listeners a frame, so a
+// tree-relative id could let a stale registration resolve to a new instance).
+let instanceCounter = 0;
+function useComposeWindowInstanceId() {
+    const idRef = React.useRef(null);
+    if (idRef.current == null) {
+        instanceCounter += 1;
+        idRef.current = `crisp-composewindow-${instanceCounter}`;
+    }
+    return idRef.current;
+}
+/**
+ * A floating, minimizable, pinnable window — Attio's own note "compose
+ * window" chrome (measured live, read-only, 2026-09-24; see HANDOFF), not a
+ * new visual recipe: it reuses `Dialog`'s exact measured frosted-glass panel
+ * (`bgOverlayFrost` 60% + `blur(15px)`, `elevation.modal`'s 3-layer shadow,
+ * 16px outer radius) — those numbers matched Attio's compose window exactly
+ * when re-checked against it, panel-for-panel. What's actually different
+ * from `Dialog` is the header (a breadcrumb plus minimize/pin/close, not a
+ * title plus close) and two extra pieces of state Dialog has no concept of.
+ *
+ * `minimized` is measured, not guessed — the FIRST version of this file built
+ * an invented "minimized bar" (a Gmail-style dock, since a bar was never
+ * actually exercised against Attio). Re-measured properly: minimizing an
+ * existing note does not produce any bar, tray, dock, or badge anywhere on
+ * screen. Confirmed four independent ways, both with synthetic and real
+ * CDP-dispatched trusted clicks — the element count under the note's own
+ * subtree drops by ~110 nodes, `[role="dialog"]` stops matching it, its
+ * `data-hidden="true"` ancestor computes `visibility: hidden; opacity: 0`,
+ * and the URL drops the `?id=…&modal=note` query exactly like Close does —
+ * but the subtree is NOT removed: `document.querySelectorAll('[aria-label=
+ * "Minimize"]')` still finds it afterward, `visibility: hidden` (not
+ * `display: none`) preserves layout, and nothing in localStorage or the DOM
+ * suggests state was discarded. So: minimized hides the panel — mounted,
+ * `visibility: hidden; opacity: 0` — rather than unmounting or closing it,
+ * and crisp renders no restore affordance of its own (Attio has none
+ * either); reopening is the consumer's own UI, driven by `minimized`/
+ * `onMinimizedChange` the same way `open` already works.
+ *
+ * "Pinned" is implemented as the one directly-supported behavior that
+ * matches its name (Zag's `closeOnInteractOutside`, off while pinned) —
+ * Attio's own multi-instance stacking/docking when pinned was not exercised,
+ * so nothing here repositions the window when pinned.
+ *
+ * Not modal: Attio's own compose window dims nothing behind it (`Dialog`'s
+ * backdrop is `background: transparent` too — the blur alone does the
+ * separation), and the page behind stays visibly interactive in the
+ * measured screenshot. `trapFocus` follows the same call — a picture-in-
+ * picture window, not a modal, so Tab is not caught inside it.
+ */
+export function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width = 968, "aria-label": ariaLabel, minimizeLabel = "Minimize", pinLabel = "Pin to screen", closeLabel = "Close", children, className, style, "aria-describedby": describedBy, ...rest }) {
+    const id = useComposeWindowInstanceId();
+    const [internalMinimized, setInternalMinimized] = React.useState(defaultMinimized ?? false);
+    const minimized = minimizedProp ?? internalMinimized;
+    const setMinimized = React.useCallback((next) => {
+        if (minimizedProp === undefined)
+            setInternalMinimized(next);
+        onMinimizedChange?.(next);
+    }, [minimizedProp, onMinimizedChange]);
+    const [internalPinned, setInternalPinned] = React.useState(defaultPinned ?? false);
+    const pinned = pinnedProp ?? internalPinned;
+    const setPinned = React.useCallback((next) => {
+        if (pinnedProp === undefined)
+            setInternalPinned(next);
+        onPinnedChange?.(next);
+    }, [pinnedProp, onPinnedChange]);
+    const service = useMachine(dialog.machine, {
+        id,
+        // Always `open` while the consumer says so — NOT `open && !minimized`.
+        // Zag's own "closed" state sets `hidden` on the content element, which
+        // the browser's UA stylesheet turns into `display: none` — the exact
+        // thing minimized must NOT be (Attio's own measured minimized subtree
+        // keeps `display: flex`, only `visibility`/`opacity` change). Disabling
+        // `closeOnEscape`/`closeOnInteractOutside` below gets the same "stand
+        // down while minimized" result without that side effect.
+        open,
+        onOpenChange(details) {
+            // Zag only ever asks to close (Escape / outside pointerdown) — it
+            // never asks to open on its own, so this is always a close request.
+            if (!details.open)
+                onOpenChange(false);
+        },
+        modal: false,
+        trapFocus: false,
+        closeOnInteractOutside: !pinned && !minimized,
+        closeOnEscape: !minimized,
+        "aria-label": ariaLabel,
+    });
+    const api = dialog.connect(service, normalizeProps);
+    if (!open)
+        return null;
+    return (_jsx(Portal, { children: _jsxs("div", { className: composewindowRecipe(), children: [_jsx("div", { ...api.getBackdropProps(), className: "crisp-composewindow-backdrop" }), _jsx("div", { ...api.getPositionerProps(), className: "crisp-composewindow-positioner", children: _jsx("div", { ...rest, ...withDescribedBy(api.getContentProps(), describedBy), className: cx("crisp-composewindow-content", className), "data-crisp-composewindow": id, "data-minimized": minimized || undefined, style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: _jsxs("div", { className: "crisp-composewindow-card", children: [_jsxs("div", { className: "crisp-composewindow-header", children: [_jsx("span", { ...api.getTitleProps(), className: "crisp-composewindow-breadcrumb", children: breadcrumb }), _jsxs("div", { className: "crisp-composewindow-actions", children: [_jsx("button", { type: "button", className: "crisp-composewindow-action-btn", "aria-label": minimizeLabel, onClick: () => setMinimized(true), children: _jsx(Minus, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "crisp-composewindow-action-btn", "aria-label": pinLabel, "aria-pressed": pinned, "data-state": pinned ? "on" : "off", onClick: () => setPinned(!pinned), children: _jsx(Pin, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) }), _jsx("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-composewindow-action-btn", "aria-label": closeLabel, children: _jsx(X, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: "crisp-composewindow-body", children: children })] }) }) })] }) }));
+}
+ComposeWindow.displayName = "ComposeWindow";
+export function ComposeWindowBody({ children, className, }) {
+    return (_jsx("div", { className: className
+            ? `crisp-composewindow-content-body ${className}`
+            : "crisp-composewindow-content-body", children: children }));
+}

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";