@flanksource/clicky-ui 0.2.21 → 0.3.2

package/dist/comments/CommentThreadList.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../lib/utils.js";
+import { Button } from "../components/button.js";
+import { CommentCard } from "./CommentCard.js";
+import { getRoots, buildReplyMap, sortReplies } from "./comment-utils.js";
+function ReplyInput({
+  onSubmit,
+  onCancel
+}) {
+  const [body, setBody] = useState("");
+  async function send() {
+    if (!body.trim()) return;
+    await onSubmit(body.trim());
+    setBody("");
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "ml-6 flex gap-1.5 py-1", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        autoFocus: true,
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void send();
+          }
+          if (e.key === "Escape") onCancel();
+        },
+        placeholder: "Write a reply…",
+        "data-testid": "comment-reply-input",
+        className: "h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        className: "h-7 text-xs",
+        disabled: !body.trim(),
+        onClick: () => void send(),
+        children: "Send"
+      }
+    )
+  ] });
+}
+function CommentThreadList({
+  comments,
+  config,
+  compact = false,
+  renderRootMeta,
+  getThreadProps,
+  renderBody,
+  onUpdateStatus,
+  onChecklistToggle,
+  onDelete,
+  onReply
+}) {
+  const [replyingTo, setReplyingTo] = useState(null);
+  const roots = getRoots(comments);
+  const replyMap = buildReplyMap(comments);
+  if (roots.length === 0) return null;
+  function cardHandlers(id) {
+    return {
+      ...onUpdateStatus ? { onUpdateStatus: (status) => onUpdateStatus(id, status) } : {},
+      ...onChecklistToggle ? { onChecklistToggle: (index) => onChecklistToggle(id, index) } : {},
+      ...onDelete ? { onDelete: () => onDelete(id) } : {}
+    };
+  }
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: roots.map((root) => {
+    const replies = sortReplies(replyMap.get(root.id) ?? []);
+    const threadProps = (getThreadProps == null ? void 0 : getThreadProps(root)) ?? {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "comment-thread-block",
+        "data-comment-id": root.id,
+        ...threadProps,
+        className: cn("space-y-1.5 p-1", threadProps.className),
+        children: [
+          renderRootMeta ? /* @__PURE__ */ jsx("div", { className: "px-1", children: renderRootMeta(root) }) : null,
+          /* @__PURE__ */ jsx(
+            CommentCard,
+            {
+              comment: root,
+              config,
+              compact,
+              ...renderBody ? { renderBody } : {},
+              ...cardHandlers(root.id),
+              ...onReply ? { onReply: () => setReplyingTo(root.id) } : {}
+            }
+          ),
+          replies.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: replies.map((reply) => /* @__PURE__ */ jsx(
+            CommentCard,
+            {
+              comment: reply,
+              config,
+              compact,
+              ...renderBody ? { renderBody } : {},
+              ...cardHandlers(reply.id)
+            },
+            reply.id
+          )) }),
+          onReply && replyingTo === root.id && /* @__PURE__ */ jsx(
+            ReplyInput,
+            {
+              onCancel: () => setReplyingTo(null),
+              onSubmit: async (body) => {
+                await onReply(root, body);
+                setReplyingTo(null);
+              }
+            }
+          )
+        ]
+      },
+      root.id
+    );
+  }) });
+}
+export {
+  CommentThreadList
+};
+//# sourceMappingURL=CommentThreadList.js.map

