@flanksource/clicky-ui 0.3.54 → 0.3.56

package/dist/comments/CommentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCard.js","names":["_Fragment"],"sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport {\n  UiCheck,\n  UiCopy,\n  UiDotsVertical,\n  UiFullscreen,\n  UiLock,\n  UiRestart,\n  UiTrash,\n} from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport {\n  ChecklistChips,\n  FacetBadges,\n  RatingChip,\n  ReviewDecisionChip,\n  RefChips,\n  StatusChip,\n} from \"./CommentCardParts\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport { authorDisplayName, truncatePlain } from \"./comment-utils\";\nimport {\n  resolveCommentStage,\n  statusForCommentStage,\n} from \"../lib/comment-stage\";\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  /** Close an active or resolved root comment. */\n  onClose?: () => void | Promise<void>;\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Copy this comment's whole thread in the caller's canonical format. */\n  onCopy?: () => void | Promise<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   * Open this card's thread in a larger view. Owned by the caller because a\n   * card knows only itself, while maximizing shows the root and its replies.\n   * Omit to drop the action (e.g. inside an already-maximized thread).\n   */\n  onMaximize?: () => void;\n};\n\nfunction actionMenuItems(\n  isReply: boolean,\n  opts: {\n    onDelete?: () => void;\n    statusActions?: DropdownMenuItem[];\n    onCopy?: () => void;\n    onMaximize?: () => void;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  if (!isReply) items.push(...(opts.statusActions ?? []));\n  if (opts.onCopy) {\n    items.push({ label: \"Copy\", icon: UiCopy, onSelect: opts.onCopy });\n  }\n  if (opts.onMaximize) {\n    items.push({\n      label: \"Maximise\",\n      icon: UiFullscreen,\n      onSelect: opts.onMaximize,\n    });\n  }\n  return items;\n}\n\nfunction CommentBody({\n  comment,\n  config,\n  renderBody,\n  onUpdateStatus,\n  onClose,\n  onDelete,\n  onCopy,\n  onReply,\n  onChecklistToggle,\n  onMaximize,\n}: CommentCardProps) {\n  const [actionError, setActionError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const resolved = statusForCommentStage(config, \"resolved\");\n  const active = statusForCommentStage(config, \"active\");\n  const closed = statusForCommentStage(config, \"closed\");\n  const stage = resolveCommentStage(config, comment.status);\n  const updateStatus = async (status: string) => {\n    setActionError(\"\");\n    try {\n      await onUpdateStatus?.(status);\n    } catch (error) {\n      setActionError(\n        `Couldn't update comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const close = async () => {\n    setActionError(\"\");\n    try {\n      await onClose?.();\n    } catch (error) {\n      setActionError(\n        `Couldn't close comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const copy = async () => {\n    setActionError(\"\");\n    try {\n      await onCopy?.();\n    } catch (error) {\n      setActionError(\n        `Couldn't copy comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const menuItems = actionMenuItems(isReply, {\n    ...(onDelete ? { onDelete } : {}),\n    statusActions: [\n      ...(stage === \"active\" && onUpdateStatus && resolved\n        ? [\n            {\n              label: \"Resolve\",\n              icon: UiCheck,\n              onSelect: () => void updateStatus(resolved.value),\n            },\n          ]\n        : []),\n      ...((stage === \"active\" || stage === \"resolved\") && onClose && closed\n        ? [\n            {\n              label: \"Close\",\n              icon: UiLock,\n              onSelect: () => void close(),\n            },\n          ]\n        : []),\n      ...((stage === \"resolved\" || stage === \"closed\") &&\n      onUpdateStatus &&\n      active\n        ? [\n            {\n              label: \"Reopen\",\n              icon: UiRestart,\n              onSelect: () => void updateStatus(active.value),\n            },\n          ]\n        : []),\n    ],\n    ...(onCopy ? { onCopy: () => void copy() } : {}),\n    ...(onMaximize ? { onMaximize } : {}),\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              <StatusChip comment={comment} config={config} />\n              <RatingChip rating={comment.rating} />\n              <ReviewDecisionChip decision={comment.reviewDecision} />\n              <FacetBadges comment={comment} config={config} />\n            </div>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {!isReply &&\n            (stage === \"active\" || stage === \"resolved\") &&\n            onClose &&\n            closed && (\n              <button\n                type=\"button\"\n                aria-label=\"Close comment\"\n                title=\"Close comment\"\n                onClick={() => void close()}\n                className=\"inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              >\n                <Icon icon={UiCheck} className=\"text-sm\" />\n              </button>\n            )}\n          {!isReply && stage === \"closed\" && onUpdateStatus && active && (\n            <button\n              type=\"button\"\n              aria-label=\"Reopen comment\"\n              title=\"Reopen comment\"\n              onClick={() => void updateStatus(active.value)}\n              className=\"inline-flex rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            >\n              <Icon icon={UiRestart} className=\"text-sm\" />\n            </button>\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      {actionError && (\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          {actionError}\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. Offers a Maximise action when `onMaximize` is supplied — the owner\n * enlarges the whole thread. Fully controlled — all mutations are delegated to\n * 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 [collapsedActionError, setCollapsedActionError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const body = <CommentBody {...props} />;\n\n  async function runCollapsedAction(action: \"resolve\" | \"close\" | \"reopen\") {\n    setCollapsedActionError(\"\");\n    try {\n      if (action === \"close\") {\n        await props.onClose?.();\n        return;\n      }\n      const next = statusForCommentStage(\n        config,\n        action === \"resolve\" ? \"resolved\" : \"active\",\n      );\n      if (next) await props.onUpdateStatus?.(next.value);\n    } catch (error) {\n      setCollapsedActionError(\n        `${action === \"close\" ? \"Couldn't close comment\" : \"Couldn't update comment\"}: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  }\n\n  async function copyCollapsed() {\n    setCollapsedActionError(\"\");\n    try {\n      await props.onCopy?.();\n    } catch (error) {\n      setCollapsedActionError(\n        `Couldn't copy comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\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              <StatusChip comment={comment} config={config} />\n              <RatingChip rating={comment.rating} />\n              <ReviewDecisionChip decision={comment.reviewDecision} />\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                  : comment.reviewDecision === \"approved\"\n                    ? \"Approved\"\n                    : \"Empty comment\"}\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={actionMenuItems(isReply, {\n                ...(props.onDelete ? { onDelete: props.onDelete } : {}),\n                statusActions: [\n                  ...(resolveCommentStage(config, comment.status) ===\n                    \"active\" &&\n                  props.onUpdateStatus &&\n                  statusForCommentStage(config, \"resolved\")\n                    ? [\n                        {\n                          label: \"Resolve\",\n                          icon: UiCheck,\n                          onSelect: () => void runCollapsedAction(\"resolve\"),\n                        },\n                      ]\n                    : []),\n                  ...((resolveCommentStage(config, comment.status) ===\n                    \"active\" ||\n                    resolveCommentStage(config, comment.status) ===\n                      \"resolved\") &&\n                  props.onClose &&\n                  statusForCommentStage(config, \"closed\")\n                    ? [\n                        {\n                          label: \"Close\",\n                          icon: UiLock,\n                          onSelect: () => void runCollapsedAction(\"close\"),\n                        },\n                      ]\n                    : []),\n                  ...((resolveCommentStage(config, comment.status) ===\n                    \"resolved\" ||\n                    resolveCommentStage(config, comment.status) === \"closed\") &&\n                  props.onUpdateStatus &&\n                  statusForCommentStage(config, \"active\")\n                    ? [\n                        {\n                          label: \"Reopen\",\n                          icon: UiRestart,\n                          onSelect: () => void runCollapsedAction(\"reopen\"),\n                        },\n                      ]\n                    : []),\n                ],\n                ...(props.onCopy ? { onCopy: () => void copyCollapsed() } : {}),\n                ...(props.onMaximize ? { onMaximize: props.onMaximize } : {}),\n              })}\n            />\n          </span>\n        </div>\n        {collapsedActionError && (\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            {collapsedActionError}\n          </div>\n        )}\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    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CommentCard.js","names":["_Fragment"],"sources":["../../src/comments/CommentCard.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport {\n  parseTimestamp,\n  formatRelativeTime,\n} from \"../data/cells/timestamp-format\";\nimport {\n  UiCheck,\n  UiCopy,\n  UiDotsVertical,\n  UiFullscreen,\n  UiLock,\n  UiRestart,\n  UiTrash,\n} from \"../icons\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport {\n  ChecklistChips,\n  FacetBadges,\n  RatingChip,\n  ReviewDecisionChip,\n  RefChips,\n  StatusChip,\n} from \"./CommentCardParts\";\nimport { CommentMarkdown } from \"./CommentMarkdown\";\nimport {\n  assignmentMenuItems,\n  type CommentActionRunner,\n} from \"./comment-assign\";\nimport { authorDisplayName, truncatePlain } from \"./comment-utils\";\nimport {\n  resolveCommentStage,\n  statusForCommentStage,\n} from \"../lib/comment-stage\";\nimport type { Comment, CommentAuthor, 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  /** Close an active or resolved root comment. */\n  onClose?: () => void | Promise<void>;\n  /** Claim an unassigned active root for the current user or agent. */\n  onAcknowledge?: () => void | Promise<void>;\n  /** Hand an active root to an assignee, or clear it with `null`. */\n  onAssign?: (assignee: CommentAuthor | null) => void | Promise<void>;\n  /**\n   * Caller-owned entries appended to the \"Assign…\" submenu, such as a run-agent\n   * action. Computed per comment so they can reflect its state.\n   */\n  extraAssignItems?: (comment: Comment) => DropdownMenuItem[];\n  /** Delete this comment. */\n  onDelete?: () => void;\n  /** Copy this comment's whole thread in the caller's canonical format. */\n  onCopy?: () => void | Promise<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   * Open this card's thread in a larger view. Owned by the caller because a\n   * card knows only itself, while maximizing shows the root and its replies.\n   * Omit to drop the action (e.g. inside an already-maximized thread).\n   */\n  onMaximize?: () => void;\n};\n\nfunction actionMenuItems(\n  isReply: boolean,\n  opts: {\n    onDelete?: () => void;\n    statusActions?: DropdownMenuItem[];\n    onCopy?: () => void;\n    onMaximize?: () => void;\n  },\n): DropdownMenuItem[] {\n  const items: DropdownMenuItem[] = [];\n  if (opts.onDelete) {\n    items.push({ label: \"Delete\", icon: UiTrash, onSelect: opts.onDelete });\n  }\n  if (!isReply) items.push(...(opts.statusActions ?? []));\n  if (opts.onCopy) {\n    items.push({ label: \"Copy\", icon: UiCopy, onSelect: opts.onCopy });\n  }\n  if (opts.onMaximize) {\n    items.push({\n      label: \"Maximise\",\n      icon: UiFullscreen,\n      onSelect: opts.onMaximize,\n    });\n  }\n  return items;\n}\n\n/** A runner for {@link assignmentMenuItems} that shows a failure through `setError`. */\nfunction reportingRunner(setError: (message: string) => void): CommentActionRunner {\n  return (verb, action) => {\n    setError(\"\");\n    void (async () => {\n      try {\n        await action();\n      } catch (cause) {\n        setError(\n          `Couldn't ${verb} comment: ${cause instanceof Error ? cause.message : \"Unexpected error\"}`,\n        );\n      }\n    })();\n  };\n}\n\n/** The Acknowledge and Assign… entries for a root; none for replies. */\nfunction rootAssignmentItems(\n  props: CommentCardProps,\n  run: CommentActionRunner,\n): DropdownMenuItem[] {\n  const { comment, config, onAcknowledge, onAssign, extraAssignItems } = props;\n  return assignmentMenuItems({\n    comment,\n    config,\n    run,\n    ...(onAcknowledge ? { onAcknowledge } : {}),\n    ...(onAssign ? { onAssign } : {}),\n    ...(extraAssignItems ? { extraAssignItems } : {}),\n  });\n}\n\nfunction CommentBody(props: CommentCardProps) {\n  const {\n    comment,\n    config,\n    renderBody,\n    onUpdateStatus,\n    onClose,\n    onDelete,\n    onCopy,\n    onReply,\n    onChecklistToggle,\n    onMaximize,\n  } = props;\n  const [actionError, setActionError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const date = parseTimestamp(comment.createdAt);\n  const resolved = statusForCommentStage(config, \"resolved\");\n  const active = statusForCommentStage(config, \"active\");\n  const closed = statusForCommentStage(config, \"closed\");\n  const stage = resolveCommentStage(config, comment.status);\n  const updateStatus = async (status: string) => {\n    setActionError(\"\");\n    try {\n      await onUpdateStatus?.(status);\n    } catch (error) {\n      setActionError(\n        `Couldn't update comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const close = async () => {\n    setActionError(\"\");\n    try {\n      await onClose?.();\n    } catch (error) {\n      setActionError(\n        `Couldn't close comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const copy = async () => {\n    setActionError(\"\");\n    try {\n      await onCopy?.();\n    } catch (error) {\n      setActionError(\n        `Couldn't copy comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  };\n  const menuItems = actionMenuItems(isReply, {\n    ...(onDelete ? { onDelete } : {}),\n    statusActions: [\n      ...rootAssignmentItems(props, reportingRunner(setActionError)),\n      ...(stage === \"active\" && onUpdateStatus && resolved\n        ? [\n            {\n              label: \"Resolve\",\n              icon: UiCheck,\n              onSelect: () => void updateStatus(resolved.value),\n            },\n          ]\n        : []),\n      ...((stage === \"active\" || stage === \"resolved\") && onClose && closed\n        ? [\n            {\n              label: \"Close\",\n              icon: UiLock,\n              onSelect: () => void close(),\n            },\n          ]\n        : []),\n      ...((stage === \"resolved\" || stage === \"closed\") &&\n      onUpdateStatus &&\n      active\n        ? [\n            {\n              label: \"Reopen\",\n              icon: UiRestart,\n              onSelect: () => void updateStatus(active.value),\n            },\n          ]\n        : []),\n    ],\n    ...(onCopy ? { onCopy: () => void copy() } : {}),\n    ...(onMaximize ? { onMaximize } : {}),\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              <StatusChip comment={comment} config={config} />\n              <RatingChip rating={comment.rating} />\n              <ReviewDecisionChip decision={comment.reviewDecision} />\n              <FacetBadges comment={comment} config={config} />\n            </div>\n          )}\n        </div>\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          {!isReply &&\n            (stage === \"active\" || stage === \"resolved\") &&\n            onClose &&\n            closed && (\n              <button\n                type=\"button\"\n                aria-label=\"Close comment\"\n                title=\"Close comment\"\n                onClick={() => void close()}\n                className=\"inline-flex items-center justify-center rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [@media(pointer:coarse)]:size-11\"\n              >\n                <Icon icon={UiCheck} className=\"text-sm\" />\n              </button>\n            )}\n          {!isReply && stage === \"closed\" && onUpdateStatus && active && (\n            <button\n              type=\"button\"\n              aria-label=\"Reopen comment\"\n              title=\"Reopen comment\"\n              onClick={() => void updateStatus(active.value)}\n              className=\"inline-flex items-center justify-center rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [@media(pointer:coarse)]:size-11\"\n            >\n              <Icon icon={UiRestart} className=\"text-sm\" />\n            </button>\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 items-center justify-center rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:size-11\"\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      {actionError && (\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          {actionError}\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 [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:px-3 [@media(pointer:coarse)]:text-sm\"\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. Offers a Maximise action when `onMaximize` is supplied — the owner\n * enlarges the whole thread. Fully controlled — all mutations are delegated to\n * 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 [collapsedActionError, setCollapsedActionError] = useState(\"\");\n  const isReply = Boolean(comment.parentId);\n  const body = <CommentBody {...props} />;\n\n  async function runCollapsedAction(action: \"resolve\" | \"close\" | \"reopen\") {\n    setCollapsedActionError(\"\");\n    try {\n      if (action === \"close\") {\n        await props.onClose?.();\n        return;\n      }\n      const next = statusForCommentStage(\n        config,\n        action === \"resolve\" ? \"resolved\" : \"active\",\n      );\n      if (next) await props.onUpdateStatus?.(next.value);\n    } catch (error) {\n      setCollapsedActionError(\n        `${action === \"close\" ? \"Couldn't close comment\" : \"Couldn't update comment\"}: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\n  }\n\n  async function copyCollapsed() {\n    setCollapsedActionError(\"\");\n    try {\n      await props.onCopy?.();\n    } catch (error) {\n      setCollapsedActionError(\n        `Couldn't copy comment: ${error instanceof Error ? error.message : \"Unexpected error\"}`,\n      );\n    }\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=\"min-w-0 truncate text-[11px] font-semibold text-foreground\">\n            {authorDisplayName(comment.author)}\n          </span>\n          {!isReply && (\n            <>\n              <StatusChip comment={comment} config={config} />\n              <RatingChip rating={comment.rating} />\n              <ReviewDecisionChip decision={comment.reviewDecision} />\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                  : comment.reviewDecision === \"approved\"\n                    ? \"Approved\"\n                    : \"Empty comment\"}\n          </span>\n          <span\n            className=\"shrink-0\"\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 [@media(hover:none)]:opacity-70 [@media(pointer:coarse)]:p-2.5\"\n                >\n                  <Icon icon={UiDotsVertical} className=\"text-sm\" />\n                </span>\n              }\n              items={actionMenuItems(isReply, {\n                ...(props.onDelete ? { onDelete: props.onDelete } : {}),\n                statusActions: [\n                  ...rootAssignmentItems(\n                    props,\n                    reportingRunner(setCollapsedActionError),\n                  ),\n                  ...(resolveCommentStage(config, comment.status) ===\n                    \"active\" &&\n                  props.onUpdateStatus &&\n                  statusForCommentStage(config, \"resolved\")\n                    ? [\n                        {\n                          label: \"Resolve\",\n                          icon: UiCheck,\n                          onSelect: () => void runCollapsedAction(\"resolve\"),\n                        },\n                      ]\n                    : []),\n                  ...((resolveCommentStage(config, comment.status) ===\n                    \"active\" ||\n                    resolveCommentStage(config, comment.status) ===\n                      \"resolved\") &&\n                  props.onClose &&\n                  statusForCommentStage(config, \"closed\")\n                    ? [\n                        {\n                          label: \"Close\",\n                          icon: UiLock,\n                          onSelect: () => void runCollapsedAction(\"close\"),\n                        },\n                      ]\n                    : []),\n                  ...((resolveCommentStage(config, comment.status) ===\n                    \"resolved\" ||\n                    resolveCommentStage(config, comment.status) === \"closed\") &&\n                  props.onUpdateStatus &&\n                  statusForCommentStage(config, \"active\")\n                    ? [\n                        {\n                          label: \"Reopen\",\n                          icon: UiRestart,\n                          onSelect: () => void runCollapsedAction(\"reopen\"),\n                        },\n                      ]\n                    : []),\n                ],\n                ...(props.onCopy ? { onCopy: () => void copyCollapsed() } : {}),\n                ...(props.onMaximize ? { onMaximize: props.onMaximize } : {}),\n              })}\n            />\n          </span>\n        </div>\n        {collapsedActionError && (\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            {collapsedActionError}\n          </div>\n        )}\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    </>\n  );\n}\n"],"mappings":"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"}

