@crisp-ui-kit/crisp 0.54.8 → 0.54.9

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

@@ -1,4 +1,4 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
 import { contract as c, elevation as e } from "../../tokens/index.js";
 // The feature-rich, config-driven data grid (sort / filter / selection /
 // inline edit) built on the composable `Table` primitives. This recipe adds the
@@ -19,6 +19,30 @@ const config = defineRecipe({
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
       overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
     }
+    /* crisp/#645: visually-hidden-but-focusable, not visually-hidden-and-
+       inert like .crisp-datatable-live above -- same clip-rect shape,
+       this one just needs to actually hold DOM focus so a native
+       copy/paste event has something to fire on (see its own comment
+       in datatable.tsx). resize: none keeps a stray native textarea handle
+       from ever being drawable, even though it's clipped to 1px anyway. */
+    & .crisp-datatable-clipboard-proxy {
+      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+      resize: none;
+    }
+    /* single active cell (crisp/#645 follow-up -- this had no styling of its
+       own at all before, a gap against Golden Rule 0: RecordsTable's own
+       measured value, .crisp-recordstable-td[data-selected], brought
+       across unchanged now that a visible anchor actually matters for the
+       Shift+Click range below). */
+    & td[data-selected] { outline: 2px solid ${c.bgBrandSolid}; outline-offset: -2px; border-radius: ${c.radius.sm}; z-index: 3; }
+    /* crisp/#645, G-101: a Shift+Click range -- reuses the row-selection
+       tint formula already used twice below (tbody tr[data-selected] td)
+       for the same reason a selected group of rows gets one: a selected
+       GROUP of cells is the same kind of state, just cell-scoped instead of
+       row-scoped. Not independently re-measured against Attio's own range
+       highlight (out of scope this slice -- flagged on crisp#645). */
+    & td[data-in-range] { background: color-mix(in srgb, ${c.bgBrandSolid} 10%, ${c.bgSurface}); }
     /* The header cell has no padding of its own -- the button owns the
        full cell so the whole header is clickable (its own inset is 12px).
        Mirrors the summary-row fix.
@@ -177,11 +201,44 @@ const config = defineRecipe({
     & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
     & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: ${c.bgBrandSolid}; opacity: 0; transition: opacity .12s; }
     & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
+    /* crisp/#731 -- column drag-to-reorder. Measured live against Attio's
+       own grid (the issue's own comment): the dragged header keeps full
+       opacity and the plain \`pointer\` cursor throughout (Attio draws no
+       ghost and no "grabbing" cursor of its own), so this adds nothing to
+       \`[data-dragging]\` itself -- the ONLY new paint is the drop-indicator
+       line, a 3px bar in the same measured brand blue the resize handle's
+       own hover state (above) already uses, positioned on whichever edge of
+       the hovered header the pointer is closer to. */
+    & th[data-dragging] { cursor: pointer; }
+    & th[data-drop-before]::before, & th[data-drop-after]::after {
+      content: ""; position: absolute; top: 0; width: 3px; height: 100%;
+      background: ${c.bgBrandSolid}; z-index: 6; pointer-events: none;
+    }
+    & th[data-drop-before]::before { inset-inline-start: -1.5px; }
+    & th[data-drop-after]::after { inset-inline-end: -1.5px; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: ${c.space["1.5"]}; min-width: 0; color: ${c.fgPrimary}; font-weight: ${c.weight.medium}; }
-    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    & .crisp-datatable-entity:hover .crisp-datatable-entity-name { text-decoration: underline; }
+    /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text,
+       plain hover vs rest) that Attio's underline is unconditional, not a
+       hover reveal -- identical at rest and on hover: text-decoration-color
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
+       colour. The previous :hover-gated, full-contrast rule here was itself
+       unmeasured and wrong in two ways at once. */
+    & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, ${c.fgPrimary} 9%, transparent); }
     & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
