@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/command-bar/command-bar.d.ts

@@ -0,0 +1,37 @@
+import { PromptInputProps } from "../ai-prompt-input/ai-prompt-input.js";
+import "../ai-prompt-input/index.js";
+import { VariantProps } from "class-variance-authority";
+import { ReactNode } from "react";
+//#region src/components/command-bar/command-bar.d.ts
+declare const commandBarVariants: (props?: ({
+  shape?: "pill" | "rounded" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface CommandBarProps extends Omit<PromptInputProps, "onSubmit" | "children" | "busy">, VariantProps<typeof commandBarVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text. An uncontrolled bar then clears itself. */
+  onSend?: (value: string) => void;
+  /** A send is in flight: sending is blocked and the button becomes Stop. */
+  sending?: boolean;
+  onStop?: () => void;
+  /** Whether dictation is on. Omit `onDictatingChange` to hide the button. */
+  dictating?: boolean;
+  defaultDictating?: boolean;
+  onDictatingChange?: (dictating: boolean) => void;
+  placeholder?: string;
+  /** The field's accessible name. */
+  label?: string;
+  sendLabel?: string;
+  stopLabel?: string;
+  dictateLabel?: string;
+  /** Rows the field grows to before scrolling. */
+  maxRows?: number;
+  /** Slot before the field, e.g. an attach button. */
+  leading?: ReactNode;
+}
+/** A compact prompt bar: auto-growing field, dictate toggle and send. */
+declare function CommandBar({ className, shape, value: valueProp, defaultValue, onValueChange, onSend, sending, onStop, dictating: dictatingProp, defaultDictating, onDictatingChange, placeholder, label, sendLabel, stopLabel, dictateLabel, maxRows, leading, disabled, ...props }: CommandBarProps): import("react").JSX.Element;
+//#endregion
+export { CommandBar, CommandBarProps, commandBarVariants };
+//# sourceMappingURL=command-bar.d.ts.map

package/dist/components/command-bar/command-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.d.ts","names":[],"sources":["../../../src/components/command-bar/command-bar.tsx"],"mappings":";;;;;cA2BM,qBAAkB;;6CAQtB;UAEe,wBAEb,KAAK,qDACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;;EAEjB,UAAU;;EAEV;EACA;;EAEA;EACA;EACA,qBAAqB;EACrB;;EAEA;EACA;EACA;EACA;;EAEA;;EAEA,UAAU;;;iBAqBI,aACd,WACA,OACA,OAAO,WACP,cACA,eACA,QACA,SACA,QACA,WAAW,eACX,kBACA,mBACA,aACA,OACA,WACA,WACA,cACA,SACA,SACA,aACG,SACF,kCAAe,IAAA"}

package/dist/components/command-bar/command-bar.js

@@ -0,0 +1,91 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { PromptInput, PromptInputSubmit, PromptInputTextarea } from "../ai-prompt-input/ai-prompt-input.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useState } from "react";
+//#region src/components/command-bar/command-bar.tsx
+const commandBarVariants = cva("flex items-end gap-1 p-1.5", {
+	variants: { shape: {
+		pill: "rounded-[1.5rem]",
+		rounded: "rounded-xl"
+	} },
+	defaultVariants: { shape: "pill" }
+});
+function Mic() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM19 10v2a7 7 0 0 1-14 0v-2M12 19v3" })
+	});
+}
+/** A compact prompt bar: auto-growing field, dictate toggle and send. */
+function CommandBar({ className, shape, value: valueProp, defaultValue = "", onValueChange, onSend, sending = false, onStop, dictating: dictatingProp, defaultDictating = false, onDictatingChange, placeholder = "Ask anything…", label = "Message", sendLabel = "Send", stopLabel = "Stop", dictateLabel = "Dictate", maxRows = 6, leading, disabled = false, ...props }) {
+	const [inner, setInner] = useState(defaultValue);
+	const value = valueProp ?? inner;
+	const [innerDictating, setInnerDictating] = useState(defaultDictating);
+	const dictating = dictatingProp ?? innerDictating;
+	const empty = value.trim() === "";
+	function setValue(next) {
+		if (valueProp === void 0) setInner(next);
+		onValueChange?.(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		if (empty) return;
+		onSend?.(value.trim());
+		if (valueProp === void 0) setInner("");
+	}
+	return /* @__PURE__ */ jsxs(PromptInput, {
+		"data-slot": "command-bar",
+		busy: sending,
+		disabled,
+		onSubmit: handleSubmit,
+		className: cn(commandBarVariants({ shape }), className),
+		...props,
+		children: [
+			leading,
+			/* @__PURE__ */ jsx(PromptInputTextarea, {
+				"aria-label": label,
+				placeholder,
+				maxRows,
+				value,
+				onChange: (event) => {
+					setValue(event.target.value);
+				},
+				className: "min-h-9 flex-1 px-2.5 py-2 leading-5"
+			}),
+			onDictatingChange || dictatingProp !== void 0 ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": dictateLabel,
+				"aria-pressed": dictating,
+				disabled,
+				"data-slot": "command-bar-dictate",
+				className: cn("grid size-9 shrink-0 place-items-center rounded-full text-muted-foreground", "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:bg-accent hover:text-foreground aria-pressed:bg-destructive/12 aria-pressed:text-destructive", "disabled:pointer-events-none disabled:opacity-55", focusRing),
+				onClick: () => {
+					if (dictatingProp === void 0) setInnerDictating(!dictating);
+					onDictatingChange?.(!dictating);
+				},
+				children: /* @__PURE__ */ jsx(Mic, {})
+			}) : null,
+			/* @__PURE__ */ jsx(PromptInputSubmit, {
+				label: sendLabel,
+				stopLabel,
+				onStop,
+				disabled: disabled || !sending && empty,
+				className: "ms-0 size-9 rounded-full"
+			})
+		]
+	});
+}
+//#endregion
+export { CommandBar, commandBarVariants };
+
+//# sourceMappingURL=command-bar.js.map

