@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/tags-input/tags-input.js

@@ -0,0 +1,186 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+function normalizeTag(tag) {
+  return tag.trim();
+}
+function getNormalizedTags(tags) {
+  return tags.reduce(
+    (state, tag) => {
+      const normalizedTag = normalizeTag(tag);
+      if (normalizedTag.length > 0 && !state.seen.has(normalizedTag)) {
+        state.seen.add(normalizedTag);
+        state.tags.push(normalizedTag);
+      }
+      return state;
+    },
+    { seen: /* @__PURE__ */ new Set(), tags: [] }
+  ).tags;
+}
+function shouldAddTagFromKey(key) {
+  return key === "Enter" || key === ",";
+}
+function useTagsInputState({
+  defaultValue,
+  onValueChange,
+  value
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    () => getNormalizedTags(defaultValue)
+  );
+  const isControlled = value !== void 0;
+  const tags = React.useMemo(
+    () => getNormalizedTags(value ?? uncontrolledValue),
+    [uncontrolledValue, value]
+  );
+  const updateTags = React.useCallback(
+    (nextTags) => {
+      const normalizedTags = getNormalizedTags(nextTags);
+      if (!isControlled) {
+        setUncontrolledValue(normalizedTags);
+      }
+      onValueChange?.(normalizedTags);
+    },
+    [isControlled, onValueChange]
+  );
+  return { tags, updateTags };
+}
+function useTagsInputHandlers({
+  disabled,
+  inputValue,
+  onKeyDown,
+  setInputValue,
+  tags,
+  updateTags
+}) {
+  const removeTag = React.useCallback(
+    (tagToRemove) => {
+      updateTags(tags.filter((tag) => tag !== tagToRemove));
+    },
+    [tags, updateTags]
+  );
+  const commitTag = React.useCallback(() => {
+    const nextTag = normalizeTag(inputValue);
+    if (nextTag.length === 0 || tags.includes(nextTag)) {
+      setInputValue("");
+      return;
+    }
+    updateTags([...tags, nextTag]);
+    setInputValue("");
+  }, [inputValue, setInputValue, tags, updateTags]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      if (shouldAddTagFromKey(event.key)) {
+        event.preventDefault();
+        commitTag();
+        return;
+      }
+      if ((event.key === "Backspace" || event.key === "Delete") && inputValue.length === 0) {
+        const lastTag = tags.at(-1);
+        if (lastTag) {
+          event.preventDefault();
+          removeTag(lastTag);
+        }
+      }
+    },
+    [commitTag, disabled, inputValue.length, onKeyDown, removeTag, tags]
+  );
+  return { handleKeyDown, removeTag };
+}
+function TagList({ disabled, onRemove, tags }) {
+  return /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap items-center gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center gap-1 rounded-md border bg-muted px-2 py-1 text-sm text-foreground",
+      children: [
+        /* @__PURE__ */ jsx("span", { children: tag }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-label": `Remove ${tag}`,
+            className: "rounded-sm text-muted-foreground outline-none ring-offset-background transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            disabled,
+            onClick: (event) => {
+              event.stopPropagation();
+              onRemove(tag);
+            },
+            type: "button",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        )
+      ]
+    },
+    tag
+  )) });
+}
+const TagsInput = React.forwardRef(
+  ({
+    className,
+    defaultValue = [],
+    disabled = false,
+    onBlur,
+    onKeyDown,
+    onValueChange,
+    placeholder = "Add a tag",
+    value,
+    ...props
+  }, ref) => {
+    const [inputValue, setInputValue] = React.useState("");
+    const { tags, updateTags } = useTagsInputState({
+      defaultValue,
+      onValueChange,
+      value
+    });
+    const { handleKeyDown, removeTag } = useTagsInputHandlers({
+      disabled,
+      inputValue,
+      onKeyDown,
+      setInputValue,
+      tags,
+      updateTags
+    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-disabled": disabled || void 0,
+        className: cn(
+          "flex min-h-10 w-full flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+          disabled && "cursor-not-allowed opacity-50",
+          className
+        ),
+        "data-disabled": disabled ? "true" : void 0,
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(TagList, { disabled, onRemove: removeTag, tags }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              className: "min-w-[8rem] flex-1 border-0 bg-transparent p-0 text-sm placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed",
+              disabled,
+              onBlur,
+              onChange: (event) => {
+                setInputValue(event.target.value);
+              },
+              onKeyDown: handleKeyDown,
+              placeholder,
+              ref,
+              type: "text",
+              value: inputValue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TagsInput.displayName = "TagsInput";
+export {
+  TagsInput
+};

package/dist/components/terminal/terminal.js

@@ -2,14 +2,22 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, Copy, Terminal as TerminalIcon } from "lucide-react";
-import { Button } from "../button";
+import { Button } from "../button/button";
+function getCommandContents(lines) {
+  return lines.reduce((commands, line) => {
+    if (line.type === "command") {
+      commands.push(line.content);
+    }
+    return commands;
+  }, []);
+}
 function Terminal({
   copyable = true,
   lines,
   title = "Terminal"
 }) {
   const [copied, setCopied] = useState(false);
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);
@@ -20,35 +28,43 @@ function Terminal({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       copyable && commands.length > 0 ? /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          "aria-label": copied ? "Copied" : "Copy commands",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       ) : null
     ] })
@@ -68,7 +84,7 @@ function SimpleTerminal({
     }
     return { content: line, type: "output" };
   });
-  const commands = lines.filter((l) => l.type === "command").map((l) => l.content);
+  const commands = getCommandContents(lines);
   const handleCopy = async () => {
     await navigator.clipboard.writeText(commands.join("\n"));
     setCopied(true);
@@ -79,35 +95,43 @@ function SimpleTerminal({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-zinc-950 dark:bg-zinc-900 overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-zinc-900 dark:bg-zinc-800 border-b border-zinc-800", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(TerminalIcon, { className: "h-4 w-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx(TerminalIcon, { className: "size-4 text-zinc-400" }),
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-300", children: title })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-red-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-yellow-500" }),
-        /* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-green-500" })
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+        /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-        line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
-          /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
-        ] }),
-        line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
-        line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
-          "# ",
-          line.content
-        ] })
-      ] }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm space-y-1 overflow-x-auto", children: lines.map((line) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-start",
+          children: [
+            line.type === "command" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-green-400 mr-2 select-none", children: "$" }),
+              /* @__PURE__ */ jsx("span", { className: "text-zinc-100", children: line.content })
+            ] }),
+            line.type === "output" && /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: line.content }),
+            line.type === "comment" && /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 italic", children: [
+              "# ",
+              line.content
+            ] })
+          ]
+        },
+        `${line.type}-${line.content}`
+      )) }),
       commands.length > 0 && /* @__PURE__ */ jsx(
         Button,
         {
-          className: "absolute top-2 right-2 h-8 w-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
+          "aria-label": copied ? "Copied" : "Copy commands",
+          className: "absolute top-2 right-2 size-8 bg-zinc-800 hover:bg-zinc-700 text-zinc-300",
           onClick: handleCopy,
           size: "icon",
           variant: "ghost",
-          children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+          children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
         }
       )
     ] })

