@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/comment-composer.mjs

@@ -0,0 +1,253 @@
+import { Button } from "./button.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { AlignCenter, AlignLeft, AlignRight, Bold, Code, Image, Italic, List, ListChecks, ListOrdered, Quote, Strikethrough, Underline } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image$1 from "@tiptap/extension-image";
+import Placeholder from "@tiptap/extension-placeholder";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import TextAlign from "@tiptap/extension-text-align";
+import Underline$1 from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/comment-composer.tsx
+const DEFAULT_ACTIONS = [
+	"bold",
+	"italic",
+	"underline",
+	"strikethrough",
+	"align-left",
+	"align-center",
+	"align-right",
+	"list-bulleted",
+	"list-numbered",
+	"list-checklist",
+	"quote",
+	"code",
+	"image"
+];
+const TOOLBAR_META = {
+	bold: {
+		label: "Bold",
+		Icon: Bold,
+		group: 0,
+		apply: (e) => e.chain().focus().toggleBold().run(),
+		isActive: (e) => e.isActive("bold")
+	},
+	italic: {
+		label: "Italic",
+		Icon: Italic,
+		group: 0,
+		apply: (e) => e.chain().focus().toggleItalic().run(),
+		isActive: (e) => e.isActive("italic")
+	},
+	underline: {
+		label: "Underline",
+		Icon: Underline,
+		group: 0,
+		apply: (e) => e.chain().focus().toggleUnderline().run(),
+		isActive: (e) => e.isActive("underline")
+	},
+	strikethrough: {
+		label: "Strikethrough",
+		Icon: Strikethrough,
+		group: 0,
+		apply: (e) => e.chain().focus().toggleStrike().run(),
+		isActive: (e) => e.isActive("strike")
+	},
+	"align-left": {
+		label: "Align left",
+		Icon: AlignLeft,
+		group: 1,
+		apply: (e) => e.chain().focus().setTextAlign("left").run(),
+		isActive: (e) => e.isActive({ textAlign: "left" })
+	},
+	"align-center": {
+		label: "Align center",
+		Icon: AlignCenter,
+		group: 1,
+		apply: (e) => e.chain().focus().setTextAlign("center").run(),
+		isActive: (e) => e.isActive({ textAlign: "center" })
+	},
+	"align-right": {
+		label: "Align right",
+		Icon: AlignRight,
+		group: 1,
+		apply: (e) => e.chain().focus().setTextAlign("right").run(),
+		isActive: (e) => e.isActive({ textAlign: "right" })
+	},
+	"list-bulleted": {
+		label: "Bulleted list",
+		Icon: List,
+		group: 2,
+		apply: (e) => e.chain().focus().toggleBulletList().run(),
+		isActive: (e) => e.isActive("bulletList")
+	},
+	"list-numbered": {
+		label: "Numbered list",
+		Icon: ListOrdered,
+		group: 2,
+		apply: (e) => e.chain().focus().toggleOrderedList().run(),
+		isActive: (e) => e.isActive("orderedList")
+	},
+	"list-checklist": {
+		label: "Checklist",
+		Icon: ListChecks,
+		group: 2,
+		apply: (e) => e.chain().focus().toggleTaskList().run(),
+		isActive: (e) => e.isActive("taskList")
+	},
+	quote: {
+		label: "Quote",
+		Icon: Quote,
+		group: 3,
+		apply: (e) => e.chain().focus().toggleBlockquote().run(),
+		isActive: (e) => e.isActive("blockquote")
+	},
+	code: {
+		label: "Code block",
+		Icon: Code,
+		group: 3,
+		apply: (e) => e.chain().focus().toggleCodeBlock().run(),
+		isActive: (e) => e.isActive("codeBlock")
+	},
+	image: {
+		label: "Insert image",
+		Icon: Image,
+		group: 4,
+		apply: (e) => {
+			const url = window.prompt("Image URL");
+			if (url) e.chain().focus().setImage({ src: url }).run();
+		},
+		isActive: () => false
+	}
+};
+function groupActions(actions) {
+	const groups = {};
+	for (const a of actions) {
+		const g = TOOLBAR_META[a].group;
+		(groups[g] ||= []).push(a);
+	}
+	return Object.keys(groups).map((k) => Number(k)).sort((a, b) => a - b).map((k) => groups[k]);
+}
+function isEditorEmpty(editor) {
+	if (!editor) return true;
+	return editor.getText().trim().length === 0;
+}
+function CommentComposer({ value, defaultValue, onChange, onSubmit, onToolbarAction, placeholder = "Add comment", submitLabel = "Comment", minHeight = "4rem", toolbarActions = DEFAULT_ACTIONS, disabled, isSubmitting, className }) {
+	const isControlled = value !== void 0;
+	const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+	const editor = useEditor({
+		extensions: [
+			StarterKit.configure({
+				codeBlock: { HTMLAttributes: { class: "wwc:rounded wwc:bg-muted wwc:p-3 wwc:font-mono wwc:text-xs" } },
+				blockquote: { HTMLAttributes: { class: "wwc:border-l-2 wwc:border-border wwc:pl-3 wwc:italic wwc:text-muted-foreground" } },
+				bulletList: { HTMLAttributes: { class: "wwc:list-disc wwc:pl-5" } },
+				orderedList: { HTMLAttributes: { class: "wwc:list-decimal wwc:pl-5" } }
+			}),
+			Underline$1,
+			TextAlign.configure({ types: ["heading", "paragraph"] }),
+			TaskList.configure({ HTMLAttributes: { class: "wwc:flex wwc:flex-col wwc:gap-1 wwc:pl-1 wwc:list-none" } }),
+			TaskItem.configure({
+				nested: true,
+				HTMLAttributes: { class: "wwc:flex wwc:items-start wwc:gap-2 [&>label>input]:wwc:mt-1" }
+			}),
+			Image$1.configure({ HTMLAttributes: { class: "wwc:rounded wwc:max-w-full" } }),
+			Placeholder.configure({ placeholder })
+		],
+		content: isControlled ? value || "" : defaultValue || "",
+		editable: !disabled && !isSubmitting,
+		editorProps: {
+			attributes: { class: "wwc:min-h-[var(--wwc-cc-min-h)] wwc:w-full wwc:bg-transparent wwc:px-3 wwc:py-2.5 wwc:text-sm wwc:text-foreground wwc:outline-none [&_p.is-editor-empty:first-child]:wwc:text-muted-foreground [&_p.is-editor-empty:first-child]:wwc:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:wwc:before:float-left [&_p.is-editor-empty:first-child]:wwc:before:h-0 [&_p.is-editor-empty:first-child]:wwc:before:pointer-events-none" },
+			handleKeyDown(_view, event) {
+				if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+					event.preventDefault();
+					handleSubmit();
+					return true;
+				}
+				return false;
+			}
+		},
+		onUpdate: ({ editor }) => {
+			onChange?.(editor.getHTML());
+		},
+		onSelectionUpdate: () => forceUpdate(),
+		onTransaction: () => forceUpdate()
+	});
+	React.useEffect(() => {
+		if (!editor || !isControlled) return;
+		if (value !== editor.getHTML() && value !== void 0) editor.commands.setContent(value, { emitUpdate: false });
+	}, [
+		editor,
+		isControlled,
+		value
+	]);
+	React.useEffect(() => {
+		if (!editor) return;
+		editor.setEditable(!disabled && !isSubmitting);
+	}, [
+		editor,
+		disabled,
+		isSubmitting
+	]);
+	const handleSubmit = React.useCallback(() => {
+		if (!editor || isEditorEmpty(editor) || disabled || isSubmitting) return;
+		onSubmit?.(editor.getHTML());
+		if (!isControlled) editor.commands.clearContent();
+	}, [
+		editor,
+		disabled,
+		isSubmitting,
+		isControlled,
+		onSubmit
+	]);
+	const groups = React.useMemo(() => groupActions(toolbarActions), [toolbarActions]);
+	const canSubmit = !!editor && !isEditorEmpty(editor) && !disabled && !isSubmitting;
+	return /* @__PURE__ */ jsxs("div", {
+		style: { ["--wwc-cc-min-h"]: minHeight },
+		className: cn("wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:focus-within:border-ring wwc:focus-within:ring-1 wwc:focus-within:ring-ring", className),
+		children: [/* @__PURE__ */ jsx(EditorContent, { editor }), /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-center wwc:gap-1 wwc:border-t wwc:border-border wwc:bg-muted/40 wwc:px-1.5 wwc:py-1",
+			children: [
+				groups.map((group, gi) => /* @__PURE__ */ jsxs(React.Fragment, { children: [gi > 0 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "wwc:mx-1 wwc:h-5 wwc:w-px wwc:bg-border"
+				}), group.map((action) => {
+					const meta = TOOLBAR_META[action];
+					const Icon = meta.Icon;
+					const active = editor ? meta.isActive(editor) : false;
+					return /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						icon: true,
+						className: cn("wwc:h-7 wwc:w-7", active ? "wwc:bg-accent wwc:text-accent-foreground" : "wwc:text-muted-foreground wwc:hover:text-foreground"),
+						"aria-label": meta.label,
+						"aria-pressed": active,
+						title: meta.label,
+						disabled: disabled || isSubmitting || !editor,
+						onClick: () => {
+							if (!editor) return;
+							meta.apply(editor);
+							onToolbarAction?.(action);
+						},
+						children: /* @__PURE__ */ jsx(Icon, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}, action);
+				})] }, gi)),
+				/* @__PURE__ */ jsx("div", { className: "wwc:flex-1" }),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					className: "wwc:h-7",
+					disabled: !canSubmit,
+					onClick: handleSubmit,
+					children: isSubmitting ? "Posting..." : submitLabel
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { CommentComposer };
+
+//# sourceMappingURL=comment-composer.mjs.map

package/dist/comment-composer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-composer.mjs","names":["UnderlineIcon","ImageIcon","Underline","Image"],"sources":["../src/comment-composer.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport Image from \"@tiptap/extension-image\";\nimport Placeholder from \"@tiptap/extension-placeholder\";\nimport TaskItem from \"@tiptap/extension-task-item\";\nimport TaskList from \"@tiptap/extension-task-list\";\nimport TextAlign from \"@tiptap/extension-text-align\";\nimport Underline from \"@tiptap/extension-underline\";\nimport {EditorContent, useEditor, type Editor} from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport {\n\tAlignCenter,\n\tAlignLeft,\n\tAlignRight,\n\tBold,\n\tCode,\n\tImage as ImageIcon,\n\tItalic,\n\tList,\n\tListChecks,\n\tListOrdered,\n\tQuote,\n\tStrikethrough,\n\tUnderline as UnderlineIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\n\nexport type CommentToolbarAction =\n\t| \"bold\"\n\t| \"italic\"\n\t| \"underline\"\n\t| \"strikethrough\"\n\t| \"align-left\"\n\t| \"align-center\"\n\t| \"align-right\"\n\t| \"list-bulleted\"\n\t| \"list-numbered\"\n\t| \"list-checklist\"\n\t| \"quote\"\n\t| \"code\"\n\t| \"image\";\n\nconst DEFAULT_ACTIONS: CommentToolbarAction[] = [\n\t\"bold\",\n\t\"italic\",\n\t\"underline\",\n\t\"strikethrough\",\n\t\"align-left\",\n\t\"align-center\",\n\t\"align-right\",\n\t\"list-bulleted\",\n\t\"list-numbered\",\n\t\"list-checklist\",\n\t\"quote\",\n\t\"code\",\n\t\"image\",\n];\n\ninterface ToolbarMeta {\n\tlabel: string;\n\tIcon: React.ComponentType<{className?: string}>;\n\tgroup: number;\n\tapply: (editor: Editor) => void;\n\tisActive: (editor: Editor) => boolean;\n}\n\nconst TOOLBAR_META: Record<CommentToolbarAction, ToolbarMeta> = {\n\tbold: {\n\t\tlabel: \"Bold\",\n\t\tIcon: Bold,\n\t\tgroup: 0,\n\t\tapply: (e) => e.chain().focus().toggleBold().run(),\n\t\tisActive: (e) => e.isActive(\"bold\"),\n\t},\n\titalic: {\n\t\tlabel: \"Italic\",\n\t\tIcon: Italic,\n\t\tgroup: 0,\n\t\tapply: (e) => e.chain().focus().toggleItalic().run(),\n\t\tisActive: (e) => e.isActive(\"italic\"),\n\t},\n\tunderline: {\n\t\tlabel: \"Underline\",\n\t\tIcon: UnderlineIcon,\n\t\tgroup: 0,\n\t\tapply: (e) => e.chain().focus().toggleUnderline().run(),\n\t\tisActive: (e) => e.isActive(\"underline\"),\n\t},\n\tstrikethrough: {\n\t\tlabel: \"Strikethrough\",\n\t\tIcon: Strikethrough,\n\t\tgroup: 0,\n\t\tapply: (e) => e.chain().focus().toggleStrike().run(),\n\t\tisActive: (e) => e.isActive(\"strike\"),\n\t},\n\t\"align-left\": {\n\t\tlabel: \"Align left\",\n\t\tIcon: AlignLeft,\n\t\tgroup: 1,\n\t\tapply: (e) => e.chain().focus().setTextAlign(\"left\").run(),\n\t\tisActive: (e) => e.isActive({textAlign: \"left\"}),\n\t},\n\t\"align-center\": {\n\t\tlabel: \"Align center\",\n\t\tIcon: AlignCenter,\n\t\tgroup: 1,\n\t\tapply: (e) => e.chain().focus().setTextAlign(\"center\").run(),\n\t\tisActive: (e) => e.isActive({textAlign: \"center\"}),\n\t},\n\t\"align-right\": {\n\t\tlabel: \"Align right\",\n\t\tIcon: AlignRight,\n\t\tgroup: 1,\n\t\tapply: (e) => e.chain().focus().setTextAlign(\"right\").run(),\n\t\tisActive: (e) => e.isActive({textAlign: \"right\"}),\n\t},\n\t\"list-bulleted\": {\n\t\tlabel: \"Bulleted list\",\n\t\tIcon: List,\n\t\tgroup: 2,\n\t\tapply: (e) => e.chain().focus().toggleBulletList().run(),\n\t\tisActive: (e) => e.isActive(\"bulletList\"),\n\t},\n\t\"list-numbered\": {\n\t\tlabel: \"Numbered list\",\n\t\tIcon: ListOrdered,\n\t\tgroup: 2,\n\t\tapply: (e) => e.chain().focus().toggleOrderedList().run(),\n\t\tisActive: (e) => e.isActive(\"orderedList\"),\n\t},\n\t\"list-checklist\": {\n\t\tlabel: \"Checklist\",\n\t\tIcon: ListChecks,\n\t\tgroup: 2,\n\t\tapply: (e) => e.chain().focus().toggleTaskList().run(),\n\t\tisActive: (e) => e.isActive(\"taskList\"),\n\t},\n\tquote: {\n\t\tlabel: \"Quote\",\n\t\tIcon: Quote,\n\t\tgroup: 3,\n\t\tapply: (e) => e.chain().focus().toggleBlockquote().run(),\n\t\tisActive: (e) => e.isActive(\"blockquote\"),\n\t},\n\tcode: {\n\t\tlabel: \"Code block\",\n\t\tIcon: Code,\n\t\tgroup: 3,\n\t\tapply: (e) => e.chain().focus().toggleCodeBlock().run(),\n\t\tisActive: (e) => e.isActive(\"codeBlock\"),\n\t},\n\timage: {\n\t\tlabel: \"Insert image\",\n\t\tIcon: ImageIcon,\n\t\tgroup: 4,\n\t\tapply: (e) => {\n\t\t\tconst url = window.prompt(\"Image URL\");\n\t\t\tif (url) e.chain().focus().setImage({src: url}).run();\n\t\t},\n\t\tisActive: () => false,\n\t},\n};\n\nexport interface CommentComposerProps {\n\t/** Controlled HTML value of the editor. Pair with onChange. */\n\tvalue?: string;\n\t/** Uncontrolled initial HTML value. */\n\tdefaultValue?: string;\n\t/** Fires on every editor update with the current HTML. */\n\tonChange?: (html: string) => void;\n\t/** Fires when the submit button is clicked or the user presses Cmd/Ctrl+Enter. Receives the editor HTML. */\n\tonSubmit?: (html: string) => void;\n\t/** Optional instrumentation hook fired in addition to applying the formatting command. */\n\tonToolbarAction?: (action: CommentToolbarAction) => void;\n\n\tplaceholder?: string;\n\t/** Label shown on the submit button. Defaults to \"Comment\". */\n\tsubmitLabel?: string;\n\t/** Initial visible height (rem). Defaults to 4. */\n\tminHeight?: string;\n\n\t/** Restrict the toolbar to this subset (in this order). Defaults to all actions. */\n\ttoolbarActions?: CommentToolbarAction[];\n\n\tdisabled?: boolean;\n\t/** When true, the submit button shows the loading state and is disabled. */\n\tisSubmitting?: boolean;\n\t/** Class name applied to the outer container. */\n\tclassName?: string;\n}\n\nfunction groupActions(actions: CommentToolbarAction[]): CommentToolbarAction[][] {\n\tconst groups: Record<number, CommentToolbarAction[]> = {};\n\tfor (const a of actions) {\n\t\tconst g = TOOLBAR_META[a].group;\n\t\t(groups[g] ||= []).push(a);\n\t}\n\treturn Object.keys(groups)\n\t\t.map((k) => Number(k))\n\t\t.sort((a, b) => a - b)\n\t\t.map((k) => groups[k]);\n}\n\nfunction isEditorEmpty(editor: Editor | null): boolean {\n\tif (!editor) return true;\n\treturn editor.getText().trim().length === 0;\n}\n\nexport function CommentComposer({\n\tvalue,\n\tdefaultValue,\n\tonChange,\n\tonSubmit,\n\tonToolbarAction,\n\tplaceholder = \"Add comment\",\n\tsubmitLabel = \"Comment\",\n\tminHeight = \"4rem\",\n\ttoolbarActions = DEFAULT_ACTIONS,\n\tdisabled,\n\tisSubmitting,\n\tclassName,\n}: CommentComposerProps) {\n\tconst isControlled = value !== undefined;\n\t// Force re-render whenever the editor's internal state changes (for active-state styling on toolbar buttons).\n\tconst [, forceUpdate] = React.useReducer((x: number) => x + 1, 0);\n\n\tconst editor = useEditor({\n\t\textensions: [\n\t\t\tStarterKit.configure({\n\t\t\t\tcodeBlock: {HTMLAttributes: {class: \"wwc:rounded wwc:bg-muted wwc:p-3 wwc:font-mono wwc:text-xs\"}},\n\t\t\t\tblockquote: {\n\t\t\t\t\tHTMLAttributes: {class: \"wwc:border-l-2 wwc:border-border wwc:pl-3 wwc:italic wwc:text-muted-foreground\"},\n\t\t\t\t},\n\t\t\t\tbulletList: {HTMLAttributes: {class: \"wwc:list-disc wwc:pl-5\"}},\n\t\t\t\torderedList: {HTMLAttributes: {class: \"wwc:list-decimal wwc:pl-5\"}},\n\t\t\t}),\n\t\t\tUnderline,\n\t\t\tTextAlign.configure({types: [\"heading\", \"paragraph\"]}),\n\t\t\tTaskList.configure({HTMLAttributes: {class: \"wwc:flex wwc:flex-col wwc:gap-1 wwc:pl-1 wwc:list-none\"}}),\n\t\t\tTaskItem.configure({\n\t\t\t\tnested: true,\n\t\t\t\tHTMLAttributes: {class: \"wwc:flex wwc:items-start wwc:gap-2 [&>label>input]:wwc:mt-1\"},\n\t\t\t}),\n\t\t\tImage.configure({HTMLAttributes: {class: \"wwc:rounded wwc:max-w-full\"}}),\n\t\t\tPlaceholder.configure({placeholder}),\n\t\t],\n\t\tcontent: isControlled ? value || \"\" : defaultValue || \"\",\n\t\teditable: !disabled && !isSubmitting,\n\t\teditorProps: {\n\t\t\tattributes: {\n\t\t\t\tclass:\n\t\t\t\t\t\"wwc:min-h-[var(--wwc-cc-min-h)] wwc:w-full wwc:bg-transparent wwc:px-3 wwc:py-2.5 wwc:text-sm wwc:text-foreground wwc:outline-none [&_p.is-editor-empty:first-child]:wwc:text-muted-foreground [&_p.is-editor-empty:first-child]:wwc:before:content-[attr(data-placeholder)] [&_p.is-editor-empty:first-child]:wwc:before:float-left [&_p.is-editor-empty:first-child]:wwc:before:h-0 [&_p.is-editor-empty:first-child]:wwc:before:pointer-events-none\",\n\t\t\t},\n\t\t\thandleKeyDown(_view, event) {\n\t\t\t\tif ((event.metaKey || event.ctrlKey) && event.key === \"Enter\") {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\thandleSubmit();\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t\treturn false;\n\t\t\t},\n\t\t},\n\t\tonUpdate: ({editor}) => {\n\t\t\tonChange?.(editor.getHTML());\n\t\t},\n\t\tonSelectionUpdate: () => forceUpdate(),\n\t\tonTransaction: () => forceUpdate(),\n\t});\n\n\t// Sync external value changes into the editor (controlled mode).\n\tReact.useEffect(() => {\n\t\tif (!editor || !isControlled) return;\n\t\tconst current = editor.getHTML();\n\t\tif (value !== current && value !== undefined) {\n\t\t\teditor.commands.setContent(value, {emitUpdate: false});\n\t\t}\n\t}, [editor, isControlled, value]);\n\n\t// Sync editable toggle.\n\tReact.useEffect(() => {\n\t\tif (!editor) return;\n\t\teditor.setEditable(!disabled && !isSubmitting);\n\t}, [editor, disabled, isSubmitting]);\n\n\tconst handleSubmit = React.useCallback(() => {\n\t\tif (!editor || isEditorEmpty(editor) || disabled || isSubmitting) return;\n\t\tonSubmit?.(editor.getHTML());\n\t\tif (!isControlled) editor.commands.clearContent();\n\t}, [editor, disabled, isSubmitting, isControlled, onSubmit]);\n\n\tconst groups = React.useMemo(() => groupActions(toolbarActions), [toolbarActions]);\n\tconst canSubmit = !!editor && !isEditorEmpty(editor) && !disabled && !isSubmitting;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{[\"--wwc-cc-min-h\" as string]: minHeight}}\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:flex-col wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card wwc:focus-within:border-ring wwc:focus-within:ring-1 wwc:focus-within:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<EditorContent editor={editor} />\n\n\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-1 wwc:border-t wwc:border-border wwc:bg-muted/40 wwc:px-1.5 wwc:py-1\">\n\t\t\t\t{groups.map((group, gi) => (\n\t\t\t\t\t<React.Fragment key={gi}>\n\t\t\t\t\t\t{gi > 0 && <span aria-hidden=\"true\" className=\"wwc:mx-1 wwc:h-5 wwc:w-px wwc:bg-border\" />}\n\t\t\t\t\t\t{group.map((action) => {\n\t\t\t\t\t\t\tconst meta = TOOLBAR_META[action];\n\t\t\t\t\t\t\tconst Icon = meta.Icon;\n\t\t\t\t\t\t\tconst active = editor ? meta.isActive(editor) : false;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={action}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"wwc:h-7 wwc:w-7\",\n\t\t\t\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\t\t\t\t? \"wwc:bg-accent wwc:text-accent-foreground\"\n\t\t\t\t\t\t\t\t\t\t\t: \"wwc:text-muted-foreground wwc:hover:text-foreground\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\taria-label={meta.label}\n\t\t\t\t\t\t\t\t\taria-pressed={active}\n\t\t\t\t\t\t\t\t\ttitle={meta.label}\n\t\t\t\t\t\t\t\t\tdisabled={disabled || isSubmitting || !editor}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (!editor) return;\n\t\t\t\t\t\t\t\t\t\tmeta.apply(editor);\n\t\t\t\t\t\t\t\t\t\tonToolbarAction?.(action);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\n\t\t\t\t<div className=\"wwc:flex-1\" />\n\n\t\t\t\t<Button type=\"button\" size=\"sm\" className=\"wwc:h-7\" disabled={!canSubmit} onClick={handleSubmit}>\n\t\t\t\t\t{isSubmitting ? \"Posting...\" : submitLabel}\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/comment-thread.d.mts

@@ -0,0 +1,66 @@
+import * as React from "react";
+//#region src/comment-thread.d.ts
+export interface CommentAuthor {
+  id?: string;
+  name: string;
+  avatarUrl?: string;
+  initials?: string;
+}
+export type CommentBadgeTone = "default" | "muted" | "warning" | "success" | "info";
+export interface CommentBadge {
+  id: string;
+  icon?: React.ReactNode;
+  label: string;
+  tone?: CommentBadgeTone;
+}
+export interface CommentReaction {
+  id: string;
+  icon?: React.ReactNode;
+  label?: string;
+  count: number;
+  active?: boolean;
+}
+export interface CommentAttachment {
+  id: string;
+  type?: "image" | "file";
+  url?: string;
+  thumbnailUrl?: string;
+  name?: string;
+  width?: number;
+  height?: number;
+}
+export interface CommentMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  tone?: "default" | "destructive";
+  onSelect?: () => void;
+}
+export interface CommentItem {
+  id: string;
+  author: CommentAuthor;
+  timestamp: React.ReactNode;
+  body: React.ReactNode;
+  badges?: CommentBadge[];
+  attachments?: CommentAttachment[];
+  reactions?: CommentReaction[];
+  replies?: CommentItem[];
+  menu?: CommentMenuItem[];
+  onReact?: (reactionId: string) => void;
+  onAddReaction?: () => void;
+  onReply?: () => void;
+}
+export interface CommentProps {
+  comment: CommentItem;
+  depth?: number;
+}
+export declare function Comment({ comment, depth }: CommentProps): import("react/jsx-runtime").JSX.Element;
+export interface CommentThreadProps extends React.HTMLAttributes<HTMLDivElement> {
+  comments: CommentItem[];
+  composer?: React.ReactNode;
+  composerPosition?: "top" | "bottom";
+  emptyState?: React.ReactNode;
+}
+export declare function CommentThread({ comments, composer, composerPosition, emptyState, className, ...rest }: CommentThreadProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=comment-thread.d.mts.map

package/dist/comment-thread.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-thread.d.mts","names":[],"sources":["../src/comment-thread.tsx"],"mappings":";;iBASiB;EAChB;EACA;EACA;EACA;;YAGW;iBAEK;EAChB;EACA,OAAO,MAAM;EACb;EACA,OAAO;;iBAGS;EAChB;EACA,OAAO,MAAM;EACb;EACA;EACA;;iBAGgB;EAChB;EACA;EACA;EACA;EACA;EACA;EACA;;iBAGgB;EAChB;EACA;EACA,OAAO,MAAM;EACb;EACA;;iBAGgB;EAChB;EACA,QAAQ;EACR,WAAW,MAAM;EACjB,MAAM,MAAM;EACZ,SAAS;EACT,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,WAAW;EACX;EACA;;iBAmBgB;EAChB,SAAS;EACT;;wBAGe,UAAS,SAAS,SAAY,2CAAY,IAAA;iBA0KzC,2BAA2B,MAAM,eAAe;EAChE,UAAU;EACV,WAAW,MAAM;EACjB;EACA,aAAa,MAAM;;wBAGJ,gBACf,UACA,UACA,kBACA,YACA,cACG,QACD,iDAAkB,IAAA"}

package/dist/comment-thread.mjs

@@ -0,0 +1,180 @@
+import { Badge } from "./badge.mjs";
+import { Button } from "./button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.mjs";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { MoreHorizontal, SmilePlus } from "lucide-react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/comment-thread.tsx
+const badgeToneClass = {
+	default: "wwc:bg-muted wwc:text-foreground",
+	muted: "wwc:bg-muted wwc:text-muted-foreground",
+	warning: "wwc:bg-amber-50 wwc:text-amber-800",
+	success: "wwc:bg-emerald-50 wwc:text-emerald-700",
+	info: "wwc:bg-blue-50 wwc:text-blue-700"
+};
+function authorInitials(author) {
+	if (author.initials) return author.initials;
+	const parts = author.name.trim().split(/\s+/);
+	if (parts.length === 0) return "?";
+	if (parts.length === 1) return parts[0].slice(0, 1).toUpperCase();
+	return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+function Comment({ comment, depth = 0 }) {
+	const isReply = depth > 0;
+	const hasReplies = comment.replies !== void 0 && comment.replies.length > 0;
+	const avatarSize = isReply ? "wwc:h-6 wwc:w-6" : "wwc:h-8 wwc:w-8";
+	const avatarText = isReply ? "wwc:text-[11px]" : "wwc:text-xs";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:relative wwc:w-full",
+		children: [
+			hasReplies && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("wwc:absolute wwc:left-4 wwc:top-4 wwc:bottom-3 wwc:w-px wwc:bg-border", isReply && "wwc:left-3 wwc:top-3")
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:relative wwc:flex wwc:w-full wwc:gap-3",
+				children: [/* @__PURE__ */ jsxs(Avatar, {
+					className: cn(avatarSize, "wwc:z-10 wwc:shrink-0"),
+					children: [comment.author.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, {
+						src: comment.author.avatarUrl,
+						alt: comment.author.name
+					}), /* @__PURE__ */ jsx(AvatarFallback, {
+						className: cn(avatarText, "wwc:font-semibold"),
+						children: authorInitials(comment.author)
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col wwc:gap-1.5",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2",
+								children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:truncate wwc:text-sm wwc:font-semibold wwc:text-foreground",
+										children: comment.author.name
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "wwc:shrink-0 wwc:text-xs wwc:text-muted-foreground",
+										children: comment.timestamp
+									}),
+									comment.badges?.map((b) => /* @__PURE__ */ jsxs(Badge, {
+										variant: "secondary",
+										className: cn("wwc:gap-1 wwc:rounded-md wwc:px-2 wwc:py-0.5 wwc:text-[11px] wwc:font-medium", badgeToneClass[b.tone ?? "default"]),
+										children: [b.icon, b.label]
+									}, b.id))
+								]
+							}), comment.menu && comment.menu.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									icon: true,
+									className: "wwc:h-6 wwc:w-6",
+									"aria-label": "More",
+									children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+								})
+							}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+								align: "end",
+								children: comment.menu.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+									onSelect: () => item.onSelect?.(),
+									className: cn(item.tone === "destructive" && "wwc:text-destructive"),
+									children: [item.icon, item.label]
+								}, item.id))
+							})] })]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "wwc:text-sm wwc:text-foreground",
+							children: comment.body
+						}),
+						comment.attachments && comment.attachments.length > 0 && /* @__PURE__ */ jsx("div", {
+							className: "wwc:mt-1 wwc:flex wwc:flex-wrap wwc:gap-2",
+							children: comment.attachments.map((att) => /* @__PURE__ */ jsx(CommentAttachmentTile, { attachment: att }, att.id))
+						}),
+						(comment.reactions?.length || comment.onAddReaction || comment.onReply) && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:mt-1 wwc:flex wwc:items-center wwc:gap-1",
+							children: [
+								comment.reactions?.map((r) => /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: r.active ? "secondary" : "outline",
+									size: "sm",
+									className: "wwc:h-7 wwc:gap-1.5 wwc:rounded-md wwc:px-2 wwc:text-xs",
+									onClick: () => comment.onReact?.(r.id),
+									"aria-label": r.label ? `${r.label} reaction (${r.count})` : `${r.count} reactions`,
+									children: [r.icon, r.count]
+								}, r.id)),
+								comment.onAddReaction && /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									icon: true,
+									className: "wwc:h-7 wwc:w-7",
+									onClick: comment.onAddReaction,
+									"aria-label": "Add reaction",
+									children: /* @__PURE__ */ jsx(SmilePlus, {})
+								}),
+								comment.onReply && /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "wwc:h-7 wwc:px-2 wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+									onClick: comment.onReply,
+									children: "Reply"
+								})
+							]
+						})
+					]
+				})]
+			}),
+			hasReplies && /* @__PURE__ */ jsx("div", {
+				className: cn("wwc:mt-2 wwc:flex wwc:flex-col wwc:gap-4 wwc:pl-8", isReply ? "wwc:ml-3" : "wwc:ml-4"),
+				children: comment.replies.map((reply) => /* @__PURE__ */ jsx("div", {
+					className: "wwc:relative wwc:before:absolute wwc:before:-left-8 wwc:before:top-3 wwc:before:h-px wwc:before:w-8 wwc:before:bg-border",
+					children: /* @__PURE__ */ jsx(Comment, {
+						comment: reply,
+						depth: depth + 1
+					})
+				}, reply.id))
+			})
+		]
+	});
+}
+function CommentAttachmentTile({ attachment }) {
+	if ((attachment.type === "image" || attachment.thumbnailUrl !== void 0 && attachment.type === void 0) && attachment.thumbnailUrl) return /* @__PURE__ */ jsx("a", {
+		href: attachment.url ?? attachment.thumbnailUrl,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:bg-muted",
+		children: /* @__PURE__ */ jsx("img", {
+			src: attachment.thumbnailUrl,
+			alt: attachment.name ?? "attachment",
+			className: "wwc:max-h-48 wwc:w-auto wwc:object-cover",
+			width: attachment.width,
+			height: attachment.height
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": attachment.name ?? "attachment",
+		className: "wwc:flex wwc:h-28 wwc:w-44 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:border wwc:bg-muted wwc:text-xs wwc:text-muted-foreground",
+		children: attachment.name ?? "Attachment"
+	});
+}
+function CommentThread({ comments, composer, composerPosition = "bottom", emptyState, className, ...rest }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:w-full wwc:flex-col wwc:gap-4", className),
+		...rest,
+		children: [
+			composer && composerPosition === "top" && composer,
+			comments.length === 0 ? emptyState ?? /* @__PURE__ */ jsx("div", {
+				className: "wwc:py-8 wwc:text-center wwc:text-sm wwc:text-muted-foreground",
+				children: "No comments yet."
+			}) : comments.map((c) => /* @__PURE__ */ jsx(Comment, { comment: c }, c.id)),
+			composer && composerPosition === "bottom" && composer
+		]
+	});
+}
+//#endregion
+export { Comment, CommentThread };
+
+//# sourceMappingURL=comment-thread.mjs.map

