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

package/dist/components/navigation-menu/navigation-menu.js

@@ -50,7 +50,7 @@ const NavigationMenuTrigger = forwardRef(({ children, className, ...props }, ref
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+          className: "relative top-[1px] ml-1 size-3 transition duration-200 group-data-[state=open]:rotate-180"
         }
       )
     ]
@@ -91,7 +91,7 @@ const NavigationMenuIndicator = forwardRef(({ className, ...props }, ref) => /*
     ),
     ref,
     ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
+    children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" })
   }
 ));
 NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;

package/dist/components/newsletter-signup/index.js

@@ -0,0 +1,8 @@
+import {
+  NewsletterSignup,
+  newsletterSignupReducer
+} from "./newsletter-signup";
+export {
+  NewsletterSignup,
+  newsletterSignupReducer
+};

package/dist/components/newsletter-signup/newsletter-signup.js

@@ -0,0 +1,269 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useReducer,
+  useRef
+} from "react";
+import { CheckCircle2, Loader2, XCircle } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Input } from "../input/input";
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const DEFAULT_LABELS = {
+  emailInvalid: "Enter a valid email address.",
+  emailLabel: "Email address",
+  errorFallback: "Something went wrong. Try again.",
+  placeholder: "you@example.com",
+  sending: "Subscribing\u2026",
+  submit: "Subscribe",
+  success: "You're on the list. Check your inbox to confirm.",
+  tryAgain: "Try again"
+};
+function reducer(state, action) {
+  switch (action.kind) {
+    case "fail":
+      return { kind: "error", message: action.message };
+    case "reset":
+      return { kind: "idle" };
+    case "send":
+      return state.kind === "sending" ? state : { kind: "sending" };
+    case "succeed":
+      return { kind: "sent" };
+  }
+}
+function actionToStatus(action) {
+  switch (action.kind) {
+    case "fail":
+      return "error";
+    case "reset":
+      return "idle";
+    case "send":
+      return "sending";
+    case "succeed":
+      return "sent";
+  }
+}
+function defaultValidate(email, label) {
+  const trimmed = email.trim();
+  if (!trimmed) return label;
+  if (!EMAIL_PATTERN.test(trimmed)) return label;
+  return true;
+}
+function extractErrorMessage(value, fallback) {
+  if (value instanceof Error && value.message) return value.message;
+  if (typeof value === "string" && value.length > 0) return value;
+  return fallback;
+}
+function SubmitButton({
+  labels,
+  stacked,
+  status
+}) {
+  let content;
+  if (status === "sending") {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "mr-2 size-4 animate-spin" }),
+      labels.sending
+    ] });
+  } else if (status === "error") {
+    content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(XCircle, { "aria-hidden": "true", className: "mr-2 size-4" }),
+      labels.tryAgain
+    ] });
+  } else {
+    content = labels.submit;
+  }
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: stacked ? "w-full" : "",
+      disabled: status === "sending",
+      type: "submit",
+      children: content
+    }
+  );
+}
+function SuccessPanel({ className, message }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "flex items-start gap-2 rounded-lg border border-emerald-500/40 bg-emerald-500/10 p-3 text-sm text-emerald-900 dark:text-emerald-200",
+        className
+      ),
+      role: "status",
+      children: [
+        /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: message })
+      ]
+    }
+  );
+}
+function useNewsletterSignupController(options) {
+  const { labels, onStatusChange, onSubmit, validate } = options;
+  const inputRef = useRef(null);
+  const [state, dispatch] = useReducer(reducer, { kind: "idle" });
+  const status = state.kind;
+  const transition = useCallback(
+    (action) => {
+      dispatch(action);
+      onStatusChange?.(actionToStatus(action));
+    },
+    [onStatusChange]
+  );
+  const handleChange = useCallback(() => {
+    if (state.kind === "error") transition({ kind: "reset" });
+  }, [state.kind, transition]);
+  const performSubmit = useCallback(
+    async (value) => {
+      const validator = validate ?? ((email) => defaultValidate(email, labels.emailInvalid));
+      const validation = validator(value);
+      if (validation !== true) {
+        transition({ kind: "fail", message: validation });
+        inputRef.current?.focus();
+        return;
+      }
+      transition({ kind: "send" });
+      try {
+        await onSubmit(value);
+        transition({ kind: "succeed" });
+      } catch (error) {
+        transition({
+          kind: "fail",
+          message: extractErrorMessage(error, labels.errorFallback)
+        });
+        inputRef.current?.focus();
+      }
+    },
+    [labels.emailInvalid, labels.errorFallback, onSubmit, transition, validate]
+  );
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (state.kind === "sending") return;
+      const value = inputRef.current?.value.trim() ?? "";
+      void performSubmit(value);
+    },
+    [performSubmit, state.kind]
+  );
+  return {
+    errorMessage: state.kind === "error" ? state.message : null,
+    handleChange,
+    handleSubmit,
+    inputRef,
+    status
+  };
+}
+const NewsletterSignup = forwardRef((props, ref) => {
+  const {
+    autoComplete = "email",
+    className,
+    labels,
+    onStatusChange,
+    onSubmit,
+    validate,
+    variant = "inline",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  const inputId = useId();
+  const errorId = useId();
+  const controller = useNewsletterSignupController({
+    labels: resolvedLabels,
+    onStatusChange,
+    onSubmit,
+    validate
+  });
+  if (controller.status === "sent") {
+    return /* @__PURE__ */ jsx(SuccessPanel, { className, message: resolvedLabels.success });
+  }
+  return /* @__PURE__ */ jsx(
+    FormBody,
+    {
+      autoComplete,
+      className,
+      errorId,
+      formRef: ref,
+      inputId,
+      inputRef: controller.inputRef,
+      labels: resolvedLabels,
+      message: controller.errorMessage,
+      onChange: controller.handleChange,
+      onSubmit: controller.handleSubmit,
+      rest,
+      stacked: variant === "stacked",
+      status: controller.status
+    }
+  );
+});
+NewsletterSignup.displayName = "NewsletterSignup";
+function FormBody({
+  autoComplete,
+  className,
+  errorId,
+  formRef,
+  inputId,
+  inputRef,
+  labels,
+  message,
+  onChange,
+  onSubmit,
+  rest,
+  stacked,
+  status
+}) {
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      "aria-busy": status === "sending",
+      className: cn(
+        "flex w-full",
+        stacked ? "flex-col gap-2" : "flex-col gap-2 sm:flex-row sm:items-start",
+        className
+      ),
+      noValidate: true,
+      onSubmit,
+      ref: formRef,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", stacked ? "" : "sm:flex-1"), children: [
+          /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: inputId, children: labels.emailLabel }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              "aria-describedby": message ? errorId : void 0,
+              "aria-invalid": message !== null,
+              autoComplete,
+              disabled: status === "sending",
+              id: inputId,
+              name: "email",
+              onChange,
+              placeholder: labels.placeholder,
+              ref: inputRef,
+              type: "email"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "aria-live": "polite",
+              className: cn("text-xs", message ? "text-destructive" : "sr-only"),
+              id: errorId,
+              role: message ? "alert" : void 0,
+              children: message ?? ""
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(SubmitButton, { labels, stacked, status })
+      ]
+    }
+  );
+}
+export {
+  NewsletterSignup,
+  reducer as newsletterSignupReducer
+};

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

@@ -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 = new 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";
+import { Button } from "../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,hsl(var(--background)),hsl(var(--muted)/0.22))] p-5 shadow-[0_24px_80px_hsl(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,hsl(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/overview-board/index.js

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