@crisp-ui-kit/crisp 0.49.0 → 0.51.0

package/dist/cjs/components/composewindow/composewindow.js

@@ -0,0 +1,144 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComposeWindow = ComposeWindow;
+exports.ComposeWindowBody = ComposeWindowBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dialog = __importStar(require("@zag-js/dialog"));
+const react_1 = require("@zag-js/react");
+const lucide_react_1 = require("lucide-react");
+const React = __importStar(require("react"));
+const core_1 = require("../../core");
+const composewindow_recipe_1 = require("./composewindow.recipe");
+// 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.
+ */
+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 = (0, react_1.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, react_1.normalizeProps);
+    if (!open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_1.Portal, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, composewindow_recipe_1.composewindowRecipe)(), children: [(0, jsx_runtime_1.jsx)("div", { ...api.getBackdropProps(), className: "crisp-composewindow-backdrop" }), (0, jsx_runtime_1.jsx)("div", { ...api.getPositionerProps(), className: "crisp-composewindow-positioner", children: (0, jsx_runtime_1.jsx)("div", { ...rest, ...(0, core_1.withDescribedBy)(api.getContentProps(), describedBy), className: (0, core_1.cx)("crisp-composewindow-content", className), "data-crisp-composewindow": id, "data-minimized": minimized || undefined, style: { ...style, maxWidth: `min(${width}px, 90vw)` }, children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-composewindow-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-composewindow-header", children: [(0, jsx_runtime_1.jsx)("span", { ...api.getTitleProps(), className: "crisp-composewindow-breadcrumb", children: breadcrumb }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-composewindow-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-composewindow-action-btn", "aria-label": minimizeLabel, onClick: () => setMinimized(true), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-composewindow-action-btn", "aria-label": pinLabel, "aria-pressed": pinned, "data-state": pinned ? "on" : "off", onClick: () => setPinned(!pinned), children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pin, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", ...api.getCloseTriggerProps(), className: "crisp-composewindow-action-btn", "aria-label": closeLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14, strokeWidth: 2, "aria-hidden": "true" }) })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-composewindow-body", children: children })] }) }) })] }) }));
+}
+ComposeWindow.displayName = "ComposeWindow";
+function ComposeWindowBody({ children, className, }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className
+            ? `crisp-composewindow-content-body ${className}`
+            : "crisp-composewindow-content-body", children: children }));
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composewindowRecipe = void 0;
+const core_1 = require("../../core");
+const tokens_1 = require("../../tokens");
+// 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 = (0, core_1.defineRecipe)({
+    name: "composewindow",
+    base: `display: contents; font-family: ${tokens_1.contract.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 ${tokens_1.contract.space["4"]} ${tokens_1.contract.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: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius["2xl"]}; background: color-mix(in srgb, ${tokens_1.contract.bgOverlayFrost} 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: ${tokens_1.elevation.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: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.fgPrimary} 8%, transparent); overflow: hidden; }
+    & .crisp-composewindow-header { display: flex; align-items: center; justify-content: space-between; gap: ${tokens_1.contract.space["2"]}; flex-shrink: 0; height: 52px; padding: 0 ${tokens_1.contract.space["2"]} 0 ${tokens_1.contract.space["4"]}; border-bottom: 1px solid ${tokens_1.contract.borderSubtle}; }
+    & .crisp-composewindow-breadcrumb { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${tokens_1.contract.text.md}; color: ${tokens_1.contract.fgMuted}; }
+    & .crisp-composewindow-actions { display: flex; align-items: center; gap: ${tokens_1.contract.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: ${tokens_1.contract.radius.md}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
+    & .crisp-composewindow-action-btn:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-composewindow-action-btn[data-state="on"] { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 14%, transparent); color: ${tokens_1.contract.bgBrandSolid}; }
+    & .crisp-composewindow-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: ${tokens_1.contract.space["5"]} ${tokens_1.contract.space["4"]}; }
+    & .crisp-composewindow-content-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["4"]}; }`,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+exports.composewindowRecipe = (0, core_1.resolveRecipe)(config);
+exports.default = config;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.composewindowRecipe = exports.ComposeWindowBody = exports.ComposeWindow = void 0;
+var composewindow_1 = require("./composewindow");
+Object.defineProperty(exports, "ComposeWindow", { enumerable: true, get: function () { return composewindow_1.ComposeWindow; } });
+Object.defineProperty(exports, "ComposeWindowBody", { enumerable: true, get: function () { return composewindow_1.ComposeWindowBody; } });
+var composewindow_recipe_1 = require("./composewindow.recipe");
+Object.defineProperty(exports, "composewindowRecipe", { enumerable: true, get: function () { return composewindow_recipe_1.composewindowRecipe; } });

