@excom/mapbox-view 0.1.0

package/.rush/temp/chunked-rush-logs/mapbox-view.apply-exports.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/chunked-rush-logs/mapbox-view.build_docs.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/chunked-rush-logs/mapbox-view.build_package-metas.chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/apply-exports/all.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/.rush/temp/operation/apply-exports/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: cd \"$RUSH_PROJECT_FOLDER\" && node ../heft-rig/scripts/apply-exports.mjs \n"}

package/.rush/temp/operation/apply-exports/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 35.808496000000105
+}

package/.rush/temp/operation/build_docs/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/.rush/temp/operation/build_docs/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs \n"}

package/.rush/temp/operation/build_docs/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 42.559968000000026
+}

package/.rush/temp/operation/build_package-metas/all.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/.rush/temp/operation/build_package-metas/log-chunks.jsonl

@@ -0,0 +1 @@
+{"kind":"O","text":"Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs \n"}

package/.rush/temp/operation/build_package-metas/state.json

@@ -0,0 +1,3 @@
+{
+  "nonCachedDurationMs": 68.63088599999992
+}

package/.rush/temp/shrinkwrap-deps.json

@@ -0,0 +1,35 @@
+{
+  "../../packages/mapbox-view": "../../packages/mapbox-view:waN6IYkT0kWJoHv+Il2v7PKH1oqmE6rt1niWmjXrbj4=:",
+  "@mapbox/jsonlint-lines-primitives@2.0.2": "@mapbox/jsonlint-lines-primitives@2.0.2:pTMNfjSWqxSbYnhqr8pm9NAFrBp+ZeCfZLGTVw0e0pM=:",
+  "@mapbox/mapbox-gl-supported@3.0.0": "@mapbox/mapbox-gl-supported@3.0.0:IhPd0a0B6DvTT119ufIe8zot6xYG5lAIRFAdFb6JeUA=:",
+  "@mapbox/point-geometry@1.1.0": "@mapbox/point-geometry@1.1.0:Bm0cSoJTXQgIUMfVOHRP/37hAUqNcit6uJkjCmqmFOc=:",
+  "@mapbox/tiny-sdf@2.0.7": "@mapbox/tiny-sdf@2.0.7:AXIff3JeANbTLZP6eJCp/Mk2QZexnR9MnxCMjX9sBTU=:",
+  "@mapbox/unitbezier@0.0.1": "@mapbox/unitbezier@0.0.1:sGC7+jQh2i9whO8vuKDKffOHvdDMTmePjF2ooKlFlio=:",
+  "@mapbox/vector-tile@2.0.4": "@mapbox/vector-tile@2.0.4:hh5E9i+Eclgnk5M529e59ytFHhJ6dZmUwq88DHmwBVM=:",
+  "@mapbox/whoots-js@3.1.0": "@mapbox/whoots-js@3.1.0:Vk9XwLe0n7cWbOaabSlAesXX0UDIgp+mJGtLX0GHIqQ=:",
+  "@types/geojson-vt@3.2.5": "@types/geojson-vt@3.2.5:UvTNEt3a+ghKLyVCTroNhY23UAAeXdabZUMrEvPXWB8=:",
+  "@types/geojson@7946.0.16": "@types/geojson@7946.0.16:gcMlSqEHJU4IX6+c7qnAWFvEefycVi66cMxuADjE2B0=:",
+  "@types/mapbox__point-geometry@0.1.4": "@types/mapbox__point-geometry@0.1.4:GygVrmKyj0wDWwdQcNQ5I0saPTBG2bzUI4Nrdm2Z0ZU=:",
+  "@types/pbf@3.0.5": "@types/pbf@3.0.5:0S+vW4kiwqZjQXiuTNXGnKze6PvnUmgQ6rtCtMncWtg=:",
+  "@types/supercluster@7.1.3": "@types/supercluster@7.1.3:JJw17OdaacIMfw3OSnYTBqj5hvfH8lzR+udEUSxNWWI=:",
+  "cheap-ruler@4.0.0": "cheap-ruler@4.0.0:yiDcBxPrql3UwD/Uox6B4cGVBbkPoRGkLGyQ1wi0LzI=:",
+  "csscolorparser@1.0.3": "csscolorparser@1.0.3:S3na1TrpSMzZ48LFKxCgcGaL/GayChj6fZtGMOYQYOc=:",
+  "earcut@3.0.2": "earcut@3.0.2:h0+7LalGP3yo5ywfF/AwqcULA73JcRn8Q4bD4g0Sjhw=:",
+  "geojson-vt@4.0.2": "geojson-vt@4.0.2:0jHmKg55n/7M6aFWRHOB0rFJ7xm4zO5UteGqnXsTKas=:",
+  "gl-matrix@3.4.4": "gl-matrix@3.4.4:ZP629NFaBeO6xsS7/LcCCBKRCikT7jTFadMFSsQpX6M=:",
+  "grid-index@1.1.0": "grid-index@1.1.0:qzgVCoYo9QfK5abOV1Q3VnyhPqa2mRYJS5fLX6EWmTY=:",
+  "kdbush@4.0.2": "kdbush@4.0.2:+tgNxS9hvxLrm+MYkGLLPUmiBDxnM9zTJUMxzogXQiQ=:",
+  "mapbox-gl@3.17.0": "mapbox-gl@3.17.0:N95/XxVSFICm4Ki8C926ltIrBw1PFDSXlitMPtJ6ias=:",
+  "martinez-polygon-clipping@0.7.4": "martinez-polygon-clipping@0.7.4:z26W/5T0GI+vPPsdA2VZNWwQRByfLefZU9i1aHjncLA=:",
+  "murmurhash-js@1.0.0": "murmurhash-js@1.0.0:4fRjg8epvWyUGtJngQ0YSpU5ay8QkF4cWsUUybHnDIA=:",
+  "pbf@4.0.1": "pbf@4.0.1:62nhmgjuKKsgpt20FlfO4XgIh1v2U8ppQsVz4tDU+g8=:",
+  "potpack@2.1.0": "potpack@2.1.0:4AusZbGjTmOT1kl7bYViTmsF5+Jm/P20F86FTRJAC9Y=:",
+  "protocol-buffers-schema@3.6.0": "protocol-buffers-schema@3.6.0:Y5nXV/1DfdBj9epKmmnoDYDnxbbhQWBdE9OM3eWs6y4=:",
+  "quickselect@3.0.0": "quickselect@3.0.0:3hNUJ5B8vj6I5Dzp6CvCvxglDbhHnQS6NImDgEV4V8A=:",
+  "resolve-protobuf-schema@2.1.0": "resolve-protobuf-schema@2.1.0:uOoqxXADHusstNUJDzpYjj+Mckn0qAlKYaSzULxUwQk=:",
+  "robust-predicates@2.0.4": "robust-predicates@2.0.4:IFDQpMXlUKSPbQFa277oYEL5MbvjlW7HjIQRkhac0/U=:",
+  "splaytree@0.1.4": "splaytree@0.1.4:hxchdprRjVa5N/GohBO7ymNF2j+Py1vqN/+yBAJo9JY=:",
+  "supercluster@8.0.1": "supercluster@8.0.1:9QZIbpvOBX1e4YwV2UFvF35hAK2QDzEpi0yoFCdP51I=:",
+  "tinyqueue@1.2.3": "tinyqueue@1.2.3:TFqtbhraVvlBBp22m8Yjhqu+iBsracFKYBqVOPrzo2g=:",
+  "tinyqueue@3.0.0": "tinyqueue@3.0.0:WYmogjNW144eAmI23uxK91JRv9Q0SXiCck2JAbE8hGY=:"
+}

