@stackwright/maplibre 1.0.0-alpha.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Per Aspera Sapientia LLC
+
+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/README.md

@@ -0,0 +1,231 @@
+# @stackwright/maplibre
+
+MapLibre GL adapter for Stackwright — **free tier, no API keys required**.
+
+## Features
+
+- ✅ 2D interactive maps with pan/zoom
+- ✅ Markers with click-to-show popups
+- ✅ Polyline routes (flight paths, shipping lanes)
+- ✅ Polygon boundaries (territories, regions)
+- ✅ GeoJSON support (complex geometries)
+- ✅ Free MapLibre demo tiles (no vendor lock-in)
+- ✅ SSR-safe for Next.js
+- ✅ Responsive design (320px to 1440px)
+
+## Installation
+
+```bash
+pnpm add @stackwright/maplibre
+```
+
+## Usage
+
+### 1. Register the Provider
+
+In your Next.js `_app.tsx` (Pages Router) or `app/layout.tsx` (App Router):
+
+```typescript
+import { registerNextJSComponents } from '@stackwright/nextjs';
+import { registerMapLibreProvider } from '@stackwright/maplibre';
+import '@stackwright/maplibre/dist/styles.css'; // ⚠️ Required!
+
+registerNextJSComponents();
+registerMapLibreProvider(); // Register MapLibre as map adapter
+```
+
+⚠️ **Don't forget the CSS import!** MapLibre GL requires its stylesheets.
+
+### 2. Use Maps in YAML
+
+Create a page with map content:
+
+```yaml
+# pages/locations/content.yml
+content:
+  content_items:
+    - type: map
+      label: "Our offices"
+      center: { lat: 37.7749, lng: -122.4194 }
+      zoom: 12
+      height: "500px"
+      markers:
+        - lat: 37.7749
+          lng: -122.4194
+          label: "San Francisco HQ"
+          popup: "123 Market St, SF CA 94103"
+        - lat: 37.8044
+          lng: -122.2712
+          label: "Oakland Office"
+          popup: "456 Broadway, Oakland CA 94607"
+```
+
+### 3. View Your Map
+
+```bash
+pnpm dev
+# Visit http://localhost:3000/locations
+```
+
+## Advanced Features
+
+### Polyline Routes
+
+Show flight paths, shipping lanes, or driving directions:
+
+```yaml
+- type: map
+  label: "Delivery route"
+  center: { lat: 37.7749, lng: -122.4194 }
+  zoom: 10
+  layers:
+    - type: polyline
+      data:
+        - [-122.4194, 37.7749]  # SF
+        - [-122.2712, 37.8044]  # Oakland
+        - [-122.0838, 37.4219]  # Palo Alto
+      style:
+        color: "#FF5733"
+        width: 4
+        opacity: 0.8
+```
+
+⚠️ **Coordinate order:** MapLibre uses `[lng, lat]` for polyline data (GeoJSON standard).
+
+### Polygon Regions
+
+Highlight territories, service areas, or property boundaries:
+
+```yaml
+- type: map
+  label: "Service area"
+  center: { lat: 37.7749, lng: -122.4194 }
+  zoom: 11
+  layers:
+    - type: polygon
+      data:  # Outer ring (clockwise)
+        - [-122.52, 37.82]
+        - [-122.35, 37.82]
+        - [-122.35, 37.70]
+        - [-122.52, 37.70]
+        - [-122.52, 37.82]
+      style:
+        fillColor: "#3388ff"
+        fillOpacity: 0.3
+        color: "#3388ff"  # Border color
+```
+
+### GeoJSON Layers
+
+Import complex geometries from GeoJSON:
+
+```yaml
+- type: map
+  label: "Geographic data"
+  center: { lat: 37.7749, lng: -122.4194 }
+  zoom: 10
+  layers:
+    - type: geojson
+      data:
+        type: "FeatureCollection"
+        features:
+          - type: "Feature"
+            geometry:
+              type: "Point"
+              coordinates: [-122.4194, 37.7749]
+            properties:
+              title: "San Francisco"
+```
+
+## Tile Sources
+
+By default, this package uses **MapLibre's free demo tiles** (no API key required). These tiles are:
+
+- ✅ **Free forever** (MapLibre Foundation)
+- ✅ **No usage limits** (community-hosted)
+- ✅ **No vendor lock-in** (OSS stack)
+
+### Custom Tile Sources
+
+To use your own tiles (Maptiler, Mapbox, self-hosted, etc.), you'll need to modify the provider. We recommend:
+
+1. **Maptiler Free Tier**: 100K map loads/month (sign up at [maptiler.com](https://www.maptiler.com/))
+2. **Mapbox Free Tier**: 200K map loads/month (sign up at [mapbox.com](https://www.mapbox.com/))
+3. **Self-hosted**: Use [TileServer GL](https://github.com/maptiler/tileserver-gl) + OpenStreetMap data
+
+To use a custom style URL, fork this package or create a custom provider following the same adapter pattern.
+
+## Adapter Pattern
+
+This package follows Stackwright's **adapter pattern** (same as Next.js Image/Link). You can swap map providers with **zero changes** to your YAML content:
+
+**Free tier (this package):**
+```typescript
+import { registerMapLibreProvider } from '@stackwright/maplibre';
+registerMapLibreProvider();
+```
+
+**Pro tier (3D globe):**
+```typescript
+import { registerCesiumProvider } from '@stackwright-pro/cesium';
+registerCesiumProvider(); // One line change!
+```
+
+Your maps stay identical — the underlying rendering engine changes.
+
+## Troubleshooting
+
+### Map Not Showing
+
+1. **Did you import the CSS?**
+   ```typescript
+   import '@stackwright/maplibre/dist/styles.css';
+   ```
+
+2. **Did you register the provider?**
+   ```typescript
+   registerMapLibreProvider();
+   ```
+
+3. **Is the height set?** Maps need explicit height:
+   ```yaml
+   height: "500px"
+   # or
+   height: 500
+   ```
+
+### Hydration Errors
+
+If you see hydration mismatches, make sure you're using a recent version of React (^18 or ^19). This package is SSR-safe and includes client-side guards.
+
+### Marker Icons
+
+By default, markers use the 📍 emoji. To use custom icons, you'll need to extend the provider or use the icon registry (see `@stackwright/icons`).
+
+## License
+
+- **This package**: MIT
+- **MapLibre GL**: BSD-3-Clause
+- **react-map-gl**: MIT
+
+No proprietary licenses, no vendor lock-in. Truly open source.
+
+## Contributing
+
+See [CONTRIBUTING.md](../../CONTRIBUTING.md) in the repository root.
+
+## Support
+
+- **Issues**: [GitHub Issues](https://github.com/Per-Aspera-LLC/stackwright/issues)
+- **Discussions**: [GitHub Discussions](https://github.com/Per-Aspera-LLC/stackwright/discussions)
+- **Pro support**: Email pro@stackwright.com
+
+## Roadmap
+
+- [ ] Custom marker icons (via icon registry)
+- [ ] Clustering for large marker sets
+- [ ] Heatmap layers
+- [ ] 3D building extrusion
+- [ ] Offline tile caching
+
+Want to contribute? PRs welcome! 🎉

package/dist/index.d.mts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { MapProviderProps } from '@stackwright/core';
+
+/**
+ * MapLibreProvider — Free tier map adapter using MapLibre GL.
+ *
+ * **Features:**
+ * - 2D interactive maps with pan/zoom
+ * - Markers with click-to-show popups
+ * - Polyline and polygon layers
+ * - GeoJSON support
+ * - Free MapLibre demo tiles (no API key required)
+ * - SSR-safe for Next.js
+ * - Responsive (320px to 1440px)
+ *
+ * **License:** BSD-3-Clause (MapLibre GL)
+ * **Vendor lock-in:** None (can swap to Mapbox, Maptiler, etc.)
+ *
+ * **Usage:**
+ *
+ * ```typescript
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ *
+ * registerMapLibreProvider();
+ * ```
+ *
+ * @see https://maplibre.org/maplibre-gl-js/docs/
+ */
+declare const MapLibreProvider: React.FC<MapProviderProps>;
+
+/**
+ * @stackwright/maplibre — Free tier map adapter for Stackwright
+ *
+ * **License:** BSD-3-Clause (MapLibre GL) + MIT (this package)
+ * **Features:**
+ * - 2D interactive maps
+ * - No API keys required (uses MapLibre demo tiles)
+ * - Markers, polylines, polygons, GeoJSON
+ * - SSR-safe for Next.js
+ * - Responsive design
+ *
+ * **Installation:**
+ *
+ * ```bash
+ * pnpm add @stackwright/maplibre
+ * ```
+ *
+ * **Usage in Next.js:**
+ *
+ * ```typescript
+ * // pages/_app.tsx
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ * import { registerNextJSComponents } from '@stackwright/nextjs';
+ *
+ * registerNextJSComponents();
+ * registerMapLibreProvider();
+ * ```
+ *
+ * **YAML Example:**
+ *
+ * ```yaml
+ * content:
+ *   content_items:
+ *     - type: map
+ *       label: "Office locations"
+ *       center: { lat: 37.7749, lng: -122.4194 }
+ *       zoom: 12
+ *       markers:
+ *         - lat: 37.7749
+ *           lng: -122.4194
+ *           label: "San Francisco HQ"
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Register MapLibreProvider as the active map adapter.
+ *
+ * Call this in `_app.tsx` (Pages Router) or `layout.tsx` (App Router)
+ * alongside `registerNextJSComponents()`:
+ *
+ * ```typescript
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ *
+ * registerMapLibreProvider();
+ * ```
+ *
+ * **Swapping to pro 3D provider:**
+ *
+ * ```typescript
+ * // Switch from MapLibre (2D) to Cesium (3D globe)
+ * import { registerCesiumProvider } from '@stackwright-pro/cesium';
+ * registerCesiumProvider();
+ * ```
+ *
+ * This is a one-line change — your YAML content, components, and pages
+ * stay identical. That's the power of the adapter pattern!
+ */
+declare function registerMapLibreProvider(): void;
+
+export { MapLibreProvider, MapLibreProvider as default, registerMapLibreProvider };

package/dist/index.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import { MapProviderProps } from '@stackwright/core';
+
+/**
+ * MapLibreProvider — Free tier map adapter using MapLibre GL.
+ *
+ * **Features:**
+ * - 2D interactive maps with pan/zoom
+ * - Markers with click-to-show popups
+ * - Polyline and polygon layers
+ * - GeoJSON support
+ * - Free MapLibre demo tiles (no API key required)
+ * - SSR-safe for Next.js
+ * - Responsive (320px to 1440px)
+ *
+ * **License:** BSD-3-Clause (MapLibre GL)
+ * **Vendor lock-in:** None (can swap to Mapbox, Maptiler, etc.)
+ *
+ * **Usage:**
+ *
+ * ```typescript
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ *
+ * registerMapLibreProvider();
+ * ```
+ *
+ * @see https://maplibre.org/maplibre-gl-js/docs/
+ */
+declare const MapLibreProvider: React.FC<MapProviderProps>;
+
+/**
+ * @stackwright/maplibre — Free tier map adapter for Stackwright
+ *
+ * **License:** BSD-3-Clause (MapLibre GL) + MIT (this package)
+ * **Features:**
+ * - 2D interactive maps
+ * - No API keys required (uses MapLibre demo tiles)
+ * - Markers, polylines, polygons, GeoJSON
+ * - SSR-safe for Next.js
+ * - Responsive design
+ *
+ * **Installation:**
+ *
+ * ```bash
+ * pnpm add @stackwright/maplibre
+ * ```
+ *
+ * **Usage in Next.js:**
+ *
+ * ```typescript
+ * // pages/_app.tsx
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ * import { registerNextJSComponents } from '@stackwright/nextjs';
+ *
+ * registerNextJSComponents();
+ * registerMapLibreProvider();
+ * ```
+ *
+ * **YAML Example:**
+ *
+ * ```yaml
+ * content:
+ *   content_items:
+ *     - type: map
+ *       label: "Office locations"
+ *       center: { lat: 37.7749, lng: -122.4194 }
+ *       zoom: 12
+ *       markers:
+ *         - lat: 37.7749
+ *           lng: -122.4194
+ *           label: "San Francisco HQ"
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Register MapLibreProvider as the active map adapter.
+ *
+ * Call this in `_app.tsx` (Pages Router) or `layout.tsx` (App Router)
+ * alongside `registerNextJSComponents()`:
+ *
+ * ```typescript
+ * import { registerMapLibreProvider } from '@stackwright/maplibre';
+ * import '@stackwright/maplibre/dist/styles.css';
+ *
+ * registerMapLibreProvider();
+ * ```
+ *
+ * **Swapping to pro 3D provider:**
+ *
+ * ```typescript
+ * // Switch from MapLibre (2D) to Cesium (3D globe)
+ * import { registerCesiumProvider } from '@stackwright-pro/cesium';
+ * registerCesiumProvider();
+ * ```
+ *
+ * This is a one-line change — your YAML content, components, and pages
+ * stay identical. That's the power of the adapter pattern!
+ */
+declare function registerMapLibreProvider(): void;
+
+export { MapLibreProvider, MapLibreProvider as default, registerMapLibreProvider };

package/dist/index.js

@@ -0,0 +1,205 @@
+"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, {
+  MapLibreProvider: () => MapLibreProvider,
+  default: () => index_default,
+  registerMapLibreProvider: () => registerMapLibreProvider
+});
+module.exports = __toCommonJS(index_exports);
+var import_core = require("@stackwright/core");
+
+// src/MapLibreProvider.tsx
+var import_react = require("react");
+var import_maplibre = __toESM(require("react-map-gl/maplibre"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var MapLibreProvider = ({
+  config,
+  height = "100%",
+  width = "100%",
+  className,
+  style
+}) => {
+  const [popupInfo, setPopupInfo] = (0, import_react.useState)(null);
+  const [isClient, setIsClient] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setIsClient(true);
+  }, []);
+  const onMarkerClick = (0, import_react.useCallback)((marker) => {
+    setPopupInfo(
+      (current) => current?.label === marker.label && current?.lat === marker.lat ? null : marker
+    );
+  }, []);
+  const onPopupClose = (0, import_react.useCallback)(() => {
+    setPopupInfo(null);
+  }, []);
+  if (!isClient) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className,
+        style: {
+          ...style,
+          width,
+          height,
+          background: "#f0f0f0",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "8px"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#666", fontSize: "14px" }, children: "Loading map..." })
+      }
+    );
+  }
+  const mapStyle = "https://demotiles.maplibre.org/style.json";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { ...style, width, height, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_maplibre.default,
+    {
+      initialViewState: {
+        latitude: config.center.lat,
+        longitude: config.center.lng,
+        zoom: config.zoom
+      },
+      style: { width: "100%", height: "100%", borderRadius: "8px" },
+      mapStyle,
+      attributionControl: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.NavigationControl, { position: "top-right" }),
+        config.markers?.map((marker, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_maplibre.Marker,
+          {
+            latitude: marker.lat,
+            longitude: marker.lng,
+            anchor: "bottom",
+            onClick: () => onMarkerClick(marker),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: {
+                  cursor: "pointer",
+                  fontSize: "24px",
+                  transform: "translate(-50%, -100%)"
+                },
+                title: marker.label,
+                children: "\u{1F4CD}"
+              }
+            )
+          },
+          `${marker.label}-${index}`
+        )),
+        popupInfo && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_maplibre.Popup,
+          {
+            latitude: popupInfo.lat,
+            longitude: popupInfo.lng,
+            anchor: "top",
+            onClose: onPopupClose,
+            closeOnClick: false,
+            style: { maxWidth: "300px" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: "4px 0" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { display: "block", marginBottom: "4px" }, children: popupInfo.label }),
+              popupInfo.popup && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: "14px", color: "#666" }, children: popupInfo.popup })
+            ] })
+          }
+        ),
+        config.layers?.map((layer, index) => {
+          if (layer.type === "polyline") {
+            const geojson = {
+              type: "Feature",
+              geometry: {
+                type: "LineString",
+                coordinates: layer.data
+                // [[lng, lat], [lng, lat], ...]
+              },
+              properties: {}
+            };
+            const layerStyle = {
+              id: `polyline-${index}`,
+              type: "line",
+              paint: {
+                "line-color": layer.style?.color || "#FF5733",
+                "line-width": layer.style?.width || 3,
+                "line-opacity": layer.style?.opacity || 1
+              }
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Source, { type: "geojson", data: geojson, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Layer, { ...layerStyle }) }, `polyline-${index}`);
+          }
+          if (layer.type === "polygon") {
+            const geojson = {
+              type: "Feature",
+              geometry: {
+                type: "Polygon",
+                coordinates: [layer.data]
+                // [[[lng, lat], [lng, lat], ...]]
+              },
+              properties: {}
+            };
+            const layerStyle = {
+              id: `polygon-${index}`,
+              type: "fill",
+              paint: {
+                "fill-color": layer.style?.fillColor || layer.style?.color || "#3388ff",
+                "fill-opacity": layer.style?.fillOpacity || 0.4,
+                "fill-outline-color": layer.style?.color || "#3388ff"
+              }
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Source, { type: "geojson", data: geojson, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Layer, { ...layerStyle }) }, `polygon-${index}`);
+          }
+          if (layer.type === "geojson") {
+            const layerStyle = {
+              id: `geojson-${index}`,
+              type: "fill",
+              paint: {
+                "fill-color": layer.style?.fillColor || layer.style?.color || "#3388ff",
+                "fill-opacity": layer.style?.fillOpacity || 0.4
+              }
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Source, { type: "geojson", data: layer.data, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_maplibre.Layer, { ...layerStyle }) }, `geojson-${index}`);
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
+};
+
+// src/index.ts
+function registerMapLibreProvider() {
+  (0, import_core.registerMapProvider)(MapLibreProvider);
+}
+var index_default = MapLibreProvider;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MapLibreProvider,
+  registerMapLibreProvider
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/MapLibreProvider.tsx"],"sourcesContent":["/**\n * @stackwright/maplibre — Free tier map adapter for Stackwright\n *\n * **License:** BSD-3-Clause (MapLibre GL) + MIT (this package)\n * **Features:**\n * - 2D interactive maps\n * - No API keys required (uses MapLibre demo tiles)\n * - Markers, polylines, polygons, GeoJSON\n * - SSR-safe for Next.js\n * - Responsive design\n *\n * **Installation:**\n *\n * ```bash\n * pnpm add @stackwright/maplibre\n * ```\n *\n * **Usage in Next.js:**\n *\n * ```typescript\n * // pages/_app.tsx\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n * import { registerNextJSComponents } from '@stackwright/nextjs';\n *\n * registerNextJSComponents();\n * registerMapLibreProvider();\n * ```\n *\n * **YAML Example:**\n *\n * ```yaml\n * content:\n *   content_items:\n *     - type: map\n *       label: \"Office locations\"\n *       center: { lat: 37.7749, lng: -122.4194 }\n *       zoom: 12\n *       markers:\n *         - lat: 37.7749\n *           lng: -122.4194\n *           label: \"San Francisco HQ\"\n * ```\n *\n * @packageDocumentation\n */\n\nimport { registerMapProvider } from '@stackwright/core';\nimport { MapLibreProvider } from './MapLibreProvider.js';\n\nexport { MapLibreProvider } from './MapLibreProvider.js';\n\n/**\n * Register MapLibreProvider as the active map adapter.\n *\n * Call this in `_app.tsx` (Pages Router) or `layout.tsx` (App Router)\n * alongside `registerNextJSComponents()`:\n *\n * ```typescript\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n *\n * registerMapLibreProvider();\n * ```\n *\n * **Swapping to pro 3D provider:**\n *\n * ```typescript\n * // Switch from MapLibre (2D) to Cesium (3D globe)\n * import { registerCesiumProvider } from '@stackwright-pro/cesium';\n * registerCesiumProvider();\n * ```\n *\n * This is a one-line change — your YAML content, components, and pages\n * stay identical. That's the power of the adapter pattern!\n */\nexport function registerMapLibreProvider(): void {\n  registerMapProvider(MapLibreProvider);\n}\n\nexport default MapLibreProvider;\n","import React, { useState, useCallback, useEffect } from 'react';\nimport MapGL, { Marker, Popup, Source, Layer, NavigationControl } from 'react-map-gl/maplibre';\nimport type { MapProviderProps, MapMarker } from '@stackwright/core';\nimport type { LayerProps } from 'react-map-gl/maplibre';\n\n/**\n * MapLibreProvider — Free tier map adapter using MapLibre GL.\n *\n * **Features:**\n * - 2D interactive maps with pan/zoom\n * - Markers with click-to-show popups\n * - Polyline and polygon layers\n * - GeoJSON support\n * - Free MapLibre demo tiles (no API key required)\n * - SSR-safe for Next.js\n * - Responsive (320px to 1440px)\n *\n * **License:** BSD-3-Clause (MapLibre GL)\n * **Vendor lock-in:** None (can swap to Mapbox, Maptiler, etc.)\n *\n * **Usage:**\n *\n * ```typescript\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n *\n * registerMapLibreProvider();\n * ```\n *\n * @see https://maplibre.org/maplibre-gl-js/docs/\n */\nexport const MapLibreProvider: React.FC<MapProviderProps> = ({\n  config,\n  height = '100%',\n  width = '100%',\n  className,\n  style,\n}) => {\n  const [popupInfo, setPopupInfo] = useState<MapMarker | null>(null);\n  const [isClient, setIsClient] = useState(false);\n\n  // SSR safety: Only render map on client\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  const onMarkerClick = useCallback((marker: MapMarker) => {\n    // Toggle popup: close if already open on this marker, otherwise open\n    setPopupInfo((current) =>\n      current?.label === marker.label && current?.lat === marker.lat ? null : marker\n    );\n  }, []);\n\n  const onPopupClose = useCallback(() => {\n    setPopupInfo(null);\n  }, []);\n\n  // Don't render anything on server side\n  if (!isClient) {\n    return (\n      <div\n        className={className}\n        style={{\n          ...style,\n          width,\n          height,\n          background: '#f0f0f0',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderRadius: '8px',\n        }}\n      >\n        <span style={{ color: '#666', fontSize: '14px' }}>Loading map...</span>\n      </div>\n    );\n  }\n\n  // MapLibre demo tile server (free, no API key needed)\n  const mapStyle = 'https://demotiles.maplibre.org/style.json';\n\n  return (\n    <div className={className} style={{ ...style, width, height, position: 'relative' }}>\n      <MapGL\n        initialViewState={{\n          latitude: config.center.lat,\n          longitude: config.center.lng,\n          zoom: config.zoom,\n        }}\n        style={{ width: '100%', height: '100%', borderRadius: '8px' }}\n        mapStyle={mapStyle}\n        attributionControl={true}\n      >\n        {/* Navigation controls (zoom, rotate) */}\n        <NavigationControl position=\"top-right\" />\n\n        {/* Render markers */}\n        {config.markers?.map((marker, index) => (\n          <Marker\n            key={`${marker.label}-${index}`}\n            latitude={marker.lat}\n            longitude={marker.lng}\n            anchor=\"bottom\"\n            onClick={() => onMarkerClick(marker)}\n          >\n            <div\n              style={{\n                cursor: 'pointer',\n                fontSize: '24px',\n                transform: 'translate(-50%, -100%)',\n              }}\n              title={marker.label}\n            >\n              📍\n            </div>\n          </Marker>\n        ))}\n\n        {/* Popup for clicked marker */}\n        {popupInfo && (\n          <Popup\n            latitude={popupInfo.lat}\n            longitude={popupInfo.lng}\n            anchor=\"top\"\n            onClose={onPopupClose}\n            closeOnClick={false}\n            style={{ maxWidth: '300px' }}\n          >\n            <div style={{ padding: '4px 0' }}>\n              <strong style={{ display: 'block', marginBottom: '4px' }}>{popupInfo.label}</strong>\n              {popupInfo.popup && (\n                <div style={{ fontSize: '14px', color: '#666' }}>{popupInfo.popup}</div>\n              )}\n            </div>\n          </Popup>\n        )}\n\n        {/* Render layers (polylines, polygons, GeoJSON) */}\n        {config.layers?.map((layer, index) => {\n          if (layer.type === 'polyline') {\n            // Polyline layer (routes, paths)\n            const geojson = {\n              type: 'Feature' as const,\n              geometry: {\n                type: 'LineString' as const,\n                coordinates: layer.data as number[][], // [[lng, lat], [lng, lat], ...]\n              },\n              properties: {},\n            };\n\n            const layerStyle: LayerProps = {\n              id: `polyline-${index}`,\n              type: 'line',\n              paint: {\n                'line-color': layer.style?.color || '#FF5733',\n                'line-width': layer.style?.width || 3,\n                'line-opacity': layer.style?.opacity || 1,\n              },\n            };\n\n            return (\n              <Source key={`polyline-${index}`} type=\"geojson\" data={geojson}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          if (layer.type === 'polygon') {\n            // Polygon layer (boundaries, regions)\n            const geojson = {\n              type: 'Feature' as const,\n              geometry: {\n                type: 'Polygon' as const,\n                coordinates: [layer.data] as number[][][], // [[[lng, lat], [lng, lat], ...]]\n              },\n              properties: {},\n            };\n\n            const layerStyle: LayerProps = {\n              id: `polygon-${index}`,\n              type: 'fill',\n              paint: {\n                'fill-color': layer.style?.fillColor || layer.style?.color || '#3388ff',\n                'fill-opacity': layer.style?.fillOpacity || 0.4,\n                'fill-outline-color': layer.style?.color || '#3388ff',\n              },\n            };\n\n            return (\n              <Source key={`polygon-${index}`} type=\"geojson\" data={geojson}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          if (layer.type === 'geojson') {\n            // GeoJSON layer (arbitrary geometries)\n            const layerStyle: LayerProps = {\n              id: `geojson-${index}`,\n              type: 'fill',\n              paint: {\n                'fill-color': layer.style?.fillColor || layer.style?.color || '#3388ff',\n                'fill-opacity': layer.style?.fillOpacity || 0.4,\n              },\n            };\n\n            return (\n              <Source key={`geojson-${index}`} type=\"geojson\" data={layer.data}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          return null;\n        })}\n      </MapGL>\n    </div>\n  );\n};\n\nexport default MapLibreProvider;\n"],"mappings":"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","names":["MapGL"]}

package/dist/index.mjs

@@ -0,0 +1,169 @@
+// src/index.ts
+import { registerMapProvider } from "@stackwright/core";
+
+// src/MapLibreProvider.tsx
+import { useState, useCallback, useEffect } from "react";
+import MapGL, { Marker, Popup, Source, Layer, NavigationControl } from "react-map-gl/maplibre";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MapLibreProvider = ({
+  config,
+  height = "100%",
+  width = "100%",
+  className,
+  style
+}) => {
+  const [popupInfo, setPopupInfo] = useState(null);
+  const [isClient, setIsClient] = useState(false);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  const onMarkerClick = useCallback((marker) => {
+    setPopupInfo(
+      (current) => current?.label === marker.label && current?.lat === marker.lat ? null : marker
+    );
+  }, []);
+  const onPopupClose = useCallback(() => {
+    setPopupInfo(null);
+  }, []);
+  if (!isClient) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: {
+          ...style,
+          width,
+          height,
+          background: "#f0f0f0",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "8px"
+        },
+        children: /* @__PURE__ */ jsx("span", { style: { color: "#666", fontSize: "14px" }, children: "Loading map..." })
+      }
+    );
+  }
+  const mapStyle = "https://demotiles.maplibre.org/style.json";
+  return /* @__PURE__ */ jsx("div", { className, style: { ...style, width, height, position: "relative" }, children: /* @__PURE__ */ jsxs(
+    MapGL,
+    {
+      initialViewState: {
+        latitude: config.center.lat,
+        longitude: config.center.lng,
+        zoom: config.zoom
+      },
+      style: { width: "100%", height: "100%", borderRadius: "8px" },
+      mapStyle,
+      attributionControl: true,
+      children: [
+        /* @__PURE__ */ jsx(NavigationControl, { position: "top-right" }),
+        config.markers?.map((marker, index) => /* @__PURE__ */ jsx(
+          Marker,
+          {
+            latitude: marker.lat,
+            longitude: marker.lng,
+            anchor: "bottom",
+            onClick: () => onMarkerClick(marker),
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  cursor: "pointer",
+                  fontSize: "24px",
+                  transform: "translate(-50%, -100%)"
+                },
+                title: marker.label,
+                children: "\u{1F4CD}"
+              }
+            )
+          },
+          `${marker.label}-${index}`
+        )),
+        popupInfo && /* @__PURE__ */ jsx(
+          Popup,
+          {
+            latitude: popupInfo.lat,
+            longitude: popupInfo.lng,
+            anchor: "top",
+            onClose: onPopupClose,
+            closeOnClick: false,
+            style: { maxWidth: "300px" },
+            children: /* @__PURE__ */ jsxs("div", { style: { padding: "4px 0" }, children: [
+              /* @__PURE__ */ jsx("strong", { style: { display: "block", marginBottom: "4px" }, children: popupInfo.label }),
+              popupInfo.popup && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#666" }, children: popupInfo.popup })
+            ] })
+          }
+        ),
+        config.layers?.map((layer, index) => {
+          if (layer.type === "polyline") {
+            const geojson = {
+              type: "Feature",
+              geometry: {
+                type: "LineString",
+                coordinates: layer.data
+                // [[lng, lat], [lng, lat], ...]
+              },
+              properties: {}
+            };
+            const layerStyle = {
+              id: `polyline-${index}`,
+              type: "line",
+              paint: {
+                "line-color": layer.style?.color || "#FF5733",
+                "line-width": layer.style?.width || 3,
+                "line-opacity": layer.style?.opacity || 1
+              }
+            };
+            return /* @__PURE__ */ jsx(Source, { type: "geojson", data: geojson, children: /* @__PURE__ */ jsx(Layer, { ...layerStyle }) }, `polyline-${index}`);
+          }
+          if (layer.type === "polygon") {
+            const geojson = {
+              type: "Feature",
+              geometry: {
+                type: "Polygon",
+                coordinates: [layer.data]
+                // [[[lng, lat], [lng, lat], ...]]
+              },
+              properties: {}
+            };
+            const layerStyle = {
+              id: `polygon-${index}`,
+              type: "fill",
+              paint: {
+                "fill-color": layer.style?.fillColor || layer.style?.color || "#3388ff",
+                "fill-opacity": layer.style?.fillOpacity || 0.4,
+                "fill-outline-color": layer.style?.color || "#3388ff"
+              }
+            };
+            return /* @__PURE__ */ jsx(Source, { type: "geojson", data: geojson, children: /* @__PURE__ */ jsx(Layer, { ...layerStyle }) }, `polygon-${index}`);
+          }
+          if (layer.type === "geojson") {
+            const layerStyle = {
+              id: `geojson-${index}`,
+              type: "fill",
+              paint: {
+                "fill-color": layer.style?.fillColor || layer.style?.color || "#3388ff",
+                "fill-opacity": layer.style?.fillOpacity || 0.4
+              }
+            };
+            return /* @__PURE__ */ jsx(Source, { type: "geojson", data: layer.data, children: /* @__PURE__ */ jsx(Layer, { ...layerStyle }) }, `geojson-${index}`);
+          }
+          return null;
+        })
+      ]
+    }
+  ) });
+};
+
+// src/index.ts
+function registerMapLibreProvider() {
+  registerMapProvider(MapLibreProvider);
+}
+var index_default = MapLibreProvider;
+export {
+  MapLibreProvider,
+  index_default as default,
+  registerMapLibreProvider
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/MapLibreProvider.tsx"],"sourcesContent":["/**\n * @stackwright/maplibre — Free tier map adapter for Stackwright\n *\n * **License:** BSD-3-Clause (MapLibre GL) + MIT (this package)\n * **Features:**\n * - 2D interactive maps\n * - No API keys required (uses MapLibre demo tiles)\n * - Markers, polylines, polygons, GeoJSON\n * - SSR-safe for Next.js\n * - Responsive design\n *\n * **Installation:**\n *\n * ```bash\n * pnpm add @stackwright/maplibre\n * ```\n *\n * **Usage in Next.js:**\n *\n * ```typescript\n * // pages/_app.tsx\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n * import { registerNextJSComponents } from '@stackwright/nextjs';\n *\n * registerNextJSComponents();\n * registerMapLibreProvider();\n * ```\n *\n * **YAML Example:**\n *\n * ```yaml\n * content:\n *   content_items:\n *     - type: map\n *       label: \"Office locations\"\n *       center: { lat: 37.7749, lng: -122.4194 }\n *       zoom: 12\n *       markers:\n *         - lat: 37.7749\n *           lng: -122.4194\n *           label: \"San Francisco HQ\"\n * ```\n *\n * @packageDocumentation\n */\n\nimport { registerMapProvider } from '@stackwright/core';\nimport { MapLibreProvider } from './MapLibreProvider.js';\n\nexport { MapLibreProvider } from './MapLibreProvider.js';\n\n/**\n * Register MapLibreProvider as the active map adapter.\n *\n * Call this in `_app.tsx` (Pages Router) or `layout.tsx` (App Router)\n * alongside `registerNextJSComponents()`:\n *\n * ```typescript\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n *\n * registerMapLibreProvider();\n * ```\n *\n * **Swapping to pro 3D provider:**\n *\n * ```typescript\n * // Switch from MapLibre (2D) to Cesium (3D globe)\n * import { registerCesiumProvider } from '@stackwright-pro/cesium';\n * registerCesiumProvider();\n * ```\n *\n * This is a one-line change — your YAML content, components, and pages\n * stay identical. That's the power of the adapter pattern!\n */\nexport function registerMapLibreProvider(): void {\n  registerMapProvider(MapLibreProvider);\n}\n\nexport default MapLibreProvider;\n","import React, { useState, useCallback, useEffect } from 'react';\nimport MapGL, { Marker, Popup, Source, Layer, NavigationControl } from 'react-map-gl/maplibre';\nimport type { MapProviderProps, MapMarker } from '@stackwright/core';\nimport type { LayerProps } from 'react-map-gl/maplibre';\n\n/**\n * MapLibreProvider — Free tier map adapter using MapLibre GL.\n *\n * **Features:**\n * - 2D interactive maps with pan/zoom\n * - Markers with click-to-show popups\n * - Polyline and polygon layers\n * - GeoJSON support\n * - Free MapLibre demo tiles (no API key required)\n * - SSR-safe for Next.js\n * - Responsive (320px to 1440px)\n *\n * **License:** BSD-3-Clause (MapLibre GL)\n * **Vendor lock-in:** None (can swap to Mapbox, Maptiler, etc.)\n *\n * **Usage:**\n *\n * ```typescript\n * import { registerMapLibreProvider } from '@stackwright/maplibre';\n * import '@stackwright/maplibre/dist/styles.css';\n *\n * registerMapLibreProvider();\n * ```\n *\n * @see https://maplibre.org/maplibre-gl-js/docs/\n */\nexport const MapLibreProvider: React.FC<MapProviderProps> = ({\n  config,\n  height = '100%',\n  width = '100%',\n  className,\n  style,\n}) => {\n  const [popupInfo, setPopupInfo] = useState<MapMarker | null>(null);\n  const [isClient, setIsClient] = useState(false);\n\n  // SSR safety: Only render map on client\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  const onMarkerClick = useCallback((marker: MapMarker) => {\n    // Toggle popup: close if already open on this marker, otherwise open\n    setPopupInfo((current) =>\n      current?.label === marker.label && current?.lat === marker.lat ? null : marker\n    );\n  }, []);\n\n  const onPopupClose = useCallback(() => {\n    setPopupInfo(null);\n  }, []);\n\n  // Don't render anything on server side\n  if (!isClient) {\n    return (\n      <div\n        className={className}\n        style={{\n          ...style,\n          width,\n          height,\n          background: '#f0f0f0',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          borderRadius: '8px',\n        }}\n      >\n        <span style={{ color: '#666', fontSize: '14px' }}>Loading map...</span>\n      </div>\n    );\n  }\n\n  // MapLibre demo tile server (free, no API key needed)\n  const mapStyle = 'https://demotiles.maplibre.org/style.json';\n\n  return (\n    <div className={className} style={{ ...style, width, height, position: 'relative' }}>\n      <MapGL\n        initialViewState={{\n          latitude: config.center.lat,\n          longitude: config.center.lng,\n          zoom: config.zoom,\n        }}\n        style={{ width: '100%', height: '100%', borderRadius: '8px' }}\n        mapStyle={mapStyle}\n        attributionControl={true}\n      >\n        {/* Navigation controls (zoom, rotate) */}\n        <NavigationControl position=\"top-right\" />\n\n        {/* Render markers */}\n        {config.markers?.map((marker, index) => (\n          <Marker\n            key={`${marker.label}-${index}`}\n            latitude={marker.lat}\n            longitude={marker.lng}\n            anchor=\"bottom\"\n            onClick={() => onMarkerClick(marker)}\n          >\n            <div\n              style={{\n                cursor: 'pointer',\n                fontSize: '24px',\n                transform: 'translate(-50%, -100%)',\n              }}\n              title={marker.label}\n            >\n              📍\n            </div>\n          </Marker>\n        ))}\n\n        {/* Popup for clicked marker */}\n        {popupInfo && (\n          <Popup\n            latitude={popupInfo.lat}\n            longitude={popupInfo.lng}\n            anchor=\"top\"\n            onClose={onPopupClose}\n            closeOnClick={false}\n            style={{ maxWidth: '300px' }}\n          >\n            <div style={{ padding: '4px 0' }}>\n              <strong style={{ display: 'block', marginBottom: '4px' }}>{popupInfo.label}</strong>\n              {popupInfo.popup && (\n                <div style={{ fontSize: '14px', color: '#666' }}>{popupInfo.popup}</div>\n              )}\n            </div>\n          </Popup>\n        )}\n\n        {/* Render layers (polylines, polygons, GeoJSON) */}\n        {config.layers?.map((layer, index) => {\n          if (layer.type === 'polyline') {\n            // Polyline layer (routes, paths)\n            const geojson = {\n              type: 'Feature' as const,\n              geometry: {\n                type: 'LineString' as const,\n                coordinates: layer.data as number[][], // [[lng, lat], [lng, lat], ...]\n              },\n              properties: {},\n            };\n\n            const layerStyle: LayerProps = {\n              id: `polyline-${index}`,\n              type: 'line',\n              paint: {\n                'line-color': layer.style?.color || '#FF5733',\n                'line-width': layer.style?.width || 3,\n                'line-opacity': layer.style?.opacity || 1,\n              },\n            };\n\n            return (\n              <Source key={`polyline-${index}`} type=\"geojson\" data={geojson}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          if (layer.type === 'polygon') {\n            // Polygon layer (boundaries, regions)\n            const geojson = {\n              type: 'Feature' as const,\n              geometry: {\n                type: 'Polygon' as const,\n                coordinates: [layer.data] as number[][][], // [[[lng, lat], [lng, lat], ...]]\n              },\n              properties: {},\n            };\n\n            const layerStyle: LayerProps = {\n              id: `polygon-${index}`,\n              type: 'fill',\n              paint: {\n                'fill-color': layer.style?.fillColor || layer.style?.color || '#3388ff',\n                'fill-opacity': layer.style?.fillOpacity || 0.4,\n                'fill-outline-color': layer.style?.color || '#3388ff',\n              },\n            };\n\n            return (\n              <Source key={`polygon-${index}`} type=\"geojson\" data={geojson}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          if (layer.type === 'geojson') {\n            // GeoJSON layer (arbitrary geometries)\n            const layerStyle: LayerProps = {\n              id: `geojson-${index}`,\n              type: 'fill',\n              paint: {\n                'fill-color': layer.style?.fillColor || layer.style?.color || '#3388ff',\n                'fill-opacity': layer.style?.fillOpacity || 0.4,\n              },\n            };\n\n            return (\n              <Source key={`geojson-${index}`} type=\"geojson\" data={layer.data}>\n                <Layer {...layerStyle} />\n              </Source>\n            );\n          }\n\n          return null;\n        })}\n      </MapGL>\n    </div>\n  );\n};\n\nexport default MapLibreProvider;\n"],"mappings":"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","names":[]}

package/dist/styles.css

@@ -0,0 +1,50 @@
+/**
+ * MapLibre GL CSS
+ * 
+ * This imports the required MapLibre GL styles and adds responsive overrides.
+ * 
+ * Usage in Next.js _app.tsx:
+ * ```typescript
+ * import '@stackwright/maplibre/dist/styles.css';
+ * ```
+ */
+
+@import 'maplibre-gl/dist/maplibre-gl.css';
+
+/**
+ * Responsive overrides for mobile devices
+ */
+.maplibregl-map {
+  font-family: inherit;
+}
+
+.maplibregl-ctrl-group {
+  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+}
+
+/**
+ * Ensure popups are readable on small screens
+ */
+.maplibregl-popup-content {
+  min-width: 200px;
+  max-width: 90vw;
+  padding: 12px 16px;
+}
+
+@media (max-width: 768px) {
+  .maplibregl-popup-content {
+    font-size: 14px;
+  }
+  
+  .maplibregl-ctrl-group button {
+    width: 32px;
+    height: 32px;
+  }
+}
+
+/**
+ * Improve marker visibility
+ */
+.maplibregl-marker {
+  cursor: pointer;
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@stackwright/maplibre",
+  "version": "1.0.0-alpha.2",
+  "description": "MapLibre GL adapter for Stackwright maps (free tier, no API keys required)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Per-Aspera-LLC/stackwright"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/styles.css": "./dist/styles.css"
+  },
+  "dependencies": {
+    "maplibre-gl": "^4.7.1",
+    "react-map-gl": "^7.1.7"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6",
+    "@testing-library/react": "^16.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^28.1.0",
+    "react": "^19",
+    "react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5",
+    "vitest": "^4",
+    "@stackwright/core": "0.7.0-alpha.6"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@stackwright/core": "0.7.0-alpha.6"
+  },
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "dev": "tsup --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}