@crisp-ui-kit/crisp 0.53.5 → 0.54.0

package/dist/styles.layered.css

@@ -1491,6 +1491,12 @@
   }
 }
 
+.crisp-skiplink {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; text-decoration: none; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary);
+    &:focus { position: fixed; top: var(--crisp-space-3); inset-inline-start: var(--crisp-space-3); z-index: 90; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; padding: var(--crisp-space-2) var(--crisp-space-3); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-popover); 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); }
+    &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+}
+
 .crisp-slider {
   display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
     & .crisp-slider-thumblabel {
@@ -1785,6 +1791,18 @@
   }
 }
 
+.crisp-textlink {
+  display: inline; font-family: var(--crisp-font-sans); text-decoration: none; cursor: pointer;
+    &:hover { text-decoration: underline; }
+}
+.crisp-textlink--tone_brand {
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+}
+.crisp-textlink--tone_muted {
+  font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
+    &:hover { color: var(--crisp-bg-brand-solid); }
+}
+
 .crisp-toast {
   display: contents; font-family: var(--crisp-font-sans);
     & .crisp-toast-viewport { position: fixed; z-index: 80; inset-inline-end: var(--crisp-space-4); top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-2); width: 360px; max-width: calc(100vw - var(--crisp-space-8)); pointer-events: none; }
@@ -1824,6 +1842,10 @@
   }
 }
 
+.crisp-visuallyhidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+
 .crisp-wheelpicker {
   position: relative; box-sizing: border-box; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); /* the band the selected row sits in; behind the items, never hit-tested */
     & .crisp-wheelpicker-indicator { position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%; transform: translateY(-50%); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-neutral-weak); pointer-events: none; }
@@ -2020,6 +2042,14 @@
     & .crisp-flowcanvas-tool-sep { width: 1px; height: 18px; background: var(--crisp-border-subtle); }
 }
 
+.crisp-headerbar {
+  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: var(--crisp-size-header); flex-shrink: 0; padding: 0 var(--crisp-space-3); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+    &[data-bordered] { border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-headerbar-leading { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; min-width: 0; }
+    & .crisp-headerbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-2); overflow: hidden; }
+    & .crisp-headerbar-trailing { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; }
+}
+
 .crisp-inbox {
   display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-height: 588px; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); overflow: hidden; 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); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-inbox-head { padding: var(--crisp-space-3) var(--crisp-space-3) 0; }
@@ -2180,6 +2210,10 @@
     & .crisp-recordpage-detailsearch { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: var(--crisp-size-chip); flex-shrink: 0; padding: 0; margin: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-recordpage-detailsearch:hover, & .crisp-recordpage-detailsearch[data-active] { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    /* A caller-supplied `sections` grouping (#528) is not an Attio-measured
+       shape (its own Details column is flat) -- this heading reuses
+       .crisp-recordpage-section-title's own type treatment verbatim, just spaced from the group above it. */
+    & .crisp-recordpage-fieldsection-title { margin-top: var(--crisp-space-3); }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
     & .crisp-recordpage-viewall { flex-basis: 100%; margin-top: var(--crisp-space-0-5); border: none; background: none; padding: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-regular); cursor: pointer; text-align: start; }
@@ -2194,31 +2228,25 @@
     & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-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. */
+    /* 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-recordpage-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-recordpage-empty { color: var(--crisp-fg-muted); }
-
-    /* #431: measured live on app.attio.com's record page Details column -- 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. */
+    /* #431: measured live on app.attio.com's record page Details column --
+       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-recordpage-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.). */
+    /* 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-recordpage-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
-       RecordsTable's own `.crisp-recordstable-status[-dot]` (already measured against Attio there), but its own classes: that pair is scoped under `.crisp-recordstable`'s own recipe root, so reusing the
-       classnames verbatim here would resolve to nothing. */
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as RecordsTable's own `.crisp-recordstable-status[-dot]` (already
+       measured against Attio there), but its own classes: that pair is
+       scoped under `.crisp-recordstable`'s own recipe root, so reusing the classnames verbatim here would resolve to nothing. */
     & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
     & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
@@ -2226,23 +2254,18 @@
     & .crisp-recordpage-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-link:hover { text-decoration: underline; }
     & .crisp-recordpage-emptystate { padding: var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: var(--crisp-space-3) var(--crisp-space-5); }