package/config/rig.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+  "rigPackageName": "@excom/heft-rig",
+  "rigProfile": "default"
+}

package/index.css

@@ -0,0 +1,5 @@
+@import "./src/mapbox-view.css";
+
+@layer {
+  @mixin module-mapbox-view;
+}

package/index.ts

@@ -0,0 +1,7 @@
+import { MapboxView } from "./mapbox-view";
+import { MapboxViewMarker } from "./mapbox-view-marker";
+
+MapboxView.define();
+MapboxViewMarker.define();
+
+export { MapboxView, MapboxViewMarker };

package/mapbox-view-marker.ts

@@ -0,0 +1,279 @@
+import type { MapboxView as TMapboxView } from "./mapbox-view";
+import type {
+  MapInstance,
+  TMapboxgl,
+  TMapboxglMarkerOptions,
+} from "./src/types";
+import {
+  parseCoordsFromTokens,
+  parseNumsFromTokens,
+  queueTask,
+} from "./src/utils";
+import { deleteUndefined, selectOne } from "@excom/kit-utils";
+import { ConstructorType, Neutron, TokenList } from "@excom/neutron";
+
+// Workaround until partial type inference lands: https://github.com/Microsoft/TypeScript/pull/26349
+
+type T_HTMLMapboxViewMarkerElement = typeof TMapboxView.CustomElement;
+
+export const MapboxViewMarker = Neutron({
+  tag: "mapbox-view-marker",
+  props: {
+    mapRef: String,
+    mapElement:
+      HTMLElement as unknown as ConstructorType<T_HTMLMapboxViewMarkerElement>,
+    mapInstance: Object as unknown as ConstructorType<MapInstance>,
+    markerInstance: Object as unknown as TMapboxgl["Marker"],
+    markerElement: HTMLElement,
+    pinTag: String,
+    pinDataText: String,
+    pinDataPopoverText: String,
+    pinClass: String,
+    pinCoords: TokenList,
+    pinOffset: TokenList,
+    pinAnchor: String,
+    pinColor: String,
+    pinScale: Number,
+    pinDraggable: Boolean,
+    pinClickTolerance: Number,
+    pinRotation: Number,
+    pinRotationAlignment: String,
+    pinPitchAlignment: String,
+    pinOccludedOpacity: Number,
+    pinStyle: String,
+    focusEvents: TokenList,
+    panBoundaries: TokenList,
+    blurOnMapClick: Boolean,
+    singletonName: String,
+  },
+}).defineMethods({
+  panToMarker: ({ panBoundaries, markerElement, mapElement, pinCoords }) => {
+    const markerRect = (markerElement as Element).getBoundingClientRect?.();
+    const mapRect = (mapElement as Element).getBoundingClientRect?.();
+    const _panBoundaries = parseNumsFromTokens(panBoundaries) || [
+      15, 15, 15, 15,
+    ];
+    const isTop = markerRect.top < mapRect.height * (_panBoundaries[0] / 100);
+    const isRight =
+      markerRect.right > mapRect.width * (1 - _panBoundaries[1] / 100);
+    const isBottom =
+      markerRect.bottom > mapRect.height * (1 - _panBoundaries[2] / 100);
+    const isLeft = markerRect.left < mapRect.width * (_panBoundaries[3] / 100);
+    return {
+      ...((isTop || isRight || isBottom || isLeft) && {
+        mapElement: {
+          activeCoords: pinCoords || [],
+          emit: ["mapbox-view-reactive"],
+        },
+      }),
+      emit: ["mapbox-view-marker-focus"],
+    };
+  },
+  handleMarkerClick: ({ blurOnMapClick }, e: Event) => {
+    if (blurOnMapClick) {
+      e.stopPropagation();
+    }
+    return { panToMarker: [], emit: ["mapbox-view-marker-interacted"] };
+  },
+  setMapElement: (element) => {
+    const existingMapElement = element.mapElement;
+    const mapElement = selectOne(element.mapRef || "mapbox-view", {
+      scope: element,
+    }) as T_HTMLMapboxViewMarkerElement;
+    if (mapElement && mapElement !== existingMapElement) {
+      return {
+        mapElement,
+      };
+    }
+  },
+  setMapAndMarker: (element, mapInstance: MapInstance, mb: TMapboxgl) => ({
+    mapInstance,
+    markerInstance: new mb.Marker(markerOpts(element)),
+  }),
+  blurCallback: () => ({
+    emit: ["mapbox-view-marker-blur"],
+  }),
+  singletonCallback: (element, { detail }: CustomEvent<typeof element>) => {
+    if (
+      element !== detail &&
+      element.singletonName &&
+      detail?.singletonName &&
+      element.singletonName === detail?.singletonName
+    ) {
+      element.markerElement?.classList.remove("is-active");
+    }
+  },
+});
+
+type PartialProps = Partial<(typeof MapboxViewMarker)["Props"]>;
+
+const markerOpts = (element: PartialProps): TMapboxglMarkerOptions => {
+  // @ts-ignore
+  return deleteUndefined({
+    element: element.pinTag
+      ? document.createElement(element.pinTag)
+      : undefined,
+    offset: parseCoordsFromTokens(element.pinOffset),
+    color: element.pinColor,
+    scale: element.pinScale,
+    anchor: (element.pinAnchor ||
+      undefined) as TMapboxglMarkerOptions["anchor"],
+    draggable: element.pinDraggable,
+    rotation: element.pinRotation,
+    rotationAlignment: element.pinRotationAlignment,
+    pitchAlignment: element.pinPitchAlignment,
+    occludedOpacity: element.pinOccludedOpacity,
+    className: element.pinClass,
+  });
+};
+
+MapboxViewMarker.onConnected(({ isMoving, mapRef, setMapElement }) => {
+  // setTimeout to ensure map element is instantiated; the timer id must not
+  // be returned
+  if (!isMoving && !mapRef) setTimeout(setMapElement, 0);
+})
+  .onPropSet("mapRef", ({ setMapElement }) => {
+    // Defer so the map element is instantiated
+    setTimeout(setMapElement, 0);
+  })
+  .onPropSet("mapElement", ({ mapElement, setMapAndMarker }) => {
+    if (mapElement.mapInstance) {
+      queueTask(mapElement.mapInstance, setMapAndMarker);
+    } else {
+      // Map not ready yet (first load / Mapbox GL still loading).
+      // Wait for load, then init the marker.
+      mapElement.addEventListener(
+        "mapbox-view-loaded",
+        () => queueTask(mapElement.mapInstance, setMapAndMarker),
+        { once: true }
+      );
+    }
+  })
+  .onDisconnected(({ markerInstance, isMoving }) => {
+    if (!isMoving) {
+      if (markerInstance) {
+        markerInstance.remove();
+      }
+      return {
+        mapElement: null,
+        mapInstance: null,
+        markerInstance: null,
+        markerElement: null,
+      };
+    }
+  })
+  .onPropChanged(
+    ["pinCoords", "markerInstance"],
+    ({ pinCoords, markerInstance, mapInstance, markerElement }) => {
+      const coords = parseCoordsFromTokens(pinCoords);
+      if (markerInstance && coords && mapInstance) {
+        markerInstance.setLngLat(coords);
+        markerInstance.addTo(mapInstance);
+        return (
+          !markerElement && {
+            markerElement: markerInstance.getElement(),
+          }
+        );
+      }
+    }
+  )
+  .onPropChanged(
+    ["markerInstance", "pinClass"],
+    ({ markerInstance, pinClass }, previous) => {
+      if (markerInstance) {
+        if (previous?.pinClass) {
+          previous.pinClass
+            .split(" ")
+            .forEach((c) => markerInstance.removeClassName(c));
+        }
+        pinClass?.split(" ")?.forEach((c) => markerInstance.addClassName(c));
+      }
+    }
+  )
+  .onPropChanged(
+    ["markerElement", "pinDataText"],
+    ({ markerElement, pinDataText }) => {
+      if (markerElement) {
+        return {
+          markerElement: {
+            setAttribute: ["data-text", pinDataText || ""],
+          },
+        };
+      }
+    }
+  )
+  .onPropChanged(
+    ["markerElement", "pinDataPopoverText"],
+    ({ markerElement, pinDataPopoverText }) => {
+      if (markerElement) {
+        return {
+          markerElement: {
+            setAttribute: ["data-popover-text", pinDataPopoverText || ""],
+          },
+        };
+      }
+    }
+  )
+  .onPropChanged(
+    ["pinStyle", "markerElement"],
+    ({ pinStyle, markerElement }) => {
+      if (markerElement) {
+        markerElement.setAttribute(
+          "style",
+          `${markerElement.getAttribute("style") ?? ""}; ${pinStyle ?? ""}`
+        );
+      }
+    }
+  )
+  .onPropChanged(
+    ["markerElement", "focusEvents"],
+    ({ markerElement, handleMarkerClick, focusEvents }, previous) => {
+      if (markerElement) {
+        return {
+          markerElement: {
+            toggleListeners: [
+              ...(focusEvents || []).map((k) => [k, handleMarkerClick, true]),
+              ...(previous?.focusEvents
+                ? (previous.focusEvents || []).map((k) => [
+                    k,
+                    handleMarkerClick,
+                    false,
+                  ])
+                : []),
+            ],
+          },
+        };
+      }
+    }
+  )
+  .onEvent("mapbox-view-marker-focus-trigger", (_, e) => {
+    e.stopPropagation();
+    return {
+      panToMarker: [],
+    };
+  })
+  .onEventDefault("mapbox-view-marker-focus", ({ markerElement }) => {
+    markerElement?.classList.add("is-active");
+    return {
+      broadcast: ["mapbox-view-marker-focus", { detail: markerElement }],
+    };
+  })
+  .onEvent("mapbox-view-marker-blur-trigger", (_, e) => {
+    e.stopPropagation();
+    return {
+      emit: ["mapbox-view-marker-blur"],
+    };
+  })
+  .onEventDefault("mapbox-view-marker-blur", ({ markerElement }) => {
+    markerElement?.classList.remove("is-active");
+  })
+  .onPropChanged("blurOnMapClick", ({ blurOnMapClick, blurCallback }) => ({
+    toggleBroadcastListeners: [
+      ["mapbox-view-clicked", blurCallback, !!blurOnMapClick],
+    ],
+  }))
+  .onPropChanged("singletonName", ({ singletonName, singletonCallback }) => ({
+    toggleBroadcastListeners: [
+      ["mapbox-view-marker-focus", singletonCallback, !!singletonName],
+    ],
+  }));

