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

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";
+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_hsl(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
+};

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

@@ -0,0 +1,251 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_TICK_COUNT = 8;
+const COLOR_CLASSES = {
+  amber: {
+    accent: "bg-amber-500",
+    chip: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+    marker: "border-amber-500 bg-amber-500"
+  },
+  blue: {
+    accent: "bg-blue-500",
+    chip: "bg-blue-500/15 text-blue-700 dark:text-blue-300",
+    marker: "border-blue-500 bg-blue-500"
+  },
+  emerald: {
+    accent: "bg-emerald-500",
+    chip: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
+    marker: "border-emerald-500 bg-emerald-500"
+  },
+  neutral: {
+    accent: "bg-muted-foreground/40",
+    chip: "bg-muted text-muted-foreground",
+    marker: "border-muted-foreground bg-muted-foreground"
+  },
+  purple: {
+    accent: "bg-purple-500",
+    chip: "bg-purple-500/15 text-purple-700 dark:text-purple-300",
+    marker: "border-purple-500 bg-purple-500"
+  },
+  red: {
+    accent: "bg-red-500",
+    chip: "bg-red-500/15 text-red-700 dark:text-red-300",
+    marker: "border-red-500 bg-red-500"
+  },
+  rose: {
+    accent: "bg-rose-500",
+    chip: "bg-rose-500/15 text-rose-700 dark:text-rose-300",
+    marker: "border-rose-500 bg-rose-500"
+  }
+};
+const DEFAULT_LABELS = {
+  region: "Parallel timeline"
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function yearToPercent(year, start, end) {
+  const span = end - start;
+  if (span <= 0) return 0;
+  return clamp((year - start) / span * 100, 0, 100);
+}
+function buildTicks(start, end, count) {
+  const safeCount = Math.max(2, count);
+  const span = end - start;
+  if (span <= 0) return [];
+  const step = span / (safeCount - 1);
+  return Array.from({ length: safeCount }).map((_, index) => {
+    const year = Math.round(start + step * index);
+    return {
+      label: formatYear(year),
+      offset: yearToPercent(year, start, end)
+    };
+  });
+}
+function Axis({ ticks }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "relative h-7 border-b border-border text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+      children: ticks.map((tick) => /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute top-1 -translate-x-1/2",
+          style: { left: `${tick.offset.toString()}%` },
+          children: tick.label
+        },
+        tick.label
+      ))
+    }
+  );
+}
+function EraBands({ endYear, eras, startYear }) {
+  if (eras.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: eras.map((era) => {
+    const left = yearToPercent(era.start, startYear, endYear);
+    const right = yearToPercent(era.end, startYear, endYear);
+    const width = Math.max(0, right - left);
+    if (width <= 0) return null;
+    const palette = COLOR_CLASSES[era.color ?? "neutral"];
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-y-0", palette.chip),
+        "data-era-id": era.id,
+        style: {
+          left: `${left.toString()}%`,
+          width: `${width.toString()}%`
+        }
+      },
+      era.id
+    );
+  }) });
+}
+function EventMarker({
+  color,
+  endYear,
+  event,
+  startYear
+}) {
+  if (event.year < startYear || event.year > endYear) return null;
+  const left = yearToPercent(event.year, startYear, endYear);
+  const palette = COLOR_CLASSES[color];
+  const titleText = typeof event.title === "string" ? event.title : "";
+  const ariaLabel = titleText ? `${titleText}, ${formatYear(event.year)}` : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": ariaLabel,
+      className: "absolute top-1/2 z-10 -translate-x-1/2 -translate-y-1/2",
+      "data-event-id": event.id,
+      "data-event-year": event.year,
+      style: { left: `${left.toString()}%` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "size-3 rounded-full border-2 ring-2 ring-background",
+              palette.marker
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute left-1/2 top-4 w-40 -translate-x-1/2 text-center", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-medium text-foreground", children: event.title }),
+          /* @__PURE__ */ jsxs("p", { className: "truncate text-[10px] text-muted-foreground", children: [
+            formatYear(event.year),
+            event.meta ? /* @__PURE__ */ jsxs("span", { children: [
+              " \xB7 ",
+              event.meta
+            ] }) : null
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function TrackRow({ endYear, startYear, track }) {
+  const color = track.color ?? "neutral";
+  const palette = COLOR_CLASSES[color];
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch gap-3 border-t border-border first:border-t-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-32 shrink-0 flex-col gap-1 border-r border-border bg-muted/20 p-3", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("h-1 w-8 rounded-full", palette.accent)
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold tracking-tight text-foreground", children: track.name }),
+      track.region ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: track.region }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": typeof track.name === "string" ? track.name : void 0,
+        className: "relative h-16 min-w-0 flex-1",
+        "data-track-id": track.id,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-border" }),
+          track.events.map((event) => /* @__PURE__ */ jsx(
+            EventMarker,
+            {
+              color,
+              endYear,
+              event,
+              startYear
+            },
+            event.id
+          ))
+        ]
+      }
+    )
+  ] });
+}
+const ParallelTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      endYear,
+      eras = [],
+      labels,
+      startYear,
+      tickCount = DEFAULT_TICK_COUNT,
+      tracks,
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const ticks = useMemo(
+      () => buildTicks(startYear, endYear, tickCount),
+      [endYear, startYear, tickCount]
+    );
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "flex w-full flex-col overflow-x-auto rounded-2xl border bg-background text-foreground",
+          className
+        ),
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-3 border-b border-border", children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "w-32 shrink-0" }),
+            /* @__PURE__ */ jsx(Axis, { ticks })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(EraBands, { endYear, eras, startYear }),
+            tracks.map((track) => /* @__PURE__ */ jsx(
+              TrackRow,
+              {
+                endYear,
+                startYear,
+                track
+              },
+              track.id
+            ))
+          ] })
+        ]
+      }
+    );
+  }
+);
+ParallelTimeline.displayName = "ParallelTimeline";
+export {
+  ParallelTimeline
+};

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

