@vllnt/ui 0.2.0 → 0.2.1-canary.06f0e84

package/dist/components/route-map/route-map.js

@@ -0,0 +1,339 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useId,
+  useMemo
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const ROUTE_PALETTE = {
+  amber: {
+    dot: "fill-amber-500",
+    line: "stroke-amber-500",
+    text: "text-amber-600"
+  },
+  blue: {
+    dot: "fill-blue-500",
+    line: "stroke-blue-500",
+    text: "text-blue-600"
+  },
+  emerald: {
+    dot: "fill-emerald-500",
+    line: "stroke-emerald-500",
+    text: "text-emerald-600"
+  },
+  purple: {
+    dot: "fill-purple-500",
+    line: "stroke-purple-500",
+    text: "text-purple-600"
+  },
+  red: { dot: "fill-red-500", line: "stroke-red-500", text: "text-red-600" },
+  rose: {
+    dot: "fill-rose-500",
+    line: "stroke-rose-500",
+    text: "text-rose-600"
+  }
+};
+const LINE_DASH = {
+  dashed: "10,8",
+  dotted: "2,6",
+  solid: "0"
+};
+const DEFAULT_LABELS = {
+  region: "Route map"
+};
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  const x = (lng + 180) / 360 * VIEWBOX_WIDTH;
+  const y = (90 - lat) / 180 * VIEWBOX_HEIGHT;
+  return { x, y };
+}
+function projectWaypoints(waypoints) {
+  return waypoints.map((waypoint, index) => {
+    const point = projectEquirectangular(waypoint.position);
+    return {
+      ordinal: waypoint.order ?? index + 1,
+      raw: waypoint,
+      x: point.x,
+      y: point.y
+    };
+  });
+}
+function pathFor(points) {
+  if (points.length === 0) return "";
+  return points.map(
+    (point, index) => `${index === 0 ? "M" : "L"}${point.x.toString()},${point.y.toString()}`
+  ).join(" ");
+}
+function pathLength(points) {
+  if (points.length < 2) return 0;
+  const total = points.reduce(
+    (accumulator, point) => {
+      if (!accumulator.previous) return { length: 0, previous: point };
+      const dx = point.x - accumulator.previous.x;
+      const dy = point.y - accumulator.previous.y;
+      return {
+        length: accumulator.length + Math.hypot(dx, dy),
+        previous: point
+      };
+    },
+    { length: 0 }
+  );
+  return total.length;
+}
+function RouteLine({
+  animated,
+  animationDurationSeconds,
+  color,
+  lineStyle,
+  pathDefinition,
+  pathId,
+  totalLength
+}) {
+  if (!pathDefinition) return null;
+  const palette = ROUTE_PALETTE[color];
+  const dashArray = animated ? totalLength > 0 ? `${totalLength.toString()} ${totalLength.toString()}` : LINE_DASH[lineStyle] : LINE_DASH[lineStyle];
+  return /* @__PURE__ */ jsx("g", { "data-route-line": true, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      className: cn("fill-none stroke-[3]", palette.line),
+      d: pathDefinition,
+      id: pathId,
+      strokeDasharray: dashArray,
+      strokeDashoffset: animated ? totalLength : 0,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: animated ? /* @__PURE__ */ jsx(
+        "animate",
+        {
+          attributeName: "stroke-dashoffset",
+          dur: `${animationDurationSeconds.toString()}s`,
+          fill: "freeze",
+          from: totalLength,
+          to: "0"
+        }
+      ) : null
+    }
+  ) });
+}
+function ProgressIndicator({
+  animationDurationSeconds,
+  color,
+  pathId,
+  visible
+}) {
+  if (!visible) return null;
+  const palette = ROUTE_PALETTE[color];
+  return /* @__PURE__ */ jsx("g", { "data-route-progress": true, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      className: cn("stroke-background", palette.dot),
+      r: "6",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsx(
+        "animateMotion",
+        {
+          dur: `${animationDurationSeconds.toString()}s`,
+          repeatCount: "indefinite",
+          rotate: "auto",
+          children: /* @__PURE__ */ jsx("mpath", { href: `#${pathId}` })
+        }
+      )
+    }
+  ) });
+}
+function WaypointDots({ color, waypoints }) {
+  const palette = ROUTE_PALETTE[color];
+  return /* @__PURE__ */ jsx("g", { "data-route-waypoints": true, children: waypoints.map((point) => {
+    const labelText = typeof point.raw.label === "string" ? point.raw.label : void 0;
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-waypoint-id": point.raw.id,
+        "data-waypoint-ordinal": point.ordinal,
+        transform: `translate(${point.x.toString()}, ${point.y.toString()})`,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn(
+                "stroke-background outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                palette.dot
+              ),
+              r: "6",
+              strokeWidth: "2",
+              children: labelText ? /* @__PURE__ */ jsx("title", { children: labelText }) : null
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: cn(
+                "select-none text-[10px] font-semibold",
+                palette.text
+              ),
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "-12",
+              children: point.raw.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-background text-[8px] font-bold",
+              dominantBaseline: "central",
+              textAnchor: "middle",
+              y: "0",
+              children: point.ordinal
+            }
+          )
+        ]
+      },
+      point.raw.id
+    );
+  }) });
+}
+function DataSummary({ titleId, waypoints }) {
+  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": titleId, className: "sr-only", role: "region", children: [
+    /* @__PURE__ */ jsx("h3", { id: titleId, children: "Route waypoint summary" }),
+    /* @__PURE__ */ jsx("ol", { children: waypoints.map((waypoint) => /* @__PURE__ */ jsxs("li", { children: [
+      typeof waypoint.label === "string" ? waypoint.label : `Waypoint ${waypoint.id}`,
+      `: ${waypoint.position[0].toString()}, ${waypoint.position[1].toString()}`
+    ] }, waypoint.id)) })
+  ] });
+}
+function Stage(props) {
+  const {
+    animated,
+    animationDurationSeconds,
+    backdrop,
+    backdropAlt,
+    color,
+    lineStyle,
+    pathDefinition,
+    pathId,
+    showProgressIndicator,
+    totalLength,
+    waypoints
+  } = props;
+  const showProgress = showProgressIndicator && totalLength > 0;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full",
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${VIEWBOX_WIDTH.toString()} ${VIEWBOX_HEIGHT.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            className: "fill-muted",
+            height: VIEWBOX_HEIGHT,
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height: VIEWBOX_HEIGHT,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width: VIEWBOX_WIDTH,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          RouteLine,
+          {
+            animated,
+            animationDurationSeconds,
+            color,
+            lineStyle,
+            pathDefinition,
+            pathId,
+            totalLength
+          }
+        ),
+        /* @__PURE__ */ jsx(WaypointDots, { color, waypoints }),
+        /* @__PURE__ */ jsx(
+          ProgressIndicator,
+          {
+            animationDurationSeconds,
+            color,
+            pathId,
+            visible: showProgress
+          }
+        )
+      ]
+    }
+  );
+}
+const RouteMap = forwardRef((props, ref) => {
+  const {
+    animated = false,
+    animationDurationSeconds = 4,
+    backdrop,
+    backdropAlt,
+    children,
+    className,
+    color = "red",
+    labels,
+    lineStyle = "solid",
+    showProgressIndicator = false,
+    waypoints,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const pathId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const projected = useMemo(() => projectWaypoints(waypoints), [waypoints]);
+  const pathDefinition = useMemo(() => pathFor(projected), [projected]);
+  const totalLength = useMemo(() => pathLength(projected), [projected]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "relative aspect-[2/1] w-full overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          Stage,
+          {
+            animated,
+            animationDurationSeconds,
+            backdrop,
+            backdropAlt,
+            color,
+            lineStyle,
+            pathDefinition,
+            pathId,
+            showProgressIndicator,
+            totalLength,
+            waypoints: projected
+          }
+        ),
+        children ? /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 max-w-xs rounded-md border bg-background/95 px-3 py-2 text-xs text-foreground shadow-sm backdrop-blur", children }) : null,
+        /* @__PURE__ */ jsx(DataSummary, { titleId, waypoints })
+      ]
+    }
+  );
+});
+RouteMap.displayName = "RouteMap";
+export {
+  RouteMap
+};

