react-three-map 0.4.3 → 0.6.0

package/dist/es/main13.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main13.mjs","sources":["../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n  onClick: [\"click\", false],\n  onContextMenu: [\"contextmenu\", false],\n  onDoubleClick: [\"dblclick\", false],\n  onWheel: [\"wheel\", true],\n  onPointerDown: [\"pointerdown\", true],\n  onPointerUp: [\"pointerup\", true],\n  onPointerLeave: [\"pointerleave\", true],\n  onPointerMove: [\"pointermove\", true],\n  onPointerCancel: [\"pointercancel\", true],\n  onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n  return (store: UseBoundStore<RootState>) => {\n    const { handlePointer } = createFiberEvents(store);\n\n    return {\n      priority: 1,\n      enabled: true,\n      compute(event: DomEvent, state: RootState) {\n\n        state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n\n        if (state.camera.userData.projByViewInv) projByViewInv.fromArray(state.camera.userData.projByViewInv);\n\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(projByViewInv)\n          .sub(state.raycaster.ray.origin)\n          .normalize();\n      },\n      connected: undefined,\n      handlers: Object.keys(DOM_EVENTS).reduce(\n        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n        {}\n      ) as unknown as Events,\n      update: () => {\n        const { events, internal } = store.getState();\n        if (internal.lastEvent?.current && events.handlers) {\n          events.handlers.onPointerMove(internal.lastEvent.current);\n        }\n      },\n      connect: (target: HTMLElement) => {\n        const { set, events } = store.getState();\n        events.disconnect?.();\n        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));\n        Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n          const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n          target.addEventListener(eventName, event, { passive });\n        });\n      },\n      disconnect: () => {\n        const { set, events } = store.getState();\n        if (events.connected) {\n          Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n            if (events && events.connected instanceof HTMLElement) {\n              const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n              events.connected.removeEventListener(eventName, event);\n            }\n          });\n          set((state) => ({ events: { ...state.events, connected: undefined } }));\n        }\n      },\n    };\n  };\n}\n"],"names":["createFiberEvents"],"mappings":";;AAMA,MAAM,aAAa;AAAA,EACjB,SAAS,CAAC,SAAS,KAAK;AAAA,EACxB,eAAe,CAAC,eAAe,KAAK;AAAA,EACpC,eAAe,CAAC,YAAY,KAAK;AAAA,EACjC,SAAS,CAAC,SAAS,IAAI;AAAA,EACvB,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,aAAa,CAAC,aAAa,IAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,IAAI;AAAA,EACrC,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,IAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,IAAI;AACnD;AAEA,MAAM,gBAAgB,IAAI;AAGnB,SAAS,eAAyD;AACvE,SAAO,CAAC,UAAoC;AAC1C,UAAM,EAAE,cAAA,IAAkBA,eAAkB,KAAK;AAE1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ,OAAiB,OAAkB;AAEzC,cAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,cAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,YAAA,MAAM,OAAO,SAAS;AAAe,wBAAc,UAAU,MAAM,OAAO,SAAS,aAAa;AAE9F,cAAA,UAAU,SAAS,MAAM;AAC/B,cAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,aAAa;AAC5D,cAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,aAAa,EAC1B,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;MACL;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAK,UAAU,EAAE;AAAA,QAChC,CAAC,KAAK,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAQ,SAAS,IAAI,MAAM,SAAS;AAC5C,cAAI,cAAS,cAAT,mBAAoB,YAAW,OAAO,UAAU;AAClD,iBAAO,SAAS,cAAc,SAAS,UAAU,OAAO;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,SAAS,CAAC,WAAwB;;AAChC,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,qBAAO,eAAP;AACA,YAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAO,WAAW,EAAA,EAAI;AACvE,eAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC/D,gBAAM,CAAC,WAAW,OAAO,IAAI,WAAW,IAA+B;AACvE,iBAAO,iBAAiB,WAAW,OAAO,EAAE,QAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,YAAI,OAAO,WAAW;AACb,iBAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC3D,gBAAA,UAAU,OAAO,qBAAqB,aAAa;AACrD,oBAAM,CAAC,SAAS,IAAI,WAAW,IAA+B;AACvD,qBAAA,UAAU,oBAAoB,WAAW,KAAK;AAAA,YACvD;AAAA,UAAA,CACD;AACG,cAAA,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,QACxE;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"main13.mjs","sources":["../../src/core/use-function.ts"],"sourcesContent":["import { useCallback, useRef } from 'react';\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const useFunction = <T extends (...args: any[]) => any>(callback: T): T => {\n  const callbackRef = useRef(callback);\n  callbackRef.current = callback;\n  return useCallback((...args: any[]) => {\n    return callbackRef.current(...args);\n  }, []) as T;\n};\n"],"names":[],"mappings":";AAGa,MAAA,cAAc,CAAoC,aAAmB;AAC1E,QAAA,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AACf,SAAA,YAAY,IAAI,SAAgB;AAC9B,WAAA,YAAY,QAAQ,GAAG,IAAI;AAAA,EACpC,GAAG,CAAE,CAAA;AACP;"}

