@crisp-ui-kit/crisp 0.51.0 → 0.52.0

package/dist/styles.layered.css

@@ -2239,52 +2239,58 @@
   position: absolute; top: var(--crisp-space-2); inset-inline-end: var(--crisp-space-2); bottom: var(--crisp-space-2); z-index: 20; display: flex; flex-direction: column; overflow: hidden; width: 420px; max-width: calc(92% - var(--crisp-space-2)); background: var(--crisp-bg-surface); border-radius: var(--crisp-radius-xl); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translateX(0); transition: transform .2s ease;
     @starting-style { transform: translateX(calc(100% + var(--crisp-space-2))); }
     & * { box-sizing: border-box; }
-    & .crisp-recordpanel-header { display: flex; align-items: center; gap: var(--crisp-space-2); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
+    /* #448: measured live on app.attio.com's peek -- a toolbar row above
+       the identity header: Close, then Previous/Next, on the left; "Open
+       record" on the right. 49px tall, 8px/10px padding, a hairline border
+       beneath (the same borderSubtle every other panel/row edge here
+       already uses). Close keeps the existing transparent ghost button;
+       Previous/Next/Open record are a distinct field-elevation style
+       (white fill, e.field's own ring+shadow, solid icon) -- measured as genuinely different chrome from Close, not a reuse. */
+    & .crisp-recordpanel-toolbar { display: flex; align-items: center; height: 49px; flex-shrink: 0; padding: var(--crisp-space-2) var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-recordpanel-toolbar-spacer { flex: 1; }
+    & .crisp-recordpanel-pager { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-inline-start: var(--crisp-space-3); }
+    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpanel-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-recordpanel-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; cursor: pointer; }
+    & .crisp-recordpanel-navbtn:hover:not(:disabled) { background: var(--crisp-bg-raised); }
+    & .crisp-recordpanel-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    & .crisp-recordpanel-header { display: flex; align-items: center; gap: var(--crisp-space-2); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-3); }
     & .crisp-recordpanel-fav { width: 22px; height: var(--crisp-size-chip); border-radius: var(--crisp-radius-sm); flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
     & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s; }
