@vllnt/ui 0.2.1 → 0.3.0-canary.f3cafe8

package/dist/components/number-input/number-input.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Minus, Plus } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Button } from "../button";
+import { Button } from "../button/button";
 function getNumericBound(bound) {
   if (bound === void 0) {
     return;
@@ -51,7 +51,7 @@ function StepButton({
       tabIndex: -1,
       type: "button",
       variant: "ghost",
-      children: direction === "decrement" ? /* @__PURE__ */ jsx(Minus, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+      children: direction === "decrement" ? /* @__PURE__ */ jsx(Minus, { className: "size-4" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4" })
     }
   );
 }

package/dist/components/number-ticker/number-ticker.js

@@ -2,6 +2,16 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils";
+const NUMBER_FORMATTER_CACHE = /* @__PURE__ */ new Map();
+function getNumberTickerFormatter(locale, formatOptions) {
+  const key = `${locale ?? ""}|${formatOptions ? JSON.stringify(formatOptions) : ""}`;
+  let formatter = NUMBER_FORMATTER_CACHE.get(key);
+  if (!formatter) {
+    formatter = Intl.NumberFormat(locale, formatOptions);
+    NUMBER_FORMATTER_CACHE.set(key, formatter);
+  }
+  return formatter;
+}
 const NumberTicker = React.forwardRef(
   ({
     className,
@@ -42,10 +52,7 @@ const NumberTicker = React.forwardRef(
         window.cancelAnimationFrame(animationFrame);
       };
     }, [delay, duration, from, value]);
-    const formatter = React.useMemo(
-      () => new Intl.NumberFormat(locale, formatOptions),
-      [formatOptions, locale]
-    );
+    const formatter = getNumberTickerFormatter(locale, formatOptions);
     return /* @__PURE__ */ jsx(
       "span",
       {

package/dist/components/object-card/index.js

@@ -0,0 +1,6 @@
+import {
+  ObjectCard
+} from "./object-card";
+export {
+  ObjectCard
+};

package/dist/components/object-card/object-card.js

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+import { Badge } from "../badge/badge";
+import { Button } from "../button/button";
+const stateClasses = {
+  blocked: "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  complete: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  idle: "border-border/70 bg-muted/60 text-muted-foreground",
+  running: "border-sky-500/30 bg-sky-500/10 text-sky-700 dark:text-sky-300"
+};
+function ObjectCardHeader({
+  kind,
+  ports,
+  state,
+  summary,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: "rounded-full border-border/60 bg-background/70 px-2.5 py-1 text-[11px] uppercase tracking-[0.2em] text-muted-foreground",
+            variant: "outline",
+            children: kind
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium capitalize",
+              stateClasses[state]
+            ),
+            children: state
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+        summary ? /* @__PURE__ */ jsx("p", { className: "max-w-[32ch] text-sm leading-6 text-muted-foreground", children: summary }) : null
+      ] })
+    ] }),
+    ports ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-start", children: ports }) : null
+  ] });
+}
+function ObjectCardMetrics({ metrics }) {
+  if (!metrics?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("dl", { className: "grid grid-cols-2 gap-3 rounded-2xl border border-border/60 bg-background/75 p-3", children: metrics.map((metric) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: metric.label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-sm font-medium text-foreground", children: metric.value })
+  ] }, metric.label)) });
+}
+function ObjectCardActions({ actions }) {
+  if (!actions?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: actions.map((action) => {
+    const handleActionClick = () => {
+      action.onClick?.();
+    };
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "rounded-full",
+        onClick: handleActionClick,
+        size: "sm",
+        type: "button",
+        variant: "outline",
+        children: action.label
+      },
+      action.label
+    );
+  }) });
+}
+const ObjectCard = forwardRef(
+  ({
+    actions,
+    children,
+    className,
+    footer,
+    kind = "Object",
+    metrics = [],
+    ports,
+    state = "idle",
+    summary,
+    title,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "group relative flex min-w-[320px] max-w-[420px] flex-col gap-4 rounded-[1.5rem] border border-border/70 bg-[linear-gradient(180deg,oklch(var(--background)),oklch(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_oklch(var(--foreground)/0.08)] transition-transform duration-200 hover:-translate-y-0.5",
+        className
+      ),
+      "data-state": state,
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-5 top-0 h-px bg-[linear-gradient(90deg,transparent,oklch(var(--foreground)/0.22),transparent)]" }),
+        /* @__PURE__ */ jsx(
+          ObjectCardHeader,
+          {
+            kind,
+            ports,
+            state,
+            summary,
+            title
+          }
+        ),
+        /* @__PURE__ */ jsx(ObjectCardMetrics, { metrics }),
+        children ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children }) : null,
+        /* @__PURE__ */ jsx(ObjectCardActions, { actions }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 pt-3 text-sm text-muted-foreground", children: footer }) : null
+      ]
+    }
+  )
+);
+ObjectCard.displayName = "ObjectCard";
+export {
+  ObjectCard
+};