package/dist/cjs/components/datatable/datatable.js

@@ -38,8 +38,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const core_1 = require("../../core");
+const avatar_1 = require("../avatar");
 const checkbox_1 = require("../checkbox");
 const menu_1 = require("../menu");
+const select_1 = require("../select");
+const spinner_1 = require("../spinner");
+const switch_1 = require("../switch");
 const table_1 = require("../table");
 const datatable_recipe_1 = require("./datatable.recipe");
 /** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
@@ -58,6 +62,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);
@@ -92,21 +116,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);
@@ -118,8 +167,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 ? (0, core_1.parseCellDate)(String(v)) : null;
-        return d ? dateFmt(locale).format(d) : asText(v);
+        const raw = v ? String(v) : "";
+        const d = raw ? (0, core_1.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 = (0, core_1.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);
 }
@@ -132,7 +202,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 = (0, jsx_runtime_1.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) });
@@ -171,6 +243,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 ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-refoption", children: [(0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", className: "crisp-datatable-refoption-avatar", children: o.avatar ? ((0, jsx_runtime_1.jsx)("img", { src: o.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.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: ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-refoption crisp-datatable-refoption--create", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.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 ((0, jsx_runtime_1.jsx)(select_1.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);
+        } }));
+}
 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 }) {
@@ -270,6 +380,10 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         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
@@ -380,9 +494,18 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
      * 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) {
@@ -391,6 +514,8 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                 return { type: "number", inputMode: "decimal", step: "any" };
             case "date":
                 return { type: "date" };
+            case "datetime":
+                return { type: "datetime-local" };
             default:
                 return { type: "text", inputMode: "text" };
         }
@@ -434,11 +559,15 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
             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]);
             }
@@ -449,8 +578,43 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
         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);
@@ -584,7 +748,7 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 14, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-th-inner", children: [Icon ? (0, jsx_runtime_1.jsx)(Icon, { size: 16, strokeWidth: 1.75 }) : null, (0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-th-label", children: col.header }), col.sortable ? (0, jsx_runtime_1.jsx)(ChevronFor, { colKey: col.key }) : null] }));
                                     return ((0, jsx_runtime_1.jsxs)(table_1.TableHead, { align: alignFor(col), "aria-sort": ariaSort, ...dataStickyCol(i), children: [renaming === col.key ? ((0, jsx_runtime_1.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) => {
@@ -626,38 +790,55 @@ function DataTable({ columns: columnsProp, data, selectable = false, selectedIds
                                             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 ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-datatable-edit-picker", children: [col.editor === "select" ? ((0, jsx_runtime_1.jsx)(select_1.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" ? ((0, jsx_runtime_1.jsx)(DataReferenceEditor, { col: col, value: value, isPending: isPending, onCommit: (v) => commitEdit(row.id, col.key, v) })) : ((0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) })), isPending && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
+                                            }
                                             if (isEditing) {
-                                                return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(table_1.TableCell, { align: alignFor(col), ...sticky, onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }, col.key));
                                             }
-                                            return ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...sticky, className: col.editable
+                                            return ((0, jsx_runtime_1.jsxs)(table_1.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 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                         })] }, row.id)))] }, group ?? "__ungrouped")))) }), (hasSummary || onAddRow) && ((0, jsx_runtime_1.jsxs)(table_1.TableFooter, { children: [hasSummary && ((0, jsx_runtime_1.jsxs)(table_1.TableRow, { children: [showGrip && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-2) }), selectable && (0, jsx_runtime_1.jsx)(table_1.TableCell, { ...stickyCol(-1) }), columns.map((col, i) => ((0, jsx_runtime_1.jsx)(table_1.TableCell, { align: alignFor(col), ...dataStickyCol(i), children: col.summary ? col.summary(rows) : null }, col.key)))] })), onAddRow && ((0, jsx_runtime_1.jsx)(table_1.TableRow, { children: (0, jsx_runtime_1.jsx)(table_1.TableCell, { className: "crisp-datatable-addcell", colSpan: totalCols, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-datatable-addrow", onClick: onAddRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), addRowLabel] }) }) }))] }))] })] }));
 }
 DataTable.displayName = "DataTable";