package/dist/es/main14.mjs

@@ -0,0 +1,71 @@
+import { createEvents as createEvents$1 } from "@react-three/fiber";
+import { Matrix4 } from "three";
+const DOM_EVENTS = {
+  onClick: ["click", false],
+  onContextMenu: ["contextmenu", false],
+  onDoubleClick: ["dblclick", false],
+  onWheel: ["wheel", true],
+  onPointerDown: ["pointerdown", true],
+  onPointerUp: ["pointerup", true],
+  onPointerLeave: ["pointerleave", true],
+  onPointerMove: ["pointermove", true],
+  onPointerCancel: ["pointercancel", true],
+  onLostPointerCapture: ["lostpointercapture", true]
+};
+const projByViewInv = new Matrix4();
+function createEvents() {
+  return (store) => {
+    const { handlePointer } = createEvents$1(store);
+    return {
+      priority: 1,
+      enabled: true,
+      compute(event, state) {
+        state.pointer.x = event.offsetX / state.size.width * 2 - 1;
+        state.pointer.y = 1 - event.offsetY / state.size.height * 2;
+        if (state.camera.userData.projByViewInv)
+          projByViewInv.fromArray(state.camera.userData.projByViewInv);
+        state.raycaster.camera = state.camera;
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv).sub(state.raycaster.ray.origin).normalize();
+      },
+      connected: void 0,
+      handlers: Object.keys(DOM_EVENTS).reduce(
+        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
+        {}
+      ),
+      update: () => {
+        var _a;
+        const { events, internal } = store.getState();
+        if (((_a = internal.lastEvent) == null ? void 0 : _a.current) && events.handlers) {
+          events.handlers.onPointerMove(internal.lastEvent.current);
+        }
+      },
+      connect: (target) => {
+        var _a;
+        const { set, events } = store.getState();
+        (_a = events.disconnect) == null ? void 0 : _a.call(events);
+        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));
+        Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, { passive });
+        });
+      },
+      disconnect: () => {
+        const { set, events } = store.getState();
+        if (events.connected) {
+          Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+            if (events && events.connected instanceof HTMLElement) {
+              const [eventName] = DOM_EVENTS[name];
+              events.connected.removeEventListener(eventName, event);
+            }
+          });
+          set((state) => ({ events: { ...state.events, connected: void 0 } }));
+        }
+      }
+    };
+  };
+}
+export {
+  createEvents
+};
+//# sourceMappingURL=main14.mjs.map

