@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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

@@ -1,6 +1,81 @@
-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
+// `tabletoolbar.chrome.ts` functions: those also render under RecordsTable's
+// own `crisp-recordstable-` prefix, whose still-tested (84 cases) chip
+// predates this re-measurement and keeps its original `.fchip`/`.fchip-main`
+// markup (one combined field+op+value button, plus a small floating kebab)
+// until RecordsTable is rebuilt onto DataTable + TableToolbar and inherits
+// this one instead. New, disjoint class names here so nothing shared changes
+// meaning under the older markup.
+//
+// Measured on Attio's own chip (`app.attio.com/<ws>/companies`, a text-field
+// condition): 4 independently-clickable, edge-to-edge segments, each 28px
+// tall with its own `inset 0 0 0 1px` ring — field (radius 8/0/0/8), operator
+// (flat), value (flat), kebab (radius 0/8/8/0). Background is NOT fixed per
+// segment: the field and value segments (the two that show the condition's
+// own text) read `rgb(246,247,247)` while the condition has no value yet and
+// flip to white the instant it does (typing a value, or picking an operator
+// like "empty" that needs none, both trigger it); the operator and kebab
+// segments (pure controls, no text of the condition's own) stay white
+// throughout. Click targets, confirmed live: the field segment reopens the
+// attribute picker and replaces this condition's field in place (not a
+// second chip); the operator segment opens an operator-only menu (closing it
+// after a pick, then auto-opening the value popover, focused, when that
+// operator needs one — "empty"/"not empty" just close); the value segment
+// opens a value-only popover/input, independent of the operator menu (Attio
+// never combines the two, unlike crisp's older single dialog).
+const filterChipChrome = `
+    & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: ${c.size.row}; font-size: ${c.text.md}; color: ${c.fgPrimary}; white-space: nowrap; }
+    & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; height: 100%; margin: 0; padding: 0 ${c.space["2"]}; border: none; background: ${c.bgSurfaceMuted}; box-shadow: inset 0 0 0 1px ${c.borderDivider}; font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
+    & .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}; 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}; }
+    & .crisp-tabletoolbar-fcond-seg--kebab:hover { color: ${c.fgPrimary}; }
+    & .crisp-tabletoolbar-menu--val { min-width: 134px; }
+    & .crisp-tabletoolbar-datepop { width: 300px; }
+    & .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
@@ -17,6 +92,9 @@ const config = defineRecipe({
     & * { box-sizing: border-box; }
 ${toolbarChromeHead("tabletoolbar")}
 ${toolbarChromeBody("tabletoolbar")}
+${filterChipChrome}
+${importExportChrome}
+    ${rtlFlipCss}
   `,
 });
 export const tabletoolbarRecipe = resolveRecipe(config);

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

@@ -11,7 +11,16 @@ import { contract as c } from "../../tokens/index.js";
 // inactive tabs are muted and fill to a subtle pill on hover. Each tab carries
 // a 16px leading icon and an optional count badge. Measured from the live
 // app: bar `padding: 0 12px 8px`, 28px pills, 4/8 padding, 6px icon-label
-// gap, 14/500 labels, 10px badges (rgba(0,0,0,.04)).
+// gap, 14/500 labels. The count badge (crisp#697, re-measured against a
+// record's tab counts and a settings "Attributes 35" count) is 14px
+// tall/wide-min, radius 4px (no scale token lands there -- a recipe-local
+// literal, same precedent as this file's own icon/gap literals), 10/500/14
+// text on a 4% `fgPrimary` tint (`rgba(0,0,0,.04)`) with a measured
+// `inset 0 0 0 1px borderSubtle` ring, text `fgNeutralSoft` (rgb(80,81,85),
+// the same token Badge's neutral tone uses, #696) -- was 16px/r6/11px/
+// `fgMuted`/6% tint with no ring at all. The selected tab's own badge
+// colour (`fgPrimary`) wasn't measured (the live Overview tab carries no
+// count) and stays as-is.
 //
 // The panel's own `padding-top` (`c.space["8"]`, 32px) is measured
 // separately, live, on a company record page (Overview tab): the gap from