package/dist/components/theme-preset-provider/index.js

@@ -0,0 +1,4 @@
+import { ThemePresetProvider } from "./theme-preset-provider";
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-preset-provider/theme-preset-provider.js

@@ -0,0 +1,55 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import {
+  CUSTOM_THEME_NAME,
+  DEFAULT_THEME_PRESET,
+  isThemePresetName,
+  THEME_CUSTOM_CSS_STORAGE_KEY,
+  THEME_CUSTOM_STYLE_ID,
+  THEME_PRESET_STORAGE_KEY
+} from "../../lib/theme-presets";
+import { setThemePreset } from "../../lib/use-theme-preset";
+const FOUC_SCRIPT = `(function(){try{var v=localStorage.getItem(${JSON.stringify(
+  THEME_PRESET_STORAGE_KEY
+)});if(!v||v===${JSON.stringify(
+  DEFAULT_THEME_PRESET
+)})return;document.documentElement.setAttribute("data-theme",v);if(v===${JSON.stringify(
+  CUSTOM_THEME_NAME
+)}){var c=localStorage.getItem(${JSON.stringify(
+  THEME_CUSTOM_CSS_STORAGE_KEY
+)});if(c){var s=document.createElement("style");s.id=${JSON.stringify(
+  THEME_CUSTOM_STYLE_ID
+)};s.textContent=c;document.head.appendChild(s);}}}catch(e){}})();`;
+function ThemePresetProvider({
+  children,
+  defaultPreset
+}) {
+  useEffect(() => {
+    if (!defaultPreset || defaultPreset === DEFAULT_THEME_PRESET) {
+      return;
+    }
+    let stored = null;
+    try {
+      stored = window.localStorage.getItem(THEME_PRESET_STORAGE_KEY);
+    } catch {
+      stored = null;
+    }
+    if (!stored && isThemePresetName(defaultPreset)) {
+      setThemePreset(defaultPreset);
+    }
+  }, [defaultPreset]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "script",
+      {
+        dangerouslySetInnerHTML: { __html: FOUC_SCRIPT },
+        suppressHydrationWarning: true
+      }
+    ),
+    children
+  ] });
+}
+export {
+  ThemePresetProvider
+};

package/dist/components/theme-switcher/index.js

@@ -0,0 +1,4 @@
+import { ThemeSwitcher } from "./theme-switcher";
+export {
+  ThemeSwitcher
+};

