@crisp-ui-kit/crisp 0.49.0 → 0.51.0

package/dist/types/components/composewindow/composewindow.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+export type ComposeWindowProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    /** Controlled open state — `ComposeWindow` never manages this itself, the
+     * same controlled-only shape as `Dialog`/`Drawer`/`Command`. This is
+     * deliberate: crisp has no router dependency, so making the window fully
+     * controlled (this, and `minimized`/`pinned` below) is what lets a
+     * consumer sync it to a URL itself — the way Attio's own note window is
+     * addressable via `?id=…&modal=note` — without crisp owning any routing. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The header's leading area — typically a link to whatever record this
+     * window is attached to. Rendered as-is; crisp does not style its
+     * contents beyond spacing, since the exact breadcrumb chip inside it
+     * wasn't independently re-measured (see the component's own doc comment). */
+    breadcrumb?: React.ReactNode;
+    /** Minimized state. Omit for uncontrolled (see `defaultMinimized`). */
+    minimized?: boolean;
+    defaultMinimized?: boolean;
+    onMinimizedChange?: (minimized: boolean) => void;
+    /** Pinned state. While pinned, clicking outside the window does not close
+     * it. Omit for uncontrolled (see `defaultPinned`). */
+    pinned?: boolean;
+    defaultPinned?: boolean;
+    onPinnedChange?: (pinned: boolean) => void;
+    /** Content width in px (clamped to 90vw), matching `Dialog`'s own knob.
+     * Default 968 — Attio's own measured note window width. */
+    width?: number;
+    "aria-label"?: string;
+    minimizeLabel?: string;
+    pinLabel?: string;
+    closeLabel?: string;
+    children?: React.ReactNode;
+};
+/**
+ * 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 declare function ComposeWindow({ open, onOpenChange, breadcrumb, minimized: minimizedProp, defaultMinimized, onMinimizedChange, pinned: pinnedProp, defaultPinned, onPinnedChange, width, "aria-label": ariaLabel, minimizeLabel, pinLabel, closeLabel, children, className, style, "aria-describedby": describedBy, ...rest }: ComposeWindowProps): React.JSX.Element | null;
+export declare namespace ComposeWindow {
+    var displayName: string;
+}
+export declare function ComposeWindowBody({ children, className, }: {
+    children?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;

package/dist/types/components/composewindow/composewindow.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const composewindowRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/components/composewindow/index.d.ts

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

package/dist/types/components/datatable/datatable.d.ts

@@ -7,7 +7,18 @@ export type EntityValue = {
     name: string;
     avatar?: string;
 };
-export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "number" | "currency";
+/** An `editor: "select"` column's choices. Same shape as RecordsTable's
+ * `StatusOption`. */
+export type DataEditableOption = {
+    value: string;
+    label: string;
+    color?: string;
+    /** `editor: "reference"` only (#449) — a photo URL for the option's
+     * leading avatar; a generic icon renders when omitted. Unused by
+     * `editor: "select"`. */
+    avatar?: string;
+};
+export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency";
 export type DataTableColumn<T> = {
     key: string;
     /** Truncates with an ellipsis when it's wider than the
@@ -29,8 +40,44 @@ export type DataTableColumn<T> = {
     sortable?: boolean;
     /** Exclude this column from the search filter (default: included). */
     filterable?: boolean;
-    /** Allow inline editing (click the cell → text input → Enter/blur commits). */
+    /** Allow inline editing. A plain `editable` column opens a text/number/
+     * date/datetime field on double-click (Enter/blur/choosing a value
+     * commits) — see `editor` for `select`/`switch`/`reference`. */
     editable?: boolean;
+    /** The inline editor an `editable` column opens. Omitted: a plain field
+     * inferred from `type` (number/date/datetime/text), gated behind the
+     * double-click `editable` opens today. `"select"`/`"switch"`/`"reference"`
+     * instead render crisp's own `Select`/`Switch` as the cell's live content,
+     * ALWAYS interactive — no double-click gate, no separate edit/view mode —
+     * the same convention RecordsTable's `status`/`reference` pickers already
+     * use, since choosing an option or flipping a toggle IS the commit
+     * gesture; there is nothing for a second click to open. `select` reads
+     * `options`; `reference` reads `refOptions` and is search-enabled, the
+     * same searchable-`Select` shape as `RecordsTable`'s own
+     * `ReferenceCell`. */
+    editor?: "select" | "switch" | "reference";
+    /** Options for `editor: "select"` (value/label, an optional `color` a
+     * caller's own `render` can read) — same shape as RecordsTable's
+     * `Column.options` for its `status` picker. */
+    options?: DataEditableOption[];
+    /** Options for `editor: "reference"` — same shape as `options`, plus
+     * `avatar` (#449): a 16px avatar renders before each option's label, a
+     * photo when given, a generic fallback icon otherwise — matching
+     * RecordsTable's own `ReferenceCell`, which this picker mirrors. */
+    refOptions?: DataEditableOption[];
+    /** Placeholder for `editor: "reference"`'s search input. Defaults to
+     * `Select`'s own generic "Search…" — a generic primitive doesn't hardcode
+     * Attio's own copy ("Search records..."), which is workspace/object
+     * text, not a crisp-measured value. */
+    refSearchPlaceholder?: string;
+    /** Adds a trailing "Create {createLabel}" row to `editor: "reference"`'s
+     * picker (Attio's own always has one, #449) — rendered only when this is
+     * provided. Picking it hands back the picker's current search text, e.g.
+     * to open a create flow pre-seeded with it. */
+    onCreateReference?: (query: string) => void;
+    /** The object noun in "Create {createLabel}" (Attio: "Create Person").
+     * Only used with `onCreateReference`; defaults to "record". */
+    createLabel?: string;
     align?: "left" | "right" | "center";
     width?: number;
     /** Custom cell renderer. */
@@ -125,8 +172,15 @@ export type DataTableProps<T extends {
      * of `searchPlaceholder`, which is visible text — this is the
      * screen-reader-only label. */
     searchLabel?: string;
-    /** Commit handler for inline edits. */
-    onEdit?: (id: string, key: string, value: string) => void;
+    /** Commit handler for inline edits. Returning (or resolving) nothing
+     * commits synchronously, same as before -- `Promise<void>` is additive.
+     * Returning a `Promise` that rejects shows a pending state on the cell
+     * while it's in flight, then reverts the cell to its last-known-good value
+     * (the cell only ever shows `data`, which this never mutates itself) and
+     * renders the rejection's message in an error slot beside the cell,
+     * outside `render`'s own output so a hover-only wrapper (a `Tooltip`, say)
+     * can't swallow it. */
+    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
     /** Sticky the first column(s) with a horizontal scroll shadow (default true). */
     stickyFirst?: boolean;
     /** Sticky the LAST column with a horizontal scroll shadow, mirroring

package/dist/types/components/datatable/index.d.ts

@@ -1,2 +1,2 @@
-export { DataTable, type DataTableColumn, type DataTableProps, type SortState, } from "./datatable";
+export { type DataCellType, type DataEditableOption, DataTable, type DataTableColumn, type DataTableProps, type SortState, } from "./datatable";
 export { datatableRecipe } from "./datatable.recipe";

package/dist/types/components/datepickerfield/datepickerfield.d.ts

@@ -11,20 +11,34 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
     /** Controlled value. Omit to let the field manage it (see defaultValue). */
     value?: Date | null;
     defaultValue?: Date | null;
-    /** Fires with the picked date, controlled or not. */
-    onValueChange?: (date: Date) => void;
+    /**
+     * Fires with the picked date, controlled or not — or `null`, when the
+     * field's own Clear button is pressed (#394). A field whose value is
+     * meaningfully optional (a range's From/To, e.g. — blank legitimately
+     * means "unconstrained") needs a way back to that blank state without
+     * leaving the field; there was none before this.
+     */
+    onValueChange?: (date: Date | null) => void;
     /**
      * The original name for `onValueChange`, kept working so no consumer breaks.
      * Prefer `onValueChange`: it is what every other crisp component calls this,
      * and passing the house name to a component that only knew `onChange` was
      * not a type error — the handler simply never fired (#202).
      */
-    onChange?: (date: Date) => void;
+    onChange?: (date: Date | null) => void;
     placeholder?: string;
     /** `default` = outlined trigger; `ghost` = transparent (for table cells). */
     variant?: "default" | "ghost";
     /** Formats the trigger label (default: e.g. "Jun 3, 2026"). */
     format?: (date: Date) => string;
+    /**
+     * Shows a Clear (×) button next to the trigger once a value is set
+     * (default `true`). Set `false` for a field whose value is never
+     * meaningfully optional.
+     */
+    clearable?: boolean;
+    /** aria-label on the Clear button (default "Clear date"). */
+    clearLabel?: string;
     /** Quick-pick chips under the calendar. */
     presets?: DatePreset[];
     /** Forwarded to the calendar — constraints, locale, ariaLabels and the rest. */
@@ -37,7 +51,7 @@ export type DatePickerFieldProps = Omit<React.ComponentPropsWithoutRef<"div">, "
  * popover. This is what `DatePicker` used to be; `DatePicker` is now
  * seed-design's bare calendar, and this composes it.
  */
-export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
+export declare function DatePickerField({ value, defaultValue, onValueChange, onChange, placeholder, variant, format, clearable, clearLabel, presets, calendarProps, "aria-label": ariaLabel, className, ...rest }: DatePickerFieldProps): React.JSX.Element;
 export declare namespace DatePickerField {
     var displayName: string;
 }

package/dist/types/components/menu/menu.d.ts

@@ -13,6 +13,15 @@ export type MenuProps = {
     /** Fires with the next open state, controlled or not. */
     onOpenChange?: (open: boolean) => void;
     className?: string;
+    /**
+     * Extra class(es) for the popover surface itself (`.crisp-menu-content`).
+     * `className` alone can't reach it: the surface is portaled to
+     * `document.body` (#339) so it's no longer a DOM descendant of the root
+     * `className` lands on, and a descendant selector scoped to the root
+     * silently matches nothing there — found wiring the workspace switcher's
+     * wider, Attio-measured popover (#415).
+     */
+    contentClassName?: string;
     "aria-label"?: string;
 };
 /**
@@ -22,7 +31,7 @@ export type MenuProps = {
  * typeahead, Enter/Space select, Esc closes and returns focus to the trigger);
  * closes on outside click. Flips up / right-aligns when space is tight.
  */
-export declare function Menu({ trigger, children, align, open: openProp, defaultOpen, onOpenChange, className, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
+export declare function Menu({ trigger, children, align, open: openProp, defaultOpen, onOpenChange, className, contentClassName, "aria-label": ariaLabel, }: MenuProps): React.JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }

package/dist/types/components/select/select.d.ts

@@ -47,6 +47,11 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
     /** Show a search field at the top of the list that filters options (Linear/cmdk style). */
     searchable?: boolean;
     searchPlaceholder?: string;
+    /** Fires on every keystroke in the search field. `Select` filters `options`
+     * itself, so this exists for a consumer who needs the raw text too — a
+     * trailing "create" row seeded with it, a server-side search, and so on.
+     * Only meaningful with `searchable`. */
+    onSearchChange?: (query: string) => void;
     /** Shown when the search matches nothing. */
     emptyLabel?: string;
     disabled?: boolean;
@@ -64,7 +69,7 @@ export type SelectProps = Omit<React.ComponentPropsWithoutRef<"div">, "value" |
  * "No results" empty state). Full keyboard model — ↑/↓ move, Enter/Space pick,
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
-export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
+export declare function Select({ options, value, defaultValue, onValueChange, name, required, placeholder, variant, width, searchable, searchPlaceholder, onSearchChange, emptyLabel, disabled, invalid, className, "aria-label": ariaLabel, id, ...rest }: SelectProps): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

package/dist/types/components/tabletoolbar/tabletoolbar.d.ts

@@ -31,8 +31,25 @@ export type TableToolbarColumn = {
     values?: string[];
 };
 export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
-    /** The fields that can be sorted and filtered on. */
-    columns: TableToolbarColumn[];
+    /**
+     * The fields Sort and Filter both offer, when neither overrides it below.
+     * Optional only when `sortColumns` AND `filterColumns` are both supplied —
+     * TableToolbar has nothing left to fall back to otherwise, and a side left
+     * with neither offers no fields at all (its trigger still renders; its
+     * popover is just empty).
+     */
+    columns?: TableToolbarColumn[];
+    /**
+     * The fields Sort offers, when they differ from Filter's — Attio's own
+     * Tasks page is the reference (measured live, `app.attio.com/<ws>/tasks`):
+     * Sort offers Due date/Assignee/Creation date, Filter offers Assignee/
+     * Record/Created by, and neither is the other's full set. Defaults to
+     * `columns`.
+     */
+    sortColumns?: TableToolbarColumn[];
+    /** The fields Filter offers, when they differ from Sort's. Defaults to
+     *  `columns`. */
+    filterColumns?: TableToolbarColumn[];
     /** Controlled sorts. Omit to let the toolbar manage them internally. */
     sorts?: ToolbarSort[];
     defaultSorts?: ToolbarSort[];
@@ -75,12 +92,22 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
     ascendingLabel?: string;
     /** Label on the "descending" sort-direction option (default "Descending"). */
     descendingLabel?: string;
-    /** Text on the sort trigger. Receives the active sorts and the columns, so
-     * the sorted-by phrase can be built in the caller's own word order —
+    /** Text on the sort trigger. Receives the active sorts and the *sort*
+     * fields (`sortColumns`, or `columns` when that's not set), so the
+     * sorted-by phrase can be built in the caller's own word order —
      * "Sorted by Name +2" does not survive a template with holes. */
     sortTriggerLabel?: (sorts: ToolbarSort[], columns: TableToolbarColumn[]) => React.ReactNode;
     /** Text on the filter trigger. Receives the number of active filters. */
     filterTriggerLabel?: (activeFilters: number) => React.ReactNode;
+    /**
+     * Set when nesting `TableToolbar` inside a consumer's own toolbar row
+     * (`DataTable`'s `toolbar` slot, e.g.) alongside other same-height
+     * controls. Drops the row's own bottom padding, which exists for when
+     * `TableToolbar` sits directly above a table with nothing else in its
+     * row — that gap isn't the row's to add when something else in the same
+     * row already centres on the same 28px line (#398).
+     */
+    inline?: boolean;
     className?: string;
 };
 /**
@@ -101,6 +128,36 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * `RecordsTable` renders this same measured chrome internally; this is the
  * composable version, to put above `DataTable` or any table of your own. Pair
  * it with `applyFilters` / `applySorts` to turn its state into rows.
+ *
+ * Sort and Filter read the same `columns` list by default, but can be given
+ * their own (`sortColumns`/`filterColumns`) when a consumer's two menus
+ * genuinely offer different fields — Attio's own Tasks page does exactly
+ * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
+ * Created by), which one shared list can't reproduce.
+ */
+export declare function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel, reorderSortLabel, noSortsLabel, addSortLabel, learnSortingLabel, selectConditionLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, inline, ...rest }: TableToolbarProps): React.JSX.Element;
+export type ToolbarToolProps = React.ComponentPropsWithoutRef<"button"> & {
+    /** Drawn the way Sort/Filter are once a condition is set (#399). */
+    active?: boolean;
+    /** The quieter, no-ring variant Sort/Filter never use themselves, for a
+     * chip whose "on" state should read as less committed than a real filter. */
+    ghost?: boolean;
+};
+/**
+ * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone
+ * (#399) — for a control drawn like Sort/Filter that isn't Sort or Filter (a
+ * screen's own quick filter, e.g.). `.crisp-tabletoolbar-tool` alone renders
+ * unstyled: the rule lives nested under `TableToolbar`'s own root class, the
+ * same way every other rule in its shared chrome does, so it only paints on
+ * a descendant of an actual `TableToolbar`. This wraps one in, `display:
+ * contents` so it contributes no box of its own — the same technique
+ * `TableToolbar`'s own root already uses to disappear from layout.
  */
