@dxos/react-ui-geo 0.7.5-labs.35b4b42

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDrag.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDrag.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAGrD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC;IAC/B,UAAU,EAAE,eAAe,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,gBAAiB,eAAe,GAAG,IAAI,YAAW,WAAW,SA2BhF,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type GlobeController, type ControlProps } from '../components';
+export declare const useGlobeZoomHandler: (controller: GlobeController | null | undefined) => ControlProps["onAction"];
+//# sourceMappingURL=useGlobeZoomHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobeZoomHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useGlobeZoomHandler.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAExE,eAAO,MAAM,mBAAmB,eAAgB,eAAe,GAAG,IAAI,GAAG,SAAS,KAAG,YAAY,CAAC,UAAU,CAoB3G,CAAC"}

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

@@ -0,0 +1,3 @@
+import { type MapController, type ControlProps } from '../components';
+export declare const useMapZoomHandler: (controller: MapController | null | undefined) => ControlProps["onAction"];
+//# sourceMappingURL=useMapZoomHandler.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMapZoomHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useMapZoomHandler.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC;AAEtE,eAAO,MAAM,iBAAiB,eAAgB,aAAa,GAAG,IAAI,GAAG,SAAS,KAAG,YAAY,CAAC,UAAU,CAoBvG,CAAC"}

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

