@dxos/react-ui-geo 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
@@ -52,11 +52,11 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.4-main.69d29f4",
-    "@dxos/debug": "0.8.4-main.69d29f4",
-    "@dxos/log": "0.8.4-main.69d29f4",
-    "@dxos/util": "0.8.4-main.69d29f4",
-    "@dxos/node-std": "0.8.4-main.69d29f4"
+    "@dxos/async": "0.8.4-main.6fa680abb7",
+    "@dxos/debug": "0.8.4-main.6fa680abb7",
+    "@dxos/log": "0.8.4-main.6fa680abb7",
+    "@dxos/node-std": "0.8.4-main.6fa680abb7",
+    "@dxos/util": "0.8.4-main.6fa680abb7"
   },
   "devDependencies": {
     "@react-three/drei": "^10.7.7",
@@ -76,15 +76,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "three": "^0.178.0",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/storybook-utils": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

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

@@ -9,7 +9,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import { type Topology } from 'topojson-specification';
 
 import { useAsyncState } from '@dxos/react-ui';
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { type Vector, useDrag, useGlobeZoomHandler, useSpinner, useTour } from '../../hooks';
 import { type LatLngLiteral } from '../../types';
@@ -214,7 +214,7 @@ const DefaultStory = ({
       <Globe.Zoom onAction={handleAction} />
       <Globe.Action onAction={handleAction} />
       <Globe.Debug />
-      <Globe.Panel position='topright' classNames='is-20 bs-20'>
+      <Globe.Panel position='topright' classNames='w-20 h-20'>
         <Leva />
       </Globe.Panel>
     </Globe.Root>
@@ -227,7 +227,7 @@ const meta = {
   title: 'ui/react-ui-geo/Globe',
   component: Globe.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Globe/Globe.tsx

@@ -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,
@@ -259,7 +259,7 @@ const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) =>
   return (
     <div
       className={mx(
-        'z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded',
+        'z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm',
         controlPositions[position],
       )}
     >

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

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { useMapZoomHandler } from '../../hooks';
 import { type GeoMarker } from '../../types';
@@ -30,7 +30,7 @@ const meta = {
   title: 'ui/react-ui-geo/Map',
   component: Map.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/Map/Map.tsx

@@ -96,7 +96,7 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
         <MapContainer
           {...props}
           ref={mapRef}
-          className={mx('group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset', classNames)}
+          className={mx('group relative grid h-full w-full !bg-base-surface dx-focus-ring-inset', classNames)}
           attributionControl={false}
           zoomControl={false}
           scrollWheelZoom={scrollWheelZoom}
@@ -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
@@ -247,7 +249,7 @@ const CustomControl = ({
   useEffect(() => {
     const control = new Control({ position });
     control.onAdd = () => {
-      const container = DomUtil.create('div', mx('!m-0', controlPositions[position]));
+      const container = DomUtil.create('div', mx('m-0!', controlPositions[position]));
       DomEvent.disableClickPropagation(container);
       DomEvent.disableScrollPropagation(container);