@ship-it-ui/map 0.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ship-it-ops
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,219 @@
+'use client';
+
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Map: () => Map,
+  MapMarker: () => MapMarker,
+  useMap: () => useMap
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Map.tsx
+var import_react2 = require("react");
+var import_client = require("react-dom/client");
+
+// src/MapMarker.tsx
+var import_icons = require("@ship-it-ui/icons");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var variantClasses = {
+  default: "bg-panel text-text border-border",
+  accent: "bg-accent text-on-accent border-accent",
+  sale: "bg-sale text-on-accent border-sale"
+};
+var MapMarker = (0, import_react.forwardRef)(function MapMarker2({ label, icon, variant = "default", selected, onClick }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick,
+      "aria-pressed": selected,
+      className: [
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[12px] font-semibold shadow-md",
+        "transition-transform duration-(--duration-micro)",
+        "cursor-pointer hover:scale-105",
+        selected ? "ring-accent-glow scale-110 ring-2" : "",
+        variantClasses[variant]
+      ].join(" "),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.DynamicIconGlyph, { name: icon, size: 14 }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label })
+      ]
+    }
+  );
+});
+MapMarker.displayName = "MapMarker";
+
+// src/Map.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NativeMap = globalThis.Map;
+var DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+var Map = (0, import_react2.forwardRef)(function Map2({
+  center,
+  zoom = 12,
+  tileUrl = DEFAULT_TILE_URL,
+  markers,
+  selectedId,
+  onSelect,
+  style,
+  className,
+  "aria-label": ariaLabel = "Map"
+}, ref) {
+  const containerRef = (0, import_react2.useRef)(null);
+  const mapRef = (0, import_react2.useRef)(null);
+  const markerRefs = (0, import_react2.useRef)(new NativeMap());
+  (0, import_react2.useImperativeHandle)(
+    ref,
+    () => ({
+      flyTo({ center: c, zoom: z }) {
+        mapRef.current?.flyTo({ center: c, zoom: z });
+      },
+      get raw() {
+        return mapRef.current;
+      }
+    }),
+    []
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    (async () => {
+      const maplibre = await import("maplibre-gl").catch(() => null);
+      if (!maplibre || cancelled || !containerRef.current) return;
+      const map = new maplibre.Map({
+        container: containerRef.current,
+        style: {
+          version: 8,
+          sources: {
+            osm: {
+              type: "raster",
+              tiles: [tileUrl],
+              tileSize: 256,
+              attribution: "\xA9 OpenStreetMap contributors"
+            }
+          },
+          layers: [{ id: "osm", type: "raster", source: "osm" }]
+        },
+        center: [...center],
+        zoom
+      });
+      mapRef.current = map;
+    })();
+    const markersAtMount = markerRefs.current;
+    return () => {
+      cancelled = true;
+      markersAtMount.forEach(({ marker, root }) => {
+        try {
+          root.unmount();
+        } catch {
+        }
+        marker.remove?.();
+      });
+      markersAtMount.clear();
+      mapRef.current?.remove?.();
+      mapRef.current = null;
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    const map = mapRef.current;
+    if (!map || !markers) return;
+    let cancelled = false;
+    (async () => {
+      const maplibre = await import("maplibre-gl").catch(() => null);
+      if (!maplibre || cancelled) return;
+      const next = new Set(markers.map((m) => m.id));
+      markerRefs.current.forEach((entry, id) => {
+        if (!next.has(id)) {
+          try {
+            entry.root.unmount();
+          } catch {
+          }
+          entry.marker.remove?.();
+          markerRefs.current.delete(id);
+        }
+      });
+      for (const data of markers) {
+        const existing = markerRefs.current.get(data.id);
+        const el = existing?.marker.getElement() ?? document.createElement("div");
+        el.style.cursor = "pointer";
+        const root = existing?.root ?? (0, import_client.createRoot)(el);
+        root.render(
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            MapMarker,
+            {
+              label: data.label,
+              icon: data.icon,
+              variant: data.variant,
+              selected: data.id === selectedId,
+              onClick: () => onSelect?.(data)
+            }
+          )
+        );
+        if (existing) {
+          existing.marker.setLngLat([...data.location]);
+        } else {
+          const marker = new maplibre.Marker({ element: el, anchor: "bottom" }).setLngLat([...data.location]).addTo(map);
+          markerRefs.current.set(data.id, { marker, root });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [markers, selectedId, onSelect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel,
+      className,
+      style: { position: "relative", height: 400, width: "100%", ...style },
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, style: { position: "absolute", inset: 0 } })
+    }
+  );
+});
+Map.displayName = "Map";
+
+// src/useMap.ts
+var import_react3 = require("react");
+function useMap() {
+  return (0, import_react3.useRef)(null);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Map,
+  MapMarker,
+  useMap
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Map.tsx","../src/MapMarker.tsx","../src/useMap.ts"],"sourcesContent":["export { Map, type MapProps, type MapHandle } from './Map';\nexport { MapMarker, type MapMarkerProps } from './MapMarker';\nexport { useMap } from './useMap';\nexport type { LngLat, MapMarkerData } from './types';\n","'use client';\n\nimport { forwardRef, useEffect, useImperativeHandle, useRef, type CSSProperties } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\n\nimport { MapMarker } from './MapMarker';\nimport type { LngLat, MapMarkerData } from './types';\n\n/**\n * Map — thin React wrapper around MapLibre GL JS. Loaded lazily so the\n * ~700 KB library only enters the bundle of consumers that actually use the\n * map.\n *\n * Tile URL defaults to OpenStreetMap raster so the component renders out of\n * the box. For production traffic, set `tileUrl` to a provider you have an\n * agreement with (MapTiler, Mapbox via maplibre style URL, Stadia, etc.).\n */\n\n/**\n * Aliased Map constructor — our exported `Map` component shadows the global\n * `Map` identifier in this module, so direct `new Map()` would try to\n * instantiate the React component. `NativeMap` keeps the type-safe path.\n */\nconst NativeMap: MapConstructor = globalThis.Map;\n\nexport interface MapHandle {\n  /** Re-center the viewport. */\n  flyTo(opts: { center: LngLat; zoom?: number }): void;\n  /** Underlying MapLibre instance — escape hatch for unsupported features. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  raw: any | null;\n}\n\nexport interface MapProps {\n  /** Initial center as `[lng, lat]`. */\n  center: LngLat;\n  /** Initial zoom (0–22). Default 12. */\n  zoom?: number;\n  /** Tile URL template. Default: OSM raster tiles. */\n  tileUrl?: string;\n  /** Marker data — re-rendered when the array identity changes. */\n  markers?: ReadonlyArray<MapMarkerData>;\n  /** Currently selected marker `id`. */\n  selectedId?: string;\n  /** Fires when a marker is clicked. */\n  onSelect?: (marker: MapMarkerData) => void;\n  /** Width / height override. */\n  style?: CSSProperties;\n  className?: string;\n  /** Accessible label for the map region. */\n  'aria-label'?: string;\n}\n\nconst DEFAULT_TILE_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';\n\nexport const Map = forwardRef<MapHandle, MapProps>(function Map(\n  {\n    center,\n    zoom = 12,\n    tileUrl = DEFAULT_TILE_URL,\n    markers,\n    selectedId,\n    onSelect,\n    style,\n    className,\n    'aria-label': ariaLabel = 'Map',\n  },\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const mapRef = useRef<any | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const markerRefs = useRef(new NativeMap<string, { marker: any; root: Root }>());\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      flyTo({ center: c, zoom: z }) {\n        mapRef.current?.flyTo({ center: c, zoom: z });\n      },\n      get raw() {\n        return mapRef.current;\n      },\n    }),\n    [],\n  );\n\n  // Initialize MapLibre lazily so SSR / non-map consumers don't import it.\n  useEffect(() => {\n    if (!containerRef.current) return;\n    let cancelled = false;\n\n    (async () => {\n      const maplibre = await import('maplibre-gl').catch(() => null);\n      if (!maplibre || cancelled || !containerRef.current) return;\n\n      const map = new maplibre.Map({\n        container: containerRef.current,\n        style: {\n          version: 8,\n          sources: {\n            osm: {\n              type: 'raster',\n              tiles: [tileUrl],\n              tileSize: 256,\n              attribution: '© OpenStreetMap contributors',\n            },\n          },\n          layers: [{ id: 'osm', type: 'raster', source: 'osm' }],\n        },\n        center: [...center],\n        zoom,\n      });\n      mapRef.current = map;\n    })();\n\n    const markersAtMount = markerRefs.current;\n    return () => {\n      cancelled = true;\n      // Tear down markers first so React roots unmount cleanly.\n      markersAtMount.forEach(({ marker, root }) => {\n        try {\n          root.unmount();\n        } catch {\n          // ignore unmount race\n        }\n        marker.remove?.();\n      });\n      markersAtMount.clear();\n      mapRef.current?.remove?.();\n      mapRef.current = null;\n    };\n    // tileUrl is read at init time; consumers should set it once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Render / update markers.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !markers) return;\n    let cancelled = false;\n\n    (async () => {\n      const maplibre = await import('maplibre-gl').catch(() => null);\n      if (!maplibre || cancelled) return;\n\n      // Diff: remove markers no longer present.\n      const next = new Set(markers.map((m) => m.id));\n      markerRefs.current.forEach((entry, id) => {\n        if (!next.has(id)) {\n          try {\n            entry.root.unmount();\n          } catch {\n            // ignore\n          }\n          entry.marker.remove?.();\n          markerRefs.current.delete(id);\n        }\n      });\n\n      // Upsert each.\n      for (const data of markers) {\n        const existing = markerRefs.current.get(data.id);\n        const el = existing?.marker.getElement() ?? document.createElement('div');\n        el.style.cursor = 'pointer';\n\n        const root = existing?.root ?? createRoot(el);\n        root.render(\n          <MapMarker\n            label={data.label}\n            icon={data.icon}\n            variant={data.variant}\n            selected={data.id === selectedId}\n            onClick={() => onSelect?.(data)}\n          />,\n        );\n\n        if (existing) {\n          existing.marker.setLngLat([...data.location]);\n        } else {\n          const marker = new maplibre.Marker({ element: el, anchor: 'bottom' })\n            .setLngLat([...data.location])\n            .addTo(map);\n          markerRefs.current.set(data.id, { marker, root });\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [markers, selectedId, onSelect]);\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel}\n      className={className}\n      style={{ position: 'relative', height: 400, width: '100%', ...style }}\n    >\n      <div ref={containerRef} style={{ position: 'absolute', inset: 0 }} />\n    </div>\n  );\n});\n\nMap.displayName = 'Map';\n","'use client';\n\nimport { DynamicIconGlyph } from '@ship-it-ui/icons';\nimport { forwardRef, type ReactNode } from 'react';\n\n/**\n * MapMarker — DOM marker styled with design-system tokens. Rendered by the\n * `<Map>` component for each entry in its `markers` prop; you usually don't\n * instantiate it directly. Exported so consumers can render their own\n * markers via the `useMap()` API and `marker.setDOMContent()`.\n */\n\nexport interface MapMarkerProps {\n  label?: ReactNode;\n  icon?: string;\n  variant?: 'default' | 'accent' | 'sale';\n  selected?: boolean;\n  onClick?: () => void;\n}\n\nconst variantClasses = {\n  default: 'bg-panel text-text border-border',\n  accent: 'bg-accent text-on-accent border-accent',\n  sale: 'bg-sale text-on-accent border-sale',\n} as const;\n\nexport const MapMarker = forwardRef<HTMLButtonElement, MapMarkerProps>(function MapMarker(\n  { label, icon, variant = 'default', selected, onClick },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={selected}\n      className={[\n        'inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[12px] font-semibold shadow-md',\n        'transition-transform duration-(--duration-micro)',\n        'cursor-pointer hover:scale-105',\n        selected ? 'ring-accent-glow scale-110 ring-2' : '',\n        variantClasses[variant],\n      ].join(' ')}\n    >\n      {icon && <DynamicIconGlyph name={icon} size={14} />}\n      {label && <span>{label}</span>}\n    </button>\n  );\n});\nMapMarker.displayName = 'MapMarker';\n","'use client';\n\nimport { useRef } from 'react';\n\nimport type { MapHandle } from './Map';\n\n/**\n * Convenience hook that creates a stable `ref` for the imperative `MapHandle`.\n * Use when you need to programmatically `flyTo` or reach the raw MapLibre\n * instance.\n *\n * ```tsx\n * const mapRef = useMap();\n * <Map ref={mapRef} center={[-122.4, 37.8]} />\n * mapRef.current?.flyTo({ center: [-118.2, 34.0], zoom: 10 });\n * ```\n */\nexport function useMap() {\n  return useRef<MapHandle | null>(null);\n}\n"],"mappings":"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","names":["import_react","MapMarker","import_jsx_runtime","Map","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Public types for `@ship-it-ui/map`.
+ */
+/** A `[longitude, latitude]` pair. MapLibre uses lng/lat ordering. */
+type LngLat = readonly [number, number];
+interface MapMarkerData {
+    /** Stable identifier — used as React key. */
+    id: string;
+    /** Marker coordinate. */
+    location: LngLat;
+    /** Optional label shown next to the pin (e.g. a price). */
+    label?: string;
+    /** Optional icon name (`@ship-it-ui/icons` glyph). */
+    icon?: string;
+    /** Visual variant. Default `'default'`. */
+    variant?: 'default' | 'accent' | 'sale';
+}
+
+interface MapHandle {
+    /** Re-center the viewport. */
+    flyTo(opts: {
+        center: LngLat;
+        zoom?: number;
+    }): void;
+    /** Underlying MapLibre instance — escape hatch for unsupported features. */
+    raw: any | null;
+}
+interface MapProps {
+    /** Initial center as `[lng, lat]`. */
+    center: LngLat;
+    /** Initial zoom (0–22). Default 12. */
+    zoom?: number;
+    /** Tile URL template. Default: OSM raster tiles. */
+    tileUrl?: string;
+    /** Marker data — re-rendered when the array identity changes. */
+    markers?: ReadonlyArray<MapMarkerData>;
+    /** Currently selected marker `id`. */
+    selectedId?: string;
+    /** Fires when a marker is clicked. */
+    onSelect?: (marker: MapMarkerData) => void;
+    /** Width / height override. */
+    style?: CSSProperties;
+    className?: string;
+    /** Accessible label for the map region. */
+    'aria-label'?: string;
+}
+declare const Map: react.ForwardRefExoticComponent<MapProps & react.RefAttributes<MapHandle>>;
+
+/**
+ * MapMarker — DOM marker styled with design-system tokens. Rendered by the
+ * `<Map>` component for each entry in its `markers` prop; you usually don't
+ * instantiate it directly. Exported so consumers can render their own
+ * markers via the `useMap()` API and `marker.setDOMContent()`.
+ */
+interface MapMarkerProps {
+    label?: ReactNode;
+    icon?: string;
+    variant?: 'default' | 'accent' | 'sale';
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare const MapMarker: react.ForwardRefExoticComponent<MapMarkerProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Convenience hook that creates a stable `ref` for the imperative `MapHandle`.
+ * Use when you need to programmatically `flyTo` or reach the raw MapLibre
+ * instance.
+ *
+ * ```tsx
+ * const mapRef = useMap();
+ * <Map ref={mapRef} center={[-122.4, 37.8]} />
+ * mapRef.current?.flyTo({ center: [-118.2, 34.0], zoom: 10 });
+ * ```
+ */
+declare function useMap(): react.MutableRefObject<MapHandle | null>;
+
+export { type LngLat, Map, type MapHandle, MapMarker, type MapMarkerData, type MapMarkerProps, type MapProps, useMap };

package/dist/index.d.ts

@@ -0,0 +1,80 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Public types for `@ship-it-ui/map`.
+ */
+/** A `[longitude, latitude]` pair. MapLibre uses lng/lat ordering. */
+type LngLat = readonly [number, number];
+interface MapMarkerData {
+    /** Stable identifier — used as React key. */
+    id: string;
+    /** Marker coordinate. */
+    location: LngLat;
+    /** Optional label shown next to the pin (e.g. a price). */
+    label?: string;
+    /** Optional icon name (`@ship-it-ui/icons` glyph). */
+    icon?: string;
+    /** Visual variant. Default `'default'`. */
+    variant?: 'default' | 'accent' | 'sale';
+}
+
+interface MapHandle {
+    /** Re-center the viewport. */
+    flyTo(opts: {
+        center: LngLat;
+        zoom?: number;
+    }): void;
+    /** Underlying MapLibre instance — escape hatch for unsupported features. */
+    raw: any | null;
+}
+interface MapProps {
+    /** Initial center as `[lng, lat]`. */
+    center: LngLat;
+    /** Initial zoom (0–22). Default 12. */
+    zoom?: number;
+    /** Tile URL template. Default: OSM raster tiles. */
+    tileUrl?: string;
+    /** Marker data — re-rendered when the array identity changes. */
+    markers?: ReadonlyArray<MapMarkerData>;
+    /** Currently selected marker `id`. */
+    selectedId?: string;
+    /** Fires when a marker is clicked. */
+    onSelect?: (marker: MapMarkerData) => void;
+    /** Width / height override. */
+    style?: CSSProperties;
+    className?: string;
+    /** Accessible label for the map region. */
+    'aria-label'?: string;
+}
+declare const Map: react.ForwardRefExoticComponent<MapProps & react.RefAttributes<MapHandle>>;
+
+/**
+ * MapMarker — DOM marker styled with design-system tokens. Rendered by the
+ * `<Map>` component for each entry in its `markers` prop; you usually don't
+ * instantiate it directly. Exported so consumers can render their own
+ * markers via the `useMap()` API and `marker.setDOMContent()`.
+ */
+interface MapMarkerProps {
+    label?: ReactNode;
+    icon?: string;
+    variant?: 'default' | 'accent' | 'sale';
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare const MapMarker: react.ForwardRefExoticComponent<MapMarkerProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Convenience hook that creates a stable `ref` for the imperative `MapHandle`.
+ * Use when you need to programmatically `flyTo` or reach the raw MapLibre
+ * instance.
+ *
+ * ```tsx
+ * const mapRef = useMap();
+ * <Map ref={mapRef} center={[-122.4, 37.8]} />
+ * mapRef.current?.flyTo({ center: [-118.2, 34.0], zoom: 10 });
+ * ```
+ */
+declare function useMap(): react.MutableRefObject<MapHandle | null>;
+
+export { type LngLat, Map, type MapHandle, MapMarker, type MapMarkerData, type MapMarkerProps, type MapProps, useMap };

package/dist/index.js

@@ -0,0 +1,180 @@
+'use client';
+
+// src/Map.tsx
+import { forwardRef as forwardRef2, useEffect, useImperativeHandle, useRef } from "react";
+import { createRoot } from "react-dom/client";
+
+// src/MapMarker.tsx
+import { DynamicIconGlyph } from "@ship-it-ui/icons";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantClasses = {
+  default: "bg-panel text-text border-border",
+  accent: "bg-accent text-on-accent border-accent",
+  sale: "bg-sale text-on-accent border-sale"
+};
+var MapMarker = forwardRef(function MapMarker2({ label, icon, variant = "default", selected, onClick }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick,
+      "aria-pressed": selected,
+      className: [
+        "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[12px] font-semibold shadow-md",
+        "transition-transform duration-(--duration-micro)",
+        "cursor-pointer hover:scale-105",
+        selected ? "ring-accent-glow scale-110 ring-2" : "",
+        variantClasses[variant]
+      ].join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx(DynamicIconGlyph, { name: icon, size: 14 }),
+        label && /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+});
+MapMarker.displayName = "MapMarker";
+
+// src/Map.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var NativeMap = globalThis.Map;
+var DEFAULT_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+var Map = forwardRef2(function Map2({
+  center,
+  zoom = 12,
+  tileUrl = DEFAULT_TILE_URL,
+  markers,
+  selectedId,
+  onSelect,
+  style,
+  className,
+  "aria-label": ariaLabel = "Map"
+}, ref) {
+  const containerRef = useRef(null);
+  const mapRef = useRef(null);
+  const markerRefs = useRef(new NativeMap());
+  useImperativeHandle(
+    ref,
+    () => ({
+      flyTo({ center: c, zoom: z }) {
+        mapRef.current?.flyTo({ center: c, zoom: z });
+      },
+      get raw() {
+        return mapRef.current;
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    (async () => {
+      const maplibre = await import("maplibre-gl").catch(() => null);
+      if (!maplibre || cancelled || !containerRef.current) return;
+      const map = new maplibre.Map({
+        container: containerRef.current,
+        style: {
+          version: 8,
+          sources: {
+            osm: {
+              type: "raster",
+              tiles: [tileUrl],
+              tileSize: 256,
+              attribution: "\xA9 OpenStreetMap contributors"
+            }
+          },
+          layers: [{ id: "osm", type: "raster", source: "osm" }]
+        },
+        center: [...center],
+        zoom
+      });
+      mapRef.current = map;
+    })();
+    const markersAtMount = markerRefs.current;
+    return () => {
+      cancelled = true;
+      markersAtMount.forEach(({ marker, root }) => {
+        try {
+          root.unmount();
+        } catch {
+        }
+        marker.remove?.();
+      });
+      markersAtMount.clear();
+      mapRef.current?.remove?.();
+      mapRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map || !markers) return;
+    let cancelled = false;
+    (async () => {
+      const maplibre = await import("maplibre-gl").catch(() => null);
+      if (!maplibre || cancelled) return;
+      const next = new Set(markers.map((m) => m.id));
+      markerRefs.current.forEach((entry, id) => {
+        if (!next.has(id)) {
+          try {
+            entry.root.unmount();
+          } catch {
+          }
+          entry.marker.remove?.();
+          markerRefs.current.delete(id);
+        }
+      });
+      for (const data of markers) {
+        const existing = markerRefs.current.get(data.id);
+        const el = existing?.marker.getElement() ?? document.createElement("div");
+        el.style.cursor = "pointer";
+        const root = existing?.root ?? createRoot(el);
+        root.render(
+          /* @__PURE__ */ jsx2(
+            MapMarker,
+            {
+              label: data.label,
+              icon: data.icon,
+              variant: data.variant,
+              selected: data.id === selectedId,
+              onClick: () => onSelect?.(data)
+            }
+          )
+        );
+        if (existing) {
+          existing.marker.setLngLat([...data.location]);
+        } else {
+          const marker = new maplibre.Marker({ element: el, anchor: "bottom" }).setLngLat([...data.location]).addTo(map);
+          markerRefs.current.set(data.id, { marker, root });
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [markers, selectedId, onSelect]);
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "region",
+      "aria-label": ariaLabel,
+      className,
+      style: { position: "relative", height: 400, width: "100%", ...style },
+      children: /* @__PURE__ */ jsx2("div", { ref: containerRef, style: { position: "absolute", inset: 0 } })
+    }
+  );
+});
+Map.displayName = "Map";
+
+// src/useMap.ts
+import { useRef as useRef2 } from "react";
+function useMap() {
+  return useRef2(null);
+}
+export {
+  Map,
+  MapMarker,
+  useMap
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Map.tsx","../src/MapMarker.tsx","../src/useMap.ts"],"sourcesContent":["'use client';\n\nimport { forwardRef, useEffect, useImperativeHandle, useRef, type CSSProperties } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\n\nimport { MapMarker } from './MapMarker';\nimport type { LngLat, MapMarkerData } from './types';\n\n/**\n * Map — thin React wrapper around MapLibre GL JS. Loaded lazily so the\n * ~700 KB library only enters the bundle of consumers that actually use the\n * map.\n *\n * Tile URL defaults to OpenStreetMap raster so the component renders out of\n * the box. For production traffic, set `tileUrl` to a provider you have an\n * agreement with (MapTiler, Mapbox via maplibre style URL, Stadia, etc.).\n */\n\n/**\n * Aliased Map constructor — our exported `Map` component shadows the global\n * `Map` identifier in this module, so direct `new Map()` would try to\n * instantiate the React component. `NativeMap` keeps the type-safe path.\n */\nconst NativeMap: MapConstructor = globalThis.Map;\n\nexport interface MapHandle {\n  /** Re-center the viewport. */\n  flyTo(opts: { center: LngLat; zoom?: number }): void;\n  /** Underlying MapLibre instance — escape hatch for unsupported features. */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  raw: any | null;\n}\n\nexport interface MapProps {\n  /** Initial center as `[lng, lat]`. */\n  center: LngLat;\n  /** Initial zoom (0–22). Default 12. */\n  zoom?: number;\n  /** Tile URL template. Default: OSM raster tiles. */\n  tileUrl?: string;\n  /** Marker data — re-rendered when the array identity changes. */\n  markers?: ReadonlyArray<MapMarkerData>;\n  /** Currently selected marker `id`. */\n  selectedId?: string;\n  /** Fires when a marker is clicked. */\n  onSelect?: (marker: MapMarkerData) => void;\n  /** Width / height override. */\n  style?: CSSProperties;\n  className?: string;\n  /** Accessible label for the map region. */\n  'aria-label'?: string;\n}\n\nconst DEFAULT_TILE_URL = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';\n\nexport const Map = forwardRef<MapHandle, MapProps>(function Map(\n  {\n    center,\n    zoom = 12,\n    tileUrl = DEFAULT_TILE_URL,\n    markers,\n    selectedId,\n    onSelect,\n    style,\n    className,\n    'aria-label': ariaLabel = 'Map',\n  },\n  ref,\n) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const mapRef = useRef<any | null>(null);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const markerRefs = useRef(new NativeMap<string, { marker: any; root: Root }>());\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      flyTo({ center: c, zoom: z }) {\n        mapRef.current?.flyTo({ center: c, zoom: z });\n      },\n      get raw() {\n        return mapRef.current;\n      },\n    }),\n    [],\n  );\n\n  // Initialize MapLibre lazily so SSR / non-map consumers don't import it.\n  useEffect(() => {\n    if (!containerRef.current) return;\n    let cancelled = false;\n\n    (async () => {\n      const maplibre = await import('maplibre-gl').catch(() => null);\n      if (!maplibre || cancelled || !containerRef.current) return;\n\n      const map = new maplibre.Map({\n        container: containerRef.current,\n        style: {\n          version: 8,\n          sources: {\n            osm: {\n              type: 'raster',\n              tiles: [tileUrl],\n              tileSize: 256,\n              attribution: '© OpenStreetMap contributors',\n            },\n          },\n          layers: [{ id: 'osm', type: 'raster', source: 'osm' }],\n        },\n        center: [...center],\n        zoom,\n      });\n      mapRef.current = map;\n    })();\n\n    const markersAtMount = markerRefs.current;\n    return () => {\n      cancelled = true;\n      // Tear down markers first so React roots unmount cleanly.\n      markersAtMount.forEach(({ marker, root }) => {\n        try {\n          root.unmount();\n        } catch {\n          // ignore unmount race\n        }\n        marker.remove?.();\n      });\n      markersAtMount.clear();\n      mapRef.current?.remove?.();\n      mapRef.current = null;\n    };\n    // tileUrl is read at init time; consumers should set it once.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // Render / update markers.\n  useEffect(() => {\n    const map = mapRef.current;\n    if (!map || !markers) return;\n    let cancelled = false;\n\n    (async () => {\n      const maplibre = await import('maplibre-gl').catch(() => null);\n      if (!maplibre || cancelled) return;\n\n      // Diff: remove markers no longer present.\n      const next = new Set(markers.map((m) => m.id));\n      markerRefs.current.forEach((entry, id) => {\n        if (!next.has(id)) {\n          try {\n            entry.root.unmount();\n          } catch {\n            // ignore\n          }\n          entry.marker.remove?.();\n          markerRefs.current.delete(id);\n        }\n      });\n\n      // Upsert each.\n      for (const data of markers) {\n        const existing = markerRefs.current.get(data.id);\n        const el = existing?.marker.getElement() ?? document.createElement('div');\n        el.style.cursor = 'pointer';\n\n        const root = existing?.root ?? createRoot(el);\n        root.render(\n          <MapMarker\n            label={data.label}\n            icon={data.icon}\n            variant={data.variant}\n            selected={data.id === selectedId}\n            onClick={() => onSelect?.(data)}\n          />,\n        );\n\n        if (existing) {\n          existing.marker.setLngLat([...data.location]);\n        } else {\n          const marker = new maplibre.Marker({ element: el, anchor: 'bottom' })\n            .setLngLat([...data.location])\n            .addTo(map);\n          markerRefs.current.set(data.id, { marker, root });\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [markers, selectedId, onSelect]);\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabel}\n      className={className}\n      style={{ position: 'relative', height: 400, width: '100%', ...style }}\n    >\n      <div ref={containerRef} style={{ position: 'absolute', inset: 0 }} />\n    </div>\n  );\n});\n\nMap.displayName = 'Map';\n","'use client';\n\nimport { DynamicIconGlyph } from '@ship-it-ui/icons';\nimport { forwardRef, type ReactNode } from 'react';\n\n/**\n * MapMarker — DOM marker styled with design-system tokens. Rendered by the\n * `<Map>` component for each entry in its `markers` prop; you usually don't\n * instantiate it directly. Exported so consumers can render their own\n * markers via the `useMap()` API and `marker.setDOMContent()`.\n */\n\nexport interface MapMarkerProps {\n  label?: ReactNode;\n  icon?: string;\n  variant?: 'default' | 'accent' | 'sale';\n  selected?: boolean;\n  onClick?: () => void;\n}\n\nconst variantClasses = {\n  default: 'bg-panel text-text border-border',\n  accent: 'bg-accent text-on-accent border-accent',\n  sale: 'bg-sale text-on-accent border-sale',\n} as const;\n\nexport const MapMarker = forwardRef<HTMLButtonElement, MapMarkerProps>(function MapMarker(\n  { label, icon, variant = 'default', selected, onClick },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      onClick={onClick}\n      aria-pressed={selected}\n      className={[\n        'inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[12px] font-semibold shadow-md',\n        'transition-transform duration-(--duration-micro)',\n        'cursor-pointer hover:scale-105',\n        selected ? 'ring-accent-glow scale-110 ring-2' : '',\n        variantClasses[variant],\n      ].join(' ')}\n    >\n      {icon && <DynamicIconGlyph name={icon} size={14} />}\n      {label && <span>{label}</span>}\n    </button>\n  );\n});\nMapMarker.displayName = 'MapMarker';\n","'use client';\n\nimport { useRef } from 'react';\n\nimport type { MapHandle } from './Map';\n\n/**\n * Convenience hook that creates a stable `ref` for the imperative `MapHandle`.\n * Use when you need to programmatically `flyTo` or reach the raw MapLibre\n * instance.\n *\n * ```tsx\n * const mapRef = useMap();\n * <Map ref={mapRef} center={[-122.4, 37.8]} />\n * mapRef.current?.flyTo({ center: [-118.2, 34.0], zoom: 10 });\n * ```\n */\nexport function useMap() {\n  return useRef<MapHandle | null>(null);\n}\n"],"mappings":"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","names":["forwardRef","MapMarker","jsx","forwardRef","Map","useRef"]}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@ship-it-ui/map",
+  "version": "0.0.2",
+  "description": "Map primitive for the Ship-It design system. Thin React wrapper over MapLibre GL JS with styled markers that consume design-system tokens.",
+  "license": "MIT",
+  "homepage": "https://ship-it-ops.github.io/ship-it-design/",
+  "bugs": {
+    "url": "https://github.com/ship-it-ops/ship-it-design/issues"
+  },
+  "author": "Ship-It Ops",
+  "keywords": [
+    "design-system",
+    "map",
+    "maplibre",
+    "shipit"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ship-it-ops/ship-it-design.git",
+    "directory": "packages/map"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^4.0.0 || ^5.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@ship-it-ui/icons": "0.0.8",
+    "@ship-it-ui/ui": "0.0.8"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "axe-core": "^4.10.2",
+    "esbuild-plugin-preserve-directives": "^0.0.11",
+    "jsdom": "^29.1.1",
+    "maplibre-gl": "^4.7.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.3",
+    "vitest": "^2.1.3",
+    "vitest-axe": "^0.1.0",
+    "@ship-it-ui/eslint-config": "0.0.1",
+    "@ship-it-ui/icons": "0.0.8",
+    "@ship-it-ui/tokens": "0.0.6",
+    "@ship-it-ui/tsconfig": "0.0.1",
+    "@ship-it-ui/ui": "0.0.8"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist .turbo"
+  }
+}