package/dist/comment-thread.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-thread.mjs","names":[],"sources":["../src/comment-thread.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {MoreHorizontal, SmilePlus} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Avatar, AvatarFallback, AvatarImage} from \"./avatar\";\nimport {Badge} from \"./badge\";\nimport {Button} from \"./button\";\nimport {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from \"./dropdown-menu\";\n\nexport interface CommentAuthor {\n\tid?: string;\n\tname: string;\n\tavatarUrl?: string;\n\tinitials?: string;\n}\n\nexport type CommentBadgeTone = \"default\" | \"muted\" | \"warning\" | \"success\" | \"info\";\n\nexport interface CommentBadge {\n\tid: string;\n\ticon?: React.ReactNode;\n\tlabel: string;\n\ttone?: CommentBadgeTone;\n}\n\nexport interface CommentReaction {\n\tid: string;\n\ticon?: React.ReactNode;\n\tlabel?: string;\n\tcount: number;\n\tactive?: boolean;\n}\n\nexport interface CommentAttachment {\n\tid: string;\n\ttype?: \"image\" | \"file\";\n\turl?: string;\n\tthumbnailUrl?: string;\n\tname?: string;\n\twidth?: number;\n\theight?: number;\n}\n\nexport interface CommentMenuItem {\n\tid: string;\n\tlabel: string;\n\ticon?: React.ReactNode;\n\ttone?: \"default\" | \"destructive\";\n\tonSelect?: () => void;\n}\n\nexport interface CommentItem {\n\tid: string;\n\tauthor: CommentAuthor;\n\ttimestamp: React.ReactNode;\n\tbody: React.ReactNode;\n\tbadges?: CommentBadge[];\n\tattachments?: CommentAttachment[];\n\treactions?: CommentReaction[];\n\treplies?: CommentItem[];\n\tmenu?: CommentMenuItem[];\n\tonReact?: (reactionId: string) => void;\n\tonAddReaction?: () => void;\n\tonReply?: () => void;\n}\n\nconst badgeToneClass: Record<CommentBadgeTone, string> = {\n\tdefault: \"wwc:bg-muted wwc:text-foreground\",\n\tmuted: \"wwc:bg-muted wwc:text-muted-foreground\",\n\twarning: \"wwc:bg-amber-50 wwc:text-amber-800\",\n\tsuccess: \"wwc:bg-emerald-50 wwc:text-emerald-700\",\n\tinfo: \"wwc:bg-blue-50 wwc:text-blue-700\",\n};\n\nfunction authorInitials(author: CommentAuthor): string {\n\tif (author.initials) return author.initials;\n\tconst parts = author.name.trim().split(/\\s+/);\n\tif (parts.length === 0) return \"?\";\n\tif (parts.length === 1) return parts[0].slice(0, 1).toUpperCase();\n\treturn `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();\n}\n\nexport interface CommentProps {\n\tcomment: CommentItem;\n\tdepth?: number;\n}\n\nexport function Comment({comment, depth = 0}: CommentProps) {\n\tconst isReply = depth > 0;\n\tconst hasReplies = comment.replies !== undefined && comment.replies.length > 0;\n\tconst avatarSize = isReply ? \"wwc:h-6 wwc:w-6\" : \"wwc:h-8 wwc:w-8\";\n\tconst avatarText = isReply ? \"wwc:text-[11px]\" : \"wwc:text-xs\";\n\n\treturn (\n\t\t<div className=\"wwc:relative wwc:w-full\">\n\t\t\t{hasReplies && (\n\t\t\t\t<span\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:absolute wwc:left-4 wwc:top-4 wwc:bottom-3 wwc:w-px wwc:bg-border\",\n\t\t\t\t\t\tisReply && \"wwc:left-3 wwc:top-3\",\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<div className=\"wwc:relative wwc:flex wwc:w-full wwc:gap-3\">\n\t\t\t\t<Avatar className={cn(avatarSize, \"wwc:z-10 wwc:shrink-0\")}>\n\t\t\t\t\t{comment.author.avatarUrl && <AvatarImage src={comment.author.avatarUrl} alt={comment.author.name} />}\n\t\t\t\t\t<AvatarFallback className={cn(avatarText, \"wwc:font-semibold\")}>\n\t\t\t\t\t\t{authorInitials(comment.author)}\n\t\t\t\t\t</AvatarFallback>\n\t\t\t\t</Avatar>\n\n\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:flex-col wwc:gap-1.5\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2\">\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t<span className=\"wwc:truncate wwc:text-sm wwc:font-semibold wwc:text-foreground\">\n\t\t\t\t\t\t\t\t{comment.author.name}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span className=\"wwc:shrink-0 wwc:text-xs wwc:text-muted-foreground\">{comment.timestamp}</span>\n\t\t\t\t\t\t\t{comment.badges?.map((b) => (\n\t\t\t\t\t\t\t\t<Badge\n\t\t\t\t\t\t\t\t\tkey={b.id}\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"wwc:gap-1 wwc:rounded-md wwc:px-2 wwc:py-0.5 wwc:text-[11px] wwc:font-medium\",\n\t\t\t\t\t\t\t\t\t\tbadgeToneClass[b.tone ?? \"default\"],\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{b.icon}\n\t\t\t\t\t\t\t\t\t{b.label}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{comment.menu && comment.menu.length > 0 && (\n\t\t\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t\t\t\t<Button type=\"button\" variant=\"ghost\" icon className=\"wwc:h-6 wwc:w-6\" aria-label=\"More\">\n\t\t\t\t\t\t\t\t\t\t<MoreHorizontal />\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t\t\t<DropdownMenuContent align=\"end\">\n\t\t\t\t\t\t\t\t\t{comment.menu.map((item) => (\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\t\t\tonSelect={() => item.onSelect?.()}\n\t\t\t\t\t\t\t\t\t\t\tclassName={cn(item.tone === \"destructive\" && \"wwc:text-destructive\")}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t\t\t\t{item.label}\n\t\t\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<div className=\"wwc:text-sm wwc:text-foreground\">{comment.body}</div>\n\n\t\t\t\t\t{comment.attachments && comment.attachments.length > 0 && (\n\t\t\t\t\t\t<div className=\"wwc:mt-1 wwc:flex wwc:flex-wrap wwc:gap-2\">\n\t\t\t\t\t\t\t{comment.attachments.map((att) => (\n\t\t\t\t\t\t\t\t<CommentAttachmentTile key={att.id} attachment={att} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{(comment.reactions?.length || comment.onAddReaction || comment.onReply) && (\n\t\t\t\t\t\t<div className=\"wwc:mt-1 wwc:flex wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t\t{comment.reactions?.map((r) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={r.id}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant={r.active ? \"secondary\" : \"outline\"}\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-7 wwc:gap-1.5 wwc:rounded-md wwc:px-2 wwc:text-xs\"\n\t\t\t\t\t\t\t\t\tonClick={() => comment.onReact?.(r.id)}\n\t\t\t\t\t\t\t\t\taria-label={r.label ? `${r.label} reaction (${r.count})` : `${r.count} reactions`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{r.icon}\n\t\t\t\t\t\t\t\t\t{r.count}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t{comment.onAddReaction && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-7 wwc:w-7\"\n\t\t\t\t\t\t\t\t\tonClick={comment.onAddReaction}\n\t\t\t\t\t\t\t\t\taria-label=\"Add reaction\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<SmilePlus />\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{comment.onReply && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:h-7 wwc:px-2 wwc:text-xs wwc:font-medium wwc:text-muted-foreground\"\n\t\t\t\t\t\t\t\t\tonClick={comment.onReply}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tReply\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{hasReplies && (\n\t\t\t\t<div className={cn(\"wwc:mt-2 wwc:flex wwc:flex-col wwc:gap-4 wwc:pl-8\", isReply ? \"wwc:ml-3\" : \"wwc:ml-4\")}>\n\t\t\t\t\t{comment.replies!.map((reply) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={reply.id}\n\t\t\t\t\t\t\tclassName=\"wwc:relative wwc:before:absolute wwc:before:-left-8 wwc:before:top-3 wwc:before:h-px wwc:before:w-8 wwc:before:bg-border\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Comment comment={reply} depth={depth + 1} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction CommentAttachmentTile({attachment}: {attachment: CommentAttachment}) {\n\tconst isImage =\n\t\tattachment.type === \"image\" || (attachment.thumbnailUrl !== undefined && attachment.type === undefined);\n\tif (isImage && attachment.thumbnailUrl) {\n\t\treturn (\n\t\t\t<a\n\t\t\t\thref={attachment.url ?? attachment.thumbnailUrl}\n\t\t\t\ttarget=\"_blank\"\n\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\tclassName=\"wwc:overflow-hidden wwc:rounded-lg wwc:border wwc:bg-muted\"\n\t\t\t>\n\t\t\t\t<img\n\t\t\t\t\tsrc={attachment.thumbnailUrl}\n\t\t\t\t\talt={attachment.name ?? \"attachment\"}\n\t\t\t\t\tclassName=\"wwc:max-h-48 wwc:w-auto wwc:object-cover\"\n\t\t\t\t\twidth={attachment.width}\n\t\t\t\t\theight={attachment.height}\n\t\t\t\t/>\n\t\t\t</a>\n\t\t);\n\t}\n\treturn (\n\t\t<div\n\t\t\taria-label={attachment.name ?? \"attachment\"}\n\t\t\tclassName=\"wwc:flex wwc:h-28 wwc:w-44 wwc:items-center wwc:justify-center wwc:rounded-lg wwc:border wwc:bg-muted wwc:text-xs wwc:text-muted-foreground\"\n\t\t>\n\t\t\t{attachment.name ?? \"Attachment\"}\n\t\t</div>\n\t);\n}\n\nexport interface CommentThreadProps extends React.HTMLAttributes<HTMLDivElement> {\n\tcomments: CommentItem[];\n\tcomposer?: React.ReactNode;\n\tcomposerPosition?: \"top\" | \"bottom\";\n\temptyState?: React.ReactNode;\n}\n\nexport function CommentThread({\n\tcomments,\n\tcomposer,\n\tcomposerPosition = \"bottom\",\n\temptyState,\n\tclassName,\n\t...rest\n}: CommentThreadProps) {\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:w-full wwc:flex-col wwc:gap-4\", className)} {...rest}>\n\t\t\t{composer && composerPosition === \"top\" && composer}\n\t\t\t{comments.length === 0\n\t\t\t\t? (emptyState ?? (\n\t\t\t\t\t\t<div className=\"wwc:py-8 wwc:text-center wwc:text-sm wwc:text-muted-foreground\">No comments yet.</div>\n\t\t\t\t\t))\n\t\t\t\t: comments.map((c) => <Comment key={c.id} comment={c} />)}\n\t\t\t{composer && composerPosition === \"bottom\" && composer}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;AAkEA,MAAM,iBAAmD;CACxD,SAAS;CACT,OAAO;CACP,SAAS;CACT,SAAS;CACT,MAAM;AACP;AAEA,SAAS,eAAe,QAA+B;CACtD,IAAI,OAAO,UAAU,OAAO,OAAO;CACnC,MAAM,QAAQ,OAAO,KAAK,KAAK,CAAC,CAAC,MAAM,KAAK;CAC5C,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,OAAO,MAAM,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;CAChE,OAAO,GAAG,MAAM,EAAE,CAAC,KAAK,MAAM,MAAM,SAAS,EAAE,CAAC,KAAK,YAAY;AAClE;AAOA,SAAgB,QAAQ,EAAC,SAAS,QAAQ,KAAkB;CAC3D,MAAM,UAAU,QAAQ;CACxB,MAAM,aAAa,QAAQ,YAAY,KAAA,KAAa,QAAQ,QAAQ,SAAS;CAC7E,MAAM,aAAa,UAAU,oBAAoB;CACjD,MAAM,aAAa,UAAU,oBAAoB;CAEjD,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,cACA,oBAAC,QAAD;IACC,eAAY;IACZ,WAAW,GACV,yEACA,WAAW,sBACZ;GACA,CAAA;GAEF,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,qBAAC,QAAD;KAAQ,WAAW,GAAG,YAAY,uBAAuB;KAAzD,UAAA,CACE,QAAQ,OAAO,aAAa,oBAAC,aAAD;MAAa,KAAK,QAAQ,OAAO;MAAW,KAAK,QAAQ,OAAO;KAAO,CAAA,GACpG,oBAAC,gBAAD;MAAgB,WAAW,GAAG,YAAY,mBAAmB;MAC3D,UAAA,eAAe,QAAQ,MAAM;KACf,CAAA,CACT;IAER,CAAA,GAAA,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA;MACC,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACC,qBAAC,OAAD;QAAK,WAAU;QAAf,UAAA;SACC,oBAAC,QAAD;UAAM,WAAU;UACd,UAAA,QAAQ,OAAO;SACX,CAAA;SACN,oBAAC,QAAD;UAAM,WAAU;UAAsD,UAAA,QAAQ;SAAgB,CAAA;SAC7F,QAAQ,QAAQ,KAAK,MACrB,qBAAC,OAAD;UAEC,SAAQ;UACR,WAAW,GACV,gFACA,eAAe,EAAE,QAAQ,UAC1B;UAND,UAAA,CAQE,EAAE,MACF,EAAE,KACG;SATD,GAAA,EAAE,EASD,CACP;QACG;OACJ,CAAA,GAAA,QAAQ,QAAQ,QAAQ,KAAK,SAAS,KACtC,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,qBAAD;QAAqB,SAAA;QACpB,UAAA,oBAAC,QAAD;SAAQ,MAAK;SAAS,SAAQ;SAAQ,MAAA;SAAK,WAAU;SAAkB,cAAW;SACjF,UAAA,oBAAC,gBAAD,CAAiB,CAAA;QACV,CAAA;OACY,CAAA,GACrB,oBAAC,qBAAD;QAAqB,OAAM;QACzB,UAAA,QAAQ,KAAK,KAAK,SAClB,qBAAC,kBAAD;SAEC,gBAAgB,KAAK,WAAW;SAChC,WAAW,GAAG,KAAK,SAAS,iBAAiB,sBAAsB;SAHpE,UAAA,CAKE,KAAK,MACL,KAAK,KACW;QANZ,GAAA,KAAK,EAMO,CAClB;OACmB,CAAA,CACR,EAAA,CAAA,CAEX;;MAEL,oBAAC,OAAD;OAAK,WAAU;OAAmC,UAAA,QAAQ;MAAU,CAAA;MAEnE,QAAQ,eAAe,QAAQ,YAAY,SAAS,KACpD,oBAAC,OAAD;OAAK,WAAU;OACb,UAAA,QAAQ,YAAY,KAAK,QACzB,oBAAC,uBAAD,EAAoC,YAAY,IAAM,GAA1B,IAAI,EAAsB,CACtD;MACG,CAAA;OAGJ,QAAQ,WAAW,UAAU,QAAQ,iBAAiB,QAAQ,YAC/D,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA;QACE,QAAQ,WAAW,KAAK,MACxB,qBAAC,QAAD;SAEC,MAAK;SACL,SAAS,EAAE,SAAS,cAAc;SAClC,MAAK;SACL,WAAU;SACV,eAAe,QAAQ,UAAU,EAAE,EAAE;SACrC,cAAY,EAAE,QAAQ,GAAG,EAAE,MAAM,aAAa,EAAE,MAAM,KAAK,GAAG,EAAE,MAAM;SAPvE,UAAA,CASE,EAAE,MACF,EAAE,KACI;QAVF,GAAA,EAAE,EAUA,CACR;QACA,QAAQ,iBACR,oBAAC,QAAD;SACC,MAAK;SACL,SAAQ;SACR,MAAA;SACA,WAAU;SACV,SAAS,QAAQ;SACjB,cAAW;SAEX,UAAA,oBAAC,WAAD,CAAY,CAAA;QACL,CAAA;QAER,QAAQ,WACR,oBAAC,QAAD;SACC,MAAK;SACL,SAAQ;SACR,MAAK;SACL,WAAU;SACV,SAAS,QAAQ;SACjB,UAAA;QAEO,CAAA;OAEL;;KAEF;IACD,CAAA,CAAA;;GAEJ,cACA,oBAAC,OAAD;IAAK,WAAW,GAAG,qDAAqD,UAAU,aAAa,UAAU;IACvG,UAAA,QAAQ,QAAS,KAAK,UACtB,oBAAC,OAAD;KAEC,WAAU;KAEV,UAAA,oBAAC,SAAD;MAAS,SAAS;MAAO,OAAO,QAAQ;KAAI,CAAA;IACxC,GAJC,MAAM,EAIP,CACL;GACG,CAAA;EAEF;;AAEP;AAEA,SAAS,sBAAsB,EAAC,cAA8C;CAG7E,KADC,WAAW,SAAS,WAAY,WAAW,iBAAiB,KAAA,KAAa,WAAW,SAAS,KAAA,MAC/E,WAAW,cACzB,OACC,oBAAC,KAAD;EACC,MAAM,WAAW,OAAO,WAAW;EACnC,QAAO;EACP,KAAI;EACJ,WAAU;EAEV,UAAA,oBAAC,OAAD;GACC,KAAK,WAAW;GAChB,KAAK,WAAW,QAAQ;GACxB,WAAU;GACV,OAAO,WAAW;GAClB,QAAQ,WAAW;EACnB,CAAA;CACC,CAAA;CAGL,OACC,oBAAC,OAAD;EACC,cAAY,WAAW,QAAQ;EAC/B,WAAU;EAET,UAAA,WAAW,QAAQ;CAChB,CAAA;AAEP;AASA,SAAgB,cAAc,EAC7B,UACA,UACA,mBAAmB,UACnB,YACA,WACA,GAAG,QACmB;CACtB,OACC,qBAAC,OAAD;EAAK,WAAW,GAAG,8CAA8C,SAAS;EAAG,GAAI;EAAjF,UAAA;GACE,YAAY,qBAAqB,SAAS;GAC1C,SAAS,WAAW,IACjB,cACD,oBAAC,OAAD;IAAK,WAAU;IAAiE,UAAA;GAAqB,CAAA,IAErG,SAAS,KAAK,MAAM,oBAAC,SAAD,EAAoB,SAAS,EAAI,GAAnB,EAAE,EAAiB,CAAC;GACxD,YAAY,qBAAqB,YAAY;EAC1C;;AAEP"}

