@crisp-ui-kit/crisp 0.54.6 → 0.54.8

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

@@ -55,10 +55,11 @@ 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 }) {
     // crisp/#471: same resolution order as every other component's own —
@@ -76,11 +77,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 +123,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
@@ -115,27 +211,14 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
     };
     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", 
+                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, 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) => {
+                                    tabIndex: 0, "aria-label": getCardLabel?.(card), "data-card-id": card.id, "data-dragging": dragId === card.id ? "" : 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
@@ -151,6 +234,18 @@ export function Board({ columns, cards, onCardsChange, renderCard, onNewCard, ne
                                     }, 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 })] }));
+            }), 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) }));
+                })(), _jsx("div", { className: "crisp-board-live", role: "status", "aria-live": "assertive", children: announcement })] }));
 }
 Board.displayName = "Board";

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

@@ -20,18 +20,30 @@ const config = defineRecipe({
     & .crisp-board-col-header { display: flex; align-items: center; gap: ${c.space["2"]}; height: 36px; padding: 0 ${c.space["1"]}; flex-shrink: 0; }
     & .crisp-board-col-dot { width: 12px; height: 12px; border-radius: ${c.radius.full}; flex-shrink: 0; }
     & .crisp-board-col-title { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .crisp-board-col-count { 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} 4%, transparent); font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+    /* crisp#697: HANDOFF's #472 note claimed the count pill's
+       color-mix(fgPrimary, 63%, transparent) reproduced the measured
+       rgb(80,81,85) -- it doesn't; 63% of fgPrimary composited on white
+       paints rgb(104,105,105), visibly lighter. Text now reads
+       fgNeutralSoft directly (the same rgb(80,81,85) token Badge's neutral
+       tone uses, #696), and the ring the pill was also missing
+       (inset 0 0 0 1px borderSubtle, measured rgb(238,239,241)) is added. */
+    & .crisp-board-col-count { 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} 4%, transparent); box-shadow: inset 0 0 0 1px ${c.borderSubtle}; font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium}; color: ${c.fgNeutralSoft}; }
     & .crisp-board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-start: auto; padding: 0; border: none; border-radius: ${c.radius.sm}; background: none; color: ${c.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-board-col-add:hover { background: color-mix(in srgb, ${c.fgPrimary} 6%, transparent); color: ${c.fgPrimary}; }
     & .crisp-board-col-body { display: flex; flex-direction: column; gap: ${c.space["2"]}; flex: 1; min-height: 48px; padding: ${c.space["1"]}; border-radius: ${c.radius.lg}; overflow-y: auto; transition: background 0.12s; }
     & .crisp-board-col[data-over] .crisp-board-col-body { background: color-mix(in srgb, ${c.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgBrandSolid} 30%, transparent); }
     & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: ${c.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${c.radius.md}; background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgMuted}; font-family: inherit; font-size: ${c.text.md}; font-weight: ${c.weight.medium}; cursor: pointer; }
     & .crisp-board-newcard:hover { background: color-mix(in srgb, ${c.fgPrimary} 7%, transparent); color: ${c.fgPrimary}; }