@@ -0,0 +1,11 @@
+import { type Vector } from './context';
+import { type GlobeController } from '../components';
+export type SpinnerOptions = {
+    disabled?: boolean;
+    delta?: Vector;
+};
+/**
+ * Rotates globe.
+ */
+export declare const useSpinner: (controller?: GlobeController | null, options?: SpinnerOptions) => (() => void)[];
+//# sourceMappingURL=useSpinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinner.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSpinner.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,gBAAiB,eAAe,GAAG,IAAI,YAAW,cAAc,mBAiDtF,CAAC"}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './data';
+export * from './hooks';
+export * from './types';
+export * from './util';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1,7 @@
+import { type LatLngLiteral } from 'leaflet';
+export type MapMarker = {
+    id: string;
+    title?: string;
+    location: LatLngLiteral;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,aAAa,CAAC;CACzB,CAAC"}

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

@@ -0,0 +1,2 @@
+export declare const timer: <T = void>(cb: () => T) => T;
+//# sourceMappingURL=debug.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,5 @@
+export * from './debug';
+export * from './inertia';
+export * from './path';
+export * from './render';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC"}

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

@@ -0,0 +1,16 @@
+import * as d3 from 'd3';
+export declare const restrictAxis: (axis: boolean[]) => (original: number[], current: number[]) => number[];
+/**
+ * Applies a drag handler to the specified target element.
+ */
+export declare const geoInertiaDrag: (target: any, render: any, projection: any, options: any) => {
+    position: number[];
+    velocity: number[];
+    timer: d3.Timer;
+    time: number;
+    t: number;
+    start: (ev: any) => void;
+    move: (ev: any) => void;
+    end: (ev: any) => any;
+};
+//# sourceMappingURL=inertia.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../../src/util/inertia.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,MAAM,IAAI,CAAC;AAGzB,eAAO,MAAM,YAAY,SAChB,OAAO,EAAE,gBACL,MAAM,EAAE,WAAW,MAAM,EAAE,KAAG,MAAM,EACK,CAAC;AAEvD;;GAEG;AAEH,eAAO,MAAM,cAAc;;;;;;;;;CA+B1B,CAAC"}

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

@@ -0,0 +1,15 @@
+import { type GeoGeometryObjects } from 'd3';
+import { type Point, type Polygon, type Position } from 'geojson';
+import type { Vector } from '../hooks';
+export type LatLng = {
+    lat: number;
+    lng: number;
+};
+export declare const positionToRotation: ([lng, lat]: [number, number], tilt?: number) => Vector;
+export declare const geoToPosition: ({ lat, lng }: LatLng) => [number, number];
+export declare const geoPoint: (point: LatLng) => Point;
+export declare const geoCircle: ({ lat, lng }: LatLng, radius: number) => Polygon;
+export declare const geoLine: (p1: LatLng, p2: LatLng) => GeoGeometryObjects;
+export declare const closestPoint: (points: Position[], target: Position) => Position | null;
+export declare const getDistance: (point1: Position, point2: Position) => number;
+//# sourceMappingURL=path.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"path.d.ts","sourceRoot":"","sources":["../../../../src/util/path.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,IAAI,CAAC;AAC7C,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,MAAM,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAIlD,eAAO,MAAM,kBAAkB,eAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,oBAAa,MAA+B,CAAC;AAE5G,eAAO,MAAM,aAAa,iBAAkB,MAAM,KAAG,CAAC,MAAM,EAAE,MAAM,CAAe,CAAC;AAEpF,eAAO,MAAM,QAAQ,UAAW,MAAM,KAAG,KAA+D,CAAC;AAGzG,eAAO,MAAM,SAAS,iBAAkB,MAAM,UAAU,MAAM,KAAG,OACb,CAAC;AAErD,eAAO,MAAM,OAAO,OAAQ,MAAM,MAAM,MAAM,KAAG,kBAM/C,CAAC;AAEH,eAAO,MAAM,YAAY,WAAY,QAAQ,EAAE,UAAU,QAAQ,KAAG,QAAQ,GAAG,IAiB9E,CAAC;AAEF,eAAO,MAAM,WAAW,WAAY,QAAQ,UAAU,QAAQ,KAAG,MAIhE,CAAC"}

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

@@ -0,0 +1,26 @@
+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 StyleSet = Partial<Record<Style, Styles>>;
+export type Features = {
+    points?: LatLng[];
+    lines?: {
+        source: LatLng;
+        target: LatLng;
+    }[];
+};
+export type Layer = {
+    styles: Styles;
+    path: GeoPermissibleObjects;
+};
+/**
+ * Create rendering layers.
+ */
+export declare const createLayers: (topology: Topology, features: Features, styles: StyleSet) => Layer[];
+/**
+ * Render layers created above.
+ */
+export declare const renderLayers: (generator: GeoPath, layers: Layer[], scale: number) => CanvasRenderingContext2D;
+//# sourceMappingURL=render.d.ts.map

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

@@ -0,0 +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"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@dxos/react-ui-geo",
+  "version": "0.7.5-labs.35b4b42",
+  "description": "Geo components.",
+  "homepage": "https://github.com/dxos",
+  "bugs": "https://github.com/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "sideEffects": true,
+  "exports": {
+    "./data": {
+      "types": "./dist/types/src/data.d.ts",
+      "browser": "./dist/lib/browser/data.mjs",
+      "node": "./dist/lib/node-esm/data.mjs"
+    },
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "data": [
+        "dist/types/src/data.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "data",
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "d3": "^7.9.0",
+    "d3-geo-projection": "^4.0.0",
+    "d3-hexbin": "^0.2.2",
+    "geojson": "^0.5.0",
+    "leaflet": "^1.9.4",
+    "lodash.defaultsdeep": "^4.6.1",
+    "react-leaflet": "^4.2.1",
+    "react-resize-detector": "^11.0.1",
+    "topojson-client": "^3.1.0",
+    "topojson-simplify": "^3.0.3",
+    "versor": "^0.2.0",
+    "@dxos/async": "0.7.5-labs.35b4b42",
+    "@dxos/node-std": "0.7.5-labs.35b4b42",
+    "@dxos/debug": "0.7.5-labs.35b4b42",
+    "@dxos/util": "0.7.5-labs.35b4b42"
+  },
+  "devDependencies": {
+    "@react-three/drei": "^9.99.0",
+    "@react-three/fiber": "^8.15.0",
+    "@types/d3": "^7.4.3",
+    "@types/geojson": "^7946.0.14",
+    "@types/leaflet": "^1.9.16",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "@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": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "three": "0.165.0",
+    "@dxos/react-ui": "0.7.5-labs.35b4b42",
+    "@dxos/react-ui-theme": "0.7.5-labs.35b4b42",
+    "@dxos/storybook-utils": "0.7.5-labs.35b4b42"
+  },
+  "peerDependencies": {
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.7.5-labs.35b4b42",
+    "@dxos/react-ui": "0.7.5-labs.35b4b42"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -0,0 +1,332 @@
+//
+// Copyright 2018 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import { type FeatureCollection, type Geometry, type Position } from 'geojson';
+import { Leva } from 'leva';
+import React, { useMemo, useRef, useState } from 'react';
+import { type Topology } from 'topojson-specification';
+
+import { useAsyncState } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { Globe, type GlobeCanvasProps, type GlobeController, type GlobeRootProps } from './Globe';
+import { useDrag, useGlobeZoomHandler, useSpinner, useTour, type Vector } from '../../hooks';
+import { closestPoint, type LatLng, type StyleSet } from '../../util';
+import { type ControlProps } from '../Toolbar';
+
+// TODO(burdon): Local script (e.g., plot on chart) vs. remote functions.
+// TODO(burdon): Add charts to sheet.
+// TODO(burdon): Able to script (e.g., list of cities from named range).
+// TODO(burdon): Search flight information. Calendar (itinerary).
+// TODO(burdon): Show MANY packets flowing across the network.
+
+const useImportJson = (filename: string) => {
+  return useAsyncState(
+    // TODO(burdon): Configure vite plugins for experimental syntax.
+    //  @babel/plugin-syntax-import-assertions
+    //  @babel/plugin-syntax-import-attributes
+    async () => await import(filename), // { assert: { type: 'json' } }),
+  );
+};
+
+const defaultStyles: StyleSet = {
+  water: {
+    fillStyle: '#0a0a0a',
+  },
+
+  land: {
+    fillStyle: '#050505',
+    strokeStyle: 'darkgreen',
+  },
+
+  graticule: {
+    strokeStyle: '#111',
+  },
+
+  line: {
+    lineWidth: 1,
+    lineDash: [4, 16],
+    strokeStyle: 'yellow',
+  },
+
+  point: {
+    pointRadius: 2,
+    fillStyle: 'red',
+  },
+
+  cursor: {
+    fillStyle: 'orange',
+    pointRadius: 2,
+  },
+
+  arc: {
+    lineWidth: 2,
+    strokeStyle: 'yellow',
+  },
+};
+
+const dotStyles: StyleSet = {
+  dots: {
+    fillStyle: '#444',
+    pointRadius: 2,
+  },
+
+  point: {
+    pointRadius: 2,
+    fillStyle: 'red',
+  },
+
+  cursor: {
+    fillStyle: 'orange',
+    pointRadius: 2,
+  },
+
+  arc: {
+    lineWidth: 2,
+    strokeStyle: 'yellow',
+  },
+};
+
+const routes: Record<string, string[]> = {
+  LAX: ['SFO', 'SEA'],
+  JFK: ['LAX', 'YYZ', 'TPA', 'CXH'],
+  CDG: ['BHX', 'BCN', 'VIE', 'WAW', 'CPH', 'ATH', 'IST', 'TXL', 'KBP', 'TLL'],
+  DXB: ['IKA'],
+  SIN: ['HND', 'SYD', 'HKG', 'BKK'],
+};
+
+// TODO(burdon): Make hierarchical/tree.
+const createTrip = (
+  airports: FeatureCollection<Geometry & { coordinates: Position }, { iata: string }>,
+  routes: Record<string, string[]>,
+  points: Position[] = [],
+) => {
+  let previousHub: LatLng;
+  return Object.entries(routes).reduce<{ points: LatLng[]; lines: { source: LatLng; target: LatLng }[] }>(
+    (features, [hub, regional]) => {
+      const hubAirport = airports.features.find(({ properties }) => properties.iata === hub);
+      if (hubAirport) {
+        const [lng, lat] = closestPoint(points, hubAirport.geometry.coordinates);
+        const hubPoint = { lat, lng };
+        features.points.push(hubPoint);
+        if (previousHub) {
+          features.lines.push({ source: previousHub, target: hubPoint });
+        }
+
+        for (const dest of regional) {
+          const destAirport = airports.features.find(({ properties }) => properties.iata === dest);
+          if (destAirport) {
+            const [lng, lat] = closestPoint(points, destAirport.geometry.coordinates);
+            features.points.push({ lat, lng });
+            features.lines.push({ source: hubPoint, target: { lat, lng } });
+          }
+        }
+
+        previousHub = hubPoint;
+      }
+
+      return features;
+    },
+    { points: [], lines: [] },
+  );
+};
+
+type StoryProps = Pick<GlobeRootProps, 'scale' | 'translation' | 'rotation'> &
+  Pick<GlobeCanvasProps, 'projection' | 'styles'> & {
+    drag?: boolean;
+    spin?: boolean;
+    tour?: boolean;
+    xAxis?: boolean;
+  };
+
+const Story = ({
+  scale: _scale = 1,
+  translation,
+  rotation = [0, 0, 0],
+  projection,
+  styles = defaultStyles,
+  drag = false,
+  spin = false,
+  tour = false,
+  xAxis = false,
+}: StoryProps) => {
+  const controller = useRef<GlobeController>(null);
+  const [dots] = useAsyncState(async () => {
+    const points = (await import('../../../data/countries-dots-3.ts')).default;
+    return {
+      type: 'Topology',
+      objects: { dots: points },
+    } as any as Topology;
+  });
+  // const [topology] = useImportJson('../../../data/raw/countries-110m.json');
+  const [topology] = useAsyncState(async () => (await import('../../../data/countries-110m.ts')).default);
+  const [airports] = useAsyncState(async () => (await import('../../../data/airports.ts')).default);
+  const features = useMemo(() => {
+    return airports ? createTrip(airports, routes, (dots?.objects.dots as any)?.geometries[0].coordinates) : undefined;
+  }, [airports, routes, dots]);
+
+  // Control hooks.
+  const [startSpinner, stopSpinner] = useSpinner(controller.current, { disabled: !spin });
+  const [startTour, stopTour] = useTour(controller.current, features, {
+    disabled: !tour,
+    styles,
+  });
+  useDrag(controller.current, {
+    xAxis,
+    disabled: !drag,
+    onUpdate: (event) => {
+      switch (event.type) {
+        case 'start': {
+          stopSpinner();
+          stopTour();
+          break;
+        }
+      }
+    },
+  });
+
+  // TODO(burdon): Factor out handlers.
+  const handleAction: ControlProps['onAction'] = (event) => {
+    switch (event) {
+      case 'start': {
+        if (spin) {
+          startSpinner();
+        }
+        if (tour) {
+          startTour();
+        }
+        break;
+      }
+      case 'zoom-in': {
+        controller.current.setScale((scale) => scale * 1.1);
+        break;
+      }
+      case 'zoom-out': {
+        controller.current.setScale((scale) => scale * 0.9);
+        break;
+      }
+    }
+  };
+
+  return (
+    <Globe.Root classNames='absolute inset-0' scale={_scale} translation={translation} rotation={rotation}>
+      <Globe.Canvas
+        ref={controller}
+        topology={styles.dots ? dots : topology}
+        projection={projection}
+        styles={styles}
+        features={tour ? { points: features?.points ?? [] } : features}
+      />
+      <Globe.Zoom onAction={handleAction} />
+      <Globe.Action onAction={handleAction} />
+      <Globe.Debug />
+      <Globe.Panel position='topright' classNames='w-20 h-20'>
+        <Leva />
+      </Globe.Panel>
+    </Globe.Root>
+  );
+};
+
+const initialRotation: Vector = [0, -40, 0];
+
+const meta: Meta = {
+  title: 'ui/react-ui-geo/Globe',
+  component: Globe.Root,
+  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'bg-[#000]', tooltips: true })],
+};
+
+export default meta;
+
+export const Earth1 = () => {
+  // const [topology] = useImportJson('../../../data/raw/countries-110m.json');
+  const [topology] = useAsyncState(async () => (await import('../../../data/countries-110m.ts')).default);
+  const [controller, setController] = useState<GlobeController | null>();
+  const handleAction = useGlobeZoomHandler(controller);
+  useDrag(controller);
+
+  return (
+    <Globe.Root scale={1.2} rotation={[Math.random() * 360, 0, 0]}>
+      <Globe.Canvas ref={setController} topology={topology} />
+      <Globe.Zoom onAction={handleAction} />
+    </Globe.Root>
+  );
+};
+
+export const Earth2 = () => {
+  // const [topology] = useImportJson('../../../data/raw/countries-110m.json');
+  const [topology] = useAsyncState(async () => (await import('../../../data/countries-110m.ts')).default);
+  const [controller, setController] = useState<GlobeController | null>();
+  const handleAction = useGlobeZoomHandler(controller);
+  useDrag(controller);
+
+  return (
+    <div className='absolute bottom-0 left-0 right-0 '>
+      <Globe.Root classNames='h-[400px]' scale={2.8} translation={{ x: 0, y: 400 }}>
+        <Globe.Canvas ref={setController} topology={topology} />
+        <Globe.Zoom onAction={handleAction} />
+      </Globe.Root>
+    </div>
+  );
+};
+
+const monochrome: StyleSet = {
+  water: {
+    fillStyle: '#191919',
+  },
+
+  land: {
+    fillStyle: '#444',
+    strokeStyle: '#222',
+  },
+
+  border: {
+    strokeStyle: '#111',
+  },
+
+  graticule: {
+    strokeStyle: '#111',
+  },
+};
+
+export const Mercator = () => {
+  // const [topology] = useImportJson('../../../data/raw/countries-110m.json');
+  const [topology] = useAsyncState(async () => (await import('../../../data/countries-110m.ts')).default);
+  const [controller, setController] = useState<GlobeController | null>();
+  const handleAction = useGlobeZoomHandler(controller);
+  useDrag(controller);
+
+  return (
+    <Globe.Root classNames='flex grow overflow-hidden' scale={0.7} rotation={initialRotation}>
+      <Globe.Canvas ref={setController} topology={topology} projection='mercator' styles={monochrome} />
+      <Globe.Zoom onAction={handleAction} />
+    </Globe.Root>
+  );
+};
+
+export const Globe1 = () => {
+  return <Story drag projection='mercator' scale={0.8} rotation={initialRotation} />;
+};
+
+export const Globe2 = () => {
+  return <Story drag projection='transverse-mercator' scale={0.8} rotation={initialRotation} />;
+};
+
+export const Globe3 = () => {
+  return <Story drag spin scale={1.5} rotation={initialRotation} />;
+};
+
+export const Globe4 = () => {
+  return <Story drag tour scale={2} rotation={initialRotation} />;
+};
+
+export const Globe5 = () => {
+  return <Story drag tour scale={0.9} rotation={initialRotation} styles={dotStyles} />;
+};
+
+export const Globe6 = () => {
+  return <Story drag xAxis tour scale={2} translation={{ x: 0, y: 600 }} rotation={[0, -20, 0]} styles={dotStyles} />;
+};