package/dist/components/command-bar/command-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-bar.js","names":[],"sources":["../../../src/components/command-bar/command-bar.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Command bar; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useState, type FormEvent, type ReactNode } from \"react\";\n\nimport {\n  PromptInput,\n  PromptInputSubmit,\n  PromptInputTextarea,\n  type PromptInputProps,\n} from \"@/components/ai-prompt-input\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A single-row prompt bar: an auto-growing field, a dictate toggle and send.\n *\n * This is a compact composition of AI Prompt Input, not a second composer.\n * Everything that is easy to get wrong — growing to a ceiling, Enter to send\n * and Shift+Enter for a newline, never sending mid-IME-composition, the\n * send/stop control whose name follows its state — is PromptInput's own. This\n * adds only the layout (one pill row, controls aligned to the last line), a\n * controlled-or-not value that clears after sending, an empty-field guard, and\n * the dictate toggle (aria-pressed; the consumer owns the microphone).\n */\n\nconst commandBarVariants = cva(\"flex items-end gap-1 p-1.5\", {\n  variants: {\n    shape: {\n      pill: \"rounded-[1.5rem]\",\n      rounded: \"rounded-xl\",\n    },\n  },\n  defaultVariants: { shape: \"pill\" },\n});\n\nexport interface CommandBarProps\n  extends\n    Omit<PromptInputProps, \"onSubmit\" | \"children\" | \"busy\">,\n    VariantProps<typeof commandBarVariants> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Called with the trimmed text. An uncontrolled bar then clears itself. */\n  onSend?: (value: string) => void;\n  /** A send is in flight: sending is blocked and the button becomes Stop. */\n  sending?: boolean;\n  onStop?: () => void;\n  /** Whether dictation is on. Omit `onDictatingChange` to hide the button. */\n  dictating?: boolean;\n  defaultDictating?: boolean;\n  onDictatingChange?: (dictating: boolean) => void;\n  placeholder?: string;\n  /** The field's accessible name. */\n  label?: string;\n  sendLabel?: string;\n  stopLabel?: string;\n  dictateLabel?: string;\n  /** Rows the field grows to before scrolling. */\n  maxRows?: number;\n  /** Slot before the field, e.g. an attach button. */\n  leading?: ReactNode;\n}\n\nfunction Mic() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3ZM19 10v2a7 7 0 0 1-14 0v-2M12 19v3\" />\n    </svg>\n  );\n}\n\n/** A compact prompt bar: auto-growing field, dictate toggle and send. */\nexport function CommandBar({\n  className,\n  shape,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSend,\n  sending = false,\n  onStop,\n  dictating: dictatingProp,\n  defaultDictating = false,\n  onDictatingChange,\n  placeholder = \"Ask anything…\",\n  label = \"Message\",\n  sendLabel = \"Send\",\n  stopLabel = \"Stop\",\n  dictateLabel = \"Dictate\",\n  maxRows = 6,\n  leading,\n  disabled = false,\n  ...props\n}: CommandBarProps) {\n  const [inner, setInner] = useState(defaultValue);\n  const value = valueProp ?? inner;\n  const [innerDictating, setInnerDictating] = useState(defaultDictating);\n  const dictating = dictatingProp ?? innerDictating;\n  const empty = value.trim() === \"\";\n\n  function setValue(next: string) {\n    if (valueProp === undefined) setInner(next);\n    onValueChange?.(next);\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (empty) return;\n    onSend?.(value.trim());\n    if (valueProp === undefined) setInner(\"\");\n  }\n\n  return (\n    <PromptInput\n      data-slot=\"command-bar\"\n      busy={sending}\n      disabled={disabled}\n      onSubmit={handleSubmit}\n      className={cn(commandBarVariants({ shape }), className)}\n      {...props}\n    >\n      {leading}\n      <PromptInputTextarea\n        aria-label={label}\n        placeholder={placeholder}\n        maxRows={maxRows}\n        value={value}\n        onChange={(event) => {\n          setValue(event.target.value);\n        }}\n        className=\"min-h-9 flex-1 px-2.5 py-2 leading-5\"\n      />\n      {onDictatingChange || dictatingProp !== undefined ? (\n        <button\n          type=\"button\"\n          aria-label={dictateLabel}\n          aria-pressed={dictating}\n          disabled={disabled}\n          data-slot=\"command-bar-dictate\"\n          className={cn(\n            \"grid size-9 shrink-0 place-items-center rounded-full text-muted-foreground\",\n            \"transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n            \"hover:bg-accent hover:text-foreground aria-pressed:bg-destructive/12 aria-pressed:text-destructive\",\n            \"disabled:pointer-events-none disabled:opacity-55\",\n            focusRing,\n          )}\n          onClick={() => {\n            if (dictatingProp === undefined) setInnerDictating(!dictating);\n            onDictatingChange?.(!dictating);\n          }}\n        >\n          <Mic />\n        </button>\n      ) : null}\n      <PromptInputSubmit\n        label={sendLabel}\n        stopLabel={stopLabel}\n        onStop={onStop}\n        disabled={disabled || (!sending && empty)}\n        className=\"ms-0 size-9 rounded-full\"\n      />\n    </PromptInput>\n  );\n}\n\nexport { commandBarVariants };\n"],"mappings":";;;;;;;;AA2BA,MAAM,qBAAqB,IAAI,8BAA8B;CAC3D,UAAU,EACR,OAAO;EACL,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,OAAO,OAAO;AACnC,CAAC;AA8BD,SAAS,MAAM;CACb,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,eAAc;EACd,gBAAe;EACf,eAAY;EACZ,WAAU;EAEV,UAAA,oBAAC,QAAD,EAAM,GAAE,yFAA0F,CAAA;CAC/F,CAAA;AAET;;AAGA,SAAgB,WAAW,EACzB,WACA,OACA,OAAO,WACP,eAAe,IACf,eACA,QACA,UAAU,OACV,QACA,WAAW,eACX,mBAAmB,OACnB,mBACA,cAAc,iBACd,QAAQ,WACR,YAAY,QACZ,YAAY,QACZ,eAAe,WACf,UAAU,GACV,SACA,WAAW,OACX,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,YAAY,SAAS,YAAY;CAC/C,MAAM,QAAQ,aAAa;CAC3B,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,gBAAgB;CACrE,MAAM,YAAY,iBAAiB;CACnC,MAAM,QAAQ,MAAM,KAAK,MAAM;CAE/B,SAAS,SAAS,MAAc;EAC9B,IAAI,cAAc,KAAA,GAAW,SAAS,IAAI;EAC1C,gBAAgB,IAAI;CACtB;CAEA,SAAS,aAAa,OAAmC;EACvD,MAAM,eAAe;EACrB,IAAI,OAAO;EACX,SAAS,MAAM,KAAK,CAAC;EACrB,IAAI,cAAc,KAAA,GAAW,SAAS,EAAE;CAC1C;CAEA,OACE,qBAAC,aAAD;EACE,aAAU;EACV,MAAM;EACI;EACV,UAAU;EACV,WAAW,GAAG,mBAAmB,EAAE,MAAM,CAAC,GAAG,SAAS;EACtD,GAAI;EANN,UAAA;GAQG;GACD,oBAAC,qBAAD;IACE,cAAY;IACC;IACJ;IACF;IACP,WAAW,UAAU;KACnB,SAAS,MAAM,OAAO,KAAK;IAC7B;IACA,WAAU;GACX,CAAA;GACA,qBAAqB,kBAAkB,KAAA,IACtC,oBAAC,UAAD;IACE,MAAK;IACL,cAAY;IACZ,gBAAc;IACJ;IACV,aAAU;IACV,WAAW,GACT,8EACA,oGACA,sGACA,oDACA,SACF;IACA,eAAe;KACb,IAAI,kBAAkB,KAAA,GAAW,kBAAkB,CAAC,SAAS;KAC7D,oBAAoB,CAAC,SAAS;IAChC;IAEA,UAAA,oBAAC,KAAD,CAAM,CAAA;GACA,CAAA,IACN;GACJ,oBAAC,mBAAD;IACE,OAAO;IACI;IACH;IACR,UAAU,YAAa,CAAC,WAAW;IACnC,WAAU;GACX,CAAA;EACU;;AAEjB"}