-
     & .crisp-recordpage-panel { padding-top: var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-recordpage-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-recordpage-card-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.14px; color: var(--crisp-fg-primary); padding: var(--crisp-space-3) var(--crisp-space-3) var(--crisp-space-2); }
     & .crisp-recordpage-hl-card { border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-2xl); overflow: hidden; }
-    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any
-       column count, so the grid stays responsive (auto-fit) without per-cell
-       nth-child border hacks that break when the column count changes. */
+    /* gap-as-gridlines: a 1px gap over the border colour draws dividers at any column count, so the grid stays responsive (auto-fit) without per-cell nth-child border hacks that break when the column count changes. */
     & .crisp-recordpage-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--crisp-border-subtle); }
     & .crisp-recordpage-hl-cell { position: relative; min-height: 84px; padding: var(--crisp-space-2-5) var(--crisp-space-3); background: var(--crisp-bg-surface); }
     & .crisp-recordpage-hl-icon { position: absolute; top: var(--crisp-space-2-5); inset-inline-end: var(--crisp-space-3); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
-
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -2251,7 +2274,6 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
-
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -2259,7 +2281,6 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 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; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
-
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -2269,23 +2290,18 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
     & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
     & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
     & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
     & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
-
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
-
     & .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); }
     & .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)); }
     & .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)); }

package/dist/textlink.css

@@ -0,0 +1,11 @@
+.crisp-textlink {
+  display: inline; font-family: var(--crisp-font-sans); text-decoration: none; cursor: pointer;
+    &:hover { text-decoration: underline; }
+}
+.crisp-textlink--tone_brand {
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+}
+.crisp-textlink--tone_muted {
+  font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
+    &:hover { color: var(--crisp-bg-brand-solid); }
+}

package/dist/textlink.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface TextlinkVariants {
+  tone?: "brand" | "muted";
+}
+
+export declare const textlinkRecipe: RecipeFn<{ tone: { brand: string; muted: string } }>;

package/dist/textlink.layered.css

@@ -0,0 +1,13 @@
+@layer crisp-components {
+.crisp-textlink {
+  display: inline; font-family: var(--crisp-font-sans); text-decoration: none; cursor: pointer;
+    &:hover { text-decoration: underline; }
+}
+.crisp-textlink--tone_brand {
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+}
+.crisp-textlink--tone_muted {
+  font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
+    &:hover { color: var(--crisp-bg-brand-solid); }
+}
+}

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

@@ -25,7 +25,7 @@ export type BulkBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
  * positioned ancestor when a selection is active; render it conditionally
  * (e.g. `count > 0 && <BulkBar …/>`). Measured from a records table.
  */
-export declare function BulkBar({ count, onClear, countLabel, countText, children, className, clearLabel, ...rest }: BulkBarProps): React.JSX.Element;
+export declare function BulkBar({ count, onClear, countLabel: countLabelProp, countText, children, className, clearLabel: clearLabelProp, ...rest }: BulkBarProps): React.JSX.Element;
 export declare namespace BulkBar {
     var displayName: string;
 }

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

@@ -45,7 +45,7 @@ export type HeatmapChartProps = Omit<React.ComponentPropsWithoutRef<"div">, "chi
  * the recipe's own doc comment for why (and for its measurement — or lack
  * of one — against Attio).
  */
-export declare function HeatmapChart({ data, rowAxis, colAxis, format, cellTitle, onCellClick, isCellClickable, empty, emptyLabel, "aria-label": ariaLabel, className, ...rest }: HeatmapChartProps): React.JSX.Element;
+export declare function HeatmapChart({ data, rowAxis, colAxis, format, cellTitle, onCellClick, isCellClickable, empty, emptyLabel: emptyLabelProp, "aria-label": ariaLabel, className, ...rest }: HeatmapChartProps): React.JSX.Element;
 export declare namespace HeatmapChart {
     var displayName: string;
 }

package/dist/types/components/skiplink/index.d.ts

@@ -0,0 +1 @@
+export * from "./skiplink";

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

