@crisp-ui-kit/crisp 0.54.7 → 0.54.9

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

@@ -15,23 +15,68 @@ import { contract as c } from "../../tokens/index.js";
 // reference lacks).
 const config = defineRecipe({
     name: "board",
-    base: `display: flex; gap: ${c.space["2"]}; height: 100%; box-sizing: border-box; padding: ${c.space["3"]}; overflow-x: auto; align-items: flex-start; font-family: ${c.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: ${c.space["2"]}; height: 100%; box-sizing: border-box; font-family: ${c.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: ${c.space["2"]}; padding: 0 ${c.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, ${c.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, ${c.fgPrimary} 63%, transparent); font-family: inherit; cursor: pointer; }
+    & .crisp-board-density button[data-state="on"] { background: ${c.bgSurface}; color: ${c.fgPrimary}; }
+    & .crisp-board-row { display: flex; gap: ${c.space["2"]}; flex: 1; min-height: 0; box-sizing: border-box; padding: ${c.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: ${c.space["2"]} 0; gap: ${c.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: ${c.text.lg}; font-weight: ${c.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: ${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; }
+    /* #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 ${c.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 ${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
@@ -42,6 +87,13 @@ const config = defineRecipe({
     & .crisp-board-col-calc[data-empty] { opacity: 0.7; }
     & .crisp-board-col-calc-label { text-transform: capitalize; }
     & .crisp-board-col-calc-value { color: ${c.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 ${c.borderDropzone}; border-radius: ${c.radius.xl}; background: none; color: ${c.fgPrimary}; font-family: inherit; cursor: pointer; }
+    & .crisp-board-addstage:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); }
     /* announced, never drawn */
     & .crisp-board-live {
       position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

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

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowUpRight, Check, ChevronLeft, CornerUpLeft, ListFilter, MessageSquare, MoreHorizontal, SmilePlus, X, } from "lucide-react";
+import { Check, ChevronLeft, CornerUpLeft, ListFilter, MessageSquare, MoreHorizontal, PanelRight, SmilePlus, X, } from "lucide-react";
 import * as React from "react";
 import { Avatar } from "../../components/avatar/index.js";
 import { Button } from "../../components/button/index.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
@@ -331,29 +331,42 @@ export function CommentsPanel({ threads, currentUserId, subject, subjectIcon, sh
     const activeThread = activeThreadId
         ? threads.find((t) => t.id === activeThreadId)
         : null;
-    return (_jsxs("div", { className: commentsRecipe({ className }), role: "dialog", "aria-label": title, ...rest, children: [_jsxs("div", { className: "crisp-comments-head", children: [activeThread ? (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "crisp-comments-title-wrap", children: [_jsx("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && (_jsxs("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: _jsx(ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), _jsx(MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })] }), _jsx("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? (_jsxs("div", { children: [_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 (_jsxs("div", { className: commentsRecipe({ className }), role: "dialog", "aria-label": title, ...rest, children: [_jsxs("div", { className: "crisp-comments-head", children: [activeThread ? (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": backLabel, onClick: () => setActiveThreadId(null), children: _jsx(ChevronLeft, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) : null, _jsxs("div", { className: "crisp-comments-title-wrap", children: [_jsx("span", { className: "crisp-comments-title", children: activeThread ? threadTitle : title }), activeThread && (_jsxs("span", { className: "crisp-comments-breadcrumb", children: [breadcrumbPrefix, " ", subjectIcon, " ", subject] }))] }), !activeThread && (_jsxs(Menu, { align: "end", trigger: _jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": filterLabel, children: _jsx(ListFilter, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }), children: [_jsx(MenuCheckboxItem, { checked: showResolved, onCheckedChange: onShowResolvedChange, children: showResolvedLabel }), _jsx(MenuCheckboxItem, { checked: onlyMine, onCheckedChange: onOnlyMineChange, children: onlyMineLabel })] })), onClose && (_jsx("button", { type: "button", className: "crisp-comments-headbtn", "aria-label": closeLabel, onClick: onClose, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }), _jsx("div", { className: "crisp-comments-body crisp-comments-body--pad-top", children: activeThread ? (_jsxs("div", { children: [_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 && (_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 })] })] })] }));
 }
@@ -375,6 +388,15 @@ export function CommentCountBadge({ count, hovered, onOpen, onOpenPreview, label
                 ? `crisp-comments-badge ${className}`
                 : "crisp-comments-badge", "aria-hidden": "true", children: _jsx("span", { className: "crisp-comments-badge-dot" }) }));
     }
-    return (_jsxs("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [_jsxs("button", { type: "button", className: "crisp-comments-badge", "aria-label": label, onClick: onOpen, children: [_jsx(MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && (_jsx("button", { type: "button", className: "crisp-comments-badge", "aria-label": previewLabel, onClick: onOpenPreview, children: _jsx(ArrowUpRight, { "data-rtl-flip": "", size: 12, strokeWidth: 2, "aria-hidden": "true" }) }))] }));
+    return (_jsxs("span", { className: className ? `crisp-comments-badge ${className}` : "crisp-comments-badge", children: [_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: [_jsx(MessageSquare, { size: 12, strokeWidth: 2, "aria-hidden": "true" }), count > 0 && (_jsx("span", { className: "crisp-comments-badge-count", children: count }))] }), onOpenPreview && (_jsx("button", { type: "button", className: "crisp-comments-badge-preview", "aria-label": previewLabel, onClick: (ev) => {
+                    ev.stopPropagation();
+                    onOpenPreview();
+                }, children: _jsx(PanelRight, { "data-rtl-flip": "", size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }))] }));
 }
 CommentCountBadge.displayName = "CommentCountBadge";

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; }
 
@@ -126,11 +140,21 @@ const config = 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: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${c.space["1"]}; border: none; background: none; padding: 0; margin: 0; cursor: pointer; color: color-mix(in srgb, ${c.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: ${c.font.sans}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-flex; align-items: center; gap: ${c.space["1.5"]}; }
     .crisp-comments-badge-dot { box-sizing: border-box; width: 6px; height: 6px; border-radius: ${c.radius.full}; background: color-mix(in srgb, ${c.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: ${c.space["1"]}; height: 20px; margin: 0; padding: 2px ${c.space["1.5"]} 2px ${c.space["1"]}; border: none; border-radius: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; }
+    .crisp-comments-badge-trigger:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.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: ${c.radius.sm}; background: none; font-family: inherit; color: color-mix(in srgb, ${c.fgPrimary} 55%, transparent); cursor: pointer; flex-shrink: 0; }
+    .crisp-comments-badge-preview:hover { background: color-mix(in srgb, ${c.fgPrimary} 4%, transparent); color: ${c.fgPrimary}; }
+    .crisp-comments-badge-count { font-size: 12px; line-height: 16px; font-weight: ${c.weight.medium}; }
     [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
   `,
 });

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;