-export declare function TableToolbar({ columns, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel, reorderSortLabel, noSortsLabel, addSortLabel, learnSortingLabel, selectConditionLabel, sortFieldLabel, sortDirectionLabel, removeSortLabel, filterFieldLabel, filterFieldPlaceholder, filterValuePlaceholder, ascendingLabel, descendingLabel, sortTriggerLabel, filterTriggerLabel, ...rest }: TableToolbarProps): React.JSX.Element;
+export declare const ToolbarTool: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    /** Drawn the way Sort/Filter are once a condition is set (#399). */
+    active?: boolean;
+    /** The quieter, no-ring variant Sort/Filter never use themselves, for a
+     * chip whose "on" state should read as less committed than a real filter. */
+    ghost?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/core/cell-date.d.ts

@@ -15,3 +15,20 @@
 export declare function parseCellDate(raw: string | undefined): Date | null;
 /** The inverse: the picked date's own calendar day, not the UTC one. */
 export declare function formatCellDate(d: Date): string;
+/**
+ * How much of a date-only value a raw cell string actually carried.
+ *
+ * `parseCellDate` fills a missing month/day with January/the 1st so a
+ * year-only or year-month value can become a `Date` — right for parsing,
+ * which must produce an instant, but wrong for display: a *display*
+ * formatter that always prints `month day, year` renders a value that named
+ * one field as though it named three (#312 — `"1998"` rendered "Jan 1,
+ * 1998"). A caller that formats for display reads this first and only
+ * requests the precision the raw string actually had.
+ *
+ * A value the `DATE_ONLY` forms don't match (it carries a time, or isn't a
+ * recognised date at all) names a specific instant rather than a calendar
+ * field, so it's always `"day"` — full precision, same as today.
+ */
+export type CellDatePrecision = "year" | "month" | "day";
+export declare function cellDatePrecision(raw: string): CellDatePrecision;