package/dist/es/main14.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"main14.mjs","sources":["../../src/core/create-events.ts"],"sourcesContent":["import { Events, RenderProps, RootState, createEvents as createFiberEvents } from \"@react-three/fiber\";\nimport { Matrix4 } from \"three\";\nimport { UseBoundStore } from \"zustand\";\n\ntype DomEvent = PointerEvent | MouseEvent | WheelEvent;\n\nconst DOM_EVENTS = {\n  onClick: [\"click\", false],\n  onContextMenu: [\"contextmenu\", false],\n  onDoubleClick: [\"dblclick\", false],\n  onWheel: [\"wheel\", true],\n  onPointerDown: [\"pointerdown\", true],\n  onPointerUp: [\"pointerup\", true],\n  onPointerLeave: [\"pointerleave\", true],\n  onPointerMove: [\"pointermove\", true],\n  onPointerCancel: [\"pointercancel\", true],\n  onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nconst projByViewInv = new Matrix4()\n\n/** ThreeLayer event manager for MapLibre and Mapbox */\nexport function createEvents(): RenderProps<HTMLCanvasElement>[\"events\"] {\n  return (store: UseBoundStore<RootState>) => {\n    const { handlePointer } = createFiberEvents(store);\n\n    return {\n      priority: 1,\n      enabled: true,\n      compute(event: DomEvent, state: RootState) {\n\n        state.pointer.x = (event.offsetX / state.size.width) * 2 - 1;\n        state.pointer.y = 1 - (event.offsetY / state.size.height) * 2;\n\n        if (state.camera.userData.projByViewInv) projByViewInv.fromArray(state.camera.userData.projByViewInv);\n\n        state.raycaster.camera = state.camera;\n        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);\n        state.raycaster.ray.direction\n          .set(state.pointer.x, state.pointer.y, 1)\n          .applyMatrix4(projByViewInv)\n          .sub(state.raycaster.ray.origin)\n          .normalize();\n      },\n      connected: undefined,\n      handlers: Object.keys(DOM_EVENTS).reduce(\n        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n        {}\n      ) as unknown as Events,\n      update: () => {\n        const { events, internal } = store.getState();\n        if (internal.lastEvent?.current && events.handlers) {\n          events.handlers.onPointerMove(internal.lastEvent.current);\n        }\n      },\n      connect: (target: HTMLElement) => {\n        const { set, events } = store.getState();\n        events.disconnect?.();\n        set((state) => ({ events: { ...state.events, connected: target.parentNode } }));\n        Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n          const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n          target.addEventListener(eventName, event, { passive });\n        });\n      },\n      disconnect: () => {\n        const { set, events } = store.getState();\n        if (events.connected) {\n          Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n            if (events && events.connected instanceof HTMLElement) {\n              const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS];\n              events.connected.removeEventListener(eventName, event);\n            }\n          });\n          set((state) => ({ events: { ...state.events, connected: undefined } }));\n        }\n      },\n    };\n  };\n}\n"],"names":["createFiberEvents"],"mappings":";;AAMA,MAAM,aAAa;AAAA,EACjB,SAAS,CAAC,SAAS,KAAK;AAAA,EACxB,eAAe,CAAC,eAAe,KAAK;AAAA,EACpC,eAAe,CAAC,YAAY,KAAK;AAAA,EACjC,SAAS,CAAC,SAAS,IAAI;AAAA,EACvB,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,aAAa,CAAC,aAAa,IAAI;AAAA,EAC/B,gBAAgB,CAAC,gBAAgB,IAAI;AAAA,EACrC,eAAe,CAAC,eAAe,IAAI;AAAA,EACnC,iBAAiB,CAAC,iBAAiB,IAAI;AAAA,EACvC,sBAAsB,CAAC,sBAAsB,IAAI;AACnD;AAEA,MAAM,gBAAgB,IAAI;AAGnB,SAAS,eAAyD;AACvE,SAAO,CAAC,UAAoC;AAC1C,UAAM,EAAE,cAAA,IAAkBA,eAAkB,KAAK;AAE1C,WAAA;AAAA,MACL,UAAU;AAAA,MACV,SAAS;AAAA,MACT,QAAQ,OAAiB,OAAkB;AAEzC,cAAM,QAAQ,IAAK,MAAM,UAAU,MAAM,KAAK,QAAS,IAAI;AAC3D,cAAM,QAAQ,IAAI,IAAK,MAAM,UAAU,MAAM,KAAK,SAAU;AAExD,YAAA,MAAM,OAAO,SAAS;AAAe,wBAAc,UAAU,MAAM,OAAO,SAAS,aAAa;AAE9F,cAAA,UAAU,SAAS,MAAM;AAC/B,cAAM,UAAU,IAAI,OAAO,UAAU,CAAC,EAAE,aAAa,aAAa;AAC5D,cAAA,UAAU,IAAI,UACjB,IAAI,MAAM,QAAQ,GAAG,MAAM,QAAQ,GAAG,CAAC,EACvC,aAAa,aAAa,EAC1B,IAAI,MAAM,UAAU,IAAI,MAAM,EAC9B;MACL;AAAA,MACA,WAAW;AAAA,MACX,UAAU,OAAO,KAAK,UAAU,EAAE;AAAA,QAChC,CAAC,KAAK,SAAS,EAAE,GAAG,KAAK,CAAC,GAAG,GAAG,cAAc,GAAG;QACjD,CAAC;AAAA,MACH;AAAA,MACA,QAAQ,MAAM;;AACZ,cAAM,EAAE,QAAQ,SAAS,IAAI,MAAM,SAAS;AAC5C,cAAI,cAAS,cAAT,mBAAoB,YAAW,OAAO,UAAU;AAClD,iBAAO,SAAS,cAAc,SAAS,UAAU,OAAO;AAAA,QAC1D;AAAA,MACF;AAAA,MACA,SAAS,CAAC,WAAwB;;AAChC,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,qBAAO,eAAP;AACA,YAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAO,WAAW,EAAA,EAAI;AACvE,eAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC/D,gBAAM,CAAC,WAAW,OAAO,IAAI,WAAW,IAA+B;AACvE,iBAAO,iBAAiB,WAAW,OAAO,EAAE,QAAS,CAAA;AAAA,QAAA,CACtD;AAAA,MACH;AAAA,MACA,YAAY,MAAM;AAChB,cAAM,EAAE,KAAK,OAAO,IAAI,MAAM,SAAS;AACvC,YAAI,OAAO,WAAW;AACb,iBAAA,QAAQ,OAAO,YAAY,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,MAAM,KAAK,MAAM;AAC3D,gBAAA,UAAU,OAAO,qBAAqB,aAAa;AACrD,oBAAM,CAAC,SAAS,IAAI,WAAW,IAA+B;AACvD,qBAAA,UAAU,oBAAoB,WAAW,KAAK;AAAA,YACvD;AAAA,UAAA,CACD;AACG,cAAA,CAAC,WAAW,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,WAAW,OAAU,EAAA,EAAI;AAAA,QACxE;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/es/main2.mjs