package/dist/comments/CommentThreadList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThreadList.js","sources":["../../src/comments/CommentThreadList.tsx"],"sourcesContent":["import { useState, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Button } from \"../components/button\";\nimport { CommentCard } from \"./CommentCard\";\nimport { buildReplyMap, getRoots, sortReplies } from \"./comment-utils\";\nimport type { Comment, CommentConfig } from \"./comment-types\";\n\nexport type CommentThreadListProps = {\n  comments: Comment[];\n  config: CommentConfig;\n  compact?: boolean;\n  /** Extra content rendered above each root card (e.g. an anchor label). */\n  renderRootMeta?: (comment: Comment) => ReactNode;\n  /** Props merged onto each thread wrapper (e.g. for scroll anchoring). */\n  getThreadProps?: (comment: Comment) => HTMLAttributes<HTMLDivElement>;\n  /** Custom body renderer forwarded to each card. */\n  renderBody?: (body: string) => ReactNode;\n  onUpdateStatus?: (id: string, status: string) => void;\n  onChecklistToggle?: (id: string, index: number) => void;\n  onDelete?: (id: string) => void;\n  /** Submit a reply to `parent`. Presence enables the inline reply affordance. */\n  onReply?: (parent: Comment, body: string) => void | Promise<void>;\n};\n\nfunction ReplyInput({\n  onSubmit,\n  onCancel,\n}: {\n  onSubmit: (body: string) => void | Promise<void>;\n  onCancel: () => void;\n}) {\n  const [body, setBody] = useState(\"\");\n  async function send() {\n    if (!body.trim()) return;\n    await onSubmit(body.trim());\n    setBody(\"\");\n  }\n  return (\n    <div className=\"ml-6 flex gap-1.5 py-1\">\n      <input\n        autoFocus\n        value={body}\n        onChange={(e) => setBody(e.target.value)}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\") {\n            e.preventDefault();\n            void send();\n          }\n          if (e.key === \"Escape\") onCancel();\n        }}\n        placeholder=\"Write a reply…\"\n        data-testid=\"comment-reply-input\"\n        className=\"h-7 flex-1 rounded-md border border-border bg-background px-2 py-1 text-xs outline-none focus:border-primary/40\"\n      />\n      <Button\n        size=\"sm\"\n        className=\"h-7 text-xs\"\n        disabled={!body.trim()}\n        onClick={() => void send()}\n      >\n        Send\n      </Button>\n    </div>\n  );\n}\n\n/**\n * Renders a list of threaded comments: each root with its sorted replies and an\n * optional inline reply box. Fully controlled — mutations route through the\n * id-keyed callbacks.\n */\nexport function CommentThreadList({\n  comments,\n  config,\n  compact = false,\n  renderRootMeta,\n  getThreadProps,\n  renderBody,\n  onUpdateStatus,\n  onChecklistToggle,\n  onDelete,\n  onReply,\n}: CommentThreadListProps) {\n  const [replyingTo, setReplyingTo] = useState<string | null>(null);\n  const roots = getRoots(comments);\n  const replyMap = buildReplyMap(comments);\n\n  if (roots.length === 0) return null;\n\n  function cardHandlers(id: string) {\n    return {\n      ...(onUpdateStatus\n        ? { onUpdateStatus: (status: string) => onUpdateStatus(id, status) }\n        : {}),\n      ...(onChecklistToggle\n        ? { onChecklistToggle: (index: number) => onChecklistToggle(id, index) }\n        : {}),\n      ...(onDelete ? { onDelete: () => onDelete(id) } : {}),\n    };\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      {roots.map((root) => {\n        const replies = sortReplies(replyMap.get(root.id) ?? []);\n        const threadProps = getThreadProps?.(root) ?? {};\n        return (\n          <div\n            key={root.id}\n            data-testid=\"comment-thread-block\"\n            data-comment-id={root.id}\n            {...threadProps}\n            className={cn(\"space-y-1.5 p-1\", threadProps.className)}\n          >\n            {renderRootMeta ? (\n              <div className=\"px-1\">{renderRootMeta(root)}</div>\n            ) : null}\n            <CommentCard\n              comment={root}\n              config={config}\n              compact={compact}\n              {...(renderBody ? { renderBody } : {})}\n              {...cardHandlers(root.id)}\n              {...(onReply ? { onReply: () => setReplyingTo(root.id) } : {})}\n            />\n            {replies.length > 0 && (\n              <div className=\"space-y-1.5\">\n                {replies.map((reply) => (\n                  <CommentCard\n                    key={reply.id}\n                    comment={reply}\n                    config={config}\n                    compact={compact}\n                    {...(renderBody ? { renderBody } : {})}\n                    {...cardHandlers(reply.id)}\n                  />\n                ))}\n              </div>\n            )}\n            {onReply && replyingTo === root.id && (\n              <ReplyInput\n                onCancel={() => setReplyingTo(null)}\n                onSubmit={async (body) => {\n                  await onReply(root, body);\n                  setReplyingTo(null);\n                }}\n              />\n            )}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/comments/GroupedComments.cjs

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Badge = require("../data/Badge.cjs");
+const Section = require("../layout/Section.cjs");
+const CommentThreadList = require("./CommentThreadList.cjs");
+const commentUtils = require("./comment-utils.cjs");
+const UNCATEGORIZED = "";
+function groupLabel(value, config, groupBy) {
+  var _a, _b;
+  if (value === UNCATEGORIZED) return "Uncategorized";
+  const facet = (_a = config.facets) == null ? void 0 : _a.find((f) => f.key === groupBy);
+  return (facet && ((_b = commentUtils.resolveFacetOption(facet, value)) == null ? void 0 : _b.label)) ?? value;
+}
+function orderedGroupKeys(present, config, groupBy, order) {
+  var _a, _b;
+  const preferred = order ?? ((_b = (_a = config.facets) == null ? void 0 : _a.find((f) => f.key === groupBy)) == null ? void 0 : _b.options.map((o) => o.value)) ?? [];
+  const head = preferred.filter((v) => present.includes(v));
+  const tail = present.filter((v) => !head.includes(v)).sort((a, b) => a.localeCompare(b));
+  return [...head, ...tail];
+}
+function GroupedComments({
+  comments,
+  config,
+  groupBy,
+  order,
+  alwaysOpen,
+  ...callbacks
+}) {
+  const groups = commentUtils.groupByFacet(comments, groupBy);
+  const replyMap = commentUtils.buildReplyMap(comments);
+  const handlers = commentUtils.buildThreadListHandlers(
+    comments,
+    config,
+    callbacks
+  );
+  const keys = orderedGroupKeys([...groups.keys()], config, groupBy, order);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: keys.map((value) => {
+    const roots = groups.get(value) ?? [];
+    if (roots.length === 0) return null;
+    const openCount = roots.filter(
+      (r) => commentUtils.isUnresolved(config, r.status)
+    ).length;
+    const subset = roots.flatMap((root) => [
+      root,
+      ...commentUtils.sortReplies(replyMap.get(root.id) ?? [])
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Section.Section,
+      {
+        title: groupLabel(value, config, groupBy),
+        defaultOpen: alwaysOpen ?? openCount > 0,
+        summary: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: roots.length }),
+          openCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge.Badge, { variant: "soft", tone: "info", size: "xs", children: [
+            openCount,
+            " open"
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          CommentThreadList.CommentThreadList,
+          {
+            comments: subset,
+            config,
+            ...handlers
+          }
+        )
+      },
+      value || "uncategorized"
+    );
+  }) });
+}
+exports.GroupedComments = GroupedComments;
+//# sourceMappingURL=GroupedComments.cjs.map

