@crisp-ui-kit/crisp 0.54.4 → 0.54.6

package/dist/styles.layered.css

@@ -448,7 +448,7 @@
 }
 
 .crisp-chip {
-  display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
+  display: inline-flex; align-items: center; gap: 3px; height: var(--crisp-size-chip); min-width: 0; max-width: 100%; padding-inline: var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap;
 }
 .crisp-chip--truncate_true {
   & .crisp-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
@@ -680,10 +680,14 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
-       draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+    /* url/email cell types (#654) -- same measured values as RecordsTable's own .crisp-recordstable-link, which this mirrors: no underline at rest, underline on hover, own-colour text rather than a browser-blue link. */
+    & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
+    & .crisp-datatable-link:hover { text-decoration: underline; }
+    /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5 draggable + dataTransfer, the same one column reorder already uses (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -1893,6 +1897,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1967,14 +1978,18 @@
 
 .crisp-authshell {
   min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-single-pane] { justify-content: center; }
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); height: 24px; display: flex; align-items: center; }
     & .crisp-authshell-card { margin-top: var(--crisp-space-6); display: flex; height: 692px; border-radius: 20px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }
     & .crisp-authshell-pane { flex: 0 0 564px; padding: 72px; display: flex; flex-direction: column; box-sizing: border-box; }
+    &[data-single-pane] .crisp-authshell-pane { flex: 0 0 auto; padding: 0; }
     & .crisp-authshell-preview { flex: 0 0 564px; padding: 96px 64px; background: var(--crisp-bg-subtle); border-inline-start: 1px solid color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); position: relative; overflow: hidden; box-sizing: border-box; }
     & .crisp-authshell-preview::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(color-mix(in srgb, var(--crisp-bg-subtle) 0%, transparent) 0%, var(--crisp-bg-subtle) 100%); pointer-events: none; }
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--crisp-space-8); align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.4px; color: var(--crisp-fg-primary); align-self: stretch; }
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
@@ -2091,6 +2106,27 @@
   }
 }
 
+
+    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact
+       chrome wasn't independently pixel-measured this pass (screenshot
+       capture broke mid-session), so this reuses Menu's already-measured
+       floating-popover shell rather than a new value. */
+    .crisp-comments-reactionpicker { font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: border-box; width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
+    .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
+    .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
+    .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
+
+    /* Row badge (CommentCountBadge) -- lives in its own class family so the
+       grid lanes can drop it into a cell without pulling in the panel's
+       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
+       icon + 12px count text, both at 55% ink, replacing the dot. */
+    .crisp-comments-badge { box-sizing: border-box; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
+    .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
+  
 .crisp-comments {
   display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%; background: var(--crisp-bg-surface); border-inline-start: 1px solid var(--crisp-border-subtle); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
@@ -2146,21 +2182,6 @@
     /* An inserted "@mention" chip in the composer -- same shape as
        RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
-
-    /* Reaction picker -- see `ReactionPicker`'s own doc comment: the exact chrome wasn't independently pixel-measured this pass (screenshot
-       capture broke mid-session), so this reuses Menu's already-measured floating-popover shell rather than a new value. */
-    & .crisp-comments-reactionpicker { width: 240px; padding: var(--crisp-space-2); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
-    & .crisp-comments-reactionpicker-search { box-sizing: border-box; width: 100%; height: 28px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-raised); font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); }
-    & .crisp-comments-reactionpicker-search::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
-    & .crisp-comments-reactionpicker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--crisp-space-0-5); max-height: 160px; overflow-y: auto; }
-    & .crisp-comments-reactionpicker-item { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
-    & .crisp-comments-reactionpicker-item:hover { background: var(--crisp-bg-raised); }
-    /* Row badge (CommentCountBadge) -- lives in its own class family so the grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    & .crisp-comments-badge { display: inline-flex; align-items: center; gap: var(--crisp-space-1); border: none; background: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); }
-    & .crisp-comments-badge-dot { width: 6px; height: 6px; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 38%, transparent); }
-    & .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 

package/dist/tooltip.css

@@ -1,6 +1,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/tooltip.d.ts

@@ -1,7 +1,7 @@
 import type { RecipeFn } from "../core/types";
 
 export interface TooltipVariants {
-
+  variant?: "plain" | "reference";
 }
 
-export declare const tooltipRecipe: RecipeFn<{  }>;
+export declare const tooltipRecipe: RecipeFn<{ variant: { plain: string; reference: string } }>;

package/dist/tooltip.layered.css

@@ -2,6 +2,13 @@
 .crisp-tooltip {
   position: fixed; z-index: 70; box-sizing: border-box; pointer-events: none; max-width: 260px; padding: var(--crisp-space-1-5) var(--crisp-space-2); border-radius: var(--crisp-radius-md); background: #101112; color: #eeeff1; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 1.45; box-shadow: 0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04); opacity: 1; transition: opacity 0.12s ease;
     @starting-style { opacity: 0; }
+    & .crisp-tooltip-reference-row { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
+}
+.crisp-tooltip--variant_plain {
+  
+}
+.crisp-tooltip--variant_reference {
+  box-shadow: rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0;
 }
 
 @media (prefers-reduced-motion: reduce) {

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

@@ -6,6 +6,7 @@ declare const spec: {
         readonly gap: "3px";
         readonly height: `var(--${string})`;
         readonly minWidth: 0;
+        readonly maxWidth: "100%";
         readonly paddingInline: `var(--${string})`;
         readonly borderRadius: `var(--${string})`;
         readonly fontSize: `var(--${string})`;

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

@@ -22,7 +22,20 @@ export type DataEditableOption = {
      * `editor: "select"`. */
     avatar?: string;
 };