@@ -1,27 +1,9 @@
-import { jsx } from "react/jsx-runtime";
-import { extend } from "@react-three/fiber";
-import { MercatorCoordinate } from "mapbox-gl";
-import { memo } from "react";
-import { Layer } from "react-map-gl";
-import * as THREE from "three";
-import { useCanvas } from "./main4.mjs";
-extend(THREE);
-const fromLngLat = MercatorCoordinate.fromLngLat;
-const Canvas = memo((props) => {
-  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
-  return /* @__PURE__ */ jsx(
-    Layer,
-    {
-      id,
-      type: "custom",
-      renderingMode: "3d",
-      onAdd,
-      onRemove,
-      render
-    }
-  );
+import { useThree } from "@react-three/fiber";
+const useMap = () => useThree((s) => {
+  var _a;
+  return (_a = s.r3m) == null ? void 0 : _a.map;
 });
 export {
-  Canvas
+  useMap
 };
 //# sourceMappingURL=main2.mjs.map

package/dist/es/main2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main2.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}
+{"version":3,"file":"main2.mjs","sources":["../../src/api/use-map.ts"],"sourcesContent":["import { useThree } from \"@react-three/fiber\";\nimport { MapInstance } from \"../core/generic-map\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const useMap = <T extends MapInstance = MapInstance>(): T | undefined => useThree((s) => (s as any as { r3m?: {map: T}}).r3m?.map);"],"names":[],"mappings":";AAIO,MAAM,SAAS,MAA0D,SAAS,CAAC,MAAO;;AAAA,iBAA+B,QAA/B,mBAAoC;AAAA,CAAG;"}

package/dist/es/main4.mjs

@@ -1,25 +1,27 @@
-import { useCoords } from "./main7.mjs";
-import { useCreateRoot } from "./main9.mjs";
-import { useRender } from "./main10.mjs";
-function useCanvas({
-  longitude,
-  latitude,
-  altitude = 0,
-  frameloop = "always",
-  fromLngLat,
-  ...renderProps
-}) {
-  const m4 = useCoords({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat
-  });
-  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
-  const render = useRender(m4, r3mRef, frameloop);
-  return { id, onAdd, onRemove, render };
-}
+import { jsx } from "react/jsx-runtime";
+import { extend } from "@react-three/fiber";
+import { MercatorCoordinate } from "mapbox-gl";
+import { memo } from "react";
+import { Layer } from "react-map-gl";
+import * as THREE from "three";
+import { useCanvas } from "./main8.mjs";
+extend(THREE);
+const fromLngLat = MercatorCoordinate.fromLngLat;
+const Canvas = memo((props) => {
+  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });
+  return /* @__PURE__ */ jsx(
+    Layer,
+    {
+      id,
+      type: "custom",
+      renderingMode: "3d",
+      onAdd,
+      onRemove,
+      render
+    }
+  );
+});
 export {
-  useCanvas
+  Canvas
 };
 //# sourceMappingURL=main4.mjs.map

package/dist/es/main4.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main4.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main4.mjs","sources":["../../src/mapbox/canvas.tsx"],"sourcesContent":["import { extend } from \"@react-three/fiber\";\nimport { MercatorCoordinate } from \"mapbox-gl\";\nimport { memo } from \"react\";\nimport { Layer } from \"react-map-gl\";\nimport * as THREE from \"three\";\nimport { CanvasProps } from \"../api/canvas-props\";\nimport { useCanvas } from \"../core/use-canvas\";\n\nextend(THREE);\n\nconst fromLngLat = MercatorCoordinate.fromLngLat\n\n/** react`-three-fiber` canvas inside `Mapbox` */\nexport const Canvas = memo<CanvasProps>((props) => {\n\n  const { id, onAdd, onRemove, render } = useCanvas({ ...props, fromLngLat });\n\n  return <Layer\n    id={id}\n    type=\"custom\"\n    renderingMode=\"3d\"\n    onAdd={onAdd}\n    onRemove={onRemove}\n    render={render}\n  />\n})"],"names":[],"mappings":";;;;;;;AAQA,OAAO,KAAK;AAEZ,MAAM,aAAa,mBAAmB;AAGzB,MAAA,SAAS,KAAkB,CAAC,UAAU;AAE3C,QAAA,EAAE,IAAI,OAAO,UAAU,OAAA,IAAW,UAAU,EAAE,GAAG,OAAO,WAAA,CAAY;AAEnE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,eAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAEJ,CAAC;"}

