@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/metric-cluster/metric-cluster.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "Metric cluster"
+};
+const Row = (props) => {
+  const { entry } = props;
+  const tone = entry.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center justify-between gap-2 text-[11px]",
+      "data-metric-cluster-row": entry.id,
+      "data-metric-cluster-tone": tone,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("size-1.5 rounded-full", TONE_DOT[tone])
+            }
+          ),
+          entry.label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: entry.value })
+      ]
+    }
+  );
+};
+const MetricCluster = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      labels,
+      metrics,
+      title,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+          className
+        ),
+        "data-metric-cluster": true,
+        "data-metric-cluster-anchor": anchor,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_TRANSFORM[anchor]
+        },
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx(
+            "header",
+            {
+              className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+              "data-metric-cluster-title": true,
+              children: title
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: metrics.map((entry) => /* @__PURE__ */ jsx(Row, { entry }, entry.id)) })
+        ]
+      }
+    );
+  }
+);
+MetricCluster.displayName = "MetricCluster";
+export {
+  MetricCluster
+};

package/dist/components/metric-gauge/metric-gauge.js

@@ -1,14 +1,14 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle
-} from "../card";
+} from "../card/card";
 const DEFAULT_THRESHOLDS = [
   { colorClassName: "text-emerald-500", label: "Nominal", value: 60 },
   { colorClassName: "text-amber-500", label: "Elevated", value: 85 },
@@ -148,7 +148,7 @@ function GaugeLegend({ thresholds }) {
           {
             "aria-hidden": "true",
             className: cn(
-              "h-2 w-2 rounded-full bg-current",
+              "size-2 rounded-full bg-current",
               threshold.colorClassName
             )
           }

package/dist/components/mini-map-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+export {
+  MiniMapPanel
+};

package/dist/components/mini-map-panel/mini-map-panel.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const MiniMapPanel = forwardRef(
+  ({ className, markers = [], title = "Overview", viewport, world, ...props }, ref) => {
+    const viewportWidth = Math.max(
+      viewport.width / viewport.zoom / world.width * 100,
+      8
+    );
+    const viewportHeight = Math.max(
+      viewport.height / viewport.zoom / world.height * 100,
+      8
+    );
+    const viewportLeft = Math.min(
+      Math.max(viewport.x / world.width * 100, 0),
+      100 - viewportWidth
+    );
+    const viewportTop = Math.min(
+      Math.max(viewport.y / world.height * 100, 0),
+      100 - viewportHeight
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+              "Zoom ",
+              Math.round(viewport.zoom * 100),
+              "%"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
+            markers.map((marker) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
+                style: {
+                  left: `${marker.x / world.width * 100}%`,
+                  top: `${marker.y / world.height * 100}%`
+                },
+                title: marker.label
+              },
+              marker.id
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute border border-foreground/80 bg-transparent",
+                style: {
+                  height: `${viewportHeight}%`,
+                  left: `${viewportLeft}%`,
+                  top: `${viewportTop}%`,
+                  width: `${viewportWidth}%`
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+MiniMapPanel.displayName = "MiniMapPanel";
+export {
+  MiniMapPanel
+};

package/dist/components/model-comparison/index.js

@@ -0,0 +1,12 @@
+import {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+} from "./model-comparison";
+export {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+};

package/dist/components/model-comparison/model-comparison.js

@@ -0,0 +1,230 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+const HIDDEN_LABEL_PREFIX = "Model";
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+function blindLabelForIndex(index) {
+  const suffix = index < ALPHABET.length ? ALPHABET[index] : (index + 1).toString();
+  return `${HIDDEN_LABEL_PREFIX} ${suffix}`;
+}
+const DEFAULT_LABELS = {
+  cost: "Cost",
+  hide: "Hide models",
+  latency: "Latency",
+  prompt: "Prompt",
+  reveal: "Reveal models",
+  tokens: "Tokens",
+  voteHeading: "Which response is better?",
+  voteTie: "Tie"
+};
+const DEFAULT_CONTEXT = {
+  blind: false,
+  labels: DEFAULT_LABELS,
+  registerColumn: () => 0
+};
+const ModelComparisonContext = createContext(DEFAULT_CONTEXT);
+function ComparisonHeader({
+  blind,
+  hideBlindToggle,
+  labels,
+  onToggleBlind,
+  prompt
+}) {
+  if (!prompt && hideBlindToggle) return null;
+  return /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-3", children: [
+    prompt ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: labels.prompt }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground", children: prompt })
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    hideBlindToggle ? null : /* @__PURE__ */ jsx(
+      Button,
+      {
+        "aria-pressed": blind,
+        onClick: onToggleBlind,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: blind ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true", className: "mr-2 size-4" }),
+          labels.reveal
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true", className: "mr-2 size-4" }),
+          labels.hide
+        ] })
+      }
+    )
+  ] });
+}
+const ModelComparison = forwardRef(
+  (props, ref) => {
+    const {
+      blindDefault = false,
+      children,
+      className,
+      hideBlindToggle = false,
+      labels,
+      prompt,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const [blind, setBlind] = useState(blindDefault);
+    const columnIndexRef = useRef(/* @__PURE__ */ new Map());
+    const registerColumn = useCallback((id) => {
+      const existing = columnIndexRef.current.get(id);
+      if (existing !== void 0) return existing;
+      const next = columnIndexRef.current.size;
+      columnIndexRef.current.set(id, next);
+      return next;
+    }, []);
+    const contextValue = useMemo(
+      () => ({ blind, labels: resolvedLabels, registerColumn }),
+      [blind, registerColumn, resolvedLabels]
+    );
+    const handleToggleBlind = useCallback(() => {
+      setBlind((value) => !value);
+    }, []);
+    return /* @__PURE__ */ jsx(ModelComparisonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: cn(
+          "flex flex-col gap-4 rounded-2xl border bg-background p-4",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            ComparisonHeader,
+            {
+              blind,
+              hideBlindToggle,
+              labels: resolvedLabels,
+              onToggleBlind: handleToggleBlind,
+              prompt
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3", children })
+        ]
+      }
+    ) });
+  }
+);
+ModelComparison.displayName = "ModelComparison";
+const ModelComparisonColumn = forwardRef((props, ref) => {
+  const { badge, children, className, label, model, ...rest } = props;
+  const id = useId();
+  const { blind, registerColumn } = useContext(ModelComparisonContext);
+  const columnIndex = registerColumn(id);
+  const displayLabel = blind ? blindLabelForIndex(columnIndex) : label ?? model;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-label": typeof displayLabel === "string" ? displayLabel : void 0,
+      className: cn(
+        "flex flex-col gap-3 rounded-xl border border-border bg-muted/30 p-3",
+        className
+      ),
+      "data-blind": blind ? "true" : "false",
+      "data-model": blind ? void 0 : model,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold tracking-tight text-foreground", children: displayLabel }),
+          badge ? /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col gap-2 text-sm text-foreground", children })
+      ]
+    }
+  );
+});
+ModelComparisonColumn.displayName = "ModelComparisonColumn";
+const ModelComparisonMeta = forwardRef((props, ref) => {
+  const { className, cost, latency, tokens, ...rest } = props;
+  const { labels } = useContext(ModelComparisonContext);
+  const items = [];
+  if (tokens !== void 0 && tokens !== null) {
+    items.push({
+      caption: labels.tokens,
+      value: typeof tokens === "number" ? tokens.toLocaleString() : tokens
+    });
+  }
+  if (latency !== void 0 && latency !== null) {
+    items.push({ caption: labels.latency, value: latency });
+  }
+  if (cost !== void 0 && cost !== null) {
+    items.push({ caption: labels.cost, value: cost });
+  }
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: cn(
+        "mt-auto flex flex-wrap gap-x-3 gap-y-1 border-t border-border pt-2 text-xs",
+        className
+      ),
+      ref,
+      ...rest,
+      children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-1", children: [
+        /* @__PURE__ */ jsx("dt", { className: "font-medium uppercase tracking-wide text-muted-foreground", children: item.caption }),
+        /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: item.value })
+      ] }, item.caption))
+    }
+  );
+});
+ModelComparisonMeta.displayName = "ModelComparisonMeta";
+const ModelComparisonVote = forwardRef((props, ref) => {
+  const { buttonLabels, className, onVote, ...rest } = props;
+  const { labels: contextLabels } = useContext(ModelComparisonContext);
+  const handleLeft = useCallback(() => {
+    onVote?.("left");
+  }, [onVote]);
+  const handleTie = useCallback(() => {
+    onVote?.("tie");
+  }, [onVote]);
+  const handleRight = useCallback(() => {
+    onVote?.("right");
+  }, [onVote]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "col-span-full flex flex-col items-center gap-2",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: contextLabels.voteHeading }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { onClick: handleLeft, size: "sm", type: "button", variant: "outline", children: buttonLabels?.left ?? "\u2190 Left" }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleTie, size: "sm", type: "button", variant: "ghost", children: buttonLabels?.tie ?? contextLabels.voteTie }),
+          /* @__PURE__ */ jsx(Button, { onClick: handleRight, size: "sm", type: "button", variant: "outline", children: buttonLabels?.right ?? "Right \u2192" })
+        ] })
+      ]
+    }
+  );
+});
+ModelComparisonVote.displayName = "ModelComparisonVote";
+export {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+};