@@ -33,7 +33,7 @@ const PasswordInput = React.forwardRef(
             setVisible((previous) => !previous);
           },
           type: "button",
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" })
+          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
         }
       )
     ] });

package/dist/components/plan-badge/plan-badge.js

@@ -46,13 +46,7 @@ const PlanBadge = React.forwardRef(
         ref: reference,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "h-1.5 w-1.5 rounded-full bg-current"
-            }
-          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
           /* @__PURE__ */ jsx("span", { children: label ?? getPlanLabel(tier) }),
           state === "trial" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Trial" }) : null,
           state === "legacy" ? /* @__PURE__ */ jsx("span", { className: "text-current/80", children: "Legacy" }) : null

package/dist/components/playback-ghost/index.js

@@ -0,0 +1,6 @@
+import {
+  PlaybackGhost
+} from "./playback-ghost";
+export {
+  PlaybackGhost
+};

package/dist/components/playback-ghost/playback-ghost.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const KIND_GLYPH = {
+  agent: "\u25C7",
+  artifact: "\u25CC",
+  input: "\u2198",
+  output: "\u2197",
+  run: "\u25B6",
+  task: "\u25A2"
+};
+const KIND_LABEL = {
+  agent: "Agent",
+  artifact: "Artifact",
+  input: "Input",
+  output: "Output",
+  run: "Run",
+  task: "Task"
+};
+const DEFAULT_LABELS = {
+  region: "Playback ghost"
+};
+const clamp01 = (v) => {
+  if (v < 0) {
+    return 0;
+  }
+  if (v > 1) {
+    return 1;
+  }
+  return v;
+};
+const PlaybackGhost = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      kind,
+      label,
+      labels,
+      opacity = 0.4,
+      size = 40,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const safeOpacity = clamp01(opacity);
+    const safeSize = size < 16 ? 16 : size;
+    const ariaLabel = kind ? `${resolvedLabels.region}: ${KIND_LABEL[kind]}` : resolvedLabels.region;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "pointer-events-none absolute z-10 inline-flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1.5 rounded-md border border-dashed border-border/70 bg-background/40 px-2 py-1 text-xs text-foreground backdrop-blur-sm",
+          className
+        ),
+        "data-playback-ghost": true,
+        "data-playback-kind": kind ?? "unknown",
+        ref,
+        role: "img",
+        style: {
+          left: x,
+          minHeight: safeSize,
+          minWidth: safeSize,
+          opacity: safeOpacity,
+          top: y
+        },
+        ...rest,
+        children: [
+          kind ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: KIND_GLYPH[kind] }) : null,
+          label ? /* @__PURE__ */ jsx("span", { className: "truncate", "data-playback-ghost-label": true, children: label }) : null
+        ]
+      }
+    );
+  }
+);
+PlaybackGhost.displayName = "PlaybackGhost";
+export {
+  PlaybackGhost
+};

package/dist/components/policy-delivery-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  PolicyDeliveryPanel
+} from "./policy-delivery-panel";
+export {
+  PolicyDeliveryPanel
+};

package/dist/components/policy-delivery-panel/policy-delivery-panel.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATUS_LABEL = {
+  advisory: "Advisory",
+  disabled: "Disabled",
+  enforced: "Enforced"
+};
+const STATUS_TONE = {
+  advisory: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  disabled: "border-border bg-muted/40 text-muted-foreground",
+  enforced: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300"
+};
+const DEFAULT_LABELS = {
+  empty: "No policies",
+  region: "Policy delivery"
+};
+const RowBody = (props) => {
+  const { policy } = props;
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-0.5 text-left", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-medium text-foreground", children: policy.name }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full border px-1.5 py-0.5 text-[10px] uppercase tracking-wide",
+            STATUS_TONE[policy.status]
+          ),
+          children: STATUS_LABEL[policy.status]
+        }
+      )
+    ] }),
+    policy.description ? /* @__PURE__ */ jsx("span", { className: "truncate text-[10px] text-muted-foreground", children: policy.description }) : null
+  ] });
+};
+const Row = (props) => {
+  const { policy } = props;
+  if (policy.onToggle) {
+    const handleClick = () => {
+      policy.onToggle?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "flex w-full items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-left transition-colors hover:border-border hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "data-policy-row": policy.id,
+        "data-policy-status": policy.status,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { policy })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
+      "data-policy-row": policy.id,
+      "data-policy-status": policy.status,
+      children: /* @__PURE__ */ jsx(RowBody, { policy })
+    }
+  );
+};
+const PolicyDeliveryPanel = forwardRef((props, ref) => {
+  const { className, labels, policies, title = "Policies", ...rest } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-2 rounded-lg border bg-background p-3 text-foreground",
+        className
+      ),
+      "data-policy-delivery-panel": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { children: /* @__PURE__ */ jsx("h3", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: title }) }),
+        policies.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-policy-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: policies.map((policy) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, { policy }) }, policy.id)) })
+      ]
+    }
+  );
+});
+PolicyDeliveryPanel.displayName = "PolicyDeliveryPanel";
+export {
+  PolicyDeliveryPanel
+};

package/dist/components/presence-stack/index.js

@@ -0,0 +1,6 @@
+import {
+  PresenceStack
+} from "./presence-stack";
+export {
+  PresenceStack
+};