@@ -0,0 +1,18 @@
+import type * as React from "react";
+export type SkipLinkProps = Omit<React.ComponentPropsWithoutRef<"a">, "href"> & {
+    /** The target to jump to. Default `"#main-content"` — give the page's
+     *  main landmark that id. */
+    href?: string;
+    className?: string;
+};
+/**
+ * A "skip to content" link — invisible until it is the thing with focus
+ * (a sighted mouse user never sees it), so a keyboard user's first Tab from
+ * a cold load reaches it instead of walking the whole nav first. Render it
+ * as the very first thing on the page, before the sidebar/header. See the
+ * recipe's own doc comment for why there's no Attio value behind its chrome.
+ */
+export declare function SkipLink({ href, children, className, ...rest }: SkipLinkProps): React.JSX.Element;
+export declare namespace SkipLink {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const skiplinkRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/components/textlink/index.d.ts

@@ -0,0 +1,2 @@
+export { TextLink, type TextLinkProps } from "./textlink";
+export { textlinkRecipe } from "./textlink.recipe";

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

@@ -0,0 +1,19 @@
+import type * as React from "react";
+export type TextLinkProps = React.ComponentPropsWithoutRef<"a"> & {
+    /** `"brand"` — bold, always brand-coloured (a card's trailing "View all →").
+     *  `"muted"` (default) — quiet until hover, then brand-coloured (an
+     *  in-context reference link, e.g. a sample record under a finding). */
+    tone?: "brand" | "muted";
+    className?: string;
+};
+/**
+ * Inline navigable text — a real `<a href>` always, the same href+onClick
+ * division `StatList` uses: `href` gives ordinary browser behaviour (new
+ * tab, copy link, hover status), an `onClick` that calls
+ * `event.preventDefault()` pairs it with client-side routing (e.g.
+ * react-router's own `Link`).
+ */
+export declare function TextLink({ tone, className, ...rest }: TextLinkProps): React.JSX.Element;
+export declare namespace TextLink {
+    var displayName: string;
+}

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

@@ -0,0 +1,13 @@
+declare const config: import("../..").RecipeConfig<{
+    tone: {
+        brand: string;
+        muted: string;
+    };
+}>;
+export declare const textlinkRecipe: import("../..").RecipeFn<{
+    tone: {
+        brand: string;
+        muted: string;
+    };
+}>;
+export default config;

package/dist/types/components/visuallyhidden/index.d.ts

@@ -0,0 +1 @@
+export * from "./visuallyhidden";

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

@@ -0,0 +1,15 @@
+import type * as React from "react";
+export type VisuallyHiddenProps = React.ComponentPropsWithoutRef<"span"> & {
+    className?: string;
+};
+/**
+ * Hides content visually while keeping it in the accessibility tree and
+ * the tab order — a label for an icon-only control, extra context for a
+ * screen-reader user that a sighted one gets from layout alone. Renders a
+ * `<span>`; wrap the element that needs the treatment, or read its content
+ * as a `label`/`aria-label` source in a test.
+ */
+export declare function VisuallyHidden({ className, ...rest }: VisuallyHiddenProps): React.JSX.Element;
+export declare namespace VisuallyHidden {
+    var displayName: string;
+}

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

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const visuallyhiddenRecipe: import("../..").RecipeFn<{}>;
+export default config;

package/dist/types/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/resizablepanel";
 export * from "./components/segmented";
 export * from "./components/select";
 export * from "./components/skeleton";
+export * from "./components/skiplink";
 export * from "./components/slider";
 export * from "./components/spinner";
 export * from "./components/stagebar";
@@ -49,9 +50,11 @@ export * from "./components/table";
 export * from "./components/tabletoolbar";
 export * from "./components/tabs";
 export * from "./components/textarea";
+export * from "./components/textlink";
 export * from "./components/timepicker";
 export * from "./components/toast";
 export * from "./components/tooltip";
+export * from "./components/visuallyhidden";
 export * from "./components/wheelpicker";
 export * from "./core";
 export * from "./product/appshell";
@@ -60,6 +63,7 @@ export * from "./product/board";
 export * from "./product/command";
 export * from "./product/entitycard";
 export * from "./product/flowcanvas";
+export * from "./product/headerbar";
 export * from "./product/inbox";
 export * from "./product/listpage";
 export * from "./product/navitem";

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

@@ -34,7 +34,7 @@ export type BoardProps<T extends BoardCard> = Omit<React.ComponentPropsWithoutRe
  * (the parent owns the cards, so the move is a controlled state update).
  * Measured from a deals pipeline.
  */
-export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel, getCardLabel, announceMove, className, ...rest }: BoardProps<T>): React.JSX.Element;
+export declare function Board<T extends BoardCard>({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, className, ...rest }: BoardProps<T>): React.JSX.Element;
 export declare namespace Board {
     var displayName: string;
 }

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

@@ -54,4 +54,4 @@ export type CommandProps = Omit<React.ComponentPropsWithoutRef<"div">, "children
  * option list) so keyboard/focus correctness comes from the machines, not
  * hand-rolled event handling.
  */