package/mapbox-view.ts

@@ -0,0 +1,582 @@
+import type {
+  LayersConfig,
+  MapInstance,
+  TAnimationOptions,
+  TCameraOptions,
+  TMapboxgl,
+  TMapTouchEvent,
+} from "./src/types";
+import { EASINGS, parseCoordsFromTokens, queueTask } from "./src/utils";
+import { createElement, deleteUndefined, isPojo } from "@excom/kit-utils";
+import { loadDependency } from "@excom/kit-utils/load-dependency";
+import { ConstructorType, Neutron, TokenList } from "@excom/neutron";
+
+const centerCameraOpts = (el: any): TCameraOptions => {
+  const coords = parseCoordsFromTokens(el.centerCoords, el.camOffset) || [0, 0];
+  // `maxBounds` must be a TokenList / array of 4 finite numbers
+  let maxBounds: [[number, number], [number, number]] | undefined = undefined;
+  if (el.maxBounds?.length === 4) {
+    const nums = Array.from(el.maxBounds, (v) => Number(v));
+    if (nums.every((v) => typeof v === "number" && isFinite(v))) {
+      maxBounds = [
+        [nums[0], nums[1]], // SW [lng, lat]
+        [nums[2], nums[3]], // NE [lng, lat]
+      ];
+    }
+  }
+  return deleteUndefined({
+    center: coords, // [lng, lat]; lat must be -90..90
+    zoom: el.centerZoom || 1, // starting zoom
+    pitch: el.centerPitch || 0, // degrees
+    bearing: el.centerBearing || 0, // degrees
+    minZoom: el.minZoom ?? 10,
+    maxZoom: el.maxZoom ?? 20,
+    maxBounds,
+  });
+};
+const activeCameraOpts = (el: any): TCameraOptions => {
+  const coords = parseCoordsFromTokens(el.activeCoords, el.camOffset) ||
+    parseCoordsFromTokens(el.centerCoords, el.camOffset) || [0, 0];
+  return deleteUndefined({
+    center: coords,
+    zoom: el.activeZoom ?? undefined,
+    pitch: el.activePitch ?? undefined,
+    bearing: el.activeBearing ?? undefined,
+  });
+};
+const shouldAnimate = (el: any): boolean => {
+  return !!(
+    typeof el.camAnimation === "string" ||
+    el.camAnimationDuration ||
+    el.camAnimationOffset?.length ||
+    el.camAnimationEssential
+  );
+};
+const animateCameraOpts = (el: any): TAnimationOptions => {
+  return deleteUndefined({
+    // Even `cam-animate=""` still animates with the default easing
+    animate: shouldAnimate(el),
+    easing:
+      (el.camAnimation && EASINGS[el.camAnimation]) ||
+      EASINGS["ease-out-quint"],
+    duration: el.camAnimationDuration || undefined,
+    offset: (el.camAnimationOffset?.length === 2
+      ? el.camAnimationOffset.map((n) => Number(n))
+      : undefined) as [number, number],
+    essential: el.camAnimationEssential || undefined,
+  });
+};
+const checkMapMoved = (el: any): boolean => {
+  if (!el.mapInstance) return false;
+  const opts = centerCameraOpts(el);
+  const camCoords = el.mapInstance?.getCenter();
+  const coordsTolerance = el.centerCoordsTolerance || 0.0005;
+  const zoomTolerance = el.centerZoomTolerance || 0.5;
+  const pitchTolerance = el.centerPitchTolerance || 0;
+  const bearingTolerance = el.centerBearingTolerance || 0;
+
+  if (
+    !opts.center ||
+    opts.zoom === undefined ||
+    opts.pitch === undefined ||
+    opts.bearing === undefined
+  ) {
+    return false;
+  }
+
+  const r = el.preserveCamera || [];
+
+  return !(
+    (r.includes("coords") ||
+      Math.abs(camCoords.lng - opts.center[0]) <= coordsTolerance) &&
+    (r.includes("coords") ||
+      Math.abs(camCoords.lat - opts.center[1]) <= coordsTolerance) &&
+    (r.includes("zoom") ||
+      Math.abs(el.mapInstance.getZoom() - opts.zoom) <= zoomTolerance) &&
+    (r.includes("pitch") ||
+      Math.abs(el.mapInstance.getPitch() - opts.pitch) <= pitchTolerance) &&
+    (r.includes("bearing") ||
+      Math.abs(el.mapInstance.getBearing() - opts.bearing) <= bearingTolerance)
+  );
+};
+
+export const MapboxView = Neutron({
+  tag: "mapbox-view",
+  renderRoot: {
+    tag: "div",
+    shadow: "open",
+  },
+  props: {
+    mapboxPromise: Promise as ConstructorType<Promise<TMapboxgl>>,
+    containerElement: HTMLElement,
+    mapInstance: Object as unknown as ConstructorType<MapInstance>,
+    accessToken: String,
+    mapStyle: String,
+    isLoaded: Boolean,
+    isAnimated: Boolean,
+    isMoved: Boolean,
+    centerCoords: TokenList,
+    centerCoordsTolerance: Number,
+    centerZoom: Number,
+    centerZoomTolerance: Number,
+    centerPitch: Number,
+    centerPitchTolerance: Number,
+    centerBearing: Number,
+    centerBearingTolerance: Number,
+    activeCoords: TokenList,
+    activeZoom: Number,
+    activePitch: Number,
+    activeBearing: Number,
+    preserveCamera: TokenList,
+    minZoom: Number,
+    maxZoom: Number,
+    maxBounds: TokenList,
+    camOffset: TokenList,
+    camAnimation: String,
+    camAnimationDuration: Number,
+    camAnimationOffset: TokenList,
+    camAnimationEssential: Boolean,
+    timerId: Number,
+    isDragging: Boolean,
+    clickholdMs: Number,
+    droppedPin: Object,
+    layers: Object as unknown as ConstructorType<LayersConfig>,
+    activeLayer: String,
+    visibleLayers: TokenList,
+    camPadding: TokenList,
+  },
+})
+  .defineMethods({
+    holdStartCb: (
+      // @ts-ignore TODO defineMethods
+      { isDragging, clickholdMs, emitClickhold },
+      e: TMapTouchEvent
+    ) => {
+      // Ignore multi-touch
+      if (e.originalEvent?.touches && e.originalEvent.touches.length !== 1)
+        return;
+      return (
+        !isDragging &&
+        clickholdMs && {
+          timerId: setTimeout(
+            () => emitClickhold(e.lngLat),
+            clickholdMs
+          ) as unknown as number,
+        }
+      );
+    },
+    holdEndCb: ({ timerId }) => {
+      if (timerId) clearTimeout(timerId);
+    },
+    holdDragstartCb: ({ timerId }) => {
+      if (timerId) clearTimeout(timerId);
+      return {
+        isDragging: true,
+      };
+    },
+    holdDragendCb: () => {
+      return {
+        isDragging: false,
+      };
+    },
+    mapClickedCb: (_, e: TMapTouchEvent) => ({
+      broadcast: ["mapbox-view-clicked", { detail: e }],
+    }),
+    emitClickhold: (_, lngLat) => {
+      return {
+        emit: [
+          "mapbox-view-clickhold",
+          {
+            detail: lngLat,
+          },
+        ],
+      };
+    },
+    loadedCallback: () => ({
+      isLoaded: true,
+      emit: ["mapbox-view-loaded"],
+    }),
+    calcIsMoved: (element, override: boolean) => ({
+      isMoved: override ?? checkMapMoved(element),
+    }),
+    updateCamera: (
+      element,
+      destination: "center" | "active",
+      cb?: () => Record<string, any> | any
+    ) => {
+      if (element.mapInstance) {
+        // Already at the destination (within tolerance): skip animation,
+        // but still update `isMoved` to match.
+        if (destination === "center" && !checkMapMoved(element)) {
+          return { calcIsMoved: [false] };
+        }
+        queueTask(element.mapInstance, (m) => {
+          const cbResult = cb?.();
+          if (!cb || cbResult) {
+            const updateObject = isPojo(cbResult) ? cbResult : {};
+            const cameraOpts = deleteUndefined({
+              ...(destination === "center"
+                ? centerCameraOpts(element)
+                : activeCameraOpts(element)),
+              // Drop any properties in the `preserveCamera` list
+              ...Object.fromEntries(
+                (element.preserveCamera || []).map((key: string) => [
+                  key === "coords" ? "center" : key,
+                  undefined,
+                ])
+              ),
+              ...deleteUndefined(updateObject),
+            });
+            if (destination === "center" && element.isAnimated) {
+              // Continuous tracking: `easeTo` for short incremental updates
+              m.easeTo({ ...cameraOpts, duration: 250 });
+            } else {
+              m[element.isAnimated ? "flyTo" : "jumpTo"]({
+                ...cameraOpts,
+                ...(element.isAnimated ? animateCameraOpts(element) : {}),
+              });
+            }
+          }
+        });
+        /* Return outside `queueTask` so Neutron sees the state update.
+           A return inside the callback was discarded, leaving `isMoved`
+           stuck after programmatic camera moves (recenter, bearing). */
+        return {
+          calcIsMoved: [destination === "active"],
+        };
+      }
+    },
+    zoomToOverview: (element) => {
+      if (element.mapInstance) {
+        queueTask(element.mapInstance, (m) => {
+          m[element.isAnimated ? "easeTo" : "jumpTo"]({
+            zoom: element.centerZoom ?? undefined,
+          });
+        });
+      }
+    },
+  })
+  .onConnected((el) => {
+    if (el.isMoving) return;
+    const cssLink = createElement("link", {
+      rel: "stylesheet",
+      href: "https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.css",
+    });
+    const div = createElement("div", {
+      style: "height: 100%; width: 100%;",
+      id: `mapbox-container-${Math.random().toString(36).substr(2, 9)}`,
+    });
+
+    // Layers from a script slot
+    const layersScript = el.querySelector('script[slot="layers"]');
+    if (layersScript && layersScript.textContent) {
+      try {
+        const layersData = JSON.parse(layersScript.textContent);
+        el.layers = layersData;
+      } catch (error) {
+        console.error("Failed to parse layers JSON:", error);
+      }
+    }
+
+    return {
+      renderRoot: {
+        append: [cssLink, div],
+      },
+      containerElement: div,
+    };
+  })
+  .onPropChanged(["accessToken", "containerElement"], (el, previous) => {
+    if (el.accessToken && el.containerElement) {
+      // `accessToken` changed: recreate the map
+      const accessTokenChanged =
+        previous?.accessToken && previous.accessToken !== el.accessToken;
+
+      if (!el.mapInstance || accessTokenChanged) {
+        // Tear down the existing map after an access-token change
+        if (accessTokenChanged && el.mapInstance) {
+          el.mapInstance.remove();
+        }
+
+        // Empty the container before creating a new map
+        el.containerElement.innerHTML = "";
+
+        return {
+          mapboxPromise: loadDependency<TMapboxgl>(
+            "umd",
+            "https://api.mapbox.com/mapbox-gl-js/v3.9.2/mapbox-gl.js",
+            "mapboxgl"
+          ),
+        };
+      }
+    }
+  })
+  .onPromiseResolved("mapboxPromise", (el, result) => {
+    const mapbox = result.mapboxPromise as unknown as TMapboxgl;
+    if (mapbox) {
+      mapbox.accessToken = el.accessToken;
+      return {
+        mapboxPromise: null,
+        // TODO support dark mode
+        mapInstance: new mapbox.Map({
+          container: el.containerElement!,
+          style: el.mapStyle || undefined,
+          ...centerCameraOpts(el),
+        }),
+      };
+    }
+  })
+  .onPropSet(
+    "mapInstance",
+    ({ mapInstance, loadedCallback, mapClickedCb, calcIsMoved }) => {
+      // Recalc `isMoved` for user gestures only, not programmatic `flyTo` / `easeTo`
+      mapInstance.on("movestart", (e) => e.originalEvent && calcIsMoved(true));
+      mapInstance.on("moveend", (e) => e.originalEvent && calcIsMoved());
+      mapInstance.on("load", () => loadedCallback());
+      queueTask(mapInstance, (m) => m.on("click", mapClickedCb));
+    }
+  )
+  .onPropChanged("mapStyle", ({ mapInstance, mapStyle }) => {
+    if (mapInstance && mapStyle) {
+      queueTask(mapInstance, (m) => {
+        try {
+          m.setStyle(mapStyle);
+        } catch (error) {
+          console.warn("Failed to set map style:", error);
+        }
+      });
+    }
+  })
+  .onPropChanged("camPadding", ({ mapInstance, camPadding }) => {
+    if (mapInstance) {
+      if (Array.isArray(camPadding) && camPadding.length >= 1) {
+        const nums = camPadding.map((v: any) => Number(v) || 0);
+        // 1-4 values like CSS: [all], [vertical horizontal], [top right bottom left]
+        const top = nums[0];
+        const right = nums.length > 1 ? nums[1] : top;
+        const bottom = nums.length > 2 ? nums[2] : top;
+        const left = nums.length > 3 ? nums[3] : right;
+        queueTask(mapInstance, (m) =>
+          m.setPadding({ top, right, bottom, left })
+        );
+      } else {
+        queueTask(mapInstance, (m) =>
+          m.setPadding({ top: 0, right: 0, bottom: 0, left: 0 })
+        );
+      }
+    }
+  })
+  .onPropChanged("maxBounds", (el) => {
+    if (el.mapInstance && el.maxBounds?.length === 4) {
+      const nums = Array.from(el.maxBounds, (v) => Number(v));
+      if (nums.every((v) => isFinite(v))) {
+        queueTask(el.mapInstance, (m) =>
+          m.setMaxBounds([
+            [nums[0], nums[1]],
+            [nums[2], nums[3]],
+          ])
+        );
+      }
+    }
+  })
+  .onPropChanged(
+    ["centerCoords", "centerZoom", "centerPitch", "centerBearing"],
+    ({ isMoved }) => !isMoved && { updateCamera: ["center"] }
+  )
+  .onPropChanged(
+    ["activeCoords", "activeZoom", "activePitch", "activeBearing"],
+    () => ({
+      updateCamera: ["active"],
+    })
+  )
+  .onEvent(
+    "mapbox-view-recenter",
+    ({ isMoved }) => isMoved && { updateCamera: ["center"] }
+  )
+  .onEvent("mapbox-view-reactive", () => ({
+    updateCamera: ["active"],
+  }))
+  .onEvent("mapbox-view-zoom-in", ({ activeZoom, centerZoom }) => ({
+    activeZoom: (activeZoom ?? centerZoom ?? 1) + 1,
+  }))
+  .onEvent("mapbox-view-zoom-out", ({ activeZoom, centerZoom }) => ({
+    activeZoom: (activeZoom ?? centerZoom ?? 1) - 1,
+  }))
+  .onEvent("mapbox-view-zoom-overview", () => ({
+    zoomToOverview: [],
+  }))
+  .onPropChanged(
+    ["clickholdMs", "mapInstance"],
+    ({
+      clickholdMs,
+      mapInstance,
+      holdStartCb,
+      holdEndCb,
+      holdDragstartCb,
+      holdDragendCb,
+    }) => {
+      if (mapInstance) {
+        // Drop previous mouse + touch listeners
+        mapInstance.off("mousedown", holdStartCb);
+        mapInstance.off("mouseup", holdEndCb);
+        mapInstance.off("touchstart", holdStartCb);
+        mapInstance.off("touchend", holdEndCb);
+        mapInstance.off("touchmove", holdEndCb);
+        mapInstance.off("touchcancel", holdEndCb);
+        mapInstance.off("dragstart", holdDragstartCb);
+        mapInstance.off("dragend", holdDragendCb);
+        if (clickholdMs) {
+          const nav = navigator as any;
+          const isTouch = "ontouchstart" in window || nav.maxTouchPoints > 0;
+          if (isTouch) {
+            mapInstance.on("touchstart", holdStartCb);
+            mapInstance.on("touchend", holdEndCb);
+            mapInstance.on("touchmove", holdEndCb);
+            mapInstance.on("touchcancel", holdEndCb);
+          } else {
+            mapInstance.on("mousedown", holdStartCb);
+            mapInstance.on("mouseup", holdEndCb);
+          }
+          // A drag cancels the hold
+          mapInstance.on("dragstart", holdDragstartCb);
+          mapInstance.on("dragend", holdDragendCb);
+        }
+      }
+    }
+  )
+  .onPropSet("droppedPin", (_, previous) => {
+    (previous.droppedPin as any)?.remove();
+  })
+  .onPropChanged("activeLayer", ({ mapInstance, layers, activeLayer }) => {
+    if (!mapInstance || !activeLayer) return;
+
+    // Toggle custom layers from `layers`
+    if (layers) {
+      Object.keys(layers).forEach((layerId) => {
+        const fullLayerId = `custom-layer-${layerId}`;
+        if (mapInstance.getLayer(fullLayerId)) {
+          mapInstance.setLayoutProperty(
+            fullLayerId,
+            "visibility",
+            layerId === activeLayer ? "visible" : "none"
+          );
+        }
+      });
+    }
+
+    // Toggle style layers: hide others of the same type, show the active one
+    queueTask(mapInstance, (m) => {
+      try {
+        const targetLayer = m.getLayer(activeLayer);
+        if (!targetLayer) return;
+        const style = m.getStyle();
+        style.layers.forEach((layer) => {
+          if (layer.type === targetLayer.type) {
+            m.setLayoutProperty(
+              layer.id,
+              "visibility",
+              layer.id === activeLayer ? "visible" : "none"
+            );
+          }
+        });
+      } catch (error) {
+        console.error(`Error setting active layer ${activeLayer}:`, error);
+      }
+    });
+  })
+  .onPropChanged("visibleLayers", ({ mapInstance, visibleLayers }) => {
+    if (!mapInstance) return;
+    queueTask(mapInstance, (m) => {
+      const style = m.getStyle();
+      if (!style?.layers) return;
+      style.layers.forEach((layer) => {
+        try {
+          // Only layers with a layout property (skip required base layers)
+          if (layer.layout !== undefined) {
+            const shouldBeVisible = visibleLayers?.includes(layer.id);
+            const currentVisibility = m.getLayoutProperty(
+              layer.id,
+              "visibility"
+            );
+            if (currentVisibility !== (shouldBeVisible ? "visible" : "none")) {
+              m.setLayoutProperty(
+                layer.id,
+                "visibility",
+                shouldBeVisible ? "visible" : "none"
+              );
+            }
+          }
+        } catch (error) {
+          console.warn(
+            `Could not set visibility for layer ${layer.id}:`,
+            error
+          );
+        }
+      });
+    });
+  })
+  .onPropChanged(
+    ["layers", "mapInstance"],
+    ({ layers, mapInstance, activeLayer }) => {
+      if (mapInstance && layers) {
+        // Remove existing layers
+        const existingLayers = mapInstance.getStyle()?.layers || [];
+        existingLayers.forEach((layer) => {
+          if (layer.id.startsWith("custom-layer-")) {
+            mapInstance.removeLayer(layer.id);
+          }
+        });
+
+        // Add the new layers
+        Object.entries(layers).forEach(
+          ([layerId, layerConfig]: [string, any]) => {
+            const fullLayerId = `custom-layer-${layerId}`;
+
+            // Add the source if it's missing
+            if (!mapInstance.getSource(fullLayerId)) {
+              mapInstance.addSource(fullLayerId, layerConfig.source);
+            }
+
+            // Add the layer
+            mapInstance.addLayer({
+              id: fullLayerId,
+              ...layerConfig.layer,
+              source: fullLayerId,
+              layout: {
+                ...layerConfig.layer.layout,
+                visibility: layerId === activeLayer ? "visible" : "none",
+              },
+            });
+          }
+        );
+      }
+    }
+  )
+  .onDisconnected(
+    ({
+      mapInstance,
+      shadowRoot,
+      isMoving,
+      holdStartCb,
+      holdEndCb,
+      holdDragstartCb,
+      holdDragendCb,
+    }) => {
+      if (isMoving) return;
+      if (mapInstance) {
+        // Drop holdstart / holdend listeners from click-hold
+        mapInstance.off("mousedown", holdStartCb);
+        mapInstance.off("mouseup", holdEndCb);
+        mapInstance.off("touchstart", holdStartCb);
+        mapInstance.off("touchend", holdEndCb);
+        mapInstance.off("touchmove", holdEndCb);
+        mapInstance.off("touchcancel", holdEndCb);
+        mapInstance.off("dragstart", holdDragstartCb);
+        mapInstance.off("dragend", holdDragendCb);
+        // `remove()` drops built-in listeners (movestart, moveend, load, click)
+        mapInstance.remove();
+      }
+      if (shadowRoot) {
+        shadowRoot.innerHTML = "";
+      }
+    }
+  );

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@excom/mapbox-view",
+  "version": "0.1.0",
+  "description": "<mapbox-view> custom element",
+  "license": "MIT",
+  "engines": {
+    "node": ">=24.13.0"
+  },
+  "type": "module",
+  "dependencies": {
+    "mapbox-gl": "^3.9.2",
+    "@excom/neutron": "^0.1.0",
+    "@excom/kit-utils": "^0.1.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@excom/heft-rig": "^0.1.0"
+  },
+  "repository": {
+    "url": "excom-dev/nucleus",
+    "directory": "packages/mapbox-view"
+  },
+  "homepage": "https://github.com/excom-dev/nucleus/tree/main/packages/mapbox-view/support/docs/README.md",
+  "bugs": "https://github.com/excom-dev/nucleus/issues",
+  "keywords": [
+    "mapbox-view",
+    "neutron",
+    "custom-elements"
+  ],
+  "excom": {
+    "coverageThreshold": false,
+    "documented": false,
+    "packageType": "kit-element"
+  },
+  "scripts": {
+    "build": "node node_modules/@excom/heft-rig/scripts/vite-build.mjs",
+    "build:watch": "node node_modules/@excom/heft-rig/scripts/vite-build-watch.mjs",
+    "format": "node node_modules/@excom/heft-rig/scripts/format.mjs",
+    "test": "node node_modules/@excom/heft-rig/scripts/vitest.mjs",
+    "coverage": "node node_modules/@excom/heft-rig/scripts/coverage.mjs",
+    "dev": "node node_modules/@excom/heft-rig/scripts/vite-dev.mjs",
+    "preview": "node node_modules/@excom/heft-rig/scripts/vite-preview.mjs",
+    "build:package-metas": "node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs",
+    "build:docs": "node node_modules/@excom/heft-rig/scripts/build-docs.mjs"
+  }
+}

