@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/content-intro/content-intro.js

@@ -1,50 +1,54 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect } from "react";
+import { memo, useEffect, useRef } from "react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 const DEFAULT_LABELS = {
   continueLabel: "Continue Tutorial",
   startLabel: "Start Tutorial",
   tableOfContentsLabel: "Table of Contents"
 };
+const EMPTY_CONTENT_INTRO_LABELS = {};
 function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
   isLoading = false,
-  labels = {},
+  labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
   onStart,
   renderIntroContent,
   sections,
-  title
+  title,
+  titleAs: TitleHeading = "h2",
+  tocLabelAs: TocHeading = "h3"
 }) {
   const mergedLabels = { ...DEFAULT_LABELS, ...labels };
   const hasProgress = completedSections.size > 0;
-  const handleKeyDown = useCallback(
-    (event) => {
+  const onStartRef = useRef(onStart);
+  useEffect(() => {
+    onStartRef.current = onStart;
+  }, [onStart]);
+  useEffect(() => {
+    const onDocumentKeyDown = (event) => {
       if (event.key === "Enter") {
         event.preventDefault();
-        onStart();
+        onStartRef.current();
       }
-    },
-    [onStart]
-  );
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyDown);
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("keydown", onDocumentKeyDown);
     };
-  }, [handleKeyDown]);
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in-0 duration-500 pb-24", children: [
       /* @__PURE__ */ jsxs("section", { className: "py-6", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+        /* @__PURE__ */ jsx(TitleHeading, { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
         /* @__PURE__ */ jsx("div", { className: cn("max-w-none", "[&_h2:first-of-type]:hidden"), children: renderIntroContent() })
       ] }),
       /* @__PURE__ */ jsxs("section", { className: "mt-8 py-6 border-t border-border", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
+        /* @__PURE__ */ jsx(TocHeading, { className: "text-lg font-semibold mb-4", children: mergedLabels.tableOfContentsLabel }),
         /* @__PURE__ */ jsx("ol", { className: "space-y-2", children: sections.map((section, index) => {
           const isCompleted = !isLoading && completedSections.has(section.id);
           return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
@@ -60,7 +64,7 @@ function ContentIntroImpl({
                   "span",
                   {
                     className: cn(
-                      "flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
+                      "flex-shrink-0 size-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
                       isLoading && "animate-pulse bg-muted",
                       !isLoading && isCompleted && "bg-foreground text-background",
                       !isLoading && !isCompleted && "bg-muted"
@@ -68,7 +72,7 @@ function ContentIntroImpl({
                     children: isCompleted ? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-3 w-3",
+                        className: "size-3",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -97,12 +101,12 @@ function ContentIntroImpl({
                 )
               ]
             }
-          ) }, `${section.id}-${index}`);
+          ) }, section.id);
         }) })
       ] }),
       additionalContent
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: hasProgress ? `${completedSections.size}/${sections.length} completed` : `${sections.length} sections \xB7 ${estimatedTime}` }),
       /* @__PURE__ */ jsxs(
         Button,
@@ -114,7 +118,7 @@ function ContentIntroImpl({
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-5 w-5",
+                className: "size-5",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

package/dist/components/context-lens/context-lens.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Context lens"
+};
+const clamp01 = (value) => {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const safeRadius = (value) => value < 0 ? 0 : value;
+const ContextLens = forwardRef(
+  (props, ref) => {
+    const { className, focus, labels, opacity = 0.55, ...rest } = props;
+    const maskId = useId();
+    if (!focus) {
+      return null;
+    }
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const inner = safeRadius(focus.inner);
+    const outer = safeRadius(Math.max(focus.outer, inner));
+    const fillOpacity = clamp01(opacity);
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": "true",
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute inset-0 z-20 h-full w-full",
+          className
+        ),
+        "data-context-lens": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+            "radialGradient",
+            {
+              cx: focus.cx,
+              cy: focus.cy,
+              "data-context-lens-gradient": true,
+              gradientUnits: "userSpaceOnUse",
+              id: maskId,
+              r: outer === 0 ? 1 : outer,
+              children: [
+                /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "black", stopOpacity: 0 }),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: outer === 0 ? "100%" : `${inner / outer * 100}%`,
+                    stopColor: "black",
+                    stopOpacity: 0
+                  }
+                ),
+                /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "black", stopOpacity: 1 })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-context-lens-dim": true,
+              fill: "black",
+              fillOpacity,
+              height: "100%",
+              mask: `url(#${maskId}-mask)`,
+              width: "100%",
+              x: 0,
+              y: 0
+            }
+          ),
+          /* @__PURE__ */ jsxs("mask", { id: `${maskId}-mask`, children: [
+            /* @__PURE__ */ jsx("rect", { fill: "white", height: "100%", width: "100%", x: 0, y: 0 }),
+            /* @__PURE__ */ jsx(
+              "circle",
+              {
+                cx: focus.cx,
+                cy: focus.cy,
+                fill: `url(#${maskId})`,
+                r: outer
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+ContextLens.displayName = "ContextLens";
+export {
+  ContextLens
+};

package/dist/components/context-lens/index.js

@@ -0,0 +1,6 @@
+import {
+  ContextLens
+} from "./context-lens";
+export {
+  ContextLens
+};

package/dist/components/context-menu/context-menu.js

@@ -22,7 +22,7 @@ const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref)
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-m-1 h-px bg-border", className),
     ref,
     ...props
   }

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

@@ -0,0 +1,348 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ArrowDown, RefreshCw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { ThinkingBlock } from "../thinking-block/thinking-block";
+const ConversationThreadContext = createContext(null);
+function useConversationThreadContext() {
+  const ctx = useContext(ConversationThreadContext);
+  if (!ctx) {
+    throw new Error(
+      "ConversationThread compound components must be used within <ConversationThread>"
+    );
+  }
+  return ctx;
+}
+function MessageActions({ messageId }) {
+  const { onFeedback, onRetry } = useConversationThreadContext();
+  return /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-1", children: [
+    onRetry ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": "Retry message",
+        className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        onClick: () => {
+          onRetry(messageId);
+        },
+        type: "button",
+        children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3" })
+      }
+    ) : null,
+    onFeedback ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": "Positive feedback",
+          className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          onClick: () => {
+            onFeedback(messageId, "positive");
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(ThumbsUp, { className: "size-3" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          "aria-label": "Negative feedback",
+          className: "rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+          onClick: () => {
+            onFeedback(messageId, "negative");
+          },
+          type: "button",
+          children: /* @__PURE__ */ jsx(ThumbsDown, { className: "size-3" })
+        }
+      )
+    ] }) : null
+  ] });
+}
+function MessageItem({ message }) {
+  const isUser = message.role === "user";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mb-4 flex gap-3",
+        isUser ? "justify-end" : "justify-start"
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "max-w-[80%] rounded-2xl px-4 py-3 text-sm",
+            isUser ? "rounded-br-sm bg-primary text-primary-foreground" : "rounded-bl-sm bg-muted text-foreground"
+          ),
+          children: [
+            !isUser && message.thinking ? /* @__PURE__ */ jsx(
+              ThinkingBlock,
+              {
+                isStreaming: message.isStreaming,
+                thinking: message.thinking
+              }
+            ) : null,
+            message.toolCalls && message.toolCalls.length > 0 ? /* @__PURE__ */ jsx(
+              "ul",
+              {
+                "aria-label": "Tool calls",
+                className: "mb-2 flex flex-col gap-1 text-xs text-muted-foreground",
+                children: message.toolCalls.map((toolCall) => /* @__PURE__ */ jsx("li", { className: "font-mono", children: toolCall.name }, toolCall.id))
+              }
+            ) : null,
+            /* @__PURE__ */ jsx("p", { className: "whitespace-pre-wrap leading-relaxed", children: message.content }),
+            isUser ? null : /* @__PURE__ */ jsx(MessageActions, { messageId: message.id })
+          ]
+        }
+      )
+    }
+  );
+}
+function useConversationScroll(messages, isStreaming) {
+  const scrollContainerRef = useRef(null);
+  const messagesEndRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const scrollToBottom = useCallback(() => {
+    const element = messagesEndRef.current;
+    if (element && typeof element.scrollIntoView === "function") {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  }, []);
+  const scrollToBottomInstant = useCallback(() => {
+    const element = messagesEndRef.current;
+    if (element && typeof element.scrollIntoView === "function") {
+      element.scrollIntoView({ behavior: "instant" });
+    }
+  }, []);
+  const handleScroll = useCallback(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const { clientHeight, scrollHeight, scrollTop } = container;
+    const nearBottom = scrollHeight - scrollTop - clientHeight <= 100;
+    isAtBottomRef.current = nearBottom;
+    setIsAtBottom(nearBottom);
+  }, []);
+  useEffect(() => {
+    if (!isAtBottomRef.current) return;
+    scrollToBottomInstant();
+  }, [messages, scrollToBottomInstant]);
+  useEffect(() => {
+    if (!isStreaming || !isAtBottomRef.current) return;
+    scrollToBottomInstant();
+  }, [isStreaming, scrollToBottomInstant]);
+  return {
+    handleScroll,
+    isAtBottom,
+    messagesEndRef,
+    scrollContainerRef,
+    scrollToBottom
+  };
+}
+const ConversationThread = forwardRef(
+  ({
+    children,
+    className,
+    isStreaming = false,
+    messages,
+    onFeedback,
+    onRetry,
+    onSend
+  }, reference) => {
+    const {
+      handleScroll,
+      isAtBottom,
+      messagesEndRef,
+      scrollContainerRef,
+      scrollToBottom
+    } = useConversationScroll(messages, isStreaming);
+    const contextValue = useMemo(
+      () => ({
+        handleScroll,
+        isAtBottom,
+        isStreaming,
+        messages,
+        messagesEndRef,
+        onFeedback,
+        onRetry,
+        onSend,
+        scrollContainerRef,
+        scrollToBottom
+      }),
+      [
+        handleScroll,
+        isAtBottom,
+        isStreaming,
+        messages,
+        messagesEndRef,
+        onFeedback,
+        onRetry,
+        onSend,
+        scrollContainerRef,
+        scrollToBottom
+      ]
+    );
+    return /* @__PURE__ */ jsx(ConversationThreadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex h-full flex-col overflow-hidden", className),
+        ref: reference,
+        children
+      }
+    ) });
+  }
+);
+ConversationThread.displayName = "ConversationThread";
+const ConversationHeader = forwardRef(({ children, className }, reference) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex shrink-0 items-center border-b px-4 py-3", className),
+      ref: reference,
+      children
+    }
+  );
+});
+ConversationHeader.displayName = "ConversationHeader";
+const ConversationTitle = forwardRef(({ children, className }, reference) => {
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      className: cn("text-sm font-semibold leading-none", className),
+      ref: reference,
+      children
+    }
+  );
+});
+ConversationTitle.displayName = "ConversationTitle";
+const ConversationMessages = forwardRef(({ children, className }, reference) => {
+  const { handleScroll, messages, messagesEndRef, scrollContainerRef } = useConversationThreadContext();
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-0 flex-1", className), ref: reference, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": "Conversation messages",
+        "aria-live": "polite",
+        className: "absolute inset-0 overflow-y-auto",
+        onScroll: handleScroll,
+        ref: scrollContainerRef,
+        role: "log",
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-4", children: [
+          messages.map((message) => /* @__PURE__ */ jsx(MessageItem, { message }, message.id)),
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", ref: messagesEndRef })
+        ] })
+      }
+    ),
+    children
+  ] });
+});
+ConversationMessages.displayName = "ConversationMessages";
+const ConversationEmpty = forwardRef(({ children, className }, reference) => {
+  const { messages } = useConversationThreadContext();
+  if (messages.length > 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-4 p-8",
+        className
+      ),
+      ref: reference,
+      children: /* @__PURE__ */ jsx("div", { className: "pointer-events-auto flex flex-col items-center gap-4", children })
+    }
+  );
+});
+ConversationEmpty.displayName = "ConversationEmpty";
+const ConversationSuggestions = forwardRef(({ className, suggestions = [] }, reference) => {
+  const { onSend } = useConversationThreadContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap justify-center gap-2", className),
+      ref: reference,
+      children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "rounded-full border bg-background px-4 py-2 text-sm transition-colors hover:bg-muted",
+          onClick: () => onSend?.(suggestion),
+          type: "button",
+          children: suggestion
+        },
+        suggestion
+      ))
+    }
+  );
+});
+ConversationSuggestions.displayName = "ConversationSuggestions";
+const ConversationScrollButton = forwardRef(({ className }, reference) => {
+  const { isAtBottom, scrollToBottom } = useConversationThreadContext();
+  if (isAtBottom) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": "Scroll to bottom",
+      className: cn(
+        "absolute bottom-4 right-4 flex size-8 items-center justify-center rounded-full border bg-background shadow-md transition-colors hover:bg-muted",
+        className
+      ),
+      onClick: scrollToBottom,
+      ref: reference,
+      type: "button",
+      children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+    }
+  );
+});
+ConversationScrollButton.displayName = "ConversationScrollButton";
+const ConversationLoading = forwardRef(({ className }, reference) => {
+  const { isStreaming, messages } = useConversationThreadContext();
+  const lastMessage = messages.at(-1);
+  if (!isStreaming || lastMessage?.role !== "assistant") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Assistant is typing",
+      className: cn(
+        "absolute bottom-4 left-4 flex items-center gap-1",
+        className
+      ),
+      ref: reference,
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
+            style: { animationDelay: "-0.3s" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "size-2 animate-pulse rounded-full bg-muted-foreground",
+            style: { animationDelay: "-0.15s" }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "size-2 animate-pulse rounded-full bg-muted-foreground" })
+      ]
+    }
+  );
+});
+ConversationLoading.displayName = "ConversationLoading";
+export {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+};

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

@@ -0,0 +1,20 @@
+import {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+} from "./conversation-thread";
+export {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+};

package/dist/components/cookie-consent/cookie-consent.js

@@ -160,7 +160,7 @@ const CookieConsent = forwardRef(
               className: "absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground",
               onClick: handleClose,
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           ) : null
         ]