package/dist/components/routing-assignment-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  RoutingAssignmentPanel
+} from "./routing-assignment-panel";
+export {
+  RoutingAssignmentPanel
+};

package/dist/components/routing-assignment-panel/routing-assignment-panel.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const ROLE_LABEL = {
+  fallback: "Fallback",
+  primary: "Primary",
+  shadow: "Shadow"
+};
+const ROLE_TONE = {
+  fallback: "border-amber-500/40 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  primary: "border-emerald-500/40 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+  shadow: "border-border bg-muted/40 text-muted-foreground"
+};
+const DEFAULT_LABELS = {
+  empty: "No assignments",
+  region: "Routing assignments"
+};
+const clampLoad = (value) => {
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const RowBody = (props) => {
+  const { assignment } = props;
+  const load = assignment.load === void 0 ? null : clampLoad(assignment.load);
+  return /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-foreground", children: assignment.agent }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "rounded-full border px-1.5 py-0.5 text-[10px] uppercase tracking-wide",
+            ROLE_TONE[assignment.role]
+          ),
+          children: ROLE_LABEL[assignment.role]
+        }
+      )
+    ] }),
+    load === null ? null : /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "h-1 w-full overflow-hidden rounded-full bg-muted/40",
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "block h-full rounded-full bg-foreground/50",
+            style: { width: `${load * 100}%` }
+          }
+        )
+      }
+    )
+  ] });
+};
+const Row = (props) => {
+  const { assignment } = props;
+  if (assignment.onActivate) {
+    const handleClick = () => {
+      assignment.onActivate?.();
+    };
+    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-routing-assignment": assignment.id,
+        "data-routing-role": assignment.role,
+        onClick: handleClick,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { assignment })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "flex w-full items-center gap-2 rounded-md px-2 py-1.5",
+      "data-routing-assignment": assignment.id,
+      "data-routing-role": assignment.role,
+      children: /* @__PURE__ */ jsx(RowBody, { assignment })
+    }
+  );
+};
+const RoutingAssignmentPanel = forwardRef((props, ref) => {
+  const { assignments, className, labels, title = "Routing", ...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-routing-assignment-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 }) }),
+        assignments.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-xs text-muted-foreground",
+            "data-routing-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: assignments.map((assignment) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Row, { assignment }) }, assignment.id)) })
+      ]
+    }
+  );
+});
+RoutingAssignmentPanel.displayName = "RoutingAssignmentPanel";
+export {
+  RoutingAssignmentPanel
+};

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

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

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