package/dist/es/main7.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { coordsToMatrix } from "./main8.mjs";
+import { coordsToMatrix } from "./main9.mjs";
 function useCoords({ latitude, longitude, altitude, fromLngLat }) {
   const m4 = useMemo(() => coordsToMatrix({
     latitude,

package/dist/es/main8.mjs

@@ -1,18 +1,25 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
+import { useCoords } from "./main7.mjs";
+import { useCreateRoot } from "./main10.mjs";
+import { useRender } from "./main11.mjs";
+function useCanvas({
+  longitude,
+  latitude,
+  altitude = 0,
+  frameloop = "always",
+  fromLngLat,
+  ...renderProps
+}) {
+  const m4 = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat
+  });
+  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });
+  const render = useRender(m4, r3mRef, frameloop);
+  return { id, onAdd, onRemove, render };
 }
 export {
-  coordsToMatrix
+  useCanvas
 };
 //# sourceMappingURL=main8.mjs.map

package/dist/es/main8.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main8.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
+{"version":3,"file":"main8.mjs","sources":["../../src/core/use-canvas.ts"],"sourcesContent":["import { CanvasProps } from \"../api/canvas-props\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useCoords } from \"./use-coords\";\nimport { useCreateRoot } from \"./use-create-root\";\nimport { useRender } from \"./use-render\";\n\nexport interface useCanvasProps extends CanvasProps {\n  fromLngLat: FromLngLat,\n}\n\nexport function useCanvas({\n  longitude, latitude, altitude = 0,\n  frameloop = 'always',\n  fromLngLat,\n  ...renderProps\n}: useCanvasProps) {\n\n  const m4 = useCoords({\n    latitude, longitude, altitude, fromLngLat,\n  });\n\n  const { id, onAdd, onRemove, r3mRef } = useCreateRoot({ frameloop, fromLngLat, ...renderProps });\n\n  const render = useRender(m4, r3mRef, frameloop);\n\n  return { id, onAdd, onRemove, render }\n}"],"names":[],"mappings":";;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EAAW;AAAA,EAAU,WAAW;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAmB;AAEjB,QAAM,KAAK,UAAU;AAAA,IACnB;AAAA,IAAU;AAAA,IAAW;AAAA,IAAU;AAAA,EAAA,CAChC;AAED,QAAM,EAAE,IAAI,OAAO,UAAU,OAAO,IAAI,cAAc,EAAE,WAAW,YAAY,GAAG,YAAa,CAAA;AAE/F,QAAM,SAAS,UAAU,IAAI,QAAQ,SAAS;AAE9C,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}

package/dist/es/main9.mjs

@@ -1,24 +1,18 @@
-import { jsx, Fragment } from "react/jsx-runtime";
-import { useId, useEffect } from "react";
-import { useOnAdd } from "./main11.mjs";
-const useCreateRoot = ({
-  children,
-  frameloop,
-  fromLngLat,
-  ...renderProps
-}) => {
-  const id = useId();
-  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
-  useEffect(() => {
-    if (!mounted)
-      return;
-    if (!r3mRef.current.root)
-      return;
-    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
-  }, [r3mRef, mounted, children]);
-  return { id, onAdd, onRemove, r3mRef };
-};
+import { Quaternion, Euler, Vector3, Matrix4 } from "three";
+const quat = new Quaternion();
+const euler = new Euler();
+const pos = new Vector3();
+const scale = new Vector3();
+const m4 = new Matrix4();
+function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
+  const center = fromLngLat([longitude, latitude], altitude);
+  const scaleUnit = center.meterInMercatorCoordinateUnits();
+  pos.set(center.x, center.y, center.z || 0);
+  scale.set(scaleUnit, -scaleUnit, scaleUnit);
+  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
+  return m4.compose(pos, quat, scale).toArray();
+}
 export {
-  useCreateRoot
+  coordsToMatrix
 };
 //# sourceMappingURL=main9.mjs.map