-export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency";
+export type DataCellType = "text" | "entity" | "tags" | "status" | "date" | "datetime" | "number" | "currency"
+/** Opens `https://{value}` in a new tab -- matches RecordsTable's own
+ * `url` type exactly (crisp/#654): `color: fgPrimary`, no underline at
+ * rest, underline on hover. A click stops propagation, same as an
+ * `entity` column's `onEntityClick` link, so it doesn't also fire the
+ * row's own `onRowClick`. */
+ | "url"
+/** Opens `mailto:{value}`, same link styling as `url`. Attio confirms
+ * this is a distinct column type ("Primary email address", checklist
+ * G-042), but its editor was never opened live in the measured
+ * workspace -- this type is display-only for now; editing still falls
+ * through to the plain-text editor every other non-number/date type
+ * gets, not a dedicated one (see #597 for when that's measured). */
+ | "email";
 export type DataTableColumn<T> = {
     key: string;
     /** Truncates with an ellipsis when it's wider than the column (#534: a
@@ -35,6 +48,17 @@ export type DataTableColumn<T> = {
     type?: DataCellType;
     /** A leading field-type icon in the header (matches RecordsTable). */
     icon?: IconType;
+    /** This column's values reference another type of record (e.g. a
+     * "Primary location" column of Country records). When the header
+     * overflows, its `Tooltip` appends this type's icon and name after the
+     * label and switches to Attio's second, reference-column tooltip chrome
+     * (crisp#580) — distinct from `icon` above, which is the column's own
+     * field-type glyph shown in the header row itself, not inside the
+     * tooltip. Omit for a plain column; the tooltip stays label-only (#534). */
+    referencedType?: {
+        icon: IconType;
+        label: string;
+    };
     /** Currency symbol for `currency` columns (default "$"). */
     symbol?: string;
     /** Allow drag-to-resize on this column (default true). */
@@ -51,17 +75,25 @@ export type DataTableColumn<T> = {
     editable?: boolean;
     /** The inline editor an `editable` column opens. Omitted: a plain field
      * inferred from `type` (number/date/datetime/text). `"select"`/
-     * `"reference"` render crisp's own `Select` the same way — at rest the
-     * cell shows the column's `render`/formatted value like every other
-     * editable type (#453), and double-click (or Enter on the selected
+     * `"reference"`/`"actor"` render crisp's own `Select` the same way — at
+     * rest the cell shows the column's `render`/formatted value like every
+     * other editable type (#453), and double-click (or Enter on the selected
      * cell) opens the picker; choosing a value commits and closes it,
-     * Escape cancels. `select` reads `options`; `reference` reads
-     * `refOptions` and is search-enabled, the same searchable-`Select`
+     * Escape cancels. `select` reads `options`; `reference`/`actor` both
+     * read `refOptions` and are search-enabled, the same searchable-`Select`
      * shape as `RecordsTable`'s own `ReferenceCell`. `"switch"` is the one
      * exception — ALWAYS its own live widget, no double-click gate, since
      * flipping the toggle IS the commit gesture and there's no meaningfully
-     * different "rest" display for a boolean. */
-    editor?: "select" | "switch" | "reference";
+     * different "rest" display for a boolean.
+     *
+     * `"actor"` (crisp/#654, checklist G-039) is `"reference"` with Attio's
+     * own measured person-picker copy as the default instead of a generic
+     * one: `refSearchPlaceholder` defaults to "Search people…" and the
+     * empty-search state reads "No users" rather than `Select`'s own
+     * generic "No results" — both still overridable the normal way.
+     * Otherwise identical to `reference`: same `refOptions` shape, same
+     * `onCreateReference`/`createLabel` "Create X" row. */
+    editor?: "select" | "switch" | "reference" | "actor";
     /** 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. */
@@ -72,10 +104,17 @@ export type DataTableColumn<T> = {
      * 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. */
+     * `Select`'s own generic "Search…" for `reference` — a generic primitive
+     * doesn't hardcode Attio's own copy ("Search records..."), which is
+     * workspace/object text, not a crisp-measured value. `editor: "actor"`
+     * defaults this to the measured "Search people…" instead (still
+     * overridable here). */
     refSearchPlaceholder?: string;
+    /** `editor: "reference"`/`"actor"`'s empty-search-results text. Defaults
+     * to `Select`'s own generic "No results" for `reference`; `"actor"`
+     * defaults this to the measured "No users" (checklist G-039 — a real
+     * empty-search state on an empty query, not an error). */
+    refEmptyLabel?: 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.

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

@@ -11,6 +11,14 @@ export type PersonChipProps = Omit<React.ComponentPropsWithoutRef<"span">, "chil
      *  Applied to the name only; the avatar keeps its full-strength tone so
      *  the chip still reads as a distinct person, not a disabled control. */
     muted?: boolean;
+    /** One more thing after the name that must never shrink or wrap out of
+     *  view (an icon, a small badge) — a consumer needing this used to wrap
+     *  `PersonChip` in its own flex row for it, which needed `min-width: 0`
+     *  of its own to keep shrinking correctly and, missing that, overflowed
+     *  its container the same way #668 did before that fix (#683). Rendered
+     *  inside the chip, after the name, so it shares `Chip`'s own flex/
+     *  shrink layout instead of wrapping it in a second, unconstrained one. */
+    trailing?: React.ReactNode;
     className?: string;
 };
 /**
@@ -29,9 +37,13 @@ export type PersonChipProps = Omit<React.ComponentPropsWithoutRef<"span">, "chil
  * Composes `Chip`'s `truncate` CSS directly rather than its string-only
  * auto-wrap (children here is an avatar plus a name, not a single string),
  * so the name gets its own `.crisp-chip-label` span while the avatar stays
- * fixed-size.
+ * fixed-size. `trailing` (#683) is the same idea for a consumer's own
+ * icon/badge after the name — inside the chip's own flex row rather than a
+ * second one a consumer would otherwise wrap this in, which needs its own
+ * `min-width: 0` to keep shrinking correctly and, missing that, overflows
+ * its container the same way #668 did before `Chip` itself was fixed.
  */
-export declare function PersonChip({ name, avatar, muted, className, ...props }: PersonChipProps): React.JSX.Element;
+export declare function PersonChip({ name, avatar, muted, trailing, className, ...props }: PersonChipProps): React.JSX.Element;
 export declare namespace PersonChip {
     var displayName: string;
 }

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

@@ -119,6 +119,37 @@ export type TableToolbarProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
      */
     inline?: boolean;
     className?: string;
+    /**
+     * The full set of attributes View settings offers — every attribute on
+     * the object, shown or not. Defaults to `columns`. Omit both, along with
+     * `shownKeys`, and the trigger still renders but the popover has nothing
+     * to list, the same "still renders, empty popover" contract `columns`
+     * already documents for Sort/Filter.
+     */
+    viewColumns?: TableToolbarColumn[];
+    /**
+     * Ordered keys of the attributes currently shown in the view — what
+     * the popover's draggable list reflects and reorders. Omit for internal
+     * state, seeded from `defaultShownKeys` or (failing that) every key in
+     * `viewColumns`/`columns`, in their given order — i.e. "everything shown"
+     * unless told otherwise.
+     */
+    shownKeys?: string[];
+    defaultShownKeys?: string[];
+    onShownKeysChange?: (keys: string[]) => void;
+    /** Text on the View settings trigger (default "View settings"). */
+    viewSettingsLabel?: string;
+    /** aria-label on a shown attribute's drag grip (default "Reorder attribute"). */
+    reorderAttributeLabel?: string;
+    /** aria-label on a shown attribute's hide control — receives the
+     *  attribute's label (default `Hide ${label} from view`). */
+    hideAttributeLabel?: (label: string) => string;
+    /** Label on the popover's footer action that opens the add-attribute
+     *  search screen (default "Add attribute to view"), and the heading of
+     *  that screen once open. */
+    addAttributeToViewLabel?: string;
+    /** Placeholder in the add-attribute search box (default "Search attributes…"). */
+    searchAttributesPlaceholder?: string;
 };
 /**
  * Applies a toolbar's filter conditions to any row array. Reads the raw value
@@ -145,7 +176,7 @@ export declare function applySorts<T>(rows: T[], sorts: ToolbarSort[], get?: (ro
  * 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: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, 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: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, ...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/components/tooltip/tooltip.d.ts

@@ -33,6 +33,14 @@ export type TooltipProps = Omit<React.ComponentPropsWithoutRef<"span">, "content
      * `ContextMenu`'s.
      */
     asChild?: boolean;
+    /**
+     * Which of Attio's two measured tooltip shadows to use (crisp#580) —
+     * background/colour/radius/padding/font are identical between them, only
+     * the `box-shadow` differs. `"reference"` is for a reference-column
+     * header's tooltip (icon + the referenced type's name); every other
+     * tooltip in crisp is `"plain"`, the default.
+     */
+    variant?: "plain" | "reference";
 };
 /**
  * A hover/focus tooltip — a dark hint chip measured live. Wraps its
@@ -85,4 +93,12 @@ export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Omit<React.De
      * `ContextMenu`'s.
      */
     asChild?: boolean;
+    /**
+     * Which of Attio's two measured tooltip shadows to use (crisp#580) —
+     * background/colour/radius/padding/font are identical between them, only
+     * the `box-shadow` differs. `"reference"` is for a reference-column
+     * header's tooltip (icon + the referenced type's name); every other
+     * tooltip in crisp is `"plain"`, the default.
+     */
+    variant?: "plain" | "reference";
 } & React.RefAttributes<HTMLElement>>;

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

