@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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

@@ -18,23 +18,68 @@ const tokens_1 = require("../../tokens");
 // reference lacks).
 const config = (0, core_1.defineRecipe)({
     name: "board",
-    base: `display: flex; gap: ${tokens_1.contract.space["2"]}; height: 100%; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${tokens_1.contract.font.sans};
-    & .crisp-board-col { display: flex; flex-direction: column; width: 268px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; }
+    base: `display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; height: 100%; box-sizing: border-box; font-family: ${tokens_1.contract.font.sans};
+    /* #718: the density toolbar's own row -- everything that used to be on
+       the root (padding/overflow/the columns themselves) moves to
+       .crisp-board-row below so this can sit above it, unscrolled. */
+    & .crisp-board-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: ${tokens_1.contract.space["2"]}; padding: 0 ${tokens_1.contract.space["3"]}; flex-shrink: 0; }
+    /* Measured live (Deals pipeline): a 54×28px group, 24×24px buttons,
+       2px padding/gap -- an 8px gap between the two groups comes from the
+       toolbar's own \`gap\` above. */
+    & .crisp-board-density { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
+    & .crisp-board-density button { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 8px; background: none; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-board-density button[data-state="on"] { background: ${tokens_1.contract.bgSurface}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-board-row { display: flex; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 0; box-sizing: border-box; padding: ${tokens_1.contract.space["3"]}; overflow-x: auto; align-items: flex-start; }
+    & .crisp-board-col { display: flex; flex-direction: column; width: 268px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; transition: width 0.15s; }
+    /* #718: a collapsed column is a 52px vertical rail -- header only (dot
+       + count stacked above a vertical-rl title), body/footer hidden
+       entirely. Measured live: 52px width, 8px 0 padding on the header,
+       14px/600 title text. */
+    & .crisp-board-col[data-density="collapse"] { width: 52px; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-header { flex-direction: column; align-items: center; height: auto; padding: ${tokens_1.contract.space["2"]} 0; gap: ${tokens_1.contract.space["1"]}; }
+    /* Measured stacking order (top to bottom): dot, count, THEN the vertical
+       title -- reordered visually via \`order\`, not by changing the JSX/DOM
+       order, which stays dot/title/count (reading order, unaffected by
+       density). */
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-title { order: 1; writing-mode: vertical-rl; font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-count { order: 0; }
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-body,
+    & .crisp-board-col[data-density="collapse"] .crisp-board-col-footer { display: none; }
     & .crisp-board-col-header { display: flex; align-items: center; gap: ${tokens_1.contract.space["2"]}; height: 36px; padding: 0 ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
     & .crisp-board-col-dot { width: 12px; height: 12px; border-radius: ${tokens_1.contract.radius.full}; flex-shrink: 0; }
     & .crisp-board-col-title { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-board-col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.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 ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.sm}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.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: ${tokens_1.contract.radius.sm}; background: none; color: ${tokens_1.contract.fgMuted}; font-family: inherit; cursor: pointer; }
     & .crisp-board-col-add:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 6%, transparent); color: ${tokens_1.contract.fgPrimary}; }
     & .crisp-board-col-body { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; flex: 1; min-height: 48px; padding: ${tokens_1.contract.space["1"]}; border-radius: ${tokens_1.contract.radius.lg}; overflow-y: auto; transition: background 0.12s; }
     & .crisp-board-col[data-over] .crisp-board-col-body { background: color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${tokens_1.contract.bgBrandSolid} 30%, transparent); }
     & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: ${tokens_1.contract.space["1.5"]}; height: 32px; flex-shrink: 0; border: none; border-radius: ${tokens_1.contract.radius.md}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgMuted}; font-family: inherit; font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.medium}; cursor: pointer; }
     & .crisp-board-newcard:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 7%, transparent); color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; cursor: grab; }