package/dist/comments/GroupedComments.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedComments.cjs","sources":["../../src/comments/GroupedComments.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { Section } from \"../layout/Section\";\nimport { CommentThreadList } from \"./CommentThreadList\";\nimport {\n  buildReplyMap,\n  buildThreadListHandlers,\n  groupByFacet,\n  isUnresolved,\n  resolveFacetOption,\n  sortReplies,\n} from \"./comment-utils\";\nimport type { Comment, CommentCallbacks, CommentConfig } from \"./comment-types\";\n\nexport type GroupedCommentsProps = CommentCallbacks & {\n  comments: Comment[];\n  config: CommentConfig;\n  /** Facet key to group root comments by. */\n  groupBy: string;\n  /** Explicit group order by facet value; defaults to the facet's option order. */\n  order?: string[];\n  /** Force groups open regardless of their unresolved state. */\n  alwaysOpen?: boolean;\n};\n\nconst UNCATEGORIZED = \"\";\n\nfunction groupLabel(\n  value: string,\n  config: CommentConfig,\n  groupBy: string,\n): string {\n  if (value === UNCATEGORIZED) return \"Uncategorized\";\n  const facet = config.facets?.find((f) => f.key === groupBy);\n  return (facet && resolveFacetOption(facet, value)?.label) ?? value;\n}\n\nfunction orderedGroupKeys(\n  present: string[],\n  config: CommentConfig,\n  groupBy: string,\n  order?: string[],\n): string[] {\n  const preferred =\n    order ??\n    config.facets\n      ?.find((f) => f.key === groupBy)\n      ?.options.map((o) => o.value) ??\n    [];\n  const head = preferred.filter((v) => present.includes(v));\n  const tail = present\n    .filter((v) => !head.includes(v))\n    .sort((a, b) => a.localeCompare(b));\n  return [...head, ...tail];\n}\n\n/**\n * Groups root comments by a facet value, rendering each group as a collapsible\n * section with a count summary. Controlled — mutations route through the\n * supplied callbacks.\n */\nexport function GroupedComments({\n  comments,\n  config,\n  groupBy,\n  order,\n  alwaysOpen,\n  ...callbacks\n}: GroupedCommentsProps) {\n  const groups = groupByFacet(comments, groupBy);\n  const replyMap = buildReplyMap(comments);\n  const handlers = buildThreadListHandlers(\n    comments,\n    config,\n    callbacks as CommentCallbacks,\n  );\n  const keys = orderedGroupKeys([...groups.keys()], config, groupBy, order);\n\n  return (\n    <div className=\"space-y-2\">\n      {keys.map((value) => {\n        const roots = groups.get(value) ?? [];\n        if (roots.length === 0) return null;\n        const openCount = roots.filter((r) =>\n          isUnresolved(config, r.status),\n        ).length;\n        const subset: Comment[] = roots.flatMap((root) => [\n          root,\n          ...sortReplies(replyMap.get(root.id) ?? []),\n        ]);\n        return (\n          <Section\n            key={value || \"uncategorized\"}\n            title={groupLabel(value, config, groupBy)}\n            defaultOpen={alwaysOpen ?? openCount > 0}\n            summary={\n              <span className=\"inline-flex items-center gap-1.5\">\n                <span>{roots.length}</span>\n                {openCount > 0 && (\n                  <Badge variant=\"soft\" tone=\"info\" size=\"xs\">\n                    {openCount} open\n                  </Badge>\n                )}\n              </span>\n            }\n          >\n            <CommentThreadList\n              comments={subset}\n              config={config}\n              {...handlers}\n            />\n          </Section>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["resolveFacetOption","groupByFacet","buildReplyMap","buildThreadListHandlers","isUnresolved","sortReplies","jsx","Section","jsxs","Badge","CommentThreadList"],"mappings":";;;;;;;AAwBA,MAAM,gBAAgB;AAEtB,SAAS,WACP,OACA,QACA,SACQ;;AACR,MAAI,UAAU,cAAe,QAAO;AACpC,QAAM,SAAQ,YAAO,WAAP,mBAAe,KAAK,CAAC,MAAM,EAAE,QAAQ;AACnD,UAAQ,WAASA,kBAAAA,mBAAmB,OAAO,KAAK,MAA/BA,mBAAkC,WAAU;AAC/D;AAEA,SAAS,iBACP,SACA,QACA,SACA,OACU;;AACV,QAAM,YACJ,WACA,kBAAO,WAAP,mBACI,KAAK,CAAC,MAAM,EAAE,QAAQ,aAD1B,mBAEI,QAAQ,IAAI,CAAC,MAAM,EAAE,WACzB,CAAA;AACF,QAAM,OAAO,UAAU,OAAO,CAAC,MAAM,QAAQ,SAAS,CAAC,CAAC;AACxD,QAAM,OAAO,QACV,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AACpC,SAAO,CAAC,GAAG,MAAM,GAAG,IAAI;AAC1B;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,SAASC,aAAAA,aAAa,UAAU,OAAO;AAC7C,QAAM,WAAWC,aAAAA,cAAc,QAAQ;AACvC,QAAM,WAAWC,aAAAA;AAAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,OAAO,iBAAiB,CAAC,GAAG,OAAO,MAAM,GAAG,QAAQ,SAAS,KAAK;AAExE,wCACG,OAAA,EAAI,WAAU,aACZ,UAAA,KAAK,IAAI,CAAC,UAAU;AACnB,UAAM,QAAQ,OAAO,IAAI,KAAK,KAAK,CAAA;AACnC,QAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,UAAM,YAAY,MAAM;AAAA,MAAO,CAAC,MAC9BC,aAAAA,aAAa,QAAQ,EAAE,MAAM;AAAA,IAAA,EAC7B;AACF,UAAM,SAAoB,MAAM,QAAQ,CAAC,SAAS;AAAA,MAChD;AAAA,MACA,GAAGC,aAAAA,YAAY,SAAS,IAAI,KAAK,EAAE,KAAK,CAAA,CAAE;AAAA,IAAA,CAC3C;AACD,WACEC,2BAAAA;AAAAA,MAACC,QAAAA;AAAAA,MAAA;AAAA,QAEC,OAAO,WAAW,OAAO,QAAQ,OAAO;AAAA,QACxC,aAAa,cAAc,YAAY;AAAA,QACvC,SACEC,2BAAAA,KAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,UAAAF,2BAAAA,IAAC,QAAA,EAAM,gBAAM,OAAA,CAAO;AAAA,UACnB,YAAY,KACXE,gCAACC,MAAAA,OAAA,EAAM,SAAQ,QAAO,MAAK,QAAO,MAAK,MACpC,UAAA;AAAA,YAAA;AAAA,YAAU;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GAEJ;AAAA,QAGF,UAAAH,2BAAAA;AAAAA,UAACI,kBAAAA;AAAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,MAlBK,SAAS;AAAA,IAAA;AAAA,EAqBpB,CAAC,EAAA,CACH;AAEJ;;"}