package/dist/components/model-selector/model-selector.js

@@ -3,22 +3,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from "react";
 import { ArrowUpDown, Filter } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
-import { Button } from "../button";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandItem,
   CommandList
-} from "../command";
+} from "../command/command";
 import {
   Dialog,
   DialogContent,
   DialogDescription,
   DialogHeader,
   DialogTitle
-} from "../dialog";
+} from "../dialog/dialog";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -27,8 +27,8 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger
-} from "../dropdown-menu";
-import { Input } from "../input";
+} from "../dropdown-menu/dropdown-menu";
+import { Input } from "../input/input";
 function getProvider(modelId) {
   const parts = modelId.split("/");
   return parts[0] || "unknown";
@@ -198,7 +198,7 @@ function ProviderFilterMenu({
 }) {
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { className: "h-9 gap-2", size: "sm", variant: "outline", children: [
-      /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
       providerFilter === "all" ? "All Providers" : providerFilter
     ] }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
@@ -214,7 +214,7 @@ function ProviderFilterMenu({
 function SortMenu({ onChange, sortBy }) {
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { className: "h-9 gap-2", size: "sm", variant: "outline", children: [
-      /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-4" }),
       "Sort"
     ] }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [

package/dist/components/multi-select/index.js

@@ -0,0 +1,6 @@
+import {
+  MultiSelect
+} from "./multi-select";
+export {
+  MultiSelect
+};