@dxos/react-ui-geo 0.8.4-main.ae835ea → 0.8.4-main.bc2380dfbc

package/package.json

@@ -1,43 +1,49 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.8.4-main.ae835ea",
+  "version": "0.8.4-main.bc2380dfbc",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": true,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    },
     "./data": {
       "source": "./src/data.ts",
       "types": "./dist/types/src/data.d.ts",
       "browser": "./dist/lib/browser/data.mjs",
       "node": "./dist/lib/node-esm/data.mjs"
     },
-    ".": {
-      "source": "./src/index.ts",
-      "types": "./dist/types/src/index.d.ts",
-      "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "data": [
-        "dist/types/src/data.d.ts"
-      ]
-    }
-  },
   "files": [
     "data",
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@radix-ui/react-context": "^1.0.5",
+    "@radix-ui/react-compose-refs": "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 +55,39 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.8.4-main.ae835ea",
-    "@dxos/debug": "0.8.4-main.ae835ea",
-    "@dxos/log": "0.8.4-main.ae835ea",
-    "@dxos/node-std": "0.8.4-main.ae835ea",
-    "@dxos/util": "0.8.4-main.ae835ea"
+    "@dxos/async": "0.8.4-main.bc2380dfbc",
+    "@dxos/log": "0.8.4-main.bc2380dfbc",
+    "@dxos/debug": "0.8.4-main.bc2380dfbc",
+    "@dxos/node-std": "0.8.4-main.bc2380dfbc",
+    "@dxos/util": "0.8.4-main.bc2380dfbc"
   },
   "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/storybook-utils": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea",
-    "@dxos/react-ui": "0.8.4-main.ae835ea"
+    "leva": "^0.10.1",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "three": "^0.178.0",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc",
+    "@dxos/storybook-utils": "0.8.4-main.bc2380dfbc",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.ae835ea",
-    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.bc2380dfbc",
+    "@dxos/ui-theme": "0.8.4-main.bc2380dfbc"
   },
   "publishConfig": {
     "access": "public"

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

@@ -9,13 +9,12 @@ 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';
 import { type StyleSet, closestPoint } from '../../util';
 import { type ControlProps } from '../Toolbar';
-
 import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
 
 // TODO(burdon): Load from JSON at runtime?
@@ -128,7 +127,7 @@ const createTrip = (
   );
 };
 