+    & .crisp-board-card { display: flex; flex-direction: column; gap: ${tokens_1.contract.space["2"]}; box-sizing: border-box; padding: ${tokens_1.contract.space["2.5"]} ${tokens_1.contract.space["3"]}; border-radius: ${tokens_1.contract.radius.xl}; background: ${tokens_1.contract.bgSurface}; box-shadow: inset 0 0 0 1px ${tokens_1.contract.borderSubtle}; cursor: grab; touch-action: none; }
+    /* #718: a collapsed card is a single 40px row -- measured live and
+       independent of \`c.size.tableRow\`/\`tableHeader\` (36/40px) even
+       though it happens to match the latter; a plain literal, not a
+       cross-reference to a token measured for a different surface.
+       \`renderCard\`'s own second argument is what actually decides what a
+       collapsed card SHOWS (Board never sees inside its opaque output);
+       this only supplies the row-shaped box that content sits in. */
+    & .crisp-board-card[data-density="collapse"] { flex-direction: row; align-items: center; height: 40px; padding: 0 ${tokens_1.contract.space["3"]}; }
     & .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 ${tokens_1.contract.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
@@ -45,6 +90,13 @@ const config = (0, core_1.defineRecipe)({
     & .crisp-board-col-calc[data-empty] { opacity: 0.7; }
     & .crisp-board-col-calc-label { text-transform: capitalize; }
     & .crisp-board-col-calc-value { color: ${tokens_1.contract.fgPrimary}; font-variant-numeric: tabular-nums; }
+    /* #718: "Add stage" -- measured live: 52×52px, transparent, a 1px
+       dashed border (rgb(230,231,234), exactly \`borderDropzone\`/\`line150\`
+       -- the same dashed-border colour ImportDialog's own dropzone already
+       uses, not borderSubtle/line100, a close but different value), radius.xl
+       (16px), a centered 16px "+". */
+    & .crisp-board-addstage { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px dashed ${tokens_1.contract.borderDropzone}; border-radius: ${tokens_1.contract.radius.xl}; background: none; color: ${tokens_1.contract.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-board-addstage:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); }
     /* announced, never drawn */
     & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

package/dist/cjs/product/comments/comments.js

@@ -304,8 +304,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 ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row", children: [(0, jsx_runtime_1.jsx)(AuthorAvatar, { author: comment.author }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-resolved-label", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-author", children: comment.author.name }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-time", children: comment.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact(r.emoji), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-actions", children: [onReply && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: onReact }) }), resolvable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), (0, jsx_runtime_1.jsx)(menu_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row", children: [(0, jsx_runtime_1.jsx)(AuthorAvatar, { author: comment.author }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-main", children: [resolvedLabel != null && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-resolved-label", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 2.5, "aria-hidden": "true" }), resolvedLabel] })), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-head", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-author", children: comment.author.name }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-time", children: comment.time })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body-text", children: comment.body }), comment.reactions && comment.reactions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-reactions", children: [comment.reactions.map((r) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-reaction", "data-reacted": r.reactedByMe ? "" : undefined, onClick: () => onReact?.(r.emoji), children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", children: r.emoji }), r.count] }, r.emoji))), (0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "start", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-reaction-add", "aria-label": addReactionLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: (emoji) => onReact?.(emoji) }) })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-row-actions", children: [onReply && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": replyLabel, onClick: onReply, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CornerUpLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 2, "aria-hidden": "true" }) })), reactable && ((0, jsx_runtime_1.jsx)(popover_1.Popover, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": reactLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.SmilePlus, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: (0, jsx_runtime_1.jsx)(ReactionPicker, { options: emojiOptions, searchLabel: reactionSearchLabel, onPick: (emoji) => onReact?.(emoji) }) })), resolvable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": resolveLabel, "aria-pressed": !!resolved, "data-active": resolved ? "" : undefined, onClick: onResolve, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-action", "aria-label": moreLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { onSelect: onCopyLink, children: copyLinkLabel }), onDeleteRequest && ((0, jsx_runtime_1.jsx)(menu_1.MenuItem, { danger: true, onSelect: onDeleteRequest, children: deleteLabel }))] })] })] }));
 }
 /**
  * Per-record comment threads (crisp#625) — measured live on app.attio.com's
@@ -369,29 +369,42 @@ function CommentsPanel({ threads, currentUserId, subject, subjectIcon, showResol
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, comments_recipe_1.commentsRecipe)({ className }), role: "dialog", "aria-label": title, ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-head", children: [activeThread ? ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, (0, jsx_runtime_1.jsxs)("div", { className: "crisp-comments-title-wrap", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && ((0, jsx_runtime_1.jsxs)("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && ((0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), (0, jsx_runtime_1.jsx)(menu_1.MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(CommentRow, { comment: activeThread.root, currentUserId: currentUserId, replyLabel: replyActionLabel, reactLabel: reactActionLabel, resolveLabel: resolveActionLabel, moreLabel: moreActionsLabel, copyLinkLabel: copyLinkLabel, deleteLabel: deleteLabel, addReactionLabel: addReactionLabel, reactionSearchLabel: reactionSearchLabel, emojiOptions: emojiOptions, resolvable: !!onResolve, resolved: activeThread.resolved, resolvedLabel: activeThread.resolved
                                 ? activeThread.resolvedBy?.id === currentUserId ||
                                     !activeThread.resolvedBy
                                     ? 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 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-replies", children: activeThread.replies.map((reply) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-empty", children: emptyLabel })) : (visibleThreads.map((t) => ((0, jsx_runtime_1.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 && ((0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-replies", children: activeThread.replies.map((reply) => ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: "crisp-comments-empty", children: emptyLabel })) : (visibleThreads.map((t) => ((0, jsx_runtime_1.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)))) }), (0, jsx_runtime_1.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"), (0, jsx_runtime_1.jsxs)(dialog_1.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)))) }), (0, jsx_runtime_1.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"), (0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: deleteTarget != null, onOpenChange: (open) => {
                     if (!open)
                         setDeleteTarget(null);
                 }, title: deleteConfirmTitle, children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogBody, { children: deleteConfirmBody }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", size: "md", onClick: () => setDeleteTarget(null), children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.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 })] })] })] }));
 }
@@ -413,6 +426,15 @@ function CommentCountBadge({ count, hovered, onOpen, onOpenPreview, label: label
                 ? `crisp-comments-badge ${className}`
                 : "crisp-comments-badge", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-dot" }) }));
     }
-    return ((0, jsx_runtime_1.jsxs)("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-badge", "aria-label": label, onClick: onOpen, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-badge", "aria-label": previewLabel, onClick: onOpenPreview, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowUpRight, { "data-rtl-flip": "", size: 12, strokeWidth: 2, "aria-hidden": "true" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-comments-badge-trigger", "aria-label": label, onClick: (ev) => {
+                    // this badge lives in a grid row (crisp/#601 supersession) whose
+                    // own click opens the record -- the same stopPropagation every
+                    // other per-row affordance in that cell already uses.
+                    ev.stopPropagation();
+                    onOpen();
+                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-comments-badge-preview", "aria-label": previewLabel, onClick: (ev) => {
+                    ev.stopPropagation();
+                    onOpenPreview();
+                }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }));
 }
 CommentCountBadge.displayName = "CommentCountBadge";

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

@@ -36,12 +36,26 @@ const config = (0, core_1.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: ${tokens_1.contract.space["1.5"]}; }
     & .crisp-comments-row-main { flex: 1; min-width: 0; }
     & .crisp-comments-row-head { display: flex; align-items: baseline; gap: ${tokens_1.contract.space["1.5"]}; height: 20px; }
-    & .crisp-comments-author { font-size: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
-    & .crisp-comments-time { font-size: 12px; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.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: ${tokens_1.contract.text.lg}; font-weight: ${tokens_1.contract.weight.semibold}; color: ${tokens_1.contract.fgPrimary}; }
+    & .crisp-comments-time { flex-shrink: 0; font-size: 12px; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); white-space: nowrap; }
     & .crisp-comments-resolved-label { display: flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; margin-bottom: ${tokens_1.contract.space["1"]}; font-size: 12px; font-weight: ${tokens_1.contract.weight.medium}; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 63%, transparent); }
     & .crisp-comments-body-text { font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgPrimary}; white-space: pre-wrap; word-break: break-word; }
 
@@ -129,11 +143,21 @@ const config = (0, core_1.defineRecipe)({
 
     /* Row badge (CommentCountBadge) -- lives in its own class family so the
        grid lanes can drop it into a cell without pulling in the panel's
-       CSS. Persistent state: a 6px grey dot. Hover state: a 12px comment
-       icon + 12px count text, both at 55% ink, replacing the dot. */
-    .crisp-comments-badge { box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); }
+       CSS. Re-measured live on a real commented row (crisp/#601
+       supersession, right-aligned in a DataTable primary column): a 6px
+       grey dot at rest (unchanged, already matched); on hover, the trigger
+       button is auto-width with a 12px icon + 12px/500 count text,
+       "padding: 2px 6px 2px 4px", radius 6px -- distinct from the preview
+       button beside it, a fixed 20px square with a 16px icon, same radius.
+       Both share the 55%-ink idle colour and darken on their OWN hover
+       (color-mix 4%, the same formula DataTable's own #601 icons use). */
+    .crisp-comments-badge { box-sizing: border-box; font-family: ${tokens_1.contract.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1.5"]}; }
     .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: ${tokens_1.contract.radius.full}; background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 38%, transparent); }
-    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; }
+    .crisp-comments-badge-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; height: 20px; margin: 0; padding: 2px ${tokens_1.contract.space["1.5"]} 2px ${tokens_1.contract.space["1"]}; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; }
+    .crisp-comments-badge-trigger:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-comments-badge-preview { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: ${tokens_1.contract.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    .crisp-comments-badge-preview:hover { background: color-mix(in srgb, ${tokens_1.contract.fgPrimary} 4%, transparent); color: ${tokens_1.contract.fgPrimary}; }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium}; }
     [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
   `,
 });

package/dist/cjs/product/formdialog/formdialog.js

@@ -69,13 +69,19 @@ 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.
  */
-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 }) {
+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 = (0, core_1.useCrispMessage)(createMoreLabelProp, "Create more");
     const createRecordLabel = (0, core_1.useCrispMessage)(undefined, "Create record");
     const cancelLabel = (0, core_1.useCrispMessage)(cancelLabelProp, "Cancel");
-    const discardTitle = (0, core_1.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 = (0, core_1.useCrispMessage)(discardTitleProp, "Discard changes");
+    const discardDescription = (0, core_1.useCrispMessage)(discardDescriptionProp, "Are you sure you want to discard these changes?");
     const discardConfirmLabel = (0, core_1.useCrispMessage)(discardConfirmLabelProp, "Discard");
-    const discardCancelLabel = (0, core_1.useCrispMessage)(discardCancelLabelProp, "Keep editing");
+    const discardCancelLabel = (0, core_1.useCrispMessage)(discardCancelLabelProp, "Cancel");
     const formId = React.useId();
     const formRef = React.useRef(null);
     const switchId = React.useId();
@@ -163,7 +169,7 @@ function FormDialog({ title, submitLabel, onSubmit, onClose, busy, error, childr
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(dialog_1.Dialog, { open: true, onOpenChange: (open) => !open && requestClose(), title: title, width: size ?? (wide ? 760 : 640), className: (0, formdialog_recipe_1.formdialogRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogBody, { children: [(0, jsx_runtime_1.jsx)(OptionalLabelsContext.Provider, { value: createMode, children: (0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("p", { className: "crisp-formdialog-error", children: error })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: createMode ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-formdialog-createfoot", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), (0, jsx_runtime_1.jsx)("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), title: discardTitle, width: 400, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "danger", onClick: () => {
+                                    }, onChange: markDirty, onInput: markDirty, onClick: markDirty, children: children }) }), error != null && (0, jsx_runtime_1.jsx)("p", { className: "crisp-formdialog-error", children: error })] }), (0, jsx_runtime_1.jsx)(dialog_1.DialogFooter, { children: createMode ? ((0, jsx_runtime_1.jsxs)("div", { className: "crisp-formdialog-createfoot", children: [(0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-more", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { id: switchId, checked: createMore, onCheckedChange: setCreateMore, "aria-label": createMoreLabel }), (0, jsx_runtime_1.jsx)("label", { className: "crisp-formdialog-more-label", htmlFor: switchId, children: createMoreLabel })] }), (0, jsx_runtime_1.jsxs)("button", { type: "submit", form: formId, className: "crisp-dialog-submit", disabled: busy, children: [createRecordLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-dialog-submit-key", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: requestClose, children: cancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "submit", form: formId, intent: "primary", loading: busy, children: submitLabel })] })) })] }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: confirmingDiscard, onOpenChange: (open) => !open && setConfirmingDiscard(false), variant: "alert", title: discardTitle, description: discardDescription, width: 440, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { variant: "alert", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "neutral", onClick: () => setConfirmingDiscard(false), children: discardCancelLabel }), (0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", intent: "danger", onClick: () => {
                                 setConfirmingDiscard(false);
                                 onClose();
                             }, children: discardConfirmLabel })] }) })] }));

package/dist/cjs/product/navitem/navitem.js

@@ -36,9 +36,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
+const kbd_1 = require("../../components/kbd");
+const tooltip_1 = require("../../components/tooltip");
 const core_1 = require("../../core");
 const navitem_recipe_1 = require("./navitem.recipe");
-exports.NavItem = React.forwardRef(({ active, icon, trailing, className, children, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsxs)(core_1.Primitive.a, { ref: ref, "data-active": active || undefined, className: (0, navitem_recipe_1.navitemRecipe)({ className }), ...props, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-label", children: children }), trailing != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
+exports.NavItem = React.forwardRef(({ active, icon, trailing, shortcut, className, children, ...props }, ref) => {
+    const row = ((0, jsx_runtime_1.jsxs)(core_1.Primitive.a, { ref: ref, "data-active": active || undefined, className: (0, navitem_recipe_1.navitemRecipe)({ className }), ...props, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-label", children: children }), trailing != null && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-trailing", children: trailing }))] }));
+    if (!shortcut)
+        return row;
+    return ((0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { asChild: true, side: "right", delay: 500, content: (0, jsx_runtime_1.jsxs)("span", { className: "crisp-navitem-shortcut", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-shortcut-desc", children: shortcut.description }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-shortcut-chord", children: shortcut.keys.map((key, i) => ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [i > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "crisp-navitem-shortcut-then", children: "then" })), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { children: key })] }, i))) })] }), children: row }));
 });
 exports.NavItem.displayName = "NavItem";

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

@@ -21,6 +21,22 @@ const config = (0, core_1.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: ${tokens_1.contract.space["3"]}; }
+    .crisp-navitem-shortcut-desc { font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; line-height: 16px; white-space: nowrap; }
+    .crisp-navitem-shortcut-chord { display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]}; flex-shrink: 0; }
+    .crisp-navitem-shortcut-then { font-size: ${tokens_1.contract.text.xs}; font-weight: ${tokens_1.contract.weight.medium}; color: #898a8d; }
+    .crisp-navitem-shortcut-chord .crisp-kbd { text-transform: uppercase; font-weight: ${tokens_1.contract.weight.regular}; color: #a2a4a7; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
+  `,
 });
 exports.navitemRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.objectsettingsRecipe = exports.ObjectsList = exports.ObjectSettings = exports.ObjectGeneralSection = exports.ObjectDetailPage = exports.ObjectAppearanceSection = exports.CreateAttributeDialog = exports.AttributeTypeSelect = exports.AttributesTable = exports.ATTRIBUTE_TYPE_OPTIONS = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = void 0;
