@crisp-ui-kit/crisp 0.54.5 → 0.54.7

package/dist/esm/components/datatable/datatable.js

@@ -26,8 +26,16 @@ export function isLabelTruncated(el) {
  * viewport change, header text 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) render the closed tooltip.
+ *
+ * #580: a `referencedType` column appends that type's icon + name after the
+ * label (Attio's own reference-column tooltip, e.g. "Primary location" +
+ * Country's icon + "Country") and uses `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 exactly as #534/#558
+ * shipped: label-only, the `"plain"` variant.
  */
-function ThLabel({ header }) {
+function ThLabel({ header, referencedType, }) {
     const ref = React.useRef(null);
     const [overflowing, setOverflowing] = React.useState(false);
     // biome-ignore lint/correctness/useExhaustiveDependencies: `header` isn't read in the body, but a rename (col.header 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.
@@ -56,7 +64,9 @@ function ThLabel({ header }) {
     // 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: header, asChild: true, open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
+    const ReferenceIcon = referencedType?.icon;
+    const content = referencedType ? (_jsxs("span", { className: "crisp-tooltip-reference-row", children: [header, ReferenceIcon && _jsx(ReferenceIcon, { size: 16, strokeWidth: 1.75 }), referencedType.label] })) : (header);
+    return (_jsx(Tooltip, { content: content, asChild: true, variant: referencedType ? "reference" : "plain", open: overflowing ? undefined : false, children: _jsx("span", { ref: ref, className: "crisp-datatable-th-label", children: header }) }));
 }
 /** A `date` input needs `yyyy-mm-dd`; cells may hold a Date, an ISO string or
  * a display string. Returns "" when it cannot be parsed, so the field opens
@@ -252,6 +262,16 @@ function renderTyped(col, value, avatarTone, row, display, locale = "en-US") {
             // translation) can never silently repaint the chip
             return (_jsx("span", { className: "crisp-datatable-tag", "data-tone": col.tones?.[s] ?? toneFor(s), children: display || s }));
         }
+        case "url":
+        case "email": {
+            const text = display || asText(value);
+            if (!text)
+                return empty;
+            return (_jsx("a", { className: "crisp-datatable-link", href: col.type === "url" ? `https://${text}` : `mailto:${text}`, target: col.type === "url" ? "_blank" : undefined, rel: col.type === "url" ? "noreferrer" : undefined, 
+                // Same reasoning as `entity`'s `onEntityClick` link above: the
+                // link's own navigation must not also fire the row's onRowClick.
+                onClick: (ev) => ev.stopPropagation(), children: text }));
+        }
         default: {
             const text = display || formatCell(col.type, value, col.symbol, locale);
             const isNum = col.type === "number" || col.type === "currency";
@@ -387,7 +407,8 @@ function DataReferenceEditor({ col, value, isPending, onCommit, onCancel, }) {
             keywords: query,
         });
     }
-    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder, onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
+    const isActor = col.editor === "actor";
+    return (_jsx("span", { ref: ref, style: { display: "contents" }, children: _jsx(Select, { variant: "ghost", searchable: true, searchPlaceholder: col.refSearchPlaceholder ?? (isActor ? "Search people…" : undefined), emptyLabel: col.refEmptyLabel ?? (isActor ? "No users" : undefined), onSearchChange: setQuery, "aria-label": `Edit ${col.key}`, value: asText(value) || undefined, disabled: isPending, options: options, onValueChange: (v) => {
                 if (v === CREATE_REFERENCE_VALUE)
                     col.onCreateReference?.(query);
                 else
@@ -1162,7 +1183,7 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                 ? "ascending"
                                                 : "descending"
                                             : "none";
-                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
+                                    const inner = (_jsxs("span", { className: "crisp-datatable-th-inner", children: [Icon ? _jsx(Icon, { size: 16, strokeWidth: 1.75 }) : null, _jsx(ThLabel, { header: col.header, referencedType: col.referencedType }), col.sortable ? _jsx(ChevronFor, { colKey: col.key }) : null] }));
                                     return (_jsxs(TableHead, { align: alignFor(col), "aria-sort": ariaSort, "aria-colindex": colAriaIndex(i), ...dataStickyCol(i), children: [renaming === col.key ? (_jsx("input", { 
                                                 // biome-ignore lint/a11y/noAutofocus: the rename item opens this field
                                                 autoFocus: true, className: "crisp-datatable-th-rename", defaultValue: typeof col.header === "string" ? col.header : "", "aria-label": renameColumnLabel, onBlur: (e) => {
@@ -1243,7 +1264,9 @@ export function DataTable({ columns: columnsProp, data, selectable = false, sele
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, children: [_jsxs("span", { className: "crisp-datatable-edit-picker", children: [_jsx(Switch, { "aria-label": `Edit ${col.key}`, checked: value === true || value === "true", disabled: isPending, onCheckedChange: (checked) => commitEdit(row.id, col.key, String(checked)) }), isPending && (_jsx(Spinner, { size: 14, className: "crisp-datatable-edit-pending" }))] }), errorHere && (_jsx("span", { className: "crisp-datatable-edit-error", children: errorHere }))] }, col.key));
                                                 }
                                                 if (isEditing &&
-                                                    (col.editor === "select" || col.editor === "reference")) {
+                                                    (col.editor === "select" ||
+                                                        col.editor === "reference" ||
+                                                        col.editor === "actor")) {
                                                     return (_jsxs(TableCell, { align: alignFor(col), "aria-colindex": colAriaIndex(i), ...sticky, className: "crisp-datatable-td--picker", "data-pending": isPending ? "" : undefined, 
                                                         // Same as the plain text editor's own cell:
                                                         // opening/using the picker must not also fire

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

@@ -141,6 +141,12 @@ const config = defineRecipe({
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: ${c.fgMuted}; }
+    /* 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: ${c.fgPrimary}; 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

package/dist/esm/components/personchip/personchip.js

@@ -39,15 +39,19 @@ function initials(name) {
  * 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 function PersonChip({ name, avatar, muted, className, ...props }) {
+export function PersonChip({ name, avatar, muted, trailing, className, ...props }) {
     return (_jsxs(Chip, { tone: "neutral", truncate: true, className: className, ...props, children: [_jsx(Avatar, { size: "sm", shape: "circle", tone: avatar ? "neutral" : hashTone(name), 
                 // Explicit rather than relying on the flex default (a fixed-size,
                 // non-wrapping element's own min-content floor already resists
                 // shrinking in every browser tested) — #668 asked "does the avatar
                 // stay" as its own question, so it gets its own undeniable answer
                 // rather than an implicit one.
-                style: { flexShrink: 0 }, children: avatar ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name })] }));
+                style: { flexShrink: 0 }, children: avatar ? _jsx("img", { src: avatar, alt: "" }) : initials(name) }), _jsx("span", { className: "crisp-chip-label", style: muted ? { color: c.fgNeutralMuted } : undefined, children: name }), trailing != null && (_jsx("span", { className: "crisp-personchip-trailing", style: { flexShrink: 0 }, children: trailing }))] }));
 }
 PersonChip.displayName = "PersonChip";

package/dist/esm/components/tabletoolbar/tabletoolbar.chrome.js

@@ -14,6 +14,14 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // block, and those depend on following `.menu` in source order. Keeping the
 // split preserves that cascade exactly, which is what lets the generated CSS
 // stay byte-for-byte identical to what shipped before the extraction.
+//
+// `.menu--op` (#594 follow-up) is the filter condition's own operator list —
+// measured live against Attio's own popover at 135px (rounds to 134px), not
+// the default 232px every other menu here uses. `.menu-item` also picked up
+// `line-height: 20px` and `font-weight: medium` from the same measurement
+// (its 8 rows read 14px/20px/500) — shared by every menu that renders one,
+// not just the operator list, since crisp's menu-item typography was
+// previously unset rather than wrong.
 export const toolbarChromeHead = (p) => `    & .${CLASS_PREFIX}${p}-toolbar { display: flex; align-items: center; gap: ${c.space["2"]}; padding: 0 ${c.space["3"]} ${c.space["2"]}; }
     & .${CLASS_PREFIX}${p}-toolbar[data-inline] { padding-bottom: 0; }
     & .${CLASS_PREFIX}${p}-search { display: flex; align-items: center; gap: ${c.space["1.5"]}; height: ${c.size.row}; padding: 0 ${c.space["2.5"]}; border: none; border-radius: ${c.radius.md}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; color: ${c.fgMuted}; }
@@ -52,7 +60,7 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-sort-learn { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; font-size: ${c.text.lg}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-decoration: none; }
     & .${CLASS_PREFIX}${p}-sort-learn svg { flex-shrink: 0; }
     & .${CLASS_PREFIX}${p}-sort-learn:hover { color: ${c.fgPrimary}; }
-    & .${CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-menu-item { display: flex; align-items: center; gap: ${c.space["1.5"]}; width: 100%; height: ${c.size.menuRow}; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: none; border-radius: ${c.radius.md}; font-family: inherit; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; text-align: left; cursor: pointer; }
     & .${CLASS_PREFIX}${p}-menu-item:hover { background: ${c.bgRaised}; }
     & .${CLASS_PREFIX}${p}-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .${CLASS_PREFIX}${p}-menu-item:disabled:hover { background: none; }
@@ -65,6 +73,7 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .${CLASS_PREFIX}${p}-menu--hdr { min-width: 200px; }
+    & .${CLASS_PREFIX}${p}-menu--op { min-width: 134px; }
     & .${CLASS_PREFIX}${p}-menu-item--danger { color: ${c.bgDanger}; }
     & .${CLASS_PREFIX}${p}-menu-item--danger svg { color: ${c.bgDanger}; }
     & .${CLASS_PREFIX}${p}-menu-item--danger:hover { background: color-mix(in srgb, ${c.bgDanger} 10%, transparent); }

package/dist/esm/components/tabletoolbar/tabletoolbar.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, CircleHelp, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
@@ -13,8 +13,14 @@ const OP_LABELS = {
     is: "is",
     isnot: "is not",
     isanyof: "is any of",
-    empty: "is empty",
-    notempty: "is not empty",
+    // Attio's own text says "empty"/"not empty", not "is empty"/"is not empty"
+    // -- #619's own issue body quotes it verbatim this way, and #593's number/
+    // date operator sets ("is / is not / less than / greater than / empty /
+    // not empty") repeat it. #619 ported the 3 new ops but left these two
+    // untouched from the pre-existing 5-op set, which had drifted; caught in
+    // review.
+    empty: "empty",
+    notempty: "not empty",
 };
 // #619: order and label set match Attio's own text-filter operator picker
 // verbatim (measured live, per RecordsTable's own #578 port of the same
@@ -368,7 +374,7 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                     const hasValue = (!opNeedsValue(cond.op) || cond.value.trim()) &&
                         (!opNeedsValues(cond.op) || (cond.values?.length ?? 0) > 0);
                     return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fchip", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fchip-main", "data-menu-trigger": true, "aria-haspopup": "dialog", onClick: () => setOpenMenu(open ? null : `fcond:${cond.id}`), children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-field", children: col?.label }), hasValue ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: crispMessages[OP_LABELS[cond.op]] ??
-                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsx("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => removeFilter(cond.id), children: deleteFilterLabel }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
+                                                            OP_LABELS[cond.op] }), opNeedsValue(cond.op) && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: cond.value })), cond.op === "isanyof" && cond.values && (_jsx("span", { className: "crisp-tabletoolbar-fchip-val", children: isAnyOfSummary(cond.values) }))] })) : (_jsx("span", { className: "crisp-tabletoolbar-fchip-op", children: selectConditionLabel }))] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fchip-x", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": kebabOpen, "aria-label": `${col?.label} ${filterOptionsLabel}`, onClick: () => setOpenMenu(kebabOpen ? null : `fkebab:${cond.id}`), children: _jsx(MoreVertical, { size: 13, strokeWidth: 2 }) })] }), kebabOpen && (_jsx("div", { ref: kebabMenuRef, className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--right crisp-tabletoolbar-menu--hdr", role: "menu", "aria-label": `${col?.label} ${filterOptionsLabel}`, onKeyDown: onKebabKeyDown, children: _jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--danger", onClick: () => removeFilter(cond.id), children: [_jsx(Trash2, { size: 16, strokeWidth: 1.75 }), deleteFilterLabel] }) })), open && (_jsxs("div", { className: "crisp-tabletoolbar-menu crisp-tabletoolbar-menu--op", role: "dialog", "aria-label": `${col?.label} ${crispMessages.condition ?? "condition"}`, children: [_jsxs("div", { className: "crisp-tabletoolbar-menu-head", children: [col?.label, " ", crispMessages.condition ?? "condition"] }), opsFor(col).map((op) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.op === op ? "" : undefined, onClick: () => patchFilter(cond.id, { op }), children: [crispMessages[OP_LABELS[op]] ?? OP_LABELS[op], cond.op === op ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, op))), opNeedsValue(cond.op) && (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter value`, 
                                         // biome-ignore lint/a11y/noAutofocus: focus the value field
                                         autoFocus: true, value: cond.value, onChange: (e) => patchFilter(cond.id, { value: e.target.value }) })), cond.op === "isanyof" && col?.values && (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterValuePlaceholder, "aria-label": `${col?.label} filter values`, 
                                                 // biome-ignore lint/a11y/noAutofocus: focus the search field

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

@@ -32,7 +32,7 @@ function mergeRefs(...refs) {
  * carry them for the same reason it can't carry `aria-describedby` (below):
  * a screen reader reads state off the focused element, not an ancestor.
  */
-export const Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, "aria-describedby": restDescribedBy, 
+export const Tooltip = React.forwardRef(({ content, children, side = "top", delay = 350, open: openProp, defaultOpen, onOpenChange, asChild = false, variant = "plain", "aria-describedby": restDescribedBy, 
 // Not forwarded, even though a composer's other rest props are
 // (below): `style` sizes a VISUAL box, and Tooltip's wrapper has none
 // of its own -- the box that matters is whatever the consumer's own
@@ -116,7 +116,7 @@ style: _style, ...rest }, forwardedRef) => {
     };
     const portal = open &&
         pos != null &&
-        createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe(), style: {
+        createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe({ variant }), style: {
                 left: pos.left,
                 top: pos.top,
                 transform: pos.below

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/recordstable.css

@@ -43,7 +43,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -56,6 +56,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

package/dist/recordstable.layered.css

@@ -44,7 +44,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -57,6 +57,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }

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; }
@@ -1742,7 +1746,7 @@
     & .crisp-tabletoolbar-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-tabletoolbar-sort-learn svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-tabletoolbar-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-tabletoolbar-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-tabletoolbar-menu-item:disabled:hover { background: none; }
@@ -1755,6 +1759,7 @@
     & .crisp-tabletoolbar-menu--right { left: auto; right: 0; }
     & .crisp-tabletoolbar-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-tabletoolbar-menu--hdr { min-width: 200px; }
+    & .crisp-tabletoolbar-menu--op { min-width: 134px; }
     & .crisp-tabletoolbar-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-tabletoolbar-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }
@@ -1892,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) {
@@ -1966,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); }
@@ -2738,7 +2754,7 @@
     & .crisp-recordstable-sort-learn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-decoration: none; }
     & .crisp-recordstable-sort-learn svg { flex-shrink: 0; }
     & .crisp-recordstable-sort-learn:hover { color: var(--crisp-fg-primary); }
-    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
+    & .crisp-recordstable-menu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; height: var(--crisp-size-menuRow); margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); text-align: left; cursor: pointer; }
     & .crisp-recordstable-menu-item:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordstable-menu-item:disabled { opacity: 0.4; cursor: default; }
     & .crisp-recordstable-menu-item:disabled:hover { background: none; }
@@ -2751,6 +2767,7 @@
     & .crisp-recordstable-menu--right { left: auto; right: 0; }
     & .crisp-recordstable-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }
     & .crisp-recordstable-menu--hdr { min-width: 200px; }
+    & .crisp-recordstable-menu--op { min-width: 134px; }
     & .crisp-recordstable-menu-item--danger { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger svg { color: var(--crisp-bg-danger); }
     & .crisp-recordstable-menu-item--danger:hover { background: color-mix(in srgb, var(--crisp-bg-danger) 10%, transparent); }