package/dist/components/command-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { CommandBar, CommandBarProps, commandBarVariants } from "./command-bar.js";
+export { CommandBar, type CommandBarProps, commandBarVariants };

package/dist/components/command-bar/index.js

@@ -0,0 +1,2 @@
+import { CommandBar, commandBarVariants } from "./command-bar.js";
+export { CommandBar, commandBarVariants };

package/dist/components/command-bar/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/command-bar/meta.ts
+const meta = defineMeta({
+	name: "command-bar",
+	title: "Command Bar",
+	description: "A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.",
+	category: "ai",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["ai-prompt-input"],
+	files: ["command-bar.tsx"],
+	a11y: "Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, and the submit control renames itself to \"Stop\" while sending. The field is named by `label`. Send is disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/command-bar/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/command-bar/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"command-bar\",\n  title: \"Command Bar\",\n  description:\n    \"A compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"ai-prompt-input\"],\n  files: [\"command-bar.tsx\"],\n  a11y:\n    \"Inherits AI Prompt Input's behaviour: Enter sends, Shift+Enter adds a newline, never mid-IME-composition, \" +\n    'and the submit control renames itself to \"Stop\" while sending. The field is named by `label`. Send is ' +\n    \"disabled while the field is empty. Dictate is a toggle button (aria-pressed); the consumer owns the microphone.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,iBAAiB;CACxC,OAAO,CAAC,iBAAiB;CACzB,MACE;AAGJ,CAAC"}

package/dist/components/comment-bubble/comment-bubble.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/components/comment-bubble/comment-bubble.d.ts
+interface CommentBubbleAuthor {
+  name: string;
+  /** Avatar image URL. Initials are shown without one, or while it loads. */
+  avatarUrl?: string;
+}
+interface CommentBubbleComment {
+  id: string;
+  author: CommentBubbleAuthor;
+  message: string;
+  /** Pre-formatted, e.g. "Just now" or "2h". */
+  timestamp?: string;
+}
+interface CommentBubbleProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The thread. The first comment's author is the pin's avatar. */
+  comments: CommentBubbleComment[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The expanded bubble's width. Numbers are pixels. */
+  width?: number | string;
+  /** Shows a reply composer; called with the trimmed reply. */
+  onReply?: (message: string) => void;
+  /** The reply field's accessible name and placeholder. */
+  replyLabel?: string;
+}
+/** An avatar pin that expands into a comment thread. */
+declare function CommentBubble({ className, comments, open: openProp, defaultOpen, onOpenChange, width, onReply, replyLabel, ...props }: CommentBubbleProps): import("react").JSX.Element | null;
+//#endregion
+export { CommentBubble, CommentBubbleAuthor, CommentBubbleComment, CommentBubbleProps };
+//# sourceMappingURL=comment-bubble.d.ts.map

package/dist/components/comment-bubble/comment-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-bubble.d.ts","names":[],"sources":["../../../src/components/comment-bubble/comment-bubble.tsx"],"mappings":";;UA4BiB;EACf;;EAEA;;UAGe;EACf;EACA,QAAQ;EACR;;EAEA;;UAGe,2BAA2B,KAAK;;EAE/C,UAAU;EACV;EACA;EACA,gBAAgB;;EAEhB;;EAEA,WAAW;;EAEX;;;iBAwBc,gBACd,WACA,UACA,MAAM,UACN,aACA,cACA,OACA,SACA,eACG,SACF,qCAAkB,IAAA"}

package/dist/components/comment-bubble/comment-bubble.js

@@ -0,0 +1,174 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+//#region src/components/comment-bubble/comment-bubble.tsx
+const COLLAPSED = 32;
+function initials(name) {
+	return name.split(/\s+/).map((part) => part.charAt(0)).join("").slice(0, 2).toUpperCase();
+}
+function Face({ author }) {
+	return /* @__PURE__ */ jsxs(Avatar, {
+		size: "xs",
+		className: "size-6",
+		children: [author.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, {
+			src: author.avatarUrl,
+			alt: ""
+		}) : null, /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "text-[0.625rem]",
+			children: initials(author.name)
+		})]
+	});
+}
+/** An avatar pin that expands into a comment thread. */
+function CommentBubble({ className, comments, open: openProp, defaultOpen = false, onOpenChange, width = "11.25rem", onReply, replyLabel = "Reply", ...props }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+	const open = openProp ?? uncontrolled;
+	const [height, setHeight] = useState(null);
+	const bubbleRef = useRef(null);
+	const threadRef = useRef(null);
+	const triggerRef = useRef(null);
+	const replyRef = useRef(null);
+	const restoreFocus = useRef(false);
+	const threadId = useId();
+	const first = comments[0];
+	function setOpen(next, restore = false) {
+		restoreFocus.current = restore;
+		if (openProp === void 0) setUncontrolled(next);
+		onOpenChange?.(next);
+	}
+	useLayoutEffect(() => {
+		const element = threadRef.current;
+		if (!element) return;
+		const measure = () => setHeight(element.offsetHeight || null);
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		if (open) replyRef.current?.focus();
+		else if (restoreFocus.current) {
+			restoreFocus.current = false;
+			triggerRef.current?.focus();
+		}
+	}, [open]);
+	useEffect(() => {
+		if (!open) return;
+		const onPointerDown = (event) => {
+			if (!bubbleRef.current?.contains(event.target)) setOpen(false);
+		};
+		document.addEventListener("pointerdown", onPointerDown);
+		return () => document.removeEventListener("pointerdown", onPointerDown);
+	});
+	function handleKeyDown(event) {
+		if (event.key === "Escape" && open) {
+			event.preventDefault();
+			setOpen(false, true);
+		}
+	}
+	function handleReply(event) {
+		event.preventDefault();
+		const field = replyRef.current;
+		const message = field.value.trim();
+		if (!message) return;
+		onReply?.(message);
+		field.value = "";
+	}
+	if (!first) return null;
+	const state = open ? "open" : "closed";
+	const extra = comments.length - 1;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "comment-bubble",
+		"data-state": state,
+		className: cn("relative size-8", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: bubbleRef,
+			"data-slot": "comment-bubble-surface",
+			"data-state": state,
+			onKeyDown: handleKeyDown,
+			className: cn("absolute start-0 bottom-0 overflow-hidden rounded-2xl rounded-es-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border", "transition-[width,height] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "data-[state=closed]:delay-[var(--duration-instant)]"),
+			style: {
+				width: open ? width : COLLAPSED,
+				height: open ? height ?? "auto" : COLLAPSED
+			},
+			children: [/* @__PURE__ */ jsx("button", {
+				ref: triggerRef,
+				type: "button",
+				"data-slot": "comment-bubble-trigger",
+				"data-state": state,
+				"aria-expanded": open,
+				"aria-controls": threadId,
+				"aria-label": `Comment by ${first.author.name}${extra > 0 ? `, ${String(extra)} ${extra === 1 ? "reply" : "replies"}` : ""}`,
+				onClick: () => setOpen(!open),
+				className: cn("absolute start-1 top-1 z-10 rounded-full", "transition-[top,inset-inline-start] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "data-[state=open]:start-3 data-[state=open]:top-3", focusRing),
+				children: /* @__PURE__ */ jsx(Face, { author: first.author })
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: threadRef,
+				id: threadId,
+				role: "group",
+				"aria-label": `Comment thread by ${first.author.name}`,
+				"data-slot": "comment-bubble-thread",
+				"data-state": state,
+				inert: !open,
+				className: cn("absolute start-0 top-0 flex flex-col gap-2 py-3 ps-11 pe-4 text-[0.6875rem] leading-4 font-medium", "transition-[opacity,filter,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "data-[state=open]:delay-[var(--duration-fast)]", "data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:blur-[3px]"),
+				style: { width },
+				children: [/* @__PURE__ */ jsx("ol", {
+					className: "flex max-h-60 flex-col gap-2 overflow-y-auto",
+					children: comments.map((comment, index) => /* @__PURE__ */ jsxs("li", {
+						className: "flex gap-2",
+						children: [index > 0 ? /* @__PURE__ */ jsx("span", {
+							className: "-ms-8 shrink-0",
+							children: /* @__PURE__ */ jsx(Face, { author: comment.author })
+						}) : null, /* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-col gap-0.5",
+							children: [/* @__PURE__ */ jsxs("p", {
+								className: "flex flex-wrap gap-x-1",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "font-semibold text-foreground",
+									children: comment.author.name
+								}), comment.timestamp ? /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: comment.timestamp
+								}) : null]
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-foreground",
+								children: comment.message
+							})]
+						})]
+					}, comment.id))
+				}), onReply ? /* @__PURE__ */ jsxs("form", {
+					onSubmit: handleReply,
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx("input", {
+						ref: replyRef,
+						type: "text",
+						"aria-label": replyLabel,
+						placeholder: `${replyLabel}…`,
+						className: cn("min-w-0 flex-1 rounded-md bg-muted px-2 py-1 text-foreground placeholder:text-muted-foreground", focusRing)
+					}), /* @__PURE__ */ jsx("button", {
+						type: "submit",
+						"aria-label": "Send reply",
+						className: cn("flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground", focusRing),
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: 2.5,
+							"aria-hidden": "true",
+							className: "size-3",
+							children: /* @__PURE__ */ jsx("path", { d: "M12 19V5M5 12l7-7 7 7" })
+						})
+					})]
+				}) : null]
+			})]
+		})
+	});
+}
+//#endregion
+export { CommentBubble };
+
+//# sourceMappingURL=comment-bubble.js.map

