@crisp-ui-kit/crisp 0.54.5 → 0.54.6

package/dist/esm/components/tooltip/tooltip.recipe.js

@@ -11,6 +11,16 @@ import { contract as c } from "../../tokens/index.js";
 // (#101112, the same "dark pill" ink NavItem's own text uses) and
 // line100's light hex (#eeeff1) — both theme-constant, same as before,
 // just the wrong pair.
+//
+// crisp#563: this `boxShadow` is Attio's PLAIN tooltip (a truncated header
+// label, measured on "Twitter follower count") — still an uncorroborated
+// single sample, flagged for its own re-measurement pass, not touched here.
+// Attio has a SECOND, visually similar but structurally different tooltip
+// for a reference-column header (icon + the referenced type's name after
+// the label, crisp#580) with its own measured shadow — an inset ring plus
+// two offset shadows, `variant: "reference"` below. Background, text
+// colour, radius, padding and font are identical between the two measured
+// samples; only the shadow differs.
 const spec = defineSpec({
     name: "tooltip",
     base: {
@@ -35,7 +45,34 @@ const spec = defineSpec({
         // An at-rule whose body is declarations rather than rules, so a part
         // expresses it directly: the entry state the overlay animates from.
         { selector: "@starting-style", decls: { opacity: 0 } },
+        // #580: the icon + referenced-type-name row a `variant="reference"`
+        // consumer (DataTable/RecordsTable's `ThLabel`) composes into `content`.
+        // Lives here, not in the caller's inline style, so it reads its gap from
+        // the token contract like every other measured value on this surface —
+        // `content` is portaled straight into this bubble regardless of which
+        // component built the JSX, so a nested selector reaches it the same way
+        // it reaches anything else rendered inside `.crisp-tooltip`.
+        {
+            selector: "& .crisp-tooltip-reference-row",
+            decls: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: c.space["1"],
+            },
+        },
     ],
+    variants: {
+        variant: {
+            // Inherits `base`'s boxShadow untouched -- crisp#563 updates that
+            // single value when it re-measures the plain tooltip, and this
+            // variant picks the correction up for free.
+            plain: {},
+            reference: {
+                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",
+            },
+        },
+    },
+    defaultVariants: { variant: "plain" },
 });
 const config = specToRecipe(spec);
 export const tooltipRecipe = resolveRecipe(config);

package/dist/esm/product/authshell/authshell.js

@@ -13,6 +13,6 @@ export function AuthShell({ progress, logo, title, children, preview, footer, cl
     const pct = hasProgress
         ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
         : 0;
-    return (_jsxs("div", { className: authshellRecipe({ className }), ...rest, children: [hasProgress && (_jsx("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "crisp-authshell-logo", children: logo }), _jsxs("div", { className: "crisp-authshell-card", children: [_jsx("div", { className: "crisp-authshell-pane", children: _jsxs("div", { className: "crisp-authshell-body", children: [title != null && (_jsx("div", { className: "crisp-authshell-title", children: title })), _jsx("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && (_jsx("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && _jsx("div", { className: "crisp-authshell-footer", children: footer })] }));
+    return (_jsxs("div", { className: authshellRecipe({ className }), "data-single-pane": preview == null ? "" : undefined, ...rest, children: [hasProgress && (_jsx("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "crisp-authshell-logo", children: logo }), _jsxs("div", { className: "crisp-authshell-card", children: [_jsx("div", { className: "crisp-authshell-pane", children: _jsxs("div", { className: "crisp-authshell-body", children: [title != null && (_jsx("div", { className: "crisp-authshell-title", children: title })), _jsx("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && (_jsx("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && _jsx("div", { className: "crisp-authshell-footer", children: footer })] }));
 }
 AuthShell.displayName = "AuthShell";

package/dist/esm/product/authshell/authshell.recipe.js

@@ -7,25 +7,43 @@ import { contract as c } from "../../tokens/index.js";
 // from the live app, EXCEPT the 1200px preview-hiding breakpoint (called out
 // at the container query below) — the pane drops out in JS somewhere between a
 // measured 954px and 1393px viewport width, so 1200px is chosen, not measured.
+//
+// crisp#653: that two-pane card's own 692px height, border and 420px pane
+// width were measured for a SPECIFIC screen with a real product-preview
+// pane -- omitting `preview` (`data-single-pane`, set by the component) used
+// to keep all three anyway, leaving a bordered box with a huge empty area
+// under short content. Attio's own single-pane screen (`app.attio.com/login`,
+// reachable in a fresh logged-out browser context -- no session needed) has
+// NO card at all: every ancestor of its "Sign in" heading measured
+// `border: 0px none`, `box-shadow: none`, `background: transparent`, a
+// 360-364px content column (not 420px), sized to its own content and
+// roughly centred in the viewport rather than pinned near the top.
+// `data-single-pane` now drops the card chrome and narrows the body to
+// match; the two-pane card is unchanged.
 const config = defineRecipe({
     name: "authshell",
     base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
     background: ${c.bgSurface}; font-family: ${c.font.sans}; font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgPrimary};
     -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: ${c.borderDefault}; }
     & .crisp-authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
     & .crisp-authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
 
     & .crisp-authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; 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: ${c.bgSubtle}; border-inline-start: 1px solid color-mix(in srgb, ${c.fgPrimary} 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, ${c.bgSubtle} 0%, transparent) 0%, ${c.bgSubtle} 100%); pointer-events: none; }
 
     & .crisp-authshell-body { width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: ${c.space["8"]}; align-items: center; }
+    &[data-single-pane] .crisp-authshell-body { width: 360px; }
 
     & .crisp-authshell-title { font-size: 20px; line-height: 24px; font-weight: ${c.weight.semibold}; letter-spacing: -0.4px; color: ${c.fgPrimary}; align-self: stretch; }
 

package/dist/esm/product/recordstable/recordstable.js

@@ -37,8 +37,15 @@ export function isLabelTruncated(el) {
  * viewport change, label change) via `ResizeObserver`; SSR-safe the same way
  * `MiddleTruncate` is -- the DOM is only touched inside an effect, so the
  * server (and the first client paint) renders the plain span.
+ *
+ * #580: a `referencedType` column (Attio's own `type: "reference"`) appends
+ * that type's icon + name after the label and switches to `Tooltip`'s
+ * `"reference"` chrome variant (Attio's second, structurally distinct
+ * tooltip — same background/colour/radius/padding/font as the plain one, a
+ * different `box-shadow`, crisp#563). Every other column stays label-only,
+ * the `"plain"` variant #534/#558 shipped.
  */
-function ThLabel({ label }) {
+function ThLabel({ label, referencedType, }) {
     const ref = React.useRef(null);
     const [overflowing, setOverflowing] = React.useState(false);
     // biome-ignore lint/correctness/useExhaustiveDependencies: `label` isn't read in the body, but a rename (col.label changing with the column's own width unchanged) needs a re-measure a ResizeObserver on `el` won't fire for -- same reasoning as Tabs' own re-measure effect.
@@ -67,7 +74,9 @@ function ThLabel({ label }) {
     // actually show. `open={false}` when it fits keeps the Tooltip mounted
     // (asChild costs no extra DOM either way) but pins it permanently closed,
     // so hovering a non-overflowing header still opens nothing.
-    return (_jsx(Tooltip, { content: label, asChild: true, open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
+    const ReferenceIcon = referencedType?.icon;
+    const content = referencedType ? (_jsxs("span", { className: "crisp-tooltip-reference-row", children: [label, ReferenceIcon && _jsx(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (label);
+    return (_jsx(Tooltip, { content: content, asChild: true, variant: referencedType ? "reference" : "plain", open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-recordstable-th-label", children: label }) }));
 }
 const EDITABLE = new Set(["text", "number", "url", "currency"]);
 // types whose cell is an always-interactive picker (not double-click-to-edit)
@@ -1173,7 +1182,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                                                                 setDragCol(col.key);
                                                                 e.dataTransfer.effectAllowed = "move";
                                                             }
-                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { label: col.label }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
+                                                            : undefined, onDragEnd: () => setDragCol(null), onClick: (e) => openColumnMenu(col.key, e.currentTarget), children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { label: col.label, referencedType: col.referencedType }), _jsx("span", { className: "crisp-recordstable-sort", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", "aria-hidden": "true", children: _jsx("path", { d: "m4 6 4 4 4-4" }) }) })] })), openMenu === `col:${col.key}` &&
                                                         rootRef.current &&
                                                         createPortal(_jsxs("div", { ref: menuRef, className: "crisp-recordstable-menu crisp-recordstable-menu--fixed crisp-recordstable-menu--hdr", role: "menu", "aria-label": `${col.label} column`, style: menuPos ?? undefined, onKeyDown: onMenuKeyDown, children: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "asc"), children: [_jsx(ArrowUp, { size: 15, strokeWidth: 1.75 }), t.sortAscending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => sortBy(col.key, "desc"), children: [_jsx(ArrowDown, { size: 15, strokeWidth: 1.75 }), t.sortDescending] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i <= 1, onClick: () => moveColumn(col.key, -1), children: [_jsx(ArrowLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveLeft] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, disabled: i === 0 || i >= cols.length - 1, onClick: () => moveColumn(col.key, 1), children: [_jsx(ArrowRight, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }), t.moveRight] }), _jsx("div", { className: "crisp-recordstable-menu-sep" }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => {
                                                                         setRenamingCol(col.key);

package/dist/esm/product/richtext/richtext.js

@@ -123,6 +123,17 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     // The Range covering a live "/query" (trigger included), mirroring the
     // mention primitive below — only set in "slash" mode.
     const slashRangeRef = React.useRef(null);
+    // #672: the selection the user actually had when they opened the toolbar's
+    // "Body ▾" menu — only set in "toolbar" mode. That menu's own search
+    // input steals DOM focus from the body the moment it opens, so by the
+    // time an item is picked, `window.getSelection()` no longer points at
+    // the block the user meant; without this, `run()`'s `body.focus()`
+    // resets the caret to the start of the document (the FIRST block)
+    // instead, and every conversion landed there regardless of what was
+    // selected. Cloned, since the live Range would otherwise track DOM
+    // mutations (and the selection moving to the search input) between now
+    // and when it's restored.
+    const toolbarSelectionRef = React.useRef(null);
     const blockSearchRef = React.useRef(null);
     const [mention, setMention] = React.useState(null);
     // The Range covering the live "@query" text (trigger included) — kept
@@ -228,6 +239,7 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     }, [readOnly]);
     const closeBlockMenu = React.useCallback(() => {
         slashRangeRef.current = null;
+        toolbarSelectionRef.current = null;
         setBlockMenu(null);
     }, []);
     /** Mirrors the mention-trigger detection below: only handles the caret
@@ -406,6 +418,14 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
             sel?.removeAllRanges();
             sel?.addRange(range);
         }
+        else if (blockMenu?.mode === "toolbar" && toolbarSelectionRef.current) {
+            // #672: no trigger text to delete here (nothing was typed to open
+            // this menu) -- just put the selection back where the user actually
+            // had it, before `applyBlockItem` -> `run()` refocuses the body.
+            const sel = window.getSelection();
+            sel?.removeAllRanges();
+            sel?.addRange(toolbarSelectionRef.current);
+        }
         applyBlockItem(item.id);
         closeBlockMenu();
     };
@@ -428,14 +448,21 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     const toggleBlockMenuFromToolbar = () => {
         if (!bar)
             return;
-        setBlockMenu((cur) => cur?.mode === "toolbar"
-            ? null
-            : {
+        setBlockMenu((cur) => {
+            if (cur?.mode === "toolbar")
+                return null;
+            // #672: capture the live selection NOW, before the menu's own search
+            // input (focused by the effect below) steals it away.
+            const sel = window.getSelection();
+            toolbarSelectionRef.current =
+                sel && sel.rangeCount > 0 ? sel.getRangeAt(0).cloneRange() : null;
+            return {
                 anchor: { x: bar.x, y: bar.y },
                 query: "",
                 highlighted: 0,
                 mode: "toolbar",
-            });
+            };
+        });
     };
     // biome-ignore lint/correctness/useExhaustiveDependencies: syncEmpty only reads/writes stable refs, same as run()'s own call to it just below
     const insertMention = React.useCallback((item) => {

package/dist/styles.css

@@ -679,10 +679,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; }
@@ -1892,6 +1896,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) {
@@ -1966,14 +1977,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); }

package/dist/styles.layered.css

@@ -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); }

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/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/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/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.5",
+  "version": "0.54.6",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",