@crisp-ui-kit/crisp 0.50.0 → 0.52.0

package/dist/tabletoolbar.layered.css

@@ -8,7 +8,7 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
+    & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-tabletoolbar-tool--active { background: var(--crisp-bg-raised); }

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,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/caret-rect.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The pixel position of a caret index inside a `<textarea>`/`<input>`, in
+ * viewport coordinates — where a mention picker anchors.
+ *
+ * Neither element exposes caret geometry directly, so this uses the standard
+ * mirror-div technique: an off-screen div replicating every computed style
+ * that affects text layout (font, padding, border, wrapping), holding the
+ * same text up to the caret plus a marker span. The marker's own
+ * `getBoundingClientRect()`, translated back onto the real field's box, is
+ * the caret's actual rendered position — nothing here guesses at line
+ * height or character width itself.
+ */
+export declare function caretRectInField(field: HTMLTextAreaElement | HTMLInputElement, index: number): {
+    x: number;
+    y: number;
+};

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,5 @@
-export { formatCellDate, parseCellDate } from "./cell-date";
+export { caretRectInField } from "./caret-rect";
+export { type CellDatePrecision, cellDatePrecision, formatCellDate, parseCellDate, } from "./cell-date";
 export { cx } from "./cx";
 export { defineRecipe } from "./define";
 export { withDescribedBy } from "./dialog-description";
@@ -6,6 +7,7 @@ export { isRtlElement } from "./direction";
 export { FloatingPortal } from "./floating-portal";
 export { hasOpenFloatingLayer, isInsideLaterFloatingLayer, registerFloatingLayer, } from "./floating-stack";
 export { formValueStyle } from "./form-value";
+export { type MentionAnchor, type MentionMatch, matchMentionTrigger, } from "./mention";
 export { type FloatingAlign, type PlaceFloatingOptions, placeFloating, } from "./place-floating";
 export { Primitive } from "./primitive";
 export { resolveRecipe } from "./resolve";
@@ -15,4 +17,5 @@ export type * from "./types";
 export { useFocusAfterRemoval } from "./use-focus-after-removal";
 export { useFormReset } from "./use-form-reset";
 export { useLabelAssociation } from "./use-label-association";
+export { type MentionTrigger, type MentionTriggerState, type UseMentionTriggerOptions, useMentionTrigger, } from "./use-mention-trigger";
 export { usePrefersReducedMotion } from "./use-prefers-reduced-motion";

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

@@ -0,0 +1,27 @@
+export type MentionMatch = {
+    /** Text typed after the trigger character — what a picker filters by. */
+    query: string;
+    /** Index, in the text passed in, where the trigger character itself sits. */
+    start: number;
+};
+/**
+ * Is there an active "@query" mention trigger ending at the caret?
+ *
+ * Matches the rule every "@mention" implementation (GitHub, Slack, Linear)
+ * actually uses: the trigger character must start a word — the very first
+ * character, or preceded by whitespace — and nothing between it and the
+ * caret may contain whitespace. `foo@bar` is an email/handle stuck to a word,
+ * not a trigger; `@jo next` has already moved past the mention it typed.
+ *
+ * Takes plain text rather than a live DOM node so it is one pure function
+ * usable against a `<textarea>`'s `value` and a `contentEditable` text
+ * node's content alike, and is the one thing here worth unit-testing on its
+ * own — everything downstream of it (caret geometry, DOM insertion) needs a
+ * real browser to verify.
+ */
+export declare function matchMentionTrigger(textBeforeCaret: string, trigger?: string): MentionMatch | null;
+/** A caret's position in viewport coordinates — where a picker anchors. */
+export type MentionAnchor = {
+    x: number;
+    y: number;
+};

package/dist/types/core/use-mention-trigger.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { type MentionAnchor } from "./mention";
+export type MentionTriggerState = {
+    open: boolean;
+    query: string;
+    /** Where to anchor a picker — null while closed. */
+    anchor: MentionAnchor | null;
+};
+export type UseMentionTriggerOptions = {
+    /** Character that opens the picker. Default `"@"`. */
+    trigger?: string;
+};
+export type MentionTrigger = MentionTriggerState & {
+    /** Dismiss the picker without inserting anything — e.g. on Escape. */
+    close: () => void;
+    /** Replace the "@query" text (the trigger included) with `text`, restore
+     * focus and the caret right after it, and dismiss. */
+    insert: (text: string) => void;
+};
+/**
+ * Watches a `<textarea>`/`<input>` for an "@query" mention trigger and
+ * reports where to anchor a consumer-supplied picker (#372).
+ *
+ * crisp draws no picker of its own here — GitHub/Slack/Linear-style @mention
+ * UI varies too much by app (avatars, groups, recent-first ordering, a
+ * "create new person" row) to have one measured shape, and this repo's rule
+ * is measure-first, never invented polish. What is shared and worth owning
+ * centrally is the fiddly, easy-to-get-wrong part: deciding when "@" is
+ * actually a trigger rather than part of a word or an email address (see
+ * `matchMentionTrigger`), and where its picker anchors on screen (see
+ * `caretRectInField`, since neither element exposes caret geometry itself).
+ *
+ * Does not close on blur: a picker built from this needs to survive the
+ * field losing focus to a `mousedown` on one of its own rows, the same
+ * problem every floating surface in this repo solves for itself (see
+ * `RichTextEditor`'s toolbar `keepSel`, or `Popover`'s own outside-pointer-
+ * down listener) — so closing on outside interaction is left to the
+ * consumer's picker, which already knows what counts as "outside" for its
+ * own markup.
+ */
+export declare function useMentionTrigger(ref: React.RefObject<HTMLTextAreaElement | HTMLInputElement | null>, { trigger }?: UseMentionTriggerOptions): MentionTrigger;

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/index.d.ts

@@ -1,2 +1,2 @@
-export { RecordPanel, type RecordPanelProps } from "./recordpanel";
+export { RecordPanel, type RecordPanelHighlight, type RecordPanelProps, } from "./recordpanel";
 export { recordpanelRecipe } from "./recordpanel.recipe";