package/dist/compare-bars.d.mts

@@ -0,0 +1,29 @@
+import * as React from "react";
+//#region src/compare-bars.d.ts
+/** One source in the comparison (e.g. Approved / Planned, actual / baseline). */
+export interface CompareBarsSource {
+  /** Legend label, e.g. "Approved". */
+  label: string;
+  /** Percentage 0–100. */
+  value: number;
+}
+export interface CompareBarsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left / primary source, rendered dark — most commonly the actual / approved value. */
+  primary: CompareBarsSource;
+  /** Right / secondary source, rendered lighter — most commonly the planned / baseline value. */
+  secondary: CompareBarsSource;
+  /** Variance shown in the pill. Defaults to `primary.value - secondary.value`. */
+  variance?: number;
+  /** Density. `compact` (default) matches the ProgressComparison panel; `default` is a touch larger. */
+  size?: "compact" | "default";
+}
+/**
+ * The dual-bar comparison primitive: two hero percentages (primary vs secondary) with a variance pill
+ * between them, a two-item legend, and a pair of stacked progress bars. This is the presentational core
+ * shared by the `ProgressComparison` widget — use it directly when you just need the bars block without
+ * the surrounding card/stats/header.
+ */
+declare const CompareBars: React.ForwardRefExoticComponent<CompareBarsProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CompareBars };
+//# sourceMappingURL=compare-bars.d.mts.map

package/dist/compare-bars.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare-bars.d.mts","names":[],"sources":["../src/compare-bars.tsx"],"mappings":";;;iBAKiB;;EAEhB;;EAEA;;iBAGgB,yBAAyB,MAAM,eAAe;;EAE9D,SAAS;;EAET,WAAW;;EAEX;;EAEA;;;;;;;;cA8CK,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}