package/dist/components/object-handle/index.js

@@ -0,0 +1,4 @@
+import { ObjectHandle } from "./object-handle";
+export {
+  ObjectHandle
+};

package/dist/components/object-handle/object-handle.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const ObjectHandle = forwardRef(
+  ({ className, hint, label = "Move", ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(
+        "inline-flex items-center gap-2 rounded-full border border-border/60 bg-background/85 px-3 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:border-border hover:text-foreground",
+        className
+      ),
+      ref,
+      type: "button",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "grid grid-cols-2 gap-0.5 text-[8px] leading-none",
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" }),
+              /* @__PURE__ */ jsx("span", { children: "\u2022" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: label }),
+        hint ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/80", children: hint }) : null
+      ]
+    }
+  )
+);
+ObjectHandle.displayName = "ObjectHandle";
+export {
+  ObjectHandle
+};

package/dist/components/object-inspector/index.js

@@ -0,0 +1,6 @@
+import {
+  ObjectInspector
+} from "./object-inspector";
+export {
+  ObjectInspector
+};

package/dist/components/object-inspector/object-inspector.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const KIND_LABEL = {
+  agent: "Agent",
+  artifact: "Artifact",
+  input: "Input",
+  output: "Output",
+  run: "Run",
+  task: "Task"
+};
+const KIND_GLYPH = {
+  agent: "\u25C7",
+  artifact: "\u25CC",
+  input: "\u2198",
+  output: "\u2197",
+  run: "\u25B6",
+  task: "\u25A2"
+};
+const STATUS_DOT = {
+  complete: "bg-emerald-500",
+  failed: "bg-red-500",
+  idle: "bg-muted-foreground",
+  queued: "bg-amber-500",
+  running: "bg-blue-500 animate-pulse"
+};
+const STATUS_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  idle: "Idle",
+  queued: "Queued",
+  running: "Running"
+};
+const DEFAULT_LABELS = {
+  empty: "No selection",
+  region: "Object inspector"
+};
+const KindChip = (props) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-label": KIND_LABEL[props.kind],
+    className: "inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+    children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: KIND_GLYPH[props.kind] }),
+      KIND_LABEL[props.kind]
+    ]
+  }
+);
+const StatusDot = (props) => /* @__PURE__ */ jsxs(
+  "span",
+  {
+    "aria-label": `Status ${STATUS_LABEL[props.status]}`,
+    className: "inline-flex items-center gap-1 text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+    children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("size-1.5 rounded-full", STATUS_DOT[props.status])
+        }
+      ),
+      STATUS_LABEL[props.status]
+    ]
+  }
+);
+const Header = (props) => /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-2", children: [
+  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+    /* @__PURE__ */ jsx(KindChip, { kind: props.kind }),
+    /* @__PURE__ */ jsx(StatusDot, { status: props.status })
+  ] }),
+  /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+    /* @__PURE__ */ jsx("h3", { className: "truncate text-sm font-semibold text-foreground", children: props.title }),
+    props.subtitle ? /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: props.subtitle }) : null
+  ] })
+] });
+const ObjectInspector = forwardRef(
+  (props, ref) => {
+    const {
+      children,
+      className,
+      kind,
+      labels,
+      status = "idle",
+      subtitle,
+      title,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    if (!kind || !title) {
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-label": resolvedLabels.region,
+          className: cn(
+            "flex w-full flex-col items-center justify-center gap-1 rounded-2xl border bg-background p-6 text-center text-xs text-muted-foreground",
+            className
+          ),
+          "data-object-inspector": true,
+          "data-object-state": "empty",
+          ref,
+          ...rest,
+          children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-lg", children: "\u25C7" }),
+            /* @__PURE__ */ jsx("span", { children: resolvedLabels.empty })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-full flex-col gap-3 rounded-2xl border bg-background p-3 text-foreground",
+          className
+        ),
+        "data-object-inspector": true,
+        "data-object-kind": kind,
+        "data-object-status": status,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(Header, { kind, status, subtitle, title }),
+          children ? /* @__PURE__ */ jsx("div", { className: "space-y-2", children }) : null
+        ]
+      }
+    );
+  }
+);
+ObjectInspector.displayName = "ObjectInspector";
+export {
+  ObjectInspector
+};