@@ -0,0 +1,221 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const STATE_FILL = {
+  complete: "bg-emerald-500/70",
+  failed: "bg-red-500/70",
+  queued: "bg-amber-500/70",
+  running: "bg-blue-500/70",
+  stopped: "bg-muted-foreground/40"
+};
+const STATE_LABEL = {
+  complete: "Complete",
+  failed: "Failed",
+  queued: "Queued",
+  running: "Running",
+  stopped: "Stopped"
+};
+const DEFAULT_LABELS = {
+  empty: "No phases",
+  region: "Run timeline"
+};
+const clamp = (v, min, max) => {
+  if (v < min) {
+    return min;
+  }
+  if (v > max) {
+    return max;
+  }
+  return v;
+};
+const Endpoints = (props) => {
+  const fmt = props.format;
+  const showCursor = typeof props.cursor === "number";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2 text-[11px] text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-start": true, children: fmt ? fmt(props.start) : props.start }),
+    showCursor ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "font-semibold text-foreground",
+        "data-run-timeline-cursor-label": true,
+        children: fmt ? fmt(props.cursor ?? 0) : props.cursor
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("span", { "data-run-timeline-end": true, children: fmt ? fmt(props.end) : props.end })
+  ] });
+};
+const PhaseBar = (props) => {
+  const { laneIndex, laneTotal, phase, span, start } = props;
+  const left = clamp((phase.start - start) / span, 0, 1) * 100;
+  const right = clamp((phase.end - start) / span, 0, 1) * 100;
+  const width = Math.max(right - left, 0.5);
+  const top = laneIndex / laneTotal * 100;
+  const height = 100 / laneTotal;
+  const state = phase.state ?? "running";
+  const sharedStyle = {
+    height: `${height}%`,
+    left: `${left}%`,
+    top: `${top}%`,
+    width: `${width}%`
+  };
+  const ariaLabel = `${STATE_LABEL[state]} ${phase.start} \u2192 ${phase.end}`;
+  if (phase.onActivate) {
+    const handleClick = () => {
+      phase.onActivate?.();
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": ariaLabel,
+        className: cn(
+          "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-left text-[10px] text-foreground transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          STATE_FILL[state]
+        ),
+        "data-run-phase": phase.id,
+        "data-run-phase-state": state,
+        onClick: handleClick,
+        style: sharedStyle,
+        type: "button",
+        children: phase.label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "absolute flex items-center justify-start overflow-hidden truncate rounded-sm border border-border/50 px-1 text-[10px] text-foreground",
+        STATE_FILL[state]
+      ),
+      "data-run-phase": phase.id,
+      "data-run-phase-state": state,
+      role: "img",
+      style: sharedStyle,
+      children: phase.label
+    }
+  );
+};
+const TrackBody = (props) => {
+  const { cursor, end, lanes, phases, start } = props;
+  const span = end - start;
+  const cursorRatio = typeof cursor === "number" ? clamp((cursor - start) / span, 0, 1) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex w-24 flex-col gap-px text-[10px] uppercase tracking-wide text-muted-foreground", children: lanes.map((lane) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-7 items-center px-2",
+        "data-run-timeline-lane": lane.id,
+        children: lane.label
+      },
+      lane.id
+    )) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative flex-1 overflow-hidden rounded-md border border-border bg-muted/20",
+        "data-run-timeline-track": true,
+        style: { height: `${lanes.length * 28}px` },
+        children: [
+          phases.map((phase) => {
+            const index = lanes.findIndex(
+              (lane) => lane.id === (phase.laneId ?? "default")
+            );
+            if (index === -1) {
+              return null;
+            }
+            return /* @__PURE__ */ jsx(
+              PhaseBar,
+              {
+                laneIndex: index,
+                laneTotal: lanes.length,
+                phase,
+                span,
+                start
+              },
+              phase.id
+            );
+          }),
+          cursorRatio === null ? null : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute top-0 bottom-0 w-px bg-foreground",
+              "data-run-timeline-cursor": true,
+              style: { left: `${cursorRatio * 100}%` }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const resolveLanes = (explicit) => {
+  if (explicit && explicit.length > 0) {
+    return explicit;
+  }
+  return [{ id: "default", label: "Run" }];
+};
+const RunTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      cursor,
+      end,
+      formatValue,
+      labels,
+      lanes,
+      phases,
+      start,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    const safeEnd = end <= start ? start + 1 : end;
+    const resolvedLanes = resolveLanes(lanes);
+    return /* @__PURE__ */ jsxs(
+      "section",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn("flex w-full flex-col gap-2", className),
+        "data-run-timeline": true,
+        ref,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            Endpoints,
+            {
+              cursor,
+              end: safeEnd,
+              format: formatValue,
+              start
+            }
+          ),
+          phases.length === 0 ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "rounded-md border border-border bg-muted/20 px-2 py-3 text-center text-[11px] text-muted-foreground",
+              "data-run-timeline-state": "empty",
+              children: resolvedLabels.empty
+            }
+          ) : /* @__PURE__ */ jsx(
+            TrackBody,
+            {
+              cursor,
+              end: safeEnd,
+              lanes: resolvedLanes,
+              phases,
+              start
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RunTimeline.displayName = "RunTimeline";
+export {
+  RunTimeline
+};

package/dist/components/runtime-overview-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  RuntimeOverviewPanel
+} from "./runtime-overview-panel";
+export {
+  RuntimeOverviewPanel
+};