-type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
+type DefaultStoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
   Pick<GlobeCanvasProps, 'projection' | 'styles'> & {
     drag?: boolean;
     spin?: boolean;
@@ -137,7 +136,7 @@ type StoryProps = Pick<GlobeRootProps, 'zoom' | 'translation' | 'rotation'> &
   };
 
 const DefaultStory = ({
-  zoom: _zoom = 1,
+  zoom: zoomProp = 1,
   translation,
   rotation = [0, 0, 0],
   projection,
@@ -146,7 +145,7 @@ const DefaultStory = ({
   spin = false,
   tour = false,
   xAxis = false,
-}: StoryProps) => {
+}: DefaultStoryProps) => {
   const controller = useRef<GlobeController>(null);
   const [dots] = useAsyncState(async () => {
     const points = (await import('../../../data/countries-dots-3.ts')).default;
@@ -203,13 +202,13 @@ const DefaultStory = ({
   };
 
   return (
-    <Globe.Root classNames='absolute inset-0' zoom={_zoom} translation={translation} rotation={rotation}>
+    <Globe.Root zoom={zoomProp} translation={translation} rotation={rotation}>
       <Globe.Canvas
-        ref={controller}
         topology={styles?.dots ? dots : topology}
         projection={projection}
         styles={styles}
         features={tour ? { points: features?.points ?? [] } : features}
+        ref={controller}
       />
       <Globe.Zoom onAction={handleAction} />
       <Globe.Action onAction={handleAction} />
@@ -227,7 +226,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

@@ -26,15 +26,17 @@ import React, {
 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 {
-  GlobeContextProvider,
-  type GlobeContextProviderProps,
-  type GlobeContextType,
-  useGlobeContext,
-} from '../../hooks';
+  type ThemeMode,
+  type ThemedClassName,
+  useComposedRefs,
+  useControlledState,
+  useDynamicRef,
+  useThemeContext,
+} from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { GlobeContext, type GlobeContextType, type Point, type Vector, useGlobeContext } from '../../hooks';
 import {
   type Features,
   type StyleSet,
@@ -126,19 +128,43 @@ const getProjection = (type: GlobeCanvasProps['projection'] = 'orthographic'): G
 // Root
 //
 
-type GlobeRootProps = PropsWithChildren<ThemedClassName<GlobeContextProviderProps>>;
-
-const GlobeRoot = ({ classNames, children, ...props }: GlobeRootProps) => {
-  const { ref, width, height } = useResizeDetector<HTMLDivElement>();
-
-  return (
-    <div ref={ref} className={mx('relative flex grow overflow-hidden', classNames)}>
-      <GlobeContextProvider size={{ width, height }} {...props}>
-        {children}
-      </GlobeContextProvider>
-    </div>
-  );
-};
+type GlobeRootProps = Partial<Pick<GlobeContextType, 'center' | 'zoom' | 'translation' | 'rotation'>>;
+
+const GlobeRoot = composable<HTMLDivElement, GlobeRootProps>(
+  (
+    { children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props },
+    forwardedRef,
+  ) => {
+    const localRef = useRef<HTMLDivElement>(null);
+    const composedRef = useComposedRefs<HTMLDivElement>(localRef, forwardedRef);
+    const { width, height } = useResizeDetector<HTMLDivElement>({ targetRef: localRef });
+
+    const [center, setCenter] = useControlledState(centerProp);
+    const [zoom, setZoom] = useControlledState(zoomProp ?? 4);
+    const [translation, setTranslation] = useControlledState<Point>(translationProp);
+    const [rotation, setRotation] = useControlledState<Vector>(rotationProp);
+
+    return (
+      <GlobeContext.Provider
+        value={{
+          size: { width, height },
+          center,
+          zoom,
+          translation,
+          rotation,
+          setCenter,
+          setZoom,
+          setTranslation,
+          setRotation,
+        }}
+      >
+        <div {...composableProps(props, { classNames: 'relative dx-container' })} ref={composedRef}>
+          {children}
+        </div>
+      </GlobeContext.Provider>
+    );
+  },
+);
 
 //
 // Canvas
@@ -157,16 +183,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 +226,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 +238,7 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
                 zooming.current = false;
               });
           } else {
-            setZoom(s);
+            setZoom(state);
           }
         },
         setTranslation,
@@ -259,7 +285,7 @@ const GlobeDebug = ({ position = 'topleft' }: { position?: ControlPosition }) =>
   return (
     <div
       className={mx(
-        'z-10 absolute w-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,11 +5,10 @@
 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';
-
 import { Map, type MapController } from './Map';
 
 const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
@@ -17,11 +16,13 @@ const DefaultStory = ({ markers = [] }: { markers?: GeoMarker[] }) => {
   const handleZoomAction = useMapZoomHandler(controller);
 
   return (
-    <Map.Root ref={setController}>
-      <Map.Tiles />
-      <Map.Markers markers={markers} />
-      <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
-      <Map.Action position='bottomright' />
+    <Map.Root>
+      <Map.Content ref={setController}>
+        <Map.Tiles />
+        <Map.Markers markers={markers} />
+        <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
+        <Map.Action position='bottomright' />
+      </Map.Content>
     </Map.Root>
   );
 };
@@ -30,7 +31,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

@@ -6,12 +6,12 @@ import 'leaflet/dist/leaflet.css';
 
 import { createContext } from '@radix-ui/react-context';
 import L, { Control, type ControlPosition, DomEvent, DomUtil, type LatLngLiteral, latLngBounds } from 'leaflet';
-import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { type PropsWithChildren, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
 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 { type ThemedClassName, ThemeProvider, Tooltip } from '@dxos/react-ui';
+import { composable, composableProps, defaultTx, mx } from '@dxos/ui-theme';
 
 import { type GeoMarker } from '../../types';
 import { ActionControls, type ControlProps, ZoomControls, controlPositions } from '../Toolbar';
@@ -43,23 +43,54 @@ type MapContextValue = {
   onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;
 };
 
-const [MapContextProvier, useMapContext] = createContext<MapContextValue>('Map');
+const [MapContextProvider, useMapContext] = createContext<MapContextValue>('Map');
 
 //
 // Root
 //
 
-type MapRootProps = ThemedClassName<MapContainerProps & Pick<MapContextValue, 'onChange'>>;
+type MapRootProps = Pick<MapContextValue, 'onChange'>;
+
+/**
+ * Context provider for the map. Must wrap Map.Content.
+ */
+const MapRoot = composable<HTMLDivElement, MapRootProps>(({ children, onChange, ...props }, forwardedRef) => {
+  // TODO(burdon): Use attention: const [attention, setAttention] = useState(false);
+  const attention = false;
+  return (
+    <MapContextProvider attention={attention} onChange={onChange}>
+      <div
+        {...composableProps(props, {
+          role: 'none',
+          classNames: 'dx-container grid dx-focus-ring-inset',
+        })}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    </MapContextProvider>
+  );
+});
+
+MapRoot.displayName = 'Map.Root';
+
+//
+// Content
+//
+
+type MapContentProps = ThemedClassName<Omit<MapContainerProps, 'children'> & PropsWithChildren>;
 
 /**
  * https://react-leaflet.js.org/docs/api-map
  */
-const MapRoot = forwardRef<MapController, MapRootProps>(
+const MAP_CONTENT_NAME = 'Map.Content';
+
+const MapContent = forwardRef<MapController, MapContentProps>(
   (
-    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props },
+    { classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props },
     forwardedRef,
   ) => {
-    const [attention, setAttention] = useState(false);
+    const { attention } = useMapContext(MAP_CONTENT_NAME);
     const mapRef = useRef<L.Map>(null);
     const map = mapRef.current;
 
@@ -92,37 +123,39 @@ const MapRoot = forwardRef<MapController, MapRootProps>(
     }, [map, attention]);
 
     return (
-      <MapContextProvier attention={attention} onChange={onChange}>
-        <MapContainer
-          {...props}
-          ref={mapRef}
-          className={mx('group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset', classNames)}
-          attributionControl={false}
-          zoomControl={false}
-          scrollWheelZoom={scrollWheelZoom}
-          doubleClickZoom={doubleClickZoom}
-          touchZoom={touchZoom}
-          center={center ?? defaults.center}
-          zoom={zoom ?? defaults.zoom}
-          // whenReady={() => {}}
-        />
-      </MapContextProvier>
+      <MapContainer
+        {...props}
+        className={mx('group relative grid bg-base-surface!', classNames)}
+        attributionControl={false}
+        zoomControl={false}
+        scrollWheelZoom={scrollWheelZoom}
+        doubleClickZoom={doubleClickZoom}
+        touchZoom={touchZoom}
+        center={center ?? defaults.center}
+        zoom={zoom ?? defaults.zoom}
+        whenReady={() => {}}
+        ref={mapRef}
+      >
+        {children}
+      </MapContainer>
     );
   },
 );
 
-MapRoot.displayName = 'Map.Root';
+MapContent.displayName = 'Map.Content';
 
 //
 // Tiles
 // 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 +168,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 +209,7 @@ const MapTiles = (_props: MapTilesProps) => {
   );
 };
 
-MapTiles.displayName = 'Map.Tiles';
+MapTiles.displayName = MAP_TILES_NAME;
 
 //
 // Markers
@@ -247,7 +280,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);
 
@@ -290,10 +323,18 @@ const MapAction = ({ onAction, position = 'bottomright', ...props }: MapControlP
 
 export const Map = {
   Root: MapRoot,
+  Content: MapContent,
   Tiles: MapTiles,
   Markers: MapMarkers,
   Zoom: MapZoom,
   Action: MapAction,
 };
 
-export { type MapController, type MapRootProps, type MapTilesProps, type MapMarkersProps, type MapControlProps };
+export {
+  type MapController,
+  type MapRootProps,
+  type MapContentProps,
+  type MapTilesProps,
+  type MapMarkersProps,
+  type MapControlProps,
+};

package/src/components/Toolbar/Controls.tsx

@@ -5,7 +5,9 @@
 import { type ControlPosition } from 'leaflet';
 import React from 'react';
 
-import { IconButton, type ThemedClassName, Toolbar } from '@dxos/react-ui';
+import { IconButton, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+
+import { translationKey } from '#translations';
 
 export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
 
@@ -21,22 +23,20 @@ export const controlPositions: Record<ControlPosition, string> = {
 };
 
 export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
         icon='ph--plus--regular'
-        label='zoom in'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-in-icon.button')}
         onClick={() => onAction?.('zoom-in')}
       />
       <IconButton
         icon='ph--minus--regular'
-        label='zoom out'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('zoom-out-icon.button')}
         onClick={() => onAction?.('zoom-out')}
       />
     </Toolbar.Root>
@@ -44,22 +44,20 @@ export const ZoomControls = ({ classNames, onAction }: ControlProps) => {
 };
 
 export const ActionControls = ({ classNames, onAction }: ControlProps) => {
+  const { t } = useTranslation(translationKey);
+
   return (
     <Toolbar.Root classNames={['gap-2', classNames]}>
       <IconButton
-        icon='ph--play--regular'
-        label='start'
+        icon='ph--path--regular'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('start-icon.button')}
         onClick={() => onAction?.('start')}
       />
       <IconButton
         icon='ph--globe-hemisphere-west--regular'
-        label='toggle'
         iconOnly
-        size={5}
-        classNames='px-0 aspect-square'
+        label={t('toggle-icon.button')}
         onClick={() => onAction?.('toggle')}
       />
     </Toolbar.Root>

package/src/hooks/context.tsx

@@ -2,16 +2,17 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { type Dispatch, type PropsWithChildren, type SetStateAction, createContext, useContext } from 'react';
+import { type Dispatch, type SetStateAction, createContext, useContext } from 'react';
 
 import { raise } from '@dxos/debug';
-import { useControlledState } from '@dxos/react-ui';
 
 import { type LatLngLiteral } from '../types';
 
 // TODO(burdon): Factor out common geometry types.
 export type Size = { width: number; height: number };
+
 export type Point = { x: number; y: number };
+
 export type Vector = [number, number, number];
 
 export type GlobeContextType = {
@@ -26,39 +27,9 @@ export type GlobeContextType = {
   setRotation: Dispatch<SetStateAction<Vector>>;
 };
 
-const defaults = {
-  center: { lat: 51, lng: 0 } as LatLngLiteral,
-  zoom: 4,
-} as const;
-
+/** @internal */
 // TODO(burdon): Replace with radix.
-const GlobeContext = createContext<GlobeContextType>(undefined);
-
-export type GlobeContextProviderProps = PropsWithChildren<
-  Partial<Pick<GlobeContextType, 'size' | 'center' | 'zoom' | 'translation' | 'rotation'>>
->;
-
-export const GlobeContextProvider = ({
-  children,
-  size,
-  center: centerParam = defaults.center,
-  zoom: zoomParam = defaults.zoom,
-  translation: translationParam,
-  rotation: rotationParam,
-}: GlobeContextProviderProps) => {
-  const [center, setCenter] = useControlledState(centerParam);
-  const [zoom, setZoom] = useControlledState(zoomParam);
-  const [translation, setTranslation] = useControlledState<Point>(translationParam);
-  const [rotation, setRotation] = useControlledState<Vector>(rotationParam);
-
-  return (
-    <GlobeContext.Provider
-      value={{ size, center, zoom, translation, rotation, setCenter, setZoom, setTranslation, setRotation }}
-    >
-      {children}
-    </GlobeContext.Provider>
-  );
-};
+export const GlobeContext = createContext<GlobeContextType>(undefined);
 
 export const useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error('Missing GlobeContext'));