package/dist/comments/GroupedComments.d.ts

@@ -0,0 +1,18 @@
+import { Comment, CommentCallbacks, CommentConfig } from './comment-types';
+export type GroupedCommentsProps = CommentCallbacks & {
+    comments: Comment[];
+    config: CommentConfig;
+    /** Facet key to group root comments by. */
+    groupBy: string;
+    /** Explicit group order by facet value; defaults to the facet's option order. */
+    order?: string[];
+    /** Force groups open regardless of their unresolved state. */
+    alwaysOpen?: boolean;
+};
+/**
+ * Groups root comments by a facet value, rendering each group as a collapsible
+ * section with a count summary. Controlled — mutations route through the
+ * supplied callbacks.
+ */
+export declare function GroupedComments({ comments, config, groupBy, order, alwaysOpen, ...callbacks }: GroupedCommentsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GroupedComments.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedComments.d.ts","sourceRoot":"","sources":["../../src/comments/GroupedComments.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhF,MAAM,MAAM,oBAAoB,GAAG,gBAAgB,GAAG;IACpD,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAiCF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,EAAE,oBAAoB,2CAgDtB"}

package/dist/comments/GroupedComments.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../data/Badge.js";
+import { Section } from "../layout/Section.js";
+import { CommentThreadList } from "./CommentThreadList.js";
+import { groupByFacet, buildReplyMap, buildThreadListHandlers, isUnresolved, sortReplies, resolveFacetOption } from "./comment-utils.js";
+const UNCATEGORIZED = "";
+function groupLabel(value, config, groupBy) {
+  var _a, _b;
+  if (value === UNCATEGORIZED) return "Uncategorized";
+  const facet = (_a = config.facets) == null ? void 0 : _a.find((f) => f.key === groupBy);
+  return (facet && ((_b = resolveFacetOption(facet, value)) == null ? void 0 : _b.label)) ?? value;
+}
+function orderedGroupKeys(present, config, groupBy, order) {
+  var _a, _b;
+  const preferred = order ?? ((_b = (_a = config.facets) == null ? void 0 : _a.find((f) => f.key === groupBy)) == null ? void 0 : _b.options.map((o) => o.value)) ?? [];
+  const head = preferred.filter((v) => present.includes(v));
+  const tail = present.filter((v) => !head.includes(v)).sort((a, b) => a.localeCompare(b));
+  return [...head, ...tail];
+}
+function GroupedComments({
+  comments,
+  config,
+  groupBy,
+  order,
+  alwaysOpen,
+  ...callbacks
+}) {
+  const groups = groupByFacet(comments, groupBy);
+  const replyMap = buildReplyMap(comments);
+  const handlers = buildThreadListHandlers(
+    comments,
+    config,
+    callbacks
+  );
+  const keys = orderedGroupKeys([...groups.keys()], config, groupBy, order);
+  return /* @__PURE__ */ jsx("div", { className: "space-y-2", children: keys.map((value) => {
+    const roots = groups.get(value) ?? [];
+    if (roots.length === 0) return null;
+    const openCount = roots.filter(
+      (r) => isUnresolved(config, r.status)
+    ).length;
+    const subset = roots.flatMap((root) => [
+      root,
+      ...sortReplies(replyMap.get(root.id) ?? [])
+    ]);
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: groupLabel(value, config, groupBy),
+        defaultOpen: alwaysOpen ?? openCount > 0,
+        summary: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { children: roots.length }),
+          openCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "soft", tone: "info", size: "xs", children: [
+            openCount,
+            " open"
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          CommentThreadList,
+          {
+            comments: subset,
+            config,
+            ...handlers
+          }
+        )
+      },
+      value || "uncategorized"
+    );
+  }) });
+}
+export {
+  GroupedComments
+};
+//# sourceMappingURL=GroupedComments.js.map

