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

package/dist/components/glass-panel/glass-panel.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const GlassPanel = forwardRef(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "rounded-2xl border border-border/60 bg-background/70 shadow-[0_12px_40px_hsl(var(--foreground)/0.08)] backdrop-blur-xl",
+        className
+      ),
+      ref,
+      ...props,
+      children
+    }
+  )
+);
+GlassPanel.displayName = "GlassPanel";
+export {
+  GlassPanel
+};

package/dist/components/glass-panel/index.js

@@ -0,0 +1,4 @@
+import { GlassPanel } from "./glass-panel";
+export {
+  GlassPanel
+};

package/dist/components/globe-3d/globe-3d.js

@@ -0,0 +1,417 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const VIEWBOX = 400;
+const SPHERE_RADIUS = 180;
+const CENTER = VIEWBOX / 2;
+const PALETTE = {
+  amber: { fill: "fill-amber-500", stroke: "stroke-amber-500" },
+  blue: { fill: "fill-blue-500", stroke: "stroke-blue-500" },
+  cyan: { fill: "fill-cyan-500", stroke: "stroke-cyan-500" },
+  emerald: { fill: "fill-emerald-500", stroke: "stroke-emerald-500" },
+  purple: { fill: "fill-purple-500", stroke: "stroke-purple-500" },
+  red: { fill: "fill-red-500", stroke: "stroke-red-500" },
+  rose: { fill: "fill-rose-500", stroke: "stroke-rose-500" }
+};
+const DEFAULT_LABELS = {
+  region: "Globe"
+};
+function toRadians(degrees) {
+  return degrees * Math.PI / 180;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function rotate(vector, lngOffset, latOffset) {
+  const yawRad = toRadians(lngOffset);
+  const pitchRad = toRadians(latOffset);
+  const cosY = Math.cos(yawRad);
+  const sinY = Math.sin(yawRad);
+  const xy = vector.x * cosY + vector.z * sinY;
+  const zy = -vector.x * sinY + vector.z * cosY;
+  const cosP = Math.cos(pitchRad);
+  const sinP = Math.sin(pitchRad);
+  const yp = vector.y * cosP - zy * sinP;
+  const zp = vector.y * sinP + zy * cosP;
+  return { x: xy, y: yp, z: zp };
+}
+function latLngToVector({ lat, lng }) {
+  const phi = toRadians(90 - lat);
+  const theta = toRadians(lng);
+  return {
+    x: Math.sin(phi) * Math.sin(theta),
+    y: Math.cos(phi),
+    z: Math.sin(phi) * Math.cos(theta)
+  };
+}
+function project(coord, rotationLng, rotationLat) {
+  const baseVector = latLngToVector(coord);
+  const rotated = rotate(baseVector, rotationLng, rotationLat);
+  return {
+    visible: rotated.z >= 0,
+    x: CENTER + rotated.x * SPHERE_RADIUS,
+    y: CENTER - rotated.y * SPHERE_RADIUS,
+    z: rotated.z
+  };
+}
+const GlobeContext = createContext(null);
+function useGlobeContext() {
+  const ctx = useContext(GlobeContext);
+  if (!ctx) {
+    throw new Error("Globe3D subcomponent used outside its root.");
+  }
+  return ctx;
+}
+const GlobeMarker = forwardRef(
+  (props, ref) => {
+    const { color = "red", id, label, lat, lng, ...rest } = props;
+    const { rotationLat, rotationLng } = useGlobeContext();
+    const projected = project({ lat, lng }, rotationLng, rotationLat);
+    if (!projected.visible) return null;
+    const palette = PALETTE[color];
+    return /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-marker-id": id,
+        "data-marker-visible": "true",
+        ref,
+        transform: `translate(${projected.x.toString()}, ${projected.y.toString()})`,
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: cn("stroke-background", palette.fill),
+              r: "5",
+              strokeWidth: "1.5"
+            }
+          ),
+          label ? /* @__PURE__ */ jsx(
+            "text",
+            {
+              className: "select-none fill-foreground text-[10px] font-semibold",
+              dominantBaseline: "middle",
+              textAnchor: "middle",
+              y: "-10",
+              children: label
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+GlobeMarker.displayName = "GlobeMarker";
+function buildArc(arguments_) {
+  const { from, rotationLat, rotationLng, to } = arguments_;
+  const samples = 36;
+  return Array.from({ length: samples + 1 }).map((_, index) => {
+    const t = index / samples;
+    const lat = from.lat + (to.lat - from.lat) * t;
+    const lng = from.lng + (to.lng - from.lng) * t;
+    return project({ lat, lng }, rotationLng, rotationLat);
+  }).reduce(
+    (state, projected) => {
+      if (!projected.visible) return { path: state.path, pen: "up" };
+      const head = state.pen === "up" ? "M" : "L";
+      const separator = state.path.length > 0 ? " " : "";
+      return {
+        path: `${state.path}${separator}${head}${projected.x.toString()},${projected.y.toString()}`,
+        pen: "down"
+      };
+    },
+    { path: "", pen: "up" }
+  ).path;
+}
+const GlobeArc = forwardRef(
+  (props, ref) => {
+    const { color = "cyan", from, id, strokeWidth = 2, to, ...rest } = props;
+    const { rotationLat, rotationLng } = useGlobeContext();
+    const path = buildArc({ from, rotationLat, rotationLng, to });
+    if (!path) return null;
+    const palette = PALETTE[color];
+    return /* @__PURE__ */ jsx(
+      "path",
+      {
+        className: cn("fill-none", palette.stroke),
+        d: path,
+        "data-arc-id": id,
+        ref,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth,
+        ...rest
+      }
+    );
+  }
+);
+GlobeArc.displayName = "GlobeArc";
+function buildLine(arguments_) {
+  const { points, rotationLat, rotationLng } = arguments_;
+  return points.map((coord) => project(coord, rotationLng, rotationLat)).reduce(
+    (state, projected) => {
+      if (!projected.visible) return { path: state.path, pen: "up" };
+      const head = state.pen === "up" ? "M" : "L";
+      const separator = state.path.length > 0 ? " " : "";
+      return {
+        path: `${state.path}${separator}${head}${projected.x.toString()},${projected.y.toString()}`,
+        pen: "down"
+      };
+    },
+    { path: "", pen: "up" }
+  ).path;
+}
+function range(start, end, step) {
+  const length = Math.floor((end - start) / step) + 1;
+  return Array.from({ length }).map((_, index) => start + index * step);
+}
+function Graticule({ rotationLat, rotationLng }) {
+  const parallels = range(-60, 60, 30).map(
+    (lat) => range(-180, 180, 5).map((lng) => ({ lat, lng }))
+  );
+  const meridians = range(-150, 180, 30).map(
+    (lng) => range(-85, 85, 5).map((lat) => ({ lat, lng }))
+  );
+  const lines = [...parallels, ...meridians].map((points) => buildLine({ points, rotationLat, rotationLng })).filter((path) => path.length > 0);
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      className: "fill-none stroke-foreground/20",
+      "data-globe-graticule": true,
+      strokeWidth: 0.5,
+      children: lines.map((path) => /* @__PURE__ */ jsx("path", { d: path }, path))
+    }
+  );
+}
+function Sphere({
+  children,
+  rotationLat,
+  rotationLng
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className: "block h-full w-full touch-none",
+      "data-rotation-lat": rotationLat,
+      "data-rotation-lng": rotationLng,
+      preserveAspectRatio: "xMidYMid meet",
+      viewBox: `0 0 ${VIEWBOX.toString()} ${VIEWBOX.toString()}`,
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { cx: "50%", cy: "40%", id: "globe-shade", r: "60%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(99, 102, 241, 0.4)" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(15, 23, 42, 0.85)" })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "fill-[url(#globe-shade)] stroke-foreground/30",
+            cx: CENTER,
+            cy: CENTER,
+            "data-globe-sphere": true,
+            r: SPHERE_RADIUS,
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsx(Graticule, { rotationLat, rotationLng }),
+        children
+      ]
+    }
+  );
+}
+function useAutoRotation(arguments_) {
+  const { autoRotate, isDragging, rotationSpeed, setRotationLng } = arguments_;
+  useEffect(() => {
+    if (!autoRotate || isDragging) return;
+    if (typeof window === "undefined") return;
+    let frame = 0;
+    let last = null;
+    const step = (timestamp) => {
+      if (last !== null) {
+        const delta = (timestamp - last) / 1e3;
+        setRotationLng((current) => current + delta * rotationSpeed);
+      }
+      last = timestamp;
+      frame = window.requestAnimationFrame(step);
+    };
+    frame = window.requestAnimationFrame(step);
+    return () => {
+      window.cancelAnimationFrame(frame);
+    };
+  }, [autoRotate, isDragging, rotationSpeed, setRotationLng]);
+}
+function useDragRotation(arguments_) {
+  const {
+    rotationLat,
+    rotationLng,
+    setIsDragging,
+    setRotationLat,
+    setRotationLng
+  } = arguments_;
+  const dragRef = useRef(null);
+  const onPointerDown = useCallback(
+    (event) => {
+      dragRef.current = {
+        originLat: rotationLat,
+        originLng: rotationLng,
+        originX: event.clientX,
+        originY: event.clientY
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsDragging(true);
+    },
+    [rotationLat, rotationLng, setIsDragging]
+  );
+  const onPointerMove = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const dx = event.clientX - drag.originX;
+      const dy = event.clientY - drag.originY;
+      setRotationLng(drag.originLng + dx * 0.4);
+      setRotationLat(clamp(drag.originLat - dy * 0.4, -85, 85));
+    },
+    [setRotationLat, setRotationLng]
+  );
+  const onPointerEnd = useCallback(
+    (event) => {
+      const target = event.currentTarget;
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+      dragRef.current = null;
+      setIsDragging(false);
+    },
+    [setIsDragging]
+  );
+  return {
+    onPointerCancel: onPointerEnd,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: onPointerEnd
+  };
+}
+function useGlobeRotation(initialPosition) {
+  const [rotationLng, setRotationLng] = useState(-initialPosition.lng);
+  const [rotationLat, setRotationLat] = useState(initialPosition.lat);
+  const [isDragging, setIsDragging] = useState(false);
+  return {
+    isDragging,
+    rotationLat,
+    rotationLng,
+    setIsDragging,
+    setRotationLat,
+    setRotationLng
+  };
+}
+function DataSummary({ children, titleId }) {
+  const markers = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    const element = child;
+    if (typeof element.props.lat === "number" && typeof element.props.lng === "number") {
+      markers.push({
+        color: element.props.color ?? "red",
+        label: element.props.label ?? null,
+        lat: element.props.lat,
+        lng: element.props.lng
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": titleId, className: "sr-only", role: "region", children: [
+    /* @__PURE__ */ jsx("h3", { id: titleId, children: "Globe data summary" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      markers.length.toString(),
+      " marker(s) plotted on the globe."
+    ] }),
+    /* @__PURE__ */ jsx("ul", { children: markers.map((marker, index) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        children: `${marker.lat.toString()}, ${marker.lng.toString()}: ${marker.label ? String(marker.label) : marker.color}`
+      },
+      `${index.toString()}-${marker.lat.toString()}-${marker.lng.toString()}`
+    )) })
+  ] });
+}
+const Globe3D = forwardRef((props, ref) => {
+  const {
+    autoRotate = true,
+    children,
+    className,
+    initialPosition = { lat: 20, lng: 0 },
+    labels,
+    rotationSpeed = 8,
+    ...rest
+  } = props;
+  const titleId = useId();
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const {
+    isDragging,
+    rotationLat,
+    rotationLng,
+    setIsDragging,
+    setRotationLat,
+    setRotationLng
+  } = useGlobeRotation(initialPosition);
+  useAutoRotation({ autoRotate, isDragging, rotationSpeed, setRotationLng });
+  const handlers = useDragRotation({
+    rotationLat,
+    rotationLng,
+    setIsDragging,
+    setRotationLat,
+    setRotationLng: (next) => {
+      setRotationLng(next);
+    }
+  });
+  const ctx = useMemo(
+    () => ({ rotationLat, rotationLng }),
+    [rotationLat, rotationLng]
+  );
+  return /* @__PURE__ */ jsx(GlobeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-labelledby": titleId,
+      className: cn(
+        "relative aspect-square w-full max-w-md overflow-hidden rounded-2xl border bg-background text-foreground",
+        className
+      ),
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", id: titleId, children: resolvedLabels.region }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "block h-full w-full cursor-grab active:cursor-grabbing",
+            "data-globe-stage": true,
+            ...handlers,
+            children: /* @__PURE__ */ jsx(Sphere, { rotationLat, rotationLng, children })
+          }
+        ),
+        /* @__PURE__ */ jsx(DataSummary, { titleId, children })
+      ]
+    }
+  ) });
+});
+Globe3D.displayName = "Globe3D";
+export {
+  Globe3D,
+  GlobeArc,
+  GlobeMarker
+};