package/dist/types/core/index.d.ts

@@ -1,4 +1,4 @@
-export { formatCellDate, parseCellDate } from "./cell-date";
+export { type CellDatePrecision, cellDatePrecision, formatCellDate, parseCellDate, } from "./cell-date";
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";

package/dist/types/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/card";
 export * from "./components/checkbox";
 export * from "./components/chip";
 export * from "./components/columncalc";
+export * from "./components/composewindow";
 export * from "./components/contextmenu";
 export * from "./components/datatable";
 export * from "./components/datepicker";

package/dist/types/product/recordpage/recordpage.d.ts

@@ -1,8 +1,42 @@
 import * as React from "react";
 import { type Column, type Row } from "../recordstable";
+export type RecordPageNote = {
+    id: string;
+    text: string;
+    time: string;
+};
+export type RecordPageTask = {
+    id: string;
+    text: string;
+    done: boolean;
+};
+/**
+ * A consumer-supplied tab, replacing one of the built-in CRM tabs
+ * (Overview/Activity/Emails/Calls/Team/Notes/Tasks/Files/Deals). `render`
+ * is called only while its tab is active, the same lazy-body contract the
+ * built-in tabs already follow.
+ */
+export type RecordPageTab = {
+    id: string;
+    label: string;
+    /** Optional count/badge shown after the label (e.g. "Notes · 3"). */
+    count?: number;
+    render: () => React.ReactNode;
+};
 export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     record: Row;
     columns: Column[];