package/dist/components/comment-bubble/comment-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"comment-bubble.js","names":[],"sources":["../../../src/components/comment-bubble/comment-bubble.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Figma Comment (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/avatar\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A canvas comment pin: an avatar in a speech-bubble corner that grows into\n * the thread (and, with `onReply`, a composer). The source sprang width and\n * height with motion; here the thread is measured and the bubble's size is a\n * CSS transition, with the text blurring in just after the bubble opens.\n *\n * The avatar is a disclosure button. Escape collapses the thread and returns\n * focus to it; a press outside collapses it too.\n */\n\nexport interface CommentBubbleAuthor {\n  name: string;\n  /** Avatar image URL. Initials are shown without one, or while it loads. */\n  avatarUrl?: string;\n}\n\nexport interface CommentBubbleComment {\n  id: string;\n  author: CommentBubbleAuthor;\n  message: string;\n  /** Pre-formatted, e.g. \"Just now\" or \"2h\". */\n  timestamp?: string;\n}\n\nexport interface CommentBubbleProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  /** The thread. The first comment's author is the pin's avatar. */\n  comments: CommentBubbleComment[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The expanded bubble's width. Numbers are pixels. */\n  width?: number | string;\n  /** Shows a reply composer; called with the trimmed reply. */\n  onReply?: (message: string) => void;\n  /** The reply field's accessible name and placeholder. */\n  replyLabel?: string;\n}\n\nconst COLLAPSED = 32;\n\nfunction initials(name: string) {\n  return name\n    .split(/\\s+/)\n    .map((part) => part.charAt(0))\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase();\n}\n\nfunction Face({ author }: { author: CommentBubbleAuthor }) {\n  return (\n    <Avatar size=\"xs\" className=\"size-6\">\n      {author.avatarUrl ? <AvatarImage src={author.avatarUrl} alt=\"\" /> : null}\n      <AvatarFallback className=\"text-[0.625rem]\">{initials(author.name)}</AvatarFallback>\n    </Avatar>\n  );\n}\n\n/** An avatar pin that expands into a comment thread. */\nexport function CommentBubble({\n  className,\n  comments,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  width = \"11.25rem\",\n  onReply,\n  replyLabel = \"Reply\",\n  ...props\n}: CommentBubbleProps) {\n  const [uncontrolled, setUncontrolled] = useState(defaultOpen);\n  const open = openProp ?? uncontrolled;\n  const [height, setHeight] = useState<number | null>(null);\n  const bubbleRef = useRef<HTMLDivElement>(null);\n  const threadRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const replyRef = useRef<HTMLInputElement>(null);\n  const restoreFocus = useRef(false);\n  const threadId = useId();\n  const first = comments[0];\n\n  function setOpen(next: boolean, restore = false) {\n    restoreFocus.current = restore;\n    if (openProp === undefined) setUncontrolled(next);\n    onOpenChange?.(next);\n  }\n\n  useLayoutEffect(() => {\n    const element = threadRef.current;\n    if (!element) return;\n    const measure = () => setHeight(element.offsetHeight || null);\n    measure();\n    const observer = new ResizeObserver(measure);\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      replyRef.current?.focus();\n    } else if (restoreFocus.current) {\n      restoreFocus.current = false;\n      triggerRef.current?.focus();\n    }\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (event: PointerEvent) => {\n      if (!bubbleRef.current?.contains(event.target as Node)) setOpen(false);\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  });\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (event.key === \"Escape\" && open) {\n      event.preventDefault();\n      setOpen(false, true);\n    }\n  }\n\n  function handleReply(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    const field = replyRef.current!;\n    const message = field.value.trim();\n    if (!message) return;\n    onReply?.(message);\n    field.value = \"\";\n  }\n\n  if (!first) return null;\n  const state = open ? \"open\" : \"closed\";\n  const extra = comments.length - 1;\n\n  return (\n    <div\n      data-slot=\"comment-bubble\"\n      data-state={state}\n      className={cn(\"relative size-8\", className)}\n      {...props}\n    >\n      {/* Escape bubbles up from the thread's controls; the surface itself is not a control. */}\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n      <div\n        ref={bubbleRef}\n        data-slot=\"comment-bubble-surface\"\n        data-state={state}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute start-0 bottom-0 overflow-hidden rounded-2xl rounded-es-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border\",\n          \"transition-[width,height] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          \"data-[state=closed]:delay-[var(--duration-instant)]\",\n        )}\n        style={{\n          width: open ? width : COLLAPSED,\n          height: open ? (height ?? \"auto\") : COLLAPSED,\n        }}\n      >\n        <button\n          ref={triggerRef}\n          type=\"button\"\n          data-slot=\"comment-bubble-trigger\"\n          data-state={state}\n          aria-expanded={open}\n          aria-controls={threadId}\n          aria-label={`Comment by ${first.author.name}${extra > 0 ? `, ${String(extra)} ${extra === 1 ? \"reply\" : \"replies\"}` : \"\"}`}\n          onClick={() => setOpen(!open)}\n          className={cn(\n            \"absolute start-1 top-1 z-10 rounded-full\",\n            \"transition-[top,inset-inline-start] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n            \"data-[state=open]:start-3 data-[state=open]:top-3\",\n            focusRing,\n          )}\n        >\n          <Face author={first.author} />\n        </button>\n        <div\n          ref={threadRef}\n          id={threadId}\n          role=\"group\"\n          aria-label={`Comment thread by ${first.author.name}`}\n          data-slot=\"comment-bubble-thread\"\n          data-state={state}\n          inert={!open}\n          className={cn(\n            \"absolute start-0 top-0 flex flex-col gap-2 py-3 ps-11 pe-4 text-[0.6875rem] leading-4 font-medium\",\n            \"transition-[opacity,filter,visibility] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            \"data-[state=open]:delay-[var(--duration-fast)]\",\n            \"data-[state=closed]:invisible data-[state=closed]:opacity-0 data-[state=closed]:blur-[3px]\",\n          )}\n          style={{ width }}\n        >\n          <ol className=\"flex max-h-60 flex-col gap-2 overflow-y-auto\">\n            {comments.map((comment, index) => (\n              <li key={comment.id} className=\"flex gap-2\">\n                {index > 0 ? (\n                  <span className=\"-ms-8 shrink-0\">\n                    <Face author={comment.author} />\n                  </span>\n                ) : null}\n                <div className=\"flex min-w-0 flex-col gap-0.5\">\n                  <p className=\"flex flex-wrap gap-x-1\">\n                    <span className=\"font-semibold text-foreground\">{comment.author.name}</span>\n                    {comment.timestamp ? (\n                      <span className=\"text-muted-foreground\">{comment.timestamp}</span>\n                    ) : null}\n                  </p>\n                  <p className=\"text-foreground\">{comment.message}</p>\n                </div>\n              </li>\n            ))}\n          </ol>\n          {onReply ? (\n            <form onSubmit={handleReply} className=\"flex items-center gap-1\">\n              <input\n                ref={replyRef}\n                type=\"text\"\n                aria-label={replyLabel}\n                placeholder={`${replyLabel}…`}\n                className={cn(\n                  \"min-w-0 flex-1 rounded-md bg-muted px-2 py-1 text-foreground placeholder:text-muted-foreground\",\n                  focusRing,\n                )}\n              />\n              <button\n                type=\"submit\"\n                aria-label=\"Send reply\"\n                className={cn(\n                  \"flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground\",\n                  focusRing,\n                )}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth={2.5}\n                  aria-hidden=\"true\"\n                  className=\"size-3\"\n                >\n                  <path d=\"M12 19V5M5 12l7-7 7 7\" />\n                </svg>\n              </button>\n            </form>\n          ) : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/comment-bubble/index.d.ts

@@ -0,0 +1,2 @@
+import { CommentBubble, CommentBubbleAuthor, CommentBubbleComment, CommentBubbleProps } from "./comment-bubble.js";
+export { CommentBubble, type CommentBubbleAuthor, type CommentBubbleComment, type CommentBubbleProps };

package/dist/components/comment-bubble/index.js

@@ -0,0 +1,2 @@
+import { CommentBubble } from "./comment-bubble.js";
+export { CommentBubble };

package/dist/components/comment-bubble/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/comment-bubble/meta.ts
+const meta = defineMeta({
+	name: "comment-bubble",
+	title: "Comment Bubble",
+	description: "A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.",
+	category: "display",
+	status: "beta",
+	dependencies: [],
+	registryDependencies: ["avatar"],
+	files: ["comment-bubble.tsx"],
+	a11y: "The avatar is a disclosure button (\"Comment by <name>, N replies\") with aria-expanded and aria-controls. The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/comment-bubble/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/comment-bubble/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"comment-bubble\",\n  title: \"Comment Bubble\",\n  description:\n    \"A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [],\n  registryDependencies: [\"avatar\"],\n  files: [\"comment-bubble.tsx\"],\n  a11y:\n    'The avatar is a disclosure button (\"Comment by <name>, N replies\") with aria-expanded and aria-controls. ' +\n    \"The thread is a labelled group and an ordered list; while collapsed it is invisible and inert. Opening moves \" +\n    \"focus to the reply field when there is one; Escape collapses the thread and returns focus to the avatar; a \" +\n    \"press outside collapses it. The reply field and send button are named. The grow and blur stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAIJ,CAAC"}

package/dist/components/context-menu/context-menu.d.ts

@@ -0,0 +1,49 @@
+import { ContextMenu } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/context-menu/context-menu.d.ts
+/**
+ * A menu of actions opened at the pointer by a secondary click or a long press.
+ *
+ * The parts and their props mirror DropdownMenu exactly, so a menu can move
+ * between the two by renaming its imports. It is never the only way to reach
+ * an action: a context menu is invisible until summoned, so what it offers
+ * should also live somewhere visible. Keyboard users open it with Shift+F10
+ * or the Menu key, which needs the trigger to be focusable.
+ *
+ * The source's spring is CSS: the surface pops from the pointer with a slight
+ * overshoot, and its items drop in with a 20ms stagger. Both are decoration
+ * and stop under reduced motion; closing uses the shared quick float-out.
+ */
+declare const ContextMenu$1: import("react").FC<ContextMenu.ContextMenuProps>;
+declare const ContextMenuTrigger: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuTriggerProps & import("react").RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: import("react").FC<ContextMenu.ContextMenuPortalProps>;
+declare const ContextMenuSub: import("react").FC<ContextMenu.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: import("react").ForwardRefExoticComponent<ContextMenu.ContextMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+type ContextMenuContentProps = ComponentPropsWithRef<typeof ContextMenu.Content>;
+declare function ContextMenuContent({ className, ...props }: ContextMenuContentProps): import("react").JSX.Element;
+interface ContextMenuItemProps extends ComponentPropsWithRef<typeof ContextMenu.Item> {
+  /** Styles the item as destructive. Pair with a label that says what is destroyed. */
+  variant?: "default" | "destructive";
+  /** Indents the item to align with items that have a leading indicator. */
+  inset?: boolean;
+}
+declare function ContextMenuItem({ className, variant, inset, ...props }: ContextMenuItemProps): import("react").JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, ...props }: ComponentPropsWithRef<typeof ContextMenu.CheckboxItem>): import("react").JSX.Element;
+declare function ContextMenuRadioItem({ className, children, ...props }: ComponentPropsWithRef<typeof ContextMenu.RadioItem>): import("react").JSX.Element;
+interface ContextMenuLabelProps extends ComponentPropsWithRef<typeof ContextMenu.Label> {
+  inset?: boolean;
+}
+declare function ContextMenuLabel({ className, inset, ...props }: ContextMenuLabelProps): import("react").JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: ComponentPropsWithRef<typeof ContextMenu.Separator>): import("react").JSX.Element;
+/** Keyboard hint. aria-hidden because the shortcut is decoration here — bind it
+ * for real at the application level. */
+declare function ContextMenuShortcut({ className, ...props }: ComponentPropsWithRef<"span">): import("react").JSX.Element;
+interface ContextMenuSubTriggerProps extends ComponentPropsWithRef<typeof ContextMenu.SubTrigger> {
+  inset?: boolean;
+}
+declare function ContextMenuSubTrigger({ className, inset, children, ...props }: ContextMenuSubTriggerProps): import("react").JSX.Element;
+declare function ContextMenuSubContent({ className, ...props }: ComponentPropsWithRef<typeof ContextMenu.SubContent>): import("react").JSX.Element;
+//#endregion
+export { ContextMenu$1 as ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuContentProps, ContextMenuGroup, ContextMenuItem, ContextMenuItemProps, ContextMenuLabel, ContextMenuLabelProps, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuSubTriggerProps, ContextMenuTrigger };
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/components/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","names":[],"sources":["../../../src/components/context-menu/context-menu.tsx"],"mappings":";;;;;;;;;;;;;;;;cAsBa,+BAAW,GAAA,YAAA;cACX,oCAAkB,0BAAA,YAAA,0CAAA,cAAA;cAClB,kCAAgB,0BAAA,YAAA,wCAAA,cAAA;cAChB,mCAAiB,GAAA,YAAA;cACjB,gCAAc,GAAA,YAAA;cACd,uCAAqB,0BAAA,YAAA,6CAAA,cAAA;KAgDtB,0BAA0B,6BAC7B,YAAqB;iBAGd,qBAAqB,cAAc,SAAS,0CAAuB,IAAA;UAelE,6BAA6B,6BACrC,YAAqB;;EAG5B;;EAEA;;iBAGc,kBACd,WACA,SACA,UACG,SACF,uCAAoB,IAAA;iBAyCP,0BACd,WACA,aACG,SACF,6BAA6B,YAAqB,gCAAa,IAAA;iBAalD,uBACd,WACA,aACG,SACF,6BAA6B,YAAqB,6BAAU,IAAA;UAa9C,8BAA8B,6BACtC,YAAqB;EAE5B;;iBAGc,mBAAmB,WAAW,UAAU,SAAS,wCAAqB,IAAA;iBActE,uBACd,cACG,SACF,6BAA6B,YAAqB,6BAAU,IAAA;;;iBAY/C,sBAAsB,cAAc,SAAS,gDAA6B,IAAA;UAWzE,mCAAmC,6BAC3C,YAAqB;EAE5B;;iBAGc,wBACd,WACA,OACA,aACG,SACF,6CAA0B,IAAA;iBA0Bb,wBACd,cACG,SACF,6BAA6B,YAAqB,8BAAW,IAAA"}