-    & .crisp-recordpanel-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-2) var(--crisp-space-3); }
-    & .crisp-recordpanel-sectionlabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); padding: var(--crisp-space-2) var(--crisp-space-1) var(--crisp-space-1); }
-    & .crisp-recordpanel-field { display: flex; align-items: flex-start; gap: var(--crisp-space-2); min-height: 32px; padding: var(--crisp-space-1) var(--crisp-space-1); border-radius: var(--crisp-radius-md); }
-    & .crisp-recordpanel-field:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 3%, transparent); }
-    & .crisp-recordpanel-field-label { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 132px; flex-shrink: 0; padding-top: 3px; color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); }
-    & .crisp-recordpanel-field-label svg { flex-shrink: 0; }
-    & .crisp-recordpanel-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 3px; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & .crisp-recordpanel-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable), reset back to plain inline text and made a flex-wrap container of its own -- FieldValue can render several chips (tags), which still need to wrap the way they did before this had a button around them at all. It wraps only FieldValue, never the error slot beside it (see the component's own comment) -- NOT `display: contents`, which
-       drops a button's accessible semantics in some engines. */
-    & .crisp-recordpanel-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
-    & .crisp-recordpanel-empty { color: var(--crisp-fg-muted); }
-    /* #431: measured live on app.attio.com's record side panel -- clicking a
-       field's value opens a plain, borderless field exactly filling the value's own box (no border, no background, no box-shadow), same font
-       as the value it replaces (hence `font: inherit`, not a restated
-       size/weight). A field row's own hover tint above already carries the "this is interactive" affordance; the pending/error treatment isn't
-       Attio-measured -- it reuses the same tokens DataTable's identical states already use (opacity 0.5, `bgDanger`), per #385/#430. */
-    & .crisp-recordpanel-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret only) -- kept for real keyboard users, the same brand ring every other crisp field already shows on focus (DataTable's identical
-       .crisp-datatable-edit:focus, e.g.). */
-    & .crisp-recordpanel-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
-    & .crisp-recordpanel-edit:disabled { opacity: 0.5; cursor: not-allowed; }
-    & .crisp-recordpanel-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    & .crisp-recordpanel-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    & .crisp-recordpanel-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
-    & .crisp-recordpanel-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; }
-
-    & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
-    & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-brand-solid) 30%, transparent); }
-    & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-success) 30%, transparent); }
-    & .crisp-recordstable-tag[data-tone="warning"] { background: color-mix(in srgb, var(--crisp-bg-warning) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-warning) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-warning) 30%, transparent); }
-    & .crisp-recordstable-tag[data-tone="danger"] { background: color-mix(in srgb, var(--crisp-bg-danger) 15%, transparent); color: color-mix(in srgb, var(--crisp-bg-danger) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent); }
-    & .crisp-recordstable-tag[data-tone="purple"] { background: color-mix(in srgb, var(--crisp-bg-purple) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-purple) 80%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-purple) 30%, transparent); }
-    & .crisp-recordstable-tag[data-tone="cyan"] { background: color-mix(in srgb, var(--crisp-bg-cyan) 18%, transparent); color: color-mix(in srgb, var(--crisp-bg-cyan) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-cyan) 30%, transparent); }
-    & .crisp-recordstable-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)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent); }
-    & .crisp-recordpanel-link { color: var(--crisp-bg-brand-solid); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
-    & .crisp-recordpanel-link:hover { text-decoration: underline; }
-
-    /* #329: an optional slot for record actions (e.g. Edit). Reuses the
-       header's own measured values rather than inventing new ones -- the same horizontal inset (space.3), the same hairline border token (borderSubtle, flipped to border-top since this sits at the opposite edge), and the header/body gap (space.2) for its own vertical padding and for spacing between whatever it's given. */
+    /* #448: measured live on app.attio.com's peek (hover a Companies row,
+       click "Open preview"). Section label reads identically for both
+       Highlights and Activity: 14px/500, the same 63%-of-fgPrimary mix
+       RecordPage's own field-label already uses (product/recordpage's
+       .crisp-recordpage-field-label) -- one more surface landing on the
+       same measured "muted section heading" colour. */
+    & .crisp-recordpanel-section { padding: var(--crisp-space-2) var(--crisp-space-1) 0; }
+    & .crisp-recordpanel-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 20px; margin-bottom: var(--crisp-space-2); }
+    & .crisp-recordpanel-section-label { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    /* "View all" -- measured 10px/400, a lighter mix than the section label
+       (55%, not 63%) -- its own distinct, honestly-measured value, not a
+       reuse of a nearby one that happened to be close. */
+    & .crisp-recordpanel-section-action { border: none; background: none; padding: 0; font-family: inherit; font-size: 10px; font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; }
+    & .crisp-recordpanel-section-action:hover { color: var(--crisp-fg-primary); }
+
+    /* Highlights: a 2-column grid of label+icon+value cards, no card
+       chrome at all (no border/background/radius/shadow -- confirmed on
+       the live DOM: every highlight's computed style is fully transparent). 8px row/column gap; two rows measured "233x86" inside 473px content width is exactly (473 - 8) / 2. */
+    & .crisp-recordpanel-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--crisp-space-2); }
+    & .crisp-recordpanel-highlight { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); min-width: 0; }
+    & .crisp-recordpanel-highlight-label { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpanel-highlight-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-recordpanel-highlight-label svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-recordpanel-highlight-value { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; }
+    /* Activity is a consumer-supplied slot (crisp has no activity-feed model of its own to render) -- this only wraps it with the measured section heading above. */
+    & .crisp-recordpanel-activity { font-size: var(--crisp-text-lg); }
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+       same horizontal inset (space.3), the same hairline border token
+       (borderSubtle, flipped to border-top since this sits at the opposite
+       edge), and the header/body gap (space.2) for its own vertical padding
+       and for spacing between whatever it's given. */
     & .crisp-recordpanel-footer { flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); border-top: 1px solid var(--crisp-border-subtle); }