+    /**
+     * Commit handler for a `column.editable` Details field (#431) — same
+     * shape `DataTable`'s own `onEdit` uses (#385/#430): returning (or
+     * resolving) nothing commits synchronously; returning a `Promise` that
+     * rejects shows a pending state on the field while it's in flight, then
+     * reverts to the last-known-good value (this component never mutates
+     * `record` itself) and renders the rejection's message beside the field.
+     * A field with `editable` but no `onEdit` never opens — there's nothing
+     * to commit to.
+     */
+    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
     /** Breadcrumb label + back button target (e.g. "Companies"). */
     collection?: string;
     /** Partial override of the chrome strings; see `recordPageLabels`. */
@@ -12,6 +46,30 @@ export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
     onToggleFull?: () => void;
     full?: boolean;
     className?: string;
+    /**
+     * Replaces the built-in CRM tab set. An app with a non-CRM domain (a
+     * custom register's own sections, a Related/backlinks tab) supplies its
+     * own list instead of rebuilding RecordPage's chrome by hand. Omit to
+     * keep the default Overview/Activity/Emails/Calls/Team/Notes/Tasks/
+     * Files/Deals set.
+     */
+    tabs?: RecordPageTab[];
+    /** Active tab id on first render, when `tabs` is supplied. Defaults to the first tab. Ignored for the built-in tab set (Overview is always first there). */
+    defaultTab?: string;
+    /**
+     * Controlled Notes: when supplied (even as `[]`), RecordPage renders
+     * this list instead of managing its own, and the composer calls
+     * `onAddNote` instead of appending to internal state — the same
+     * "caller owns the data, crisp owns the chrome" shape `Board`'s
+     * `cards`/`onCardsChange` uses. Omit both to keep the self-contained
+     * Notes section (crisp owns the data too, as today).
+     */
+    notes?: RecordPageNote[];
+    onAddNote?: (text: string) => void;
+    /** Controlled Tasks — same shape as `notes`/`onAddNote`. */
+    tasks?: RecordPageTask[];
+    onAddTask?: (text: string) => void;
+    onToggleTask?: (id: string) => void;
 };
 /**
  * Every chrome string RecordPage renders. Supplied as a PARTIAL map, so
@@ -97,7 +155,7 @@ export type RecordPageLabelsInput = Partial<Omit<RecordPageLabels, "tabs" | "hig
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, ...rest }: RecordPageProps): React.JSX.Element;
+export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, ...rest }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

package/dist/types/product/recordpanel/recordpanel.d.ts

@@ -21,6 +21,16 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
     record: Row | null;
     columns: Column[];
     onClose: () => void;
+    /**
+     * Commit handler for a `column.editable` field (#431) — same shape
+     * `DataTable`'s own `onEdit` uses (#385/#430): returning (or resolving)
+     * nothing commits synchronously; returning a `Promise` that rejects shows
+     * a pending state on the field while it's in flight, then reverts to the
+     * last-known-good value (this component never mutates `record` itself)
+     * and renders the rejection's message beside the field. A field with
+     * `editable` but no `onEdit` never opens — there's nothing to commit to.
+     */
+    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
     className?: string;
 };
 /**
@@ -29,7 +39,7 @@ export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "chil
  * relative` container (e.g. the app main area); it slides in from the right and
  * overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, closeLabel, title, detailsLabel, emptyLabel, footer, ...rest }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, columns, onClose, className, closeLabel, title, detailsLabel, emptyLabel, footer, onEdit, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }

package/dist/types/product/recordstable/editable-field.d.ts

@@ -0,0 +1,45 @@
+/** A `select`-editor field's choices — same shape DataTable's own
+ * `DataEditableOption` uses (#385/#430), kept as its own type (not
+ * `Column.options`/`StatusOption`, whose `color` is required for the
+ * `status` picker) so this stays purely additive. */
+export type EditableOption = {
+    value: string;
+    label: string;
+    color?: string;
+};
+/**
+ * The async-commit state machine behind `RecordPanel`/`RecordPage`'s
+ * editable fields (#431) — the same shape `DataTable`'s own `commitEdit`
+ * uses (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * immediately; a Promise-returning `onEdit` keeps the field open and pending
+ * while it settles, then either closes it (resolve) or closes it AND
+ * reverts while showing the rejection's message (reject). The revert needs
+ * no extra code here either: neither `RecordPanel` nor `RecordPage` mutates
+ * `record` itself, so once `editingKey` clears, the field simply renders
+ * `record[key]` again — whatever it still says.
+ *
+ * One hook shared by both consumers rather than two copies of the same
+ * three `useState`s and the same `.then` branching.
+ */
+export declare function useEditableField(onEdit?: (id: string, key: string, value: string) => Promise<void> | void): {
+    editingKey: string | null;
+    pendingKey: string | null;
+    error: {
+        key: string;
+        message: string;
+    } | null;
+    openEditing: (key: string) => void;
+    closeEditing: () => void;
+    commit: (id: string, key: string, value: string) => void;
+};
+/**
+ * Which plain editor a column gets when it's `editable` without an
+ * `editor: "select" | "switch"` — identical to `DataTable`'s own
+ * `editorFor` (#385): number/currency get a numeric field, date a native
+ * date field, everything else (text, entity, tags, url, status, reference)
+ * a plain text field. Kept as one function so the two never drift apart.
+ */
+export declare function editableInputType(colType: string | undefined): {
+    type: string;
+    inputMode?: "decimal" | "text";
+};