package/dist/comments/CommentCardParts.cjs

@@ -3,6 +3,7 @@ const require_comment_utils = require("./comment-utils.cjs");
 const require_comment_stage = require("../lib/comment-stage.cjs");
 const require_UiThumbsUp = require("../icons/components/UiThumbsUp.cjs");
 const require_UiThumbsDown = require("../icons/components/UiThumbsDown.cjs");
+const require_UiRobotAi = require("../icons/components/UiRobotAi.cjs");
 const require_Badge = require("../data/Badge.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/comments/CommentCardParts.tsx
@@ -29,14 +30,18 @@ function RatingChip({ rating }) {
 function StatusChip({ comment, config }) {
 	const status = require_comment_utils.resolveStatusConfig(config, comment.status);
 	if (!status) return null;
-	const closedBy = require_comment_stage.resolveCommentStage(config, comment.status) === "closed" ? comment.closedBy : void 0;
+	const stage = require_comment_stage.resolveCommentStage(config, comment.status);
+	const closedBy = stage === "closed" ? comment.closedBy : void 0;
+	const assignee = stage === "active" ? comment.assignee : void 0;
+	const icon = assignee?.kind === "agent" ? require_UiRobotAi.UiRobotAi : status.icon;
+	const title = assignee ? comment.acknowledgedAt ? `Acknowledged ${new Date(comment.acknowledgedAt).toLocaleString()}` : "Assigned, not yet acknowledged" : comment.closedAt ? new Date(comment.closedAt).toLocaleString() : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Badge.Badge, {
 		variant: "soft",
 		tone: require_comment_utils.toneToBadgeTone(status.tone),
 		size: "xs",
-		...status.icon ? { icon: status.icon } : {},
-		...comment.closedAt ? { title: new Date(comment.closedAt).toLocaleString() } : {},
-		children: closedBy ? `Closed by ${closedBy.name}` : status.label
+		...icon ? { icon } : {},
+		...title ? { title } : {},
+		children: assignee ? `Assigned to ${assignee.name}` : closedBy ? `Closed by ${closedBy.name}` : status.label
 	});
 }
 function FacetBadges({ comment, config, compact }) {

package/dist/comments/CommentCardParts.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCardParts.cjs","names":["Badge","UiThumbsUp","UiThumbsDown","resolveStatusConfig","resolveCommentStage","toneToBadgeTone","resolveFacetOption","_Fragment","cn"],"sources":["../../src/comments/CommentCardParts.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { cn } from \"../lib/utils\";\nimport { UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport {\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n} from \"./comment-utils\";\nimport { resolveCommentStage } from \"../lib/comment-stage\";\nimport type {\n  Comment,\n  CommentConfig,\n  CommentRating,\n  CommentReviewDecision,\n} from \"./comment-types\";\n\nexport function ReviewDecisionChip({\n  decision,\n}: {\n  decision: CommentReviewDecision | undefined;\n}) {\n  if (!decision) return null;\n  const label =\n    decision === \"approved\"\n      ? \"Approved\"\n      : decision === \"rejected\"\n        ? \"Rejected\"\n        : \"Revision requested\";\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={\n        decision === \"approved\"\n          ? \"success\"\n          : decision === \"rejected\"\n            ? \"danger\"\n            : \"warning\"\n      }\n      size=\"xs\"\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function 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\nexport function StatusChip({\n  comment,\n  config,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n}) {\n  const status = resolveStatusConfig(config, comment.status);\n  if (!status) return null;\n  const closedBy =\n    resolveCommentStage(config, comment.status) === \"closed\"\n      ? comment.closedBy\n      : undefined;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(status.tone)}\n      size=\"xs\"\n      {...(status.icon ? { icon: status.icon } : {})}\n      {...(comment.closedAt\n        ? { title: new Date(comment.closedAt).toLocaleString() }\n        : {})}\n    >\n      {closedBy ? `Closed by ${closedBy.name}` : status.label}\n    </Badge>\n  );\n}\n\nexport function FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const chips = (config.facets ?? []).flatMap((facet) => {\n    const option = resolveFacetOption(facet, comment.facets?.[facet.key]);\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\nexport function ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, index) => {\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={index}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(index)}\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\nexport function RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, index) => (\n        <span\n          key={index}\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"],"mappings":"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"}
+{"version":3,"file":"CommentCardParts.cjs","names":["Badge","UiThumbsUp","UiThumbsDown","resolveStatusConfig","resolveCommentStage","UiRobotAi","toneToBadgeTone","resolveFacetOption","_Fragment","cn"],"sources":["../../src/comments/CommentCardParts.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { cn } from \"../lib/utils\";\nimport { UiRobotAi, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport {\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n} from \"./comment-utils\";\nimport { resolveCommentStage } from \"../lib/comment-stage\";\nimport type {\n  Comment,\n  CommentConfig,\n  CommentRating,\n  CommentReviewDecision,\n} from \"./comment-types\";\n\nexport function ReviewDecisionChip({\n  decision,\n}: {\n  decision: CommentReviewDecision | undefined;\n}) {\n  if (!decision) return null;\n  const label =\n    decision === \"approved\"\n      ? \"Approved\"\n      : decision === \"rejected\"\n        ? \"Rejected\"\n        : \"Revision requested\";\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={\n        decision === \"approved\"\n          ? \"success\"\n          : decision === \"rejected\"\n            ? \"danger\"\n            : \"warning\"\n      }\n      size=\"xs\"\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function 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\nexport function StatusChip({\n  comment,\n  config,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n}) {\n  const status = resolveStatusConfig(config, comment.status);\n  if (!status) return null;\n  const stage = resolveCommentStage(config, comment.status);\n  const closedBy = stage === \"closed\" ? comment.closedBy : undefined;\n  const assignee = stage === \"active\" ? comment.assignee : undefined;\n  const icon = assignee?.kind === \"agent\" ? UiRobotAi : status.icon;\n  const title = assignee\n    ? comment.acknowledgedAt\n      ? `Acknowledged ${new Date(comment.acknowledgedAt).toLocaleString()}`\n      : \"Assigned, not yet acknowledged\"\n    : comment.closedAt\n      ? new Date(comment.closedAt).toLocaleString()\n      : undefined;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(status.tone)}\n      size=\"xs\"\n      {...(icon ? { icon } : {})}\n      {...(title ? { title } : {})}\n    >\n      {assignee\n        ? `Assigned to ${assignee.name}`\n        : closedBy\n          ? `Closed by ${closedBy.name}`\n          : status.label}\n    </Badge>\n  );\n}\n\nexport function FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const chips = (config.facets ?? []).flatMap((facet) => {\n    const option = resolveFacetOption(facet, comment.facets?.[facet.key]);\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\nexport function ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, index) => {\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={index}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(index)}\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\nexport function RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, index) => (\n        <span\n          key={index}\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"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CommentCardParts.d.ts","sourceRoot":"","sources":["../../src/comments/CommentCardParts.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;CAC7C,sCAuBA;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,sCAa3E;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;CACvB,sCAoBA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sCAgBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,iBAAiB,GAClB,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,sCA6BA;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,sCAiBzD"}
+{"version":3,"file":"CommentCardParts.d.ts","sourceRoot":"","sources":["../../src/comments/CommentCardParts.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,OAAO,EACP,aAAa,EACb,aAAa,EACb,qBAAqB,EACtB,MAAM,iBAAiB,CAAC;AAEzB,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,qBAAqB,GAAG,SAAS,CAAC;CAC7C,sCAuBA;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,sCAa3E;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,MAAM,GACP,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;CACvB,sCA6BA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sCAgBA;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,iBAAiB,GAClB,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,sCA6BA;AAED,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,sCAiBzD"}

package/dist/comments/CommentCardParts.js

@@ -3,6 +3,7 @@ import { resolveFacetOption, resolveStatusConfig, toneToBadgeTone } from "./comm
 import { resolveCommentStage } from "../lib/comment-stage.js";
 import { UiThumbsUp } from "../icons/components/UiThumbsUp.js";
 import { UiThumbsDown } from "../icons/components/UiThumbsDown.js";
+import { UiRobotAi } from "../icons/components/UiRobotAi.js";
 import { Badge } from "../data/Badge.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 // src/comments/CommentCardParts.tsx
@@ -29,14 +30,18 @@ function RatingChip({ rating }) {
 function StatusChip({ comment, config }) {
 	const status = resolveStatusConfig(config, comment.status);
 	if (!status) return null;
-	const closedBy = resolveCommentStage(config, comment.status) === "closed" ? comment.closedBy : void 0;
+	const stage = resolveCommentStage(config, comment.status);
+	const closedBy = stage === "closed" ? comment.closedBy : void 0;
+	const assignee = stage === "active" ? comment.assignee : void 0;
+	const icon = assignee?.kind === "agent" ? UiRobotAi : status.icon;
+	const title = assignee ? comment.acknowledgedAt ? `Acknowledged ${new Date(comment.acknowledgedAt).toLocaleString()}` : "Assigned, not yet acknowledged" : comment.closedAt ? new Date(comment.closedAt).toLocaleString() : void 0;
 	return /* @__PURE__ */ jsx(Badge, {
 		variant: "soft",
 		tone: toneToBadgeTone(status.tone),
 		size: "xs",
-		...status.icon ? { icon: status.icon } : {},
-		...comment.closedAt ? { title: new Date(comment.closedAt).toLocaleString() } : {},
-		children: closedBy ? `Closed by ${closedBy.name}` : status.label
+		...icon ? { icon } : {},
+		...title ? { title } : {},
+		children: assignee ? `Assigned to ${assignee.name}` : closedBy ? `Closed by ${closedBy.name}` : status.label
 	});
 }
 function FacetBadges({ comment, config, compact }) {

package/dist/comments/CommentCardParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentCardParts.js","names":["_Fragment"],"sources":["../../src/comments/CommentCardParts.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { cn } from \"../lib/utils\";\nimport { UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport {\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n} from \"./comment-utils\";\nimport { resolveCommentStage } from \"../lib/comment-stage\";\nimport type {\n  Comment,\n  CommentConfig,\n  CommentRating,\n  CommentReviewDecision,\n} from \"./comment-types\";\n\nexport function ReviewDecisionChip({\n  decision,\n}: {\n  decision: CommentReviewDecision | undefined;\n}) {\n  if (!decision) return null;\n  const label =\n    decision === \"approved\"\n      ? \"Approved\"\n      : decision === \"rejected\"\n        ? \"Rejected\"\n        : \"Revision requested\";\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={\n        decision === \"approved\"\n          ? \"success\"\n          : decision === \"rejected\"\n            ? \"danger\"\n            : \"warning\"\n      }\n      size=\"xs\"\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function 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\nexport function StatusChip({\n  comment,\n  config,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n}) {\n  const status = resolveStatusConfig(config, comment.status);\n  if (!status) return null;\n  const closedBy =\n    resolveCommentStage(config, comment.status) === \"closed\"\n      ? comment.closedBy\n      : undefined;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(status.tone)}\n      size=\"xs\"\n      {...(status.icon ? { icon: status.icon } : {})}\n      {...(comment.closedAt\n        ? { title: new Date(comment.closedAt).toLocaleString() }\n        : {})}\n    >\n      {closedBy ? `Closed by ${closedBy.name}` : status.label}\n    </Badge>\n  );\n}\n\nexport function FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const chips = (config.facets ?? []).flatMap((facet) => {\n    const option = resolveFacetOption(facet, comment.facets?.[facet.key]);\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\nexport function ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, index) => {\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={index}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(index)}\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\nexport function RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, index) => (\n        <span\n          key={index}\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"],"mappings":";;;;;;;;AAgBA,SAAgB,mBAAmB,EACjC,YAGC;CACD,IAAI,CAAC,UAAU,OAAO;CAOtB,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MACE,aAAa,aACT,YACA,aAAa,aACX,WACA;EAER,MAAK;EAEJ,UAjBH,aAAa,aACT,aACA,aAAa,aACX,aACA;CAcC,CAAA;AAEX;AAEA,SAAgB,WAAW,EAAE,UAAiD;CAC5E,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,WAAW,WAAW;CAC5B,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAM,WAAW,YAAY;EAC7B,MAAK;EACL,MAAM,WAAW,aAAa;EAE7B,UAAA,WAAW,oBAAoB;CAC3B,CAAA;AAEX;AAEA,SAAgB,WAAW,EACzB,SACA,UAIC;CACD,MAAM,SAAS,oBAAoB,QAAQ,QAAQ,MAAM;CACzD,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,WACJ,oBAAoB,QAAQ,QAAQ,MAAM,MAAM,WAC5C,QAAQ,WACR,KAAA;CACN,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAM,gBAAgB,OAAO,IAAI;EACjC,MAAK;EACL,GAAK,OAAO,OAAO,EAAE,MAAM,OAAO,KAAK,IAAI,CAAC;EAC5C,GAAK,QAAQ,WACT,EAAE,OAAO,IAAI,KAAK,QAAQ,QAAQ,CAAC,CAAC,eAAe,EAAE,IACrD,CAAC;EAEJ,UAAA,WAAW,aAAa,SAAS,SAAS,OAAO;CAC7C,CAAA;AAEX;AAEA,SAAgB,YAAY,EAC1B,SACA,QACA,WAKC;CACD,MAAM,SAAS,OAAO,UAAU,CAAC,EAAA,CAAG,SAAS,UAAU;EACrD,MAAM,SAAS,mBAAmB,OAAO,QAAQ,SAAS,MAAM,IAAI;EACpE,IAAI,CAAC,QAAQ,OAAO,CAAC;EACrB,OAAO,CACL,oBAAC,OAAD;GAEE,SAAQ;GACR,MAAM,gBAAgB,OAAO,IAAI;GACjC,MAAK;GAEJ,UAAA,UAAW,OAAO,SAAS,OAAO,QAAS,OAAO;EAC9C,GANA,MAAM,GAMN,CACT;CACF,CAAC;CACD,OAAO,MAAM,SAAS,IAAI,oBAAAA,UAAA,EAAA,UAAG,MAAQ,CAAA,IAAI;AAC3C;AAEA,SAAgB,eAAe,EAC7B,SACA,qBAIC;CACD,IAAI,CAAC,QAAQ,WAAW,QAAQ,OAAO;CACvC,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,QAAQ,UAAU,KAAK,MAAM,UAAU;GACtC,MAAM,OAAO,0BAA0B,KAAK,KAAK,MAAM;GACvD,MAAM,SAAS,kBAAkB,KAAK,KAAK,MAAM;GACjD,OACE,oBAAC,UAAD;IAEE,MAAK;IACL,eAAe,oBAAoB,KAAK;IACxC,UAAU,CAAC;IACX,WAAW,GACT,0FACA,qBAAqB,mCACrB,OACI,sFACA,SACE,6EACA,gCACR;IAEC,UAAA,KAAK;GACA,GAfD,KAeC;EAEZ,CAAC;CACE,CAAA;AAET;AAEA,SAAgB,SAAS,EAAE,WAAiC;CAC1D,IAAI,CAAC,QAAQ,MAAM,QAAQ,OAAO;CAClC,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ,UAAA,QAAQ,KAAK,KAAK,OAAO,UACxB,qBAAC,QAAD;GAEE,WAAU;GAFZ,UAAA,CAIE,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CAA+B,MAAM,OAAM,GAAO;GAClD,CAAA,GAAA,oBAAC,QAAD;IAAM,WAAW,MAAM,OAAO,cAAc,KAAA;IACzC,UAAA,MAAM,MAAM,KAAK,IAAI;GAClB,CAAA,CACF;EAPC,GAAA,KAOD,CACP;CACE,CAAA;AAET"}
+{"version":3,"file":"CommentCardParts.js","names":["_Fragment"],"sources":["../../src/comments/CommentCardParts.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { cn } from \"../lib/utils\";\nimport { UiRobotAi, UiThumbsDown, UiThumbsUp } from \"../icons\";\nimport {\n  resolveFacetOption,\n  resolveStatusConfig,\n  toneToBadgeTone,\n} from \"./comment-utils\";\nimport { resolveCommentStage } from \"../lib/comment-stage\";\nimport type {\n  Comment,\n  CommentConfig,\n  CommentRating,\n  CommentReviewDecision,\n} from \"./comment-types\";\n\nexport function ReviewDecisionChip({\n  decision,\n}: {\n  decision: CommentReviewDecision | undefined;\n}) {\n  if (!decision) return null;\n  const label =\n    decision === \"approved\"\n      ? \"Approved\"\n      : decision === \"rejected\"\n        ? \"Rejected\"\n        : \"Revision requested\";\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={\n        decision === \"approved\"\n          ? \"success\"\n          : decision === \"rejected\"\n            ? \"danger\"\n            : \"warning\"\n      }\n      size=\"xs\"\n    >\n      {label}\n    </Badge>\n  );\n}\n\nexport function 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\nexport function StatusChip({\n  comment,\n  config,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n}) {\n  const status = resolveStatusConfig(config, comment.status);\n  if (!status) return null;\n  const stage = resolveCommentStage(config, comment.status);\n  const closedBy = stage === \"closed\" ? comment.closedBy : undefined;\n  const assignee = stage === \"active\" ? comment.assignee : undefined;\n  const icon = assignee?.kind === \"agent\" ? UiRobotAi : status.icon;\n  const title = assignee\n    ? comment.acknowledgedAt\n      ? `Acknowledged ${new Date(comment.acknowledgedAt).toLocaleString()}`\n      : \"Assigned, not yet acknowledged\"\n    : comment.closedAt\n      ? new Date(comment.closedAt).toLocaleString()\n      : undefined;\n  return (\n    <Badge\n      variant=\"soft\"\n      tone={toneToBadgeTone(status.tone)}\n      size=\"xs\"\n      {...(icon ? { icon } : {})}\n      {...(title ? { title } : {})}\n    >\n      {assignee\n        ? `Assigned to ${assignee.name}`\n        : closedBy\n          ? `Closed by ${closedBy.name}`\n          : status.label}\n    </Badge>\n  );\n}\n\nexport function FacetBadges({\n  comment,\n  config,\n  compact,\n}: {\n  comment: Comment;\n  config: CommentConfig;\n  compact?: boolean;\n}) {\n  const chips = (config.facets ?? []).flatMap((facet) => {\n    const option = resolveFacetOption(facet, comment.facets?.[facet.key]);\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\nexport function ChecklistChips({\n  comment,\n  onChecklistToggle,\n}: {\n  comment: Comment;\n  onChecklistToggle?: (index: number) => void;\n}) {\n  if (!comment.checklist?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1\">\n      {comment.checklist.map((item, index) => {\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={index}\n            type=\"button\"\n            onClick={() => onChecklistToggle?.(index)}\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\nexport function RefChips({ comment }: { comment: Comment }) {\n  if (!comment.refs?.length) return null;\n  return (\n    <div className=\"flex flex-wrap gap-1.5\">\n      {comment.refs.map((group, index) => (\n        <span\n          key={index}\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"],"mappings":"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"}

package/dist/comments/CommentComposer.cjs

@@ -115,7 +115,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "comment-compose-box",
 		"aria-busy": submitting,
-		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",
+		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 [@media(pointer:coarse)]:pb-2",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MentionTextarea.MentionTextarea, {
 				ref: inputRef,
@@ -131,7 +131,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 				placeholder,
 				autoFocus: autoFocus || collapsible && open,
 				"data-testid": "comment-compose-input",
-				className: "min-h-[48px] pr-10"
+				className: "min-h-[48px] pr-10 [@media(pointer:coarse)]:pr-12"
 			}),
 			collapsible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
@@ -140,14 +140,14 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 					setOpen(false);
 				},
 				"aria-label": "Close composer",