-export declare function Command({ open, onOpenChange, items, placeholder, "aria-label": ariaLabel, navigateLabel, selectLabel, emptyLabel, query: queryProp, onQueryChange, filterItems, className, "aria-describedby": describedBy, ...rest }: CommandProps): React.JSX.Element | null;
+export declare function Command({ open, onOpenChange, items, placeholder: placeholderProp, "aria-label": ariaLabelProp, navigateLabel: navigateLabelProp, selectLabel: selectLabelProp, emptyLabel: emptyLabelProp, query: queryProp, onQueryChange, filterItems, className, "aria-describedby": describedBy, ...rest }: CommandProps): React.JSX.Element | null;

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

@@ -34,7 +34,7 @@ export type FlowCanvasProps<T extends FlowNode> = Omit<React.ComponentPropsWitho
  * measured from a workflows editor. Drag a node to move it (fires
  * `onNodesChange`); drag the background to pan; use the toolbar to zoom.
  */
-export declare function FlowCanvas<T extends FlowNode>({ nodes, edges, onNodesChange, renderNode, nodeWidth, nodeHeight, "aria-label": ariaLabel, className, zoomOutLabel, zoomInLabel, resetLabel, edgesLabel, ...rest }: FlowCanvasProps<T>): React.JSX.Element;
+export declare function FlowCanvas<T extends FlowNode>({ nodes, edges, onNodesChange, renderNode, nodeWidth, nodeHeight, "aria-label": ariaLabelProp, className, zoomOutLabel: zoomOutLabelProp, zoomInLabel: zoomInLabelProp, resetLabel: resetLabelProp, edgesLabel: edgesLabelProp, ...rest }: FlowCanvasProps<T>): React.JSX.Element;
 export declare namespace FlowCanvas {
     var displayName: string;
 }

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

@@ -0,0 +1,27 @@
+import type * as React from "react";
+export type HeaderBarProps = Omit<React.ComponentPropsWithoutRef<"div">, "title"> & {
+    /** Content before the title — a back button, an icon. Optional. */
+    leading?: React.ReactNode;
+    /** The bar's main content — plain text, or a `Breadcrumb`. Optional. */
+    title?: React.ReactNode;
+    /** Trailing action cluster — icon buttons, a search trigger. Optional. */
+    trailing?: React.ReactNode;
+    /**
+     * Draws the measured bottom divider. Default `true`. Set `false` when
+     * stacking two bars (a page header over a view bar) so only the outer one
+     * carries it — matches Attio's own two-bar pages, where only the top bar
+     * has a border and the one directly under it does not.
+     */
+    bordered?: boolean;
+    className?: string;
+};
+/**
+ * A page-level header row: an optional leading slot, a flexible title/
+ * breadcrumb region, and a trailing action cluster, on the measured 48px
+ * bar Attio uses for both its page-header and its view-bar row. See the
+ * recipe's own doc comment for the live measurement (crisp#462).
+ */
+export declare function HeaderBar({ leading, title, trailing, bordered, className, ...rest }: HeaderBarProps): React.JSX.Element;
+export declare namespace HeaderBar {
+    var displayName: string;
+}

package/dist/types/product/headerbar/headerbar.recipe.d.ts

@@ -0,0 +1,3 @@
+declare const config: import("../..").RecipeConfig<{}>;
+export declare const headerbarRecipe: import("../..").RecipeFn<{}>;
+export default config;

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

@@ -0,0 +1 @@
+export * from "./headerbar";

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

@@ -38,7 +38,7 @@ export type InboxProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"
  * (avatar + message + time + unread dot) or a centred empty state. Put it inside
  * a Popover for the flyout.
  */
-export declare function Inbox({ notifications, title, tabs, activeTab, onTabChange, emptyTitle, emptySubtitle, emptyAction, tabsLabel, className, ...rest }: InboxProps): React.JSX.Element;
+export declare function Inbox({ notifications, title: titleProp, tabs, activeTab, onTabChange, emptyTitle: emptyTitleProp, emptySubtitle: emptySubtitleProp, emptyAction, tabsLabel: tabsLabelProp, className, ...rest }: InboxProps): React.JSX.Element;
 export declare namespace Inbox {
     var displayName: string;
 }

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