+exports.objectsettingsRecipe = exports.ObjectsList = exports.ObjectGeneralSection = exports.ObjectDetailPage = exports.ObjectAppearanceSection = exports.CreateAttributeDialog = exports.AttributeTypeSelect = exports.AttributesTable = exports.ATTRIBUTE_TYPE_OPTIONS = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = void 0;
 var objectsettings_1 = require("./objectsettings");
 Object.defineProperty(exports, "ATTRIBUTE_AI_AUTOFILL_OPTIONS", { enumerable: true, get: function () { return objectsettings_1.ATTRIBUTE_AI_AUTOFILL_OPTIONS; } });
 Object.defineProperty(exports, "ATTRIBUTE_TYPE_OPTIONS", { enumerable: true, get: function () { return objectsettings_1.ATTRIBUTE_TYPE_OPTIONS; } });
@@ -10,7 +10,6 @@ Object.defineProperty(exports, "CreateAttributeDialog", { enumerable: true, get:
 Object.defineProperty(exports, "ObjectAppearanceSection", { enumerable: true, get: function () { return objectsettings_1.ObjectAppearanceSection; } });
 Object.defineProperty(exports, "ObjectDetailPage", { enumerable: true, get: function () { return objectsettings_1.ObjectDetailPage; } });
 Object.defineProperty(exports, "ObjectGeneralSection", { enumerable: true, get: function () { return objectsettings_1.ObjectGeneralSection; } });
-Object.defineProperty(exports, "ObjectSettings", { enumerable: true, get: function () { return objectsettings_1.ObjectSettings; } });
 Object.defineProperty(exports, "ObjectsList", { enumerable: true, get: function () { return objectsettings_1.ObjectsList; } });
 var objectsettings_recipe_1 = require("./objectsettings.recipe");
 Object.defineProperty(exports, "objectsettingsRecipe", { enumerable: true, get: function () { return objectsettings_recipe_1.objectsettingsRecipe; } });

package/dist/cjs/product/objectsettings/objectsettings.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectSettings = exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
+exports.ATTRIBUTE_AI_AUTOFILL_OPTIONS = exports.ATTRIBUTE_TYPE_OPTIONS = void 0;
 exports.ObjectsList = ObjectsList;
 exports.ObjectDetailPage = ObjectDetailPage;
 exports.ObjectGeneralSection = ObjectGeneralSection;
@@ -157,7 +157,7 @@ function ObjectDetailPage({ icon, iconColor, name, typeLabel, description, tab,
             setInternalTab(next);
         onTabChange?.(next);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-page", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-objectsettings-head", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-heading", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "small", children: typeLabel }))] }), description != null && ((0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: active, onValueChange: setTab, tabs: [
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-page", children: [(0, jsx_runtime_1.jsx)("div", { className: "crisp-objectsettings-head", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", gap: 12 }, children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-icon crisp-objectsettings-icon--lg", style: { background: iconColor ?? "currentColor" }, children: icon }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-heading", children: [(0, jsx_runtime_1.jsxs)("h1", { className: "crisp-objectsettings-title", children: [name, typeLabel != null && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "medium", children: typeLabel }))] }), description != null && ((0, jsx_runtime_1.jsx)("p", { className: "crisp-objectsettings-subtitle", children: description }))] })] }) }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { value: active, onValueChange: setTab, tabs: [
                         { value: "configuration", label: configurationLabel },
                         {
                             value: "attributes",
@@ -245,7 +245,7 @@ function AttributesTable({ attributes, onOpenAttribute, onEditAttribute, onArchi
         {
             key: "properties",
             header: propertiesColumnLabel,
-            render: (_v, row) => ((0, jsx_runtime_1.jsxs)("span", { style: { display: "flex", gap: 6 }, children: [row.system && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "small", children: systemLabel })), row.enriched && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "purple", size: "small", children: enrichedLabel }))] })),
+            render: (_v, row) => ((0, jsx_runtime_1.jsxs)("span", { style: { display: "flex", gap: 6 }, children: [row.system && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "neutral", size: "medium", children: systemLabel })), row.enriched && ((0, jsx_runtime_1.jsx)(badge_1.Badge, { tone: "purple", size: "medium", children: enrichedLabel }))] })),
         },
         {
             key: "actions",
@@ -353,13 +353,3 @@ function CreateAttributeDialog({ type, onTypeChange, typeOptions, aiAutofillType
     return ((0, jsx_runtime_1.jsxs)(formdialog_1.FormDialog, { title: title, submitLabel: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [createLabel, (0, jsx_runtime_1.jsxs)("span", { className: "crisp-objectsettings-kbd", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("kbd", { children: "\u2318" }), (0, jsx_runtime_1.jsx)("kbd", { children: "\u21B5" })] })] }), onSubmit: onSubmit, onClose: onClose, busy: busy, error: error, size: 520, className: (0, objectsettings_recipe_1.objectsettingsRecipe)(), children: [(0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: attributeTypeLabel, children: (0, jsx_runtime_1.jsx)(AttributeTypeSelect, { value: type, onValueChange: onTypeChange, options: typeOptions, aiAutofillOptions: aiAutofillTypeOptions }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: nameLabel, htmlFor: nameId, children: (0, jsx_runtime_1.jsx)(input_1.Input, { id: nameId, autoFocus: true, value: name, onChange: (e) => onNameChange(e.target.value) }) }), (0, jsx_runtime_1.jsx)(formfield_1.FormField, { label: descriptionLabel, optional: true, children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: descriptionPlaceholder, value: description, onChange: (e) => onDescriptionChange(e.target.value) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-objectsettings-aiautofill", children: [(0, jsx_runtime_1.jsx)("span", { className: "crisp-objectsettings-aiautofill-label", children: aiAutofillLabel }), (0, jsx_runtime_1.jsxs)("label", { className: "crisp-objectsettings-aiautofill-row", htmlFor: switchId, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: setUpAiAutofillLabel }), (0, jsx_runtime_1.jsx)(switch_1.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.
- */
-exports.ObjectSettings = ObjectsList;

package/dist/cjs/product/recordstable/recordstable.js

@@ -193,7 +193,6 @@ exports.recordsTableLabels = {
     selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
     delete: "Delete",
     sendEmail: "Send email",
-    exportCsv: "Export CSV",
     runWorkflow: "Run workflow",
     calculate: "Calculate",
     emptyPlaceholder: "Empty",
@@ -1043,21 +1042,6 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
         setData((prev) => prev.filter((r) => !selected.has(r.id)));
         setSelected(new Set());
     };
-    const exportSelected = () => {
-        const picked = data.filter((r) => selected.has(r.id));
-        const esc = (s) => `"${s.replace(/"/g, '""')}"`;
-        const csv = [
-            cols.map((c) => esc(c.label)).join(","),
-            ...picked.map((r) => cols.map((c) => esc(cellText(c, r))).join(",")),
-        ].join("\n");
-        const url = URL.createObjectURL(new Blob([csv], { type: "text/csv;charset=utf-8" }));
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = "records.csv";
-        a.click();
-        URL.revokeObjectURL(url);
-        setOpenMenu(null);
-    };
     const entityCol = cols.find((c) => c.type === "entity");
     // "Add to list" → pin the selected rows (shows a ★ on the entity)
     const addToList = () => {
@@ -1303,7 +1287,7 @@ function RecordsTable({ labels, columns: columnsProp = exports.defaultColumns, r
                             // filtered-to-zero ring -- two different Attio surfaces.
                             variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Inbox, { size: !activeFilters && emptyStateExtra ? 40 : 18, strokeWidth: 1.25, "aria-hidden": "true" })), title: activeFilters ? "No records match that filter" : t.noRecords, description: activeFilters
                                 ? "None of your records match the filters that are set."
-                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
+                                : `Create your first ${cols.find((c) => c.type === "entity")?.label?.toLowerCase() ?? "record"} to get started.`, action: activeFilters ? ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "primary", size: "sm", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && ((0, jsx_runtime_1.jsxs)(button_1.Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && ((0, jsx_runtime_1.jsxs)(bulkbar_1.BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [(0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { align: "end", "aria-label": t.moreActions, trigger: (0, jsx_runtime_1.jsx)(bulkbar_1.BulkBarButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete }) })] })), (0, jsx_runtime_1.jsx)(CreateRecordDialog, { labels: t, open: creating, onOpenChange: setCreating, columns: cols, entityLabel: cols.find((c) => c.type === "entity")?.label ?? "record", onCreate: (row) => setData((prev) => [...prev, row]) }), ctxMenu &&
                 (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)("div", { ref: ctxRef, className: "crisp-recordstable-menu crisp-recordstable-ctx", role: "menu", "aria-label": t.recordActions, style: { position: "fixed", top: ctxMenu.y, left: ctxMenu.x }, onKeyDown: onCtxKeyDown, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 exports.defaultColumns = [

package/dist/cjs/product/richtext/richtext.js

@@ -106,6 +106,71 @@ function matchSlashTrigger(textBeforeCaret, trigger = "/") {
     return { query, start };
 }
 const exec = (cmd, value) => document.execCommand(cmd, false, value);
+/**
+ * #685: `execCommand("insertUnorderedList"/"insertOrderedList")` is built
+ * through DOM APIs, not the HTML parser, so it can leave the live DOM in a
+ * shape the parser itself would never produce: a `<ul>`/`<ol>` as a literal
+ * child of the `<p>` it converted, e.g. `<p><ul><li>text</li></ul></p>`.
+ * That's invalid content for a `<p>` — reading `innerHTML` back and later
+ * re-parsing it (a fresh mount, GRC reloading a stored note) auto-closes the
+ * `<p>` the instant the parser meets the `<ul>`, which leaves a now-empty
+ * `<p></p>` sitting next to the list instead. Two different malformed
+ * shapes, one root cause, so one function fixes both: unwrap a `<ul>`/`<ol>`
+ * that's still literally nested inside a `<p>` (the freshly-converted case),
+ * and drop an empty `<p>` that ended up glued to a list (the reloaded-old-
+ * content case) — matching Attio's own structure, where the list is always
+ * a sibling of the surrounding `<p>` blocks, never nested in or padded by
+ * one.
+ */
+const normalizeListStructure = (root) => {
+    for (const list of root.querySelectorAll("p > ul, p > ol")) {
+        const p = list.parentElement;
+        if (!p)
+            continue;
+        const before = [];
+        const after = [];
+        let seenList = false;
+        for (const child of Array.from(p.childNodes)) {
+            if (child === list) {
+                seenList = true;
+            }
+            else if (seenList) {
+                after.push(child);
+            }
+            else {
+                before.push(child);
+            }
+        }
+        const isBlank = (nodes) => nodes.every((n) => (n.textContent ?? "").trim() === "");
+        const parent = p.parentElement;
+        if (!parent)
+            continue;
+        if (!isBlank(before)) {
+            const leading = document.createElement("p");
+            for (const n of before)
+                leading.appendChild(n);
+            parent.insertBefore(leading, p);
+        }
+        parent.insertBefore(list, p);
+        if (!isBlank(after)) {
+            const trailing = document.createElement("p");
+            for (const n of after)
+                trailing.appendChild(n);
+            parent.insertBefore(trailing, p);
+        }
+        parent.removeChild(p);
+    }
+    for (const list of root.querySelectorAll("ul, ol")) {
+        const isEmptyP = (el) => !!el &&
+            el.tagName === "P" &&
+            el.children.length === 0 &&
+            (el.textContent ?? "").trim() === "";
+        if (isEmptyP(list.previousElementSibling))
+            list.previousElementSibling?.remove();
+        if (isEmptyP(list.nextElementSibling))
+            list.nextElementSibling?.remove();
+    }
+};
 /**
  * A block rich-text editor — measured from Attio's own notes editor. A large
  * title, a prose body (h1/h2/h3, bulleted/numbered lists, an image block,
@@ -217,8 +282,14 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     React.useEffect(() => {
         if (titleRef.current)
             titleRef.current.textContent = defaultTitle;
-        if (bodyRef.current)
+        if (bodyRef.current) {
             bodyRef.current.innerHTML = defaultHtml;
+            // #685: normalize any pre-existing `<p><ul>` nesting (or its
+            // reloaded shape, an empty `<p>` glued to the list) from content
+            // stored before the fix, so it renders correctly instead of staying
+            // broken forever.
+            normalizeListStructure(bodyRef.current);
+        }
         syncEmpty(titleRef.current);
         syncEmpty(bodyRef.current);
     }, []);
@@ -407,6 +478,10 @@ exports.RichTextEditor = React.forwardRef(function RichTextEditor({ defaultTitle
     const run = (cmd, value) => {
         bodyRef.current?.focus();
         exec(cmd, value);
+        // #685: insertUnorderedList/insertOrderedList can leave the new list
+        // nested inside the `<p>` it converted instead of replacing it.
+        if (bodyRef.current)
+            normalizeListStructure(bodyRef.current);
         updateBar();
         syncEmpty(bodyRef.current);
         emit();