@vllnt/ui 0.2.1-canary.eeb2ef1 → 0.2.1-canary.f6a87e2

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

@@ -0,0 +1,422 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import {
+  Check,
+  Copy,
+  Download,
+  Maximize2,
+  Minimize2,
+  Pencil
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+const COPIED_TIMEOUT_MS = 2e3;
+const DEFAULT_LABELS = {
+  copied: "Copied",
+  copy: "Copy",
+  download: "Download",
+  edit: "Edit",
+  enterFullscreen: "Enter fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  versions: "Versions"
+};
+const NO_OP = () => {
+  return;
+};
+const DEFAULT_CONTEXT = {
+  copied: false,
+  copy: async () => false,
+  download: NO_OP,
+  filename: "artifact.txt",
+  fullscreen: false,
+  hasOnEdit: false,
+  labels: DEFAULT_LABELS,
+  onEdit: NO_OP,
+  toggleFullscreen: NO_OP,
+  type: "code",
+  value: ""
+};
+const AIArtifactContext = createContext(DEFAULT_CONTEXT);
+function useAIArtifact() {
+  return useContext(AIArtifactContext);
+}
+function pickExtension(type, language) {
+  if (language) return language;
+  switch (type) {
+    case "code":
+      return "txt";
+    case "custom":
+      return "txt";
+    case "diagram":
+      return "mmd";
+    case "document":
+      return "md";
+    case "html":
+      return "html";
+    case "image":
+      return "png";
+    case "table":
+      return "csv";
+  }
+}
+const SLUG_INVALID_CHARS = /[^\da-z]+/g;
+const SLUG_TRIM = /^-+|-+$/g;
+function buildFilename({
+  filename,
+  language,
+  title,
+  type
+}) {
+  if (filename) return filename;
+  const base = typeof title === "string" && title.length > 0 ? title : "artifact";
+  const slug = base.toLowerCase().replaceAll(SLUG_INVALID_CHARS, "-").replaceAll(SLUG_TRIM, "");
+  const safeBase = slug.length > 0 ? slug : "artifact";
+  return `${safeBase}.${pickExtension(type, language)}`;
+}
+async function writeToClipboard(value) {
+  if (typeof navigator === "undefined" || typeof navigator.clipboard?.writeText !== "function") {
+    return false;
+  }
+  try {
+    await navigator.clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+function downloadValueAsFile(value, filename) {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([value], { type: "text/plain;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.style.display = "none";
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  URL.revokeObjectURL(url);
+}
+function ArtifactHeader({
+  language,
+  subtitle,
+  title,
+  type
+}) {
+  if (!title && !subtitle && !language) return null;
+  return /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+      title ? /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold tracking-tight text-foreground", children: title }) : null,
+      /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: language || type })
+    ] }),
+    subtitle ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: subtitle }) : null
+  ] });
+}
+function useArtifactController(options) {
+  const {
+    defaultFullscreen,
+    filename,
+    labels,
+    language,
+    onEdit,
+    title,
+    type,
+    value
+  } = options;
+  const [fullscreen, setFullscreen] = useState(defaultFullscreen);
+  const [copied, setCopied] = useState(false);
+  const resolvedFilename = useMemo(
+    () => buildFilename({ filename, language, title, type }),
+    [filename, language, title, type]
+  );
+  const copy = useCallback(async () => {
+    const ok = await writeToClipboard(value);
+    if (!ok) return false;
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, COPIED_TIMEOUT_MS);
+    return true;
+  }, [value]);
+  const download = useCallback(() => {
+    downloadValueAsFile(value, resolvedFilename);
+  }, [resolvedFilename, value]);
+  const toggleFullscreen = useCallback(() => {
+    setFullscreen((current) => !current);
+  }, []);
+  const triggerEdit = useCallback(() => {
+    onEdit?.();
+  }, [onEdit]);
+  return useMemo(
+    () => ({
+      copied,
+      copy,
+      download,
+      filename: resolvedFilename,
+      fullscreen,
+      hasOnEdit: onEdit !== void 0,
+      labels,
+      onEdit: triggerEdit,
+      toggleFullscreen,
+      type,
+      value
+    }),
+    [
+      copied,
+      copy,
+      download,
+      fullscreen,
+      labels,
+      onEdit,
+      resolvedFilename,
+      toggleFullscreen,
+      triggerEdit,
+      type,
+      value
+    ]
+  );
+}
+const AIArtifact = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      defaultFullscreen = false,
+      filename,
+      labels,
+      language = "",
+      onEdit,
+      subtitle,
+      title,
+      type = "code",
+      value = "",
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const contextValue = useArtifactController({
+      defaultFullscreen,
+      filename,
+      labels: resolvedLabels,
+      language,
+      onEdit,
+      title,
+      type,
+      value
+    });
+    return /* @__PURE__ */ jsx(AIArtifactContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": typeof title === "string" ? title : void 0,
+        className: cn(
+          "flex flex-col gap-3 rounded-2xl border bg-background p-4",
+          className
+        ),
+        "data-fullscreen": contextValue.fullscreen ? "true" : "false",
+        "data-type": type,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ArtifactHeader,
+            {
+              language,
+              subtitle,
+              title,
+              type
+            }
+          ),
+          children
+        ]
+      }
+    ) });
+  }
+);
+AIArtifact.displayName = "AIArtifact";
+const AIArtifactToolbar = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-wrap items-center gap-1.5 border-b border-border pb-2",
+      className
+    ),
+    ref,
+    role: "toolbar",
+    ...rest
+  }
+));
+AIArtifactToolbar.displayName = "AIArtifactToolbar";
+const AIArtifactCopyButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { copied, copy, labels } = useAIArtifact();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      void copy();
+    },
+    [copy, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": copied ? labels.copied : labels.copy,
+      className: cn("h-8 w-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true", className: "h-4 w-4" })
+    }
+  );
+});
+AIArtifactCopyButton.displayName = "AIArtifactCopyButton";
+const AIArtifactEditButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { hasOnEdit, labels, onEdit } = useAIArtifact();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      onEdit();
+    },
+    [onClick, onEdit]
+  );
+  if (!hasOnEdit) return null;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.edit,
+      className: cn("h-8 w-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "h-4 w-4" })
+    }
+  );
+});
+AIArtifactEditButton.displayName = "AIArtifactEditButton";
+const AIArtifactDownloadButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { download, labels } = useAIArtifact();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      download();
+    },
+    [download, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": labels.download,
+      className: cn("h-8 w-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(Download, { "aria-hidden": "true", className: "h-4 w-4" })
+    }
+  );
+});
+AIArtifactDownloadButton.displayName = "AIArtifactDownloadButton";
+const AIArtifactFullscreenButton = forwardRef(({ className, onClick, ...rest }, ref) => {
+  const { fullscreen, labels, toggleFullscreen } = useAIArtifact();
+  const handleClick = useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      toggleFullscreen();
+    },
+    [onClick, toggleFullscreen]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      "aria-label": fullscreen ? labels.exitFullscreen : labels.enterFullscreen,
+      "aria-pressed": fullscreen,
+      className: cn("h-8 w-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: fullscreen ? /* @__PURE__ */ jsx(Minimize2, { "aria-hidden": "true", className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Maximize2, { "aria-hidden": "true", className: "h-4 w-4" })
+    }
+  );
+});
+AIArtifactFullscreenButton.displayName = "AIArtifactFullscreenButton";
+const AIArtifactContent = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "min-h-[6rem] overflow-auto rounded-lg border border-border bg-muted/20 p-3 text-sm text-foreground",
+      className
+    ),
+    ref,
+    ...rest
+  }
+));
+AIArtifactContent.displayName = "AIArtifactContent";
+const AIArtifactVersions = forwardRef(({ children, className, ...rest }, ref) => {
+  const { labels } = useAIArtifact();
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": labels.versions,
+      className: cn(
+        "flex flex-wrap items-center gap-1.5 border-t border-border pt-2",
+        className
+      ),
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+AIArtifactVersions.displayName = "AIArtifactVersions";
+const AIArtifactVersion = forwardRef(({ active = false, className, label, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    "aria-current": active ? "true" : void 0,
+    className: cn(
+      "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      active ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground hover:bg-accent",
+      className
+    ),
+    ref,
+    type: "button",
+    ...rest,
+    children: label
+  }
+));
+AIArtifactVersion.displayName = "AIArtifactVersion";
+export {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+};

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

@@ -0,0 +1,24 @@
+import {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+} from "./ai-artifact";
+export {
+  AIArtifact,
+  AIArtifactContent,
+  AIArtifactCopyButton,
+  AIArtifactDownloadButton,
+  AIArtifactEditButton,
+  AIArtifactFullscreenButton,
+  AIArtifactToolbar,
+  AIArtifactVersion,
+  AIArtifactVersions,
+  useAIArtifact
+};

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: "h-4 w-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("h-8 w-8", className),
+      onClick: handleClick,
+      ref,
+      size: "icon",
+      type: "button",
+      variant: "ghost",
+      ...rest,
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "h-4 w-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: "h-4 w-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
+};