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

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

@@ -0,0 +1,506 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const PALETTE = {
+  amber: {
+    dot: "fill-amber-500",
+    fill: "rgba(245, 158, 11, 0.25)",
+    stroke: "#b45309"
+  },
+  blue: {
+    dot: "fill-blue-500",
+    fill: "rgba(59, 130, 246, 0.25)",
+    stroke: "#1d4ed8"
+  },
+  emerald: {
+    dot: "fill-emerald-500",
+    fill: "rgba(16, 185, 129, 0.25)",
+    stroke: "#047857"
+  },
+  purple: {
+    dot: "fill-purple-500",
+    fill: "rgba(168, 85, 247, 0.25)",
+    stroke: "#7c3aed"
+  },
+  red: {
+    dot: "fill-red-500",
+    fill: "rgba(239, 68, 68, 0.25)",
+    stroke: "#b91c1c"
+  },
+  rose: {
+    dot: "fill-rose-500",
+    fill: "rgba(244, 63, 94, 0.25)",
+    stroke: "#be123c"
+  }
+};
+const DEFAULT_LABELS = {
+  pause: "Pause",
+  play: "Play",
+  region: "Map timeline",
+  slider: "Year"
+};
+const TimelineContext = createContext(null);
+function useTimelineContext() {
+  const ctx = useContext(TimelineContext);
+  if (!ctx) {
+    throw new Error("MapTimeline subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function projectEquirectangular(position) {
+  const [lng, lat] = position;
+  return {
+    x: (lng + 180) / 360 * VIEWBOX_WIDTH,
+    y: (90 - lat) / 180 * VIEWBOX_HEIGHT
+  };
+}
+function formatYear(year) {
+  if (year < 0) return `${Math.abs(year).toString()} BCE`;
+  return `${year.toString()} CE`;
+}
+function ringToPath(ring) {
+  return ring.map((position, index) => {
+    const projected = projectEquirectangular(position);
+    return `${index === 0 ? "M" : "L"}${projected.x.toString()},${projected.y.toString()}`;
+  }).join(" ");
+}
+function geometryRings(geometry) {
+  if (geometry.type === "polygon") return [geometry.polygon];
+  return geometry.polygons;
+}
+function ringCentroid(ring) {
+  if (ring.length === 0) return { x: 0, y: 0 };
+  const total = ring.reduce(
+    (accumulator, position) => {
+      const projected = projectEquirectangular(position);
+      return { x: accumulator.x + projected.x, y: accumulator.y + projected.y };
+    },
+    { x: 0, y: 0 }
+  );
+  return { x: total.x / ring.length, y: total.y / ring.length };
+}
+const MapTimelineLayer = forwardRef(
+  (props, ref) => {
+    const {
+      color = "blue",
+      endYear,
+      geometry,
+      id,
+      label,
+      startYear,
+      ...rest
+    } = props;
+    const { year } = useTimelineContext();
+    if (year < startYear || year > endYear) return null;
+    const palette = PALETTE[color];
+    const rings = geometryRings(geometry);
+    const centroid = rings[0] ? ringCentroid(rings[0]) : { x: 0, y: 0 };
+    return /* @__PURE__ */ jsxs("g", { "data-layer-id": id, "data-state": "visible", ref, ...rest, children: [
+      rings.map((ring, index) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `${ringToPath(ring)} Z`,
+          fill: palette.fill,
+          stroke: palette.stroke,
+          strokeWidth: 1.5
+        },
+        `${id ?? "layer"}-ring-${index.toString()}`
+      )),
+      label ? /* @__PURE__ */ jsx(
+        "text",
+        {
+          className: "select-none fill-foreground text-[11px] font-semibold",
+          dominantBaseline: "middle",
+          textAnchor: "middle",
+          x: centroid.x,
+          y: centroid.y,
+          children: label
+        }
+      ) : null
+    ] });
+  }
+);
+MapTimelineLayer.displayName = "MapTimelineLayer";
+const MapTimelineEvent = forwardRef(
+  (props, ref) => {
+    const {
+      color = "red",
+      description,
+      id,
+      position,
+      title,
+      toleranceYears = 0,
+      year: eventYear,
+      ...rest
+    } = props;
+    const { year } = useTimelineContext();
+    const visible = Math.abs(year - eventYear) <= toleranceYears;
+    if (!visible) return null;
+    const palette = PALETTE[color];
+    const projected = projectEquirectangular(position);
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-event-id": id,
+        "data-event-year": eventYear,
+        ref,
+        transform: `translate(${projected.x.toString()}, ${projected.y.toString()})`,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("stroke-background", palette.dot),
+              r: "6",
+              strokeWidth: "2",
+              children: title ? /* @__PURE__ */ jsx("title", { children: typeof title === "string" ? title : "" }) : null
+            }
+          ),
+          title ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-foreground text-[10px] font-semibold",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "-12",
+              children: title
+            }
+          ) : null,
+          description ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-muted-foreground text-[9px]",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "20",
+              children: description
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+MapTimelineEvent.displayName = "MapTimelineEvent";
+const MapTimelineControls = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-3 border-t border-border bg-muted/40 px-4 py-2",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+MapTimelineControls.displayName = "MapTimelineControls";
+const MapTimelineSlider = forwardRef(({ className, ...rest }, ref) => {
+  const { endYear, labels, setYear, startYear, year } = useTimelineContext();
+  const sliderId = useId();
+  const handleChange = (event) => {
+    setYear(Number.parseInt(event.target.value, 10));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-2 text-xs font-medium text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: formatYear(startYear) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-label": labels.slider,
+        "aria-valuemax": endYear,
+        "aria-valuemin": startYear,
+        "aria-valuenow": year,
+        className: cn("flex-1 accent-primary", className),
+        id: sliderId,
+        max: endYear,
+        min: startYear,
+        onChange: handleChange,
+        ref,
+        type: "range",
+        value: year,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: formatYear(endYear) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ml-2 inline-flex min-w-20 justify-center rounded-md border border-border bg-background px-2 py-0.5 text-foreground",
+        "data-current-year": year,
+        children: formatYear(year)
+      }
+    )
+  ] });
+});
+MapTimelineSlider.displayName = "MapTimelineSlider";
+const MapTimelinePlayButton = forwardRef(({ className, ...rest }, ref) => {
+  const { isPlaying, labels, setIsPlaying } = useTimelineContext();
+  const handleClick = () => {
+    setIsPlaying(!isPlaying);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": isPlaying ? labels.pause : labels.play,
+      "aria-pressed": isPlaying,
+      className: cn(
+        "inline-flex h-8 items-center rounded-md border border-border bg-background px-3 text-xs font-medium hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "data-playing": isPlaying ? "true" : void 0,
+      onClick: handleClick,
+      ref,
+      type: "button",
+      ...rest,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: isPlaying ? "\u275A\u275A" : "\u25B6" })
+    }
+  );
+});
+MapTimelinePlayButton.displayName = "MapTimelinePlayButton";
+function useTimelineCtx(arguments_) {
+  const {
+    endYear,
+    isPlaying,
+    labels,
+    setIsPlaying,
+    setYear,
+    speed,
+    startYear,
+    year
+  } = arguments_;
+  return useMemo(
+    () => ({
+      endYear,
+      isPlaying,
+      labels,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    }),
+    [endYear, isPlaying, labels, setIsPlaying, setYear, speed, startYear, year]
+  );
+}
+function useTimelineState(arguments_) {
+  const { endYear, initialYear, onYearChange, startYear } = arguments_;
+  const [year, setYear] = useState(
+    clamp(initialYear ?? startYear, startYear, endYear)
+  );
+  const [isPlaying, setIsPlaying] = useState(false);
+  const updateYear = useCallback(
+    (next) => {
+      const clamped = clamp(next, startYear, endYear);
+      setYear((current) => {
+        if (clamped >= endYear) setIsPlaying(false);
+        if (current === clamped) return current;
+        onYearChange?.(clamped);
+        return clamped;
+      });
+    },
+    [endYear, onYearChange, startYear]
+  );
+  return { isPlaying, setIsPlaying, setYear: updateYear, year };
+}
+function usePlayback(arguments_) {
+  const { endYear, isPlaying, setIsPlaying, setYear, speed, year } = arguments_;
+  const yearRef = useRef(year);
+  useEffect(() => {
+    yearRef.current = year;
+  }, [year]);
+  useEffect(() => {
+    if (!isPlaying) return;
+    if (typeof window === "undefined") return;
+    let frame = 0;
+    let last = null;
+    const step = (timestamp) => {
+      if (last !== null) {
+        const delta = (timestamp - last) / 1e3;
+        const next = yearRef.current + delta * speed;
+        if (next >= endYear) {
+          setYear(endYear);
+          setIsPlaying(false);
+          return;
+        }
+        setYear(next);
+      }
+      last = timestamp;
+      frame = window.requestAnimationFrame(step);
+    };
+    frame = window.requestAnimationFrame(step);
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [endYear, isPlaying, setIsPlaying, setYear, speed]);
+}
+function Stage({ backdrop, backdropAlt, children }) {
+  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,
+        children
+      ]
+    }
+  );
+}
+function bucketChildren(children) {
+  const list = Array.isArray(children) ? children : [children];
+  return list.reduce(
+    (accumulator, child) => {
+      const name = displayName(child);
+      if (name === MapTimelineControls.displayName)
+        accumulator.footer.push(child);
+      else accumulator.stage.push(child);
+      return accumulator;
+    },
+    { footer: [], stage: [] }
+  );
+}
+function displayName(child) {
+  if (typeof child !== "object" || child === null) return void 0;
+  if (!("type" in child)) return void 0;
+  const type = child.type;
+  if (typeof type !== "object" && typeof type !== "function") return void 0;
+  const name = type.displayName;
+  return typeof name === "string" ? name : void 0;
+}
+const Shell = forwardRef(function Shell2(props, ref) {
+  const { backdrop, backdropAlt, buckets, className, region, titleId, year } = props;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "flex w-full flex-col overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: region }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative aspect-[2/1] w-full overflow-hidden",
+            "data-current-year": year,
+            children: /* @__PURE__ */ jsx(Stage, { backdrop, backdropAlt, children: buckets.stage })
+          }
+        ),
+        buckets.footer
+      ]
+    }
+  );
+});
+const MapTimeline = forwardRef(
+  (props, ref) => {
+    const {
+      backdrop,
+      backdropAlt,
+      children,
+      className,
+      endYear,
+      initialYear,
+      labels,
+      onYearChange,
+      speed = 25,
+      startYear,
+      ...rest
+    } = props;
+    const titleId = useId();
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const { isPlaying, setIsPlaying, setYear, year } = useTimelineState({
+      endYear,
+      initialYear,
+      onYearChange,
+      speed,
+      startYear
+    });
+    usePlayback({
+      endYear,
+      isPlaying,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    });
+    const ctx = useTimelineCtx({
+      endYear,
+      isPlaying,
+      labels: resolvedLabels,
+      setIsPlaying,
+      setYear,
+      speed,
+      startYear,
+      year
+    });
+    const buckets = bucketChildren(children);
+    return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+      Shell,
+      {
+        backdrop,
+        backdropAlt,
+        buckets,
+        className,
+        ref,
+        region: resolvedLabels.region,
+        titleId,
+        year,
+        ...rest
+      }
+    ) });
+  }
+);
+MapTimeline.displayName = "MapTimeline";
+export {
+  MapTimeline,
+  MapTimelineControls,
+  MapTimelineEvent,
+  MapTimelineLayer,
+  MapTimelinePlayButton,
+  MapTimelineSlider
+};

