@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/ai-sidebar/ai-sidebar.js

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Bot, MessageSquarePlus, X } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 280;
+const MAX_WIDTH = 720;
+const DEFAULT_LABELS = {
+  close: "Close assistant",
+  defaultTitle: "AI Assistant",
+  open: "Open AI assistant"
+};
+const NO_OP = () => {
+  return;
+};
+const DEFAULT_CONTEXT = {
+  close: NO_OP,
+  labels: DEFAULT_LABELS,
+  open: NO_OP,
+  openState: false,
+  position: "right",
+  setOpen: NO_OP,
+  toggle: NO_OP,
+  width: DEFAULT_WIDTH
+};
+const AISidebarContext = createContext(DEFAULT_CONTEXT);
+function useAISidebar() {
+  return useContext(AISidebarContext);
+}
+function clampWidth(value) {
+  return Math.min(Math.max(value, MIN_WIDTH), MAX_WIDTH);
+}
+function AISidebarProvider({
+  children,
+  defaultOpen = false,
+  defaultPosition = "right",
+  defaultWidth = DEFAULT_WIDTH,
+  labels,
+  onOpenChange,
+  open: controlledOpen
+}) {
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const [uncontrolled, setUncontrolled] = useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const openState = isControlled ? controlledOpen : uncontrolled;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const open = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const toggle = useCallback(() => {
+    setOpen(!openState);
+  }, [openState, setOpen]);
+  const value = useMemo(
+    () => ({
+      close,
+      labels: resolvedLabels,
+      open,
+      openState,
+      position: defaultPosition,
+      setOpen,
+      toggle,
+      width: clampWidth(defaultWidth)
+    }),
+    [
+      close,
+      defaultPosition,
+      defaultWidth,
+      open,
+      openState,
+      resolvedLabels,
+      setOpen,
+      toggle
+    ]
+  );
+  return /* @__PURE__ */ jsx(AISidebarContext.Provider, { value, children });
+}
+function useEscapeToClose(enabled, isOpen, onClose) {
+  useEffect(() => {
+    if (!enabled || !isOpen) return;
+    const handler = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [enabled, isOpen, onClose]);
+}
+const AISidebar = forwardRef(
+  (props, ref) => {
+    const { children, className, closeOnEscape = true, ...rest } = props;
+    const { close, labels, openState, position, width } = useAISidebar();
+    useEscapeToClose(closeOnEscape, openState, close);
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        "aria-hidden": !openState,
+        "aria-label": labels.defaultTitle,
+        className: cn(
+          "fixed top-0 z-40 flex h-full flex-col border-border bg-background shadow-lg transition-transform duration-200 ease-out",
+          position === "right" ? "right-0 border-l" : "left-0 border-r",
+          openState ? "translate-x-0" : position === "right" ? "translate-x-full" : "-translate-x-full",
+          "max-w-full",
+          className
+        ),
+        "data-state": openState ? "open" : "closed",
+        ref,
+        style: { width: `${width.toString()}px` },
+        ...rest,
+        children
+      }
+    );
+  }
+);
+AISidebar.displayName = "AISidebar";
+const AISidebarHeader = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "header",
+  {
+    className: cn(
+      "flex items-center gap-2 border-b border-border px-4 py-3",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarHeader.displayName = "AISidebarHeader";
+const AISidebarTitle = forwardRef(({ children, className, ...rest }, ref) => {
+  const { labels } = useAISidebar();
+  return /* @__PURE__ */ jsxs(
+    "h2",
+    {
+      className: cn(
+        "flex flex-1 items-center gap-2 text-sm font-semibold tracking-tight text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Bot, { "aria-hidden": "true", className: "size-4 text-muted-foreground" }),
+        children ?? labels.defaultTitle
+      ]
+    }
+  );
+});
+AISidebarTitle.displayName = "AISidebarTitle";
+const AISidebarClose = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { close, labels } = useAISidebar();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      close();
+    },
+    [close, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.close,
+      className: cn("size-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AISidebarClose.displayName = "AISidebarClose";
+const AISidebarContent = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-1 flex-col gap-2 overflow-y-auto p-4", className),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarContent.displayName = "AISidebarContent";
+const AISidebarFooter = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "footer",
+  {
+    className: cn("border-t border-border bg-background px-4 py-3", className),
+    ref,
+    ...rest,
+    children
+  }
+));
+AISidebarFooter.displayName = "AISidebarFooter";
+const AISidebarTrigger = forwardRef(({ children, className, onClick, ...rest }, ref) => {
+  const { labels, openState, toggle } = useAISidebar();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      toggle();
+    },
+    [onClick, toggle]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-expanded": openState,
+      "aria-label": children ? void 0 : labels.open,
+      className: cn(className),
+      "data-state": openState ? "open" : "closed",
+      onClick: handleClick,
+      ref,
+      size: children ? "sm" : "icon",
+      type: "button",
+      variant: "outline",
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx(MessageSquarePlus, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+});
+AISidebarTrigger.displayName = "AISidebarTrigger";
+export {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+};

package/dist/components/ai-sidebar/index.js

@@ -0,0 +1,22 @@
+import {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+} from "./ai-sidebar";
+export {
+  AISidebar,
+  AISidebarClose,
+  AISidebarContent,
+  AISidebarFooter,
+  AISidebarHeader,
+  AISidebarProvider,
+  AISidebarTitle,
+  AISidebarTrigger,
+  useAISidebar
+};

package/dist/components/ai-source-citation/ai-source-citation.js

@@ -18,13 +18,13 @@ const AISourceCitation = forwardRef(
         ...props,
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsx(Quote, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }),
             /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium text-foreground", children: title }),
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: source })
               ] }),