package/dist/comments/GroupedComments.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupedComments.js","sources":["../../src/comments/GroupedComments.tsx"],"sourcesContent":["import { Badge } from \"../data/Badge\";\nimport { Section } from \"../layout/Section\";\nimport { CommentThreadList } from \"./CommentThreadList\";\nimport {\n  buildReplyMap,\n  buildThreadListHandlers,\n  groupByFacet,\n  isUnresolved,\n  resolveFacetOption,\n  sortReplies,\n} from \"./comment-utils\";\nimport type { Comment, CommentCallbacks, CommentConfig } from \"./comment-types\";\n\nexport type GroupedCommentsProps = CommentCallbacks & {\n  comments: Comment[];\n  config: CommentConfig;\n  /** Facet key to group root comments by. */\n  groupBy: string;\n  /** Explicit group order by facet value; defaults to the facet's option order. */\n  order?: string[];\n  /** Force groups open regardless of their unresolved state. */\n  alwaysOpen?: boolean;\n};\n\nconst UNCATEGORIZED = \"\";\n\nfunction groupLabel(\n  value: string,\n  config: CommentConfig,\n  groupBy: string,\n): string {\n  if (value === UNCATEGORIZED) return \"Uncategorized\";\n  const facet = config.facets?.find((f) => f.key === groupBy);\n  return (facet && resolveFacetOption(facet, value)?.label) ?? value;\n}\n\nfunction orderedGroupKeys(\n  present: string[],\n  config: CommentConfig,\n  groupBy: string,\n  order?: string[],\n): string[] {\n  const preferred =\n    order ??\n    config.facets\n      ?.find((f) => f.key === groupBy)\n      ?.options.map((o) => o.value) ??\n    [];\n  const head = preferred.filter((v) => present.includes(v));\n  const tail = present\n    .filter((v) => !head.includes(v))\n    .sort((a, b) => a.localeCompare(b));\n  return [...head, ...tail];\n}\n\n/**\n * Groups root comments by a facet value, rendering each group as a collapsible\n * section with a count summary. Controlled — mutations route through the\n * supplied callbacks.\n */\nexport function GroupedComments({\n  comments,\n  config,\n  groupBy,\n  order,\n  alwaysOpen,\n  ...callbacks\n}: GroupedCommentsProps) {\n  const groups = groupByFacet(comments, groupBy);\n  const replyMap = buildReplyMap(comments);\n  const handlers = buildThreadListHandlers(\n    comments,\n    config,\n    callbacks as CommentCallbacks,\n  );\n  const keys = orderedGroupKeys([...groups.keys()], config, groupBy, order);\n\n  return (\n    <div className=\"space-y-2\">\n      {keys.map((value) => {\n        const roots = groups.get(value) ?? [];\n        if (roots.length === 0) return null;\n        const openCount = roots.filter((r) =>\n          isUnresolved(config, r.status),\n        ).length;\n        const subset: Comment[] = roots.flatMap((root) => [\n          root,\n          ...sortReplies(replyMap.get(root.id) ?? []),\n        ]);\n        return (\n          <Section\n            key={value || \"uncategorized\"}\n            title={groupLabel(value, config, groupBy)}\n            defaultOpen={alwaysOpen ?? openCount > 0}\n            summary={\n              <span className=\"inline-flex items-center gap-1.5\">\n                <span>{roots.length}</span>\n                {openCount > 0 && (\n                  <Badge variant=\"soft\" tone=\"info\" size=\"xs\">\n                    {openCount} open\n                  </Badge>\n                )}\n              </span>\n            }\n          >\n            <CommentThreadList\n              comments={subset}\n              config={config}\n              {...handlers}\n            />\n          </Section>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAwBA,MAAM,gBAAgB;AAEtB,SAAS,WACP,OACA,QACA,SACQ;;AACR,MAAI,UAAU,cAAe,QAAO;AACpC,QAAM,SAAQ,YAAO,WAAP,mBAAe,KAAK,CAAC,MAAM,EAAE,QAAQ;AACnD,UAAQ,WAAS,wBAAmB,OAAO,KAAK,MAA/B,mBAAkC,WAAU;AAC/D;AAEA,SAAS,iBACP,SACA,QACA,SACA,OACU;;AACV,QAAM,YACJ,WACA,kBAAO,WAAP,mBACI,KAAK,CAAC,MAAM,EAAE,QAAQ,aAD1B,mBAEI,QAAQ,IAAI,CAAC,MAAM,EAAE,WACzB,CAAA;AACF,QAAM,OAAO,UAAU,OAAO,CAAC,MAAM,QAAQ,SAAS,CAAC,CAAC;AACxD,QAAM,OAAO,QACV,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,CAAC,EAC/B,KAAK,CAAC,GAAG,MAAM,EAAE,cAAc,CAAC,CAAC;AACpC,SAAO,CAAC,GAAG,MAAM,GAAG,IAAI;AAC1B;AAOO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,SAAS,aAAa,UAAU,OAAO;AAC7C,QAAM,WAAW,cAAc,QAAQ;AACvC,QAAM,WAAW;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,OAAO,iBAAiB,CAAC,GAAG,OAAO,MAAM,GAAG,QAAQ,SAAS,KAAK;AAExE,6BACG,OAAA,EAAI,WAAU,aACZ,UAAA,KAAK,IAAI,CAAC,UAAU;AACnB,UAAM,QAAQ,OAAO,IAAI,KAAK,KAAK,CAAA;AACnC,QAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,UAAM,YAAY,MAAM;AAAA,MAAO,CAAC,MAC9B,aAAa,QAAQ,EAAE,MAAM;AAAA,IAAA,EAC7B;AACF,UAAM,SAAoB,MAAM,QAAQ,CAAC,SAAS;AAAA,MAChD;AAAA,MACA,GAAG,YAAY,SAAS,IAAI,KAAK,EAAE,KAAK,CAAA,CAAE;AAAA,IAAA,CAC3C;AACD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAO,WAAW,OAAO,QAAQ,OAAO;AAAA,QACxC,aAAa,cAAc,YAAY;AAAA,QACvC,SACE,qBAAC,QAAA,EAAK,WAAU,oCACd,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAM,gBAAM,OAAA,CAAO;AAAA,UACnB,YAAY,KACX,qBAAC,OAAA,EAAM,SAAQ,QAAO,MAAK,QAAO,MAAK,MACpC,UAAA;AAAA,YAAA;AAAA,YAAU;AAAA,UAAA,EAAA,CACb;AAAA,QAAA,GAEJ;AAAA,QAGF,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,UAAU;AAAA,YACV;AAAA,YACC,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,MAlBK,SAAS;AAAA,IAAA;AAAA,EAqBpB,CAAC,EAAA,CACH;AAEJ;"}

package/dist/comments/MentionTextarea.cjs