@@ -23,9 +23,37 @@ declare const spec: {
         readonly decls: {
             readonly opacity: 0;
         };
+    }, {
+        readonly selector: "& .crisp-tooltip-reference-row";
+        readonly decls: {
+            readonly display: "inline-flex";
+            readonly alignItems: "center";
+            readonly gap: `var(--${string})`;
+        };
     }];
+    readonly variants: {
+        readonly variant: {
+            readonly plain: {};
+            readonly reference: {
+                readonly boxShadow: "rgba(0,0,0,0) 0 0 0 1px inset, rgba(28,40,64,0.18) 0 0 2px 0, rgba(0,0,0,0.04) 0 1px 3px 0";
+            };
+        };
+    };
+    readonly defaultVariants: {
+        readonly variant: "plain";
+    };
 };
-declare const config: import("../..").RecipeConfig<Record<string, Record<string, string>>>;
-export declare const tooltipRecipe: import("../..").RecipeFn<Record<string, Record<string, string>>>;
+declare const config: import("../..").RecipeConfig<{
+    readonly variant: {
+        readonly plain: string;
+        readonly reference: string;
+    };
+}>;
+export declare const tooltipRecipe: import("../..").RecipeFn<{
+    readonly variant: {
+        readonly plain: string;
+        readonly reference: string;
+    };
+}>;
 export { spec };
 export default config;

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