package/dist/es/main9.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main9.mjs","sources":["../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}
+{"version":3,"file":"main9.mjs","sources":["../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}

package/dist/maplibre/cjs/main.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
 const fiber = require("@react-three/fiber");
-const maplibreGl = require("maplibre-gl");
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const maplibre = require("react-map-gl/maplibre");
 const THREE = require("three");
+const maplibreGl = require("maplibre-gl");
+const maplibre = require("react-map-gl/maplibre");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,6 +23,43 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const THREE__namespace = /* @__PURE__ */ _interopNamespaceDefault(THREE);
+const useMap$1 = () => fiber.useThree((s) => {
+  var _a;
+  return (_a = s.r3m) == null ? void 0 : _a.map;
+});
+const useR3M = () => fiber.useThree((s) => s.r3m);
+const originMx = new THREE.Matrix4();
+const projByView = new THREE.Matrix4();
+const projByViewInv$1 = new THREE.Matrix4();
+const fwd = new THREE.Vector3();
+function syncCamera(camera, origin, mapCamMx) {
+  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
+  projByViewInv$1.copy(projByView).invert();
+  updateCamera(camera, projByViewInv$1);
+  camera.updateMatrix();
+  camera.updateMatrixWorld(true);
+  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
+  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
+  camera.far = calculateFar(
+    camera.matrix.elements[10],
+    camera.matrix.elements[14],
+    camera.near
+  );
+  camera.userData.projByView = projByView.toArray();
+  camera.userData.projByViewInv = projByViewInv$1.toArray();
+}
+const updateCamera = (target, projByViewInv2) => {
+  target.position.setScalar(0).applyMatrix4(projByViewInv2);
+  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
+  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
+  target.lookAt(fwd);
+};
+function calculateFar(c, d, near) {
+  const numerator = d * (c - 1);
+  const denominator = c * near + near;
+  const far = numerator / denominator;
+  return far;
+}
 const quat = new THREE.Quaternion();
 const euler = new THREE.Euler();
 const pos = new THREE.Vector3();
@@ -45,6 +82,51 @@ function useCoords({ latitude, longitude, altitude, fromLngLat: fromLngLat2 }) {
   }), [latitude, longitude, altitude, fromLngLat2]);
   return m42;
 }
+const Coordinates = react.memo(({
+  latitude,
+  longitude,
+  altitude = 0,
+  children
+}) => {
+  const [scene] = react.useState(() => new THREE.Scene());
+  const r3m = useR3M();
+  const origin = useCoords({
+    latitude,
+    longitude,
+    altitude,
+    fromLngLat: r3m.fromLngLat
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fiber.createPortal(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RenderAtCoords, { r3m, origin }),
+    children
+  ] }), scene, { events: { priority: 2 } }) });
+});
+Coordinates.displayName = "Coordinates";
+function RenderAtCoords({ r3m, origin }) {
+  const { gl, scene, set } = fiber.useThree();
+  const cameraRef = react.useRef(null);
+  fiber.useFrame(() => {
+    if (!r3m.mapCamMx)
+      return;
+    if (!cameraRef.current)
+      return;
+    syncCamera(cameraRef.current, origin, r3m.mapCamMx);
+    gl.render(scene, cameraRef.current);
+  });
+  react.useLayoutEffect(() => {
+    if (!cameraRef.current)
+      return;
+    set({
+      invalidate: () => {
+        if (!r3m.map)
+          return;
+        r3m.map.triggerRepaint();
+      },
+      camera: cameraRef.current
+    });
+  }, [set, r3m]);
+  return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
+}
 const DOM_EVENTS = {
   onClick: ["click", false],
   onContextMenu: ["contextmenu", false],
@@ -57,7 +139,7 @@ const DOM_EVENTS = {
   onPointerCancel: ["pointercancel", true],
   onLostPointerCapture: ["lostpointercapture", true]
 };
-const projByViewInv$1 = new THREE.Matrix4();
+const projByViewInv = new THREE.Matrix4();
 function createEvents() {
   return (store) => {
     const { handlePointer } = fiber.createEvents(store);
@@ -68,10 +150,10 @@ function createEvents() {
         state.pointer.x = event.offsetX / state.size.width * 2 - 1;
         state.pointer.y = 1 - event.offsetY / state.size.height * 2;
         if (state.camera.userData.projByViewInv)
-          projByViewInv$1.fromArray(state.camera.userData.projByViewInv);
+          projByViewInv.fromArray(state.camera.userData.projByViewInv);
         state.raycaster.camera = state.camera;
-        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv$1);
-        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv$1).sub(state.raycaster.ray.origin).normalize();
+        state.raycaster.ray.origin.setScalar(0).applyMatrix4(projByViewInv);
+        state.raycaster.ray.direction.set(state.pointer.x, state.pointer.y, 1).applyMatrix4(projByViewInv).sub(state.raycaster.ray.origin).normalize();
       },
       connected: void 0,
       handlers: Object.keys(DOM_EVENTS).reduce(
@@ -204,38 +286,6 @@ const useCreateRoot = ({
   }, [r3mRef, mounted, children]);
   return { id, onAdd, onRemove, r3mRef };
 };
-const originMx = new THREE.Matrix4();
-const projByView = new THREE.Matrix4();
-const projByViewInv = new THREE.Matrix4();
-const fwd = new THREE.Vector3();
-function syncCamera(camera, origin, mapCamMx) {
-  projByView.fromArray(mapCamMx).multiply(originMx.fromArray(origin));
-  projByViewInv.copy(projByView).invert();
-  updateCamera(camera, projByViewInv);
-  camera.updateMatrix();
-  camera.updateMatrixWorld(true);
-  camera.projectionMatrix.copy(camera.matrix).premultiply(projByView);
-  camera.projectionMatrixInverse.copy(camera.projectionMatrix).invert();
-  camera.far = calculateFar(
-    camera.matrix.elements[10],
-    camera.matrix.elements[14],
-    camera.near
-  );
-  camera.userData.projByView = projByView.toArray();
-  camera.userData.projByViewInv = projByViewInv.toArray();
-}
-const updateCamera = (target, projByViewInv2) => {
-  target.position.setScalar(0).applyMatrix4(projByViewInv2);
-  target.up.set(0, -1, 0).applyMatrix4(projByViewInv2).negate().add(target.position).normalize();
-  fwd.set(0, 0, 1).applyMatrix4(projByViewInv2);
-  target.lookAt(fwd);
-};
-function calculateFar(c, d, near) {
-  const numerator = d * (c - 1);
-  const denominator = c * near + near;
-  const far = numerator / denominator;
-  return far;
-}
 function useRender(origin, r3mRef, frameloop) {
   const render = useFunction((_gl, mapCamMx) => {
     const r3m = r3mRef.current;
@@ -287,51 +337,7 @@ const Canvas = react.memo((props) => {
     }
   );
 });
-const useR3M = () => fiber.useThree((s) => s.r3m);
-const Coordinates = react.memo(({
-  latitude,
-  longitude,
-  altitude = 0,
-  children
-}) => {
-  const [scene] = react.useState(() => new THREE.Scene());
-  const r3m = useR3M();
-  const origin = useCoords({
-    latitude,
-    longitude,
-    altitude,
-    fromLngLat: r3m.fromLngLat
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fiber.createPortal(/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(RenderAtCoords, { r3m, origin }),
-    children
-  ] }), scene, { events: { priority: 2 } }) });
-});
-Coordinates.displayName = "Coordinates";
-function RenderAtCoords({ r3m, origin }) {
-  const { gl, scene, set } = fiber.useThree();
-  const cameraRef = react.useRef(null);
-  fiber.useFrame(() => {
-    if (!r3m.mapCamMx)
-      return;
-    if (!cameraRef.current)
-      return;
-    syncCamera(cameraRef.current, origin, r3m.mapCamMx);
-    gl.render(scene, cameraRef.current);
-  });
-  react.useLayoutEffect(() => {
-    if (!cameraRef.current)
-      return;
-    set({
-      invalidate: () => {
-        if (!r3m.map)
-          return;
-        r3m.map.triggerRepaint();
-      },
-      camera: cameraRef.current
-    });
-  }, [set, r3m]);
-  return /* @__PURE__ */ jsxRuntime.jsx("perspectiveCamera", { ref: cameraRef });
-}
+const useMap = useMap$1;
 exports.Canvas = Canvas;
 exports.Coordinates = Coordinates;