@@ -0,0 +1,253 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+const utils = require("../lib/utils.cjs");
+const modalStack = require("../overlay/modalStack.cjs");
+const CommentAuthor = require("./CommentAuthor.cjs");
+const MENTION_QUERY = /(^|\s)@([\w.-]*)$/;
+const MAX_RESULTS = 8;
+function detectMention(value, caret) {
+  const match = value.slice(0, caret).match(MENTION_QUERY);
+  if (!match) return null;
+  const query = match[2] ?? "";
+  const atIndex = caret - query.length - 1;
+  return { atIndex, query };
+}
+function filterMentionables(mentionables, query) {
+  const q = query.toLowerCase();
+  const matches = q ? mentionables.filter(
+    (m) => m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q)
+  ) : mentionables;
+  return matches.slice(0, MAX_RESULTS);
+}
+const MIRROR_PROPS = [
+  "boxSizing",
+  "width",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "fontStretch",
+  "fontSize",
+  "lineHeight",
+  "fontFamily",
+  "textAlign",
+  "textTransform",
+  "textIndent",
+  "letterSpacing",
+  "wordSpacing",
+  "tabSize",
+  "whiteSpace",
+  "wordWrap",
+  "overflowWrap"
+];
+function caretViewportRect(el, position) {
+  if (typeof document === "undefined" || typeof getComputedStyle !== "function") {
+    const r = el.getBoundingClientRect();
+    return { top: r.top, left: r.left, height: 16 };
+  }
+  const style = getComputedStyle(el);
+  const mirror = document.createElement("div");
+  for (const prop of MIRROR_PROPS) mirror.style[prop] = style[prop];
+  mirror.style.position = "absolute";
+  mirror.style.visibility = "hidden";
+  mirror.style.whiteSpace = "pre-wrap";
+  mirror.style.overflowWrap = "break-word";
+  mirror.style.top = "0";
+  mirror.style.left = "-9999px";
+  mirror.textContent = el.value.slice(0, position);
+  const marker = document.createElement("span");
+  marker.textContent = el.value.slice(position) || ".";
+  mirror.appendChild(marker);
+  document.body.appendChild(mirror);
+  const lineHeight = parseInt(style.lineHeight, 10) || parseInt(style.fontSize, 10) || 16;
+  const offsetTop = marker.offsetTop;
+  const offsetLeft = marker.offsetLeft;
+  document.body.removeChild(mirror);
+  const rect = el.getBoundingClientRect();
+  return {
+    top: rect.top + offsetTop - el.scrollTop,
+    left: rect.left + offsetLeft - el.scrollLeft,
+    height: lineHeight
+  };
+}
+const MentionTextarea = react.forwardRef(function MentionTextarea2({
+  value,
+  onChange,
+  mentionables,
+  onMentionSelect,
+  onSubmit,
+  onCancel,
+  placeholder,
+  autoFocus,
+  rows = 2,
+  className,
+  "data-testid": dataTestId
+}, forwardedRef) {
+  const innerRef = react.useRef(null);
+  react.useImperativeHandle(
+    forwardedRef,
+    () => innerRef.current
+  );
+  const [active, setActive] = react.useState(null);
+  const [caretRect, setCaretRect] = react.useState(null);
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  const floatingZ = modalStack.useFloatingZIndex();
+  const results = active ? filterMentionables(mentionables, active.query) : [];
+  const open = active != null && results.length > 0;
+  function refreshMention(el) {
+    const next = detectMention(el.value, el.selectionStart ?? el.value.length);
+    setActive(next);
+    setActiveIndex(0);
+    setCaretRect(next ? caretViewportRect(el, el.selectionStart ?? 0) : null);
+  }
+  function insertMention(m) {
+    const el = innerRef.current;
+    if (!el || !active) return;
+    const caret = el.selectionStart ?? value.length;
+    const next = `${value.slice(0, active.atIndex)}@${m.name} ${value.slice(caret)}`;
+    const nextCaret = active.atIndex + m.name.length + 2;
+    onChange(next);
+    onMentionSelect == null ? void 0 : onMentionSelect({ id: m.id, name: m.name, kind: m.kind });
+    setActive(null);
+    setCaretRect(null);
+    requestAnimationFrame(() => {
+      el.focus();
+      el.setSelectionRange(nextCaret, nextCaret);
+    });
+  }
+  function onKeyDown(e) {
+    if (open) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setActiveIndex((i) => (i + 1) % results.length);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setActiveIndex((i) => (i - 1 + results.length) % results.length);
+        return;
+      }
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        const choice = results[activeIndex];
+        if (choice) insertMention(choice);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        setActive(null);
+        setCaretRect(null);
+        return;
+      }
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit == null ? void 0 : onSubmit();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel == null ? void 0 : onCancel();
+    }
+  }
+  react.useEffect(() => {
+    if (!autoFocus) return;
+    const el = innerRef.current;
+    const raf = requestAnimationFrame(() => {
+      el == null ? void 0 : el.focus();
+      const len = (el == null ? void 0 : el.value.length) ?? 0;
+      el == null ? void 0 : el.setSelectionRange(len, len);
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [autoFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        ref: innerRef,
+        rows,
+        value,
+        placeholder,
+        "data-testid": dataTestId,
+        className: utils.cn(
+          "w-full resize-none bg-transparent text-sm leading-snug outline-none placeholder:text-muted-foreground/60",
+          className
+        ),
+        onChange: (e) => {
+          onChange(e.target.value);
+          refreshMention(e.target);
+        },
+        onKeyUp: (e) => refreshMention(e.currentTarget),
+        onClick: (e) => refreshMention(e.currentTarget),
+        onKeyDown,
+        onBlur: () => {
+          setActive(null);
+          setCaretRect(null);
+        }
+      }
+    ),
+    open && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "ul",
+        {
+          role: "listbox",
+          "data-testid": "mention-popover",
+          style: {
+            position: "fixed",
+            top: ((caretRect == null ? void 0 : caretRect.top) ?? 0) + ((caretRect == null ? void 0 : caretRect.height) ?? 16) + 2,
+            left: (caretRect == null ? void 0 : caretRect.left) ?? 0,
+            zIndex: floatingZ
+          },
+          className: "max-h-56 min-w-[12rem] overflow-auto rounded-md border border-border bg-popover py-1 shadow-md",
+          children: results.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": i === activeIndex,
+              onMouseDown: (e) => {
+                e.preventDefault();
+                insertMention(m);
+              },
+              onMouseEnter: () => setActiveIndex(i),
+              className: utils.cn(
+                "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground",
+                i === activeIndex && "bg-accent text-accent-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  CommentAuthor.CommentAuthorAvatar,
+                  {
+                    author: {
+                      name: m.name,
+                      kind: m.kind,
+                      ...m.avatar ? { avatar: m.avatar } : {},
+                      ...m.icon ? { icon: m.icon } : {}
+                    },
+                    size: "xs",
+                    bare: true
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: m.name }),
+                m.kind === "agent" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[10px] text-muted-foreground", children: "agent" })
+              ]
+            }
+          ) }, m.id))
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+exports.MentionTextarea = MentionTextarea;
+//# sourceMappingURL=MentionTextarea.cjs.map

