@musecat/uikit 0.1.1

package/packages/Components/Maps/OSM/MapOSM.shared.ts

@@ -0,0 +1,121 @@
+import type maplibregl from "maplibre-gl";
+
+const NUMERIC_FILTER_FALLBACK_MIN = Number.MIN_SAFE_INTEGER;
+const NUMERIC_FILTER_FALLBACK_MAX = Number.MAX_SAFE_INTEGER;
+const NUMERIC_COMPARISON_OPERATORS = new Set([
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+]);
+
+function isFiniteNumberLiteral(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function isGetExpression(value: unknown): value is ["get", string] {
+  return (
+    Array.isArray(value) && value[0] === "get" && typeof value[1] === "string"
+  );
+}
+
+function getNumericFilterFallback(operator: string, comparedValue: number) {
+  switch (operator) {
+    case "<":
+    case "<=":
+      return NUMERIC_FILTER_FALLBACK_MAX;
+    case "!=":
+      return comparedValue === NUMERIC_FILTER_FALLBACK_MIN
+        ? NUMERIC_FILTER_FALLBACK_MAX
+        : NUMERIC_FILTER_FALLBACK_MIN;
+    default:
+      return NUMERIC_FILTER_FALLBACK_MIN;
+  }
+}
+
+function wrapNumericOperand(
+  operand: unknown,
+  operator: string,
+  comparedValue: number,
+) {
+  if (!isGetExpression(operand)) {
+    return operand;
+  }
+
+  return [
+    "to-number",
+    operand,
+    getNumericFilterFallback(operator, comparedValue),
+  ];
+}
+
+export function sanitizeStyleFilterExpression(expression: unknown): unknown {
+  if (!Array.isArray(expression)) {
+    return expression;
+  }
+
+  const [operator, ...args] = expression;
+  if (typeof operator !== "string") {
+    return expression.map((item) => sanitizeStyleFilterExpression(item));
+  }
+
+  if (NUMERIC_COMPARISON_OPERATORS.has(operator) && args.length === 2) {
+    const [left, right] = args;
+    const sanitizedLeft = sanitizeStyleFilterExpression(left);
+    const sanitizedRight = sanitizeStyleFilterExpression(right);
+
+    if (isFiniteNumberLiteral(right)) {
+      return [
+        operator,
+        wrapNumericOperand(sanitizedLeft, operator, right),
+        sanitizedRight,
+      ];
+    }
+
+    if (isFiniteNumberLiteral(left)) {
+      return [
+        operator,
+        sanitizedLeft,
+        wrapNumericOperand(sanitizedRight, operator, left),
+      ];
+    }
+  }
+
+  return [operator, ...args.map((item) => sanitizeStyleFilterExpression(item))];
+}
+
+function sanitizeLayerFilter<T extends object>(layer: T): T {
+  if (!("filter" in layer)) {
+    return layer;
+  }
+
+  const layerWithFilter = layer as T & { filter?: unknown };
+  if (!layerWithFilter.filter) {
+    return layer;
+  }
+
+  return {
+    ...layerWithFilter,
+
+    filter: sanitizeStyleFilterExpression(layerWithFilter.filter),
+  };
+}
+
+export function resolveSafeMapStyle(
+  styleJson: maplibregl.StyleSpecification,
+  disable3D: boolean,
+): maplibregl.StyleSpecification {
+  const layers = (styleJson.layers ?? [])
+    .filter((layer) => (disable3D ? layer.type !== "fill-extrusion" : true))
+    .map((layer) => sanitizeLayerFilter(layer));
+
+  return {
+    ...styleJson,
+
+    projection: styleJson.projection ?? { type: "mercator" },
+    layers,
+    terrain: disable3D ? undefined : styleJson.terrain,
+  };
+}

package/packages/Components/Maps/OSM/MapOSM.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import clsx from "clsx";
+import maplibregl from "maplibre-gl";
+import styles from "@/packages/Components/Maps/OSM/MapOSM.module.scss";
+import { resolveSafeMapStyle } from "@/packages/Components/Maps/OSM/MapOSM.shared";
+import type { MapOSMProps } from "@/packages/Components/Maps/OSM/MapOSM.types";
+import View from "@/packages/Frameworks/View/View";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { useCallback, useEffect, useRef } from "react";
+
+const STYLE_URL = "https://tiles.openfreemap.org/styles/liberty";
+const DEFAULT_MAP_ZOOM = 16;
+const EMPTY_STYLE_IMAGE = {
+  width: 1,
+  height: 1,
+  data: new Uint8Array([0, 0, 0, 0]),
+} as const;
+
+function scheduleMapRecenter(
+  map: maplibregl.Map,
+  center: [number, number],
+  zoom = DEFAULT_MAP_ZOOM,
+) {
+  const recenter = () => {
+    map.resize();
+    map.jumpTo({ center, zoom });
+  };
+
+  recenter();
+  window.requestAnimationFrame(() => {
+    recenter();
+    window.requestAnimationFrame(recenter);
+  });
+}
+
+export default function MapOSM({
+  lat,
+  lon,
+  onMapPick,
+  height = "400px",
+  className,
+  style,
+  mapClassName,
+  mapStyle,
+  width = "100%",
+  interactive = true,
+  disable3D = false,
+  showNavigationControl = true,
+  mapOptions,
+}: MapOSMProps) {
+  const mapContainer = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<maplibregl.Map | null>(null);
+  const markerRef = useRef<maplibregl.Marker | null>(null);
+  const navigationControlRef = useRef<maplibregl.NavigationControl | null>(
+    null,
+  );
+  const hasNavigationControlRef = useRef(false);
+  const clickHandlerRef = useRef<
+    ((event: maplibregl.MapMouseEvent) => void) | null
+  >(null);
+  const latestLatRef = useRef(lat);
+  const latestLonRef = useRef(lon);
+  const latestOnMapPickRef = useRef(onMapPick);
+
+  const bindMapClickHandler = useCallback((map: maplibregl.Map) => {
+    if (clickHandlerRef.current) {
+      map.off("click", clickHandlerRef.current);
+      clickHandlerRef.current = null;
+    }
+
+    const handleMapClick = (event: maplibregl.MapMouseEvent) => {
+      const { lng, lat: clickedLat } = event.lngLat;
+      latestOnMapPickRef.current?.(clickedLat, lng);
+    };
+
+    clickHandlerRef.current = handleMapClick;
+    map.on("click", handleMapClick);
+  }, []);
+
+  useEffect(() => {
+    latestLatRef.current = lat;
+    latestLonRef.current = lon;
+    latestOnMapPickRef.current = onMapPick;
+  }, [lat, lon, onMapPick]);
+
+  useEffect(() => {
+    let map: maplibregl.Map | null = null;
+    if (!mapContainer.current || mapRef.current) return;
+
+    let cancelled = false;
+
+    const initMap = async () => {
+      try {
+        const response = await fetch(STYLE_URL);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch style: ${response.statusText}`);
+        }
+
+        const styleJson =
+          (await response.json()) as maplibregl.StyleSpecification;
+        if (cancelled || !mapContainer.current || mapRef.current) return;
+
+        const latNum = Number(latestLatRef.current) || 37.5326;
+        const lonNum = Number(latestLonRef.current) || 127.0246;
+
+        const resolvedStyle = resolveSafeMapStyle(styleJson, disable3D);
+
+        const resolvedMapOptions: maplibregl.MapOptions = {
+          container: mapContainer.current,
+          style: resolvedStyle,
+          center: [lonNum, latNum],
+          zoom: DEFAULT_MAP_ZOOM,
+          interactive,
+          attributionControl: false,
+          ...mapOptions,
+        };
+
+        map = new maplibregl.Map(resolvedMapOptions);
+
+        map.on("styleimagemissing", ({ id }) => {
+          if (!map || map.hasImage(id)) return;
+
+          map.addImage(id, EMPTY_STYLE_IMAGE);
+        });
+
+        const marker = new maplibregl.Marker({ color: "#FF0000" })
+          .setLngLat([lonNum, latNum])
+          .addTo(map);
+
+        map.once("load", () => {
+          if (!map) {
+            return;
+          }
+
+          scheduleMapRecenter(map, [lonNum, latNum]);
+        });
+
+        if (disable3D) {
+          map.once("load", () => {
+            map?.setTerrain(null);
+            map?.setPitch(0);
+            map?.setMaxPitch(0);
+          });
+        }
+
+        const navigationControl = new maplibregl.NavigationControl();
+        navigationControlRef.current = navigationControl;
+
+        mapRef.current = map;
+        markerRef.current = marker;
+
+        if (showNavigationControl) {
+          map.addControl(navigationControl, "top-right");
+          hasNavigationControlRef.current = true;
+        }
+
+        if (interactive) {
+          bindMapClickHandler(map);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          console.error("MapOSM initialization failed:", err);
+        }
+      }
+    };
+
+    initMap();
+
+    return () => {
+      cancelled = true;
+      if (map) map.remove();
+      mapRef.current = null;
+      markerRef.current = null;
+      navigationControlRef.current = null;
+      hasNavigationControlRef.current = false;
+      clickHandlerRef.current = null;
+    };
+  }, [
+    bindMapClickHandler,
+    disable3D,
+    interactive,
+    mapOptions,
+    showNavigationControl,
+  ]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) {
+      return;
+    }
+
+    if (interactive) {
+      map.scrollZoom.enable();
+      map.boxZoom.enable();
+      map.dragRotate.enable();
+      map.dragPan.enable();
+      map.keyboard.enable();
+      map.doubleClickZoom.enable();
+      map.touchZoomRotate.enable();
+    } else {
+      map.scrollZoom.disable();
+      map.boxZoom.disable();
+      map.dragRotate.disable();
+      map.dragPan.disable();
+      map.keyboard.disable();
+      map.doubleClickZoom.disable();
+      map.touchZoomRotate.disable();
+    }
+
+    if (interactive) {
+      bindMapClickHandler(map);
+    } else if (clickHandlerRef.current) {
+      map.off("click", clickHandlerRef.current);
+      clickHandlerRef.current = null;
+    }
+  }, [bindMapClickHandler, interactive]);
+
+  useEffect(() => {
+    const map = mapRef.current;
+    const navigationControl = navigationControlRef.current;
+    if (!map || !navigationControl) {
+      return;
+    }
+
+    if (showNavigationControl && !hasNavigationControlRef.current) {
+      map.addControl(navigationControl, "top-right");
+      hasNavigationControlRef.current = true;
+    }
+
+    if (!showNavigationControl && hasNavigationControlRef.current) {
+      map.removeControl(navigationControl);
+      hasNavigationControlRef.current = false;
+    }
+  }, [showNavigationControl]);
+
+  useEffect(() => {
+    if (mapRef.current && markerRef.current) {
+      const latNum = Number(lat);
+      const lonNum = Number(lon);
+
+      if (
+        !Number.isNaN(latNum) &&
+        !Number.isNaN(lonNum) &&
+        (latNum !== 0 || lonNum !== 0)
+      ) {
+        const newPos: [number, number] = [lonNum, latNum];
+        markerRef.current.setLngLat(newPos);
+
+        mapRef.current.easeTo({
+          center: newPos,
+          zoom: DEFAULT_MAP_ZOOM,
+          duration: 500,
+        });
+      }
+    }
+  }, [lat, lon]);
+
+  return (
+    <View
+      className={clsx(styles.MapWrapper, className)}
+      style={{
+        width,
+        height,
+        ...style,
+      }}
+    >
+      <View
+        className={clsx(styles.Map, mapClassName)}
+        ref={mapContainer}
+        style={{
+          width: "100%",
+          height: "100%",
+          ...mapStyle,
+        }}
+      />
+    </View>
+  );
+}

package/packages/Components/Maps/OSM/MapOSM.types.ts

@@ -0,0 +1,18 @@
+import type maplibregl from "maplibre-gl";
+import type { CSSProperties } from "react";
+
+export interface MapOSMProps {
+  lat: number | string;
+  lon: number | string;
+  onMapPick?: (lat: number | string, lon: number | string) => void;
+  height?: string;
+  className?: string;
+  style?: CSSProperties;
+  mapClassName?: string;
+  mapStyle?: CSSProperties;
+  width?: string;
+  interactive?: boolean;
+  disable3D?: boolean;
+  showNavigationControl?: boolean;
+  mapOptions?: Partial<maplibregl.MapOptions>;
+}

package/packages/Components/Nav/Nav.module.scss

@@ -0,0 +1,137 @@
+.Nav {
+  padding: 0.2rem;
+  position: relative;
+  width: max-content;
+  overflow: visible;
+  border-radius: 9999px;
+  backdrop-filter: blur(8px);
+  cursor: default;
+
+  &.SizeFull {
+    width: 100% !important;
+
+    .Item {
+      flex: 1 1 0;
+      min-width: 0;
+      width: auto !important;
+    }
+  }
+
+  &.DragSelection {
+    touch-action: pan-y;
+
+    .Item {
+      min-width: 3.6rem;
+    }
+  }
+
+  .ActiveIndicator {
+    --nav-indicator-scale: 1;
+
+    position: absolute;
+    top: 0.2rem;
+    bottom: 0.2rem;
+    left: 0;
+    width: 0;
+    opacity: 0;
+    transition:
+      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
+      width 180ms ease,
+      opacity 140ms ease,
+      var(--transition-surface);
+    transform: translate3d(0, 0, 0) scale(var(--nav-indicator-scale, 1));
+    transform-origin: center;
+    will-change: transform, width, opacity;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .ActiveIndicatorDragging {
+    --nav-indicator-scale: 1.4;
+
+    transition:
+      opacity 120ms ease,
+      var(--transition-surface);
+  }
+
+  .ActiveIndicatorPressed {
+    --nav-indicator-scale: 1.4;
+
+    transition:
+      transform 120ms linear,
+      width 180ms ease,
+      opacity 120ms ease,
+      var(--transition-surface);
+  }
+
+  .ActiveIndicatorReleasing {
+    --nav-indicator-scale: 1;
+
+    transition:
+      transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
+      width 180ms ease,
+      opacity 140ms ease,
+      var(--transition-surface);
+  }
+
+  .Item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    cursor: default;
+    z-index: 2;
+    user-select: none;
+    text-align: center;
+    width: auto !important;
+    min-width: 0;
+    background: transparent !important;
+
+    & > span {
+      color: var(--color-base-dark-1) !important;
+    }
+
+    & i::before {
+      color: var(--color-base-dark-1) !important;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        background: transparent !important;
+      }
+    }
+
+    &:active {
+      background: transparent !important;
+    }
+
+    &:not(&.Checked) > span,
+    &:not(&.Checked) i::before {
+      opacity: 0.6;
+    }
+
+    &.Checked {
+      background: transparent !important;
+      box-shadow: none !important;
+      cursor: default;
+
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: transparent !important;
+        }
+      }
+
+      &:active {
+        background: transparent !important;
+      }
+    }
+  }
+
+  &.Dragging .Item {
+    cursor: default;
+  }
+
+  &.Dragging .Item.Checked {
+    cursor: default;
+  }
+}