-              /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
+              /* @__PURE__ */ jsx(ExternalLink, { className: "size-4 shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" })
             ] }) })
           ] }),
           snippet ? /* @__PURE__ */ jsx("p", { className: "line-clamp-3 text-sm leading-6 text-muted-foreground", children: snippet }) : null

package/dist/components/ai-tool-call-display/ai-tool-call-display.js

@@ -21,10 +21,10 @@ const statusVariants = cva(
   }
 );
 const statusIconMap = {
-  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4" }),
-  error: /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
-  queued: /* @__PURE__ */ jsx(Clock3, { className: "h-4 w-4" }),
-  running: /* @__PURE__ */ jsx(Wrench, { className: "h-4 w-4 animate-pulse" })
+  complete: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4" }),
+  queued: /* @__PURE__ */ jsx(Clock3, { className: "size-4" }),
+  running: /* @__PURE__ */ jsx(Wrench, { className: "size-4 animate-pulse" })
 };
 const AIToolCallDisplay = forwardRef(
   ({

package/dist/components/alert-pulse/alert-pulse.js

@@ -0,0 +1,93 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const SEVERITY_STROKE = {
+  error: "stroke-red-500",
+  info: "stroke-blue-500",
+  warn: "stroke-amber-500"
+};
+const SEVERITY_FILL = {
+  error: "fill-red-500/20",
+  info: "fill-blue-500/20",
+  warn: "fill-amber-500/20"
+};
+const SEVERITY_LABEL = {
+  error: "Error",
+  info: "Info",
+  warn: "Warning"
+};
+const safeRadius = (value) => value < 6 ? 6 : value;
+const AlertPulse = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cx,
+      cy,
+      labels,
+      radius = 36,
+      reducedMotion = false,
+      severity = "warn",
+      ...rest
+    } = props;
+    const r = safeRadius(radius);
+    const ariaLabel = labels?.region ?? SEVERITY_LABEL[severity];
+    const size = r * 2 + 24;
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-20 overflow-visible",
+          className
+        ),
+        "data-alert-pulse": true,
+        "data-alert-severity": severity,
+        height: size,
+        ref,
+        role: "img",
+        style: {
+          left: cx - size / 2,
+          top: cy - size / 2
+        },
+        width: size,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("origin-center", SEVERITY_STROKE[severity]),
+              cx: size / 2,
+              cy: size / 2,
+              fill: "none",
+              r,
+              strokeOpacity: 0.7,
+              strokeWidth: 2
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn(
+                "origin-center",
+                SEVERITY_STROKE[severity],
+                SEVERITY_FILL[severity],
+                reducedMotion ? null : "animate-ping"
+              ),
+              cx: size / 2,
+              cy: size / 2,
+              "data-alert-pulse-ring": true,
+              r,
+              strokeOpacity: 0.4,
+              strokeWidth: 2
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AlertPulse.displayName = "AlertPulse";
+export {
+  AlertPulse
+};

package/dist/components/alert-pulse/index.js

@@ -0,0 +1,6 @@
+import {
+  AlertPulse
+} from "./alert-pulse";
+export {
+  AlertPulse
+};

package/dist/components/anchor-port/anchor-port.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const toneClasses = {
+  bidirectional: "border-violet-500/40 bg-violet-500/15 text-violet-700 dark:text-violet-300",
+  input: "border-sky-500/40 bg-sky-500/15 text-sky-700 dark:text-sky-300",
+  output: "border-emerald-500/40 bg-emerald-500/15 text-emerald-700 dark:text-emerald-300"
+};
+const stateClasses = {
+  active: "scale-100 opacity-100",
+  blocked: "opacity-60 saturate-50",
+  idle: "opacity-80"
+};
+const sideClasses = {
+  bottom: "self-end",
+  left: "self-start",
+  right: "self-end",
+  top: "self-start"
+};
+const AnchorPort = forwardRef(
+  ({
+    className,
+    side = "right",
+    state = "idle",
+    tone = "bidirectional",
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": props["aria-label"] ?? `${tone} ${side} port ${state}`,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded-full border shadow-sm",
+        toneClasses[tone],
+        stateClasses[state],
+        sideClasses[side],
+        className
+      ),
+      "data-side": side,
+      "data-state": state,
+      "data-tone": tone,
+      ref,
+      role: "img",
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-current" })
+    }
+  )
+);
+AnchorPort.displayName = "AnchorPort";
+export {
+  AnchorPort
+};

package/dist/components/anchor-port/index.js

@@ -0,0 +1,4 @@
+import { AnchorPort } from "./anchor-port";
+export {
+  AnchorPort
+};

package/dist/components/animated-text/animated-text.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
@@ -23,10 +24,7 @@ const ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS = {
 const DEFAULT_RANDOM_CHARACTERS = ANIMATED_TEXT_RANDOM_CHARACTER_PRESETS.matrix;
 function getSegments(text, splitBy) {
   if (splitBy === "character") {
-    const segmenter = new Intl.Segmenter(void 0, {
-      granularity: "grapheme"
-    });
-    return Array.from(segmenter.segment(text), ({ segment }) => segment);
+    return Array.from(GLYPH_SEGMENTER.segment(text), ({ segment }) => segment);
   }
   return text.match(/\S+\s*/g) ?? [];
 }