package/dist/comments/MentionTextarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionTextarea.cjs","sources":["../../src/comments/MentionTextarea.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"../overlay/modalStack\";\nimport { CommentAuthorAvatar } from \"./CommentAuthor\";\nimport type { CommentMention, CommentMentionable } from \"./comment-types\";\n\nexport type MentionTextareaProps = {\n  /** Controlled value. */\n  value: string;\n  /** Called with the next value on edit or mention insertion. */\n  onChange: (value: string) => void;\n  /** People/agents offered in the @-mention popover. */\n  mentionables: CommentMentionable[];\n  /** Fired when a mention is inserted via the popover. */\n  onMentionSelect?: (mention: CommentMention) => void;\n  /** Enter (without Shift) while the popover is closed. */\n  onSubmit?: () => void;\n  /** Escape while the popover is closed. */\n  onCancel?: () => void;\n  placeholder?: string;\n  autoFocus?: boolean;\n  rows?: number;\n  className?: string;\n  \"data-testid\"?: string;\n};\n\nconst MENTION_QUERY = /(^|\\s)@([\\w.-]*)$/;\nconst MAX_RESULTS = 8;\n\ntype ActiveMention = { atIndex: number; query: string };\ntype CaretRect = { top: number; left: number; height: number };\n\nfunction detectMention(value: string, caret: number): ActiveMention | null {\n  const match = value.slice(0, caret).match(MENTION_QUERY);\n  if (!match) return null;\n  const query = match[2] ?? \"\";\n  const atIndex = caret - query.length - 1;\n  return { atIndex, query };\n}\n\nfunction filterMentionables(\n  mentionables: CommentMentionable[],\n  query: string,\n): CommentMentionable[] {\n  const q = query.toLowerCase();\n  const matches = q\n    ? mentionables.filter(\n        (m) =>\n          m.name.toLowerCase().includes(q) || m.id.toLowerCase().includes(q),\n      )\n    : mentionables;\n  return matches.slice(0, MAX_RESULTS);\n}\n\nconst MIRROR_PROPS = [\n  \"boxSizing\",\n  \"width\",\n  \"borderTopWidth\",\n  \"borderRightWidth\",\n  \"borderBottomWidth\",\n  \"borderLeftWidth\",\n  \"paddingTop\",\n  \"paddingRight\",\n  \"paddingBottom\",\n  \"paddingLeft\",\n  \"fontStyle\",\n  \"fontVariant\",\n  \"fontWeight\",\n  \"fontStretch\",\n  \"fontSize\",\n  \"lineHeight\",\n  \"fontFamily\",\n  \"textAlign\",\n  \"textTransform\",\n  \"textIndent\",\n  \"letterSpacing\",\n  \"wordSpacing\",\n  \"tabSize\",\n  \"whiteSpace\",\n  \"wordWrap\",\n  \"overflowWrap\",\n] as const;\n\n// Measures the caret pixel position with an off-screen mirror div that copies the\n// textarea's box metrics — the dependency-free way to anchor a popover at the caret.\nfunction caretViewportRect(\n  el: HTMLTextAreaElement,\n  position: number,\n): CaretRect {\n  if (\n    typeof document === \"undefined\" ||\n    typeof getComputedStyle !== \"function\"\n  ) {\n    const r = el.getBoundingClientRect();\n    return { top: r.top, left: r.left, height: 16 };\n  }\n  const style = getComputedStyle(el);\n  const mirror = document.createElement(\"div\");\n  for (const prop of MIRROR_PROPS) mirror.style[prop] = style[prop];\n  mirror.style.position = \"absolute\";\n  mirror.style.visibility = \"hidden\";\n  mirror.style.whiteSpace = \"pre-wrap\";\n  mirror.style.overflowWrap = \"break-word\";\n  mirror.style.top = \"0\";\n  mirror.style.left = \"-9999px\";\n  mirror.textContent = el.value.slice(0, position);\n\n  const marker = document.createElement(\"span\");\n  marker.textContent = el.value.slice(position) || \".\";\n  mirror.appendChild(marker);\n  document.body.appendChild(mirror);\n\n  const lineHeight =\n    parseInt(style.lineHeight, 10) || parseInt(style.fontSize, 10) || 16;\n  const offsetTop = marker.offsetTop;\n  const offsetLeft = marker.offsetLeft;\n  document.body.removeChild(mirror);\n\n  const rect = el.getBoundingClientRect();\n  return {\n    top: rect.top + offsetTop - el.scrollTop,\n    left: rect.left + offsetLeft - el.scrollLeft,\n    height: lineHeight,\n  };\n}\n\n/**\n * A textarea with an @-mention autocomplete. Typing `@` opens a caret-anchored\n * popover filtered against `mentionables`; selecting one inserts the name and\n * fires `onMentionSelect`. Enter submits and Escape cancels only when the\n * popover is closed.\n */\nexport const MentionTextarea = forwardRef<\n  HTMLTextAreaElement,\n  MentionTextareaProps\n>(function MentionTextarea(\n  {\n    value,\n    onChange,\n    mentionables,\n    onMentionSelect,\n    onSubmit,\n    onCancel,\n    placeholder,\n    autoFocus,\n    rows = 2,\n    className,\n    \"data-testid\": dataTestId,\n  },\n  forwardedRef,\n) {\n  const innerRef = useRef<HTMLTextAreaElement>(null);\n  useImperativeHandle(\n    forwardedRef,\n    () => innerRef.current as HTMLTextAreaElement,\n  );\n\n  const [active, setActive] = useState<ActiveMention | null>(null);\n  const [caretRect, setCaretRect] = useState<CaretRect | null>(null);\n  const [activeIndex, setActiveIndex] = useState(0);\n  const floatingZ = useFloatingZIndex();\n\n  const results = active ? filterMentionables(mentionables, active.query) : [];\n  const open = active != null && results.length > 0;\n\n  function refreshMention(el: HTMLTextAreaElement) {\n    const next = detectMention(el.value, el.selectionStart ?? el.value.length);\n    setActive(next);\n    setActiveIndex(0);\n    setCaretRect(next ? caretViewportRect(el, el.selectionStart ?? 0) : null);\n  }\n\n  function insertMention(m: CommentMentionable) {\n    const el = innerRef.current;\n    if (!el || !active) return;\n    const caret = el.selectionStart ?? value.length;\n    const next = `${value.slice(0, active.atIndex)}@${m.name} ${value.slice(caret)}`;\n    const nextCaret = active.atIndex + m.name.length + 2;\n    onChange(next);\n    onMentionSelect?.({ id: m.id, name: m.name, kind: m.kind });\n    setActive(null);\n    setCaretRect(null);\n    requestAnimationFrame(() => {\n      el.focus();\n      el.setSelectionRange(nextCaret, nextCaret);\n    });\n  }\n\n  function onKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {\n    if (open) {\n      if (e.key === \"ArrowDown\") {\n        e.preventDefault();\n        setActiveIndex((i) => (i + 1) % results.length);\n        return;\n      }\n      if (e.key === \"ArrowUp\") {\n        e.preventDefault();\n        setActiveIndex((i) => (i - 1 + results.length) % results.length);\n        return;\n      }\n      if (e.key === \"Enter\" || e.key === \"Tab\") {\n        e.preventDefault();\n        const choice = results[activeIndex];\n        if (choice) insertMention(choice);\n        return;\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        setActive(null);\n        setCaretRect(null);\n        return;\n      }\n    }\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      onSubmit?.();\n      return;\n    }\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      onCancel?.();\n    }\n  }\n\n  useEffect(() => {\n    if (!autoFocus) return;\n    const el = innerRef.current;\n    const raf = requestAnimationFrame(() => {\n      el?.focus();\n      const len = el?.value.length ?? 0;\n      el?.setSelectionRange(len, len);\n    });\n    return () => cancelAnimationFrame(raf);\n  }, [autoFocus]);\n\n  return (\n    <>\n      <textarea\n        ref={innerRef}\n        rows={rows}\n        value={value}\n        placeholder={placeholder}\n        data-testid={dataTestId}\n        className={cn(\n          \"w-full resize-none bg-transparent text-sm leading-snug outline-none placeholder:text-muted-foreground/60\",\n          className,\n        )}\n        onChange={(e) => {\n          onChange(e.target.value);\n          refreshMention(e.target);\n        }}\n        onKeyUp={(e) => refreshMention(e.currentTarget)}\n        onClick={(e) => refreshMention(e.currentTarget)}\n        onKeyDown={onKeyDown}\n        onBlur={() => {\n          setActive(null);\n          setCaretRect(null);\n        }}\n      />\n      {open &&\n        typeof document !== \"undefined\" &&\n        createPortal(\n          <ul\n            role=\"listbox\"\n            data-testid=\"mention-popover\"\n            style={{\n              position: \"fixed\",\n              top: (caretRect?.top ?? 0) + (caretRect?.height ?? 16) + 2,\n              left: caretRect?.left ?? 0,\n              zIndex: floatingZ,\n            }}\n            className=\"max-h-56 min-w-[12rem] overflow-auto rounded-md border border-border bg-popover py-1 shadow-md\"\n          >\n            {results.map((m, i) => (\n              <li key={m.id}>\n                <button\n                  type=\"button\"\n                  role=\"option\"\n                  aria-selected={i === activeIndex}\n                  // Use mousedown so selection runs before the textarea blur closes the popover.\n                  onMouseDown={(e) => {\n                    e.preventDefault();\n                    insertMention(m);\n                  }}\n                  onMouseEnter={() => setActiveIndex(i)}\n                  className={cn(\n                    \"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground\",\n                    i === activeIndex && \"bg-accent text-accent-foreground\",\n                  )}\n                >\n                  <CommentAuthorAvatar\n                    author={{\n                      name: m.name,\n                      kind: m.kind,\n                      ...(m.avatar ? { avatar: m.avatar } : {}),\n                      ...(m.icon ? { icon: m.icon } : {}),\n                    }}\n                    size=\"xs\"\n                    bare\n                  />\n                  <span className=\"truncate\">{m.name}</span>\n                  {m.kind === \"agent\" && (\n                    <span className=\"ml-auto text-[10px] text-muted-foreground\">\n                      agent\n                    </span>\n                  )}\n                </button>\n              </li>\n            ))}\n          </ul>,\n          document.body,\n        )}\n    </>\n  );\n});\n"],"names":["forwardRef","MentionTextarea","useRef","useImperativeHandle","useState","useFloatingZIndex","useEffect","jsxs","Fragment","jsx","cn","createPortal","CommentAuthorAvatar"],"mappings":"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"}

package/dist/comments/MentionTextarea.d.ts

@@ -0,0 +1,28 @@
+import { CommentMention, CommentMentionable } from './comment-types';
+export type MentionTextareaProps = {
+    /** Controlled value. */
+    value: string;
+    /** Called with the next value on edit or mention insertion. */
+    onChange: (value: string) => void;
+    /** People/agents offered in the @-mention popover. */
+    mentionables: CommentMentionable[];
+    /** Fired when a mention is inserted via the popover. */
+    onMentionSelect?: (mention: CommentMention) => void;
+    /** Enter (without Shift) while the popover is closed. */
+    onSubmit?: () => void;
+    /** Escape while the popover is closed. */
+    onCancel?: () => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    rows?: number;
+    className?: string;
+    "data-testid"?: string;
+};
+/**
+ * A textarea with an @-mention autocomplete. Typing `@` opens a caret-anchored
+ * popover filtered against `mentionables`; selecting one inserts the name and
+ * fires `onMentionSelect`. Enter submits and Escape cancels only when the
+ * popover is closed.
+ */
+export declare const MentionTextarea: import('react').ForwardRefExoticComponent<MentionTextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+//# sourceMappingURL=MentionTextarea.d.ts.map