@@ -8,7 +8,10 @@ export type AuthShellProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"
     title?: React.ReactNode;
     /** The form / body content. */
     children: React.ReactNode;
-    /** Right-hand product preview. Hidden under 1200px; omit for a single-pane card. */
+    /** Right-hand product preview. Hidden under 1200px; omit for a single-pane
+     *  layout — no card chrome (border/shadow/fixed height), a narrower
+     *  360px content column, and the whole shell vertically centred, matching
+     *  the real single-pane sign-in screen (crisp#653). */
     preview?: React.ReactNode;
     /** Legal / support links under the card. */
     footer?: React.ReactNode;

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

@@ -144,7 +144,6 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
     deleteConfirmBody?: string;
     deleteConfirmActionLabel?: string;
     cancelLabel?: string;
-    composerReplyToolLabel?: string;
     composerMentionToolLabel?: string;
     className?: string;
 };
@@ -157,7 +156,7 @@ export type CommentsPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "ch
  * separate row affordance (P-051) — deliberately NOT part of this
  * component, since it lives in a table cell this component doesn't own.
  */
-export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, mentionTrigger, renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerReplyToolLabel: composerReplyToolLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }: CommentsPanelProps): React.JSX.Element;
+export declare function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResolved, onShowResolvedChange, onlyMine, onOnlyMineChange, activeThreadId: activeThreadIdProp, onActiveThreadChange, onPost, onReact, onResolve, onDelete, onCopyLink, emojiOptions, mentionTrigger, renderMentionPicker, onClose, closeLabel: closeLabelProp, backLabel: backLabelProp, title: titleProp, threadTitle: threadTitleProp, breadcrumbPrefix: breadcrumbPrefixProp, composerPlaceholder: composerPlaceholderProp, replyPlaceholder: replyPlaceholderProp, postLabel: postLabelProp, replyPostLabel: replyPostLabelProp, emptyLabel, filterLabel: filterLabelProp, showResolvedLabel: showResolvedLabelProp, onlyMineLabel: onlyMineLabelProp, replyActionLabel: replyActionLabelProp, reactActionLabel: reactActionLabelProp, resolveActionLabel: resolveActionLabelProp, resolvedByYouLabel: resolvedByYouLabelProp, resolvedByLabel, moreActionsLabel: moreActionsLabelProp, copyLinkLabel: copyLinkLabelProp, deleteLabel: deleteLabelProp, addReactionLabel: addReactionLabelProp, reactionSearchLabel: reactionSearchLabelProp, deleteConfirmTitle: deleteConfirmTitleProp, deleteConfirmBody: deleteConfirmBodyProp, deleteConfirmActionLabel: deleteConfirmActionLabelProp, cancelLabel: cancelLabelProp, composerMentionToolLabel: composerMentionToolLabelProp, className, ...rest }: CommentsPanelProps): React.JSX.Element;
 export declare namespace CommentsPanel {
     var displayName: string;
 }

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

@@ -28,6 +28,18 @@ export type Column = {
      *  enriched values are washed (#9b69ff at 4%). */
     enriched?: boolean;
     icon?: IconType;
+    /** This column's values reference another type of record (e.g. a
+     * "Primary location" column of Country records). When the header
+     * overflows, its `Tooltip` appends this type's icon and name after the
+     * label and switches to Attio's second, reference-column tooltip chrome
+     * (crisp#580) — distinct from `icon` above (the column's own field-type
+     * glyph shown in the header row) and from `refOptions` (the picker's
+     * selectable values). Omit for a plain column; the tooltip stays
+     * label-only (#534). */
+    referencedType?: {
+        icon: IconType;
+        label: string;
+    };
     width?: number;
     /** Currency symbol for `currency` columns (default "$"). */
     symbol?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.54.4",
+  "version": "0.54.6",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",