@multicomma/arkcn 0.1.2 → 0.1.3

package/registry/items/comment-thread.json

@@ -34,6 +34,957 @@
     "extractMentions",
     "renderMentions"
   ],
+  "parts": [
+    {
+      "name": "CommentThread",
+      "props": [
+        {
+          "name": "currentUserId",
+          "type": "string",
+          "required": false,
+          "description": "Id of the signed-in person; their comments get `data-own` and mentions of them `data-self`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onReplyToChange",
+          "type": "((id: string | null) => void)",
+          "required": false,
+          "description": "Called when the reply target changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "people",
+          "type": "Person[]",
+          "required": false,
+          "default": "[]",
+          "description": "People who can be mentioned and whose names and initials are rendered.",
+          "from": "arkcn"
+        },
+        {
+          "name": "replyTo",
+          "type": "string | null",
+          "required": false,
+          "description": "Id of the comment being replied to (controlled).",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentList",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "Comment",
+      "props": [
+        {
+          "name": "authorId",
+          "type": "string",
+          "required": false,
+          "description": "Id of the person who wrote the comment.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentAvatar",
+      "props": [
+        {
+          "name": "size",
+          "type": "\"default\" | \"sm\" | \"lg\"",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "ids",
+          "type": "ElementIds",
+          "required": false,
+          "description": "The ids of the elements in the avatar. Useful for composition.",
+          "from": "@zag-js/avatar"
+        },
+        {
+          "name": "onStatusChange",
+          "type": "((details: StatusChangeDetails) => void)",
+          "required": false,
+          "description": "Functional called when the image loading status changes.",
+          "from": "@zag-js/avatar"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentContent",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentHeader",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentAuthor",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentTime",
+      "props": [
+        {
+          "name": "date",
+          "type": "Date",
+          "required": true,
+          "description": "The date this part represents.",
+          "from": "arkcn"
+        },
+        {
+          "name": "now",
+          "type": "Date",
+          "required": false,
+          "description": "Reference time for relative labels.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentMeta",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentBody",
+      "props": [
+        {
+          "name": "text",
+          "type": "string",
+          "required": false,
+          "description": "Plain text with `@Full Name` mentions.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentMention",
+      "props": [
+        {
+          "name": "personId",
+          "type": "string",
+          "required": false,
+          "description": "Id of the mentioned person.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentReactions",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentReaction",
+      "props": [
+        {
+          "name": "emoji",
+          "type": "string",
+          "required": true,
+          "description": "The reaction emoji.",
+          "from": "arkcn"
+        },
+        {
+          "name": "active",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Whether the part is the active one; sets `data-active`.",
+          "from": "arkcn"
+        },
+        {
+          "name": "count",
+          "type": "number",
+          "required": false,
+          "default": "0",
+          "description": "How many people reacted.",
+          "from": "arkcn"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentActions",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentReplyTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentEditTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentReplies",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentEmpty",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposer",
+      "props": [
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "required": false,
+          "default": "\"\"",
+          "description": "The initial value when uncontrolled.",
+          "from": "arkcn"
+        },
+        {
+          "name": "maxSuggestions",
+          "type": "number",
+          "required": false,
+          "default": "6",
+          "description": "Maximum number of mention suggestions shown.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onCancel",
+          "type": "(() => void)",
+          "required": false,
+          "description": "Called when the composer is cancelled with Escape or the cancel trigger.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onSubmit",
+          "type": "((comment: { text: string; mentions: string[]; }) => void)",
+          "required": false,
+          "description": "Called with the trimmed text and the ids of mentioned people.",
+          "from": "arkcn"
+        },
+        {
+          "name": "onValueChange",
+          "type": "((value: string) => void)",
+          "required": false,
+          "description": "Called with the new value whenever it changes.",
+          "from": "arkcn"
+        },
+        {
+          "name": "people",
+          "type": "Person[]",
+          "required": false,
+          "default": "[]",
+          "description": "People who can be mentioned and whose names and initials are rendered.",
+          "from": "arkcn"
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "required": false,
+          "description": "The controlled value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerReplyingTo",
+      "props": [
+        {
+          "name": "children",
+          "type": "((details: { id: string; }) => ReactNode)",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "arkcn"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerInput",
+      "props": [
+        {
+          "name": "placeholder",
+          "type": "string",
+          "required": false,
+          "default": "\"Write a comment…\"",
+          "description": "Text shown while there is no value.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerMentionList",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Use the provided child element as the default rendered element, combining their props and behavior.",
+          "from": "@ark-ui/react"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerFooter",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerHint",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerSubmitTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    },
+    {
+      "name": "CommentComposerCancelTrigger",
+      "props": [
+        {
+          "name": "asChild",
+          "type": "boolean",
+          "required": false,
+          "description": "Render the child element instead of the default one, merging props and behaviour onto it.",
+          "from": "arkcn"
+        },
+        {
+          "name": "size",
+          "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | null",
+          "required": false,
+          "description": "Size variant; sets a `data-size` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "variant",
+          "type": "\"link\" | \"default\" | \"outline\" | \"secondary\" | \"ghost\" | \"destructive\" | null",
+          "required": false,
+          "description": "Visual variant, styled with `cva`; sets a `data-variant` attribute.",
+          "from": "arkcn"
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Content rendered inside the part.",
+          "from": "@types/react"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Extra classes merged into the part's own classes with `cn`.",
+          "from": "@types/react"
+        },
+        {
+          "name": "style",
+          "type": "CSSProperties",
+          "required": false,
+          "description": "Inline styles applied to the rendered element.",
+          "from": "@types/react"
+        }
+      ]
+    }
+  ],
   "dependencies": {
     "@ark-ui/react": "^5.39.1",
     "lucide-react": "^1.41.0"
@@ -50,7 +1001,7 @@
   "files": [
     {
       "path": "components/ui/comment-thread.tsx",
-      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { CornerDownRightIcon, PencilIcon, SendIcon } from \"lucide-react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent } from \"@/components/ui/popover\"\nimport { formatRelativeTime } from \"@/lib/time\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\n\n/**\n * CommentThread — compositional, data-agnostic comments with replies,\n * reactions and a mentions composer. The consumer owns the comments and\n * the people list; the thread owns only which comment is being replied to or\n * edited. Mentions are plain text (`@Full Name`); `extractMentions` maps\n * them back to ids and `CommentBody` highlights them.\n *\n * Anatomy:\n *   CommentThread { people, currentUserId }\n *     CommentList > Comment value= authorId=\n *       CommentAvatar + CommentContent\n *         CommentHeader > CommentAuthor, CommentTime date=, CommentMeta\n *         CommentBody                      highlights @mentions\n *         CommentReactions > CommentReaction emoji= count= active=\n *         CommentActions > CommentReplyTrigger, CommentEditTrigger, …\n *       CommentReplies > Comment …          nested, with a guide line\n *     CommentComposer { people, onSubmit }\n *       CommentComposerReplyingTo          \"Replying to X\" strip\n *       CommentComposerInput               textarea; type @ to mention, ⌘↵ to send\n *       CommentComposerMentionList         suggestions under the input\n *       CommentComposerFooter > CommentComposerHint, CommentComposerCancelTrigger, CommentComposerSubmitTrigger\n */\n\ntype Person = { id: string; name: string; initials?: string; avatar?: string }\n\ntype ThreadContextValue = {\n  people: Person[]\n  currentUserId?: string\n  replyTo: string | null\n  setReplyTo: (id: string | null) => void\n  editing: string | null\n  setEditing: (id: string | null) => void\n}\nconst ThreadContext = React.createContext<ThreadContextValue | null>(null)\nconst CommentContext = React.createContext<{ value: string; authorId?: string; depth: number } | null>(null)\n\nfunction useCommentThread() {\n  const ctx = React.useContext(ThreadContext)\n  if (!ctx) throw new Error(\"Comment parts must be used within <CommentThread>\")\n  return ctx\n}\nfunction useComment() {\n  const ctx = React.useContext(CommentContext)\n  if (!ctx) throw new Error(\"Comment parts must be used within <Comment>\")\n  return ctx\n}\n\nconst initialsOf = (person?: Person) =>\n  person?.initials ??\n  (person?.name ?? \"?\")\n    .split(/\\s+/)\n    .map((p) => p[0])\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase()\n\n/* ---------------------------------------------------------------------------\n * Thread\n * ------------------------------------------------------------------------- */\n\nfunction CommentThread({\n  people = [],\n  currentUserId,\n  replyTo: replyToProp,\n  onReplyToChange,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  people?: Person[]\n  currentUserId?: string\n  replyTo?: string | null\n  onReplyToChange?: (id: string | null) => void\n}) {\n  const [replyTo, setReplyTo] = useControllable<string | null>(replyToProp, null, onReplyToChange)\n  const [editing, setEditing] = React.useState<string | null>(null)\n  const ctx = React.useMemo(\n    () => ({ people, currentUserId, replyTo, setReplyTo, editing, setEditing }),\n    [people, currentUserId, replyTo, setReplyTo, editing]\n  )\n  return (\n    <ThreadContext.Provider value={ctx}>\n      <div data-slot=\"comment-thread\" className={cn(\"flex flex-col gap-4\", className)} {...props} />\n    </ThreadContext.Provider>\n  )\n}\n\nfunction CommentList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return <ol data-slot=\"comment-list\" className={cn(\"flex flex-col gap-4\", className)} {...props} />\n}\n\nfunction Comment({\n  value,\n  authorId,\n  className,\n  ...props\n}: React.ComponentProps<\"li\"> & { value: string; authorId?: string }) {\n  const thread = useCommentThread()\n  const parent = React.useContext(CommentContext)\n  const depth = parent ? parent.depth + 1 : 0\n  const ctx = React.useMemo(() => ({ value, authorId, depth }), [value, authorId, depth])\n  return (\n    <CommentContext.Provider value={ctx}>\n      <li\n        data-slot=\"comment\"\n        data-value={value}\n        data-depth={depth}\n        data-own={authorId && authorId === thread.currentUserId ? \"\" : undefined}\n        data-replying={thread.replyTo === value ? \"\" : undefined}\n        data-editing={thread.editing === value ? \"\" : undefined}\n        className={cn(\"group/comment flex gap-3\", className)}\n        {...props}\n      />\n    </CommentContext.Provider>\n  )\n}\n\n/** Avatar for the comment's author (from `people`), or pass your own children. */\nfunction CommentAvatar({ className, children, ...props }: React.ComponentProps<typeof Avatar>) {\n  const { people } = useCommentThread()\n  const { authorId, depth } = useComment()\n  const person = people.find((p) => p.id === authorId)\n  return (\n    <Avatar\n      data-slot=\"comment-avatar\"\n      size={depth > 0 ? \"sm\" : \"default\"}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {person?.avatar && <AvatarImage src={person.avatar} alt=\"\" />}\n          <AvatarFallback>{initialsOf(person)}</AvatarFallback>\n        </>\n      )}\n    </Avatar>\n  )\n}\n\nfunction CommentContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"comment-content\" className={cn(\"flex min-w-0 flex-1 flex-col gap-1\", className)} {...props} />\n}\n\nfunction CommentHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-header\"\n      className={cn(\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Author name from `people` by default. */\nfunction CommentAuthor({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const { people } = useCommentThread()\n  const { authorId } = useComment()\n  return (\n    <span data-slot=\"comment-author\" className={cn(\"font-medium\", className)} {...props}>\n      {children ?? people.find((p) => p.id === authorId)?.name ?? \"Unknown\"}\n    </span>\n  )\n}\n\nfunction CommentTime({\n  date,\n  now,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"time\">, \"dateTime\"> & { date: Date; now?: Date }) {\n  return (\n    <time\n      data-slot=\"comment-time\"\n      dateTime={date.toISOString()}\n      title={date.toLocaleString()}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? formatRelativeTime(date, { now })}\n    </time>\n  )\n}\n\n/** Small trailing note, e.g. \"edited\" or a role badge. */\nfunction CommentMeta({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"comment-meta\" className={cn(\"text-xs text-muted-foreground\", className)} {...props} />\n}\n\n/** Split text into runs, turning `@Full Name` for known people into mention nodes. */\nfunction renderMentions(text: string, people: Person[]) {\n  if (!people.length || !text.includes(\"@\")) return [text]\n  const names = [...people].sort((a, b) => b.name.length - a.name.length)\n  const pattern = new RegExp(\n    `@(${names.map((p) => p.name.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")).join(\"|\")})(?![\\\\w])`,\n    \"g\"\n  )\n  const nodes: React.ReactNode[] = []\n  let last = 0\n  for (const match of text.matchAll(pattern)) {\n    const index = match.index ?? 0\n    if (index > last) nodes.push(text.slice(last, index))\n    const person = people.find((p) => p.name === match[1])\n    nodes.push(\n      <CommentMention key={`${index}-${match[1]}`} personId={person?.id}>\n        @{match[1]}\n      </CommentMention>\n    )\n    last = index + match[0].length\n  }\n  if (last < text.length) nodes.push(text.slice(last))\n  return nodes\n}\n\nfunction CommentMention({ personId, className, ...props }: React.ComponentProps<\"span\"> & { personId?: string }) {\n  const { currentUserId } = useCommentThread()\n  return (\n    <span\n      data-slot=\"comment-mention\"\n      data-person={personId}\n      data-self={personId && personId === currentUserId ? \"\" : undefined}\n      className={cn(\n        \"rounded-sm bg-primary/10 px-1 font-medium text-primary data-self:bg-amber-500/20 data-self:text-amber-700 dark:data-self:text-amber-300\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Plain text with mentions highlighted; pass `children` to render anything else. */\nfunction CommentBody({ text, className, children, ...props }: React.ComponentProps<\"div\"> & { text?: string }) {\n  const { people } = useCommentThread()\n  return (\n    <div\n      data-slot=\"comment-body\"\n      className={cn(\"text-sm/relaxed wrap-break-word whitespace-pre-wrap\", className)}\n      {...props}\n    >\n      {children ?? (text !== undefined ? renderMentions(text, people) : null)}\n    </div>\n  )\n}\n\nfunction CommentReactions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-reactions\"\n      className={cn(\"flex flex-wrap items-center gap-1 pt-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommentReaction({\n  emoji,\n  count = 0,\n  active = false,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ark.button> & { emoji: string; count?: number; active?: boolean }) {\n  return (\n    <ark.button\n      type=\"button\"\n      data-slot=\"comment-reaction\"\n      data-active={active ? \"\" : undefined}\n      aria-pressed={active}\n      aria-label={`${emoji} ${count}`}\n      className={cn(\n        \"inline-flex h-6 items-center gap-1 rounded-full border bg-background px-1.5 text-xs transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none data-active:border-primary/40 data-active:bg-primary/10\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-hidden>{emoji}</span>\n      {children ?? <span className=\"tabular-nums\">{count}</span>}\n    </ark.button>\n  )\n}\n\n/** Row of small text buttons; revealed on hover/focus, always visible when the comment is active. */\nfunction CommentActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-actions\"\n      className={cn(\n        \"flex items-center gap-1 text-xs text-muted-foreground opacity-0 transition-opacity group-focus-within/comment:opacity-100 group-hover/comment:opacity-100 group-data-editing/comment:opacity-100 group-data-replying/comment:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommentReplyTrigger({ asChild, children, onClick, className, ...props }: React.ComponentProps<typeof Button>) {\n  const { replyTo, setReplyTo } = useCommentThread()\n  const { value } = useComment()\n  return (\n    <Button\n      data-slot=\"comment-reply-trigger\"\n      variant=\"ghost\"\n      size=\"xs\"\n      asChild={asChild}\n      aria-pressed={replyTo === value}\n      className={cn(\"h-6 px-1.5 text-xs\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setReplyTo(replyTo === value ? null : value)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <CornerDownRightIcon /> Reply\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction CommentEditTrigger({ asChild, children, onClick, className, ...props }: React.ComponentProps<typeof Button>) {\n  const { editing, setEditing } = useCommentThread()\n  const { value } = useComment()\n  return (\n    <Button\n      data-slot=\"comment-edit-trigger\"\n      variant=\"ghost\"\n      size=\"xs\"\n      asChild={asChild}\n      aria-pressed={editing === value}\n      className={cn(\"h-6 px-1.5 text-xs\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setEditing(editing === value ? null : value)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <PencilIcon /> Edit\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** Nested replies with a guide line; put `Comment`s inside. */\nfunction CommentReplies({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol data-slot=\"comment-replies\" className={cn(\"mt-2 flex flex-col gap-3 border-s-2 ps-3\", className)} {...props} />\n  )\n}\n\nfunction CommentEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-empty\"\n      className={cn(\"rounded-lg border border-dashed px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Composer with mentions\n * ------------------------------------------------------------------------- */\n\ntype MentionState = { query: string; start: number; index: number } | null\n\ntype ComposerContextValue = {\n  people: Person[]\n  value: string\n  setValue: (value: string) => void\n  mention: MentionState\n  setMention: (mention: MentionState) => void\n  suggestions: Person[]\n  pick: (person: Person) => void\n  /** The input registers how a pick is applied to its DOM. */\n  registerPicker: (fn: (person: Person, mention: NonNullable<MentionState>) => void) => () => void\n  submit: () => void\n  cancel: () => void\n  canSubmit: boolean\n  inputRef: React.RefObject<HTMLDivElement | null>\n  listId: string\n}\nconst ComposerContext = React.createContext<ComposerContextValue | null>(null)\nfunction useComposer() {\n  const ctx = React.useContext(ComposerContext)\n  if (!ctx) throw new Error(\"Composer parts must be used within <CommentComposer>\")\n  return ctx\n}\n\n/** Ids of people whose `@Full Name` appears in the text. */\nfunction extractMentions(text: string, people: Person[]) {\n  return people\n    .filter((p) => new RegExp(`@${p.name.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")}(?![\\\\w])`).test(text))\n    .map((p) => p.id)\n}\n\nfunction CommentComposer({\n  people = [],\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSubmit,\n  onCancel,\n  maxSuggestions = 6,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onSubmit\" | \"defaultValue\"> & {\n  people?: Person[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Called with the trimmed text and the ids of mentioned people. */\n  onSubmit?: (comment: { text: string; mentions: string[] }) => void\n  onCancel?: () => void\n  maxSuggestions?: number\n}) {\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange)\n  const [mention, setMention] = React.useState<MentionState>(null)\n  const inputRef = React.useRef<HTMLDivElement>(null)\n  const listId = React.useId()\n  const pickerRef = React.useRef<((person: Person, mention: NonNullable<MentionState>) => void) | null>(null)\n  const registerPicker = React.useCallback((fn: (person: Person, mention: NonNullable<MentionState>) => void) => {\n    pickerRef.current = fn\n    return () => {\n      if (pickerRef.current === fn) pickerRef.current = null\n    }\n  }, [])\n\n  const suggestions = React.useMemo(() => {\n    if (!mention) return []\n    const q = mention.query.toLowerCase()\n    return people.filter((p) => p.name.toLowerCase().includes(q)).slice(0, maxSuggestions)\n  }, [mention, people, maxSuggestions])\n\n  const pick = React.useCallback(\n    (person: Person) => {\n      if (!mention) return\n      pickerRef.current?.(person, mention)\n      setMention(null)\n    },\n    [mention]\n  )\n\n  const canSubmit = value.trim().length > 0\n  const submit = React.useCallback(() => {\n    if (!canSubmit) return\n    onSubmit?.({ text: value.trim(), mentions: extractMentions(value, people) })\n    setValue(\"\")\n    setMention(null)\n  }, [canSubmit, onSubmit, value, people, setValue])\n  const cancel = React.useCallback(() => {\n    setValue(\"\")\n    setMention(null)\n    onCancel?.()\n  }, [setValue, onCancel])\n\n  const ctx = React.useMemo<ComposerContextValue>(\n    () => ({\n      people,\n      value,\n      setValue,\n      mention,\n      setMention,\n      suggestions,\n      pick,\n      registerPicker,\n      submit,\n      cancel,\n      canSubmit,\n      inputRef,\n      listId,\n    }),\n    [people, value, setValue, mention, suggestions, pick, registerPicker, submit, cancel, canSubmit, listId]\n  )\n\n  return (\n    <ComposerContext.Provider value={ctx}>\n      <div\n        data-slot=\"comment-composer\"\n        data-mentioning={mention ? \"\" : undefined}\n        className={cn(\n          \"relative flex flex-col gap-2 rounded-xl border bg-background p-2 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ComposerContext.Provider>\n  )\n}\n\n/** \"Replying to …\" strip; renders nothing when not replying. The render prop gets the comment id. */\nfunction CommentComposerReplyingTo({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (details: { id: string }) => React.ReactNode }) {\n  const { replyTo, setReplyTo } = useCommentThread()\n  if (!replyTo) return null\n  return (\n    <div\n      data-slot=\"comment-composer-replying-to\"\n      className={cn(\"flex items-center gap-2 px-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      <CornerDownRightIcon className=\"size-3.5\" />\n      {children ? children({ id: replyTo }) : <span>Replying to a comment</span>}\n      <Button variant=\"ghost\" size=\"xs\" className=\"ms-auto h-5 px-1.5\" onClick={() => setReplyTo(null)}>\n        Cancel\n      </Button>\n    </div>\n  )\n}\n\n/* ----- contenteditable helpers ----- */\n\nconst CHIP = \"comment-mention-chip\"\nconst escapeRe = (text: string) => text.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n\n/** Serialise the editable DOM to plain text; chips become `@Full Name`, blocks and <br> become newlines. */\nfunction serialize(root: HTMLElement): string {\n  let out = \"\"\n  const walk = (node: Node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      out += (node.textContent ?? \"\").replace(/ /g, \" \")\n      return\n    }\n    if (!(node instanceof HTMLElement)) return\n    if (node.dataset.slot === CHIP) {\n      out += `@${node.dataset.name ?? \"\"}`\n      return\n    }\n    if (node.tagName === \"BR\") {\n      out += \"\\n\"\n      return\n    }\n    const block = node.tagName === \"DIV\" || node.tagName === \"P\"\n    if (block && out.length && !out.endsWith(\"\\n\")) out += \"\\n\"\n    node.childNodes.forEach(walk)\n  }\n  root.childNodes.forEach(walk)\n  return out.replace(/\\n$/, \"\")\n}\n\nfunction createChip(person: Person) {\n  const chip = document.createElement(\"span\")\n  chip.dataset.slot = CHIP\n  chip.dataset.person = person.id\n  chip.dataset.name = person.name\n  chip.contentEditable = \"false\"\n  chip.className =\n    \"mx-px inline-flex items-center rounded-full bg-muted px-1.5 py-px align-baseline text-[0.9em] font-medium text-foreground select-none\"\n  chip.textContent = `@${person.name}`\n  return chip\n}\n\n/** Build editable DOM from plain text, turning known `@Full Name`s into chips. */\nfunction hydrate(root: HTMLElement, text: string, people: Person[]) {\n  root.replaceChildren()\n  const names = [...people].sort((a, b) => b.name.length - a.name.length)\n  const pattern = names.length ? new RegExp(`@(${names.map((p) => escapeRe(p.name)).join(\"|\")})(?![\\\\w])`, \"g\") : null\n  text.split(\"\\n\").forEach((line, lineIndex) => {\n    if (lineIndex > 0) root.appendChild(document.createElement(\"br\"))\n    let last = 0\n    if (pattern) {\n      for (const match of line.matchAll(pattern)) {\n        const index = match.index ?? 0\n        if (index > last) root.appendChild(document.createTextNode(line.slice(last, index)))\n        const person = people.find((p) => p.name === match[1])\n        if (person) root.appendChild(createChip(person))\n        last = index + match[0].length\n      }\n    }\n    if (last < line.length) root.appendChild(document.createTextNode(line.slice(last)))\n  })\n}\n\n/** The `@query` immediately before the caret inside a text node, if any. */\nfunction mentionAtCaret(root: HTMLElement): { node: Text; start: number; end: number; query: string } | null {\n  const selection = window.getSelection()\n  if (!selection || !selection.rangeCount || !selection.isCollapsed) return null\n  const range = selection.getRangeAt(0)\n  const node = range.startContainer\n  if (node.nodeType !== Node.TEXT_NODE || !root.contains(node)) return null\n  const text = node.textContent ?? \"\"\n  const caret = range.startOffset\n  const before = text.slice(0, caret)\n  const at = before.lastIndexOf(\"@\")\n  if (at === -1) return null\n  if (at > 0 && /\\S/.test(before[at - 1])) return null\n  const query = before.slice(at + 1)\n  if (query.length > 30) return null\n  return { node: node as Text, start: at, end: caret, query }\n}\n\nfunction placeCaretAfter(node: Node) {\n  const selection = window.getSelection()\n  if (!selection) return\n  const range = document.createRange()\n  range.setStartAfter(node)\n  range.collapse(true)\n  selection.removeAllRanges()\n  selection.addRange(range)\n}\n\n/**\n * Contenteditable input: picked mentions become atomic grey chips (one\n * Backspace removes a whole chip); `value` stays plain `@Full Name` text.\n * Arrows/Enter/Tab pick from the list, Escape closes it, ⌘/Ctrl+Enter submits.\n */\nfunction CommentComposerInput({\n  className,\n  placeholder = \"Write a comment…\",\n  autoFocus,\n  onKeyDown,\n  onBlur,\n  onInput,\n  onPaste,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onChange\"> & { placeholder?: string; autoFocus?: boolean }) {\n  const c = useComposer()\n  const lastSerialized = React.useRef<string | null>(null)\n\n  // Reflect outside changes to `value` (initial text, edits, reset after submit) without disturbing typing.\n  React.useLayoutEffect(() => {\n    const el = c.inputRef.current\n    if (!el || c.value === lastSerialized.current) return\n    hydrate(el, c.value, c.people)\n    lastSerialized.current = c.value\n  }, [c.value, c.people, c.inputRef])\n\n  React.useEffect(() => {\n    if (autoFocus) c.inputRef.current?.focus()\n  }, [autoFocus, c.inputRef])\n\n  const { registerPicker, setValue, inputRef } = c\n  React.useEffect(\n    () =>\n      registerPicker((person) => {\n        const el = inputRef.current\n        if (!el) return\n        const hit = mentionAtCaret(el)\n        const chip = createChip(person)\n        const space = document.createTextNode(\" \")\n        if (hit) {\n          const range = document.createRange()\n          range.setStart(hit.node, hit.start)\n          range.setEnd(hit.node, hit.end)\n          range.deleteContents()\n          range.insertNode(space)\n          range.insertNode(chip)\n        } else {\n          el.append(chip, space)\n        }\n        placeCaretAfter(space)\n        el.focus()\n        const next = serialize(el)\n        lastSerialized.current = next\n        setValue(next)\n      }),\n    [registerPicker, inputRef, setValue]\n  )\n\n  const sync = () => {\n    const el = c.inputRef.current\n    if (!el) return\n    if (el.innerHTML === \"<br>\") el.replaceChildren()\n    const next = serialize(el)\n    lastSerialized.current = next\n    c.setValue(next)\n    const hit = mentionAtCaret(el)\n    c.setMention(hit ? { query: hit.query, start: hit.start, index: 0 } : null)\n  }\n\n  return (\n    <div\n      ref={c.inputRef}\n      data-slot=\"comment-composer-input\"\n      role={c.mention ? \"combobox\" : \"textbox\"}\n      contentEditable\n      suppressContentEditableWarning\n      aria-multiline={c.mention ? undefined : true}\n      aria-expanded={c.mention ? true : undefined}\n      aria-controls={c.mention ? c.listId : undefined}\n      aria-autocomplete={c.mention ? \"list\" : undefined}\n      aria-activedescendant={\n        c.mention && c.suggestions[c.mention.index] ? `${c.listId}-${c.suggestions[c.mention.index].id}` : undefined\n      }\n      data-placeholder={placeholder}\n      className={cn(\n        \"min-h-20 px-2 py-1.5 text-sm wrap-break-word whitespace-pre-wrap outline-none\",\n        \"empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]\",\n        className\n      )}\n      onInput={(event) => {\n        onInput?.(event)\n        sync()\n      }}\n      onKeyUp={(event) => {\n        if ([\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) sync()\n      }}\n      onClick={() => sync()}\n      onPaste={(event) => {\n        onPaste?.(event)\n        if (event.defaultPrevented) return\n        event.preventDefault()\n        document.execCommand(\"insertText\", false, event.clipboardData.getData(\"text/plain\"))\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Enter\") {\n          event.preventDefault()\n          c.submit()\n          return\n        }\n        if (!c.mention) {\n          if (event.key === \"Escape\") c.cancel()\n          return\n        }\n        const count = c.suggestions.length\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          event.preventDefault()\n          if (!count) return\n          const delta = event.key === \"ArrowDown\" ? 1 : -1\n          c.setMention({ ...c.mention, index: (c.mention.index + delta + count) % count })\n        } else if ((event.key === \"Enter\" || event.key === \"Tab\") && count) {\n          event.preventDefault()\n          c.pick(c.suggestions[c.mention.index])\n        } else if (event.key === \"Escape\") {\n          event.preventDefault()\n          c.setMention(null)\n        }\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        setTimeout(() => {\n          if (document.activeElement !== event.target) c.setMention(null)\n        }, 120)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** Floating suggestion list anchored under the input while an `@query` is active. Focus stays in the textarea. */\nfunction CommentComposerMentionList({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  const c = useComposer()\n  const open = !!c.mention\n  return (\n    <Popover\n      open={open}\n      onOpenChange={({ open }) => {\n        if (!open) c.setMention(null)\n      }}\n      autoFocus={false}\n      modal={false}\n      positioning={{\n        placement: \"bottom-start\",\n        sameWidth: true,\n        gutter: 4,\n        getAnchorRect: () => {\n          const rect = c.inputRef.current?.getBoundingClientRect()\n          return rect ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : null\n        },\n      }}\n    >\n      <PopoverContent\n        id={c.listId}\n        role=\"listbox\"\n        aria-label=\"People\"\n        data-slot=\"comment-composer-mention-list\"\n        className={cn(\"max-h-56 w-auto overflow-y-auto p-1\", className)}\n        onPointerDown={(event) => event.preventDefault()}\n        {...props}\n      >\n        {c.suggestions.length === 0 ? (\n          <div className=\"px-2 py-1.5 text-sm text-muted-foreground\">No one matches \"{c.mention?.query}\"</div>\n        ) : (\n          c.suggestions.map((person, index) => (\n            <div\n              key={person.id}\n              id={`${c.listId}-${person.id}`}\n              role=\"option\"\n              aria-selected={index === c.mention?.index}\n              data-slot=\"comment-composer-mention-item\"\n              data-highlighted={index === c.mention?.index ? \"\" : undefined}\n              className=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm data-highlighted:bg-accent data-highlighted:text-accent-foreground\"\n              onMouseEnter={() => c.mention && c.setMention({ ...c.mention, index })}\n              onClick={() => c.pick(person)}\n            >\n              <Avatar size=\"sm\" className=\"size-6 text-[10px]\">\n                {person.avatar && <AvatarImage src={person.avatar} alt=\"\" />}\n                <AvatarFallback>{initialsOf(person)}</AvatarFallback>\n              </Avatar>\n              <span className=\"truncate\">{person.name}</span>\n            </div>\n          ))\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nfunction CommentComposerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"comment-composer-footer\" className={cn(\"flex items-center gap-2 px-1\", className)} {...props} />\n  )\n}\n\nfunction CommentComposerHint({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"comment-composer-hint\"\n      className={cn(\"me-auto text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <Kbd>@</Kbd> to mention · <Kbd>⌘↵</Kbd> to send\n        </>\n      )}\n    </span>\n  )\n}\n\nfunction CommentComposerSubmitTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { submit, canSubmit } = useComposer()\n  return (\n    <Button\n      data-slot=\"comment-composer-submit-trigger\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={!canSubmit}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) submit()\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <SendIcon /> Comment\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction CommentComposerCancelTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { cancel } = useComposer()\n  return (\n    <Button\n      data-slot=\"comment-composer-cancel-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) cancel()\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? \"Cancel\")}\n    </Button>\n  )\n}\n\nexport {\n  CommentThread,\n  CommentList,\n  Comment,\n  CommentAvatar,\n  CommentContent,\n  CommentHeader,\n  CommentAuthor,\n  CommentTime,\n  CommentMeta,\n  CommentBody,\n  CommentMention,\n  CommentReactions,\n  CommentReaction,\n  CommentActions,\n  CommentReplyTrigger,\n  CommentEditTrigger,\n  CommentReplies,\n  CommentEmpty,\n  CommentComposer,\n  CommentComposerReplyingTo,\n  CommentComposerInput,\n  CommentComposerMentionList,\n  CommentComposerFooter,\n  CommentComposerHint,\n  CommentComposerSubmitTrigger,\n  CommentComposerCancelTrigger,\n  useCommentThread,\n  useComment,\n  extractMentions,\n  renderMentions,\n  type Person as CommentPerson,\n}\n"
+      "content": "import * as React from \"react\"\nimport { ark } from \"@ark-ui/react\"\nimport { CornerDownRightIcon, PencilIcon, SendIcon } from \"lucide-react\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Kbd } from \"@/components/ui/kbd\"\nimport { Popover, PopoverContent } from \"@/components/ui/popover\"\nimport { formatRelativeTime } from \"@/lib/time\"\nimport { cn } from \"@/lib/utils\"\nimport { useControllable } from \"@/lib/controllable\"\n\n/**\n * CommentThread — compositional, data-agnostic comments with replies,\n * reactions and a mentions composer. The consumer owns the comments and\n * the people list; the thread owns only which comment is being replied to or\n * edited. Mentions are plain text (`@Full Name`); `extractMentions` maps\n * them back to ids and `CommentBody` highlights them.\n *\n * Anatomy:\n *   CommentThread { people, currentUserId }\n *     CommentList > Comment value= authorId=\n *       CommentAvatar + CommentContent\n *         CommentHeader > CommentAuthor, CommentTime date=, CommentMeta\n *         CommentBody                      highlights @mentions\n *         CommentReactions > CommentReaction emoji= count= active=\n *         CommentActions > CommentReplyTrigger, CommentEditTrigger, …\n *       CommentReplies > Comment …          nested, with a guide line\n *     CommentComposer { people, onSubmit }\n *       CommentComposerReplyingTo          \"Replying to X\" strip\n *       CommentComposerInput               textarea; type @ to mention, ⌘↵ to send\n *       CommentComposerMentionList         suggestions under the input\n *       CommentComposerFooter > CommentComposerHint, CommentComposerCancelTrigger, CommentComposerSubmitTrigger\n */\n\ntype Person = { id: string; name: string; initials?: string; avatar?: string }\n\ntype ThreadContextValue = {\n  /** People who can be mentioned and whose names and initials are rendered. */\n  people: Person[]\n  /** Id of the signed-in person; their comments get `data-own` and mentions of them `data-self`. */\n  currentUserId?: string\n  /** Id of the comment being replied to (controlled). */\n  replyTo: string | null\n  setReplyTo: (id: string | null) => void\n  editing: string | null\n  setEditing: (id: string | null) => void\n}\nconst ThreadContext = React.createContext<ThreadContextValue | null>(null)\nconst CommentContext = React.createContext<{ value: string; authorId?: string; depth: number } | null>(null)\n\nfunction useCommentThread() {\n  const ctx = React.useContext(ThreadContext)\n  if (!ctx) throw new Error(\"Comment parts must be used within <CommentThread>\")\n  return ctx\n}\nfunction useComment() {\n  const ctx = React.useContext(CommentContext)\n  if (!ctx) throw new Error(\"Comment parts must be used within <Comment>\")\n  return ctx\n}\n\nconst initialsOf = (person?: Person) =>\n  person?.initials ??\n  (person?.name ?? \"?\")\n    .split(/\\s+/)\n    .map((p) => p[0])\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase()\n\n/* ---------------------------------------------------------------------------\n * Thread\n * ------------------------------------------------------------------------- */\n\nfunction CommentThread({\n  people = [],\n  currentUserId,\n  replyTo: replyToProp,\n  onReplyToChange,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** People who can be mentioned and whose names and initials are rendered. */\n  people?: Person[]\n  /** Id of the signed-in person; their comments get `data-own` and mentions of them `data-self`. */\n  currentUserId?: string\n  /** Id of the comment being replied to (controlled). */\n  replyTo?: string | null\n  /** Called when the reply target changes. */\n  onReplyToChange?: (id: string | null) => void\n}) {\n  const [replyTo, setReplyTo] = useControllable<string | null>(replyToProp, null, onReplyToChange)\n  const [editing, setEditing] = React.useState<string | null>(null)\n  const ctx = React.useMemo(\n    () => ({ people, currentUserId, replyTo, setReplyTo, editing, setEditing }),\n    [people, currentUserId, replyTo, setReplyTo, editing]\n  )\n  return (\n    <ThreadContext.Provider value={ctx}>\n      <div data-slot=\"comment-thread\" className={cn(\"flex flex-col gap-4\", className)} {...props} />\n    </ThreadContext.Provider>\n  )\n}\n\nfunction CommentList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return <ol data-slot=\"comment-list\" className={cn(\"flex flex-col gap-4\", className)} {...props} />\n}\n\nfunction Comment({\n  value,\n  authorId,\n  className,\n  ...props\n}: React.ComponentProps<\"li\"> & { value: string; authorId?: string }) {\n  const thread = useCommentThread()\n  const parent = React.useContext(CommentContext)\n  const depth = parent ? parent.depth + 1 : 0\n  const ctx = React.useMemo(() => ({ value, authorId, depth }), [value, authorId, depth])\n  return (\n    <CommentContext.Provider value={ctx}>\n      <li\n        data-slot=\"comment\"\n        data-value={value}\n        data-depth={depth}\n        data-own={authorId && authorId === thread.currentUserId ? \"\" : undefined}\n        data-replying={thread.replyTo === value ? \"\" : undefined}\n        data-editing={thread.editing === value ? \"\" : undefined}\n        className={cn(\"group/comment flex gap-3\", className)}\n        {...props}\n      />\n    </CommentContext.Provider>\n  )\n}\n\n/** Avatar for the comment's author (from `people`), or pass your own children. */\nfunction CommentAvatar({ className, children, ...props }: React.ComponentProps<typeof Avatar>) {\n  const { people } = useCommentThread()\n  const { authorId, depth } = useComment()\n  const person = people.find((p) => p.id === authorId)\n  return (\n    <Avatar\n      data-slot=\"comment-avatar\"\n      size={depth > 0 ? \"sm\" : \"default\"}\n      className={cn(\"shrink-0\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {person?.avatar && <AvatarImage src={person.avatar} alt=\"\" />}\n          <AvatarFallback>{initialsOf(person)}</AvatarFallback>\n        </>\n      )}\n    </Avatar>\n  )\n}\n\nfunction CommentContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"comment-content\" className={cn(\"flex min-w-0 flex-1 flex-col gap-1\", className)} {...props} />\n}\n\nfunction CommentHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-header\"\n      className={cn(\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\n/** Author name from `people` by default. */\nfunction CommentAuthor({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  const { people } = useCommentThread()\n  const { authorId } = useComment()\n  return (\n    <span data-slot=\"comment-author\" className={cn(\"font-medium\", className)} {...props}>\n      {children ?? people.find((p) => p.id === authorId)?.name ?? \"Unknown\"}\n    </span>\n  )\n}\n\nfunction CommentTime({\n  date,\n  now,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"time\">, \"dateTime\"> & { date: Date; now?: Date }) {\n  return (\n    <time\n      data-slot=\"comment-time\"\n      dateTime={date.toISOString()}\n      title={date.toLocaleString()}\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? formatRelativeTime(date, { now })}\n    </time>\n  )\n}\n\n/** Small trailing note, e.g. \"edited\" or a role badge. */\nfunction CommentMeta({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"comment-meta\" className={cn(\"text-xs text-muted-foreground\", className)} {...props} />\n}\n\n/** Split text into runs, turning `@Full Name` for known people into mention nodes. */\nfunction renderMentions(text: string, people: Person[]) {\n  if (!people.length || !text.includes(\"@\")) return [text]\n  const names = [...people].sort((a, b) => b.name.length - a.name.length)\n  const pattern = new RegExp(\n    `@(${names.map((p) => p.name.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")).join(\"|\")})(?![\\\\w])`,\n    \"g\"\n  )\n  const nodes: React.ReactNode[] = []\n  let last = 0\n  for (const match of text.matchAll(pattern)) {\n    const index = match.index ?? 0\n    if (index > last) nodes.push(text.slice(last, index))\n    const person = people.find((p) => p.name === match[1])\n    nodes.push(\n      <CommentMention key={`${index}-${match[1]}`} personId={person?.id}>\n        @{match[1]}\n      </CommentMention>\n    )\n    last = index + match[0].length\n  }\n  if (last < text.length) nodes.push(text.slice(last))\n  return nodes\n}\n\nfunction CommentMention({ personId, className, ...props }: React.ComponentProps<\"span\"> & { personId?: string }) {\n  const { currentUserId } = useCommentThread()\n  return (\n    <span\n      data-slot=\"comment-mention\"\n      data-person={personId}\n      data-self={personId && personId === currentUserId ? \"\" : undefined}\n      className={cn(\n        \"rounded-sm bg-primary/10 px-1 font-medium text-primary data-self:bg-amber-500/20 data-self:text-amber-700 dark:data-self:text-amber-300\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Plain text with mentions highlighted; pass `children` to render anything else. */\nfunction CommentBody({ text, className, children, ...props }: React.ComponentProps<\"div\"> & { text?: string }) {\n  const { people } = useCommentThread()\n  return (\n    <div\n      data-slot=\"comment-body\"\n      className={cn(\"text-sm/relaxed wrap-break-word whitespace-pre-wrap\", className)}\n      {...props}\n    >\n      {children ?? (text !== undefined ? renderMentions(text, people) : null)}\n    </div>\n  )\n}\n\nfunction CommentReactions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-reactions\"\n      className={cn(\"flex flex-wrap items-center gap-1 pt-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommentReaction({\n  emoji,\n  count = 0,\n  active = false,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ark.button> & { emoji: string; count?: number; active?: boolean }) {\n  return (\n    <ark.button\n      type=\"button\"\n      data-slot=\"comment-reaction\"\n      data-active={active ? \"\" : undefined}\n      aria-pressed={active}\n      aria-label={`${emoji} ${count}`}\n      className={cn(\n        \"inline-flex h-6 items-center gap-1 rounded-full border bg-background px-1.5 text-xs transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none data-active:border-primary/40 data-active:bg-primary/10\",\n        className\n      )}\n      {...props}\n    >\n      <span aria-hidden>{emoji}</span>\n      {children ?? <span className=\"tabular-nums\">{count}</span>}\n    </ark.button>\n  )\n}\n\n/** Row of small text buttons; revealed on hover/focus, always visible when the comment is active. */\nfunction CommentActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-actions\"\n      className={cn(\n        \"flex items-center gap-1 text-xs text-muted-foreground opacity-0 transition-opacity group-focus-within/comment:opacity-100 group-hover/comment:opacity-100 group-data-editing/comment:opacity-100 group-data-replying/comment:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommentReplyTrigger({ asChild, children, onClick, className, ...props }: React.ComponentProps<typeof Button>) {\n  const { replyTo, setReplyTo } = useCommentThread()\n  const { value } = useComment()\n  return (\n    <Button\n      data-slot=\"comment-reply-trigger\"\n      variant=\"ghost\"\n      size=\"xs\"\n      asChild={asChild}\n      aria-pressed={replyTo === value}\n      className={cn(\"h-6 px-1.5 text-xs\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setReplyTo(replyTo === value ? null : value)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <CornerDownRightIcon /> Reply\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction CommentEditTrigger({ asChild, children, onClick, className, ...props }: React.ComponentProps<typeof Button>) {\n  const { editing, setEditing } = useCommentThread()\n  const { value } = useComment()\n  return (\n    <Button\n      data-slot=\"comment-edit-trigger\"\n      variant=\"ghost\"\n      size=\"xs\"\n      asChild={asChild}\n      aria-pressed={editing === value}\n      className={cn(\"h-6 px-1.5 text-xs\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) setEditing(editing === value ? null : value)\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <PencilIcon /> Edit\n            </>\n          ))}\n    </Button>\n  )\n}\n\n/** Nested replies with a guide line; put `Comment`s inside. */\nfunction CommentReplies({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol data-slot=\"comment-replies\" className={cn(\"mt-2 flex flex-col gap-3 border-s-2 ps-3\", className)} {...props} />\n  )\n}\n\nfunction CommentEmpty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-empty\"\n      className={cn(\"rounded-lg border border-dashed px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ---------------------------------------------------------------------------\n * Composer with mentions\n * ------------------------------------------------------------------------- */\n\ntype MentionState = { query: string; start: number; index: number } | null\n\ntype ComposerContextValue = {\n  /** People who can be mentioned and whose names and initials are rendered. */\n  people: Person[]\n  value: string\n  setValue: (value: string) => void\n  mention: MentionState\n  setMention: (mention: MentionState) => void\n  suggestions: Person[]\n  pick: (person: Person) => void\n  /** The input registers how a pick is applied to its DOM. */\n  registerPicker: (fn: (person: Person, mention: NonNullable<MentionState>) => void) => () => void\n  submit: () => void\n  cancel: () => void\n  canSubmit: boolean\n  inputRef: React.RefObject<HTMLDivElement | null>\n  listId: string\n}\nconst ComposerContext = React.createContext<ComposerContextValue | null>(null)\nfunction useComposer() {\n  const ctx = React.useContext(ComposerContext)\n  if (!ctx) throw new Error(\"Composer parts must be used within <CommentComposer>\")\n  return ctx\n}\n\n/** Ids of people whose `@Full Name` appears in the text. */\nfunction extractMentions(text: string, people: Person[]) {\n  return people\n    .filter((p) => new RegExp(`@${p.name.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")}(?![\\\\w])`).test(text))\n    .map((p) => p.id)\n}\n\nfunction CommentComposer({\n  people = [],\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSubmit,\n  onCancel,\n  maxSuggestions = 6,\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onSubmit\" | \"defaultValue\"> & {\n  /** People who can be mentioned and whose names and initials are rendered. */\n  people?: Person[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Called with the trimmed text and the ids of mentioned people. */\n  onSubmit?: (comment: { text: string; mentions: string[] }) => void\n  /** Called when the composer is cancelled with Escape or the cancel trigger. */\n  onCancel?: () => void\n  /** Maximum number of mention suggestions shown. */\n  maxSuggestions?: number\n}) {\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange)\n  const [mention, setMention] = React.useState<MentionState>(null)\n  const inputRef = React.useRef<HTMLDivElement>(null)\n  const listId = React.useId()\n  const pickerRef = React.useRef<((person: Person, mention: NonNullable<MentionState>) => void) | null>(null)\n  const registerPicker = React.useCallback((fn: (person: Person, mention: NonNullable<MentionState>) => void) => {\n    pickerRef.current = fn\n    return () => {\n      if (pickerRef.current === fn) pickerRef.current = null\n    }\n  }, [])\n\n  const suggestions = React.useMemo(() => {\n    if (!mention) return []\n    const q = mention.query.toLowerCase()\n    return people.filter((p) => p.name.toLowerCase().includes(q)).slice(0, maxSuggestions)\n  }, [mention, people, maxSuggestions])\n\n  const pick = React.useCallback(\n    (person: Person) => {\n      if (!mention) return\n      pickerRef.current?.(person, mention)\n      setMention(null)\n    },\n    [mention]\n  )\n\n  const canSubmit = value.trim().length > 0\n  const submit = React.useCallback(() => {\n    if (!canSubmit) return\n    onSubmit?.({ text: value.trim(), mentions: extractMentions(value, people) })\n    setValue(\"\")\n    setMention(null)\n  }, [canSubmit, onSubmit, value, people, setValue])\n  const cancel = React.useCallback(() => {\n    setValue(\"\")\n    setMention(null)\n    onCancel?.()\n  }, [setValue, onCancel])\n\n  const ctx = React.useMemo<ComposerContextValue>(\n    () => ({\n      people,\n      value,\n      setValue,\n      mention,\n      setMention,\n      suggestions,\n      pick,\n      registerPicker,\n      submit,\n      cancel,\n      canSubmit,\n      inputRef,\n      listId,\n    }),\n    [people, value, setValue, mention, suggestions, pick, registerPicker, submit, cancel, canSubmit, listId]\n  )\n\n  return (\n    <ComposerContext.Provider value={ctx}>\n      <div\n        data-slot=\"comment-composer\"\n        data-mentioning={mention ? \"\" : undefined}\n        className={cn(\n          \"relative flex flex-col gap-2 rounded-xl border bg-background p-2 transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </ComposerContext.Provider>\n  )\n}\n\n/** \"Replying to …\" strip; renders nothing when not replying. The render prop gets the comment id. */\nfunction CommentComposerReplyingTo({\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { children?: (details: { id: string }) => React.ReactNode }) {\n  const { replyTo, setReplyTo } = useCommentThread()\n  if (!replyTo) return null\n  return (\n    <div\n      data-slot=\"comment-composer-replying-to\"\n      className={cn(\"flex items-center gap-2 px-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      <CornerDownRightIcon className=\"size-3.5\" />\n      {children ? children({ id: replyTo }) : <span>Replying to a comment</span>}\n      <Button variant=\"ghost\" size=\"xs\" className=\"ms-auto h-5 px-1.5\" onClick={() => setReplyTo(null)}>\n        Cancel\n      </Button>\n    </div>\n  )\n}\n\n/* ----- contenteditable helpers ----- */\n\nconst CHIP = \"comment-mention-chip\"\nconst escapeRe = (text: string) => text.replace(/[.*+?^${}()|[\\]\\\\]/g, \"\\\\$&\")\n\n/** Serialise the editable DOM to plain text; chips become `@Full Name`, blocks and <br> become newlines. */\nfunction serialize(root: HTMLElement): string {\n  let out = \"\"\n  const walk = (node: Node) => {\n    if (node.nodeType === Node.TEXT_NODE) {\n      out += (node.textContent ?? \"\").replace(/ /g, \" \")\n      return\n    }\n    if (!(node instanceof HTMLElement)) return\n    if (node.dataset.slot === CHIP) {\n      out += `@${node.dataset.name ?? \"\"}`\n      return\n    }\n    if (node.tagName === \"BR\") {\n      out += \"\\n\"\n      return\n    }\n    const block = node.tagName === \"DIV\" || node.tagName === \"P\"\n    if (block && out.length && !out.endsWith(\"\\n\")) out += \"\\n\"\n    node.childNodes.forEach(walk)\n  }\n  root.childNodes.forEach(walk)\n  return out.replace(/\\n$/, \"\")\n}\n\nfunction createChip(person: Person) {\n  const chip = document.createElement(\"span\")\n  chip.dataset.slot = CHIP\n  chip.dataset.person = person.id\n  chip.dataset.name = person.name\n  chip.contentEditable = \"false\"\n  chip.className =\n    \"mx-px inline-flex items-center rounded-full bg-muted px-1.5 py-px align-baseline text-[0.9em] font-medium text-foreground select-none\"\n  chip.textContent = `@${person.name}`\n  return chip\n}\n\n/** Build editable DOM from plain text, turning known `@Full Name`s into chips. */\nfunction hydrate(root: HTMLElement, text: string, people: Person[]) {\n  root.replaceChildren()\n  const names = [...people].sort((a, b) => b.name.length - a.name.length)\n  const pattern = names.length ? new RegExp(`@(${names.map((p) => escapeRe(p.name)).join(\"|\")})(?![\\\\w])`, \"g\") : null\n  text.split(\"\\n\").forEach((line, lineIndex) => {\n    if (lineIndex > 0) root.appendChild(document.createElement(\"br\"))\n    let last = 0\n    if (pattern) {\n      for (const match of line.matchAll(pattern)) {\n        const index = match.index ?? 0\n        if (index > last) root.appendChild(document.createTextNode(line.slice(last, index)))\n        const person = people.find((p) => p.name === match[1])\n        if (person) root.appendChild(createChip(person))\n        last = index + match[0].length\n      }\n    }\n    if (last < line.length) root.appendChild(document.createTextNode(line.slice(last)))\n  })\n}\n\n/** The `@query` immediately before the caret inside a text node, if any. */\nfunction mentionAtCaret(root: HTMLElement): { node: Text; start: number; end: number; query: string } | null {\n  const selection = window.getSelection()\n  if (!selection || !selection.rangeCount || !selection.isCollapsed) return null\n  const range = selection.getRangeAt(0)\n  const node = range.startContainer\n  if (node.nodeType !== Node.TEXT_NODE || !root.contains(node)) return null\n  const text = node.textContent ?? \"\"\n  const caret = range.startOffset\n  const before = text.slice(0, caret)\n  const at = before.lastIndexOf(\"@\")\n  if (at === -1) return null\n  if (at > 0 && /\\S/.test(before[at - 1])) return null\n  const query = before.slice(at + 1)\n  if (query.length > 30) return null\n  return { node: node as Text, start: at, end: caret, query }\n}\n\nfunction placeCaretAfter(node: Node) {\n  const selection = window.getSelection()\n  if (!selection) return\n  const range = document.createRange()\n  range.setStartAfter(node)\n  range.collapse(true)\n  selection.removeAllRanges()\n  selection.addRange(range)\n}\n\n/**\n * Contenteditable input: picked mentions become atomic grey chips (one\n * Backspace removes a whole chip); `value` stays plain `@Full Name` text.\n * Arrows/Enter/Tab pick from the list, Escape closes it, ⌘/Ctrl+Enter submits.\n */\nfunction CommentComposerInput({\n  className,\n  placeholder = \"Write a comment…\",\n  autoFocus,\n  onKeyDown,\n  onBlur,\n  onInput,\n  onPaste,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onChange\"> & { placeholder?: string; autoFocus?: boolean }) {\n  const c = useComposer()\n  const lastSerialized = React.useRef<string | null>(null)\n\n  // Reflect outside changes to `value` (initial text, edits, reset after submit) without disturbing typing.\n  React.useLayoutEffect(() => {\n    const el = c.inputRef.current\n    if (!el || c.value === lastSerialized.current) return\n    hydrate(el, c.value, c.people)\n    lastSerialized.current = c.value\n  }, [c.value, c.people, c.inputRef])\n\n  React.useEffect(() => {\n    if (autoFocus) c.inputRef.current?.focus()\n  }, [autoFocus, c.inputRef])\n\n  const { registerPicker, setValue, inputRef } = c\n  React.useEffect(\n    () =>\n      registerPicker((person) => {\n        const el = inputRef.current\n        if (!el) return\n        const hit = mentionAtCaret(el)\n        const chip = createChip(person)\n        const space = document.createTextNode(\" \")\n        if (hit) {\n          const range = document.createRange()\n          range.setStart(hit.node, hit.start)\n          range.setEnd(hit.node, hit.end)\n          range.deleteContents()\n          range.insertNode(space)\n          range.insertNode(chip)\n        } else {\n          el.append(chip, space)\n        }\n        placeCaretAfter(space)\n        el.focus()\n        const next = serialize(el)\n        lastSerialized.current = next\n        setValue(next)\n      }),\n    [registerPicker, inputRef, setValue]\n  )\n\n  const sync = () => {\n    const el = c.inputRef.current\n    if (!el) return\n    if (el.innerHTML === \"<br>\") el.replaceChildren()\n    const next = serialize(el)\n    lastSerialized.current = next\n    c.setValue(next)\n    const hit = mentionAtCaret(el)\n    c.setMention(hit ? { query: hit.query, start: hit.start, index: 0 } : null)\n  }\n\n  return (\n    <div\n      ref={c.inputRef}\n      data-slot=\"comment-composer-input\"\n      role={c.mention ? \"combobox\" : \"textbox\"}\n      contentEditable\n      suppressContentEditableWarning\n      aria-multiline={c.mention ? undefined : true}\n      aria-expanded={c.mention ? true : undefined}\n      aria-controls={c.mention ? c.listId : undefined}\n      aria-autocomplete={c.mention ? \"list\" : undefined}\n      aria-activedescendant={\n        c.mention && c.suggestions[c.mention.index] ? `${c.listId}-${c.suggestions[c.mention.index].id}` : undefined\n      }\n      data-placeholder={placeholder}\n      className={cn(\n        \"min-h-20 px-2 py-1.5 text-sm wrap-break-word whitespace-pre-wrap outline-none\",\n        \"empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)]\",\n        className\n      )}\n      onInput={(event) => {\n        onInput?.(event)\n        sync()\n      }}\n      onKeyUp={(event) => {\n        if ([\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"].includes(event.key)) sync()\n      }}\n      onClick={() => sync()}\n      onPaste={(event) => {\n        onPaste?.(event)\n        if (event.defaultPrevented) return\n        event.preventDefault()\n        document.execCommand(\"insertText\", false, event.clipboardData.getData(\"text/plain\"))\n      }}\n      onKeyDown={(event) => {\n        onKeyDown?.(event)\n        if (event.defaultPrevented) return\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Enter\") {\n          event.preventDefault()\n          c.submit()\n          return\n        }\n        if (!c.mention) {\n          if (event.key === \"Escape\") c.cancel()\n          return\n        }\n        const count = c.suggestions.length\n        if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n          event.preventDefault()\n          if (!count) return\n          const delta = event.key === \"ArrowDown\" ? 1 : -1\n          c.setMention({ ...c.mention, index: (c.mention.index + delta + count) % count })\n        } else if ((event.key === \"Enter\" || event.key === \"Tab\") && count) {\n          event.preventDefault()\n          c.pick(c.suggestions[c.mention.index])\n        } else if (event.key === \"Escape\") {\n          event.preventDefault()\n          c.setMention(null)\n        }\n      }}\n      onBlur={(event) => {\n        onBlur?.(event)\n        setTimeout(() => {\n          if (document.activeElement !== event.target) c.setMention(null)\n        }, 120)\n      }}\n      {...props}\n    />\n  )\n}\n\n/** Floating suggestion list anchored under the input while an `@query` is active. Focus stays in the textarea. */\nfunction CommentComposerMentionList({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  const c = useComposer()\n  const open = !!c.mention\n  return (\n    <Popover\n      open={open}\n      onOpenChange={({ open }) => {\n        if (!open) c.setMention(null)\n      }}\n      autoFocus={false}\n      modal={false}\n      positioning={{\n        placement: \"bottom-start\",\n        sameWidth: true,\n        gutter: 4,\n        getAnchorRect: () => {\n          const rect = c.inputRef.current?.getBoundingClientRect()\n          return rect ? { x: rect.x, y: rect.y, width: rect.width, height: rect.height } : null\n        },\n      }}\n    >\n      <PopoverContent\n        id={c.listId}\n        role=\"listbox\"\n        aria-label=\"People\"\n        data-slot=\"comment-composer-mention-list\"\n        className={cn(\"max-h-56 w-auto overflow-y-auto p-1\", className)}\n        onPointerDown={(event) => event.preventDefault()}\n        {...props}\n      >\n        {c.suggestions.length === 0 ? (\n          <div className=\"px-2 py-1.5 text-sm text-muted-foreground\">No one matches \"{c.mention?.query}\"</div>\n        ) : (\n          c.suggestions.map((person, index) => (\n            <div\n              key={person.id}\n              id={`${c.listId}-${person.id}`}\n              role=\"option\"\n              aria-selected={index === c.mention?.index}\n              data-slot=\"comment-composer-mention-item\"\n              data-highlighted={index === c.mention?.index ? \"\" : undefined}\n              className=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm data-highlighted:bg-accent data-highlighted:text-accent-foreground\"\n              onMouseEnter={() => c.mention && c.setMention({ ...c.mention, index })}\n              onClick={() => c.pick(person)}\n            >\n              <Avatar size=\"sm\" className=\"size-6 text-[10px]\">\n                {person.avatar && <AvatarImage src={person.avatar} alt=\"\" />}\n                <AvatarFallback>{initialsOf(person)}</AvatarFallback>\n              </Avatar>\n              <span className=\"truncate\">{person.name}</span>\n            </div>\n          ))\n        )}\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nfunction CommentComposerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"comment-composer-footer\" className={cn(\"flex items-center gap-2 px-1\", className)} {...props} />\n  )\n}\n\nfunction CommentComposerHint({ className, children, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"comment-composer-hint\"\n      className={cn(\"me-auto text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <Kbd>@</Kbd> to mention · <Kbd>⌘↵</Kbd> to send\n        </>\n      )}\n    </span>\n  )\n}\n\nfunction CommentComposerSubmitTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { submit, canSubmit } = useComposer()\n  return (\n    <Button\n      data-slot=\"comment-composer-submit-trigger\"\n      size=\"sm\"\n      asChild={asChild}\n      disabled={!canSubmit}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) submit()\n      }}\n      {...props}\n    >\n      {asChild\n        ? children\n        : (children ?? (\n            <>\n              <SendIcon /> Comment\n            </>\n          ))}\n    </Button>\n  )\n}\n\nfunction CommentComposerCancelTrigger({ asChild, children, onClick, ...props }: React.ComponentProps<typeof Button>) {\n  const { cancel } = useComposer()\n  return (\n    <Button\n      data-slot=\"comment-composer-cancel-trigger\"\n      variant=\"ghost\"\n      size=\"sm\"\n      asChild={asChild}\n      onClick={(event) => {\n        onClick?.(event)\n        if (!event.defaultPrevented) cancel()\n      }}\n      {...props}\n    >\n      {asChild ? children : (children ?? \"Cancel\")}\n    </Button>\n  )\n}\n\nexport {\n  CommentThread,\n  CommentList,\n  Comment,\n  CommentAvatar,\n  CommentContent,\n  CommentHeader,\n  CommentAuthor,\n  CommentTime,\n  CommentMeta,\n  CommentBody,\n  CommentMention,\n  CommentReactions,\n  CommentReaction,\n  CommentActions,\n  CommentReplyTrigger,\n  CommentEditTrigger,\n  CommentReplies,\n  CommentEmpty,\n  CommentComposer,\n  CommentComposerReplyingTo,\n  CommentComposerInput,\n  CommentComposerMentionList,\n  CommentComposerFooter,\n  CommentComposerHint,\n  CommentComposerSubmitTrigger,\n  CommentComposerCancelTrigger,\n  useCommentThread,\n  useComment,\n  extractMentions,\n  renderMentions,\n  type Person as CommentPerson,\n}\n"
     }
   ],
   "docs": "## Activity feed and comments\n`src/components/ui/activity-feed.tsx` is a compositional timeline of events on the WAI-ARIA feed\npattern (`role=\"feed\"`, focusable articles, PageUp/PageDown move, Ctrl+Home/End jump):\n`ActivityFeed` > `ActivityFeedGroup` > `ActivityFeedGroupLabel` + `ActivityFeedItems` (draws the\nconnector line) > `ActivityFeedItem value=` > `ActivityFeedItemMarker` (dot by default; pass an\nicon or an Avatar) + `ActivityFeedItemContent` > `ActivityFeedItemHeader` > `ActivityFeedItemActor`,\n`ActivityFeedItemTime date=` (`<time>` with a relative label from `src/lib/time.ts`\n`formatRelativeTime`; full date in the title), `ActivityFeedItemBody`, `ActivityFeedItemActions`;\nplus `ActivityFeedLoadMoreTrigger` and `ActivityFeedEmpty`. Data, grouping and read state are the\nconsumer's.\n`src/components/ui/comment-thread.tsx` is compositional comments with replies, reactions and a\nmentions composer. `CommentThread { people, currentUserId, replyTo/onReplyToChange }` owns only\nwhich comment is being replied to or edited (`useCommentThread()` → `replyTo`, `editing`, setters).\nParts: `CommentList` > `Comment value= authorId=` (`data-own/replying/editing/depth`) >\n`CommentAvatar` (initials from `people`) + `CommentContent` > `CommentHeader` > `CommentAuthor`,\n`CommentTime date=`, `CommentMeta`; `CommentBody text=` (plain text with `@Full Name` mentions\nhighlighted as `CommentMention`, `data-self` for the current user); `CommentReactions` >\n`CommentReaction emoji= count= active=`; `CommentActions` (hover-revealed) > `CommentReplyTrigger`,\n`CommentEditTrigger`; `CommentReplies` (nested list with a guide line); `CommentEmpty`.\n`CommentComposer { people, value/onValueChange, onSubmit({ text, mentions }), onCancel }` >\n`CommentComposerReplyingTo` (render prop gets the comment id), `CommentComposerInput` (a\ncontenteditable, not a textarea: picked mentions become atomic grey chips\n`[data-slot=comment-mention-chip]` that one Backspace removes, while `value` stays plain\n`@Full Name` text and `defaultValue`/`value` text is hydrated back into chips;\n`@query` at the caret opens `CommentComposerMentionList` (a portaled Popover anchored to the input, focus stays in the textarea, so no `overflow-hidden` ancestor clips it and nothing shifts), arrows/Enter/Tab pick, Escape closes,\n⌘/Ctrl+Enter submits, `aria-activedescendant` wired), `CommentComposerFooter` >\n`CommentComposerHint`, `CommentComposerCancelTrigger`, `CommentComposerSubmitTrigger`. Mentions are\nplain `@Full Name` text; `extractMentions(text, people)` returns ids. The same composer edits in\nplace (`defaultValue`, Save). `src/demo/activity/` is the reference (`/activity`): grouped feed\nwith All/Mentions/Comments filter, unread dots, load more, and a ticket thread with nested\nreplies, reactions, edit/delete of own comments (Popconfirm), and posting that also prepends a\nfeed item."