package/dist/components/order-book/order-book.js

@@ -68,7 +68,7 @@ function BookSide({
   ] });
 }
 const OrderBook = React.forwardRef(
-  ({ asks, bids, className, precision = 2, ...props }, reference) => {
+  ({ as: Heading = "h2", asks, bids, className, precision = 2, ...props }, reference) => {
     if (asks.length === 0 && bids.length === 0) {
       return null;
     }
@@ -90,7 +90,7 @@ const OrderBook = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "mb-4 flex flex-wrap items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: "Level II" }),
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: "Order book" })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: "Order book" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "rounded-full border border-border bg-background/70 px-3 py-1 text-sm text-muted-foreground tabular-nums", children: [
               "Spread ",

package/dist/components/overview-board/index.js

@@ -0,0 +1,8 @@
+import {
+  OverviewBoard,
+  OverviewCard
+} from "./overview-board";
+export {
+  OverviewBoard,
+  OverviewCard
+};

package/dist/components/overview-board/overview-board.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { AlertCircle, ArrowRight, Inbox, ListTodo, Siren } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+const toneClassNames = {
+  danger: "border-red-500/30 bg-red-500/8",
+  default: "border-border/70 bg-background/80",
+  warning: "border-amber-500/30 bg-amber-500/8"
+};
+const toneAccentClassNames = {
+  danger: "text-red-600 dark:text-red-300",
+  default: "text-primary",
+  warning: "text-amber-600 dark:text-amber-300"
+};
+const OverviewCard = forwardRef(
+  ({
+    className,
+    ctaLabel,
+    description,
+    handleCtaClick,
+    heading,
+    icon,
+    metric,
+    tone = "default",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex min-h-[172px] flex-col gap-4 rounded-2xl border p-5 shadow-[0_8px_30px_oklch(var(--foreground)/0.06)] backdrop-blur-xl",
+        toneClassNames[tone],
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.24em] text-muted-foreground", children: heading }),
+            /* @__PURE__ */ jsx("div", { className: "text-3xl font-semibold tracking-tight text-foreground", children: metric })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex size-10 items-center justify-center rounded-xl bg-background/80",
+                toneAccentClassNames[tone]
+              ),
+              children: icon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm leading-6 text-muted-foreground", children: description }),
+        ctaLabel ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleCtaClick,
+            size: "sm",
+            type: "button",
+            variant: "ghost",
+            children: [
+              ctaLabel,
+              /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+            ]
+          }
+        ) }) : null
+      ]
+    }
+  )
+);
+OverviewCard.displayName = "OverviewCard";
+function getDefaultIcon(heading) {
+  if (typeof heading !== "string") {
+    return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("error")) {
+    return /* @__PURE__ */ jsx(AlertCircle, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("action")) {
+    return /* @__PURE__ */ jsx(ListTodo, { className: "size-5" });
+  }
+  if (heading.toLowerCase().includes("run")) {
+    return /* @__PURE__ */ jsx(Siren, { className: "size-5" });
+  }
+  return /* @__PURE__ */ jsx(Inbox, { className: "size-5" });
+}
+const OverviewBoard = forwardRef(
+  ({ className, eyebrow, heading, items, subtitle, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn("mx-auto flex w-full max-w-6xl flex-col gap-6", className),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold tracking-tight text-foreground", children: heading }),
+            subtitle ? /* @__PURE__ */ jsx("p", { className: "max-w-3xl text-sm leading-6 text-muted-foreground", children: subtitle }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid gap-4 md:grid-cols-2 xl:grid-cols-3", children: items.map((item) => {
+          const handleCtaClick = item.handleCtaClick;
+          return /* @__PURE__ */ jsx(
+            OverviewCard,
+            {
+              ctaLabel: item.ctaLabel,
+              description: item.description,
+              handleCtaClick,
+              heading: item.heading,
+              icon: item.icon ?? getDefaultIcon(item.heading),
+              metric: item.metric,
+              tone: item.tone
+            },
+            item.id
+          );
+        }) })
+      ]
+    }
+  )
+);
+OverviewBoard.displayName = "OverviewBoard";
+export {
+  OverviewBoard,
+  OverviewCard
+};

package/dist/components/parallel-timeline/index.js

@@ -0,0 +1,6 @@
+import {
+  ParallelTimeline
+} from "./parallel-timeline";
+export {
+  ParallelTimeline
+};