package/dist/types/product/recordstable/index.d.ts

@@ -1,2 +1,3 @@
+export { type EditableOption, editableInputType, useEditableField, } from "./editable-field";
 export { type Column, type ColumnType, defaultColumns, defaultRows, type EntityValue, RecordsTable, type RecordsTableProps, type Row, tagTone, } from "./recordstable";
 export { recordstableRecipe } from "./recordstable.recipe";

package/dist/types/product/recordstable/recordstable.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { EditableOption } from "./editable-field";
 type IconType = React.ComponentType<{
     size?: number;
     strokeWidth?: number;
@@ -29,6 +30,14 @@ export type Column = {
     options?: StatusOption[];
     /** Choices for a `reference` column (a searchable record picker). */
     refOptions?: ReferenceOption[];
+    /** Adds a trailing "Create {createLabel}" row to the picker (Attio's own
+     * always has one) — rendered only when this is provided. Picking it hands
+     * back the picker's current search text, e.g. to open a create flow
+     * pre-seeded with it. */
+    onCreateReference?: (query: string) => void;
+    /** The object noun in "Create {createLabel}" (Attio: "Create Person").
+     * Only used with `onCreateReference`; defaults to "record". */
+    createLabel?: string;
     /**
      * Full custom cell content — an escape hatch for a display crisp can't
      * express via `type` (sign-coloured currency, a maskable amount, a custom
@@ -65,6 +74,26 @@ export type Column = {
      * currency string still sums and sorts numerically.
      */
     format?: (value: unknown, row: Row) => string;
+    /**
+     * Opts this column into `RecordPanel`/`RecordPage`'s editable-field API
+     * (#431) — click-to-edit there (not this table's own type-driven
+     * mechanism, which those two components don't use). Ignored by
+     * `RecordsTable` itself. A plain `editable` column, with no `editor`,
+     * opens a text/number/date field (inferred from `type`, same inference
+     * `DataTable`'s own `editable` columns use — #385); `editor` below picks
+     * a `select`/`switch` picker instead. Both consumers require `onEdit` to
+     * actually be given for a field to open at all.
+     */
+    editable?: boolean;
+    /** `select`/`switch` render as the field's own live, always-interactive
+     * content instead of opening on click — see `DataTableColumn.editor`
+     * (#385) for the identical convention and reasoning. `select` reads
+     * `editOptions`. */
+    editor?: "select" | "switch";
+    /** Options for `editor: "select"` — same shape `DataTable`'s own
+     * `DataEditableOption` uses. Not `options` (`StatusOption` requires
+     * `color`, for this type's own `status` picker) so this stays additive. */
+    editOptions?: EditableOption[];
 };
 export type EntityValue = {
     name: string;