@@ -52,7 +52,7 @@ export declare const onboardingLabels: {
  * started" widget. Title + optional menu/minimize, a segmented progress bar,
  * and step rows (completed rows strike through with a brand check).
  */
-export declare function OnboardingChecklist({ title, steps, encouragement, onStepClick, onMenu, onMinimize, className, optionsLabel, minimizeLabel, progressLabel, progressText, completedStepLabel, ...rest }: OnboardingChecklistProps): React.JSX.Element;
+export declare function OnboardingChecklist({ title: titleProp, steps, encouragement: encouragementProp, onStepClick, onMenu, onMinimize, className, optionsLabel: optionsLabelProp, minimizeLabel: minimizeLabelProp, progressLabel: progressLabelProp, progressText: progressTextProp, completedStepLabel: completedStepLabelProp, ...rest }: OnboardingChecklistProps): React.JSX.Element;
 export declare namespace OnboardingChecklist {
     var displayName: string;
 }

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

@@ -1,2 +1,2 @@
-export { RecordPage, type RecordPageLabels, type RecordPageLabelsInput, type RecordPageProps, recordPageLabels, } from "./recordpage";
+export { RecordDetails, type RecordDetailsProps, RecordPage, type RecordPageHighlight, type RecordPageLabels, type RecordPageLabelsInput, type RecordPageNote, type RecordPageProps, type RecordPageSection, type RecordPageTab, type RecordPageTask, recordPageLabels, } from "./recordpage";
 export { recordpageRecipe } from "./recordpage.recipe";

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

@@ -1,3 +1,4 @@
+import { type LucideIcon } from "lucide-react";
 import * as React from "react";
 import { type Column, type Row } from "../recordstable";
 export type RecordPageNote = {
@@ -23,6 +24,39 @@ export type RecordPageTab = {
     count?: number;
     render: () => React.ReactNode;
 };
+/**
+ * One heading in the Details column, grouping a subset of `columns` by key
+ * (#528). Attio's own Details column is flat (measured live — no section
+ * headings at all), so a caller with no grouping of its own just omits
+ * `sections` and keeps that flat list, "View all values" reveal included.
+ * A caller that supplies `sections` replaces the flat list WHOLESALE — the
+ * same "caller's list replaces the built-in one, never merges with it"
+ * choice `tabs` already makes (#379) — so a column key named by no
+ * `fields` array here simply doesn't render. Sectioned mode always shows
+ * every field in every section (no 5-field reveal/"View all values"): a
+ * caller reaching for `sections` at all (GRC's own field groups; Attio has
+ * none to match) has already opted out of the flat Attio shape that reveal
+ * exists for.
+ */
+export type RecordPageSection = {
+    /** Section heading; omit for an untitled group (no heading rendered). */
+    title?: React.ReactNode;
+    /** Field keys in this section, in the order shown. */
+    fields: string[];
+};
+/**
+ * One Overview Highlights card — same shape `RecordPanel`'s own
+ * `RecordPanelHighlight` uses (#448), plus the empty-state node the CRM
+ * default already needed: `RecordPanel`'s peek never shows an empty
+ * highlight card, but `RecordPage`'s Overview always has (Attio's own
+ * "No connection", "No team", measured live), so that stays here.
+ */
+export type RecordPageHighlight = {
+    label: string;
+    icon?: LucideIcon;
+    value: React.ReactNode | null;
+    empty?: React.ReactNode;
+};
 export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
     record: Row;
     columns: Column[];
@@ -70,6 +104,22 @@ export type RecordPageProps = Omit<React.ComponentPropsWithoutRef<"div">, "child
     tasks?: RecordPageTask[];
     onAddTask?: (text: string) => void;
     onToggleTask?: (id: string) => void;
+    /**
+     * Groups the Details column's fields under headings instead of Attio's
+     * flat list (#528) — see `RecordPageSection`'s own doc. Omit to keep the
+     * flat Attio-parity list.
+     */
+    sections?: RecordPageSection[];
+    /**
+     * Replaces the Overview Highlights cards (#528) — Attio's own set is a
+     * fixed CRM shape (Connection strength, Estimated ARR, …) that has
+     * nothing to do with a non-CRM domain's data, the same problem #379
+     * already solved for `tabs`. `false` omits the whole Highlights section
+     * (heading included, matching how `RecordPanel`'s own `highlights` omits
+     * its section by being left out, #448). Omit the prop entirely to keep
+     * the built-in CRM set.
+     */
+    highlights?: RecordPageHighlight[] | false;
 };
 /**
  * Every chrome string RecordPage renders. Supplied as a PARTIAL map, so
@@ -139,6 +189,10 @@ export type RecordPageLabels = {
     recordCreated: (name: React.ReactNode) => React.ReactNode;
     /** Empty state on the Emails tab, given the record's name. */
     noEmailsWith: (name: React.ReactNode) => React.ReactNode;
+    /** Field search's own empty state, given the typed query — previously a
+     *  hardcoded English string; #528 moved it here alongside every other
+     *  chrome string this component renders, so it translates like the rest. */
+    noFieldsMatch: (query: React.ReactNode) => React.ReactNode;
 };
 export declare const recordPageLabels: RecordPageLabels;
 /** Partial override of any chrome string; the keyed maps nest. */
