@vllnt/ui 0.2.1-canary.9e6a7be → 0.2.1-canary.ab2c69a

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";
+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: "h-3 w-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: "h-3 w-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: "h-3 w-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 h-8 w-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: "h-4 w-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: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
+            style: { animationDelay: "-0.3s" }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
+            style: { animationDelay: "-0.15s" }
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 animate-bounce 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/index.js

@@ -306,6 +306,9 @@ import {
   ChatDockSection
 } from "./chat-dock-section";
 import { GlassPanel } from "./glass-panel";
+import {
+  InfinitePlane
+} from "./infinite-plane";
 import { LeftRail } from "./left-rail";
 import {
   MiniMapPanel
@@ -323,6 +326,12 @@ import { Sidebar } from "./sidebar";
 import { SidebarProvider, useSidebar } from "./sidebar-provider";
 import { TableOfContents } from "./table-of-contents";
 import { TopBar } from "./top-bar";
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+import {
+  WorldBreadcrumbs
+} from "./world-breadcrumbs";
 import { ZoomHUD } from "./zoom-hud";
 import {
   ActivityLog
@@ -539,6 +548,25 @@ import {
   ObjectCard
 } from "./object-card";
 import { ObjectHandle } from "./object-handle";
+import {
+  PresenceStack
+} from "./presence-stack";
+import {
+  SelectionPresence
+} from "./selection-presence";
+import {
+  ThreadBubble
+} from "./thread-bubble";
+import {
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle
+} from "./conversation-thread";
 import { InlineInput } from "./inline-input";
 import {
   ModelSelector
@@ -644,6 +672,14 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  ConversationEmpty,
+  ConversationHeader,
+  ConversationLoading,
+  ConversationMessages,
+  ConversationScrollButton,
+  ConversationSuggestions,
+  ConversationThread,
+  ConversationTitle,
   CookieConsent,
   CountdownTimer,
   CreditBadge,
@@ -719,6 +755,7 @@ export {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  InfinitePlane,
   InlineInput,
   Input,
   InputOTP,
@@ -780,6 +817,7 @@ export {
   PopoverContent,
   PopoverTrigger,
   Prerequisites,
+  PresenceStack,
   ProTip,
   ProfileSection,
   ProgressBar,
@@ -817,6 +855,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SelectionPresence,
   Separator,
   SeverityBadge,
   ShareDialog,
@@ -872,6 +911,7 @@ export {
   ThemeProvider,
   ThemeToggle,
   ThinkingBlock,
+  ThreadBubble,
   TickerTape,
   Toast,
   ToastAction,
@@ -898,9 +938,11 @@ export {
   UsageBreakdown,
   VideoEmbed,
   ViewSwitcher,
+  ViewportBookmarks,
   WalletCard,
   Watchlist,
   WorkspaceSwitcher,
+  WorldBreadcrumbs,
   WorldClockBar,
   ZoomHUD,
   alertVariants,

package/dist/components/infinite-plane/index.js

@@ -0,0 +1,6 @@
+import {
+  InfinitePlane
+} from "./infinite-plane";
+export {
+  InfinitePlane
+};

package/dist/components/infinite-plane/infinite-plane.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Infinite plane"
+};
+const safeSpacing = (value) => value < 4 ? 4 : value;
+const safeZoom = (value) => {
+  if (value < 0.1) {
+    return 0.1;
+  }
+  if (value > 10) {
+    return 10;
+  }
+  return value;
+};
+const buildBackground = (input) => {
+  if (input.pattern === "blank") {
+    return {};
+  }
+  const size = safeSpacing(input.spacing) * safeZoom(input.zoom);
+  const pos = `${input.translate.x}px ${input.translate.y}px`;
+  if (input.pattern === "grid") {
+    return {
+      backgroundImage: "linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px), linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px)",
+      backgroundPosition: pos,
+      backgroundSize: `${size}px ${size}px`
+    };
+  }
+  return {
+    backgroundImage: "radial-gradient(circle, hsl(var(--border)) 1px, transparent 1px)",
+    backgroundPosition: pos,
+    backgroundSize: `${size}px ${size}px`
+  };
+};
+const InfinitePlane = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      labels,
+      pattern = "dot",
+      spacing = 32,
+      translate = { x: 0, y: 0 },
+      zoom = 1,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const background = buildBackground({ pattern, spacing, translate, zoom });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "relative h-full w-full overflow-hidden bg-background",
+          className
+        ),
+        "data-infinite-plane": true,
+        "data-infinite-plane-pattern": pattern,
+        ref,
+        role: "region",
+        style: background,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+InfinitePlane.displayName = "InfinitePlane";
+export {
+  InfinitePlane
+};

package/dist/components/presence-stack/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceStack
+} from "./presence-stack";
+export {
+  PresenceStack
+};

package/dist/components/presence-stack/presence-stack.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_DOT = {
+  active: "bg-emerald-500",
+  away: "bg-amber-500",
+  idle: "bg-muted-foreground",
+  offline: "bg-muted-foreground/40"
+};
+const DEFAULT_LABELS = {
+  overflowSuffix: "more",
+  region: "Live presence"
+};
+const Avatar = (props) => {
+  const { user } = props;
+  const status = user.status ?? "active";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "relative -ml-2 inline-flex h-7 w-7 items-center justify-center rounded-full border-2 border-background text-[11px] font-semibold text-white shadow-sm first:ml-0",
+      "data-presence-stack-status": status,
+      "data-presence-stack-user": user.id,
+      style: { backgroundColor: user.color ?? "var(--foreground)" },
+      title: user.name,
+      children: [
+        user.initial,
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background",
+              STATUS_DOT[status]
+            ),
+            "data-presence-stack-dot": true
+          }
+        )
+      ]
+    }
+  );
+};
+const PresenceStack = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      max = 5,
+      onOverflowActivate,
+      users,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const visible = max >= users.length ? users : users.slice(0, max);
+    const hidden = users.length - visible.length;
+    const handleOverflow = () => {
+      onOverflowActivate?.();
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("inline-flex items-center pl-2", className),
+        "data-presence-stack": true,
+        ref,
+        role: "group",
+        ...rest,
+        children: [
+          visible.map((user) => /* @__PURE__ */ jsx(Avatar, { user }, user.id)),
+          hidden > 0 ? renderOverflow({
+            count: hidden,
+            handleClick: handleOverflow,
+            handlerProvided: Boolean(onOverflowActivate),
+            labels: resolvedLabels
+          }) : null
+        ]
+      }
+    );
+  }
+);
+PresenceStack.displayName = "PresenceStack";
+const renderOverflow = (input) => {
+  const text = `+${input.count}`;
+  const aria = `${input.count} ${input.labels.overflowSuffix}`;
+  const className = "relative -ml-2 inline-flex h-7 min-w-7 items-center justify-center rounded-full border-2 border-background bg-muted px-1.5 text-[10px] font-semibold text-muted-foreground shadow-sm";
+  if (input.handlerProvided) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": aria,
+        className: cn(
+          className,
+          "transition-colors hover:bg-muted/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-presence-stack-overflow": true,
+        onClick: input.handleClick,
+        type: "button",
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": aria, className, "data-presence-stack-overflow": true, children: text });
+};
+export {
+  PresenceStack
+};

package/dist/components/selection-presence/index.js

@@ -0,0 +1,6 @@
+import {
+  SelectionPresence
+} from "./selection-presence";
+export {
+  SelectionPresence
+};