+exports.useMap = useMap;

package/dist/maplibre/es/main.mjs

@@ -1,7 +1,10 @@
-import { Canvas } from "./main2.mjs";
+import { useMap as useMap$1 } from "./main2.mjs";
 import { Coordinates } from "./main3.mjs";
+import { Canvas } from "./main4.mjs";
+const useMap = useMap$1;
 export {
   Canvas,
-  Coordinates
+  Coordinates,
+  useMap
 };
 //# sourceMappingURL=main.mjs.map

package/dist/maplibre/es/main.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"main.mjs","sources":["../../../src/maplibre.index.ts"],"sourcesContent":["import type { Map } from 'maplibre-gl';\nimport { useMap as useMapGeneric } from './api/use-map';\n\nexport * from './api/canvas-props';\nexport * from './api/coordinates';\nexport * from './maplibre/canvas';\n\nexport const useMap = useMapGeneric<Map>;"],"names":["useMapGeneric"],"mappings":";;;AAOO,MAAM,SAASA;"}

package/dist/maplibre/es/main10.mjs

@@ -1,18 +1,24 @@
-import { Quaternion, Euler, Vector3, Matrix4 } from "three";
-const quat = new Quaternion();
-const euler = new Euler();
-const pos = new Vector3();
-const scale = new Vector3();
-const m4 = new Matrix4();
-function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }) {
-  const center = fromLngLat([longitude, latitude], altitude);
-  const scaleUnit = center.meterInMercatorCoordinateUnits();
-  pos.set(center.x, center.y, center.z || 0);
-  scale.set(scaleUnit, -scaleUnit, scaleUnit);
-  quat.setFromEuler(euler.set(-Math.PI * 0.5, 0, 0));
-  return m4.compose(pos, quat, scale).toArray();
-}
+import { jsx, Fragment } from "react/jsx-runtime";
+import { useId, useEffect } from "react";
+import { useOnAdd } from "./main12.mjs";
+const useCreateRoot = ({
+  children,
+  frameloop,
+  fromLngLat,
+  ...renderProps
+}) => {
+  const id = useId();
+  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });
+  useEffect(() => {
+    if (!mounted)
+      return;
+    if (!r3mRef.current.root)
+      return;
+    r3mRef.current.root.render(/* @__PURE__ */ jsx(Fragment, { children }));
+  }, [r3mRef, mounted, children]);
+  return { id, onAdd, onRemove, r3mRef };
+};
 export {
-  coordsToMatrix
+  useCreateRoot
 };
 //# sourceMappingURL=main10.mjs.map

