@heroui/agent 0.2.0-beta.8 → 0.2.0-beta.9

package/dist/interactive-map-surface-67KHT3VB.js

@@ -1,362 +0,0 @@
-"use client";
-import {
-  createMapLayout,
-  getMapSelectionCenter
-} from "./chunk-VJA52U5P.js";
-import {
-  mergeClassNames
-} from "./chunk-3FG5NRTX.js";
-
-// ../agent-ui/src/components/display-information/map/interactive-map-surface.tsx
-import { StarFill } from "@gravity-ui/icons";
-
-// ../agent-ui/src/components/display-information/map/interactive-map.tsx
-import MapLibreGL from "maplibre-gl";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { jsx, jsxs } from "react/jsx-runtime";
-var InteractiveMapContext = createContext(null);
-function getDocumentTheme() {
-  if (typeof document === "undefined") return void 0;
-  if (document.documentElement.classList.contains("dark") || document.documentElement.dataset["theme"] === "dark") {
-    return "dark";
-  }
-  if (document.documentElement.classList.contains("light") || document.documentElement.dataset["theme"] === "light") {
-    return "light";
-  }
-  return void 0;
-}
-function getLocalTheme(element) {
-  const themeRoot = element?.closest("[data-theme]");
-  const theme = themeRoot?.dataset["theme"];
-  return theme === "dark" || theme === "light" ? theme : void 0;
-}
-function getSystemTheme() {
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-function useMapTheme(containerRef) {
-  const [theme, setTheme] = useState(() => getDocumentTheme() ?? getSystemTheme());
-  useEffect(() => {
-    const localThemeRoot = containerRef.current?.closest("[data-theme]");
-    const updateTheme = () => setTheme(getLocalTheme(containerRef.current) ?? getDocumentTheme() ?? getSystemTheme());
-    const observer = new MutationObserver(updateTheme);
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    updateTheme();
-    observer.observe(document.documentElement, {
-      attributeFilter: ["class", "data-theme"],
-      attributes: true
-    });
-    if (localThemeRoot && localThemeRoot !== document.documentElement) {
-      observer.observe(localThemeRoot, {
-        attributeFilter: ["data-theme"],
-        attributes: true
-      });
-    }
-    mediaQuery.addEventListener("change", updateTheme);
-    return () => {
-      observer.disconnect();
-      mediaQuery.removeEventListener("change", updateTheme);
-    };
-  }, [containerRef]);
-  return theme;
-}
-function InteractiveMapRoot({
-  center,
-  children,
-  className,
-  padding,
-  styles,
-  zoom,
-  ...options
-}) {
-  const [longitude, latitude] = center;
-  const containerRef = useRef(null);
-  const initialOptionsRef = useRef({
-    ...options,
-    center: [longitude, latitude],
-    zoom
-  });
-  const [map, setMap] = useState(null);
-  const [loadState, setLoadState] = useState("loading");
-  const theme = useMapTheme(containerRef);
-  const activeStyle = styles[theme];
-  const activeStyleRef = useRef(activeStyle);
-  const initialPaddingRef = useRef(padding);
-  const zoomRef = useRef(zoom);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-    const nextMap = new MapLibreGL.Map({
-      attributionControl: false,
-      container,
-      renderWorldCopies: false,
-      style: activeStyleRef.current,
-      ...initialOptionsRef.current
-    });
-    const loadTimeout = window.setTimeout(() => setLoadState("error"), 12e3);
-    const handleLoad = () => {
-      window.clearTimeout(loadTimeout);
-      setLoadState("loaded");
-    };
-    const observer = new ResizeObserver(() => nextMap.resize());
-    nextMap.touchZoomRotate.disableRotation();
-    if (initialPaddingRef.current) nextMap.setPadding(initialPaddingRef.current);
-    nextMap.on("load", handleLoad);
-    observer.observe(container);
-    setMap(nextMap);
-    return () => {
-      window.clearTimeout(loadTimeout);
-      observer.disconnect();
-      nextMap.off("load", handleLoad);
-      nextMap.remove();
-      setMap(null);
-    };
-  }, []);
-  useEffect(() => {
-    if (!map || activeStyleRef.current === activeStyle) return;
-    const styleLoadTimeout = window.setTimeout(() => setLoadState("error"), 12e3);
-    const handleStyleLoad = () => {
-      window.clearTimeout(styleLoadTimeout);
-      setLoadState("loaded");
-    };
-    const handleStyleLoading = () => setLoadState("loading");
-    activeStyleRef.current = activeStyle;
-    map.once("styledataloading", handleStyleLoading);
-    map.setStyle(activeStyle, { diff: false });
-    map.once("style.load", handleStyleLoad);
-    return () => {
-      window.clearTimeout(styleLoadTimeout);
-      map.off("style.load", handleStyleLoad);
-      map.off("styledataloading", handleStyleLoading);
-    };
-  }, [activeStyle, map]);
-  useEffect(() => {
-    if (!map) return;
-    const currentCenter = map.getCenter();
-    const centerChanged = currentCenter.lng !== longitude || currentCenter.lat !== latitude;
-    const zoomChanged = zoomRef.current !== zoom;
-    zoomRef.current = zoom;
-    if (!centerChanged && !zoomChanged) return;
-    map.easeTo({
-      center: [longitude, latitude],
-      duration: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 350,
-      ...zoomChanged ? { zoom } : {}
-    });
-  }, [latitude, longitude, map, zoom]);
-  return /* @__PURE__ */ jsx(InteractiveMapContext, { value: map, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: mergeClassNames("aui-interactive-map", className),
-      "data-load-state": loadState,
-      "data-slot": "agent-ui-interactive-map",
-      children: [
-        loadState === "loading" ? /* @__PURE__ */ jsx("div", { "aria-label": "Loading map", className: "aui-interactive-map__loader", role: "status", children: /* @__PURE__ */ jsx("span", {}) }) : null,
-        loadState === "error" ? /* @__PURE__ */ jsxs("div", { className: "aui-interactive-map__error", role: "status", children: [
-          /* @__PURE__ */ jsx("strong", { children: "Map unavailable" }),
-          /* @__PURE__ */ jsx("span", { children: "Location results remain available." })
-        ] }) : null,
-        map ? children : null
-      ]
-    }
-  ) });
-}
-function InteractiveMapMarker({ children, latitude, longitude }) {
-  const map = useContext(InteractiveMapContext);
-  const initialPositionRef = useRef({ latitude, longitude });
-  const [marker, setMarker] = useState(null);
-  useEffect(() => {
-    const nextElement = document.createElement("div");
-    const initialPosition = initialPositionRef.current;
-    const nextMarker = new MapLibreGL.Marker({ element: nextElement }).setLngLat([
-      initialPosition.longitude,
-      initialPosition.latitude
-    ]);
-    nextElement.className = "aui-interactive-map__marker-host";
-    setMarker(nextMarker);
-    return () => {
-      nextMarker.remove();
-    };
-  }, []);
-  useEffect(() => {
-    if (!map || !marker) return;
-    marker.addTo(map);
-    const markerElement = marker.getElement();
-    markerElement.removeAttribute("aria-label");
-    markerElement.removeAttribute("role");
-    markerElement.removeAttribute("tabindex");
-    return () => {
-      marker.remove();
-    };
-  }, [map, marker]);
-  useEffect(() => {
-    marker?.setLngLat([longitude, latitude]);
-  }, [latitude, longitude, marker]);
-  return marker ? createPortal(
-    /* @__PURE__ */ jsx("div", { className: "aui-interactive-map__marker-content", children }),
-    marker.getElement()
-  ) : null;
-}
-function ControlButton({ children, label, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      "aria-label": label,
-      className: "aui-interactive-map__control-button",
-      type: "button",
-      ...props,
-      children
-    }
-  );
-}
-function PlusIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5" }) });
-}
-function MinusIcon(props) {
-  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 16 16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8h10", stroke: "currentColor", strokeLinecap: "round", strokeWidth: "1.5" }) });
-}
-function CompassIcon(props) {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", fill: "none", viewBox: "0 0 24 24", ...props, children: [
-    /* @__PURE__ */ jsx("path", { d: "M12 2 16 12h-4V2Z", "data-needle": "north-right" }),
-    /* @__PURE__ */ jsx("path", { d: "m12 2-4 10h4V2Z", "data-needle": "north-left" }),
-    /* @__PURE__ */ jsx("path", { d: "m12 22 4-10h-4v10Z", "data-needle": "south-right" }),
-    /* @__PURE__ */ jsx("path", { d: "m12 22-4-10h4v10Z", "data-needle": "south-left" })
-  ] });
-}
-function InteractiveMapControls() {
-  const map = useContext(InteractiveMapContext);
-  const compassRef = useRef(null);
-  const updateCompass = useCallback(() => {
-    if (!map || !compassRef.current) return;
-    compassRef.current.style.transform = `rotateX(${map.getPitch()}deg) rotateZ(${-map.getBearing()}deg)`;
-  }, [map]);
-  useEffect(() => {
-    if (!map) return;
-    map.on("pitch", updateCompass);
-    map.on("rotate", updateCompass);
-    updateCompass();
-    return () => {
-      map.off("pitch", updateCompass);
-      map.off("rotate", updateCompass);
-    };
-  }, [map, updateCompass]);
-  return /* @__PURE__ */ jsxs("div", { className: "aui-interactive-map__controls", "data-slot": "agent-ui-map-controls", children: [
-    /* @__PURE__ */ jsxs("div", { className: "aui-interactive-map__control-group", children: [
-      /* @__PURE__ */ jsx(
-        ControlButton,
-        {
-          label: "Zoom in",
-          onClick: () => map?.zoomTo(map.getZoom() + 1, { duration: 250 }),
-          children: /* @__PURE__ */ jsx(PlusIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        ControlButton,
-        {
-          label: "Zoom out",
-          onClick: () => map?.zoomTo(map.getZoom() - 1, { duration: 250 }),
-          children: /* @__PURE__ */ jsx(MinusIcon, {})
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "aui-interactive-map__control-group", children: /* @__PURE__ */ jsx(
-      ControlButton,
-      {
-        label: "Reset bearing to north",
-        onClick: () => map?.resetNorthPitch({ duration: 250 }),
-        children: /* @__PURE__ */ jsx(CompassIcon, { ref: compassRef, className: "aui-interactive-map__compass" })
-      }
-    ) })
-  ] });
-}
-var InteractiveMap = Object.assign(InteractiveMapRoot, {
-  Controls: InteractiveMapControls,
-  Marker: InteractiveMapMarker
-});
-
-// ../agent-ui/src/components/display-information/map/interactive-map-surface.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var mapStyles = {
-  dark: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
-  light: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
-};
-var resultRailPadding = { bottom: 132, left: 0, right: 0, top: 0 };
-var ratingFormatter = new Intl.NumberFormat(void 0, {
-  maximumFractionDigits: 1,
-  minimumFractionDigits: 1
-});
-function InteractiveMapSurface({
-  component,
-  onSelect,
-  selectedLocationId
-}) {
-  const layout = createMapLayout(component);
-  const center = getMapSelectionCenter(component.locations, selectedLocationId, layout.center);
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      "aria-label": `${component.title} map with ${component.locations.length} locations`,
-      className: "aui-map__surface",
-      "data-renderer": "interactive",
-      "data-slot": "agent-ui-map-surface",
-      role: "region",
-      children: [
-        /* @__PURE__ */ jsxs2(
-          InteractiveMap,
-          {
-            center: [center.longitude, center.latitude],
-            className: "aui-map__interactive-map",
-            dragRotate: false,
-            padding: resultRailPadding,
-            pitchWithRotate: false,
-            styles: mapStyles,
-            zoom: layout.zoom,
-            children: [
-              component.locations.map((location, index) => {
-                const selected = location.id === selectedLocationId;
-                const markerLabel = location.rating !== void 0 ? ratingFormatter.format(location.rating) : location.relevance !== void 0 ? `${Math.round(location.relevance * 100)}%` : String(index + 1);
-                const accessibleLabel = `Select ${location.title} on map${location.rating === void 0 ? "" : `, rated ${ratingFormatter.format(location.rating)} out of 5`}`;
-                return /* @__PURE__ */ jsx2(
-                  InteractiveMap.Marker,
-                  {
-                    latitude: location.latitude,
-                    longitude: location.longitude,
-                    children: /* @__PURE__ */ jsxs2(
-                      "button",
-                      {
-                        "aria-label": accessibleLabel,
-                        "aria-pressed": selected,
-                        className: "aui-map__marker",
-                        "data-renderer": "interactive",
-                        "data-selected": selected,
-                        "data-slot": "agent-ui-map-marker",
-                        title: location.title,
-                        type: "button",
-                        onClick: () => onSelect(location),
-                        children: [
-                          /* @__PURE__ */ jsx2(StarFill, { "aria-hidden": "true" }),
-                          /* @__PURE__ */ jsx2("span", { children: markerLabel })
-                        ]
-                      }
-                    )
-                  },
-                  location.id
-                );
-              }),
-              /* @__PURE__ */ jsx2(InteractiveMap.Controls, {})
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs2("span", { className: "aui-map__attribution", "data-slot": "agent-ui-map-attribution", children: [
-          /* @__PURE__ */ jsx2("a", { href: "https://www.openstreetmap.org/copyright", rel: "noreferrer", target: "_blank", children: "\xA9 OpenStreetMap" }),
-          /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", children: " \xB7 " }),
-          /* @__PURE__ */ jsx2("a", { href: "https://carto.com/attributions", rel: "noreferrer", target: "_blank", children: "\xA9 CARTO" })
-        ] })
-      ]
-    }
-  );
-}
-export {
-  InteractiveMapSurface
-};