@@ -42,7 +51,7 @@ const config = defineRecipe({
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
     & .crisp-tabs-tab[data-selected] { color: ${c.fgPrimary}; background: ${c.bgSubtle}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
-    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${c.space["1"]}; border-radius: ${c.radius.sm}; background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: ${c.fgMuted}; }
+    & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 ${c.space["1"]}; border-radius: 4px; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: 10px; line-height: 14px; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: ${c.fgPrimary}; }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: ${c.fgPrimary}; border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
     & .crisp-tabs-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: ${c.space["8"]}; }

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

@@ -67,12 +67,24 @@ style: _style, ...rest }, forwardedRef) => {
         if (!el)
             return;
         const r = el.getBoundingClientRect();
-        const below = side === "bottom" || r.top < 48;
-        setPos({
-            left: Math.round(r.left + r.width / 2),
-            top: Math.round(below ? r.bottom + 6 : r.top - 6),
-            below,
-        });
+        const placement = side === "right"
+            ? "right"
+            : side === "bottom" || r.top < 48
+                ? "bottom"
+                : "top";
+        setPos(placement === "right"
+            ? {
+                // Measured (crisp#633): the bubble's left edge sits 8px past
+                // the trigger's right edge, vertically centred on it.
+                left: Math.round(r.right + 8),
+                top: Math.round(r.top + r.height / 2),
+                placement,
+            }
+            : {
+                left: Math.round(r.left + r.width / 2),
+                top: Math.round(placement === "bottom" ? r.bottom + 6 : r.top - 6),
+                placement,
+            });
     }, [open, side]);
     const openAfterDelay = () => {
         clearTimeout(timer.current);
@@ -119,9 +131,11 @@ style: _style, ...rest }, forwardedRef) => {
         createPortal(_jsx("div", { id: tipId, role: "tooltip", className: tooltipRecipe({ variant }), style: {
                 left: pos.left,
                 top: pos.top,
-                transform: pos.below
-                    ? "translate(-50%, 0)"
-                    : "translate(-50%, -100%)",
+                transform: pos.placement === "right"
+                    ? "translate(0, -50%)"
+                    : pos.placement === "bottom"
+                        ? "translate(-50%, 0)"
+                        : "translate(-50%, -100%)",
             }, children: content }), document.body);
     if (asChild) {
         // No wrapper at all: the child carries the hover/focus/Escape

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

@@ -13,14 +13,15 @@ import { contract as c } from "../../tokens/index.js";
 // just the wrong pair.
 //
 // crisp#563: this `boxShadow` is Attio's PLAIN tooltip (a truncated header
-// label, measured on "Twitter follower count") — still an uncorroborated
-// single sample, flagged for its own re-measurement pass, not touched here.
-// Attio has a SECOND, visually similar but structurally different tooltip
-// for a reference-column header (icon + the referenced type's name after
-// the label, crisp#580) with its own measured shadow — an inset ring plus
-// two offset shadows, `variant: "reference"` below. Background, text
-// colour, radius, padding and font are identical between the two measured
-// samples; only the shadow differs.
+// label, measured on "Twitter follower count"). Re-measured live and
+// corroborated against a second sample (hovering the same field a second
+// time) per AUTHORING.md Lesson 22 — the value below is an inset ring plus
+// two offset shadows, not the single offset shadow this recipe carried
+// before. Attio has a SECOND, visually similar but structurally different
+// tooltip for a reference-column header (icon + the referenced type's name
+// after the label, crisp#580) with its own measured shadow, `variant:
+// "reference"` below. Background, text colour, radius, padding and font are
+// identical between the two measured samples; only the shadow differs.
 const spec = defineSpec({
     name: "tooltip",
     base: {
@@ -37,7 +38,7 @@ const spec = defineSpec({
         fontSize: c.text.sm,
         fontWeight: c.weight.medium,
         lineHeight: "1.45",
-        boxShadow: "0 4px 14px -2px rgba(28,40,64,0.28), 0 0 0 1px rgba(255,255,255,0.04)",
+        boxShadow: "rgb(33,34,36) 0 0 0 1px inset, rgba(0,0,0,0.04) 0 0 2px 0, rgba(0,0,0,0.12) 0 1px 3px 0",
         opacity: 1,
         transition: "opacity 0.12s ease",
     },

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

@@ -1,5 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
 import { authshellRecipe } from "./authshell.recipe.js";
+/** A plain `{ icon, title }` object (not a React element) — the shape
+ * `logo` renders as `AuthShell`'s own icon-badge + wordmark layout, as
+ * opposed to a caller-supplied node it just centers as-is. Same test
+ * `sidebar.tsx`'s `isSidebarFooterCopy` already uses for its own "plain
+ * shape vs. any node" prop. */
+function isAuthShellBrand(value) {
+    return (typeof value === "object" &&
+        value !== null &&
+        !isValidElement(value) &&
+        "icon" in value &&
+        "title" in value);
+}
 /**
  * The welcome/auth layout — measured live.
  * A centered page frame: an optional top progress bar, a logo, a two-pane
@@ -13,6 +26,6 @@ export function AuthShell({ progress, logo, title, children, preview, footer, cl
     const pct = hasProgress
         ? Math.round(Math.max(0, Math.min(1, progress)) * 100)
         : 0;
-    return (_jsxs("div", { className: authshellRecipe({ className }), "data-single-pane": preview == null ? "" : undefined, ...rest, children: [hasProgress && (_jsx("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && _jsx("div", { className: "crisp-authshell-logo", children: logo }), _jsxs("div", { className: "crisp-authshell-card", children: [_jsx("div", { className: "crisp-authshell-pane", children: _jsxs("div", { className: "crisp-authshell-body", children: [title != null && (_jsx("div", { className: "crisp-authshell-title", children: title })), _jsx("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && (_jsx("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && _jsx("div", { className: "crisp-authshell-footer", children: footer })] }));
+    return (_jsxs("div", { className: authshellRecipe({ className }), "data-single-pane": preview == null ? "" : undefined, ...rest, children: [hasProgress && (_jsx("div", { className: "crisp-authshell-progress", role: "progressbar", "aria-valuenow": pct, "aria-valuemin": 0, "aria-valuemax": 100, children: _jsx("div", { className: "crisp-authshell-progress-fill", style: { width: `${pct}%` } }) })), logo != null && (_jsx("div", { className: "crisp-authshell-logo", children: isAuthShellBrand(logo) ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "crisp-authshell-logo-badge", children: logo.icon }), _jsxs("div", { className: "crisp-authshell-logo-text", children: [_jsx("div", { className: "crisp-authshell-logo-title", children: logo.title }), logo.subtitle != null && (_jsx("div", { className: "crisp-authshell-logo-subtitle", children: logo.subtitle }))] })] })) : (logo) })), _jsxs("div", { className: "crisp-authshell-card", children: [_jsx("div", { className: "crisp-authshell-pane", children: _jsxs("div", { className: "crisp-authshell-body", children: [title != null && (_jsx("div", { className: "crisp-authshell-title", children: title })), _jsx("div", { className: "crisp-authshell-form", children: children })] }) }), preview != null && (_jsx("div", { className: "crisp-authshell-preview", children: preview }))] }), footer != null && _jsx("div", { className: "crisp-authshell-footer", children: footer })] }));
 }
 AuthShell.displayName = "AuthShell";

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

@@ -20,6 +20,14 @@ import { contract as c } from "../../tokens/index.js";
 // roughly centred in the viewport rather than pinned near the top.
 // `data-single-pane` now drops the card chrome and narrows the body to
 // match; the two-pane card is unchanged.
+//
+// your-moon/crisp#722: `.crisp-authshell-logo` is `min-height: 24px`, not
+// `height` -- Attio's own mark (a single flat 96x24 SVG, measured live on
+// the logged-out `/login` page) fits exactly at 24px, but a fixed height
+// clipped any consumer logo taller than that. Found via internal/grc's real
+// lockup (an icon badge beside a two-line TECH/tagline wordmark, ~36px
+// tall), silently cut down to a bare one-line span rather than reported as
+// not fitting.
 const config = defineRecipe({
     name: "authshell",
     base: `min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; position: relative;
@@ -31,7 +39,11 @@ const config = defineRecipe({
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: ${c.borderDefault}; }
     & .crisp-authshell-progress-fill { height: 2px; background: ${c.fgPrimary}; border-radius: 4px; transition: width .2s; }
 
-    & .crisp-authshell-logo { margin-top: ${c.space["8"]}; height: 24px; display: flex; align-items: center; }
+    & .crisp-authshell-logo { margin-top: ${c.space["8"]}; min-height: 24px; display: flex; align-items: center; gap: ${c.space["2.5"]}; }
+    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: ${c.radius.md}; background: ${c.bgBrandSolid}; color: #fff; display: flex; align-items: center; justify-content: center; }
+    & .crisp-authshell-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
+    & .crisp-authshell-logo-title { font-size: ${c.text.xl}; font-weight: ${c.weight.bold}; letter-spacing: -0.2px; color: ${c.fgPrimary}; }
+    & .crisp-authshell-logo-subtitle { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
 
     & .crisp-authshell-card { margin-top: ${c.space["6"]}; display: flex; height: 692px; border-radius: 20px; border: 1px solid ${c.borderSubtle}; overflow: hidden; }
     &[data-single-pane] .crisp-authshell-card { height: auto; border: none; border-radius: 0; overflow: visible; }

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

@@ -1,2 +1,2 @@
-export { AuthShell } from "./authshell.js";
+export { AuthShell, } from "./authshell.js";
 export { authshellRecipe } from "./authshell.recipe.js";

package/dist/esm/product/board/board.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check } from "lucide-react";
+import { Check, Columns2, Columns3, Plus, Rows3, Square } from "lucide-react";
 import * as React from "react";
 import { Menu, MenuItem } from "../../components/menu/index.js";
+import { useRadioGroupKeyboard } from "../../components/radiogroup/index.js";
 import { isRtlElement, useCrispMessage, useCrispMessages } from "../../core/index.js";
 import { boardRecipe } from "./board.recipe.js";
 const BOARD_AGG_ORDER = [
@@ -55,16 +56,50 @@ function computeBoardAgg(agg, values) {
     }
 }
 /**
- * A kanban board with native drag-and-drop between columns. Cards are
- * `draggable`; dropping one on a column reparents it via `onCardsChange`
- * (the parent owns the cards, so the move is a controlled state update).
- * Measured from a deals pipeline.
+ * A kanban board with pointer-events drag-and-drop between columns (#674 —
+ * Attio's own mechanism, confirmed live: mousedown, several mousemoves,
+ * mouseup, no `[draggable]` anywhere). Dropping a card on a column reparents
+ * it via `onCardsChange` (the parent owns the cards, so the move is a
+ * controlled state update). Measured from a deals pipeline.
  */
-export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, className, ...rest }) {
+export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, newCardLabel: newCardLabelProp, getCardLabel, announceMove: announceMoveProp, calc, density = false, columnDensity: columnDensityProp, onColumnDensityChange, cardDensity: cardDensityProp, onCardDensityChange, collapseColumnsLabel: collapseColumnsLabelProp, expandColumnsLabel: expandColumnsLabelProp, collapseCardsLabel: collapseCardsLabelProp, expandCardsLabel: expandCardsLabelProp, columnDensityGroupLabel: columnDensityGroupLabelProp, cardDensityGroupLabel: cardDensityGroupLabelProp, onAddStage, addStageLabel: addStageLabelProp, className, ...rest }) {
     // crisp/#471: same resolution order as every other component's own —
     // explicit prop, then a CrispMessagesProvider's translation of the English
     // default, then that default itself.
     const newCardLabel = useCrispMessage(newCardLabelProp, "New");
+    const collapseColumnsLabel = useCrispMessage(collapseColumnsLabelProp, "Collapse columns");
+    const expandColumnsLabel = useCrispMessage(expandColumnsLabelProp, "Expand columns");
+    const collapseCardsLabel = useCrispMessage(collapseCardsLabelProp, "Collapse cards");
+    const expandCardsLabel = useCrispMessage(expandCardsLabelProp, "Expand cards");
+    const columnDensityGroupLabel = useCrispMessage(columnDensityGroupLabelProp, "Column density");
+    const cardDensityGroupLabel = useCrispMessage(cardDensityGroupLabelProp, "Card density");
+    const addStageLabel = useCrispMessage(addStageLabelProp, "Add stage");
+    // #718: same controlled/uncontrolled shape as `sort`/`selectedIds`
+    // elsewhere in crisp — explicit prop wins; otherwise this manages its own
+    // state, seeded "expand" (Attio's own board opens expanded by default).
+    const [internalColumnDensity, setInternalColumnDensity] = React.useState("expand");
+    const [internalCardDensity, setInternalCardDensity] = React.useState("expand");
+    const columnDensity = columnDensityProp ?? internalColumnDensity;
+    const cardDensity = cardDensityProp ?? internalCardDensity;
+    const setColumnDensity = (next) => {
+        onColumnDensityChange?.(next);
+        if (columnDensityProp === undefined)
+            setInternalColumnDensity(next);
+    };
+    const setCardDensity = (next) => {
+        onCardDensityChange?.(next);
+        if (cardDensityProp === undefined)
+            setInternalCardDensity(next);
+    };
+    // crisp's shared radio-group keyboard model (#200) — the same
+    // ←/→/↑/↓/Home/End-with-roving-tabindex model `Segmented`/`RadioGroup`
+    // already use, not a bespoke per-button handler (see that hook's own
+    // comment on the bug a per-button closure caused once already). Two
+    // independent hook instances: each density pair is its own radio group.
+    const { onKeyDown: onColumnDensityKeyDown, groupRef: columnDensityGroupRef } = useRadioGroupKeyboard({
+        select: (v) => setColumnDensity(v),
+    });
+    const { onKeyDown: onCardDensityKeyDown, groupRef: cardDensityGroupRef } = useRadioGroupKeyboard({ select: (v) => setCardDensity(v) });
     // #604: which BoardAgg each column's footer shows, keyed by column id.
     // Unset (undefined) means the column still shows the "+ Add calculation"
     // trigger, exactly like the table footer's own per-column state.
@@ -76,11 +111,37 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
             : `${crispMessages["Moved to"] ?? "Moved to"} ${column}`);
     const [dragId, setDragId] = React.useState(null);
     const [overCol, setOverCol] = React.useState(null);
+    const [ghost, setGhost] = React.useState(null);
     const [announcement, setAnnouncement] = React.useState("");
     // the card a keyboard move just sent to another column; React unmounts and
     // remounts it under the new parent, so focus has to be put back by hand
     const [refocusId, setRefocusId] = React.useState(null);
     const rootRef = React.useRef(null);
+    const colRefs = React.useRef(new Map());
+    // #674: which column a client point is over, read off each column's own
+    // rect at drag time rather than `elementFromPoint` -- the fixed-position
+    // ghost sits on top of everything (deliberately, so it never itself
+    // becomes the hit) and this is the one MEASURED interaction a test has a
+    // real handle on (`elementFromPoint` needs an actual layout engine bun
+    // test's happy-dom doesn't run).
+    //
+    // X only, not a full box: `.crisp-board`'s columns are a single
+    // non-wrapping row (`display: flex`, no `flex-wrap`), so X alone already
+    // identifies the column unambiguously. Checking Y against each column's
+    // OWN rect looked more precise but was actually a bug caught driving this
+    // in a real headed browser (Playwright), not by the tests passing --
+    // `align-items: flex-start` on the row means a short/empty column's own
+    // box ends where its content does, well short of a taller neighbour's, so
+    // a drop below that point silently found no column at all even while
+    // visually still inside the board.
+    const columnAt = (x) => {
+        for (const [id, el] of colRefs.current) {
+            const r = el.getBoundingClientRect();
+            if (x >= r.left && x <= r.right)
+                return id;
+        }
+        return null;
+    };
     const move = (cardId, toColumn) => {
         const card = cards.find((c) => c.id === cardId);
         if (!card || card.columnId === toColumn)
@@ -96,8 +157,77 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
         setRefocusId(null);
     }, [refocusId]);
     /**
-     * Native HTML5 drag-and-drop is pointer-only by specification, so the board's
-     * primary action needs its own key model or it has none at all.
+     * #674: Attio's own board drag is driven by pointer events (mousedown ->
+     * several mousemoves -> mouseup) -- confirmed live, no `[draggable]`
+     * anywhere -- not native HTML5 `draggable`/`onDragStart`, which is
+     * pointer-only by specification (no touch/pen support) and fires its own
+     * separate, browser-chrome-owned drag session crisp never controlled: no
+     * custom drag image, no way to redraw the dragged card while it moves.
+     * Pointer events give the board its own tracked drag state instead, the
+     * same primitive `resizeHandle`/`recordstable`'s own column-resize already
+     * use elsewhere in crisp.
+     *
+     * A drag doesn't "start" the instant the pointer goes down on a card --
+     * only once it has moved past a small threshold (4px). Below that, the
+     * gesture reads as a click/tap that never happened here (the card carries
+     * no click handler of its own today, but a future one would otherwise
+     * fire through a phantom near-zero-distance "drag").
+     */
+    const dragStateRef = React.useRef(null);
+    const DRAG_THRESHOLD = 4;
+    const onCardPointerDown = (e, card) => {
+        if (!e.isPrimary)
+            return;
+        const r = e.currentTarget.getBoundingClientRect();
+        dragStateRef.current = {
+            id: card.id,
+            pointerId: e.pointerId,
+            startX: e.clientX,
+            startY: e.clientY,
+            active: false,
+            grabDx: e.clientX - r.left,
+            grabDy: e.clientY - r.top,
+            width: r.width,
+            height: r.height,
+        };
+    };
+    const onCardPointerMove = (e) => {
+        const st = dragStateRef.current;
+        if (!st || st.pointerId !== e.pointerId)
+            return;
+        if (!st.active) {
+            const dx = e.clientX - st.startX;
+            const dy = e.clientY - st.startY;
+            if (Math.hypot(dx, dy) < DRAG_THRESHOLD)
+                return;
+            st.active = true;
+            setDragId(st.id);
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        setGhost({
+            x: e.clientX - st.grabDx,
+            y: e.clientY - st.grabDy,
+            width: st.width,
+            height: st.height,
+        });
+        setOverCol(columnAt(e.clientX));
+    };
+    const endCardDrag = (e, commit) => {
+        const st = dragStateRef.current;
+        if (!st || st.pointerId !== e.pointerId)
+            return;
+        if (commit && st.active && overCol)
+            move(st.id, overCol);
+        dragStateRef.current = null;
+        setDragId(null);
+        setOverCol(null);
+        setGhost(null);
+    };
+    /**
+     * Neither drag mechanism the board has used (the old native HTML5 kind,
+     * this file's own pointer-events one now) is reachable from a keyboard, so
+     * the board's primary action needs its own key model or it has none at
+     * all.
      *
      * Ctrl/Cmd + Left/Right rather than plain arrows: a screen reader owns the
      * bare arrow keys in browse mode, and a board scrolls horizontally, so plain
@@ -113,44 +243,43 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
         setRefocusId(card.id);
         return true;
     };
-    return (_jsxs("div", { ref: rootRef, className: boardRecipe({ className }), ...rest, children: [columns.map((col) => {
-                const colCards = cards.filter((c) => c.columnId === col.id);
-                return (_jsxs("div", { className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, onDragOver: (e) => {
-                        if (!dragId)
-                            return;
-                        e.preventDefault();
-                        setOverCol(col.id);
-                    }, onDragLeave: (e) => {
-                        if (!e.currentTarget.contains(e.relatedTarget)) {
-                            setOverCol((v) => (v === col.id ? null : v));
-                        }
-                    }, onDrop: (e) => {
-                        e.preventDefault();
-                        if (dragId)
-                            move(dragId, col.id);
-                        setDragId(null);
-                        setOverCol(null);
-                    }, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-board-card", role: "listitem", 
-                                    // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
-                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, draggable: true, "data-dragging": dragId === card.id ? "" : undefined, onDragStart: () => setDragId(card.id), onDragEnd: () => {
-                                        setDragId(null);
-                                        setOverCol(null);
-                                    }, onKeyDown: (e) => {
-                                        if (!(e.ctrlKey || e.metaKey))
-                                            return;
-                                        // the columns are a flex row, so under RTL the next one
-                                        // is to the LEFT and the keys swap (#255)
-                                        const rtl = isRtlElement(e.currentTarget);
-                                        const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
-                                        const backKey = rtl ? "ArrowRight" : "ArrowLeft";
-                                        const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
-                                        // only swallow the key when the move actually happens, so
-                                        // Ctrl+Right at the last column still reaches the browser
-                                        if (delta && moveByKey(card, delta))
-                                            e.preventDefault();
-                                    }, children: renderCard(card) }, card.id)))] }), calc && (_jsx("div", { className: "crisp-board-col-footer", children: _jsx(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
-                                                    AGG_LABEL[colAgg[col.id]] }), _jsx("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
-                                        "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => (_jsxs(MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? (_jsx(Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
-            }), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "polite", children: announcement })] }));
+    return (_jsxs("div", { ref: rootRef, className: boardRecipe({ className }), ...rest, children: [density && (_jsxs("div", { className: "crisp-board-toolbar", children: [_jsxs("div", { ref: columnDensityGroupRef, className: "crisp-board-density", role: "radiogroup", "aria-label": columnDensityGroupLabel, onKeyDown: onColumnDensityKeyDown, children: [_jsx("button", { type: "button", role: "radio", "data-value": "collapse", "aria-checked": columnDensity === "collapse", "aria-label": collapseColumnsLabel, "data-state": columnDensity === "collapse" ? "on" : "off", onClick: () => setColumnDensity("collapse"), children: _jsx(Columns3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", role: "radio", "data-value": "expand", "aria-checked": columnDensity === "expand", "aria-label": expandColumnsLabel, "data-state": columnDensity === "expand" ? "on" : "off", onClick: () => setColumnDensity("expand"), children: _jsx(Columns2, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsxs("div", { ref: cardDensityGroupRef, className: "crisp-board-density", role: "radiogroup", "aria-label": cardDensityGroupLabel, onKeyDown: onCardDensityKeyDown, children: [_jsx("button", { type: "button", role: "radio", "data-value": "collapse", "aria-checked": cardDensity === "collapse", "aria-label": collapseCardsLabel, "data-state": cardDensity === "collapse" ? "on" : "off", onClick: () => setCardDensity("collapse"), children: _jsx(Rows3, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("button", { type: "button", role: "radio", "data-value": "expand", "aria-checked": cardDensity === "expand", "aria-label": expandCardsLabel, "data-state": cardDensity === "expand" ? "on" : "off", onClick: () => setCardDensity("expand"), children: _jsx(Square, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] })] })), _jsxs("div", { className: "crisp-board-row", children: [columns.map((col) => {
+                        const colCards = cards.filter((c) => c.columnId === col.id);
+                        return (_jsxs("div", { ref: (el) => {
+                                if (el)
+                                    colRefs.current.set(col.id, el);
+                                else
+                                    colRefs.current.delete(col.id);
+                            }, className: "crisp-board-col", "data-over": overCol === col.id ? "" : undefined, "data-density": columnDensity === "collapse" ? "collapse" : undefined, children: [_jsxs("div", { className: "crisp-board-col-header", children: [col.accent && (_jsx("span", { className: "crisp-board-col-dot", style: { background: col.accent } })), _jsx("span", { className: "crisp-board-col-title", children: col.title }), _jsx("span", { className: "crisp-board-col-count", children: colCards.length }), onNewCard && columnDensity !== "collapse" && (_jsx("button", { type: "button", className: "crisp-board-col-add", "aria-label": `${crispMessages["Add to"] ?? "Add to"} ${col.title}`, onClick: () => onNewCard(col.id), children: "+" }))] }), _jsxs("div", { className: "crisp-board-col-body", role: "list", "aria-label": col.title, children: [onNewCard && (_jsxs("button", { type: "button", className: "crisp-board-newcard", onClick: () => onNewCard(col.id), children: ["+ ", newCardLabel] })), colCards.map((card) => (_jsx("div", { className: "crisp-board-card", role: "listitem", 
+                                            // biome-ignore lint/a11y/noNoninteractiveTabindex: the rule assumes a listitem cannot be operated. This one carries the board's only keyboard path to move a card, so it has to be reachable by Tab
+                                            tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, "data-dragging": dragId === card.id ? "" : undefined, "data-density": cardDensity === "collapse" ? "collapse" : undefined, onPointerDown: (e) => onCardPointerDown(e, card), onPointerMove: onCardPointerMove, onPointerUp: (e) => endCardDrag(e, true), onPointerCancel: (e) => endCardDrag(e, false), onKeyDown: (e) => {
+                                                if (!(e.ctrlKey || e.metaKey))
+                                                    return;
+                                                // the columns are a flex row, so under RTL the next one
+                                                // is to the LEFT and the keys swap (#255)
+                                                const rtl = isRtlElement(e.currentTarget);
+                                                const forwardKey = rtl ? "ArrowLeft" : "ArrowRight";
+                                                const backKey = rtl ? "ArrowRight" : "ArrowLeft";
+                                                const delta = e.key === backKey ? -1 : e.key === forwardKey ? 1 : 0;
+                                                // only swallow the key when the move actually happens, so
+                                                // Ctrl+Right at the last column still reaches the browser
+                                                if (delta && moveByKey(card, delta))
+                                                    e.preventDefault();
+                                            }, children: renderCard(card, cardDensity) }, card.id)))] }), calc && (_jsx("div", { className: "crisp-board-col-footer", children: _jsx(Menu, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-board-col-calc", "data-empty": colAgg[col.id] ? undefined : "", children: colAgg[col.id] ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "crisp-board-col-calc-label", children: crispMessages[AGG_LABEL[colAgg[col.id]]] ??
+                                                            AGG_LABEL[colAgg[col.id]] }), _jsx("span", { className: "crisp-board-col-calc-value", children: computeBoardAgg(colAgg[col.id], colCards.map((c) => calc.getValue(c))) })] })) : ((crispMessages["+ Add calculation"] ??
+                                                "+ Add calculation")) }), children: BOARD_AGG_ORDER.map((a) => (_jsxs(MenuItem, { onSelect: () => setColAgg((prev) => ({ ...prev, [col.id]: a })), children: [crispMessages[AGG_LABEL[a]] ?? AGG_LABEL[a], colAgg[col.id] === a ? (_jsx(Check, { size: 15, strokeWidth: 1.75 })) : null] }, a))) }) }))] }, col.id));
+                    }), onAddStage && (_jsx("button", { type: "button", className: "crisp-board-addstage", "aria-label": addStageLabel, onClick: onAddStage, children: _jsx(Plus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), dragId &&
+                ghost &&
+                (() => {
+                    const draggedCard = cards.find((c) => c.id === dragId);
+                    if (!draggedCard)
+                        return null;
+                    return (_jsx("div", { className: "crisp-board-card crisp-board-ghost", style: {
+                            left: ghost.x,
+                            top: ghost.y,
+                            width: ghost.width,
+                            height: ghost.height,
+                        }, children: renderCard(draggedCard, cardDensity) }));
+                })(), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "assertive", children: announcement })] }));
 }
 Board.displayName = "Board";