@@ -147,6 +201,41 @@ export type RecordPageLabelsInput = Partial<Omit<RecordPageLabels, "tabs" | "hig
     highlightLabels?: Partial<RecordPageLabels["highlightLabels"]>;
     highlightEmpty?: Partial<RecordPageLabels["highlightEmpty"]>;
 };
+export type RecordDetailsProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+    record: Row;
+    columns: Column[];
+    /** Groups fields under headings instead of Attio's flat list — see
+     *  `RecordPageSection`'s own doc. Omit to keep the flat list. */
+    sections?: RecordPageSection[];
+    onEdit?: (id: string, key: string, value: string) => Promise<void> | void;
+    labels?: RecordPageLabelsInput;
+    className?: string;
+};
+/**
+ * The Details column's own field list, on its own (#528) — `RecordPage`'s
+ * "Record Details" collapsible + searchable field list, the one piece a
+ * consumer with a fixed-width rail of its own (no resize handle, no entity
+ * header, no CRM Lists panel — GRC's own persistent 320px column, grc#66)
+ * actually needs, rather than rebuilding this same click-to-edit/search/
+ * `sections` machinery by hand or pulling in the whole page's chrome for a
+ * rail that isn't one. `RecordPage` composes this internally for its own
+ * resizable aside (same component either way, not a second copy) — this is
+ * that same block, exactly, just not wrapped in `RecordPage`'s own topbar/
+ * tabs/resizer.
+ *
+ * Not wrapped in `recordpageRecipe` itself: doing so would duplicate the
+ * recipe's own `display:flex;height:100%` base rule as a nested child
+ * inside `RecordPage`'s aside (which already carries that class from
+ * `RecordPage`'s own root), breaking that layout. A standalone caller
+ * needs exactly one `.crisp-recordpage`-scoped ancestor for this
+ * component's classes to resolve — wrap it in one, the same way
+ * `RecordPage`'s own root does: `<div className={recordpageRecipe()}>`
+ * (also exported from this package).
+ */
+export declare function RecordDetails({ record, columns, sections, onEdit, labels, className, ...rest }: RecordDetailsProps): React.JSX.Element;
+export declare namespace RecordDetails {
+    var displayName: string;
+}
 /**
  * The full-page company record view — the page that opens when you click into a
  * record (as opposed to the peek [RecordPanel]). A top breadcrumb bar with
@@ -155,7 +244,7 @@ export type RecordPageLabelsInput = Partial<Omit<RecordPageLabels, "tabs" | "hig
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, ...rest }: RecordPageProps): React.JSX.Element;
+export declare function RecordPage({ record, columns, collection, labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, ...rest }: RecordPageProps): React.JSX.Element;
 export declare namespace RecordPage {
     var displayName: string;
 }

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

@@ -34,7 +34,7 @@ export type TaskListProps = Omit<React.ComponentPropsWithoutRef<"div">, "childre
  * count, then rows of a round complete-checkbox + title + trailing meta.
  * Completed rows strike through; overdue dates go red.
  */
-export declare function TaskList({ tasks, groups, onToggle, emptyLabel, className, completeLabel, incompleteLabel, ...rest }: TaskListProps): React.JSX.Element;
+export declare function TaskList({ tasks, groups, onToggle, emptyLabel: emptyLabelProp, className, completeLabel: completeLabelProp, incompleteLabel: incompleteLabelProp, ...rest }: TaskListProps): React.JSX.Element;
 export declare namespace TaskList {
     var displayName: string;
 }

package/dist/visuallyhidden.css

@@ -0,0 +1,3 @@
+.crisp-visuallyhidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}

package/dist/visuallyhidden.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface VisuallyhiddenVariants {
+
+}
+
+export declare const visuallyhiddenRecipe: RecipeFn<{  }>;

package/dist/visuallyhidden.layered.css

@@ -0,0 +1,5 @@
+@layer crisp-components {
+.crisp-visuallyhidden {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+}