package/dist/esm/product/recordstable/recordstable.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, Download, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plug, Plus, Star, Tag, Trash2, TrendingUp, Upload, Users, Workflow, X, } from "lucide-react";
+import { ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, ArrowUpRight, AtSign, Briefcase, Building2, Calendar, Check, CircleHelp, CircleUserRound, Copy, CopyPlus, CornerDownLeft, EyeOff, Globe, GripVertical, Hash, Inbox, ListFilter, ListPlus, Mail, MapPin, MoreHorizontal, Pencil, Plug, Plus, Star, Tag, Trash2, TrendingUp, Upload, Users, Workflow, X, } from "lucide-react";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { Avatar } from "../../components/avatar/index.js";
@@ -154,7 +154,6 @@ export const recordsTableLabels = {
     selectionAnnouncement: (count) => count === 0 ? "Selection cleared" : `${count} selected`,
     delete: "Delete",
     sendEmail: "Send email",
-    exportCsv: "Export CSV",
     runWorkflow: "Run workflow",
     calculate: "Calculate",
     emptyPlaceholder: "Empty",
@@ -1003,21 +1002,6 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
         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 = () => {
@@ -1263,7 +1247,7 @@ export function RecordsTable({ labels, columns: columnsProp = defaultColumns, ro
                             // filtered-to-zero ring -- two different Attio surfaces.
                             variant: !activeFilters && emptyStateExtra ? "records" : "page", icon: activeFilters ? (_jsx(ListFilter, { size: 18, strokeWidth: 1.75, "aria-hidden": "true" })) : (_jsx(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 ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [_jsx(Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsxs(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: [_jsx(MenuItem, { icon: _jsx(Download, { size: 15, strokeWidth: 1.75 }), onSelect: exportSelected, children: t.exportCsv }), _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete })] })] })), _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 ? (_jsxs(Button, { intent: "primary", size: "sm", onClick: () => setFilterConds([]), children: [_jsx(ListFilter, { size: 15, strokeWidth: 1.75 }), t.clearFilter] })) : (_jsxs(_Fragment, { children: [_jsxs(Button, { intent: "primary", size: "sm", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75 }), t.newRecord] }), emptyStateExtra?.onImportCsv && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onImportCsv, children: [_jsx(Upload, { size: 15, strokeWidth: 1.75 }), t.importCsv] })), emptyStateExtra?.onConnectDataSource && (_jsxs(Button, { intent: "neutral", size: "sm", onClick: emptyStateExtra.onConnectDataSource, children: [_jsx(Plug, { size: 15, strokeWidth: 1.75 }), t.connectDataSource] }))] })), learnMore: !activeFilters ? emptyStateExtra?.learnMore : undefined }) })) : (_jsxs("button", { type: "button", className: "crisp-recordstable-addrow", onClick: addRow, children: [_jsx(Plus, { size: 15, strokeWidth: 1.75, "aria-hidden": "true" }), t.newRecord] }))] }), _jsx("div", { className: "crisp-recordstable-live", role: "status", "aria-live": "polite", children: selectionAnnouncement }), selected.size > 0 && (_jsxs(BulkBar, { count: selected.size, countLabel: t.selectedCount, onClear: () => setSelected(new Set()), children: [_jsx(BulkBarButton, { icon: _jsx(ListPlus, { size: 15, strokeWidth: 1.75 }), onClick: addToList, children: t.addToList }), _jsx(BulkBarButton, { icon: _jsx(Mail, { size: 15, strokeWidth: 1.75 }), onClick: sendEmail, children: t.sendEmail }), _jsx(BulkBarButton, { icon: _jsx(Workflow, { size: 15, strokeWidth: 1.75 }), onClick: runWorkflow, children: t.runWorkflow }), _jsx(Menu, { align: "end", "aria-label": t.moreActions, trigger: _jsx(BulkBarButton, { icon: _jsx(MoreHorizontal, { size: 15, strokeWidth: 1.75 }), children: t.more }), children: _jsx(MenuItem, { icon: _jsx(Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, onSelect: deleteSelected, children: t.delete }) })] })), _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 &&
                 createPortal(_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: [_jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => copyRow(ctxMenu.id), children: [_jsx(Copy, { size: 15, strokeWidth: 1.75 }), t.copy] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => duplicateRow(ctxMenu.id), children: [_jsx(CopyPlus, { size: 15, strokeWidth: 1.75 }), t.duplicate] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item", role: "menuitem", tabIndex: -1, onClick: () => pinRow(ctxMenu.id), children: [_jsx(Star, { size: 15, strokeWidth: 1.75 }), t.addToList] }), _jsxs("button", { type: "button", className: "crisp-recordstable-menu-item crisp-recordstable-menu-item--danger", role: "menuitem", tabIndex: -1, onClick: () => deleteRow(ctxMenu.id), children: [_jsx(Trash2, { size: 15, strokeWidth: 1.75 }), t.delete] })] }), rootRef.current ?? document.body)] }));
 }
 export const defaultColumns = [

package/dist/esm/product/richtext/richtext.js

@@ -70,6 +70,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,
@@ -181,8 +246,14 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     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);
     }, []);
@@ -371,6 +442,10 @@ export const RichTextEditor = React.forwardRef(function RichTextEditor({ default
     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();