package/dist/maplibre/es/main10.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"main10.mjs","sources":["../../../src/core/coords-to-matrix.ts"],"sourcesContent":["import { Euler, Matrix4, Quaternion, Vector3 } from \"three\";\nimport { FromLngLat } from \"./generic-map\";\n\nconst quat = new Quaternion();\nconst euler = new Euler();\nconst pos = new Vector3();\nconst scale = new Vector3();\nconst m4 = new Matrix4();\n\n/** calculate Matrix4 from coordinates */\nexport function coordsToMatrix({ longitude, latitude, altitude, fromLngLat }: {\n  longitude: number, latitude: number, altitude: number, fromLngLat: FromLngLat\n}) {\n  const center = fromLngLat([longitude, latitude], altitude);\n  const scaleUnit = center.meterInMercatorCoordinateUnits();\n  pos.set(center.x, center.y, center.z || 0);\n  scale.set(scaleUnit, -scaleUnit, scaleUnit);\n  quat.setFromEuler(euler.set(-Math.PI * .5, 0, 0));\n  return m4.compose(pos, quat, scale).toArray();\n}\n"],"names":[],"mappings":";AAGA,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAClB,MAAM,MAAM,IAAI;AAChB,MAAM,QAAQ,IAAI;AAClB,MAAM,KAAK,IAAI;AAGR,SAAS,eAAe,EAAE,WAAW,UAAU,UAAU,cAE7D;AACD,QAAM,SAAS,WAAW,CAAC,WAAW,QAAQ,GAAG,QAAQ;AACnD,QAAA,YAAY,OAAO;AACzB,MAAI,IAAI,OAAO,GAAG,OAAO,GAAG,OAAO,KAAK,CAAC;AACzC,QAAM,IAAI,WAAW,CAAC,WAAW,SAAS;AACrC,OAAA,aAAa,MAAM,IAAI,CAAC,KAAK,KAAK,KAAI,GAAG,CAAC,CAAC;AAChD,SAAO,GAAG,QAAQ,KAAK,MAAM,KAAK,EAAE;AACtC;"}
+{"version":3,"file":"main10.mjs","sources":["../../../src/core/use-create-root.tsx"],"sourcesContent":["import { RenderProps } from \"@react-three/fiber\";\nimport { PropsWithChildren, useEffect, useId } from \"react\";\nimport { FromLngLat } from \"./generic-map\";\nimport { useOnAdd } from \"./use-on-add\";\n\nexport interface useCanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'frameloop'>, PropsWithChildren {\n  frameloop: 'always' | 'demand',\n  fromLngLat: FromLngLat\n}\n\nexport const useCreateRoot = (({\n  children, frameloop, fromLngLat, ...renderProps\n}: useCanvasProps) => {\n\n  const id = useId();\n\n  const { onAdd, onRemove, mounted, r3mRef } = useOnAdd(fromLngLat, { frameloop, ...renderProps });\n\n  useEffect(() => {\n    if (!mounted) return;\n    if (!r3mRef.current.root) return;\n    r3mRef.current.root.render(<>\n      {children}\n    </>);\n  }, [r3mRef, mounted, children])\n\n  return { id, onAdd, onRemove, r3mRef }\n})"],"names":[],"mappings":";;;AAUO,MAAM,gBAAiB,CAAC;AAAA,EAC7B;AAAA,EAAU;AAAA,EAAW;AAAA,EAAY,GAAG;AACtC,MAAsB;AAEpB,QAAM,KAAK;AAEX,QAAM,EAAE,OAAO,UAAU,SAAS,OAAO,IAAI,SAAS,YAAY,EAAE,WAAW,GAAG,YAAa,CAAA;AAE/F,YAAU,MAAM;AACd,QAAI,CAAC;AAAS;AACV,QAAA,CAAC,OAAO,QAAQ;AAAM;AAC1B,WAAO,QAAQ,KAAK,OAAO,oBAAA,UAAA,EACxB,SACH,CAAA,CAAG;AAAA,EACF,GAAA,CAAC,QAAQ,SAAS,QAAQ,CAAC;AAE9B,SAAO,EAAE,IAAI,OAAO,UAAU,OAAO;AACvC;"}