@vllnt/ui 0.2.1 → 0.3.0-canary.00b20d6

package/dist/components/reveal-text/reveal-text.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils";
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const onChange = () => {
+      setReduced(query.matches);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => {
+      query.removeEventListener("change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+function useInView(nodeRef) {
+  const [inView, setInView] = React.useState(
+    () => typeof IntersectionObserver !== "function"
+  );
+  React.useEffect(() => {
+    const node = nodeRef.current;
+    if (!node || typeof IntersectionObserver !== "function") {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setInView(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(node);
+    return () => {
+      observer.disconnect();
+    };
+  }, [nodeRef]);
+  return inView;
+}
+const hiddenTransforms = {
+  down: "-translate-y-full",
+  left: "translate-x-full",
+  right: "-translate-x-full",
+  up: "translate-y-full"
+};
+const RevealText = React.forwardRef(
+  ({ children, className, delay = 0, direction = "up", ...props }, ref) => {
+    const reduced = usePrefersReducedMotion();
+    const nodeRef = React.useRef(null);
+    const inView = useInView(nodeRef);
+    const visible = reduced || inView;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("overflow-hidden", className),
+        ref: (node) => {
+          nodeRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "transition-[transform,opacity] duration-700 ease-out motion-reduce:transition-none",
+              visible ? "translate-x-0 translate-y-0 opacity-100" : cn("opacity-0", hiddenTransforms[direction])
+            ),
+            style: { transitionDelay: `${delay}ms` },
+            children
+          }
+        )
+      }
+    );
+  }
+);
+RevealText.displayName = "RevealText";
+export {
+  RevealText
+};

package/dist/components/right-dock/index.js

@@ -0,0 +1,4 @@
+import { RightDock } from "./right-dock";
+export {
+  RightDock
+};

package/dist/components/right-dock/right-dock.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const RightDock = forwardRef(
+  ({ children, className, footer, header, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      className: cn(
+        "flex h-full min-w-[18rem] max-w-[24rem] shrink-0 flex-col border-l border-border bg-background",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        header || title ? /* @__PURE__ */ jsxs("div", { className: "border-b border-border/60 px-4 py-3", children: [
+          title ? /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }) : null,
+          header ? /* @__PURE__ */ jsx("div", { className: "mt-2", children: header }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-4", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "border-t border-border/60 p-4", children: footer }) : null
+      ]
+    }
+  )
+);
+RightDock.displayName = "RightDock";
+export {
+  RightDock
+};

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

@@ -0,0 +1,6 @@
+import {
+  RouteMap
+} from "./route-map";
+export {
+  RouteMap
+};

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 handleActivateAssignment = () => {
+      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: handleActivateAssignment,
+        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
+};