package/dist/components/theme-switcher/theme-switcher.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useMounted } from "../../lib/use-mounted";
+import { useThemePreset } from "../../lib/use-theme-preset";
+import { cn } from "../../lib/utils";
+function ThemeSwitcher({ className }) {
+  const mounted = useMounted();
+  const { preset, presets, setPreset } = useThemePreset();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-label": "Theme preset",
+      className: cn("flex items-center gap-1.5", className),
+      role: "radiogroup",
+      children: presets.map((item) => {
+        const active = mounted && preset === item.name;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": active,
+            "aria-label": item.label,
+            className: cn(
+              "size-6 rounded-full border transition-transform hover:scale-110",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+              active ? "border-foreground ring-2 ring-ring ring-offset-2 ring-offset-background" : "border-border"
+            ),
+            onClick: () => {
+              setPreset(item.name);
+            },
+            role: "radio",
+            style: { backgroundColor: item.swatch },
+            title: item.label,
+            type: "button"
+          },
+          item.name
+        );
+      })
+    }
+  );
+}
+export {
+  ThemeSwitcher
+};

package/dist/components/theme-toggle/theme-toggle.js

@@ -20,7 +20,7 @@ function ThemeButton({
     Button,
     {
       "aria-label": ariaLabel,
-      className: "bg-background text-foreground border border-gray-300 dark:border-gray-600 hover:border-gray-400 dark:hover:border-gray-500 transition-colors",
+      className: "bg-background text-foreground border border-zinc-300 dark:border-zinc-600 hover:border-zinc-400 dark:hover:border-zinc-500 transition-colors",
       size: "icon",
       variant: "outline",
       ...props,
@@ -120,7 +120,7 @@ function ThemeToggle({ dict }) {
       DropdownMenuContent,
       {
         align: "end",
-        className: "bg-background border border-gray-300 dark:border-gray-600",
+        className: "bg-background border border-zinc-300 dark:border-zinc-600",
         onMouseEnter: () => {
           isHoveringOverMenuAreaReference.current = true;
           clearCloseTimer();

package/dist/components/thinking-block/thinking-block.js

@@ -30,10 +30,10 @@ function ThinkingBlock({
         onClick: toggleExpanded,
         type: "button",
         children: [
-          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3" }),
+          isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-3" }),
           /* @__PURE__ */ jsxs("span", { children: [
             "Thinking",
-            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "..." }) : null
+            isStreaming ? /* @__PURE__ */ jsx("span", { className: "ml-1 animate-pulse", children: "\u2026" }) : null
           ] })
         ]
       }
@@ -41,7 +41,7 @@ function ThinkingBlock({
     isExpanded ? /* @__PURE__ */ jsxs(
       "div",
       {
-        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l-2 border-muted-foreground/30 max-h-48 overflow-y-auto",
+        className: "mt-2 p-3 bg-muted/50 rounded text-xs text-muted-foreground whitespace-pre-wrap border-l border-muted-foreground/30 max-h-48 overflow-y-auto",
         id: contentId,
         children: [
           thinking,

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

@@ -0,0 +1,6 @@
+import {
+  ThreadBubble
+} from "./thread-bubble";
+export {
+  ThreadBubble
+};

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

@@ -0,0 +1,85 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No replies yet",
+  region: "Comment thread"
+};
+const Message = (props) => {
+  const { message } = props;
+  return /* @__PURE__ */ jsxs("li", { className: "space-y-0.5", "data-thread-bubble-message": message.id, children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex items-baseline justify-between gap-2 text-[10px]", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "font-semibold",
+          "data-thread-bubble-author": true,
+          style: message.authorColor ? { color: message.authorColor } : void 0,
+          children: message.author
+        }
+      ),
+      message.ts ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", "data-thread-bubble-ts": true, children: message.ts }) : null
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-xs text-foreground", "data-thread-bubble-body": true, children: message.body })
+  ] });
+};
+const ThreadBubble = forwardRef(
+  (props, ref) => {
+    const { className, footer, labels, messages, onResolve, title, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const handleResolve = () => {
+      onResolve?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-72 flex-col gap-2 rounded-lg border border-border bg-background p-3 text-foreground shadow-md",
+          className
+        ),
+        "data-thread-bubble": true,
+        ref,
+        ...rest,
+        children: [
+          title || onResolve ? /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2 text-[11px] uppercase tracking-wide text-muted-foreground", children: [
+            title ? /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", "data-thread-bubble-title": true, children: title }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+            onResolve ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "rounded-full border border-border px-2 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "data-thread-bubble-resolve": true,
+                onClick: handleResolve,
+                type: "button",
+                children: "Resolve"
+              }
+            ) : null
+          ] }) : null,
+          messages.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "px-1 py-2 text-center text-[11px] text-muted-foreground",
+              "data-thread-bubble-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx("ul", { className: "space-y-2 overflow-y-auto", "data-thread-bubble-list": true, children: messages.map((message) => /* @__PURE__ */ jsx(Message, { message }, message.id)) }),
+          footer ? /* @__PURE__ */ jsx(
+            "footer",
+            {
+              className: "border-t border-border pt-2",
+              "data-thread-bubble-footer": true,
+              children: footer
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ThreadBubble.displayName = "ThreadBubble";
+export {
+  ThreadBubble
+};

package/dist/components/threshold-ring/index.js

@@ -0,0 +1,6 @@
+import {
+  ThresholdRing
+} from "./threshold-ring";
+export {
+  ThresholdRing
+};