-    & .crisp-board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; cursor: grab; }
+    & .crisp-board-card { display: flex; flex-direction: column; gap: ${c.space["2"]}; box-sizing: border-box; padding: ${c.space["2.5"]} ${c.space["3"]}; border-radius: ${c.radius.xl}; background: ${c.bgSurface}; box-shadow: inset 0 0 0 1px ${c.borderSubtle}; cursor: grab; touch-action: none; }
     & .crisp-board-card:active { cursor: grabbing; }
     & .crisp-board-card[data-dragging] { opacity: 0.4; }
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 1px; }
+    /* #674: the pointer-events drag's own drag image -- the same card
+       surface above, just pinned to the pointer instead of the flex flow.
+       No shadow lift or scale: neither was measured against Attio, and this
+       is the same card, momentarily somewhere else, not a new look. */
+    & .crisp-board-ghost { position: fixed; z-index: 1; pointer-events: none; cursor: grabbing; }
     /* #604: a per-column calc footer, mirroring the table's own (measured
        live, Deals pipeline). Sits below the scrollable card body, not
        inside it or pinned to it -- Attio's own is position: static, not

package/dist/esm/product/comments/comments.js

@@ -266,8 +266,8 @@ const Composer = React.forwardRef(function Composer({ placeholder, postLabel, me
                     close: closeMention,
                 })] }));
 });
-function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel, copyLinkLabel, deleteLabel, addReactionLabel, reactionSearchLabel, emojiOptions, resolvable, resolved, resolvedLabel, onReply, onReact, onResolve, onCopyLink, onDeleteRequest, }) {
-    return (_jsxs("div", { className: "crisp-comments-row", children: [_jsx(AuthorAvatar, { author: comment.author }), _jsxs("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && (_jsxs("div", { className: "crisp-comments-resolved-label", children: [_jsx(Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), _jsxs("div", { className: "crisp-comments-row-head", children: [_jsx("span", { className: "crisp-comments-author", children: comment.author.name }), _jsx("span", { className: "crisp-comments-time", children: comment.time })] }), _jsx("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && (_jsxs("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => (_jsxs("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [_jsx("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), _jsx(Popover, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: _jsx(SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), _jsxs("div", { className: "crisp-comments-row-actions", children: [onReply && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: _jsx(CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), _jsx(Popover, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: _jsx(Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), _jsx(MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel })] })] })] }));
+function CommentRow({ comment, replyLabel, reactLabel, resolveLabel, moreLabel, copyLinkLabel, deleteLabel, addReactionLabel, reactionSearchLabel, emojiOptions, resolvable, resolved, resolvedLabel, reactable, onReply, onReact, onResolve, onCopyLink, onDeleteRequest, }) {
+    return (_jsxs("div", { className: "crisp-comments-row", children: [_jsx(AuthorAvatar, { author: comment.author }), _jsxs("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && (_jsxs("div", { className: "crisp-comments-resolved-label", children: [_jsx(Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), _jsxs("div", { className: "crisp-comments-row-head", children: [_jsx("span", { className: "crisp-comments-author", children: comment.author.name }), _jsx("span", { className: "crisp-comments-time", children: comment.time })] }), _jsx("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && (_jsxs("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => (_jsxs("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact?.(r.emoji), children: [_jsx("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), _jsx(Popover, { align: "start", trigger: _jsx("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: _jsx(SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: (emoji) => onReact?.(emoji) }) })] }))] }), _jsxs("div", { className: "crisp-comments-row-actions", children: [onReply && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: _jsx(CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), reactable && (_jsx(Popover, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: _jsx(SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: _jsx(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: (emoji) => onReact?.(emoji) }) })), resolvable && (_jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: _jsx(Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), _jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: _jsx(MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), onDeleteRequest && (_jsx(MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel }))] })] })] }));
 }
 /**
  * Per-record comment threads (crisp#625) — measured live on app.attio.com's
@@ -337,23 +337,36 @@ export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, sh
                                     ? resolvedByYouLabel
                                     : (resolvedByLabel?.(activeThread.resolvedBy.name) ??
                                         `Resolved by ${activeThread.resolvedBy.name}`)
-                                : undefined, onReact: (emoji) => onReact(activeThread.id, activeThread.root.id, emoji), onResolve: onResolve ? () => onResolve(activeThread.id) : undefined, onCopyLink: () => copyLink(activeThread.id, activeThread.root.id), onDeleteRequest: () => setDeleteTarget({
-                                threadId: activeThread.id,
-                                commentId: activeThread.root.id,
-                            }) }), activeThread.replies && activeThread.replies.length > 0 && (_jsx("div", { className: "crisp-comments-replies", children: activeThread.replies.map((reply) => (_jsx(CommentRow, { comment: reply, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, onReact: (emoji) => onReact(activeThread.id, reply.id, emoji), onCopyLink: () => copyLink(activeThread.id, reply.id), onDeleteRequest: () => setDeleteTarget({
+                                : undefined, reactable: !!onReact, onReact: onReact
+                                ? (emoji) => onReact(activeThread.id, activeThread.root.id, emoji)
+                                : undefined, onResolve: onResolve ? () => onResolve(activeThread.id) : undefined, onCopyLink: () => copyLink(activeThread.id, activeThread.root.id), onDeleteRequest: onDelete
+                                ? () => setDeleteTarget({
                                     threadId: activeThread.id,
-                                    commentId: reply.id,
-                                }) }, reply.id))) }))] })) : visibleThreads.length === 0 && emptyLabel != null ? (_jsx("div", { className: "crisp-comments-empty", children: emptyLabel })) : (visibleThreads.map((t) => (_jsx(CommentRow, { comment: t.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: t.resolved, resolvedLabel: t.resolved
+                                    commentId: activeThread.root.id,
+                                })
+                                : undefined }), activeThread.replies && activeThread.replies.length > 0 && (_jsx("div", { className: "crisp-comments-replies", children: activeThread.replies.map((reply) => (_jsx(CommentRow, { comment: reply, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, reactable: !!onReact, onReact: onReact
+                                    ? (emoji) => onReact(activeThread.id, reply.id, emoji)
+                                    : undefined, onCopyLink: () => copyLink(activeThread.id, reply.id), onDeleteRequest: onDelete
+                                    ? () => setDeleteTarget({
+                                        threadId: activeThread.id,
+                                        commentId: reply.id,
+                                    })
+                                    : undefined }, reply.id))) }))] })) : visibleThreads.length === 0 && emptyLabel != null ? (_jsx("div", { className: "crisp-comments-empty", children: emptyLabel })) : (visibleThreads.map((t) => (_jsx(CommentRow, { comment: t.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: t.resolved, resolvedLabel: t.resolved
                         ? t.resolvedBy?.id === currentUserId || !t.resolvedBy
                             ? resolvedByYouLabel
                             : (resolvedByLabel?.(t.resolvedBy.name) ??
                                 `Resolved by ${t.resolvedBy.name}`)
-                        : undefined, onReply: () => setActiveThreadId(t.id), onReact: (emoji) => onReact(t.id, t.root.id, emoji), onResolve: onResolve ? () => onResolve(t.id) : undefined, onCopyLink: () => copyLink(t.id, t.root.id), onDeleteRequest: () => setDeleteTarget({ threadId: t.id, commentId: t.root.id }) }, t.id)))) }), _jsx(Composer, { placeholder: activeThread ? replyPlaceholder : composerPlaceholder, postLabel: activeThread ? replyPostLabel : postLabel, mentionTrigger: mentionTrigger, renderMentionPicker: renderMentionPicker, mentionToolLabel: composerMentionToolLabel, onSubmit: (text) => onPost(text, activeThread ? activeThread.id : null) }, activeThread ? activeThread.id : "root"), _jsxs(Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
+                        : undefined, onReply: () => setActiveThreadId(t.id), reactable: !!onReact, onReact: onReact ? (emoji) => onReact(t.id, t.root.id, emoji) : undefined, onResolve: onResolve ? () => onResolve(t.id) : undefined, onCopyLink: () => copyLink(t.id, t.root.id), onDeleteRequest: onDelete
+                        ? () => setDeleteTarget({ threadId: t.id, commentId: t.root.id })
+                        : undefined }, t.id)))) }), _jsx(Composer, { placeholder: activeThread ? replyPlaceholder : composerPlaceholder, postLabel: activeThread ? replyPostLabel : postLabel, mentionTrigger: mentionTrigger, renderMentionPicker: renderMentionPicker, mentionToolLabel: composerMentionToolLabel, onSubmit: (text) => onPost(text, activeThread ? activeThread.id : null) }, activeThread ? activeThread.id : "root"), _jsxs(Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
                     if (!open)
                         setDeleteTarget(null);
                 }, title: deleteConfirmTitle, children: [_jsx(DialogBody, { children: deleteConfirmBody }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", size: "md", onClick: () => setDeleteTarget(null), children: cancelLabel }), _jsx(Button, { type: "button", intent: "danger", size: "md", onClick: () => {
+                                    // `deleteTarget` can only ever be set via `onDeleteRequest`
+                                    // (above), which itself only exists when `onDelete` was
+                                    // given -- this call is never reached otherwise.
                                     if (deleteTarget)
-                                        onDelete(deleteTarget.threadId, deleteTarget.commentId);
+                                        onDelete?.(deleteTarget.threadId, deleteTarget.commentId);
                                     setDeleteTarget(null);
                                 }, children: deleteConfirmActionLabel })] })] })] }));
 }

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

@@ -33,12 +33,26 @@ const config = defineRecipe({
 
     /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the
        name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body
-       two lines below. Hover actions fade in flush with the name line. */
+       two lines below. Hover actions fade in flush with the name line.
+       .crisp-comments-row-head's own height: 20px (above) is a single
+       text-line's worth, on the same assumption .crisp-comments-title/
+       .crisp-comments-breadcrumb already act on higher up in this same
+       recipe -- a name that doesn't fit wraps to two lines with nothing
+       reserving room for the second one, overflowing straight into the
+       body text underneath (found live: this app's own dev-bypass author
+       name, an email long enough to wrap, sat on top of the comment's own
+       body text). .crisp-comments-author gets the identical nowrap-
+       ellipsis treatment those two already have, plus min-width: 0 so a
+       flex item is actually allowed to shrink below its own text's natural
+       width in the first place; .crisp-comments-time gets flex-shrink: 0
+       so it's the name that gives, never the timestamp -- the same "one
+       side shrinks, the other one doesn't" split PersonChip's own name/
+       avatar pair already uses (crisp#668/#671). */
     & .crisp-comments-row { position: relative; display: flex; gap: ${c.space["1.5"]}; }
     & .crisp-comments-row-main { flex: 1; min-width: 0; }
     & .crisp-comments-row-head { display: flex; align-items: baseline; gap: ${c.space["1.5"]}; height: 20px; }
-    & .crisp-comments-author { font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
-    & .crisp-comments-time { font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; }
+    & .crisp-comments-author { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: ${c.text.lg}; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; }
+    & .crisp-comments-time { flex-shrink: 0; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); white-space: nowrap; }
     & .crisp-comments-resolved-label { display: flex; align-items: center; gap: ${c.space["1"]}; margin-bottom: ${c.space["1"]}; font-size: 12px; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
     & .crisp-comments-body-text { font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.regular}; color: ${c.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
 

package/dist/esm/product/formdialog/formdialog.js

@@ -32,13 +32,19 @@ export function useFormDialogOptional(required) {
  * per-field wiring). A record needs several fields at once to be valid,
  * which is why records are not created by inline editing.
  */
-export function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide = false, size, createMode = false, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }) {
+export function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, children, wide = false, size, createMode = false, createMoreLabel: createMoreLabelProp, cancelLabel: cancelLabelProp, discardTitle: discardTitleProp, discardDescription: discardDescriptionProp, discardConfirmLabel: discardConfirmLabelProp, discardCancelLabel: discardCancelLabelProp, className, ...rest }) {
     const createMoreLabel = useCrispMessage(createMoreLabelProp, "Create more");
     const createRecordLabel = useCrispMessage(undefined, "Create record");
     const cancelLabel = useCrispMessage(cancelLabelProp, "Cancel");
-    const discardTitle = useCrispMessage(discardTitleProp, "Discard changes? Your changes will be lost.");
+    // crisp#677: Attio's own confirm is two lines (a title, then a separate
+    // sentence), not one combined string — measured live, both quoted
+    // verbatim off app.attio.com's create-attribute dialog's own discard
+    // confirm. The buttons read "Cancel"/"Discard" there too, not crisp's
+    // prior "Keep editing" (a paraphrase, never independently measured).
+    const discardTitle = useCrispMessage(discardTitleProp, "Discard changes");
+    const discardDescription = useCrispMessage(discardDescriptionProp, "Are you sure you want to discard these changes?");
     const discardConfirmLabel = useCrispMessage(discardConfirmLabelProp, "Discard");
-    const discardCancelLabel = useCrispMessage(discardCancelLabelProp, "Keep editing");
+    const discardCancelLabel = useCrispMessage(discardCancelLabelProp, "Cancel");
     const formId = React.useId();
     const formRef = React.useRef(null);
     const switchId = React.useId();
@@ -126,7 +132,7 @@ export function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error,
     return (_jsxs(_Fragment, { children: [_jsxs(Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: formdialogRecipe({ className }), ...rest, children: [_jsxs(DialogBody, { children: [_jsx(OptionalLabelsContext.Provider, { value: createMode, children: _jsx("form", { ref: formRef, id: formId, className: "crisp-formdialog-form", onSubmit: (e) => {
                                         e.preventDefault();
                                         onSubmit(createMore);
-                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && _jsx("p", { className: "crisp-formdialog-error", children: error })] }), _jsx(DialogFooter, { children: createMode ? (_jsxs("div", { className: "crisp-formdialog-createfoot", children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), _jsx("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), _jsxs("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), _jsx(Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), _jsx(Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), _jsx(Button, { type: "button", intent: "danger", onClick: () => {
+                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && _jsx("p", { className: "crisp-formdialog-error", children: error })] }), _jsx(DialogFooter, { children: createMode ? (_jsxs("div", { className: "crisp-formdialog-createfoot", children: [_jsxs("span", { className: "crisp-dialog-more", children: [_jsx(Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), _jsx("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), _jsxs("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, _jsxs("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), _jsx(Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), _jsx(Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), variant: "alert", title: discardTitle, description: discardDescription, width: 440, children: _jsxs(DialogFooter, { variant: "alert", children: [_jsx(Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), _jsx(Button, { type: "button", intent: "danger", onClick: () => {
                                 setConfirmingDiscard(false);
                                 onClose();
                             }, children: discardConfirmLabel })] }) })] }));

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

@@ -1 +1 @@
-export { NavItem } from "./navitem.js";
+export { NavItem, } from "./navitem.js";

package/dist/esm/product/navitem/navitem.js

@@ -1,8 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Kbd } from "../../components/kbd/index.js";
+import { Tooltip } from "../../components/tooltip/index.js";
 import { Primitive } from "../../core/index.js";
 import { navitemRecipe } from "./navitem.recipe.js";
-export const NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
-    return (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "crisp-navitem-label", children: children }), trailing != null && (_jsx("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
+export const NavItem = React.forwardRef(({ active, icon, trailing, shortcut, className, children, ...props }, ref) => {
+    const row = (_jsxs(Primitive.a, { ref: ref, "data-active": active || undefined, className: navitemRecipe({ className }), ...props, children: [icon, _jsx("span", { className: "crisp-navitem-label", children: children }), trailing != null && (_jsx("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
+    if (!shortcut)
+        return row;
+    return (_jsx(Tooltip, { asChild: true, side: "right", delay: 500, content: _jsxs("span", { className: "crisp-navitem-shortcut", children: [_jsx("span", { className: "crisp-navitem-shortcut-desc", children: shortcut.description }), _jsx("span", { className: "crisp-navitem-shortcut-chord", children: shortcut.keys.map((key, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "crisp-navitem-shortcut-then", children: "then" })), _jsx(Kbd, { children: key })] }, i))) })] }), children: row }));
 });
 NavItem.displayName = "NavItem";

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

@@ -18,6 +18,22 @@ const config = defineRecipe({
     variants: {},
     defaultVariants: {},
     compoundVariants: [],
+    // Tooltip portals its content to document.body (same reason sidebar.recipe.ts's
+    // menu content lives in globalCss, not a `&`-nested rule): a shortcut hint
+    // never sits inside `.crisp-navitem` in the live DOM, so it needs an
+    // unscoped rule to be reached at all. Values measured live on
+    // app.attio.com's own "G then <letter>" hint (crisp#633): the description
+    // inherits Tooltip's own #eeeff1 text colour for free (it's the same hex),
+    // but "then" and the Kbd chip are their own greys, hardcoded raw rather
+    // than through a token -- same call tooltip.recipe.ts already made for
+    // this exact bubble, which is always dark regardless of the app's theme.
+    globalCss: `
+    .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: ${c.space["3"]}; }
+    .crisp-navitem-shortcut-desc { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: ${c.space["1"]}; flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: ${c.text.xs}; font-weight: ${c.weight.medium}; color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: ${c.weight.regular}; color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  `,
 });
 export const navitemRecipe = Object.assign(resolveRecipe(config), {
     config,

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

@@ -1,2 +1,2 @@
-export { ATTRIBUTE_AI_AUTOFILL_OPTIONS, ATTRIBUTE_TYPE_OPTIONS, AttributesTable, AttributeTypeSelect, CreateAttributeDialog, ObjectAppearanceSection, ObjectDetailPage, ObjectGeneralSection, ObjectSettings, ObjectsList, } from "./objectsettings.js";
+export { ATTRIBUTE_AI_AUTOFILL_OPTIONS, ATTRIBUTE_TYPE_OPTIONS, AttributesTable, AttributeTypeSelect, CreateAttributeDialog, ObjectAppearanceSection, ObjectDetailPage, ObjectGeneralSection, ObjectsList, } from "./objectsettings.js";
 export { objectsettingsRecipe } from "./objectsettings.recipe.js";

package/dist/esm/product/objectsettings/objectsettings.js

@@ -114,7 +114,7 @@ export function ObjectDetailPage({ icon, iconColor, name, typeLabel, description
             setInternalTab(next);
         onTabChange?.(next);
     };
-    return (_jsx("div", { className: objectsettingsRecipe(), children: _jsxs("div", { className: "crisp-objectsettings-page", children: [_jsx("div", { className: "crisp-objectsettings-head", children: _jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [_jsx("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), _jsxs("div", { className: "crisp-objectsettings-heading", children: [_jsxs("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && (_jsx(Badge, { tone: "neutral", size: "small", children: typeLabel }))] }), description != null && (_jsx("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), _jsx(Tabs, { value: active, onValueChange: setTab, tabs: [
+    return (_jsx("div", { className: objectsettingsRecipe(), children: _jsxs("div", { className: "crisp-objectsettings-page", children: [_jsx("div", { className: "crisp-objectsettings-head", children: _jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [_jsx("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), _jsxs("div", { className: "crisp-objectsettings-heading", children: [_jsxs("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && (_jsx(Badge, { tone: "neutral", size: "medium", children: typeLabel }))] }), description != null && (_jsx("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), _jsx(Tabs, { value: active, onValueChange: setTab, tabs: [
                         { value: "configuration", label: configurationLabel },
                         {
                             value: "attributes",
@@ -202,7 +202,7 @@ export function AttributesTable({ attributes, onOpenAttribute, onEditAttribute,
         {
             key: "properties",
             header: propertiesColumnLabel,
-            render: (_v, row) => (_jsxs("span", { style: { display: "flex", gap: 6 }, children: [row.system && (_jsx(Badge, { tone: "neutral", size: "small", children: systemLabel })), row.enriched && (_jsx(Badge, { tone: "purple", size: "small", children: enrichedLabel }))] })),
+            render: (_v, row) => (_jsxs("span", { style: { display: "flex", gap: 6 }, children: [row.system && (_jsx(Badge, { tone: "neutral", size: "medium", children: systemLabel })), row.enriched && (_jsx(Badge, { tone: "purple", size: "medium", children: enrichedLabel }))] })),
         },
         {
             key: "actions",
@@ -310,13 +310,3 @@ export function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutof
     return (_jsxs(FormDialog, { title: title, submitLabel: _jsxs(_Fragment, { children: [createLabel, _jsxs("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [_jsx("kbd", { children: "\u2318" }), _jsx("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: objectsettingsRecipe(), children: [_jsx(FormField, { label: attributeTypeLabel, children: _jsx(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), _jsx(FormField, { label: nameLabel, htmlFor: nameId, children: _jsx(Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), _jsx(FormField, { label: descriptionLabel, optional: true, children: _jsx(Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), _jsxs("div", { className: "crisp-objectsettings-aiautofill", children: [_jsx("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), _jsxs("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [_jsx(Sparkles, { size: 14 }), _jsx("span", { children: setUpAiAutofillLabel }), _jsx(Switch, { id: switchId, checked: aiAutofillEnabled, onCheckedChange: onAiAutofillChange })] })] })] }));
 }
 CreateAttributeDialog.displayName = "CreateAttributeDialog";
-/**
- * This folder holds several components (`ObjectsList`, `ObjectDetailPage`,
- * `AttributesTable`, `CreateAttributeDialog`, …), not one named after the
- * slug — unlike every other product dir, whose docs `<ManualInstallation>`
- * resolves an import binding from the folder slug ("avatargroup" →
- * `AvatarGroup`) by reading this file's exports. This alias exists only so
- * that resolver finds a match for "objectsettings"; consumers should import
- * the real names above, never this one.
- */
-export const ObjectSettings = ObjectsList;