+       column, revealed on ROW hover (the issue's own title says "row
+       hover", and a live check confirmed hovering well past the name --
+       not just the icons' own hit target -- still reveals them) or
+       keyboard focus. Measured live: border-radius 6px, icon colour
+       rgba(0,0,0,0.55) at rest, darkening to the full text colour with a
+       rgba(0,0,0,0.04) background on the icon's OWN hover -- both
+       expressed as color-mix against fgPrimary so they stay correct in
+       dark mode instead of a literal black that would invert. */
+    & .crisp-datatable-entity-actions { display: flex; align-items: center; gap: ${c.space["1.5"]}; margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
+    & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
     & .crisp-datatable-avatar { width: ${c.size.icon}; height: ${c.size.icon}; border-radius: ${c.radius.sm}; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: ${c.weight.semibold}; text-transform: uppercase; color: ${c.fgOnBrand}; background: ${c.bgBrandSolid}; }
     & .crisp-datatable-avatar[data-tone="success"] { background: ${c.bgSuccess}; } & .crisp-datatable-avatar[data-tone="warning"] { background: ${c.bgWarning}; } & .crisp-datatable-avatar[data-tone="danger"] { background: ${c.bgDanger}; } & .crisp-datatable-avatar[data-tone="purple"] { background: ${c.bgPurple}; } & .crisp-datatable-avatar[data-tone="cyan"] { background: ${c.bgCyan}; } & .crisp-datatable-avatar[data-tone="orange"] { background: ${c.bgOrange}; }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@@ -213,7 +270,8 @@ const config = defineRecipe({
     & .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: ${c.fgMuted}; cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
-    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }`,
+    & tbody tr[data-drop-target] td, & tbody tr[data-drop-target] th { box-shadow: inset 0 2px 0 0 ${c.bgBrandSolid}; transition: box-shadow .12s; }
+    ${rtlFlipCss}`,
     variants: {},
     defaultVariants: {},
     compoundVariants: [],

package/dist/esm/components/dialog/dialog.js

@@ -25,10 +25,74 @@ function useDialogInstanceId() {
 export function Dialog({ open, onOpenChange, title, icon, width = 640, variant = "panel", description, "aria-label": ariaLabel, closeLabel: closeLabelProp, children, className, style, "aria-describedby": describedBy, ...rest }) {
     const closeLabel = useCrispMessage(closeLabelProp, "Close");
     const id = useDialogInstanceId();
+    const isAlert = variant === "alert";
     const service = useMachine(dialog.machine, {
         id,
         open,
-        role: variant === "alert" ? "alertdialog" : "dialog",
+        role: isAlert ? "alertdialog" : "dialog",
+        // #704: a stacked (second) Dialog can get marked `aria-hidden="true"`
+        // on its own outer wrapper a frame after it opens. Traced into
+        // `@zag-js/dialog`'s `hideContentBelow` effect and `@zag-js/aria-hidden`'s
+        // own source: a modal Dialog's `hideContentBelow` calls
+        // `hideOthers([itself])` (deferred one `requestAnimationFrame`), which
+        // walks `document.body`'s children and `aria-hidden`s every one that
+        // ISN'T an ancestor of its own content. Each open `Dialog` schedules
+        // this independently, with no shared registry of who else is open —
+        // when the effect re-runs for the FIRST (panel) Dialog (Zag re-runs an
+        // effect whenever any prop it reads is considered changed, which a
+        // parent re-render can trigger even when the boolean VALUE didn't),
+        // its walk runs again with the SECOND (alert) Dialog now mounted as a
+        // sibling body child it has never seen before, and marks that whole
+        // sibling subtree — including the alert's own wrapper, the thing
+        // actually on top and interactive — as hidden. A real upstream
+        // limitation (no per-instance awareness of other open Dialogs), not
+        // something crisp can fix by calling the library differently.
+        //
+        // `hideContentBelow` is gated purely on `modal` (no separate flag), so
+        // `modal: false` for the alert variant skips it — `trapFocus`/
+        // `preventScroll` are passed explicitly right below so they stay on
+        // regardless (their own defaults are ALSO `= modal`, so leaving them
+        // out here would silently turn them off too).
+        //
+        // A DOM-level fix was tried first — correcting the wrongly-set
+        // attribute after the fact instead of touching `modal` at all, so
+        // every other zag-managed behavior would stay untouched by
+        // construction. It broke `formdialog.test.tsx`'s own
+        // "the confirm's own Cancel keeps the dirtied form open" test (a real
+        // regression, reproduced with the correction reduced to literally one
+        // `removeAttribute` call, and reproduced again unmodified on the prior
+        // WIP commit — that version was never actually run against the full
+        // suite): `waitFor(() => expect(queryByRole("alertdialog")).toBeNull())`
+        // hung for the full test timeout rather than the confirm's real,
+        // sub-100ms unmount, in a way that traces to `aria-hidden` specifically
+        // (swapping the correction for a harmless, differently-named attribute
+        // did not reproduce it) — a fragile interaction this DOM-mutation
+        // approach could not be made to reliably avoid.
+        //
+        // `modal: false` also turns off `@zag-js/dismissable`'s own
+        // `pointerBlocking` for the alert. Verified live (a real
+        // headed-then-headless Chromium session against a built `FormDialog`,
+        // not just reasoning from the source) that this does NOT regress
+        // outside-click safety in practice — but for a DIFFERENT reason than
+        // `pointerBlocking` itself: the thing actually keeping a background
+        // click from reaching anything is `@zag-js/remove-scroll`'s
+        // `preventBodyScroll`, gated on `preventScroll` (kept `true` above,
+        // independent of `modal`) — it sets `pointer-events: none` directly on
+        // `<body>` while any modal-ish Dialog is open, and `getContentProps()`
+        // re-enables `pointer-events: auto` only on each Dialog's OWN content
+        // element. Confirmed live: the alert's content had an explicit
+        // `pointer-events: auto`; its OWN backdrop/positioner did not, and
+        // inherited body's `none`; clicking anywhere in that dead zone (the
+        // alert's backdrop, or the panel's, now both non-interactive) dismissed
+        // neither dialog, because the click lands on nothing that listens for
+        // it — a stronger guarantee than "click closes the wrong layer", not
+        // just an absence of that one failure mode. `pointerBlocking` is a
+        // second, redundant layer over the same problem `preventScroll` already
+        // solves here; the alert's own `closeOnInteractOutside` is already
+        // `false` for any `alertdialog` role regardless of `modal`.
+        modal: !isAlert,
+        trapFocus: true,
+        preventScroll: true,
         onOpenChange(details) {
             onOpenChange(details.open);
         },

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

@@ -31,6 +31,19 @@ import { contract as c, elevation as e } from "../../tokens/index.js";
 // content width: a floor sized for the text set overshoots the other two.
 // Dropped to `min-width: 0` so every op set sizes to its own content, the
 // same as any other menu here without an explicit floor.
+//
+// `.menu-item` also picked up `text-decoration: none` for #595's Import/
+// Export menu — Attio's own "Import CSV" and "Learn about imports and
+// exports" rows are real `<a>` tags (the middle two, pure JS actions, are
+// plain `<div role="menuitem">`), and an anchor needs the underline reset
+// every button-based `.menu-item` never needed. No-op for every existing
+// button consumer of this class. Same menu's 2 dividers use `.menu-sep` on
+// a real `<hr>` (implicit `role="separator"`, no extra ARIA plumbing needed)
+// rather than a `<div role="separator">` — biome's a11y rules want a
+// separator either genuinely interactive (`tabIndex`, `aria-valuenow`, a
+// resizable-splitter kind of thing this isn't) or the semantic element
+// instead; `.menu-sep` picked up `border: none` for it, a no-op for the
+// existing plain-`<div>` consumers of this class.
 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}; }
@@ -69,7 +82,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}; line-height: 20px; font-weight: ${c.weight.medium}; 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; text-decoration: none; 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; }
@@ -77,7 +90,29 @@ export const toolbarChromeBody = (p) => `    & .${CLASS_PREFIX}${p}-menu-head {
     & .${CLASS_PREFIX}${p}-menu-item[data-on] svg { color: ${c.bgBrandSolid}; }
     & .${CLASS_PREFIX}${p}-menu-item .${CLASS_PREFIX}${p}-menu-check { margin-left: auto; }
     & .${CLASS_PREFIX}${p}-menu-input { height: ${c.size.row}; margin: ${c.space["0.5"]}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.md}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; background: ${c.bgSurface}; font-family: inherit; font-size: ${c.text.lg}; color: ${c.fgPrimary}; outline: none; }
-    & .${CLASS_PREFIX}${p}-menu-sep { height: 1px; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
+    & .${CLASS_PREFIX}${p}-menu-sep { height: 1px; border: none; background: ${c.borderSubtle}; margin: ${c.space["0.5"]} 0; }
+    /* #592: the Filter field picker's nested-scope header (back control +
+       search, once drilled into a nestedColumns column) and a search
+       result's own breadcrumb row ("Team › Twitter follower count",
+       surfaced by the SAME query matching a nested column). menu-back
+       reuses the established 28px icon-only control pattern this file
+       already uses twice (sort-remove, the kebab segment) rather than
+       an independent measurement of Attio's own back arrow. The breadcrumb
+       colours ARE measured live: the parent segment muted at the same
+       exact color-mix 63% sort-learn above already uses, the
+       separator chevron and leaf segment both full fgPrimary (the
+       generic menu-item svg rule below defaults every icon to
+       fgMuted, so the separator needs its own override to read
+       correctly here). */
+    & .${CLASS_PREFIX}${p}-menu-nesthead { display: flex; align-items: center; gap: ${c.space["1"]}; margin: ${c.space["0.5"]}; }
+    & .${CLASS_PREFIX}${p}-menu-nesthead .${CLASS_PREFIX}${p}-menu-input { flex: 1; margin: 0; }
+    & .${CLASS_PREFIX}${p}-menu-back { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: ${c.radius.md}; background: none; color: ${c.fgMuted}; cursor: pointer; }
+    & .${CLASS_PREFIX}${p}-menu-back:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-menu-item--expand { justify-content: space-between; }
+    & .${CLASS_PREFIX}${p}-menu-item-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; overflow: hidden; }
+    & .${CLASS_PREFIX}${p}-menu-item-path-parent { flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100px; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    & .${CLASS_PREFIX}${p}-menu-item-path-sep { flex-shrink: 0; color: ${c.fgPrimary}; }
+    & .${CLASS_PREFIX}${p}-menu-item-path > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .${CLASS_PREFIX}${p}-menu--up { top: auto; bottom: calc(100% + ${c.space["1"]}); transform-origin: bottom; }
     & .${CLASS_PREFIX}${p}-menu--right { left: auto; right: 0; }
     & .${CLASS_PREFIX}${p}-menu--fixed { position: fixed; top: auto; left: auto; z-index: 40; }

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

@@ -1,11 +1,19 @@
 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, Trash2, X, } from "lucide-react";
+import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide, Check, ChevronDown, ChevronLeft, ChevronRight, CircleHelp, Download, GripVertical, ListFilter, MoreVertical, Plus, SlidersHorizontal, Trash2, Upload, X, } from "lucide-react";
 import * as React from "react";
 import { isInsideLaterFloatingLayer, useCrispMessage, useCrispMessages, useFocusAfterRemoval, } from "../../core/index.js";
 import { DatePicker, } from "../datepicker/index.js";
 import { MenuCheckboxItem, useMenuKeyboard } from "../menu/index.js";
 import { Select } from "../select/index.js";
 import { tabletoolbarRecipe } from "./tabletoolbar.recipe.js";
+// #592: shared by every direction-bearing ChevronRight usage below (the
+// field picker's own disclosure chevron, a flattened search result's
+// breadcrumb separator, and a filter chip's own breadcrumb separator) so
+// the RTL mirror attribute lives in exactly one JSX tag — build/spec-check
+// .mjs's icon sweep counts that attribute per icon NAME across the whole
+// file, not per call site, and three independently attributed tags for
+// the same name over-counts against that (it expects one per name).
+const RtlChevronRight = ({ size, className, }) => (_jsx(ChevronRight, { "data-rtl-flip": "", size: size, strokeWidth: 1.75, className: className }));
 const OP_LABELS = {
     contains: "contains",
     doesnotcontain: "does not contain",
@@ -66,18 +74,53 @@ const DATE_OP_ORDER = [
     "empty",
     "notempty",
 ];
+// #715: a closed-vocabulary column (GRC Audit's Action/Entity, e.g.) gets
+// its own shorter set too — the text set's `contains`/`starts with`/… mean
+// nothing against a fixed value list. Reuses the already-measured `is`/
+// `is not`/`empty`/`not empty` labels and the same "is/isnot before the
+// type-specific pair, empty/notempty last" ordering every other set here
+// follows — not an independent pixel measurement the way #593's number/date
+// sets were (a live re-check of Attio's own select-column filter menu is
+// still open, see the PR).
+const SELECT_OP_ORDER = ["is", "isnot", "empty", "notempty"];
 // "isanyof" is appended only for a column that supplies `values` — there is
 // nothing to check off otherwise. A column's `type` picks the base set
-// first; "isanyof" can still follow any of the three (a column's own
-// declared values aren't tied to its underlying number/date/text kind).
+// first; "isanyof" can still follow any of the four (a column's own
+// declared values aren't tied to its underlying number/date/text/select
+// kind).
 const opsFor = (col) => {
     const base = col?.type === "number"
         ? NUMBER_OP_ORDER
         : col?.type === "date"
             ? DATE_OP_ORDER
-            : OP_ORDER;
+            : col?.type === "select"
+                ? SELECT_OP_ORDER
+                : OP_ORDER;
     return col?.values?.length ? [...base, "isanyof"] : base;
 };
+// #592: a condition's `key` is either a plain top-level column key, or a
+// dot-joined path into `nestedColumns` ("team.twitterFollowerCount"). Walks
+// the path one segment at a time, descending into each match's own
+// `nestedColumns` for the next — returns the resolved column at each step,
+// in order, so a caller has both the LEAF (its own `type`/`values`/`icon`
+// govern the operator set and value editor, unchanged from a plain column)
+// and the FULL PATH (for the breadcrumb the field segment/picker render).
+// Empty when any segment fails to resolve, rather than a partial path — a
+// stale key (its column was removed upstream) should render as "unknown",
+// not as whatever prefix still happens to match.
+const resolveColumnPath = (cols, key) => {
+    const segments = key.split(".");
+    const path = [];
+    let list = cols;
+    for (const seg of segments) {
+        const found = list.find((c) => c.key === seg);
+        if (!found)
+            return [];
+        path.push(found);
+        list = found.nestedColumns ?? [];
+    }
+    return path;
+};
 const opNeedsValue = (op) => op === "contains" ||
     op === "doesnotcontain" ||
     op === "startswith" ||
@@ -256,7 +299,7 @@ export function applySorts(rows, sorts, get = (row, key) => row[key]) {
  * this (Sort: Due date/Assignee/Creation date; Filter: Assignee/Record/
  * Created by), which one shared list can't reproduce.
  */
-export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, ...rest }) {
+export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColumns: filterColumnsProp, sorts: sortsProp, defaultSorts, onSortsChange, filters: filtersProp, defaultFilters, onFiltersChange, count, children, helpHref, className, sortLabel: sortLabelProp, filterLabel: filterLabelProp, reorderSortLabel: reorderSortLabelProp, noSortsLabel: noSortsLabelProp, addSortLabel: addSortLabelProp, learnSortingLabel: learnSortingLabelProp, selectConditionLabel: selectConditionLabelProp, sortFieldLabel: sortFieldLabelProp, sortDirectionLabel: sortDirectionLabelProp, removeSortLabel: removeSortLabelProp, filterFieldLabel: filterFieldLabelProp, filterFieldPlaceholder: filterFieldPlaceholderProp, filterValuePlaceholder: filterValuePlaceholderProp, filterOptionsLabel: filterOptionsLabelProp, deleteFilterLabel: deleteFilterLabelProp, ascendingLabel: ascendingLabelProp, descendingLabel: descendingLabelProp, sortTriggerLabel, filterTriggerLabel, inline, showSort = true, showViewSettings = true, viewColumns: viewColumnsProp, shownKeys: shownKeysProp, defaultShownKeys, onShownKeysChange, viewSettingsLabel: viewSettingsLabelProp, reorderAttributeLabel: reorderAttributeLabelProp, hideAttributeLabel, addAttributeToViewLabel: addAttributeToViewLabelProp, searchAttributesPlaceholder: searchAttributesPlaceholderProp, importExportLabel: importExportLabelProp, onImportCsv, onExportCsv, onExportExcel, importExportHelpHref, importCsvLabel: importCsvLabelProp, exportCsvLabel: exportCsvLabelProp, exportExcelLabel: exportExcelLabelProp, learnImportExportLabel: learnImportExportLabelProp, backLabel: backLabelProp, nestedFieldPlaceholder, ...rest }) {
     // crisp/#471: an explicit prop always wins; missing, it reads the nearest
     // CrispMessagesProvider's translation of the English default below, or
     // that default itself with no provider — unchanged from before this
@@ -283,6 +326,12 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const reorderAttributeLabel = useCrispMessage(reorderAttributeLabelProp, "Reorder attribute");
     const addAttributeToViewLabel = useCrispMessage(addAttributeToViewLabelProp, "Add attribute to view");
     const searchAttributesPlaceholder = useCrispMessage(searchAttributesPlaceholderProp, "Search attributes…");
+    const importExportLabel = useCrispMessage(importExportLabelProp, "Import / Export");
+    const importCsvLabel = useCrispMessage(importCsvLabelProp, "Import CSV");
+    const exportCsvLabel = useCrispMessage(exportCsvLabelProp, "Export view as CSV");
+    const exportExcelLabel = useCrispMessage(exportExcelLabelProp, "Export view as Excel");
+    const learnImportExportLabel = useCrispMessage(learnImportExportLabelProp, "Learn about imports and exports");
+    const backLabel = useCrispMessage(backLabelProp, "Back");
     // OP_LABELS' own words ("contains", "is", "is any of", …) have no prop of
     // their own — a whole lookup table, not one string — so they translate
     // straight from the provider's dictionary at the two spots they render
@@ -323,6 +372,11 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
     const [openMenu, setOpenMenu] = React.useState(null);
     const [dragSort, setDragSort] = React.useState(null);
     const [filterQuery, setFilterQuery] = React.useState("");
+    // #592: which nested scope the Filter field picker is currently drilled
+    // into -- [] is the top level, [team] is inside Team's own attributes,
+    // [team, company] is Team -> Company, etc. Reset to [] wherever
+    // `filterQuery` already resets (opening the picker fresh), same lifetime.
+    const [fieldPickerPath, setFieldPickerPath] = React.useState([]);
     // filters the "isanyof" checkbox list, same lifetime as filterQuery above
     const [anyOfQuery, setAnyOfQuery] = React.useState("");
     const [dragAttr, setDragAttr] = React.useState(null);
@@ -460,14 +514,57 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
         close: () => setOpenMenu(null),
         contentRef: opMenuRef,
     });
+    // The Import/Export menu is `role="menu"` too — confirmed live, 2026-09-25
+    // (an `<a>`/`<div>` mix, each `role="menuitem"`, two `role="separator"`
+    // dividers between the 3 groups) — same shared keyboard model.
+    const importExportMenuRef = React.useRef(null);
+    const { onKeyDown: onImportExportKeyDown } = useMenuKeyboard({
+        open: openMenu === "importexport",
+        close: () => setOpenMenu(null),
+        contentRef: importExportMenuRef,
+    });
     // Shared between the "Filter" trigger's own add-condition picker and each
     // chip's field segment (#462 follow-up) — both search the same
-    // `filterColumns` list and differ only in what a pick does.
-    const filterFieldPicker = (onSelect) => (_jsxs(_Fragment, { children: [_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
-                // biome-ignore lint/a11y/noAutofocus: focus the picker on open
-                autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) }), filterColumns
-                .filter((col) => col.label.toLowerCase().includes(filterQuery.trim().toLowerCase()))
-                .map((col) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => onSelect(col.key), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key)))] }));
+    // `filterColumns` list and differ only in what a pick does. #592: also
+    // handles drilling into a `nestedColumns` column — `fieldPickerPath`
+    // tracks the current scope ([] is the top level), reset to [] wherever
+    // the picker opens fresh (both trigger onClicks, above).
+    const filterFieldPicker = (onSelect) => {
+        const scope = fieldPickerPath.at(-1);
+        const scopeColumns = scope ? (scope.nestedColumns ?? []) : filterColumns;
+        const query = filterQuery.trim().toLowerCase();
+        const direct = scopeColumns.filter((c) => c.label.toLowerCase().includes(query));
+        // #592: one level of flattening from wherever the picker is currently
+        // scoped — a nested column's own children get searched too, and a
+        // match renders breadcrumbed, alongside this level's direct matches.
+        // Matches the one case measured live at the TOP level ("Twitter
+        // follower" surfaces both the direct field and "Team › Twitter
+        // follower count"); applying the identical rule recursively from an
+        // already-drilled-into scope (so it also reaches Team → Company → X
+        // while already browsing inside Team) is the same construct, one level
+        // relative to wherever you are, but wasn't independently re-verified
+        // live from inside a nested scope — flagged on the PR.
+        const nested = query
+            ? scopeColumns.flatMap((c) => (c.nestedColumns ?? [])
+                .filter((n) => n.label.toLowerCase().includes(query))
+                .map((n) => ({ parent: c, col: n })))
+            : [];
+        const selectPath = (path) => onSelect(path.map((c) => c.key).join("."));
+        const drillIn = (col) => {
+            setFieldPickerPath([...fieldPickerPath, col]);
+            setFilterQuery("");
+        };
+        return (_jsxs(_Fragment, { children: [scope ? (_jsxs("div", { className: "crisp-tabletoolbar-menu-nesthead", children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-menu-back", "aria-label": backLabel, onClick: () => {
+                                setFieldPickerPath(fieldPickerPath.slice(0, -1));
+                                setFilterQuery("");
+                            }, children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 15, strokeWidth: 1.75 }) }), _jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: nestedFieldPlaceholder
+                                ? nestedFieldPlaceholder(scope.nestedObjectLabel ?? scope.label.toLowerCase())
+                                : `Search ${scope.nestedObjectLabel ?? scope.label.toLowerCase()} attributes…`, "aria-label": filterFieldLabel, 
+                            // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                            autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })] })) : (_jsx("input", { className: "crisp-tabletoolbar-menu-input", placeholder: filterFieldPlaceholder, "aria-label": filterFieldLabel, 
+                    // biome-ignore lint/a11y/noAutofocus: focus the picker on open
+                    autoFocus: true, value: filterQuery, onChange: (e) => setFilterQuery(e.target.value) })), scope && (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath(fieldPickerPath), children: [scope.icon ? (_jsx(scope.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), scope.label] })), direct.map((col) => col.nestedColumns?.length ? (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item crisp-tabletoolbar-menu-item--expand", onClick: () => drillIn(col), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label, _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-chevron" })] }, col.key)) : (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), col.label] }, col.key))), nested.map(({ parent, col }) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", onClick: () => selectPath([...fieldPickerPath, parent, col]), children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : (_jsx("span", { style: { width: 15 } })), _jsxs("span", { className: "crisp-tabletoolbar-menu-item-path", children: [_jsx("span", { className: "crisp-tabletoolbar-menu-item-path-parent", children: parent.label }), _jsx(RtlChevronRight, { size: 15, className: "crisp-tabletoolbar-menu-item-path-sep" }), _jsx("span", { children: col.label })] })] }, `${parent.key}.${col.key}`)))] }));
+    };
     const activeFilters = filters.length;
     // The default phrase only works in English word order, so a caller can
     // replace the whole thing rather than fill a template — crisp/#471's
@@ -504,12 +601,21 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                     label: (_jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel", children: [_jsx(ArrowDownWideNarrow, { size: 15, strokeWidth: 1.75 }), descendingLabel] })),
                                                     keywords: descendingLabel,
                                                 },
-                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => setOpenMenu(openMenu === "filter" ? null : "filter"), "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
+                                            ], "aria-label": sortDirectionLabel }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => removeSort(i), "aria-label": removeSortLabel, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, s.key)))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { ref: addSortRef, type: "button", className: "crisp-tabletoolbar-sort-add", onClick: addSort, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addSortLabel] }) }), helpHref && (_jsx("div", { className: "crisp-tabletoolbar-sort-foot", children: _jsxs("a", { className: "crisp-tabletoolbar-sort-learn", href: helpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 14, strokeWidth: 1.75 }), learnSortingLabel] }) }))] }))] })), showSort && (_jsx("span", { className: "crisp-tabletoolbar-divider", "aria-hidden": "true" })), _jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: `crisp-tabletoolbar-tool crisp-tabletoolbar-tool--ghost${activeFilters ? " crisp-tabletoolbar-tool--active" : ""}`, onClick: () => {
+                                setFieldPickerPath([]);
+                                setOpenMenu(openMenu === "filter" ? null : "filter");
+                            }, "aria-haspopup": "dialog", "aria-expanded": openMenu === "filter", "data-menu-trigger": true, children: [_jsx(ListFilter, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), filterTriggerLabel
                                     ? filterTriggerLabel(activeFilters)
                                     : activeFilters
                                         ? `${filterLabel} · ${activeFilters}`
                                         : filterLabel] }), openMenu === "filter" && (_jsx("div", { className: "crisp-tabletoolbar-menu", role: "dialog", "aria-label": filterFieldLabel, children: filterFieldPicker(addFilter) }))] }), filters.map((cond) => {
-                    const col = filterColumns.find((c) => c.key === cond.key);
+                    // #592: cond.key may be a dot-joined nested path
+                    // ("team.twitterFollowerCount") — resolve the full path so the
+                    // field segment can render its breadcrumb; `col` (the leaf) still
+                    // drives the operator set and value editor exactly as before, for
+                    // both a plain and a nested key.
+                    const colPath = resolveColumnPath(filterColumns, cond.key);
+                    const col = colPath.at(-1);
                     const fieldOpen = openMenu === `ffield:${cond.id}`;
                     const opOpen = openMenu === `fop:${cond.id}`;
                     const valOpen = openMenu === `fval:${cond.id}`;
@@ -525,7 +631,10 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                     // which never renders a third box in either case.
                     const showValueSeg = cond.op != null &&
                         (opNeedsValue(cond.op) || opNeedsValues(cond.op));
-                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fcond", "data-complete": complete ? "" : undefined, children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--field", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": fieldOpen, onClick: () => setOpenMenu(fieldOpen ? null : `ffield:${cond.id}`), children: [col?.icon ? _jsx(col.icon, { size: 14, strokeWidth: 1.75 }) : null, col?.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op
+                    return (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("span", { className: "crisp-tabletoolbar-fcond", "data-complete": complete ? "" : undefined, children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--field", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": fieldOpen, onClick: () => {
+                                            setFieldPickerPath([]);
+                                            setOpenMenu(fieldOpen ? null : `ffield:${cond.id}`);
+                                        }, children: [col?.icon ? _jsx(col.icon, { size: 14, strokeWidth: 1.75 }) : null, colPath.length > 1 ? (_jsx("span", { className: "crisp-tabletoolbar-fcond-path", children: colPath.map((c, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx(RtlChevronRight, { size: 14, className: "crisp-tabletoolbar-fcond-path-sep" })), _jsx("span", { className: "crisp-tabletoolbar-fcond-path-seg", children: c.label })] }, c.key))) })) : (col?.label)] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--op", "data-menu-trigger": true, "aria-haspopup": "menu", "aria-expanded": opOpen, onClick: () => setOpenMenu(opOpen ? null : `fop:${cond.id}`), children: cond.op
                                             ? (crispMessages[OP_LABELS[cond.op]] ?? OP_LABELS[cond.op])
                                             : selectConditionLabel }), showValueSeg && (_jsx("button", { type: "button", className: "crisp-tabletoolbar-fcond-seg crisp-tabletoolbar-fcond-seg--val", "data-menu-trigger": true, "aria-haspopup": "dialog", "aria-expanded": valOpen, onClick: () => setOpenMenu(valOpen ? null : `fval:${cond.id}`), children: cond.op === "isanyof"
                                             ? cond.values?.length
@@ -555,7 +664,18 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                         values: col.values?.filter((x) => set.has(x)),
                                                     });
                                                 }, children: v }, v));
-                                        })] })) : col?.type === "date" ? (_jsxs("div", { className: "crisp-tabletoolbar-datepop", children: [_jsx(DatePicker, { ...{
+                                        })] })) : col?.type === "select" &&
+                                    col?.values &&
+                                    (cond.op === "is" || cond.op === "isnot") ? (_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
+                                            autoFocus: true, value: anyOfQuery, onChange: (e) => setAnyOfQuery(e.target.value) }), col.values
+                                            .filter((v) => v
+                                            .toLowerCase()
+                                            .includes(anyOfQuery.trim().toLowerCase()))
+                                            .map((v) => (_jsxs("button", { type: "button", className: "crisp-tabletoolbar-menu-item", "data-on": cond.value === v ? "" : undefined, onClick: () => {
+                                                patchFilter(cond.id, { value: v });
+                                                setOpenMenu(null);
+                                            }, children: [v, cond.value === v ? (_jsx(Check, { className: "crisp-tabletoolbar-menu-check", size: 15, strokeWidth: 1.75 })) : null] }, v)))] })) : col?.type === "date" ? (_jsxs("div", { className: "crisp-tabletoolbar-datepop", children: [_jsx(DatePicker, { ...{
                                                 selectionMode: "single",
                                                 value: isoToDate(cond.value)
                                                     ? toDatePickerDate(isoToDate(cond.value))
@@ -604,7 +724,20 @@ export function TableToolbar({ columns, sortColumns: sortColumnsProp, filterColu
                                                 moveAttr(dragAttr, i);
                                             setDragAttr(null);
                                         }, children: [_jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-grip", "aria-label": reorderAttributeLabel, draggable: true, onDragStart: () => setDragAttr(i), onDragEnd: () => setDragAttr(null), children: _jsx(GripVertical, { size: 15, strokeWidth: 1.75 }) }), _jsxs("span", { className: "crisp-tabletoolbar-sort-optlabel crisp-tabletoolbar-sort-field", children: [col.icon ? (_jsx(col.icon, { size: 15, strokeWidth: 1.75 })) : null, col.label] }), _jsx("button", { type: "button", className: "crisp-tabletoolbar-sort-remove", onClick: () => hideAttr(col.key), "aria-label": hideAttributeLabel?.(col.label) ??
-                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
+                                                    `${crispMessages.Hide ?? "Hide"} ${col.label} ${crispMessages["from view"] ?? "from view"}`, children: _jsx(X, { size: 15, strokeWidth: 1.75 }) })] }, col.key))), _jsx("div", { className: "crisp-tabletoolbar-sort-addrow", children: _jsxs("button", { type: "button", className: "crisp-tabletoolbar-sort-add", onClick: () => setAddingAttribute(true), children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), addAttributeToViewLabel] }) })] })))] })), (onImportCsv ||
+                    onExportCsv ||
+                    onExportExcel ||
+                    importExportHelpHref) && (_jsxs("span", { className: "crisp-tabletoolbar-toolgroup", children: [_jsxs("button", { type: "button", className: "crisp-tabletoolbar-tool crisp-tabletoolbar-tool--raised", onClick: () => setOpenMenu(openMenu === "importexport" ? null : "importexport"), "aria-haspopup": "menu", "aria-expanded": openMenu === "importexport", "data-menu-trigger": true, children: [_jsx(Upload, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }), importExportLabel, _jsx(ChevronDown, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" })] }), openMenu === "importexport" && (_jsxs("div", { ref: importExportMenuRef, className: "crisp-tabletoolbar-menu", role: "menu", "aria-label": importExportLabel, onKeyDown: onImportExportKeyDown, children: [onImportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onImportCsv();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), importCsvLabel] })), onImportCsv && (onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), onExportCsv && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onExportCsv();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportCsvLabel] })), onExportExcel && (_jsxs("button", { type: "button", role: "menuitem", className: "crisp-tabletoolbar-menu-item", onClick: () => {
+                                        onExportExcel();
+                                        setOpenMenu(null);
+                                    }, children: [_jsx(Download, { size: 15, strokeWidth: 1.75 }), exportExcelLabel] })), importExportHelpHref &&
+                                    (onImportCsv || onExportCsv || onExportExcel) && (_jsx("hr", { className: "crisp-tabletoolbar-menu-sep" })), importExportHelpHref && (_jsxs("a", { className: "crisp-tabletoolbar-menu-item", role: "menuitem", href: importExportHelpHref, target: "_blank", rel: "noreferrer", children: [_jsx(CircleHelp, { size: 15, strokeWidth: 1.75 }), learnImportExportLabel] }))] }))] })), _jsx("span", { className: "crisp-tabletoolbar-spacer" }), count != null && (_jsx("span", { className: "crisp-tabletoolbar-count", children: count })), children] }) }));
 }
 /**
  * The Sort/Filter chip's own chrome (`.crisp-tabletoolbar-tool`), standalone

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

@@ -1,5 +1,5 @@
-import { defineRecipe, resolveRecipe } from "../../core/index.js";
-import { contract as c } from "../../tokens/index.js";
+import { defineRecipe, resolveRecipe, rtlFlipCss } from "../../core/index.js";
+import { contract as c, elevation as e } from "../../tokens/index.js";
 import { toolbarChromeBody, toolbarChromeHead } from "./tabletoolbar.chrome.js";
 // The filter condition chip, TableToolbar-only (crisp/#462 follow-up,
 // re-measured live 2026-09-25). Deliberately NOT added to the shared
@@ -33,8 +33,22 @@ const filterChipChrome = `
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
     & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: ${c.bgSurface}; }
-    & .crisp-tabletoolbar-fcond-seg--field { border-radius: ${c.radius.md} 0 0 ${c.radius.md}; font-weight: ${c.weight.medium}; }
+    & .crisp-tabletoolbar-fcond-seg--field { border-radius: ${c.radius.md} 0 0 ${c.radius.md}; font-weight: ${c.weight.medium}; max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: ${c.fgMuted}; }
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip
+       context only; the picker's own menu rows keep the parent muted, see
+       tabletoolbar.chrome.ts), each independently truncated. Attio's own
+       layout gives the leaf segment priority (it stays fully readable
+       longer, the parent truncates first) via a two-part min-content
+       measurement this reproduces qualitatively with a flex-shrink
+       differential rather than byte-for-byte (the exact px split Attio
+       computes is content-length-dependent, not a fixed value) — not
+       independently re-verified at other path-segment lengths. */
+    & .crisp-tabletoolbar-fcond-path { display: inline-flex; align-items: center; gap: 2px; min-width: 0; max-width: 178px; }
+    & .crisp-tabletoolbar-fcond-path-seg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-seg:first-child { flex: 0 1 auto; }
+    & .crisp-tabletoolbar-fcond-path-sep { flex-shrink: 0; color: inherit; }
     & .crisp-tabletoolbar-fcond-seg--op { background: ${c.bgSurface}; color: ${c.fgMuted}; }
     & .crisp-tabletoolbar-fcond-seg--val { font-weight: ${c.weight.medium}; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-tabletoolbar-fcond-seg--kebab { background: ${c.bgSurface}; justify-content: center; width: 28px; padding: 0; border-radius: 0 ${c.radius.md} ${c.radius.md} 0; color: ${c.fgMuted}; }
@@ -44,6 +58,24 @@ const filterChipChrome = `
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: ${c.space["1"]}; margin-top: ${c.space["2"]}; padding: 0 ${c.space["1"]}; }
     & .crisp-tabletoolbar-datepop-preset { height: ${c.size.chip}; padding: 0 ${c.space["2"]}; border: none; border-radius: ${c.radius.chip}; background: ${c.bgRaised}; color: ${c.fgPrimary}; font-family: inherit; font-size: ${c.text.sm}; cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, ${c.fgPrimary} 8%, transparent); }`;
+// #595: the Import/Export trigger — measured live, `app.attio.com`'s own
+// view bar: `28px` tall, `radius.md` (8px), background `bgSurfaceMuted`
+// (`rgb(246,247,247)`, exact match) and `elevation.field`'s exact 3-layer
+// shadow (`inset 0 0 0 1px transparent, 0 0 2px rgba(28,40,64,.18), 0 1px 3px
+// rgba(0,0,0,.04)`) — a "raised chrome button" distinct from Sort/Filter/View
+// settings' plain ringed `.tool` (no background, no elevation shadow), and
+// the only trigger of the four with a trailing chevron (2 icons total,
+// confirmed live). Overrides `.tool`'s own base background/shadow by cascade
+// order (this block is appended after `toolbarChromeBody`, which defines
+// them), the same way `.tool--ghost` already does. `border`/`font-family`/
+// `cursor` are repeated here too, even though `.tool`'s own base rule (in
+// the shared `tabletoolbar.chrome.ts`) already sets them on every button
+// carrying this modifier — `spec-check.mjs`'s button-reset audit only reads
+// each component's own `<name>.recipe.ts` file verbatim, so a reset living
+// behind `chrome.ts`'s function call is invisible to it; harmless repeats,
+// not a real gap.
+const importExportChrome = `
+    & .crisp-tabletoolbar-tool--raised { border: none; background: ${c.bgSurfaceMuted}; box-shadow: ${e.field}; font-family: inherit; cursor: pointer; }`;
 // The table toolbar, measured: 28px controls, the Sort/Filter buttons and
 // the menus they open, sort-condition rows, and the filter chips. The chrome
 // itself lives in ./tabletoolbar.chrome.ts because RecordsTable renders the
@@ -61,6 +93,8 @@ const config = defineRecipe({
 ${toolbarChromeHead("tabletoolbar")}
 ${toolbarChromeBody("tabletoolbar")}
 ${filterChipChrome}
+${importExportChrome}
+    ${rtlFlipCss}
   `,
 });
 export const tabletoolbarRecipe = resolveRecipe(config);