-				className: "absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+				className: "absolute right-3 top-3 inline-flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:right-1 [@media(pointer:coarse)]:top-1 [@media(pointer:coarse)]:size-11",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 					icon: require_UiClose.UiClose,
 					className: "text-xs"
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5",
+				className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5 [@media(pointer:coarse)]:static [@media(pointer:coarse)]:mt-2 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:gap-2",
 				children: [
 					[[
 						"positive",
@@ -162,7 +162,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						"aria-label": label,
 						"aria-pressed": rating === value,
 						onClick: () => setRating((current) => current === value ? void 0 : value),
-						className: require_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")),
+						className: require_utils.cn("inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:size-11", 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__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 							icon,
 							className: "text-sm"
@@ -174,12 +174,12 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						onChange: (value) => setFacet(facet.key, value)
 					}, facet.key)),
 					createActions?.length ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: "ml-auto flex gap-1",
+						className: "ml-auto flex gap-1 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:justify-end [@media(pointer:coarse)]:gap-2",
 						children: createActions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => void submit(action.id),
 							disabled: submitting || !body.trim() && !rating,
-							className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+							className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:px-3 [@media(pointer:coarse)]:text-sm",
 							children: action.label
 						}, action.id))
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -188,7 +188,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						"aria-label": "Post comment",
 						onClick: () => void submit(),
 						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",
