@dxos/react-ui-geo 0.7.5-labs.ff2ff30 → 0.7.5-main.b19bfc8

package/dist/types/src/components/Map/Map.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Map.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Map/Map.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAqB5D,QAAA,MAAM,IAAI,EAAE,IAKX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
+{"version":3,"file":"Map.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Map/Map.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAS5D,QAAA,MAAM,MAAM;;6CAWX,CAAC;AAEF,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAI7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC"}

package/dist/types/src/components/Toolbar/Controls.d.ts

@@ -1,11 +1,10 @@
 import { type ControlPosition } from 'leaflet';
-import React from 'react';
 import { type ThemedClassName } from '@dxos/react-ui';
 export type ControlAction = 'toggle' | 'start' | 'zoom-in' | 'zoom-out';
 export type ControlProps = ThemedClassName<{
     onAction?: (action: ControlAction) => void;
 }>;
 export declare const controlPositions: Record<ControlPosition, string>;
-export declare const ZoomControls: ({ classNames, onAction }: ControlProps) => React.JSX.Element;
-export declare const ActionControls: ({ classNames, onAction }: ControlProps) => React.JSX.Element;
+export declare const ZoomControls: ({ classNames, onAction }: ControlProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionControls: ({ classNames, onAction }: ControlProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Controls.d.ts.map

package/dist/types/src/components/Toolbar/Controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Controls.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAW,MAAM,gBAAgB,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAK5D,CAAC;AAEF,eAAO,MAAM,YAAY,6BAA8B,YAAY,sBAuBlE,CAAC;AAEF,eAAO,MAAM,cAAc,6BAA8B,YAAY,sBAuBpE,CAAC"}
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Controls.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,OAAO,EAAc,KAAK,eAAe,EAAW,MAAM,gBAAgB,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;AAExE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;CAC5C,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAK5D,CAAC;AAEF,eAAO,MAAM,YAAY,6BAA8B,YAAY,4CAuBlE,CAAC;AAEF,eAAO,MAAM,cAAc,6BAA8B,YAAY,4CAuBpE,CAAC"}

package/dist/types/src/components/types.d.ts

@@ -1,9 +1,10 @@
 import { type LatLngLiteral } from 'leaflet';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { type MapMarker } from '../types';
-export type { LatLngLiteral };
+export { type LatLngLiteral };
 export type MapCanvasProps = ThemedClassName<{
     markers?: MapMarker[];
+    selected?: string[];
     zoom?: number;
     center?: LatLngLiteral;
     onChange?: (ev: {

package/dist/types/src/components/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC;IAC3C,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,KAAK,aAAa,EAAE,CAAC;AAE9B,MAAM,MAAM,cAAc,GAAG,eAAe,CAAC;IAC3C,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE;QAAE,MAAM,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE,CAAC,CAAC"}

package/dist/types/src/hooks/context.d.ts

@@ -1,4 +1,4 @@
-import React, { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
+import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react';
 import { type LatLng } from '../util';
 export type Size = {
     width: number;
@@ -21,6 +21,6 @@ export type GlobeContextType = {
     setRotation: Dispatch<SetStateAction<Vector>>;
 };
 export type GlobeContextProviderProps = PropsWithChildren<Partial<Pick<GlobeContextType, 'size' | 'center' | 'scale' | 'translation' | 'rotation'>>>;
-export declare const GlobeContextProvider: ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation, }: GlobeContextProviderProps) => React.JSX.Element;
+export declare const GlobeContextProvider: ({ children, size, center: _center, scale: _scale, translation: _translation, rotation: _rotation, }: GlobeContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useGlobeContext: () => GlobeContextType;
 //# sourceMappingURL=context.d.ts.map

package/dist/types/src/hooks/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/hooks/context.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAiB,KAAK,QAAQ,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAKrH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,MAAM,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7C,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC/C,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CACvD,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC,CAC1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,wGAO9B,yBAAyB,sBAa3B,CAAC;AAEF,eAAO,MAAM,eAAe,wBAE3B,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../src/hooks/context.tsx"],"names":[],"mappings":"AAIA,OAAc,EAAiB,KAAK,QAAQ,EAAE,KAAK,iBAAiB,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAKrH,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAGtC,MAAM,MAAM,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7C,MAAM,MAAM,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,KAAK,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC3C,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAC/C,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG,iBAAiB,CACvD,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,UAAU,CAAC,CAAC,CAC1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,wGAO9B,yBAAyB,4CAa3B,CAAC;AAEF,eAAO,MAAM,eAAe,wBAE3B,CAAC"}

package/dist/types/src/hooks/useTour.d.ts

@@ -1,13 +1,18 @@
+import { type Dispatch, type SetStateAction } from 'react';
 import type { GlobeController } from '../components';
-import { type Features, type StyleSet } from '../util';
+import { type LatLng, type StyleSet } from '../util';
 export type TourOptions = {
+    running?: boolean;
     disabled?: boolean;
-    styles?: StyleSet;
     duration?: number;
+    loop?: boolean;
+    tilt?: number;
+    autoRotate?: boolean;
+    styles?: StyleSet;
 };
 /**
  * Iterates between points.
  * Inspired by: https://observablehq.com/@mbostock/top-100-cities
  */
-export declare const useTour: (controller?: GlobeController | null, features?: Features, options?: TourOptions) => (() => void)[];
+export declare const useTour: (controller?: GlobeController | null, points?: LatLng[], options?: TourOptions) => [boolean, Dispatch<SetStateAction<boolean>>];
 //# sourceMappingURL=useTour.d.ts.map

package/dist/types/src/hooks/useTour.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTour.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTour.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,KAAK,QAAQ,EAAkD,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMvG,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,gBAAiB,eAAe,GAAG,IAAI,aAAa,QAAQ,YAAW,WAAW,mBAwFrG,CAAC"}
+{"version":3,"file":"useTour.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useTour.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKhF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAiB,KAAK,MAAM,EAAsB,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAMxF,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,OAAO,gBACL,eAAe,GAAG,IAAI,WAC1B,MAAM,EAAE,YACR,WAAW,KACnB,CAAC,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CA0F7C,CAAC"}

package/dist/types/src/util/debug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK,GAAI,CAAC,aAAa,MAAM,CAAC,KAAG,CAS7C,CAAC"}
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../../../src/util/debug.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,KAAK,GAAI,CAAC,aAAa,MAAM,CAAC,KAAG,CAU7C,CAAC"}

package/dist/types/src/util/render.d.ts

@@ -2,7 +2,7 @@ import { type GeoPath, type GeoPermissibleObjects } from 'd3';
 import { type Topology } from 'topojson-specification';
 import { type LatLng } from './path';
 export type Styles = Record<string, any>;
-export type Style = 'water' | 'graticule' | 'land' | 'border' | 'dots' | 'point' | 'line' | 'cursor' | 'arc';
+export type Style = 'background' | 'water' | 'graticule' | 'land' | 'border' | 'dots' | 'point' | 'line' | 'cursor' | 'arc';
 export type StyleSet = Partial<Record<Style, Styles>>;
 export type Features = {
     points?: LatLng[];
@@ -22,5 +22,5 @@ export declare const createLayers: (topology: Topology, features: Features, styl
 /**
  * Render layers created above.
  */
-export declare const renderLayers: (generator: GeoPath, layers: Layer[], scale: number) => CanvasRenderingContext2D;
+export declare const renderLayers: (generator: GeoPath, layers: Layer[], scale: number, styles: StyleSet) => CanvasRenderingContext2D;
 //# sourceMappingURL=render.d.ts.map

package/dist/types/src/util/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/util/render.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE9D,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,KAAK,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEzC,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;AAE7G,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,aAAc,QAAQ,YAAY,QAAQ,UAAU,QAAQ,KAAG,KAAK,EA2E5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,cAAe,OAAO,UAAU,KAAK,EAAE,SAAc,MAAM,6BAsCnF,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/util/render.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,IAAI,CAAC;AAE9D,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,KAAK,MAAM,EAAqB,MAAM,QAAQ,CAAC;AAExD,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEzC,MAAM,MAAM,KAAK,GACb,YAAY,GACZ,OAAO,GACP,WAAW,GACX,MAAM,GACN,QAAQ,GACR,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,CAAC;AAEV,MAAM,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,aAAc,QAAQ,YAAY,QAAQ,UAAU,QAAQ,KAAG,KAAK,EA2E5F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,cAAe,OAAO,UAAU,KAAK,EAAE,SAAc,MAAM,UAAU,QAAQ,6BA0CrG,CAAC"}

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dxos/react-ui-geo",
-  "version": "0.7.5-labs.ff2ff30",
+  "version": "0.7.5-main.b19bfc8",
   "description": "Geo components.",
   "homepage": "https://github.com/dxos",
   "bugs": "https://github.com/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
   "sideEffects": true,
+  "type": "module",
   "exports": {
     "./data": {
       "types": "./dist/types/src/data.d.ts",
@@ -44,10 +45,11 @@
     "topojson-client": "^3.1.0",
     "topojson-simplify": "^3.0.3",
     "versor": "^0.2.0",
-    "@dxos/async": "0.7.5-labs.ff2ff30",
-    "@dxos/debug": "0.7.5-labs.ff2ff30",
-    "@dxos/node-std": "0.7.5-labs.ff2ff30",
-    "@dxos/util": "0.7.5-labs.ff2ff30"
+    "@dxos/async": "0.7.5-main.b19bfc8",
+    "@dxos/debug": "0.7.5-main.b19bfc8",
+    "@dxos/node-std": "0.7.5-main.b19bfc8",
+    "@dxos/util": "0.7.5-main.b19bfc8",
+    "@dxos/log": "0.7.5-main.b19bfc8"
   },
   "devDependencies": {
     "@react-three/drei": "^9.99.0",
@@ -67,15 +69,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "three": "0.165.0",
-    "@dxos/react-ui": "0.7.5-labs.ff2ff30",
-    "@dxos/react-ui-theme": "0.7.5-labs.ff2ff30",
-    "@dxos/storybook-utils": "0.7.5-labs.ff2ff30"
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
+    "@dxos/storybook-utils": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui": "0.7.5-main.b19bfc8"
   },
   "peerDependencies": {
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-labs.ff2ff30",
-    "@dxos/react-ui-theme": "0.7.5-labs.ff2ff30"
+    "@dxos/react-ui": "0.7.5-main.b19bfc8",
+    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -138,7 +138,7 @@ const Story = ({
   translation,
   rotation = [0, 0, 0],
   projection,
-  styles = defaultStyles,
+  styles,
   drag = false,
   spin = false,
   tour = false,
@@ -160,10 +160,7 @@ const Story = ({
 
   // Control hooks.
   const [startSpinner, stopSpinner] = useSpinner(controller.current, { disabled: !spin });
-  const [startTour, stopTour] = useTour(controller.current, features, {
-    disabled: !tour,
-    styles,
-  });
+  const [_running, setRunning] = useTour(controller.current, features?.points, { disabled: !tour, styles });
   useDrag(controller.current, {
     xAxis,
     disabled: !drag,
@@ -171,7 +168,7 @@ const Story = ({
       switch (event.type) {
         case 'start': {
           stopSpinner();
-          stopTour();
+          setRunning(false);
           break;
         }
       }
@@ -186,7 +183,7 @@ const Story = ({
           startSpinner();
         }
         if (tour) {
-          startTour();
+          setRunning(true);
         }
         break;
       }
@@ -205,7 +202,7 @@ const Story = ({
     <Globe.Root classNames='absolute inset-0' scale={_scale} translation={translation} rotation={rotation}>
       <Globe.Canvas
         ref={controller}
-        topology={styles.dots ? dots : topology}
+        topology={styles?.dots ? dots : topology}
         projection={projection}
         styles={styles}
         features={tour ? { points: features?.points ?? [] } : features}
@@ -298,15 +295,15 @@ export const Globe1 = () => {
 };
 
 export const Globe2 = () => {
-  return <Story drag projection='transverse-mercator' scale={0.8} rotation={initialRotation} />;
+  return <Story drag projection='transverse-mercator' scale={0.8} rotation={initialRotation} styles={defaultStyles} />;
 };
 
 export const Globe3 = () => {
-  return <Story drag spin scale={1.5} rotation={initialRotation} />;
+  return <Story drag spin scale={1.5} rotation={initialRotation} styles={defaultStyles} />;
 };
 
 export const Globe4 = () => {
-  return <Story drag tour scale={2} rotation={initialRotation} />;
+  return <Story drag tour scale={2} rotation={initialRotation} styles={defaultStyles} />;
 };
 
 export const Globe5 = () => {

package/src/components/Globe/Globe.tsx

@@ -17,7 +17,7 @@ import React, {
 import { useResizeDetector } from 'react-resize-detector';
 import { type Topology } from 'topojson-specification';
 
-import { type ThemedClassName, useDynamicRef } from '@dxos/react-ui';
+import { type ThemedClassName, type ThemeMode, useDynamicRef, useThemeContext } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import {
@@ -28,7 +28,6 @@ import {
 } from '../../hooks';
 import {
   type Features,
-  type Styles,
   type StyleSet,
   createLayers,
   geoToPosition,
@@ -38,35 +37,57 @@ import {
 } from '../../util';
 import { ZoomControls, ActionControls, type ControlProps, controlPositions } from '../Toolbar';
 
-// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
-const defaultStyles: Styles = {
-  background: {
-    fillStyle: '#111111',
-  },
-
-  water: {
-    fillStyle: '#123E6A',
-  },
-
-  hex: {
-    strokeStyle: 'green',
-    fillStyle: 'gray',
-    pointRadius: 1,
-  },
-
-  land: {
-    fillStyle: '#032153',
-  },
-
-  line: {
-    strokeStyle: '#111111',
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
+ */
+const defaultStyles: Record<ThemeMode, StyleSet> = {
+  light: {
+    background: {
+      fillStyle: '#EEE',
+    },
+
+    water: {
+      fillStyle: '#555',
+    },
+
+    land: {
+      fillStyle: '#999',
+    },
+
+    line: {
+      strokeStyle: 'darkred',
+    },
+
+    point: {
+      fillStyle: '#111111',
+      strokeStyle: '#111111',
+      strokeWidth: 1,
+      pointRadius: 0.5,
+    },
   },
-
-  point: {
-    fillStyle: '#111111',
-    strokeStyle: '#111111',
-    strokeWidth: 1,
-    pointRadius: 0.5,
+  dark: {
+    background: {
+      fillStyle: '#111111',
+    },
+
+    water: {
+      fillStyle: '#123E6A',
+    },
+
+    land: {
+      fillStyle: '#032153',
+    },
+
+    line: {
+      strokeStyle: '#111111',
+    },
+
+    point: {
+      fillStyle: '#111111',
+      strokeStyle: '#111111',
+      strokeWidth: 1,
+      pointRadius: 0.5,
+    },
   },
 };
 
@@ -125,7 +146,10 @@ type GlobeCanvasProps = {
  * https://github.com/topojson/world-atlas
  */
 const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
-  ({ projection: _projection, topology, features, styles = defaultStyles }, forwardRef) => {
+  ({ projection: _projection, topology, features, styles: _styles }, forwardRef) => {
+    const { themeMode } = useThemeContext();
+    const styles = useMemo(() => _styles ?? defaultStyles[themeMode], [_styles, themeMode]);
+
     // Canvas.
     const [canvas, setCanvas] = useState<HTMLCanvasElement>(null);
     const canvasRef = (canvas: HTMLCanvasElement) => setCanvas(canvas);
@@ -207,7 +231,7 @@ const GlobeCanvas = forwardRef<GlobeController, GlobeCanvasProps>(
             .translate([size.width / 2 + (translation?.x ?? 0), size.height / 2 + (translation?.y ?? 0)])
             .rotate(rotation ?? [0, 0, 0]);
 
-          renderLayers(generator, layers, scale);
+          renderLayers(generator, layers, scale, styles);
         });
       }
     }, [generator, size, scale, translation, rotation, layers]);

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

@@ -11,29 +11,51 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Map, type MapController } from './Map';
 import { useMapZoomHandler } from '../../hooks';
+import { type MapMarker } from '../../types';
 
-const Render = () => {
+const Render = ({ markers }) => {
   const [controller, setController] = useState<MapController>();
   const handleZoomAction = useMapZoomHandler(controller);
 
   return (
     <Map.Root>
-      <Map.Canvas ref={setController} />
+      <Map.Canvas ref={setController} markers={markers} />
       <Map.Zoom position='bottomleft' onAction={handleZoomAction} />
       <Map.Action position='bottomright' />
     </Map.Root>
   );
 };
 
-const meta: Meta = {
+const meta: Meta<typeof Render> = {
   title: 'ui/react-ui-geo/Map',
-  component: Map.Root,
-  render: Render,
+  component: Render,
   decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
 };
 
 export default meta;
 
-type Story = StoryObj;
+type Story = StoryObj<typeof Render>;
 
 export const Default: Story = {};
+
+export const WithMarkers: Story = {
+  args: {
+    markers: [
+      { id: 'tokyo', title: 'Tokyo', location: { lat: 35.6762, lng: 139.6503 } },
+      { id: 'sydney', title: 'Sydney', location: { lat: -33.8688, lng: 151.2093 } },
+      { id: 'auckland', title: 'Auckland', location: { lat: -36.8509, lng: 174.7645 } },
+      { id: 'new-delhi', title: 'New Delhi', location: { lat: 28.6139, lng: 77.209 } },
+      { id: 'manila', title: 'Manila', location: { lat: 14.5995, lng: 120.9842 } },
+      { id: 'beijing', title: 'Beijing', location: { lat: 39.9042, lng: 116.4074 } },
+      { id: 'seoul', title: 'Seoul', location: { lat: 37.5665, lng: 126.978 } },
+      { id: 'bangkok', title: 'Bangkok', location: { lat: 13.7563, lng: 100.5018 } },
+      { id: 'singapore', title: 'Singapore', location: { lat: 1.3521, lng: 103.8198 } },
+      { id: 'kuala-lumpur', title: 'Kuala Lumpur', location: { lat: 3.139, lng: 101.6869 } },
+      { id: 'jakarta', title: 'Jakarta', location: { lat: -6.2088, lng: 106.8456 } },
+      { id: 'hanoi', title: 'Hanoi', location: { lat: 21.0285, lng: 105.8542 } },
+      { id: 'phnom-penh', title: 'Phnom Penh', location: { lat: 11.5564, lng: 104.9282 } },
+      { id: 'vientiane', title: 'Vientiane', location: { lat: 17.9757, lng: 102.6331 } },
+      { id: 'yangon', title: 'Yangon', location: { lat: 16.8661, lng: 96.1951 } },
+    ] as MapMarker[],
+  },
+};

package/src/components/Map/Map.tsx

@@ -5,16 +5,15 @@
 // eslint-disable-next-line no-restricted-imports
 import 'leaflet/dist/leaflet.css';
 
-import type L from 'leaflet';
-import { type ControlPosition, Control, DomEvent, DomUtil, type LatLngExpression, latLngBounds } from 'leaflet';
-import React, { forwardRef, type PropsWithChildren, useEffect, useImperativeHandle } from 'react';
+import L, { Control, DomEvent, DomUtil, latLngBounds, type ControlPosition, type LatLngExpression } from 'leaflet';
+import { forwardRef, useEffect, useImperativeHandle, type PropsWithChildren } from 'react';
 import { createRoot } from 'react-dom/client';
+import type { MapContainerProps } from 'react-leaflet';
 import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet';
-import { type MapContainerProps } from 'react-leaflet/lib/MapContainer';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { debounce } from '@dxos/async';
-import { Tooltip, ThemeProvider, type ThemedClassName } from '@dxos/react-ui';
+import { ThemeProvider, Tooltip, type ThemedClassName } from '@dxos/react-ui';
 import { defaultTx, mx } from '@dxos/react-ui-theme';
 
 import { ActionControls, controlPositions, ZoomControls, type ControlProps } from '../Toolbar';
@@ -61,84 +60,96 @@ type MapController = {
   setZoom: (cb: (zoom: number) => number) => void;
 };
 
-const MapCanvas = forwardRef<MapController, MapCanvasProps>(
-  ({ markers = [], center, zoom, onChange }, forwardedRef) => {
-    const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-    const map = useMap();
-
-    useImperativeHandle(
-      forwardedRef,
-      () => ({
-        setCenter: (center: LatLngExpression, zoom?: number) => {
-          map.setView(center, zoom);
-        },
-        setZoom: (cb) => {
-          map.setZoom(cb(map.getZoom()));
-        },
-      }),
-      [map],
-    );
-
-    // Resize.
-    useEffect(() => {
-      if (width && height) {
-        map.invalidateSize();
-      }
-    }, [width, height]);
-
-    // Position.
-    useEffect(() => {
-      if (center) {
+const MapCanvas = forwardRef<MapController, MapCanvasProps>(({ markers, center, zoom, onChange }, forwardedRef) => {
+  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
+  const map = useMap();
+
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      setCenter: (center: LatLngExpression, zoom?: number) => {
         map.setView(center, zoom);
-      } else if (zoom !== undefined) {
-        map.setZoom(zoom);
-      }
-    }, [center, zoom]);
-
-    // Events.
-    useEffect(() => {
-      const handler = debounce(() => {
-        onChange?.({ center: map.getCenter(), zoom: map.getZoom() });
-      }, 100);
-      map.on('move', handler);
-      map.on('zoom', handler);
-      return () => {
-        map.off('move', handler);
-        map.off('zoom', handler);
-      };
-    }, [map, onChange]);
-
-    // Set the viewport around the markers, or show the whole world map if `markers` is empty.
-    useEffect(() => {
-      if (markers.length > 0) {
-        const bounds = latLngBounds(markers.map((marker) => marker.location));
-        map.fitBounds(bounds);
-      } else {
-        map.setView(defaults.center, defaults.zoom);
-      }
-    }, [markers]);
-
-    return (
-      <div ref={ref} className='flex w-full h-full overflow-hidden bg-baseSurface'>
-        {/* Map tiles. */}
-        <TileLayer
-          className='dark:filter dark:grayscale dark:invert'
-          url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
-        />
-
-        {/* Markers. */}
-        {/* TODO(burdon): Marker icon doesn't load on mobile? */}
-        {markers.map(({ id, title, location: { lat, lng } }) => {
-          return (
-            <Marker key={id} position={{ lat, lng }}>
-              {title && <Popup>{title}</Popup>}
-            </Marker>
-          );
-        })}
-      </div>
-    );
-  },
-);
+      },
+      setZoom: (cb) => {
+        map.setZoom(cb(map.getZoom()));
+      },
+    }),
+    [map],
+  );
+
+  // Resize.
+  useEffect(() => {
+    if (width && height) {
+      map.invalidateSize();
+    }
+  }, [width, height]);
+
+  // Position.
+  useEffect(() => {
+    if (center) {
+      map.setView(center, zoom);
+    } else if (zoom !== undefined) {
+      map.setZoom(zoom);
+    }
+  }, [center, zoom]);
+
+  // Events.
+  useEffect(() => {
+    const handler = debounce(() => {
+      onChange?.({ center: map.getCenter(), zoom: map.getZoom() });
+    }, 100);
+    map.on('move', handler);
+    map.on('zoom', handler);
+    return () => {
+      map.off('move', handler);
+      map.off('zoom', handler);
+    };
+  }, [map, onChange]);
+
+  // Set the viewport around the markers, or show the whole world map if `markers` is empty.
+  useEffect(() => {
+    if (markers.length > 0) {
+      const bounds = latLngBounds(markers.map((marker) => marker.location));
+      map.fitBounds(bounds);
+    } else {
+      map.setView(defaults.center, defaults.zoom);
+    }
+  }, [markers]);
+
+  return (
+    <div ref={ref} className='flex w-full h-full overflow-hidden bg-baseSurface'>
+      {/* Map tiles. */}
+      <TileLayer
+        className='dark:filter dark:grayscale dark:invert'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+
+      {/* Markers. */}
+      {markers?.map(({ id, title, location: { lat, lng } }) => {
+        return (
+          <Marker
+            key={id}
+            position={{ lat, lng }}
+            icon={
+              // TODO(burdon): Create custom icon from bundled assets.
+              new L.Icon({
+                iconUrl: 'https://dxos.network/marker-icon.png',
+                iconRetinaUrl: 'https://dxos.network/marker-icon-2x.png',
+                shadowUrl: 'https://dxos.network/marker-shadow.png',
+                iconSize: [25, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41],
+              })
+            }
+          >
+            {title && <Popup>{title}</Popup>}
+          </Marker>
+        );
+      })}
+    </div>
+  );
+});
 
 //
 // Controls

package/src/components/types.ts

@@ -8,10 +8,11 @@ import { type ThemedClassName } from '@dxos/react-ui';
 
 import { type MapMarker } from '../types';
 
-export type { LatLngLiteral };
+export { type LatLngLiteral };
 
 export type MapCanvasProps = ThemedClassName<{
   markers?: MapMarker[];
+  selected?: string[];
   zoom?: number;
   center?: LatLngLiteral;
   onChange?: (ev: { center: LatLngLiteral; zoom: number }) => void;

package/src/hooks/useDrag.ts

@@ -49,7 +49,7 @@ export const useDrag = (controller?: GlobeController | null, options: DragOption
     return () => {
       cancelDrag(d3.select(canvas));
     };
-  }, [controller, options]);
+  }, [controller, JSON.stringify(options)]);
 };
 
 const cancelDrag = (node) => node.on('.drag', null);