@flanksource/clicky-ui 0.3.25 → 0.3.26

package/dist/comments/CommentCard.js

@@ -8,12 +8,40 @@ import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { parseTimestamp, formatRelativeTime } from "../data/cells/timestamp-format.js";
 import { CommentAuthorAvatar } from "./CommentAuthor.js";
 import { CommentMarkdown } from "./CommentMarkdown.js";
-import { authorDisplayName, truncatePlain, resolveFacetOption, toneToBadgeTone, resolveStatusConfig } from "./comment-utils.js";
+import { isUnresolved, authorDisplayName, truncatePlain, resolveFacetOption, toneToBadgeTone, resolveStatusConfig } from "./comment-utils.js";
+import { UiCheck } from "../icons/components/UiCheck.js";
 import { UiFullscreen } from "../icons/components/UiFullscreen.js";
 import { UiDotsVertical } from "../icons/components/UiDotsVertical.js";
-import { UiCheck } from "../icons/components/UiCheck.js";
+import { UiThumbsUp } from "../icons/components/UiThumbsUp.js";
+import { UiThumbsDown } from "../icons/components/UiThumbsDown.js";
 import { UiClose } from "../icons/components/UiClose.js";
 import { UiTrash } from "../icons/components/UiTrash.js";
+function completionStatus(config) {
+  for (const completionName of ["resolved", "closed"]) {
+    const status = config.statuses.find(
+      (candidate) => candidate.value.toLowerCase() === completionName || candidate.label.toLowerCase() === completionName
+    );
+    if (status) return status;
+  }
+  return void 0;
+}
+function completionActionLabel(status) {
+  return status.value.toLowerCase() === "closed" || status.label.toLowerCase() === "closed" ? "Close comment" : "Resolve comment";
+}
+function RatingChip({ rating }) {
+  if (!rating) return null;
+  const positive = rating === "positive";
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      variant: "soft",
+      tone: positive ? "success" : "danger",
+      size: "xs",
+      icon: positive ? UiThumbsUp : UiThumbsDown,
+      children: positive ? "Positive rating" : "Negative rating"
+    }
+  );
+}
 function StatusChip({
   status,
   config,
@@ -114,7 +142,7 @@ function statusMenuItems(comment, config, isReply, opts) {
   }
   if (!isReply && opts.onUpdateStatus) {
     for (const status of config.statuses) {
-      if (status.value === opts.resolvedStatus) continue;
+      if (status.value === opts.completionStatus) continue;
       const current = status.value === comment.status;
       items.push({
         label: /* @__PURE__ */ jsxs(
@@ -177,10 +205,8 @@ function CommentBody({
   const [statusError, setStatusError] = useState("");
   const isReply = Boolean(comment.parentId);
   const date = parseTimestamp(comment.createdAt);
-  const resolvedStatus = config.statuses.find(
-    (status) => status.value.toLowerCase() === "resolved" || status.label.toLowerCase() === "resolved"
-  );
-  const canResolve = !isReply && onUpdateStatus != null && resolvedStatus != null && comment.status !== resolvedStatus.value;
+  const completion = completionStatus(config);
+  const canComplete = !isReply && onUpdateStatus != null && completion != null && isUnresolved(config, comment.status);
   const updateStatus = async (status) => {
     setStatusError("");
     try {
@@ -196,7 +222,7 @@ function CommentBody({
     ...onDelete ? { onDelete } : {},
     ...onCollapse ? { onCollapse } : {},
     ...onMaximize ? { onMaximize } : {},
-    ...resolvedStatus ? { resolvedStatus: resolvedStatus.value } : {}
+    ...completion ? { completionStatus: completion.value } : {}
   });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2.5", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
@@ -213,15 +239,18 @@ function CommentBody({
             }
           )
         ] }),
-        !isReply && /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: /* @__PURE__ */ jsx(FacetBadges, { comment, config }) })
+        !isReply && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap gap-1", children: [
+          /* @__PURE__ */ jsx(RatingChip, { rating: comment.rating }),
+          /* @__PURE__ */ jsx(FacetBadges, { comment, config })
+        ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [
-        canResolve && /* @__PURE__ */ jsx(
+        canComplete && /* @__PURE__ */ jsx(
           IconAction,
           {
             icon: UiCheck,
-            label: "Resolve comment",
-            onClick: () => void updateStatus(resolvedStatus.value),
+            label: completionActionLabel(completion),
+            onClick: () => void updateStatus(completion.value),
             className: "hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300"
           }
         ),
@@ -245,7 +274,7 @@ function CommentBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "text-[13px] leading-5 text-foreground", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsx(CommentMarkdown, { text: comment.body }) }),
+    comment.body.trim() && /* @__PURE__ */ jsx("div", { className: "text-[13px] leading-5 text-foreground", children: renderBody ? renderBody(comment.body) : /* @__PURE__ */ jsx(CommentMarkdown, { text: comment.body }) }),
     statusError && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -280,7 +309,22 @@ function CommentCard(props) {
   const { comment, config, compact, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
   const [maximized, setMaximized] = useState(false);
+  const [collapsedStatusError, setCollapsedStatusError] = useState("");
   const isReply = Boolean(comment.parentId);
+  const completion = completionStatus(config);
+  const canComplete = !isReply && props.onUpdateStatus != null && completion != null && isUnresolved(config, comment.status);
+  const completeCollapsed = async () => {
+    var _a;
+    if (!completion) return;
+    setCollapsedStatusError("");
+    try {
+      await ((_a = props.onUpdateStatus) == null ? void 0 : _a.call(props, completion.value));
+    } catch (error) {
+      setCollapsedStatusError(
+        error instanceof Error ? error.message : "Unexpected error"
+      );
+    }
+  };
   const body = /* @__PURE__ */ jsx(
     CommentBody,
     {
@@ -324,8 +368,28 @@ function CommentCard(props) {
           children: [
             /* @__PURE__ */ jsx(CommentAuthorAvatar, { author: comment.author, bare: true }),
             /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[11px] font-semibold text-foreground", children: authorDisplayName(comment.author) }),
-            !isReply && /* @__PURE__ */ jsx(FacetBadges, { comment, config, compact: true }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-foreground/80", children: truncatePlain(comment.body) }),
+            !isReply && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(RatingChip, { rating: comment.rating }),
+              /* @__PURE__ */ jsx(FacetBadges, { comment, config, compact: true })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-foreground/80", children: comment.body.trim() ? truncatePlain(comment.body) : comment.rating === "positive" ? "Positive rating" : comment.rating === "negative" ? "Negative rating" : "Empty comment" }),
+            canComplete && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "presentation",
+                onClick: (e) => e.stopPropagation(),
+                onKeyDown: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsx(
+                  IconAction,
+                  {
+                    icon: UiCheck,
+                    label: completionActionLabel(completion),
+                    onClick: () => void completeCollapsed(),
+                    className: "hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300"
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ jsx(
               "span",
               {
@@ -361,6 +425,17 @@ function CommentCard(props) {
           ]
         }
       ),
+      collapsedStatusError && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "alert",
+          className: "rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive",
+          children: [
+            "Couldn't update comment: ",
+            collapsedStatusError
+          ]
+        }
+      ),
       modal
     ] });
   }

package/dist/comments/CommentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCard.js","sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Badge } from \"../data/Badge\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport {\n  UiCheck,\n  UiClose,\n  UiDotsVertical,\n  UiFullscreen,\n  UiTrash,\n} from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport {\n  authorDisplayName,\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n  truncatePlain,\n} from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentCardProps = {\n  comment: Comment;\n  config: CommentConfig;\n  /** Tighter padding for dense rails. */\n  compact?: boolean;\n  /** Render expanded on first mount. */\n  defaultExpanded?: boolean;\n  /** Custom body renderer; defaults to the lightweight CommentMarkdown. */\n  renderBody?: (body: string) => ReactNode;\n  /** Change this comment's status (roots only). */\n  onUpdateStatus?: (status: string) => void | Promise<void>;\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Begin a reply to this comment. */\n  onReply?: () => void;\n  /** Advance the checklist item at `index` to its next status. */\n  onChecklistToggle?: (index: number) => void;\n};\n\nfunction StatusChip({\n  status,\n  config,\n  showLabel,\n}: {\n  status: string | undefined;\n  config: CommentConfig;\n  showLabel?: boolean;\n}) {\n  const cfg = resolveStatusConfig(config, status);\n  if (!cfg) return null;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(cfg.tone)}\n      size=\"xs\"\n      {...(cfg.icon ? { icon: cfg.icon } : {})}\n    >\n      {showLabel ? cfg.label : null}\n    </Badge>\n  );\n}\n\nfunction FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const facets = config.facets ?? [];\n  const chips = facets.flatMap((facet) => {\n    const value = comment.facets?.[facet.key];\n    const option = resolveFacetOption(facet, value);\n    if (!option) return [];\n    return [\n      <Badge\n        key={facet.key}\n        variant=\"soft\"\n        tone={toneToBadgeTone(option.tone)}\n        size=\"xs\"\n      >\n        {compact ? (option.short ?? option.label) : option.label}\n      </Badge>,\n    ];\n  });\n  return chips.length > 0 ? <>{chips}</> : null;\n}\n\nfunction ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist || comment.checklist.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, i) => {\n        const done = /done|complete|resolved/i.test(item.status);\n        const active = /progress|doing/i.test(item.status);\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(i)}\n            disabled={!onChecklistToggle}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] transition-opacity\",\n              onChecklistToggle && \"cursor-pointer hover:opacity-80\",\n              done\n                ? \"bg-green-100 text-green-800 line-through dark:bg-green-500/20 dark:text-green-300\"\n                : active\n                  ? \"bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300\"\n                  : \"bg-muted text-muted-foreground\",\n            )}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs || comment.refs.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, i) => (\n        <span\n          key={i}\n          className=\"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground\"\n        >\n          <span className=\"font-medium\">{group.label}:</span>\n          <span className={group.mono ? \"font-mono\" : undefined}>\n            {group.items.join(\", \")}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction statusMenuItems(\n  comment: Comment,\n  config: CommentConfig,\n  isReply: boolean,\n  opts: {\n    onUpdateStatus?: (status: string) => void;\n    onDelete?: () => void;\n    onCollapse?: () => void;\n    onMaximize?: () => void;\n    resolvedStatus?: string;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onMaximize) {\n    items.push({\n      label: \"Maximize\",\n      icon: UiFullscreen,\n      onSelect: opts.onMaximize,\n    });\n  }\n  if (opts.onCollapse) {\n    items.push({ label: \"Collapse\", icon: UiClose, onSelect: opts.onCollapse });\n  }\n  if (!isReply && opts.onUpdateStatus) {\n    for (const status of config.statuses) {\n      if (status.value === opts.resolvedStatus) continue;\n      const current = status.value === comment.status;\n      items.push({\n        label: (\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1.5\",\n              current && \"font-semibold\",\n            )}\n          >\n            <StatusChip status={status.value} config={config} />\n            {status.label}\n          </span>\n        ),\n        onSelect: () => opts.onUpdateStatus?.(status.value),\n      });\n    }\n  }\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  return items;\n}\n\nfunction IconAction({\n  icon,\n  label,\n  onClick,\n  className,\n}: {\n  icon: StaticIconComponent;\n  label: string;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      title={label}\n      className={cn(\n        \"rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        className,\n      )}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n\nfunction CommentBody({\n  comment,\n  config,\n  renderBody,\n  onUpdateStatus,\n  onDelete,\n  onReply,\n  onChecklistToggle,\n  onCollapse,\n  onMaximize,\n}: CommentCardProps & { onCollapse?: () => void; onMaximize?: () => void }) {\n  const [statusError, setStatusError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const resolvedStatus = config.statuses.find(\n    (status) =>\n      status.value.toLowerCase() === \"resolved\" ||\n      status.label.toLowerCase() === \"resolved\",\n  );\n  const canResolve =\n    !isReply &&\n    onUpdateStatus != null &&\n    resolvedStatus != null &&\n    comment.status !== resolvedStatus.value;\n  const updateStatus = async (status: string) => {\n    setStatusError(\"\");\n    try {\n      await onUpdateStatus?.(status);\n    } catch (error) {\n      setStatusError(\n        error instanceof Error ? error.message : \"Unexpected error\",\n      );\n    }\n  };\n  const menuItems = statusMenuItems(comment, config, isReply, {\n    ...(onUpdateStatus\n      ? { onUpdateStatus: (status) => void updateStatus(status) }\n      : {}),\n    ...(onDelete ? { onDelete } : {}),\n    ...(onCollapse ? { onCollapse } : {}),\n    ...(onMaximize ? { onMaximize } : {}),\n    ...(resolvedStatus ? { resolvedStatus: resolvedStatus.value } : {}),\n  });\n\n  return (\n    <div className=\"space-y-2.5\">\n      <div className=\"flex items-start gap-2.5\">\n        <CommentAuthorAvatar author={comment.author} />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex min-w-0 items-baseline gap-1.5\">\n            <span className=\"truncate text-xs font-semibold text-foreground\">\n              {authorDisplayName(comment.author)}\n            </span>\n            {date && (\n              <span\n                title={date.toLocaleString()}\n                className=\"shrink-0 text-[10px] text-muted-foreground\"\n              >\n                {formatRelativeTime(date)}\n              </span>\n            )}\n          </div>\n          {!isReply && (\n            <div className=\"mt-1 flex flex-wrap gap-1\">\n              <FacetBadges comment={comment} config={config} />\n            </div>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {canResolve && (\n            <IconAction\n              icon={UiCheck}\n              label=\"Resolve comment\"\n              onClick={() => void updateStatus(resolvedStatus.value)}\n              className=\"hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300\"\n            />\n          )}\n          {menuItems.length > 0 && (\n            <DropdownMenu\n              align=\"right\"\n              menuClassName=\"min-w-[150px]\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n      <div className=\"text-[13px] leading-5 text-foreground\">\n        {renderBody ? (\n          renderBody(comment.body)\n        ) : (\n          <CommentMarkdown text={comment.body} />\n        )}\n      </div>\n      {statusError && (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive\"\n        >\n          Couldn't update comment: {statusError}\n        </div>\n      )}\n      {!isReply && (\n        <ChecklistChips\n          comment={comment}\n          {...(onChecklistToggle ? { onChecklistToggle } : {})}\n        />\n      )}\n      {!isReply && <RefChips comment={comment} />}\n      {onReply && (\n        <button\n          type=\"button\"\n          onClick={onReply}\n          className=\"-ml-2 rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10\"\n        >\n          Reply\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * A single comment, collapsible between a compact one-line preview and a full\n * card. The full view can be maximized into a modal. Fully controlled — all\n * mutations are delegated to the supplied callbacks.\n */\nexport function CommentCard(props: CommentCardProps) {\n  const { comment, config, compact, defaultExpanded } = props;\n  const [expanded, setExpanded] = useState(defaultExpanded ?? false);\n  const [maximized, setMaximized] = useState(false);\n  const isReply = Boolean(comment.parentId);\n\n  const body = (\n    <CommentBody\n      {...props}\n      onMaximize={() => setMaximized(true)}\n      {...(expanded ? { onCollapse: () => setExpanded(false) } : {})}\n    />\n  );\n\n  const modal = (\n    <Modal\n      open={maximized}\n      onClose={() => setMaximized(false)}\n      title=\"Comment\"\n      size=\"lg\"\n    >\n      <CommentBody {...props} />\n    </Modal>\n  );\n\n  if (!expanded) {\n    return (\n      <>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={() => setExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              setExpanded(true);\n            }\n          }}\n          data-testid=\"comment-card\"\n          data-comment-kind={isReply ? \"reply\" : \"root\"}\n          data-comment-id={comment.id}\n          className={cn(\n            \"group/comment flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/50\",\n            !isReply && \"border border-border bg-background shadow-sm\",\n            isReply && \"ml-4 border-l-2 border-l-border bg-muted/30\",\n          )}\n        >\n          <CommentAuthorAvatar author={comment.author} bare />\n          <span className=\"shrink-0 text-[11px] font-semibold text-foreground\">\n            {authorDisplayName(comment.author)}\n          </span>\n          {!isReply && (\n            <FacetBadges comment={comment} config={config} compact />\n          )}\n          <span className=\"min-w-0 flex-1 truncate text-[12px] text-foreground/80\">\n            {truncatePlain(comment.body)}\n          </span>\n          <span\n            role=\"presentation\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => e.stopPropagation()}\n          >\n            <DropdownMenu\n              align=\"right\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:opacity-100 group-hover/comment:opacity-70\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={[\n                { label: \"Expand\", onSelect: () => setExpanded(true) },\n                {\n                  label: \"Maximize\",\n                  icon: UiFullscreen,\n                  onSelect: () => setMaximized(true),\n                },\n              ]}\n            />\n          </span>\n        </div>\n        {modal}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-testid=\"comment-card\"\n        data-comment-kind={isReply ? \"reply\" : \"root\"}\n        data-comment-id={comment.id}\n        className={cn(\n          \"group/comment rounded-xl bg-background px-3.5 py-3 text-xs\",\n          !isReply &&\n            \"border border-border/80 shadow-sm transition-shadow hover:shadow-md\",\n          compact && \"px-2.5 py-2.5\",\n          isReply && \"ml-4 border-l-2 border-l-border bg-muted/20 shadow-none\",\n        )}\n      >\n        {body}\n      </div>\n      {modal}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentCard.js","sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Badge } from \"../data/Badge\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { Modal } from \"../overlay/Modal\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport {\n  UiCheck,\n  UiClose,\n  UiDotsVertical,\n  UiFullscreen,\n  UiThumbsDown,\n  UiThumbsUp,\n  UiTrash,\n} from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport {\n  authorDisplayName,\n  isUnresolved,\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n  truncatePlain,\n} from \"./comment-utils\";\nimport type {\n  Comment,\n  CommentConfig,\n  CommentRating,\n  CommentStatusConfig,\n} from \"./comment-types\";\n\nfunction completionStatus(config: CommentConfig) {\n  for (const completionName of [\"resolved\", \"closed\"]) {\n    const status = config.statuses.find(\n      (candidate) =>\n        candidate.value.toLowerCase() === completionName ||\n        candidate.label.toLowerCase() === completionName,\n    );\n    if (status) return status;\n  }\n  return undefined;\n}\n\nfunction completionActionLabel(status: CommentStatusConfig) {\n  return status.value.toLowerCase() === \"closed\" ||\n    status.label.toLowerCase() === \"closed\"\n    ? \"Close comment\"\n    : \"Resolve comment\";\n}\n\nexport type CommentCardProps = {\n  comment: Comment;\n  config: CommentConfig;\n  /** Tighter padding for dense rails. */\n  compact?: boolean;\n  /** Render expanded on first mount. */\n  defaultExpanded?: boolean;\n  /** Custom body renderer; defaults to the lightweight CommentMarkdown. */\n  renderBody?: (body: string) => ReactNode;\n  /** Change this comment's status (roots only). */\n  onUpdateStatus?: (status: string) => void | Promise<void>;\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Begin a reply to this comment. */\n  onReply?: () => void;\n  /** Advance the checklist item at `index` to its next status. */\n  onChecklistToggle?: (index: number) => void;\n};\n\nfunction RatingChip({ rating }: { rating: CommentRating | undefined }) {\n  if (!rating) return null;\n  const positive = rating === \"positive\";\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={positive ? \"success\" : \"danger\"}\n      size=\"xs\"\n      icon={positive ? UiThumbsUp : UiThumbsDown}\n    >\n      {positive ? \"Positive rating\" : \"Negative rating\"}\n    </Badge>\n  );\n}\n\nfunction StatusChip({\n  status,\n  config,\n  showLabel,\n}: {\n  status: string | undefined;\n  config: CommentConfig;\n  showLabel?: boolean;\n}) {\n  const cfg = resolveStatusConfig(config, status);\n  if (!cfg) return null;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(cfg.tone)}\n      size=\"xs\"\n      {...(cfg.icon ? { icon: cfg.icon } : {})}\n    >\n      {showLabel ? cfg.label : null}\n    </Badge>\n  );\n}\n\nfunction FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const facets = config.facets ?? [];\n  const chips = facets.flatMap((facet) => {\n    const value = comment.facets?.[facet.key];\n    const option = resolveFacetOption(facet, value);\n    if (!option) return [];\n    return [\n      <Badge\n        key={facet.key}\n        variant=\"soft\"\n        tone={toneToBadgeTone(option.tone)}\n        size=\"xs\"\n      >\n        {compact ? (option.short ?? option.label) : option.label}\n      </Badge>,\n    ];\n  });\n  return chips.length > 0 ? <>{chips}</> : null;\n}\n\nfunction ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist || comment.checklist.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, i) => {\n        const done = /done|complete|resolved/i.test(item.status);\n        const active = /progress|doing/i.test(item.status);\n        return (\n          <button\n            key={i}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(i)}\n            disabled={!onChecklistToggle}\n            className={cn(\n              \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] transition-opacity\",\n              onChecklistToggle && \"cursor-pointer hover:opacity-80\",\n              done\n                ? \"bg-green-100 text-green-800 line-through dark:bg-green-500/20 dark:text-green-300\"\n                : active\n                  ? \"bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-300\"\n                  : \"bg-muted text-muted-foreground\",\n            )}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs || comment.refs.length === 0) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, i) => (\n        <span\n          key={i}\n          className=\"inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground\"\n        >\n          <span className=\"font-medium\">{group.label}:</span>\n          <span className={group.mono ? \"font-mono\" : undefined}>\n            {group.items.join(\", \")}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction statusMenuItems(\n  comment: Comment,\n  config: CommentConfig,\n  isReply: boolean,\n  opts: {\n    onUpdateStatus?: (status: string) => void;\n    onDelete?: () => void;\n    onCollapse?: () => void;\n    onMaximize?: () => void;\n    completionStatus?: string;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onMaximize) {\n    items.push({\n      label: \"Maximize\",\n      icon: UiFullscreen,\n      onSelect: opts.onMaximize,\n    });\n  }\n  if (opts.onCollapse) {\n    items.push({ label: \"Collapse\", icon: UiClose, onSelect: opts.onCollapse });\n  }\n  if (!isReply && opts.onUpdateStatus) {\n    for (const status of config.statuses) {\n      if (status.value === opts.completionStatus) continue;\n      const current = status.value === comment.status;\n      items.push({\n        label: (\n          <span\n            className={cn(\n              \"inline-flex items-center gap-1.5\",\n              current && \"font-semibold\",\n            )}\n          >\n            <StatusChip status={status.value} config={config} />\n            {status.label}\n          </span>\n        ),\n        onSelect: () => opts.onUpdateStatus?.(status.value),\n      });\n    }\n  }\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  return items;\n}\n\nfunction IconAction({\n  icon,\n  label,\n  onClick,\n  className,\n}: {\n  icon: StaticIconComponent;\n  label: string;\n  onClick: () => void;\n  className?: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      title={label}\n      className={cn(\n        \"rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n        className,\n      )}\n    >\n      <Icon icon={icon} className=\"text-sm\" />\n    </button>\n  );\n}\n\nfunction CommentBody({\n  comment,\n  config,\n  renderBody,\n  onUpdateStatus,\n  onDelete,\n  onReply,\n  onChecklistToggle,\n  onCollapse,\n  onMaximize,\n}: CommentCardProps & { onCollapse?: () => void; onMaximize?: () => void }) {\n  const [statusError, setStatusError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const completion = completionStatus(config);\n  const canComplete =\n    !isReply &&\n    onUpdateStatus != null &&\n    completion != null &&\n    isUnresolved(config, comment.status);\n  const updateStatus = async (status: string) => {\n    setStatusError(\"\");\n    try {\n      await onUpdateStatus?.(status);\n    } catch (error) {\n      setStatusError(\n        error instanceof Error ? error.message : \"Unexpected error\",\n      );\n    }\n  };\n  const menuItems = statusMenuItems(comment, config, isReply, {\n    ...(onUpdateStatus\n      ? { onUpdateStatus: (status) => void updateStatus(status) }\n      : {}),\n    ...(onDelete ? { onDelete } : {}),\n    ...(onCollapse ? { onCollapse } : {}),\n    ...(onMaximize ? { onMaximize } : {}),\n    ...(completion ? { completionStatus: completion.value } : {}),\n  });\n\n  return (\n    <div className=\"space-y-2.5\">\n      <div className=\"flex items-start gap-2.5\">\n        <CommentAuthorAvatar author={comment.author} />\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex min-w-0 items-baseline gap-1.5\">\n            <span className=\"truncate text-xs font-semibold text-foreground\">\n              {authorDisplayName(comment.author)}\n            </span>\n            {date && (\n              <span\n                title={date.toLocaleString()}\n                className=\"shrink-0 text-[10px] text-muted-foreground\"\n              >\n                {formatRelativeTime(date)}\n              </span>\n            )}\n          </div>\n          {!isReply && (\n            <div className=\"mt-1 flex flex-wrap gap-1\">\n              <RatingChip rating={comment.rating} />\n              <FacetBadges comment={comment} config={config} />\n            </div>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {canComplete && (\n            <IconAction\n              icon={UiCheck}\n              label={completionActionLabel(completion)}\n              onClick={() => void updateStatus(completion.value)}\n              className=\"hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300\"\n            />\n          )}\n          {menuItems.length > 0 && (\n            <DropdownMenu\n              align=\"right\"\n              menuClassName=\"min-w-[150px]\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={menuItems}\n            />\n          )}\n        </div>\n      </div>\n      {comment.body.trim() && (\n        <div className=\"text-[13px] leading-5 text-foreground\">\n          {renderBody ? (\n            renderBody(comment.body)\n          ) : (\n            <CommentMarkdown text={comment.body} />\n          )}\n        </div>\n      )}\n      {statusError && (\n        <div\n          role=\"alert\"\n          className=\"rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive\"\n        >\n          Couldn't update comment: {statusError}\n        </div>\n      )}\n      {!isReply && (\n        <ChecklistChips\n          comment={comment}\n          {...(onChecklistToggle ? { onChecklistToggle } : {})}\n        />\n      )}\n      {!isReply && <RefChips comment={comment} />}\n      {onReply && (\n        <button\n          type=\"button\"\n          onClick={onReply}\n          className=\"-ml-2 rounded px-2 py-1 text-xs font-medium text-primary transition-colors hover:bg-primary/10\"\n        >\n          Reply\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * A single comment, collapsible between a compact one-line preview and a full\n * card. The full view can be maximized into a modal. Fully controlled — all\n * mutations are delegated to the supplied callbacks.\n */\nexport function CommentCard(props: CommentCardProps) {\n  const { comment, config, compact, defaultExpanded } = props;\n  const [expanded, setExpanded] = useState(defaultExpanded ?? false);\n  const [maximized, setMaximized] = useState(false);\n  const [collapsedStatusError, setCollapsedStatusError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const completion = completionStatus(config);\n  const canComplete =\n    !isReply &&\n    props.onUpdateStatus != null &&\n    completion != null &&\n    isUnresolved(config, comment.status);\n  const completeCollapsed = async () => {\n    if (!completion) return;\n    setCollapsedStatusError(\"\");\n    try {\n      await props.onUpdateStatus?.(completion.value);\n    } catch (error) {\n      setCollapsedStatusError(\n        error instanceof Error ? error.message : \"Unexpected error\",\n      );\n    }\n  };\n\n  const body = (\n    <CommentBody\n      {...props}\n      onMaximize={() => setMaximized(true)}\n      {...(expanded ? { onCollapse: () => setExpanded(false) } : {})}\n    />\n  );\n\n  const modal = (\n    <Modal\n      open={maximized}\n      onClose={() => setMaximized(false)}\n      title=\"Comment\"\n      size=\"lg\"\n    >\n      <CommentBody {...props} />\n    </Modal>\n  );\n\n  if (!expanded) {\n    return (\n      <>\n        <div\n          role=\"button\"\n          tabIndex={0}\n          onClick={() => setExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\" || e.key === \" \") {\n              e.preventDefault();\n              setExpanded(true);\n            }\n          }}\n          data-testid=\"comment-card\"\n          data-comment-kind={isReply ? \"reply\" : \"root\"}\n          data-comment-id={comment.id}\n          className={cn(\n            \"group/comment flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs transition-colors hover:bg-muted/50\",\n            !isReply && \"border border-border bg-background shadow-sm\",\n            isReply && \"ml-4 border-l-2 border-l-border bg-muted/30\",\n          )}\n        >\n          <CommentAuthorAvatar author={comment.author} bare />\n          <span className=\"shrink-0 text-[11px] font-semibold text-foreground\">\n            {authorDisplayName(comment.author)}\n          </span>\n          {!isReply && (\n            <>\n              <RatingChip rating={comment.rating} />\n              <FacetBadges comment={comment} config={config} compact />\n            </>\n          )}\n          <span className=\"min-w-0 flex-1 truncate text-[12px] text-foreground/80\">\n            {comment.body.trim()\n              ? truncatePlain(comment.body)\n              : comment.rating === \"positive\"\n                ? \"Positive rating\"\n                : comment.rating === \"negative\"\n                  ? \"Negative rating\"\n                  : \"Empty comment\"}\n          </span>\n          {canComplete && (\n            <span\n              role=\"presentation\"\n              onClick={(e) => e.stopPropagation()}\n              onKeyDown={(e) => e.stopPropagation()}\n            >\n              <IconAction\n                icon={UiCheck}\n                label={completionActionLabel(completion)}\n                onClick={() => void completeCollapsed()}\n                className=\"hover:bg-green-100 hover:text-green-700 dark:hover:bg-green-500/20 dark:hover:text-green-300\"\n              />\n            </span>\n          )}\n          <span\n            role=\"presentation\"\n            onClick={(e) => e.stopPropagation()}\n            onKeyDown={(e) => e.stopPropagation()}\n          >\n            <DropdownMenu\n              align=\"right\"\n              trigger={\n                <span\n                  role=\"button\"\n                  tabIndex={0}\n                  aria-label=\"Comment actions\"\n                  className=\"rounded p-0.5 text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:opacity-100 group-hover/comment:opacity-70\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={[\n                { label: \"Expand\", onSelect: () => setExpanded(true) },\n                {\n                  label: \"Maximize\",\n                  icon: UiFullscreen,\n                  onSelect: () => setMaximized(true),\n                },\n              ]}\n            />\n          </span>\n        </div>\n        {collapsedStatusError && (\n          <div\n            role=\"alert\"\n            className=\"rounded-md border border-destructive/30 bg-destructive/5 px-2.5 py-2 text-xs text-destructive\"\n          >\n            Couldn't update comment: {collapsedStatusError}\n          </div>\n        )}\n        {modal}\n      </>\n    );\n  }\n\n  return (\n    <>\n      <div\n        data-testid=\"comment-card\"\n        data-comment-kind={isReply ? \"reply\" : \"root\"}\n        data-comment-id={comment.id}\n        className={cn(\n          \"group/comment rounded-xl bg-background px-3.5 py-3 text-xs\",\n          !isReply &&\n            \"border border-border/80 shadow-sm transition-shadow hover:shadow-md\",\n          compact && \"px-2.5 py-2.5\",\n          isReply && \"ml-4 border-l-2 border-l-border bg-muted/20 shadow-none\",\n        )}\n      >\n        {body}\n      </div>\n      {modal}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/comments/CommentComposer.cjs

@@ -8,6 +8,8 @@ const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const MentionTextarea = require("./MentionTextarea.cjs");
 const commentUtils = require("./comment-utils.cjs");
 const UiClose = require("../icons/components/UiClose.cjs");
+const UiThumbsUp = require("../icons/components/UiThumbsUp.cjs");
+const UiThumbsDown = require("../icons/components/UiThumbsDown.cjs");
 const UiArrowUp = require("../icons/components/UiArrowUp.cjs");
 const FACET_DOT_CLASS = {
   neutral: "bg-muted-foreground",
@@ -95,6 +97,7 @@ function CommentComposer({
   const [open, setOpen] = react.useState(!collapsible || autoFocus);
   const [body, setBody] = react.useState("");
   const [facets, setFacets] = react.useState({});
+  const [rating, setRating] = react.useState();
   const [submitting, setSubmitting] = react.useState(false);
   const submittingRef = react.useRef(false);
   const mentionsRef = react.useRef(/* @__PURE__ */ new Map());
@@ -102,6 +105,7 @@ function CommentComposer({
   function reset() {
     setBody("");
     setFacets({});
+    setRating(void 0);
     mentionsRef.current.clear();
   }
   function setFacet(key, value) {
@@ -115,7 +119,7 @@ function CommentComposer({
   }
   async function submit() {
     const text = body.trim();
-    if (!text || submittingRef.current) return;
+    if (!text && !rating || submittingRef.current) return;
     submittingRef.current = true;
     setSubmitting(true);
     const mentions = [...mentionsRef.current.values()].filter(
@@ -125,6 +129,7 @@ function CommentComposer({
       await (onCreate == null ? void 0 : onCreate({
         body: text,
         anchor: anchor ?? null,
+        ...rating ? { rating } : {},
         ...Object.keys(facets).length > 0 ? { facets } : {},
         ...mentions.length > 0 ? { mentions } : {}
       }));
@@ -187,6 +192,24 @@ function CommentComposer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5", children: [
+          [
+            ["positive", "Positive rating", UiThumbsUp.UiThumbsUp],
+            ["negative", "Negative rating", UiThumbsDown.UiThumbsDown]
+          ].map(([value, label, icon]) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": label,
+              "aria-pressed": rating === value,
+              onClick: () => setRating((current) => current === value ? void 0 : value),
+              className: utils.cn(
+                "inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                rating === value && (value === "positive" ? "bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300" : "bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300")
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, className: "text-sm" })
+            },
+            value
+          )),
           (config.facets ?? []).map((facet) => /* @__PURE__ */ jsxRuntime.jsx(
             FacetPicker,
             {
@@ -203,7 +226,7 @@ function CommentComposer({
               "data-testid": "comment-compose-send",
               "aria-label": "Post comment",
               onClick: () => void submit(),
-              disabled: submitting || !body.trim(),
+              disabled: submitting || !body.trim() && !rating,
               className: "ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiArrowUp.UiArrowUp, className: "text-xs" })
             }

package/dist/comments/CommentComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.cjs","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if (!text || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || !body.trim()}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiArrowUp"],"mappings":"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"}
+{"version":3,"file":"CommentComposer.cjs","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || (!body.trim() && !rating)}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsx","DropdownMenu","jsxs","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiThumbsUp","UiThumbsDown","UiArrowUp"],"mappings":"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"}

package/dist/comments/CommentComposer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/comments/CommentComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAElB,cAAc,EACf,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,SAAiB,EACjB,WAA8B,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,2CAsHtB"}
+{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/comments/CommentComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,kBAAkB,EAElB,cAAc,EAEf,MAAM,iBAAiB,CAAC;AAWzB,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,aAAa,CAAC;IACtB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAC9B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,6DAA6D;IAC7D,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC1E,CAAC;AAyEF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,MAAM,EACN,WAAkB,EAClB,SAAiB,EACjB,WAA8B,EAC9B,QAAQ,EACR,SAAS,GACV,EAAE,oBAAoB,2CAkJtB"}

package/dist/comments/CommentComposer.js

@@ -6,6 +6,8 @@ import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { MentionTextarea } from "./MentionTextarea.js";
 import { toneToBadgeTone } from "./comment-utils.js";
 import { UiClose } from "../icons/components/UiClose.js";
+import { UiThumbsUp } from "../icons/components/UiThumbsUp.js";
+import { UiThumbsDown } from "../icons/components/UiThumbsDown.js";
 import { UiArrowUp } from "../icons/components/UiArrowUp.js";
 const FACET_DOT_CLASS = {
   neutral: "bg-muted-foreground",
@@ -93,6 +95,7 @@ function CommentComposer({
   const [open, setOpen] = useState(!collapsible || autoFocus);
   const [body, setBody] = useState("");
   const [facets, setFacets] = useState({});
+  const [rating, setRating] = useState();
   const [submitting, setSubmitting] = useState(false);
   const submittingRef = useRef(false);
   const mentionsRef = useRef(/* @__PURE__ */ new Map());
@@ -100,6 +103,7 @@ function CommentComposer({
   function reset() {
     setBody("");
     setFacets({});
+    setRating(void 0);
     mentionsRef.current.clear();
   }
   function setFacet(key, value) {
@@ -113,7 +117,7 @@ function CommentComposer({
   }
   async function submit() {
     const text = body.trim();
-    if (!text || submittingRef.current) return;
+    if (!text && !rating || submittingRef.current) return;
     submittingRef.current = true;
     setSubmitting(true);
     const mentions = [...mentionsRef.current.values()].filter(
@@ -123,6 +127,7 @@ function CommentComposer({
       await (onCreate == null ? void 0 : onCreate({
         body: text,
         anchor: anchor ?? null,
+        ...rating ? { rating } : {},
         ...Object.keys(facets).length > 0 ? { facets } : {},
         ...mentions.length > 0 ? { mentions } : {}
       }));
@@ -185,6 +190,24 @@ function CommentComposer({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5", children: [
+          [
+            ["positive", "Positive rating", UiThumbsUp],
+            ["negative", "Negative rating", UiThumbsDown]
+          ].map(([value, label, icon]) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": label,
+              "aria-pressed": rating === value,
+              onClick: () => setRating((current) => current === value ? void 0 : value),
+              className: cn(
+                "inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+                rating === value && (value === "positive" ? "bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300" : "bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300")
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { icon, className: "text-sm" })
+            },
+            value
+          )),
           (config.facets ?? []).map((facet) => /* @__PURE__ */ jsx(
             FacetPicker,
             {
@@ -201,7 +224,7 @@ function CommentComposer({
               "data-testid": "comment-compose-send",
               "aria-label": "Post comment",
               onClick: () => void submit(),
-              disabled: submitting || !body.trim(),
+              disabled: submitting || !body.trim() && !rating,
               className: "ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
               children: /* @__PURE__ */ jsx(Icon, { icon: UiArrowUp, className: "text-xs" })
             }

package/dist/comments/CommentComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.js","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if (!text || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || !body.trim()}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CommentComposer.js","sources":["../../src/comments/CommentComposer.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { UiArrowUp, UiClose, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport type { BadgeTone } from \"../data/Badge\";\nimport { MentionTextarea } from \"./MentionTextarea\";\nimport { toneToBadgeTone } from \"./comment-utils\";\nimport type {\n  CommentAnchor,\n  CommentConfig,\n  CommentCreateInput,\n  CommentFacet,\n  CommentMention,\n  CommentRating,\n} from \"./comment-types\";\n\n// Static literals so Tailwind's source scanner emits these utilities.\nconst FACET_DOT_CLASS: Record<BadgeTone, string> = {\n  neutral: \"bg-muted-foreground\",\n  success: \"bg-green-500\",\n  danger: \"bg-red-500\",\n  warning: \"bg-yellow-500\",\n  info: \"bg-blue-500\",\n};\n\nexport type CommentComposerProps = {\n  config: CommentConfig;\n  /** Anchor stamped onto created comments. */\n  anchor?: CommentAnchor | null;\n  /** Start collapsed as an \"Add a comment…\" pill until clicked. */\n  collapsible?: boolean;\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput) => void | Promise<void>;\n  /** Fired once per mention referenced by a posted comment. */\n  onMention?: (mention: CommentMention, context: { body: string }) => void;\n};\n\nfunction FacetPicker({\n  facet,\n  value,\n  onChange,\n}: {\n  facet: CommentFacet;\n  value: string | undefined;\n  onChange: (value: string | undefined) => void;\n}) {\n  const selected = facet.options.find((o) => o.value === value);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuClassName=\"min-w-[150px]\"\n      trigger={\n        <span\n          role=\"button\"\n          tabIndex={0}\n          className={cn(\n            \"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium transition-colors\",\n            selected\n              ? \"bg-muted text-foreground\"\n              : \"text-muted-foreground hover:bg-muted/60\",\n          )}\n        >\n          {selected ? selected.label : facet.label}\n          {selected && (\n            <span\n              role=\"presentation\"\n              className=\"ml-0.5 cursor-pointer hover:text-foreground\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onChange(undefined);\n              }}\n            >\n              ×\n            </span>\n          )}\n        </span>\n      }\n    >\n      {(close) => (\n        <div className=\"py-1\">\n          {facet.options.map((option) => (\n            <button\n              key={option.value}\n              type=\"button\"\n              onClick={() => {\n                onChange(option.value === value ? undefined : option.value);\n                close();\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-[11px] text-popover-foreground hover:bg-accent hover:text-accent-foreground\",\n                option.value === value && \"bg-muted font-semibold\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"inline-block size-2 rounded-full\",\n                  FACET_DOT_CLASS[toneToBadgeTone(option.tone)],\n                )}\n              />\n              {option.label}\n            </button>\n          ))}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\n/**\n * The new-comment composer: a mention-aware textarea, one picker per configured\n * facet, and a send button. Starts as a pill when `collapsible`. Owns only its\n * own draft state; posting is delegated to `onCreate`.\n */\nexport function CommentComposer({\n  config,\n  anchor,\n  collapsible = true,\n  autoFocus = false,\n  placeholder = \"Add a comment…\",\n  onCreate,\n  onMention,\n}: CommentComposerProps) {\n  const [open, setOpen] = useState(!collapsible || autoFocus);\n  const [body, setBody] = useState(\"\");\n  const [facets, setFacets] = useState<Record<string, string>>({});\n  const [rating, setRating] = useState<CommentRating | undefined>();\n  const [submitting, setSubmitting] = useState(false);\n  const submittingRef = useRef(false);\n  const mentionsRef = useRef<Map<string, CommentMention>>(new Map());\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  function reset() {\n    setBody(\"\");\n    setFacets({});\n    setRating(undefined);\n    mentionsRef.current.clear();\n  }\n\n  function setFacet(key: string, value: string | undefined) {\n    setFacets((prev) => {\n      if (value === undefined) {\n        const { [key]: _drop, ...rest } = prev;\n        return rest;\n      }\n      return { ...prev, [key]: value };\n    });\n  }\n\n  async function submit() {\n    const text = body.trim();\n    if ((!text && !rating) || submittingRef.current) return;\n    submittingRef.current = true;\n    setSubmitting(true);\n    const mentions = [...mentionsRef.current.values()].filter((m) =>\n      body.toLowerCase().includes(`@${m.name.toLowerCase()}`),\n    );\n    try {\n      await onCreate?.({\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      });\n      for (const mention of mentions) onMention?.(mention, { body: text });\n      reset();\n      if (collapsible) setOpen(false);\n    } finally {\n      submittingRef.current = false;\n      setSubmitting(false);\n    }\n  }\n\n  if (!open && body.trim().length === 0) {\n    return (\n      <button\n        type=\"button\"\n        onClick={() => setOpen(true)}\n        className=\"w-full rounded-full border border-border bg-muted/25 px-4 py-2 text-left text-sm text-muted-foreground/70 shadow-sm transition-colors hover:border-primary/30 hover:bg-muted/40\"\n      >\n        {placeholder}\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"comment-compose-box\"\n      aria-busy={submitting}\n      className=\"relative rounded-2xl border border-border bg-muted/25 px-3 pt-3 pb-10 shadow-sm transition-[border-color,box-shadow] focus-within:border-primary/40 focus-within:shadow-md\"\n    >\n      <MentionTextarea\n        ref={inputRef}\n        value={body}\n        onChange={setBody}\n        mentionables={config.mentionables ?? []}\n        onMentionSelect={(m) => mentionsRef.current.set(m.id, m)}\n        onSubmit={() => void submit()}\n        onCancel={() => {\n          reset();\n          if (collapsible) setOpen(false);\n        }}\n        placeholder={placeholder}\n        autoFocus={autoFocus || open}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10\"\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          onClick={() => {\n            reset();\n            setOpen(false);\n          }}\n          aria-label=\"Close composer\"\n          className=\"absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5\">\n        {(\n          [\n            [\"positive\", \"Positive rating\", UiThumbsUp],\n            [\"negative\", \"Negative rating\", UiThumbsDown],\n          ] as const\n        ).map(([value, label, icon]) => (\n          <button\n            key={value}\n            type=\"button\"\n            aria-label={label}\n            aria-pressed={rating === value}\n            onClick={() =>\n              setRating((current) => (current === value ? undefined : value))\n            }\n            className={cn(\n              \"inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\",\n              rating === value &&\n                (value === \"positive\"\n                  ? \"bg-green-100 text-green-700 [[data-theme=dark]_&]:bg-green-500/20 [[data-theme=dark]_&]:text-green-300\"\n                  : \"bg-red-100 text-red-700 [[data-theme=dark]_&]:bg-red-500/20 [[data-theme=dark]_&]:text-red-300\"),\n            )}\n          >\n            <Icon icon={icon} className=\"text-sm\" />\n          </button>\n        ))}\n        {(config.facets ?? []).map((facet) => (\n          <FacetPicker\n            key={facet.key}\n            facet={facet}\n            value={facets[facet.key]}\n            onChange={(value) => setFacet(facet.key, value)}\n          />\n        ))}\n        <button\n          type=\"button\"\n          data-testid=\"comment-compose-send\"\n          aria-label=\"Post comment\"\n          onClick={() => void submit()}\n          disabled={submitting || (!body.trim() && !rating)}\n          className=\"ml-auto inline-flex size-7 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n        >\n          <Icon icon={UiArrowUp} className=\"text-xs\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}