+						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 [@media(pointer:coarse)]:size-11",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
 							icon: require_UiArrowUp.UiArrowUp,
 							className: "text-xs"

package/dist/comments/CommentComposer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.cjs","names":["DropdownMenu","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiThumbsUp","UiThumbsDown","UiArrowUp"],"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  CommentCreateAction,\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  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\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  createActions,\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(actionId?: string) {\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      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\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        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && 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        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\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        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CommentComposer.cjs","names":["DropdownMenu","cn","toneToBadgeTone","useState","useRef","MentionTextarea","Icon","UiClose","UiThumbsUp","UiThumbsDown","UiArrowUp"],"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  CommentCreateAction,\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  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\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  createActions,\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(actionId?: string) {\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      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\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 [@media(pointer:coarse)]:pb-2\"\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        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && open)}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10 [@media(pointer:coarse)]:pr-12\"\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 inline-flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:right-1 [@media(pointer:coarse)]:top-1 [@media(pointer:coarse)]:size-11\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      {/* Touch-sized controls cannot share one absolute row with the textarea,\n          so on a coarse pointer the row joins the flow and wraps. */}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5 [@media(pointer:coarse)]:static [@media(pointer:coarse)]:mt-2 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:gap-2\">\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 [@media(pointer:coarse)]:size-11\",\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        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:justify-end [@media(pointer:coarse)]:gap-2\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:px-3 [@media(pointer:coarse)]:text-sm\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\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 [@media(pointer:coarse)]:size-11\"\n          >\n            <Icon icon={UiArrowUp} className=\"text-xs\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"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,mBAAmB,EACnB,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,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClF,aAAa,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC/C,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,aAAa,EACb,SAAS,GACV,EAAE,oBAAoB,+BAsKtB"}
+{"version":3,"file":"CommentComposer.d.ts","sourceRoot":"","sources":["../../src/comments/CommentComposer.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,mBAAmB,EACnB,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,8FAA8F;IAC9F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClF,aAAa,CAAC,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAC/C,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,aAAa,EACb,SAAS,GACV,EAAE,oBAAoB,+BAwKtB"}

package/dist/comments/CommentComposer.js

@@ -115,7 +115,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "comment-compose-box",
 		"aria-busy": submitting,
-		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",
+		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 [@media(pointer:coarse)]:pb-2",
 		children: [
 			/* @__PURE__ */ jsx(MentionTextarea, {
 				ref: inputRef,
@@ -131,7 +131,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 				placeholder,
 				autoFocus: autoFocus || collapsible && open,
 				"data-testid": "comment-compose-input",
-				className: "min-h-[48px] pr-10"
+				className: "min-h-[48px] pr-10 [@media(pointer:coarse)]:pr-12"
 			}),
 			collapsible && /* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -140,14 +140,14 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 					setOpen(false);
 				},
 				"aria-label": "Close composer",
-				className: "absolute right-3 top-3 rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground",
+				className: "absolute right-3 top-3 inline-flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:right-1 [@media(pointer:coarse)]:top-1 [@media(pointer:coarse)]:size-11",
 				children: /* @__PURE__ */ jsx(Icon, {
 					icon: UiClose,
 					className: "text-xs"
 				})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5",
+				className: "absolute inset-x-3 bottom-2.5 flex items-center gap-1.5 [@media(pointer:coarse)]:static [@media(pointer:coarse)]:mt-2 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:gap-2",
 				children: [
 					[[
 						"positive",
@@ -162,7 +162,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						"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")),
+						className: cn("inline-flex size-7 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:size-11", 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"
@@ -174,12 +174,12 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						onChange: (value) => setFacet(facet.key, value)
 					}, facet.key)),
 					createActions?.length ? /* @__PURE__ */ jsx("div", {
-						className: "ml-auto flex gap-1",
+						className: "ml-auto flex gap-1 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:justify-end [@media(pointer:coarse)]:gap-2",
 						children: createActions.map((action) => /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => void submit(action.id),
 							disabled: submitting || !body.trim() && !rating,
-							className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
+							className: "whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:px-3 [@media(pointer:coarse)]:text-sm",
 							children: action.label
 						}, action.id))
 					}) : /* @__PURE__ */ jsx("button", {
@@ -188,7 +188,7 @@ function CommentComposer({ config, anchor, collapsible = true, autoFocus = false
 						"aria-label": "Post comment",
 						onClick: () => void submit(),
 						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",
+						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 [@media(pointer:coarse)]:size-11",
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: UiArrowUp,
 							className: "text-xs"

package/dist/comments/CommentComposer.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommentComposer.js","names":[],"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  CommentCreateAction,\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  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\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  createActions,\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(actionId?: string) {\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      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\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        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && 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        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\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        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CommentComposer.js","names":[],"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  CommentCreateAction,\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  /** Focus the input on mount. A collapsible composer also focuses when the user expands it. */\n  autoFocus?: boolean;\n  placeholder?: string;\n  /** Create a new root comment. */\n  onCreate?: (input: CommentCreateInput, actionId?: string) => void | Promise<void>;\n  createActions?: readonly CommentCreateAction[];\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  createActions,\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(actionId?: string) {\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      const input: CommentCreateInput = {\n        body: text,\n        anchor: anchor ?? null,\n        ...(rating ? { rating } : {}),\n        ...(Object.keys(facets).length > 0 ? { facets } : {}),\n        ...(mentions.length > 0 ? { mentions } : {}),\n      };\n      if (actionId === undefined) await onCreate?.(input);\n      else await onCreate?.(input, actionId);\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 [@media(pointer:coarse)]:pb-2\"\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        // An always-open composer is page chrome: focusing it on mount would\n        // scroll its host to it and steal the keyboard from the page.\n        autoFocus={autoFocus || (collapsible && open)}\n        data-testid=\"comment-compose-input\"\n        className=\"min-h-[48px] pr-10 [@media(pointer:coarse)]:pr-12\"\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 inline-flex items-center justify-center rounded-full p-1 text-muted-foreground hover:bg-muted hover:text-foreground [@media(pointer:coarse)]:right-1 [@media(pointer:coarse)]:top-1 [@media(pointer:coarse)]:size-11\"\n        >\n          <Icon icon={UiClose} className=\"text-xs\" />\n        </button>\n      )}\n      {/* Touch-sized controls cannot share one absolute row with the textarea,\n          so on a coarse pointer the row joins the flow and wraps. */}\n      <div className=\"absolute inset-x-3 bottom-2.5 flex items-center gap-1.5 [@media(pointer:coarse)]:static [@media(pointer:coarse)]:mt-2 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:gap-2\">\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 [@media(pointer:coarse)]:size-11\",\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        {createActions?.length ? (\n          <div className=\"ml-auto flex gap-1 [@media(pointer:coarse)]:flex-wrap [@media(pointer:coarse)]:justify-end [@media(pointer:coarse)]:gap-2\">\n            {createActions.map((action) => (\n              <button\n                key={action.id}\n                type=\"button\"\n                onClick={() => void submit(action.id)}\n                disabled={submitting || (!body.trim() && !rating)}\n                className=\"whitespace-nowrap rounded-md bg-primary px-1.5 py-1 text-[10px] font-medium text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground [@media(pointer:coarse)]:min-h-11 [@media(pointer:coarse)]:px-3 [@media(pointer:coarse)]:text-sm\"\n              >\n                {action.label}\n              </button>\n            ))}\n          </div>\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 [@media(pointer:coarse)]:size-11\"\n          >\n            <Icon icon={UiArrowUp} className=\"text-xs\" />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}