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

package/dist/components/map-2d/map-2d.js

@@ -0,0 +1,455 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const MIN_ZOOM = 1;
+const MAX_ZOOM = 32;
+const ZOOM_STEP = 1.5;
+const VIEWBOX_WIDTH = 1e3;
+const VIEWBOX_HEIGHT = 500;
+const DEFAULT_LABELS = {
+  region: "Map",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out"
+};
+const MapContext = createContext(null);
+function useMapContext() {
+  const ctx = useContext(MapContext);
+  if (!ctx) {
+    throw new Error("Map2D subcomponent used outside its root.");
+  }
+  return ctx;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function projectEquirectangular(position, width, height) {
+  const [lng, lat] = position;
+  const x = (lng + 180) / 360 * width;
+  const y = (90 - lat) / 180 * height;
+  return { x, y };
+}
+function useMapState(arguments_) {
+  const { center, initialZoom, resolvedLabels } = arguments_;
+  const initialPan = useMemo(() => {
+    const target = projectEquirectangular(
+      center,
+      VIEWBOX_WIDTH,
+      VIEWBOX_HEIGHT
+    );
+    return {
+      x: VIEWBOX_WIDTH / 2 - target.x,
+      y: VIEWBOX_HEIGHT / 2 - target.y
+    };
+  }, [center]);
+  const [pan, setPan] = useState(initialPan);
+  const [zoom, setZoom] = useState(
+    clamp(initialZoom, MIN_ZOOM, MAX_ZOOM)
+  );
+  const zoomIn = useCallback(() => {
+    setZoom((current) => clamp(current * ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, []);
+  const zoomOut = useCallback(() => {
+    setZoom((current) => clamp(current / ZOOM_STEP, MIN_ZOOM, MAX_ZOOM));
+  }, []);
+  const project = useCallback(
+    (position) => projectEquirectangular(position, VIEWBOX_WIDTH, VIEWBOX_HEIGHT),
+    []
+  );
+  return useMemo(
+    () => ({
+      height: VIEWBOX_HEIGHT,
+      labels: resolvedLabels,
+      pan,
+      project,
+      setPan,
+      width: VIEWBOX_WIDTH,
+      zoom,
+      zoomIn,
+      zoomOut
+    }),
+    [pan, project, resolvedLabels, zoom, zoomIn, zoomOut]
+  );
+}
+const MapControls = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-label": "Map controls",
+    className: cn(
+      "absolute right-3 top-3 z-20 flex flex-col gap-1 rounded-md border border-border bg-background/95 p-1 shadow-sm backdrop-blur",
+      className
+    ),
+    ref,
+    ...rest,
+    children
+  }
+));
+MapControls.displayName = "MapControls";
+const ControlButton = forwardRef(
+  ({ ariaLabel, className, glyph, onActivate, ...rest }, ref) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex size-7 items-center justify-center rounded text-sm font-semibold hover:bg-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      onClick: onActivate,
+      ref,
+      type: "button",
+      ...rest,
+      children: glyph
+    }
+  )
+);
+ControlButton.displayName = "ControlButton";
+const MapZoomIn = forwardRef(({ ...rest }, ref) => {
+  const { labels, zoomIn } = useMapContext();
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      ariaLabel: labels.zoomIn,
+      glyph: "+",
+      onActivate: zoomIn,
+      ref,
+      ...rest
+    }
+  );
+});
+MapZoomIn.displayName = "MapZoomIn";
+const MapZoomOut = forwardRef(({ ...rest }, ref) => {
+  const { labels, zoomOut } = useMapContext();
+  return /* @__PURE__ */ jsx(
+    ControlButton,
+    {
+      ariaLabel: labels.zoomOut,
+      glyph: "\u2212",
+      onActivate: zoomOut,
+      ref,
+      ...rest
+    }
+  );
+});
+MapZoomOut.displayName = "MapZoomOut";
+const MapMarkerIcon = forwardRef(({ children, className, ...rest }, ref) => /* @__PURE__ */ jsx("g", { className: cn("text-primary", className), ref, ...rest, children }));
+MapMarkerIcon.displayName = "MapMarkerIcon";
+function MarkerVisual({ children }) {
+  if (children) return children;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        className: "fill-primary stroke-background",
+        cx: "0",
+        cy: "0",
+        r: "7",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx("circle", { className: "fill-background", cx: "0", cy: "0", r: "2" })
+  ] });
+}
+const MapMarker = forwardRef(
+  (props, ref) => {
+    const { children, className, onSelect, popup, position, title, ...rest } = props;
+    const { project } = useMapContext();
+    const point = project(position);
+    const markerId = useId();
+    const popupId = `${markerId}-popup`;
+    const labelText = title ?? (typeof popup === "string" ? popup : `Marker at ${position.join(", ")}`);
+    return /* @__PURE__ */ jsx("foreignObject", { height: "48", width: "48", x: point.x - 24, y: point.y - 24, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "aria-describedby": popup ? popupId : void 0,
+        "aria-label": labelText,
+        className: cn(
+          "group relative inline-flex h-full w-full cursor-pointer items-center justify-center bg-transparent p-0 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        "data-marker-id": markerId,
+        onClick: onSelect,
+        ref,
+        type: "button",
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "pointer-events-none size-6 overflow-visible",
+              viewBox: "-10 -10 20 20",
+              children: /* @__PURE__ */ jsx(MarkerVisual, { children })
+            }
+          ),
+          popup ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden min-w-32 max-w-xs -translate-x-1/2 rounded-md border bg-popover px-2 py-1 text-center text-xs text-popover-foreground shadow-md group-hover:block group-focus-visible:block",
+              id: popupId,
+              role: "tooltip",
+              children: popup
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+MapMarker.displayName = "MapMarker";
+const MapPopup = forwardRef(
+  (props, ref) => {
+    const { children, className, position, ...rest } = props;
+    const { project } = useMapContext();
+    const point = project(position);
+    return /* @__PURE__ */ jsx(
+      "foreignObject",
+      {
+        height: "200",
+        width: "320",
+        x: point.x - 160,
+        y: point.y - 220,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "pointer-events-auto inline-block max-w-xs -translate-y-2 rounded-md border bg-popover px-3 py-2 text-sm text-popover-foreground shadow-md",
+              className
+            ),
+            ref,
+            ...rest,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+MapPopup.displayName = "MapPopup";
+const MapLayer = forwardRef((props, ref) => {
+  const {
+    className,
+    data,
+    fill = "rgba(59, 130, 246, 0.15)",
+    stroke = "currentColor",
+    strokeWidth = 2,
+    ...rest
+  } = props;
+  const { project } = useMapContext();
+  return /* @__PURE__ */ jsx(
+    "g",
+    {
+      className: cn("text-blue-500/70", className),
+      "data-layer": "polygon",
+      ref,
+      ...rest,
+      children: data.map((shape) => {
+        const points = shape.coordinates.map((coord) => {
+          const projected = project(coord);
+          return `${projected.x.toString()},${projected.y.toString()}`;
+        }).join(" ");
+        return /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            "data-shape-id": shape.id,
+            fill,
+            points,
+            stroke,
+            strokeWidth
+          },
+          shape.id
+        );
+      })
+    }
+  );
+});
+MapLayer.displayName = "MapLayer";
+function usePanHandlers() {
+  const { height, pan, setPan, width, zoom } = useMapContext();
+  const dragRef = useRef(null);
+  const onPointerDown = useCallback(
+    (event) => {
+      dragRef.current = {
+        originPan: pan,
+        originX: event.clientX,
+        originY: event.clientY
+      };
+      event.currentTarget.setPointerCapture(event.pointerId);
+    },
+    [pan]
+  );
+  const onPointerMove = useCallback(
+    (event) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const target = event.currentTarget;
+      const rect = target.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const scaleX = width / rect.width;
+      const scaleY = height / rect.height;
+      const dx = (event.clientX - drag.originX) * scaleX;
+      const dy = (event.clientY - drag.originY) * scaleY;
+      setPan({
+        x: drag.originPan.x + dx / zoom,
+        y: drag.originPan.y + dy / zoom
+      });
+    },
+    [height, setPan, width, zoom]
+  );
+  const onPointerEnd = useCallback(
+    (event) => {
+      const target = event.currentTarget;
+      if (target.hasPointerCapture(event.pointerId)) {
+        target.releasePointerCapture(event.pointerId);
+      }
+      dragRef.current = null;
+    },
+    []
+  );
+  return {
+    onPointerCancel: onPointerEnd,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp: onPointerEnd
+  };
+}
+function Stage({ backdrop, backdropAlt, children }) {
+  const { height, pan, width, zoom } = useMapContext();
+  const handlers = usePanHandlers();
+  const innerWidth = width / zoom;
+  const innerHeight = height / zoom;
+  const viewX = (width - innerWidth) / 2 - pan.x;
+  const viewY = (height - innerHeight) / 2 - pan.y;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "block h-full w-full cursor-grab touch-none active:cursor-grabbing",
+      "data-pan-x": pan.x,
+      "data-pan-y": pan.y,
+      "data-zoom": zoom,
+      preserveAspectRatio: "xMidYMid slice",
+      role: "presentation",
+      viewBox: `${viewX.toString()} ${viewY.toString()} ${innerWidth.toString()} ${innerHeight.toString()}`,
+      ...handlers,
+      children: [
+        /* @__PURE__ */ jsx("rect", { className: "fill-muted", height, width, x: "0", y: "0" }),
+        backdrop ? /* @__PURE__ */ jsx(
+          "image",
+          {
+            "aria-label": backdropAlt,
+            height,
+            href: backdrop,
+            preserveAspectRatio: "xMidYMid slice",
+            width,
+            x: "0",
+            y: "0"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+const SLOT_DISPLAY_NAMES = {
+  controls: MapControls.displayName,
+  layer: MapLayer.displayName,
+  marker: MapMarker.displayName,
+  popup: MapPopup.displayName
+};
+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 SLOT_KEY_BY_NAME = {
+  [SLOT_DISPLAY_NAMES.controls]: "controls",
+  [SLOT_DISPLAY_NAMES.layer]: "layer",
+  [SLOT_DISPLAY_NAMES.marker]: "marker",
+  [SLOT_DISPLAY_NAMES.popup]: "popup"
+};
+function bucketChildren(children) {
+  const list = Array.isArray(children) ? children : [children];
+  return list.reduce(
+    (accumulator, child) => {
+      const name = displayName(child);
+      if (!name) return accumulator;
+      const key = SLOT_KEY_BY_NAME[name];
+      if (!key) return accumulator;
+      switch (key) {
+        case "controls":
+          accumulator.controls = child;
+          break;
+        case "marker":
+          accumulator.markers.push(child);
+          break;
+        case "layer":
+          accumulator.layers.push(child);
+          break;
+        case "popup":
+          accumulator.popups.push(child);
+          break;
+      }
+      return accumulator;
+    },
+    { controls: null, layers: [], markers: [], popups: [] }
+  );
+}
+const Map2D = forwardRef((props, ref) => {
+  const {
+    backdrop,
+    backdropAlt,
+    center = [0, 20],
+    children,
+    className,
+    labels,
+    zoom: initialZoom = 1,
+    ...rest
+  } = props;
+  const resolvedLabels = useMemo(
+    () => ({ ...DEFAULT_LABELS, ...labels }),
+    [labels]
+  );
+  const ctx = useMapState({ center, initialZoom, resolvedLabels });
+  const buckets = useMemo(() => bucketChildren(children), [children]);
+  return /* @__PURE__ */ jsx(MapContext.Provider, { value: ctx, children: /* @__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__ */ jsxs(Stage, { backdrop, backdropAlt, children: [
+          buckets.layers,
+          buckets.markers,
+          buckets.popups
+        ] }),
+        buckets.controls
+      ]
+    }
+  ) });
+});
+Map2D.displayName = "Map2D";
+export {
+  Map2D,
+  MapControls,
+  MapLayer,
+  MapMarker,
+  MapMarkerIcon,
+  MapPopup,
+  MapZoomIn,
+  MapZoomOut
+};

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

@@ -0,0 +1,16 @@
+import {
+  MapTimeline,
+  MapTimelineControls,
+  MapTimelineEvent,
+  MapTimelineLayer,
+  MapTimelinePlayButton,
+  MapTimelineSlider
+} from "./map-timeline";
+export {
+  MapTimeline,
+  MapTimelineControls,
+  MapTimelineEvent,
+  MapTimelineLayer,
+  MapTimelinePlayButton,
+  MapTimelineSlider
+};