+    [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2532,12 +2538,38 @@
     & .crisp-rte-body code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: var(--crisp-text-md); padding: 1px var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
     & .crisp-rte-body a { color: var(--crisp-bg-brand-solid); text-decoration: underline; text-underline-offset: 2px; }
     & .crisp-rte-body strong { font-weight: var(--crisp-weight-semibold); }
-    & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: var(--crisp-space-0-5); border-radius: var(--crisp-radius-md); background: #20242c; box-shadow: 0 8px 28px -6px rgba(0,0,0,0.36), 0 2px 6px -2px rgba(0,0,0,0.24); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-body img { display: block; max-width: 100%; border-radius: var(--crisp-radius-md); }
+    /* Not measured against Attio (#428) — nothing in a read-only pass over app.attio.com had a live @mention rendered to read computed styles from, and typing one to create one is off-limits there. Reused verbatim from the one measured "brand" tag/chip this repo already has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
+       inventing a new color or shape. */
+    & .crisp-rte-mention { display: inline; border-radius: var(--crisp-radius-chip); padding: 0 var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default; }
+
+    & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
-    & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: rgba(255,255,255,0.86); font-family: inherit; cursor: pointer; transition: background-color .1s; }
-    & .crisp-rte-tool:hover { background: rgba(255,255,255,0.12); color: #fff; }
-    & .crisp-rte-tool[data-active] { color: var(--crisp-bg-brand-solid); }
-    & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: rgba(255,255,255,0.16); }
+    & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); min-width: 30px; height: 28px; padding: 0 7px; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .1s; }
+    & .crisp-rte-tool--labelled { width: auto; }
+    & .crisp-rte-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-rte-tool[data-active], & .crisp-rte-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
+    & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--crisp-border-subtle); }
+
+    & .crisp-rte-swatchpanel { position: fixed; z-index: 71; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crisp-space-1); width: 168px; padding: var(--crisp-space-1-5); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, var(--crisp-space-1-5)); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-swatchpanel { @starting-style { opacity: 0; } }
+    & .crisp-rte-swatch { width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; font-family: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); cursor: pointer; }
+    & .crisp-rte-swatch--none { background: var(--crisp-bg-surface); position: relative; }
+    & .crisp-rte-swatch--none::after { content: ""; position: absolute; inset: 6px; border-top: 1.5px solid color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); transform: rotate(-45deg); }
+
+    & .crisp-rte-blockmenu { position: fixed; z-index: 71; box-sizing: border-box; width: 356px; padding: 0; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transition: opacity 0.1s ease; }
+    & .crisp-rte-blockmenu { @starting-style { opacity: 0; } }
+    & .crisp-rte-blockmenu-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-2-5) var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-rte-blockmenu-input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); height: 20px; color: var(--crisp-fg-primary); }
+    & .crisp-rte-blockmenu-input::placeholder { color: color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); }
+    & .crisp-rte-blockmenu-list { display: flex; flex-direction: column; padding: var(--crisp-space-1-5); gap: var(--crisp-space-px); }
+    & .crisp-rte-blockmenu-item { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 52px; padding: var(--crisp-space-1-5) var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; text-align: start; cursor: pointer; }
+    & .crisp-rte-blockmenu-item svg { flex-shrink: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-rte-blockmenu-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
+    & .crisp-rte-blockmenu-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+    & .crisp-rte-blockmenu-item-label { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-rte-blockmenu-item-desc { font-size: var(--crisp-text-sm); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
+    & .crisp-rte-blockmenu-empty { padding: var(--crisp-space-4) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/types/core/caret-rect.d.ts

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

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

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

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

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

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

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

package/dist/types/product/recordpanel/index.d.ts

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

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

@@ -1,45 +1,99 @@
 import * as React from "react";
-import { type Column, type Row } from "../recordstable";
+import { type AvatarProps } from "../../components/avatar";
+import type { Row } from "../recordstable";
+type IconType = React.ComponentType<{
+    size?: number;
+    strokeWidth?: number;
+}>;
+/** One Highlights card — label, value and an optional icon, laid out the
+ * way Attio's peek panel lays its own out (measured live, #448): a 2-column
+ * grid, no card chrome (no border/background/shadow), a muted label row
+ * with a trailing icon, a filled-colour value below it. */
+export type RecordPanelHighlight = {
+    key: string;
+    label: string;
+    value: React.ReactNode;
+    icon?: IconType;
+};
 export type RecordPanelProps = Omit<React.ComponentPropsWithoutRef<"div">, "children" | "title"> & {
-    /** The record to show; render nothing when null. */
     /** Label for the close control. */
     closeLabel?: string;
+    /**
+     * A toolbar row above the panel's own identity header — measured live on
+     * app.attio.com's peek (hover a Companies row, click "Open preview"):
+     * Close, then Previous/Next record on the left, an "Open record" icon on
+     * the right, a hairline border beneath separating it from the identity
+     * block below. Close always renders (`onClose` is required); Previous/
+     * Next/Open record each render only when given a handler — a consumer
+     * with no adjacent-row concept, or nowhere to open the record's own full
+     * page, simply omits them, leaving just Close.
+     */
+    onOpenRecord?: () => void;
+    openRecordLabel?: string;
+    onPrevious?: () => void;
+    previousRecordLabel?: string;
+    onNext?: () => void;
+    nextRecordLabel?: string;
     /**
      * The panel's heading, and so its accessible name (via `aria-labelledby`,
      * not a stringified `aria-label` — it also drives the visible title, which
-     * can be any node). Defaults to the entity column's name, same as before
-     * this prop existed; pass it to title the panel by something else, e.g.
-     * "{Collection} record".
+     * can be any node). Defaults to `record.name`.
      */
     title?: React.ReactNode;
-    /** Heading above the field list. */
-    detailsLabel?: React.ReactNode;
-    /** Shown in place of a field that has no value. */
-    emptyLabel?: React.ReactNode;
-    /** Rendered below the field list, e.g. an Edit button. Omit for no footer. */
-    footer?: React.ReactNode;
-    record: Row | null;
-    columns: Column[];
-    onClose: () => void;
+    /** Avatar image URL beside the title. Omit for an initials tile built
+     *  from `record.name`'s first character. */
+    avatar?: string;
+    /** Tone for the initials tile when no `avatar` image is given (default
+     *  "brand", matching Attio's own peek). */
+    avatarTone?: NonNullable<AvatarProps["tone"]>;
+    /** The record to show; render nothing when null. Only `id`/`name` are
+     *  read directly here — everything else the panel shows comes from
+     *  `highlights`/`activity`, the consumer's own data. */
+    record: (Row & {
+        name?: string;
+    }) | null;
+    /** Heading above the highlight cards (default "Highlights"). Omit the
+     *  whole section by omitting `highlights`. */
+    highlightsLabel?: React.ReactNode;
     /**
-     * Commit handler for a `column.editable` field (#431) — same shape
-     * `DataTable`'s own `onEdit` uses (#385/#430): returning (or resolving)
-     * nothing commits synchronously; returning a `Promise` that rejects shows
-     * a pending state on the field while it's in flight, then reverts to the
-     * last-known-good value (this component never mutates `record` itself)
-     * and renders the rejection's message beside the field. A field with
-     * `editable` but no `onEdit` never opens — there's nothing to commit to.
+     * Highlight cards — label, value, optional icon (#448). Attio's own peek
+     * shows these as a fixed set of business-pipeline stats (Connection
+     * strength, Estimated ARR, …); crisp has no such fixed set, so this is
+     * fully consumer-supplied, laid out in Attio's own measured 2-column
+     * grid. Omit for no Highlights section at all.
      */
-    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    highlights?: RecordPanelHighlight[];
+    /** Heading above the activity feed (default "Activity"). */
+    activityLabel?: React.ReactNode;
+    /** Label for the trailing "View all" action beside the Activity heading.
+     *  Only rendered when `onViewAllActivity` is given. */
+    viewAllActivityLabel?: React.ReactNode;
+    onViewAllActivity?: () => void;
+    /**
+     * Activity feed content (#448) — a consumer-supplied slot. crisp has no
+     * activity-feed model of its own (no fixed shape for "who did what,
+     * when" — that's app data); this only wraps whatever's given with the
+     * measured "Activity" heading Attio's peek shows above its own feed. Omit
+     * for no Activity section at all.
+     */
+    activity?: React.ReactNode;
+    /** Rendered below the panel's content, e.g. an Edit button. Omit for no footer. */
+    footer?: React.ReactNode;
+    onClose: () => void;
     className?: string;
 };
 /**
- * Right-side record peek panel — shows one record's fields, opened from a
- * RecordsTable row (via `onOpenRecord`). Render it inside a `position:
- * relative` container (e.g. the app main area); it slides in from the right and
- * overlays the content.
+ * Right-side record peek panel — Attio's own peek shows a Highlights card
+ * area and an Activity feed (measured live: hover a Companies row, click its
+ * "Open preview" trigger), never an editable field list (#448 — a "Details"
+ * list was this component's own invention before, and #431's editable API
+ * had nothing real in this panel to attach to; that API stays on
+ * `RecordPage`'s own Details column, where Attio does let you edit in
+ * place). Render it inside a `position: relative` container (e.g. the app
+ * main area); it slides in from the right and overlays the content.
  */
-export declare function RecordPanel({ record, columns, onClose, className, closeLabel, title, detailsLabel, emptyLabel, footer, onEdit, ...rest }: RecordPanelProps): React.JSX.Element | null;
+export declare function RecordPanel({ record, onClose, className, closeLabel, onOpenRecord, openRecordLabel, onPrevious, previousRecordLabel, onNext, nextRecordLabel, title, avatar, avatarTone, highlightsLabel, highlights, activityLabel, viewAllActivityLabel, onViewAllActivity, activity, footer, ...rest }: RecordPanelProps): React.JSX.Element | null;
 export declare namespace RecordPanel {
     var displayName: string;
 }
+export {};

package/dist/types/product/recordstable/editable-field.d.ts

@@ -8,18 +8,21 @@ export type EditableOption = {
     color?: string;
 };
 /**
- * The async-commit state machine behind `RecordPanel`/`RecordPage`'s
- * editable fields (#431) — the same shape `DataTable`'s own `commitEdit`
- * uses (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
+ * The async-commit state machine behind `RecordPage`'s editable Details
+ * column (#431) — the same shape `DataTable`'s own `commitEdit` uses
+ * (#385/#430): a sync `onEdit` (returns `undefined`) commits and closes
  * immediately; a Promise-returning `onEdit` keeps the field open and pending
  * while it settles, then either closes it (resolve) or closes it AND
  * reverts while showing the rejection's message (reject). The revert needs
- * no extra code here either: neither `RecordPanel` nor `RecordPage` mutates
- * `record` itself, so once `editingKey` clears, the field simply renders
- * `record[key]` again — whatever it still says.
+ * no extra code here either: `RecordPage` never mutates `record` itself, so
+ * once `editingKey` clears, the field simply renders `record[key]` again —
+ * whatever it still says.
  *
- * One hook shared by both consumers rather than two copies of the same
- * three `useState`s and the same `.then` branching.
+ * `RecordPanel` (the peek panel) used to share this hook too, before #448
+ * found that Attio's own peek has no editable field at all to attach it to
+ * — only `RecordPage`'s Details column does. Kept as its own module rather
+ * than folded back into `recordpage.tsx`: a second consumer turning up
+ * again is a smaller change than re-extracting it would be.
  */
 export declare function useEditableField(onEdit?: (id: string, key: string, value: string) => Promise<void> | void): {
     editingKey: string | null;

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

@@ -3,8 +3,13 @@
  * `border-radius: ${c.radius.chip}`, 14px/20px at weight 500, and a 1px inset ring in the
  * tone's colour.
  *
- * Shared because RecordsTable and RecordPanel render the *same* chip. It used
- * to be pasted into both recipes, and the two copies had already started to
- * drift — adding the measured inset ring meant patching the same rules twice.
+ * Its own module (not pasted into `recordstable.recipe.ts`) because it used
+ * to be shared with `RecordPanel`'s own Details field list too, and the two
+ * copies had already started to drift before that sharing existed — adding
+ * the measured inset ring meant patching the same rules twice. `RecordPanel`
+ * no longer renders a Details list (#448, Attio's own peek doesn't have
+ * one), so `RecordsTable` is this module's only consumer now; kept as its
+ * own file rather than folded back in, since a second consumer showing up
+ * again is exactly how the drift happened the first time.
  */
 export declare const recordTagCss: string;

package/dist/types/product/richtext/index.d.ts

@@ -1,2 +1,2 @@
-export { RichTextEditor, type RichTextEditorProps, type RichTextValue, } from "./richtext";
+export { RICHTEXT_COLOR_TONES, type RichTextColorTone, RichTextEditor, type RichTextEditorHandle, type RichTextEditorProps, type RichTextMention, type RichTextMentionTriggerState, type RichTextValue, } from "./richtext";
 export { richtextRecipe } from "./richtext.recipe";