package/rush-logs/mapbox-view.apply-exports.cache.log

@@ -0,0 +1 @@
+Caching has been disabled for this project's "apply-exports" command.

package/rush-logs/mapbox-view.apply-exports.log

@@ -0,0 +1 @@
+Invoking: cd "$RUSH_PROJECT_FOLDER" && node ../heft-rig/scripts/apply-exports.mjs 

package/rush-logs/mapbox-view.build_docs.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:docs" command, so caching has been disabled.

package/rush-logs/mapbox-view.build_docs.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-docs.mjs 

package/rush-logs/mapbox-view.build_package-metas.cache.log

@@ -0,0 +1 @@
+This project does not define the caching behavior of the "build:package-metas" command, so caching has been disabled.

package/rush-logs/mapbox-view.build_package-metas.log

@@ -0,0 +1 @@
+Invoking: node node_modules/@excom/heft-rig/scripts/build-package-metas.mjs 

package/src/mapbox-view.css

@@ -0,0 +1,10 @@
+/* Aliases */
+@custom-selector :--mapbox-view mapbox-view, .tag-mapbox-view;
+
+@define-mixin module-mapbox-view {
+  :--mapbox-view {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+}

package/src/types.ts

@@ -0,0 +1,32 @@
+// Import mapbox-gl as `type` only. Never bundle it.
+import type mapboxglDefault from "mapbox-gl";
+
+export type TMapboxgl = typeof mapboxglDefault;
+export type TMapboxglMarkerOptions = mapboxgl.MarkerOptions;
+export type TMapTouchEvent = mapboxgl.MapTouchEvent;
+export type TCameraOptions = mapboxgl.CameraOptions;
+export type TAnimationOptions = mapboxgl.AnimationOptions;
+export type MapInstance = InstanceType<TMapboxgl["Map"]>;
+
+export interface LayerSource {
+  type: string;
+  data?: any;
+  url?: string;
+  tiles?: string[];
+  [key: string]: any;
+}
+
+export interface LayerConfig {
+  source: LayerSource;
+  layer: {
+    type: string;
+    paint?: Record<string, any>;
+    layout?: Record<string, any>;
+    filter?: any[];
+    [key: string]: any;
+  };
+}
+
+export interface LayersConfig {
+  [layerId: string]: LayerConfig;
+}

package/src/utils.ts

@@ -0,0 +1,78 @@
+import type { MapInstance } from "./types";
+import type { TMapboxgl } from "./types";
+import { isNumber } from "@excom/kit-utils";
+
+export const EASINGS = {
+  // Slow start, then speed up
+  ["ease-in-cubic"]: function (t) {
+    return t * t * t;
+  },
+  // Fast start, long slow wind-down
+  ["ease-out-quint"]: function (t) {
+    return 1 - Math.pow(1 - t, 5);
+  },
+  // Slow start and finish, fast middle
+  ["ease-in-out-circ"]: function (t) {
+    return t < 0.5
+      ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
+      : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+  },
+  // Fast start, bounce at the end
+  ["ease-out-bounce"]: function (t) {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+
+    if (t < 1 / d1) {
+      return n1 * t * t;
+    } else if (t < 2 / d1) {
+      return n1 * (t -= 1.5 / d1) * t + 0.75;
+    } else if (t < 2.5 / d1) {
+      return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    } else {
+      return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    }
+  },
+};
+export const parseCoordsFromTokens = (
+  tokens: string[] | null = [],
+  offsetTokens: string[] | null = []
+): [number, number] | undefined => {
+  if (tokens?.length === 2) {
+    const long = Number(tokens[0]);
+    const lat = Number(tokens[1]);
+    if (isNumber(long) && isNumber(lat)) {
+      const offset = parseCoordsFromTokens(offsetTokens);
+      if (offset) {
+        return [long + offset[0], lat + offset[1]];
+      } else {
+        return [long, lat];
+      }
+    }
+  }
+  return undefined;
+};
+
+export const parseNumsFromTokens = (
+  tokens: string[] | null = []
+): number[] | undefined => {
+  const parsed = tokens?.map((t) => Number(t));
+  if (parsed?.every(isNumber)) {
+    return parsed as number[];
+  }
+  return undefined;
+};
+
+export const queueTask = (
+  mapInstance?: MapInstance | null,
+  task?: (m: MapInstance, mapboxgl: TMapboxgl) => any
+) => {
+  if (mapInstance) {
+    if (mapInstance._loaded) {
+      task?.(mapInstance, window["mapboxgl"] as unknown as TMapboxgl);
+    } else {
+      mapInstance.on("load", () => {
+        task?.(mapInstance, window["mapboxgl"] as unknown as TMapboxgl);
+      });
+    }
+  }
+};

package/support/custom-elements.json

@@ -0,0 +1,77 @@
+{
+  "schemaVersion": "1.0.0",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "mapbox-view.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "MapboxView",
+          "customElement": true,
+          "tagName": "mapbox-view",
+          "_neutron": {
+            "cssAliases": [
+              {
+                "name": ":--mapbox-view",
+                "selectors": [
+                  "mapbox-view",
+                  ".tag-mapbox-view"
+                ],
+                "kind": "element"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MapboxView",
+          "declaration": {
+            "name": "MapboxView",
+            "module": "mapbox-view.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "mapbox-view",
+          "declaration": {
+            "name": "MapboxView",
+            "module": "mapbox-view.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "mapbox-view-marker.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "name": "MapboxViewMarker",
+          "customElement": true,
+          "tagName": "mapbox-view-marker"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MapboxViewMarker",
+          "declaration": {
+            "name": "MapboxViewMarker",
+            "module": "mapbox-view-marker.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "mapbox-view-marker",
+          "declaration": {
+            "name": "MapboxViewMarker",
+            "module": "mapbox-view-marker.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/support/dist-docs/mapbox-view-marker.md

@@ -0,0 +1,3 @@
+# `<mapbox-view-marker>`
+
+**Tag:** `<mapbox-view-marker>`

package/support/dist-docs/mapbox-view.md

@@ -0,0 +1,33 @@
+# `<mapbox-view>`
+
+**Tag:** `<mapbox-view>`
+
+## Installation
+
+`@excom/mapbox-view` v0.1.0
+
+```bash
+pnpm add @excom/mapbox-view
+```
+
+```bash
+npm install @excom/mapbox-view
+```
+
+```bash
+yarn add @excom/mapbox-view
+```
+
+### Import
+
+```ts
+import "@excom/mapbox-view";
+```
+
+## API
+
+### CSS Aliases
+
+| Alias | Kind | Matches | Description |
+| --- | --- | --- | --- |
+| `:--mapbox-view` | element | `mapbox-view`, `.tag-mapbox-view` |  |

package/support/tests/mapbox-view.test.ts

@@ -0,0 +1,41 @@
+import {
+  parseCoordsFromTokens,
+  parseNumsFromTokens,
+  queueTask,
+} from "../../src/utils";
+import {
+  describe,
+  expect,
+  it,
+  vi,
+} from "@excom/heft-rig/node_modules/vitest";
+
+describe("mapbox-view utils", () => {
+  it("parses coordinate tokens with offsets", () => {
+    const result = parseCoordsFromTokens(["1", "2"], ["3", "4"]);
+    expect(result).toEqual([4, 6]);
+  });
+
+  it("parses numeric tokens", () => {
+    expect(parseNumsFromTokens(["1", "2", "3"])).toEqual([1, 2, 3]);
+    expect(parseNumsFromTokens(["1", "x"])).toBeUndefined();
+  });
+
+  it("queues tasks until map is loaded", () => {
+    const task = vi.fn();
+    (window as unknown as { mapboxgl?: object }).mapboxgl = { version: "1" };
+    const loadedMap = { _loaded: true, on: vi.fn() };
+    queueTask(loadedMap as any, task);
+    expect(task).toHaveBeenCalledWith(loadedMap, (window as any).mapboxgl);
+
+    const on = vi.fn((_, cb: () => void) => cb());
+    const pendingMap = { _loaded: false, on };
+    const pendingTask = vi.fn();
+    queueTask(pendingMap as any, pendingTask);
+    expect(on).toHaveBeenCalled();
+    expect(pendingTask).toHaveBeenCalledWith(
+      pendingMap,
+      (window as any).mapboxgl
+    );
+  });
+});

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@excom/heft-rig/profiles/default/config/tsconfig.json",
+  "include": ["./*.ts"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.spec.ts"],
+  "compilerOptions": {
+    "declaration": false,
+    "declarationMap": false,
+    "emitDeclarationOnly": false,
+    "noEmit": true
+  }
+}