package/dist/components/globe-3d/index.js

@@ -0,0 +1,10 @@
+import {
+  Globe3D,
+  GlobeArc,
+  GlobeMarker
+} from "./globe-3d";
+export {
+  Globe3D,
+  GlobeArc,
+  GlobeMarker
+};

package/dist/components/group-hull/group-hull.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../lib/utils";
+const GroupHull = forwardRef(
+  ({ children, className, description, eyebrow, title, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "relative flex min-h-[280px] flex-col gap-4 rounded-[2rem] border border-dashed border-border/70 bg-muted/12 p-5",
+        className
+      ),
+      ref,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-3 rounded-[1.5rem] border border-border/40" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative space-y-1", children: [
+          eyebrow ? /* @__PURE__ */ jsx("div", { className: "text-[11px] uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) : null,
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight text-foreground", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "max-w-[48ch] text-sm leading-6 text-muted-foreground", children: description }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative flex flex-1 flex-wrap items-start gap-4", children })
+      ]
+    }
+  )
+);
+GroupHull.displayName = "GroupHull";
+export {
+  GroupHull
+};

package/dist/components/group-hull/index.js

@@ -0,0 +1,4 @@
+import { GroupHull } from "./group-hull";
+export {
+  GroupHull
+};

package/dist/components/handoff-beacon/handoff-beacon.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const LEVEL_RING = {
+  info: "ring-blue-500",
+  request: "ring-amber-500",
+  urgent: "ring-red-500 animate-pulse"
+};
+const LEVEL_DOT = {
+  info: "bg-blue-500",
+  request: "bg-amber-500",
+  urgent: "bg-red-500"
+};
+const DEFAULT_LABELS = {
+  region: "Attention"
+};
+const HandoffBeacon = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      labels,
+      level = "info",
+      message,
+      source,
+      x,
+      y,
+      ...rest
+    } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "pointer-events-none absolute z-30 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-1",
+          className
+        ),
+        "data-handoff-level": level,
+        ref,
+        role: "status",
+        style: { left: `${x.toString()}px`, top: `${y.toString()}px` },
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "block h-3 w-3 rounded-full ring-2 ring-offset-2 ring-offset-background",
+                LEVEL_DOT[level],
+                LEVEL_RING[level]
+              )
+            }
+          ),
+          source || message ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "pointer-events-auto rounded-md border border-border bg-popover px-2 py-1 text-center text-[11px] font-medium shadow-md",
+              "data-handoff-card": true,
+              children: source ? /* @__PURE__ */ jsxs("p", { className: "text-foreground", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-semibold", children: source }),
+                message ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: " \xB7 " }) : null,
+                message ? /* @__PURE__ */ jsx("span", { children: message }) : null
+              ] }) : message ? /* @__PURE__ */ jsx("p", { className: "text-foreground", children: message }) : null
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+HandoffBeacon.displayName = "HandoffBeacon";
+export {
+  HandoffBeacon
+};

package/dist/components/handoff-beacon/index.js

@@ -0,0 +1,6 @@
+import {
+  HandoffBeacon
+} from "./handoff-beacon";
+export {
+  HandoffBeacon
+};