package/dist/components/metric-cluster/index.js

@@ -0,0 +1,6 @@
+import {
+  MetricCluster
+} from "./metric-cluster";
+export {
+  MetricCluster
+};

package/dist/components/metric-cluster/metric-cluster.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const TONE_DOT = {
+  danger: "bg-red-500",
+  neutral: "bg-muted-foreground",
+  success: "bg-emerald-500",
+  warn: "bg-amber-500"
+};
+const ANCHOR_TRANSFORM = {
+  "bottom-left": "translate(-100%, 100%)",
+  "bottom-right": "translate(0%, 100%)",
+  "top-left": "translate(-100%, -100%)",
+  "top-right": "translate(0%, -100%)"
+};
+const DEFAULT_LABELS = {
+  region: "Metric cluster"
+};
+const Row = (props) => {
+  const { entry } = props;
+  const tone = entry.tone ?? "neutral";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-center justify-between gap-2 text-[11px]",
+      "data-metric-cluster-row": entry.id,
+      "data-metric-cluster-tone": tone,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn("h-1.5 w-1.5 rounded-full", TONE_DOT[tone])
+            }
+          ),
+          entry.label
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: entry.value })
+      ]
+    }
+  );
+};
+const MetricCluster = forwardRef(
+  (props, ref) => {
+    const {
+      anchor = "top-right",
+      className,
+      labels,
+      metrics,
+      title,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-20 flex flex-col gap-1 rounded-md border border-border bg-background/90 p-2 shadow-sm backdrop-blur",
+          className
+        ),
+        "data-metric-cluster": true,
+        "data-metric-cluster-anchor": anchor,
+        ref,
+        role: "status",
+        style: {
+          left: x,
+          top: y,
+          transform: ANCHOR_TRANSFORM[anchor]
+        },
+        ...rest,
+        children: [
+          title ? /* @__PURE__ */ jsx(
+            "header",
+            {
+              className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground",
+              "data-metric-cluster-title": true,
+              children: title
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: metrics.map((entry) => /* @__PURE__ */ jsx(Row, { entry }, entry.id)) })
+        ]
+      }
+    );
+  }
+);
+MetricCluster.displayName = "MetricCluster";
+export {
+  MetricCluster
+};

