@crisp-ui-kit/crisp 0.50.0 → 0.51.0

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,8 +92,9 @@ 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. */
@@ -110,8 +128,14 @@ 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, 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 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;

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;

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

@@ -11,6 +11,14 @@ export type SidebarNavItem = {
     icon: React.ComponentType<IconProps>;
     active?: boolean;
     trailing?: React.ReactNode;
+    /** Either this or `onSelect` — a plain link, or a handler for anything
+     * that isn't real navigation. Both may be set; neither is required to
+     * make the row *something* clickable (it still renders as a link,
+     * defaulting `href` to "#"). Same shape as a `groups` row's
+     * `SidebarNavGroupItem` (#384) — `items` is the only place that used to
+     * be missing this wiring. */
+    href?: string;
+    onSelect?: () => void;
 };
 /** A row in the Records section — rendered as a tinted 20px glyph avatar. */
 export type SidebarRecordItem = {
@@ -96,6 +104,20 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
     onToggleCollapse?: () => void;
     /** Workspace switcher content. Defaults to the measured workspace. */
     workspace?: SidebarWorkspace;
+    /**
+     * Menu content for the workspace switcher — `MenuItem`/`MenuSeparator`/
+     * `MenuLabel` children, the same as a consumer would give `Menu` directly.
+     * Omit to leave the switcher a plain (still real, focusable) button with
+     * no popup, as before. When given, the switcher becomes a real menu
+     * trigger (`aria-haspopup="menu"`, `aria-expanded`, keyboard-openable —
+     * rents `Menu`'s own machine, no new one) that opens it — router-agnostic
+     * and consistent with the nav API (#384): a `MenuItem`'s own `onSelect` is
+     * how a consumer reaches its own navigation, the same as a nav row's
+     * (#415: Attio's switcher opens "Account settings" / "Workspace settings",
+     * among others — crisp ships no fixed items of its own, since which
+     * settings exist is entirely the consumer's).
+     */
+    workspaceMenu?: React.ReactNode;
     /** Main nav rows (Home, Tasks, …). Defaults to the measured nav. */
     items?: SidebarNavItem[];
     /** The Records section (label + glyph-avatar rows). */
@@ -114,8 +136,18 @@ export type SidebarProps = React.ComponentPropsWithoutRef<"nav"> & {
      * renders exactly as before this prop existed.
      */
     groups?: SidebarNavGroup[];
-    /** Footer copy (onboarding pill, invite row, trial banner). */
-    footer?: SidebarFooter;
+    /**
+     * The footer slot. Defaults to Attio's own onboarding pill + invite row +
+     * trial banner (`ATTIO_SIDEBAR_FOOTER`). Pass a `SidebarFooter` object to
+     * override just the strings in that fixed shape (as before), any other
+     * `ReactNode` — an account/user menu, say — to replace the slot's content
+     * entirely (still pinned to the bottom of the nav), or `false` to render
+     * no footer at all so a consumer can compose their own element directly
+     * below `<Sidebar>` instead (#408: GRC has no onboarding checklist, no
+     * invite flow and no trial banner, so none of the fixed copy had anything
+     * real to say, and there was no way to put a real account menu here).
+     */
+    footer?: SidebarFooter | React.ReactNode;
     /**
      * Command-palette items, forwarded to the internal `Command`'s own
      * `items` prop. Omit for Command's built-in Attio set (#364: GRC's
@@ -162,6 +194,20 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
     onToggleCollapse?: () => void;
     /** Workspace switcher content. Defaults to the measured workspace. */
     workspace?: SidebarWorkspace;
+    /**
+     * Menu content for the workspace switcher — `MenuItem`/`MenuSeparator`/
+     * `MenuLabel` children, the same as a consumer would give `Menu` directly.
+     * Omit to leave the switcher a plain (still real, focusable) button with
+     * no popup, as before. When given, the switcher becomes a real menu
+     * trigger (`aria-haspopup="menu"`, `aria-expanded`, keyboard-openable —
+     * rents `Menu`'s own machine, no new one) that opens it — router-agnostic
+     * and consistent with the nav API (#384): a `MenuItem`'s own `onSelect` is
+     * how a consumer reaches its own navigation, the same as a nav row's
+     * (#415: Attio's switcher opens "Account settings" / "Workspace settings",
+     * among others — crisp ships no fixed items of its own, since which
+     * settings exist is entirely the consumer's).
+     */
+    workspaceMenu?: React.ReactNode;
     /** Main nav rows (Home, Tasks, …). Defaults to the measured nav. */
     items?: SidebarNavItem[];
     /** The Records section (label + glyph-avatar rows). */
@@ -180,8 +226,18 @@ export declare const Sidebar: React.ForwardRefExoticComponent<Omit<React.Detaile
      * renders exactly as before this prop existed.
      */
     groups?: SidebarNavGroup[];
-    /** Footer copy (onboarding pill, invite row, trial banner). */
-    footer?: SidebarFooter;
+    /**
+     * The footer slot. Defaults to Attio's own onboarding pill + invite row +
+     * trial banner (`ATTIO_SIDEBAR_FOOTER`). Pass a `SidebarFooter` object to
+     * override just the strings in that fixed shape (as before), any other
+     * `ReactNode` — an account/user menu, say — to replace the slot's content
+     * entirely (still pinned to the bottom of the nav), or `false` to render
+     * no footer at all so a consumer can compose their own element directly
+     * below `<Sidebar>` instead (#408: GRC has no onboarding checklist, no
+     * invite flow and no trial banner, so none of the fixed copy had anything
+     * real to say, and there was no way to put a real account menu here).
+     */
+    footer?: SidebarFooter | React.ReactNode;
     /**
      * Command-palette items, forwarded to the internal `Command`'s own
      * `items` prop. Omit for Command's built-in Attio set (#364: GRC's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -98,6 +98,11 @@
       "import": "./dist/esm/components/columncalc/index.js",
       "require": "./dist/cjs/components/columncalc/index.js"
     },
+    "./composewindow": {
+      "types": "./dist/types/components/composewindow/index.d.ts",
+      "import": "./dist/esm/components/composewindow/index.js",
+      "require": "./dist/cjs/components/composewindow/index.js"
+    },
     "./contextmenu": {
       "types": "./dist/types/components/contextmenu/index.d.ts",
       "import": "./dist/esm/components/contextmenu/index.js",