@dxos/react-ui-geo 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.4-main.e8ec1fe",
+  "version": "0.8.4-main.ef1bc66f44",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
@@ -36,8 +40,7 @@
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-context": "^1.1.1",
+    "@radix-ui/react-context": "1.1.1",
     "d3": "^7.9.0",
     "d3-geo-projection": "^4.0.0",
     "d3-hexbin": "^0.2.2",
@@ -49,39 +52,39 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/debug": "0.8.4-main.e8ec1fe",
-    "@dxos/async": "0.8.4-main.e8ec1fe",
-    "@dxos/node-std": "0.8.4-main.e8ec1fe",
-    "@dxos/util": "0.8.4-main.e8ec1fe",
-    "@dxos/log": "0.8.4-main.e8ec1fe"
+    "@dxos/async": "0.8.4-main.ef1bc66f44",
+    "@dxos/debug": "0.8.4-main.ef1bc66f44",
+    "@dxos/node-std": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44",
+    "@dxos/log": "0.8.4-main.ef1bc66f44"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.99.0",
-    "@react-three/fiber": "^9.3.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@types/d3": "^7.4.3",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.9.16",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/three": "0.165.0",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-simplify": "^3.0.3",
     "@types/topojson-specification": "^1.0.5",
     "JSONStream": "^1.3.5",
     "geojson2h3": "^1.2.0",
-    "leva": "^0.9.35",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "three": "0.165.0",
-    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
-    "@dxos/storybook-utils": "0.8.4-main.e8ec1fe",
-    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
+    "leva": "^0.10.1",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "three": "^0.178.0",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/storybook-utils": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.e8ec1fe",
-    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Globe/Globe.stories.tsx

@@ -227,7 +227,7 @@ const meta = {
   title: 'ui/react-ui-geo/Globe',
   component: Globe.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Globe/Globe.tsx

@@ -27,7 +27,7 @@ import { useResizeDetector } from 'react-resize-detector';
 import { type Topology } from 'topojson-specification';
 
 import { type ThemeMode, type ThemedClassName, useDynamicRef, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import {
   GlobeContextProvider,
@@ -157,16 +157,16 @@ type GlobeCanvasProps = {
  */
 // TODO(burdon): Move controller to root.
 const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
-  ({ projection: projectionParam, topology, features, styles: stylesParam }, forwardRef) => {
+  ({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef) => {
     const { themeMode } = useThemeContext();
-    const styles = useMemo(() => stylesParam ?? defaultStyles[themeMode], [stylesParam, themeMode]);
+    const styles = useMemo(() => stylesProp ?? defaultStyles[themeMode], [stylesProp, themeMode]);
 
     // Canvas.
     const [canvas, setCanvas] = useState<HTMLCanvasElement>(null);
     const canvasRef = (canvas: HTMLCanvasElement) => setCanvas(canvas);
 
     // Projection.
-    const projection = useMemo(() => getProjection(projectionParam), [projectionParam]);
+    const projection = useMemo(() => getProjection(projectionProp), [projectionProp]);
 
     // Layers.
     // TODO(burdon): Generate on the fly based on what is visible.
@@ -200,9 +200,9 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
         translation,
         rotation,
         setCenter,
-        setZoom: (s) => {
-          if (typeof s === 'function') {
-            const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
+        setZoom: (state) => {
+          if (typeof state === 'function') {
+            const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
             // Stop easing if already zooming.
             transition()
               .ease(zooming.current ? easeLinear : easeSinOut)
@@ -212,7 +212,7 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
                 zooming.current = false;
               });
           } else {
-            setZoom(s);
+            setZoom(state);
           }
         },
         setTranslation,

package/src/components/Map/Map.stories.tsx

@@ -30,7 +30,7 @@ const meta = {
   title: 'ui/react-ui-geo/Map',
   component: Map.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Map/Map.tsx

@@ -11,7 +11,7 @@ import { createRoot } from 'react-dom/client';
 import { MapContainer, type MapContainerProps, Marker, Popup, TileLayer, useMap, useMapEvents } from 'react-leaflet';
 
 import { ThemeProvider, type ThemedClassName, Tooltip } from '@dxos/react-ui';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { defaultTx, mx } from '@dxos/ui-theme';
 
 import { type GeoMarker } from '../../types';
 import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
@@ -118,11 +118,13 @@ MapRoot.displayName = 'Map.Root';
 // https://react-leaflet.js.org/docs/api-components/#tilelayer
 //
 
+const MAP_TILES_NAME = 'Map.Tiles';
+
 type MapTilesProps = {};
 
 const MapTiles = (_props: MapTilesProps) => {
   const ref = useRef<L.TileLayer>(null);
-  const { onChange } = useMapContext(MapTiles.displayName);
+  const { onChange } = useMapContext(MAP_TILES_NAME);
 
   useMapEvents({
     zoomstart: (ev) => {
@@ -135,7 +137,7 @@ const MapTiles = (_props: MapTilesProps) => {
 
   // NOTE: Need to dynamically update data attribute since TileLayer doesn't update, but
   // Tailwind requires setting the property for static analysis.
-  const { attention } = useMapContext(MapTiles.displayName);
+  const { attention } = useMapContext(MAP_TILES_NAME);
   useEffect(() => {
     if (ref.current) {
       ref.current.getContainer().dataset.attention = attention ? '1' : '0';
@@ -176,7 +178,7 @@ const MapTiles = (_props: MapTilesProps) => {
   );
 };
 
-MapTiles.displayName = 'Map.Tiles';
+MapTiles.displayName = MAP_TILES_NAME;
 
 //
 // Markers

package/src/hooks/context.tsx

@@ -41,15 +41,15 @@ export type GlobeContextProviderProps = PropsWithChildren<
 export const GlobeContextProvider = ({
   children,
   size,
-  center: centerParam = defaults.center,
-  zoom: zoomParam = defaults.zoom,
-  translation: translationParam,
-  rotation: rotationParam,
+  center: centerProp = defaults.center,
+  zoom: zoomProp = defaults.zoom,
+  translation: translationProp,
+  rotation: rotationProp,
 }: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(centerParam);
-  const [zoom, setZoom] = useControlledState(zoomParam);
-  const [translation, setTranslation] = useControlledState<Point>(translationParam);
-  const [rotation, setRotation] = useControlledState<Vector>(rotationParam);
+  const [center, setCenter] = useControlledState(centerProp);
+  const [zoom, setZoom] = useControlledState(zoomProp);
+  const [translation, setTranslation] = useControlledState<Point>(translationProp);
+  const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
 
   return (
     <GlobeContext.Provider

package/src/translations.ts

@@ -4,7 +4,7 @@
 
 import { type Resource } from '@dxos/react-ui';
 
-export const translationKey = 'react-ui-geo';
+export const translationKey = '@dxos/react-ui-geo';
 
 export const translations = [
   {