package/dist/components/mini-map-panel/index.js

@@ -0,0 +1,6 @@
+import {
+  MiniMapPanel
+} from "./mini-map-panel";
+export {
+  MiniMapPanel
+};

package/dist/components/mini-map-panel/mini-map-panel.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const MiniMapPanel = forwardRef(
+  ({ className, markers = [], title = "Overview", viewport, world, ...props }, ref) => {
+    const viewportWidth = Math.max(
+      viewport.width / viewport.zoom / world.width * 100,
+      8
+    );
+    const viewportHeight = Math.max(
+      viewport.height / viewport.zoom / world.height * 100,
+      8
+    );
+    const viewportLeft = Math.min(
+      Math.max(viewport.x / world.width * 100, 0),
+      100 - viewportWidth
+    );
+    const viewportTop = Math.min(
+      Math.max(viewport.y / world.height * 100, 0),
+      100 - viewportHeight
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "w-52 rounded-sm border border-border bg-background p-3 font-mono",
+          className
+        ),
+        ref,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-[0.24em] text-muted-foreground", children: title }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1 text-xs text-muted-foreground", children: [
+              "Zoom ",
+              Math.round(viewport.zoom * 100),
+              "%"
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs("div", { className: "relative aspect-[4/3] overflow-hidden rounded-sm border border-border bg-background", children: [
+            markers.map((marker) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute size-1.5 -translate-x-1/2 -translate-y-1/2 bg-foreground",
+                style: {
+                  left: `${marker.x / world.width * 100}%`,
+                  top: `${marker.y / world.height * 100}%`
+                },
+                title: marker.label
+              },
+              marker.id
+            )),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "absolute border border-foreground/80 bg-transparent",
+                style: {
+                  height: `${viewportHeight}%`,
+                  left: `${viewportLeft}%`,
+                  top: `${viewportTop}%`,
+                  width: `${viewportWidth}%`
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+MiniMapPanel.displayName = "MiniMapPanel";
+export {
+  MiniMapPanel
+};

package/dist/components/model-comparison/index.js

@@ -0,0 +1,12 @@
+import {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+} from "./model-comparison";
+export {
+  ModelComparison,
+  ModelComparisonColumn,
+  ModelComparisonMeta,
+  ModelComparisonVote
+};