choropleth-kit 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,2926 @@
+import {
+  DEFAULT_EMPTY_FILL,
+  DEFAULT_FLIGHT_CURVATURE,
+  DEFAULT_FOCUS_BOUNDS,
+  FIT_TRANSFORM,
+  INERTIA_TAU_MS,
+  THEMES,
+  bubbleScale,
+  buildBreadcrumbs,
+  buildProjectionChain,
+  checkDrillStep,
+  clampPath,
+  classifyDrill,
+  computeAspectRatio,
+  constrainTransform,
+  contextOf,
+  createBorders,
+  createDrillState,
+  createIntentTimer,
+  createLruCache,
+  createProjection,
+  createZoomFilter,
+  createZoomInterpolator,
+  defaultFormatValue,
+  defineTheme,
+  drillDirectionBetween,
+  drillReducer,
+  extendTheme,
+  flightDuration,
+  formatDrillRequestProblem,
+  formatJoinDiagnostics,
+  formatNoIdsDiagnostic,
+  formatTooDeepRequest,
+  formatWrongLevelDataHint,
+  geographyKeyFor,
+  getAnchorPoint,
+  getFocusExtent,
+  getFocusGeometry,
+  inertiaOffset,
+  isFitTransform,
+  isThemeName,
+  joinData,
+  preserveView,
+  relativeTransform,
+  releaseVelocity,
+  resolveControls,
+  resolveDrillData,
+  resolveLabels,
+  resolveTheme,
+  resolveVariant,
+  resolveZoomOptions,
+  resolveZoomTarget,
+  savedCameraFor,
+  themeToCssVars,
+  toFeatureCollection,
+  toViewState,
+  unwrapGeography,
+  validateLevels,
+  zoomKeyAction
+} from "./chunk-R3XS6XPP.js";
+
+// src/react/use-choropleth.ts
+import {
+  useEffect as useEffect6,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useRef as useRef5,
+  useState as useState5
+} from "react";
+import { geoPath } from "d3-geo";
+
+// src/react/drill-levels.ts
+var defineDrillLevels = (levels) => {
+  validateLevels(levels);
+  return levels;
+};
+var buildDrillEvent = ({
+  from,
+  to,
+  item
+}) => {
+  const direction = drillDirectionBetween(from, to);
+  if (direction === null) return null;
+  return {
+    direction,
+    from: contextOf(from),
+    to: contextOf(to),
+    ...item === void 0 ? {} : { item }
+  };
+};
+var isDrillable = (levels, depth, item) => {
+  const level = levels[depth];
+  if (level === void 0 || depth >= levels.length - 1) return false;
+  const { canDrill } = level;
+  if (canDrill === void 0) return true;
+  return typeof canDrill === "function" ? canDrill(item) : canDrill;
+};
+var sourceDepth = (levels, depth) => {
+  let source = Math.min(depth, levels.length - 1);
+  while (source > 0 && levels[source]?.geography === "inherit") source--;
+  return source;
+};
+
+// src/react/use-drill-choreography.ts
+import { useEffect, useRef } from "react";
+
+// src/react/env.ts
+var isProduction = () => {
+  try {
+    return process.env.NODE_ENV === "production";
+  } catch {
+    return false;
+  }
+};
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+// src/react/use-drill-choreography.ts
+var REVEAL_MS = 450;
+var lastOf = (items) => items[items.length - 1];
+var useDrillChoreography = ({
+  engine,
+  store,
+  shownChain,
+  chainFor
+}) => {
+  const { active, machine, dispatch } = engine;
+  const latest = useRef({ engine, shownChain, chainFor });
+  useEffect(() => {
+    latest.current = { engine, shownChain, chainFor };
+  });
+  const flying = machine.phase === "flying";
+  const flightId = machine.flightId;
+  useEffect(() => {
+    if (!active || !flying) return;
+    const { engine: current, shownChain: shown, chainFor: build } = latest.current;
+    const state = current.machine;
+    const finish = (completed) => dispatch({ type: "FLIGHT_END", id: flightId, completed });
+    let destination;
+    if (state.direction === "up") {
+      destination = state.returnCamera ?? savedCameraFor(state, state.path) ?? FIT_TRANSFORM;
+    } else {
+      const levels = current.chainLevelsFor(state.path);
+      const next = levels === null ? null : build(levels, state.path);
+      const from = lastOf(shown?.projections ?? []);
+      const to = lastOf(next?.projections ?? []);
+      destination = from === void 0 || to === void 0 || next?.missing != null ? null : relativeTransform(from, to);
+    }
+    const api = store.getZoom();
+    if (api === null || destination === null) {
+      finish(true);
+      return;
+    }
+    const flight = { cancelled: false };
+    void api.flyTo(destination).then(({ completed }) => {
+      if (!flight.cancelled) finish(completed);
+    });
+    return () => {
+      flight.cancelled = true;
+    };
+  }, [active, flying, flightId, store, dispatch]);
+  const revealing = machine.phase === "revealing";
+  useEffect(() => {
+    if (!active || !revealing) return;
+    const timer = setTimeout(
+      () => dispatch({ type: "REVEAL_END" }),
+      prefersReducedMotion() ? 0 : REVEAL_MS
+    );
+    return () => clearTimeout(timer);
+  }, [active, revealing, dispatch]);
+};
+
+// src/react/map-item.ts
+var ROOT_LEVEL = { id: "root", depth: 0 };
+var isSameItem = (a, b) => a === b || a !== null && b !== null && a.kind === b.kind && a.id === b.id;
+
+// src/react/map-store.ts
+import { useSyncExternalStore } from "react";
+var GESTURE_HINT_MS = 1500;
+var INITIAL_STATE = {
+  hovered: null,
+  pointer: null,
+  pointerType: "mouse",
+  interacting: false,
+  camera: FIT_TRANSFORM,
+  gestureHint: null
+};
+var createMapStore = () => {
+  let state = INITIAL_STATE;
+  let hintTimer;
+  let zoomApi = null;
+  let drillApi = null;
+  let fallbackView = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const store = {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    getState: () => state,
+    setState: (patch) => {
+      const changed = Object.keys(patch).some(
+        (key) => !Object.is(state[key], patch[key])
+      );
+      if (!changed) return;
+      state = { ...state, ...patch };
+      for (const listener of listeners) listener();
+    },
+    showGestureHint: (kind) => {
+      clearTimeout(hintTimer);
+      store.setState({ gestureHint: kind });
+      hintTimer = setTimeout(() => store.setState({ gestureHint: null }), GESTURE_HINT_MS);
+    },
+    dispose: () => clearTimeout(hintTimer),
+    registerZoom: (api) => {
+      zoomApi = api;
+    },
+    getZoom: () => zoomApi,
+    registerDrill: (api) => {
+      drillApi = api;
+    },
+    getDrill: () => drillApi,
+    registerFallbackView: (read) => {
+      fallbackView = read;
+    },
+    getFallbackView: () => fallbackView?.() ?? null
+  };
+  return store;
+};
+var useMapStore = (store, selector) => useSyncExternalStore(
+  store.subscribe,
+  () => selector(store.getState()),
+  () => selector(INITIAL_STATE)
+);
+
+// src/react/use-container-size.ts
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+var DEFAULT_WIDTH = 960;
+var DEFAULT_ASPECT_RATIO = 960 / 500;
+var useContainerSize = ({
+  initial,
+  aspectRatio = DEFAULT_ASPECT_RATIO,
+  useContainerHeight = false
+} = {}) => {
+  const ref = useRef2(null);
+  const [measured, setMeasured] = useState(null);
+  useEffect2(() => {
+    const element = ref.current;
+    if (element === null || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry === void 0) return;
+      const { width, height: height2 } = entry.contentRect;
+      if (!(width > 0)) return;
+      setMeasured(
+        (prev) => prev?.width === width && prev.height === height2 ? prev : { width, height: height2 }
+      );
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  if (measured === null) {
+    return { ref, ...initial ?? { width: DEFAULT_WIDTH, height: DEFAULT_WIDTH / aspectRatio } };
+  }
+  const height = useContainerHeight && measured.height > 0 ? measured.height : measured.width / aspectRatio;
+  return { ref, width: measured.width, height };
+};
+
+// src/react/use-drill-engine.ts
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect4,
+  useMemo as useMemo2,
+  useReducer,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+
+// src/react/use-drill-down.ts
+import { useCallback, useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState2, useSyncExternalStore as useSyncExternalStore2 } from "react";
+var createDrillBridge = () => {
+  let status = "idle";
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    getStatus: () => status,
+    setStatus: (next) => {
+      if (next === status) return;
+      status = next;
+      listeners.forEach((listener) => listener());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => void listeners.delete(listener);
+    }
+  };
+};
+var DRILL_BRIDGE = /* @__PURE__ */ Symbol("choropleth.drillBridge");
+var samePath = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+var warn = (message) => {
+  if (!isProduction()) console.warn(`[choropleth] useDrillDown: ${message}`);
+};
+var useDrillDown = ({
+  levels,
+  path: controlledPath,
+  defaultPath,
+  onPathChange,
+  getLabel
+}) => {
+  useMemo(() => validateLevels(levels), [levels]);
+  const controlled = controlledPath !== void 0;
+  const [innerPath, setInnerPath] = useState2(
+    () => clampPath(defaultPath ?? [], levels.length).path
+  );
+  const [bridge] = useState2(createDrillBridge);
+  const requested = controlled ? controlledPath : innerPath;
+  const { path, clamped } = clampPath(requested, levels.length);
+  const pathKey = JSON.stringify(requested);
+  useEffect3(() => {
+    if (clamped) {
+      warn(
+        `path ${pathKey} is deeper than the ${levels.length} level(s) allow; it was truncated to ${JSON.stringify(path)}.`
+      );
+    }
+  }, [clamped, pathKey]);
+  const latest = useRef3({ path, levels: levels.length, controlled, onPathChange });
+  useEffect3(() => {
+    latest.current = { path, levels: levels.length, controlled, onPathChange };
+  });
+  const commit = useCallback((next) => {
+    const current = latest.current;
+    const { path: valid, clamped: tooDeep } = clampPath(next, current.levels);
+    if (tooDeep) {
+      warn(
+        `cannot drill to ${JSON.stringify(next)}: only ${current.levels} level(s) are defined (max depth ${current.levels - 1}).`
+      );
+    }
+    if (samePath(valid, current.path)) return valid;
+    latest.current = { ...current, path: valid };
+    if (!current.controlled) setInnerPath(valid);
+    current.onPathChange?.(valid);
+    return valid;
+  }, []);
+  const drillDown = useCallback(
+    (id) => commit([...latest.current.path, id]),
+    [commit]
+  );
+  const drillUp = useCallback(
+    (steps = 1) => {
+      const up = Number.isFinite(steps) ? Math.max(0, Math.floor(steps)) : 0;
+      const { path: current } = latest.current;
+      return commit(current.slice(0, Math.max(0, current.length - up)));
+    },
+    [commit]
+  );
+  const drillTo = commit;
+  const reset = useCallback(() => commit([]), [commit]);
+  const status = useSyncExternalStore2(bridge.subscribe, bridge.getStatus, bridge.getStatus);
+  const rootLabel = levels[0]?.label ?? levels[0]?.id ?? "";
+  const breadcrumbs = useMemo(
+    () => buildBreadcrumbs({
+      path,
+      rootLabel,
+      getLabel: getLabel === void 0 ? void 0 : ({ id, depth }) => getLabel({ id, depth })
+    }),
+    // `getLabel` is usually an inline function: its identity must not recompute the breadcrumbs on every render.
+    // The route (`pathKey`) and the root do.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [pathKey, rootLabel]
+  );
+  const level = levels[path.length] ?? levels[levels.length - 1];
+  const context = useMemo(() => contextOf(path), [path]);
+  return useMemo(
+    () => ({
+      levels,
+      path,
+      context,
+      level,
+      breadcrumbs,
+      status,
+      canDrillUp: path.length > 0,
+      drillDown,
+      drillUp,
+      drillTo,
+      reset,
+      [DRILL_BRIDGE]: bridge
+    }),
+    [levels, path, context, level, breadcrumbs, status, drillDown, drillUp, drillTo, reset, bridge]
+  );
+};
+var isDrillController = (drill) => !Array.isArray(drill);
+
+// src/react/use-drill-engine.ts
+var REJECTED_AFTER_MS = 1e3;
+var defaultFeatureId = (feature) => feature.id === void 0 ? void 0 : String(feature.id);
+var collectionIds = /* @__PURE__ */ new WeakMap();
+var nextCollectionId = 1;
+var idOfCollection = (collection) => {
+  if (collection === void 0) return "-";
+  let id = collectionIds.get(collection);
+  if (id === void 0) {
+    id = nextCollectionId++;
+    collectionIds.set(collection, id);
+  }
+  return String(id);
+};
+var samePath2 = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+var collections = /* @__PURE__ */ new WeakMap();
+var filtered = /* @__PURE__ */ new WeakMap();
+var featureCollectionOf = (geography, objectName) => {
+  const byName = collections.get(geography) ?? /* @__PURE__ */ new Map();
+  collections.set(geography, byName);
+  const name = objectName ?? "";
+  const found = byName.get(name);
+  if (found !== void 0) return found;
+  const created = toFeatureCollection({ geography, objectName });
+  byName.set(name, created);
+  return created;
+};
+var stableFilter = (raw, keep) => {
+  const kept = raw.features.flatMap((feature, index) => keep(feature) ? [index] : []);
+  if (kept.length === raw.features.length) return raw;
+  const signature = kept.join(",");
+  const bySignature = filtered.get(raw) ?? /* @__PURE__ */ new Map();
+  filtered.set(raw, bySignature);
+  const found = bySignature.get(signature);
+  if (found !== void 0) return found;
+  const created = {
+    ...raw,
+    features: kept.flatMap((index) => {
+      const feature = raw.features[index];
+      return feature === void 0 ? [] : [feature];
+    })
+  };
+  bySignature.set(signature, created);
+  return created;
+};
+var isSync = (input) => typeof input !== "function" && !("then" in input);
+var resolveInput = (input) => isSync(input) ? Promise.resolve(input) : (typeof input === "function" ? input() : input).then(unwrapGeography);
+var fixedGeography = (level) => {
+  const { geography } = level;
+  return typeof geography === "function" || geography === "inherit" || !isSync(geography) ? void 0 : geography;
+};
+var NO_LEVELS = [
+  { id: "root", geography: { type: "FeatureCollection", features: [] } }
+];
+var EMPTY_PATH = [];
+var EMPTY_COLLECTION = { type: "FeatureCollection", features: [] };
+var useDrillEngine = ({
+  drill,
+  data,
+  filterFeatures,
+  store,
+  onDrill,
+  onDrillEnd,
+  onDrillError
+}) => {
+  const active = drill !== void 0;
+  const internal = useDrillDown({
+    levels: drill === void 0 || isDrillController(drill) ? NO_LEVELS : drill
+  });
+  const controller = drill === void 0 ? null : isDrillController(drill) ? drill : internal;
+  const levels = controller?.levels ?? NO_LEVELS;
+  const target = controller?.path ?? EMPTY_PATH;
+  const targetKey = JSON.stringify(target);
+  const [machine, dispatch] = useReducer(drillReducer, target, createDrillState);
+  const [cache] = useState3(() => createLruCache());
+  const [version, setVersion] = useState3(0);
+  const [failed, setFailed] = useState3(/* @__PURE__ */ new Map());
+  const pending = useRef4(/* @__PURE__ */ new Set());
+  const sourceOf = useCallback2((depth2) => sourceDepth(levels, depth2), [levels]);
+  const keyAt = (depth2, path) => geographyKeyFor(levels, path.slice(0, sourceOf(depth2)));
+  const geographyAt = (depth2, path) => {
+    const level2 = levels[sourceOf(depth2)];
+    if (level2 === void 0) return void 0;
+    return fixedGeography(level2) ?? cache.get(keyAt(depth2, path));
+  };
+  const mounted = useRef4(false);
+  useEffect4(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const request = (path, prefetching, retryFailed = false) => {
+    for (let depth2 = 0; depth2 <= path.length; depth2++) {
+      const source = sourceOf(depth2);
+      const level2 = levels[source];
+      if (level2 === void 0 || fixedGeography(level2) !== void 0) continue;
+      const key = keyAt(depth2, path);
+      if (cache.has(key) || pending.current.has(key)) continue;
+      if (failed.has(key) && !retryFailed) continue;
+      const input = typeof level2.geography === "function" ? level2.geography(contextOf(path.slice(0, source))) : level2.geography;
+      if (input === "inherit") continue;
+      pending.current.add(key);
+      resolveInput(input).then(
+        (loaded) => {
+          pending.current.delete(key);
+          cache.set(key, loaded);
+          if (mounted.current) setVersion((v) => v + 1);
+        },
+        (error) => {
+          pending.current.delete(key);
+          if (!mounted.current) return;
+          if (prefetching) setVersion((v) => v + 1);
+          else setFailed((previous2) => new Map(previous2).set(key, error));
+        }
+      );
+    }
+  };
+  const latestRequest = useRef4(request);
+  useEffect4(() => {
+    latestRequest.current = request;
+  });
+  const prefetch = useCallback2(
+    (path) => {
+      if (active) latestRequest.current(path, true);
+    },
+    [active]
+  );
+  const requestedTarget = useRef4("");
+  useEffect4(() => {
+    const retryFailed = requestedTarget.current !== targetKey;
+    requestedTarget.current = targetKey;
+    if (active) request(target, false, retryFailed);
+  }, [active, targetKey, levels, version]);
+  const keepFor = (depth2, path) => {
+    const source = sourceOf(depth2);
+    return (feature) => {
+      for (let k = source; k <= depth2; k++) {
+        const level2 = levels[k];
+        if (level2?.filterFeatures?.(feature, contextOf(path.slice(0, k))) === false) return false;
+      }
+      return source !== 0 || filterFeatures === void 0 || filterFeatures(feature);
+    };
+  };
+  const featuresAt = (depth2, path) => {
+    const geography2 = geographyAt(depth2, path);
+    if (geography2 === void 0) return void 0;
+    const raw = featureCollectionOf(geography2, levels[sourceOf(depth2)]?.objectName);
+    return stableFilter(raw, keepFor(depth2, path));
+  };
+  const featuresFor = (path) => Array.from({ length: path.length + 1 }, (_, d) => featuresAt(d, path));
+  const chainLevelOf = (depth2, fc) => ({
+    features: fc.features,
+    idOf: levels[depth2]?.getFeatureId ?? levels[sourceOf(depth2)]?.getFeatureId ?? defaultFeatureId
+  });
+  const chainLevelsFor = (path) => {
+    const collectionsByDepth = featuresFor(path);
+    const parents = collectionsByDepth.slice(0, path.length);
+    if (parents.some((fc) => fc === void 0)) return null;
+    return collectionsByDepth.map((fc, depth2) => chainLevelOf(depth2, fc ?? EMPTY_COLLECTION));
+  };
+  const targetFeatures = active ? featuresFor(target) : [];
+  const targetGeometry = active && targetFeatures.every((f) => f !== void 0);
+  const targetEmpty = targetGeometry && (targetFeatures[target.length]?.features.length ?? 0) === 0;
+  const liveData = resolveDrillData(data, contextOf(target));
+  const targetReady = targetGeometry && !targetEmpty && liveData !== void 0;
+  const shownPath = machine.phase === "revealing" ? machine.path : machine.settledPath;
+  const shownKey = JSON.stringify(shownPath);
+  const shownIsTarget = samePath2(shownPath, target);
+  const shownFeatures = active ? shownIsTarget ? targetFeatures : featuresFor(shownPath) : [];
+  const hasShown = active && shownFeatures.every((f) => f !== void 0);
+  const [latest] = useState3(() => ({
+    data: void 0,
+    path: shownPath,
+    chain: [],
+    fills: /* @__PURE__ */ new Map()
+  }));
+  const rememberFills = useCallback2(
+    (fills) => {
+      latest.fills = fills;
+    },
+    [latest]
+  );
+  const chainSig = `${shownKey}|${shownFeatures.map(idOfCollection).join(",")}`;
+  const chain = useMemo2(
+    () => shownFeatures.flatMap((fc, depth2) => fc === void 0 ? [] : [chainLevelOf(depth2, fc)]),
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [chainSig, levels]
+  );
+  const [seen, setSeen] = useState3(shownPath);
+  const [previous, setPrevious] = useState3(null);
+  if (!samePath2(seen, shownPath)) {
+    setSeen(shownPath);
+    setPrevious({ path: latest.path, chain: latest.chain, fills: latest.fills });
+  }
+  useEffect4(() => {
+    latest.path = shownPath;
+    latest.chain = chain;
+    if (shownIsTarget && liveData !== void 0) latest.data = liveData;
+  });
+  const depth = shownPath.length;
+  const level = active ? levels[depth] ?? null : null;
+  const sourceLevel = levels[sourceOf(depth)];
+  const features = hasShown ? shownFeatures[depth] : void 0;
+  const geography = hasShown ? geographyAt(depth, shownPath) : void 0;
+  const emptyError = useMemo2(() => {
+    if (!targetEmpty) return null;
+    const parent = target.at(-1) ?? null;
+    const id = levels[target.length]?.id ?? "?";
+    return new Error(
+      `[choropleth] drill level "${id}" has 0 features for "${parent}". Hint: return false from canDrill for it.`
+    );
+  }, [targetEmpty, targetKey, levels]);
+  const failure = (() => {
+    if (!active) return null;
+    for (let d = 0; d <= target.length; d++) {
+      const error = failed.get(keyAt(d, target));
+      if (error !== void 0) return { error };
+    }
+    return emptyError === null ? null : { error: emptyError };
+  })();
+  const latestProps = useRef4({ onDrill, onDrillEnd, onDrillError, controller, target, machine });
+  useEffect4(() => {
+    latestProps.current = { onDrill, onDrillEnd, onDrillError, controller, target, machine };
+  });
+  const waiters = useRef4([]);
+  const finish = (waiter, completed) => {
+    clearTimeout(waiter.timer);
+    waiters.current = waiters.current.filter((w) => w !== waiter);
+    waiter.resolve({ completed });
+  };
+  const arrived = (waiter) => {
+    const { target: wanted, machine: current } = latestProps.current;
+    if (!samePath2(wanted, waiter.target)) return false;
+    waiter.seen = true;
+    return current.phase === "idle" && samePath2(current.settledPath, waiter.target);
+  };
+  const navigate = useCallback2((run) => {
+    const ctl = latestProps.current.controller;
+    if (ctl === null) return Promise.resolve({ completed: false });
+    const wanted = run(ctl);
+    return new Promise((resolve) => {
+      const waiter = { target: wanted, resolve, seen: false, timer: void 0 };
+      waiter.timer = setTimeout(() => {
+        if (!waiter.seen) finish(waiter, false);
+      }, REJECTED_AFTER_MS);
+      for (const other of waiters.current) {
+        if (!samePath2(other.target, wanted)) finish(other, false);
+      }
+      waiters.current.push(waiter);
+      if (arrived(waiter)) finish(waiter, true);
+    });
+  }, []);
+  useEffect4(() => {
+    for (const waiter of waiters.current) {
+      if (arrived(waiter)) finish(waiter, true);
+      else if (waiter.seen && !samePath2(target, waiter.target)) finish(waiter, false);
+    }
+  });
+  useEffect4(
+    () => () => {
+      for (const waiter of waiters.current) finish(waiter, false);
+    },
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const dispatched = useRef4(target);
+  const machineAtDispatch = useRef4(machine);
+  const clicked = useRef4(void 0);
+  const noteItem = useCallback2((item) => {
+    clicked.current = item;
+  }, []);
+  const settledKey = JSON.stringify(machine.settledPath);
+  useEffect4(() => {
+    if (!active || controller === null) return;
+    if (samePath2(dispatched.current, target)) return;
+    const direction = classifyDrill(machine.settledPath, target);
+    const eager = direction === "down" || direction === "lateral" || direction === "equal";
+    if (!eager && !targetReady) return;
+    dispatched.current = target;
+    machineAtDispatch.current = machine;
+    const view = store.getZoom()?.getView();
+    dispatch({
+      type: "DRILL",
+      to: target,
+      cached: targetReady,
+      ...view === void 0 ? {} : { camera: { k: view.k, x: view.x, y: view.y } }
+    });
+  }, [active, targetKey, targetReady, settledKey]);
+  useEffect4(() => {
+    if (!active || machine.geometry !== "pending" || machine.geometryKey === null) return;
+    if (targetReady && samePath2(machine.path, target)) {
+      dispatch({ type: "GEOMETRY_READY", key: machine.geometryKey });
+    }
+  }, [active, targetReady, machine.geometry, machine.geometryKey]);
+  const reported = useRef4(null);
+  useEffect4(() => {
+    if (!active || failure === null || reported.current === failure.error) return;
+    reported.current = failure.error;
+    const { onDrillError: report, controller: ctl, machine: current } = latestProps.current;
+    const wanted = latestProps.current.target;
+    if (report !== void 0) report({ error: failure.error, ctx: contextOf(wanted) });
+    else if (!isProduction()) {
+      const reason = failure.error instanceof Error ? failure.error.message : String(failure.error);
+      console.error(
+        reason.startsWith("[choropleth]") ? reason : `[choropleth] drill: failed to load the geometry for ${JSON.stringify(wanted)}: ${reason}`
+      );
+    }
+    if (samePath2(dispatched.current, wanted) && machine.geometryKey !== null) {
+      dispatch({ type: "GEOMETRY_ERROR", key: machine.geometryKey });
+    } else if (ctl !== null) {
+      dispatched.current = current.settledPath;
+      ctl.drillTo(current.settledPath);
+    }
+  }, [active, failure]);
+  const machinePathKey = JSON.stringify(machine.path);
+  useEffect4(() => {
+    if (!active || controller === null) return;
+    if (machine === machineAtDispatch.current) return;
+    if (!samePath2(dispatched.current, target) || samePath2(machine.path, target)) return;
+    dispatched.current = machine.path;
+    machineAtDispatch.current = machine;
+    controller.drillTo(machine.path);
+  }, [active, machinePathKey, targetKey]);
+  const lastTarget = useRef4(target);
+  useEffect4(() => {
+    if (!active || samePath2(lastTarget.current, target)) return;
+    const event = buildDrillEvent({
+      from: lastTarget.current,
+      to: target,
+      item: clicked.current
+    });
+    lastTarget.current = target;
+    clicked.current = void 0;
+    if (event !== null) latestProps.current.onDrill?.(event);
+  }, [active, targetKey]);
+  const lastEnd = useRef4(machine.settledPath);
+  useEffect4(() => {
+    if (!active || machine.phase !== "idle") return;
+    const previousEnd = lastEnd.current;
+    if (samePath2(previousEnd, machine.settledPath)) return;
+    lastEnd.current = machine.settledPath;
+    const event = buildDrillEvent({ from: previousEnd, to: machine.settledPath });
+    if (event !== null) latestProps.current.onDrillEnd?.(event);
+  }, [active, machine.phase, settledKey]);
+  const status = !active ? "loading" : hasShown ? "ready" : failure !== null ? "error" : "loading";
+  const bridge = controller?.[DRILL_BRIDGE];
+  const phase = machine.phase;
+  useEffect4(() => {
+    bridge?.setStatus(phase);
+  }, [bridge, phase]);
+  return {
+    active,
+    controller,
+    levels,
+    shownPath,
+    shownKey,
+    depth,
+    level,
+    geography,
+    status,
+    objectName: sourceLevel?.objectName,
+    features,
+    levelFeatures: shownFeatures,
+    getFeatureId: level?.getFeatureId ?? sourceLevel?.getFeatureId,
+    chain,
+    chainSig,
+    filterFeatures: active && hasShown ? keepFor(depth, shownPath) : void 0,
+    rootFeatures: hasShown ? shownFeatures[0] : void 0,
+    data: !active ? void 0 : shownIsTarget ? liveData : latest.data,
+    noteItem,
+    machine,
+    dispatch,
+    previous,
+    rememberFills,
+    chainLevelsFor,
+    target,
+    prefetch,
+    navigate
+  };
+};
+
+// src/react/use-geography.ts
+import { useEffect as useEffect5, useState as useState4 } from "react";
+var promisesByKey = /* @__PURE__ */ new Map();
+var promisesByIdentity = /* @__PURE__ */ new WeakMap();
+var valuesByKey = /* @__PURE__ */ new Map();
+var valuesByIdentity = /* @__PURE__ */ new WeakMap();
+var isDeferred = (input) => typeof input === "function" || "then" in input;
+var peek = (input, key) => {
+  if (!isDeferred(input)) return input;
+  return key === void 0 ? valuesByIdentity.get(input) : valuesByKey.get(key);
+};
+var load = (input, key) => {
+  const cached = key === void 0 ? promisesByIdentity.get(input) : promisesByKey.get(key);
+  if (cached !== void 0) return cached;
+  const promise = (typeof input === "function" ? input() : input).then((module) => {
+    const value = unwrapGeography(module);
+    if (key === void 0) valuesByIdentity.set(input, value);
+    else valuesByKey.set(key, value);
+    return value;
+  });
+  if (key === void 0) promisesByIdentity.set(input, promise);
+  else promisesByKey.set(key, promise);
+  promise.catch(() => {
+    if (key === void 0) promisesByIdentity.delete(input);
+    else promisesByKey.delete(key);
+  });
+  return promise;
+};
+var useGeography = (input, key, onError) => {
+  const ready = peek(input, key);
+  const [loaded, setLoaded] = useState4(void 0);
+  const [failed, setFailed] = useState4(false);
+  useEffect5(() => {
+    if (ready !== void 0 || !isDeferred(input)) return;
+    let cancelled = false;
+    load(input, key).then(
+      (value) => {
+        if (cancelled) return;
+        setFailed(false);
+        setLoaded(value);
+      },
+      (reason) => {
+        if (cancelled) return;
+        const error = reason instanceof Error ? reason : new Error(String(reason));
+        setFailed(true);
+        if (onError === void 0)
+          console.error(`[choropleth] Failed to load geography: ${error.message}`);
+        else onError(error);
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [input, key, ready]);
+  const geography = ready ?? loaded;
+  if (geography !== void 0) return { geography, status: "ready" };
+  return { geography: void 0, status: failed ? "error" : "loading" };
+};
+var clearGeographyCache = () => {
+  promisesByKey.clear();
+  valuesByKey.clear();
+};
+
+// src/react/use-choropleth.ts
+var FALLBACK_POINT_RADIUS = 4;
+var useChoropleth = (rawOptions) => {
+  const [store] = useState5(createMapStore);
+  const engine = useDrillEngine({
+    drill: rawOptions.drill,
+    data: rawOptions.data,
+    filterFeatures: rawOptions.filterFeatures,
+    store,
+    onDrill: rawOptions.onDrill,
+    onDrillEnd: rawOptions.onDrillEnd,
+    onDrillError: rawOptions.onDrillError
+  });
+  const encoding = engine.level?.encoding;
+  const options = engine.active ? {
+    ...rawOptions,
+    ...encoding,
+    getId: encoding?.getId ?? rawOptions.getId,
+    data: engine.data,
+    getFeatureId: engine.getFeatureId ?? rawOptions.getFeatureId
+  } : { ...rawOptions, data: resolveDrillData(rawOptions.data, contextOf([])) };
+  const { getId, getFeatureId, projection, fallbackPoints } = options;
+  const isBubble = options.variant === "bubble";
+  const labels = resolveLabels(options.labels);
+  const single = useGeography(
+    engine.active ? NO_GEOGRAPHY : options.geography ?? NO_GEOGRAPHY,
+    options.geographyKey,
+    options.onGeographyError
+  );
+  if (!engine.active && options.geography === void 0) {
+    throw new Error(
+      "[choropleth] Missing `geography`: pass `geography` (TopoJSON/GeoJSON) or `drill` (a list of levels)."
+    );
+  }
+  const geography = engine.active ? engine.geography : single.geography;
+  const status = engine.active ? engine.status : single.status;
+  const objectName = engine.active ? engine.objectName : options.objectName;
+  const filterFeatures = engine.active ? engine.filterFeatures : options.filterFeatures;
+  const allFeatures = useMemo3(
+    () => engine.active ? engine.features ?? EMPTY_FEATURES : geography === void 0 ? EMPTY_FEATURES : toFeatureCollection({ geography, objectName }),
+    // `engine.features` already comes filtered and is stable (the engine's caches).
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [engine.active, engine.features, geography, objectName]
+  );
+  const keptIndexes = filterFeatures === void 0 ? null : allFeatures.features.flatMap((f, index) => filterFeatures(f) ? [index] : []);
+  const keptKey = keptIndexes === null ? "" : keptIndexes.join(",");
+  const features = useMemo3(
+    () => keptIndexes === null ? allFeatures : {
+      ...allFeatures,
+      features: keptIndexes.flatMap((index) => {
+        const feature = allFeatures.features[index];
+        return feature === void 0 ? [] : [feature];
+      })
+    },
+    // `keptIndexes` is summarized in `keptKey` (see above).
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [allFeatures, keptKey]
+  );
+  const bordersGeometry = useMemo3(
+    () => geography === void 0 ? null : createBorders({ geography, objectName, filterFeatures }),
+    // `filterFeatures` is summarized in `keptKey`: its identity must not relaunch the computation.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [geography, objectName, keptKey]
+  );
+  const autoAspect = useMemo3(
+    () => options.aspectRatio === "auto" ? computeAspectRatio({
+      name: projection,
+      // With drill the proportion is the root's: it must not change when going down a level.
+      featureCollection: (engine.active ? engine.rootFeatures : void 0) ?? features
+    }) : void 0,
+    [options.aspectRatio, projection, features, engine.active, engine.rootFeatures]
+  );
+  const measured = useContainerSize({
+    aspectRatio: options.aspectRatio === "auto" ? autoAspect : options.aspectRatio
+  });
+  const width = options.width ?? measured.width;
+  const height = options.height ?? measured.height;
+  const rebasePadding = typeof options.zoom === "object" ? options.zoom.padding ?? 24 : 24;
+  const drillFocusBounds = engine.levels.reduce(
+    (all, level) => ({ ...all, ...level.focusBounds }),
+    { ...DEFAULT_FOCUS_BOUNDS, ...options.focusBounds }
+  );
+  const focusKey = JSON.stringify(drillFocusBounds);
+  const chain = useMemo3(
+    () => engine.active && engine.chain.length > 0 && width > 0 && height > 0 ? buildProjectionChain({
+      levels: engine.chain,
+      path: engine.shownPath,
+      name: projection,
+      width,
+      height,
+      padding: rebasePadding,
+      focusBounds: drillFocusBounds
+    }) : null,
+    // `chainSig` summarizes the content of `engine.chain`; `focusKey`, that of `drillFocusBounds`.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [engine.active, engine.chainSig, projection, width, height, rebasePadding, focusKey]
+  );
+  const chainMissing = chain?.missing ?? null;
+  useEffect6(() => {
+    if (chainMissing !== null && !isProduction()) {
+      console.warn(
+        `[choropleth] drill: could not frame region "${chainMissing}" (it is not in its parent level, or it has no extent). The map keeps the parent's framing.`
+      );
+    }
+  }, [chainMissing]);
+  const chainFor = (levels, path) => buildProjectionChain({
+    levels,
+    path,
+    name: projection,
+    width,
+    height,
+    padding: rebasePadding,
+    focusBounds: drillFocusBounds
+  });
+  useDrillChoreography({ engine, store, shownChain: chain, chainFor });
+  const { machine, previous } = engine;
+  const leaving = machine.layers.some((layer) => layer.role === "exiting");
+  const previousChain = useMemo3(
+    () => engine.active && previous !== null && width > 0 && height > 0 && (leaving || machine.direction === "up") ? buildProjectionChain({
+      levels: [...previous.chain],
+      path: previous.path,
+      name: projection,
+      width,
+      height,
+      padding: rebasePadding,
+      focusBounds: drillFocusBounds
+    }) : null,
+    // `previous` changes only when the level changes; `focusKey` summarizes `drillFocusBounds`.
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [
+      engine.active,
+      previous,
+      leaving,
+      machine.direction,
+      projection,
+      width,
+      height,
+      rebasePadding,
+      focusKey
+    ]
+  );
+  const activeProjection = chain?.projections[chain.projections.length - 1];
+  const layersKey = machine.layers.map((layer) => `${layer.key}:${layer.role}`).join("|");
+  const contextMode = engine.level?.context ?? "siblings";
+  const drillLayers = useMemo3(() => {
+    if (!engine.active || chain === null || activeProjection === void 0) return [];
+    const views = [];
+    const activeSource = sourceDepth(engine.levels, engine.depth);
+    for (const layer of machine.layers) {
+      let features2;
+      let projectionOf;
+      let idOf2;
+      let focusId;
+      if (layer.role === "context") {
+        if (contextMode === "none" || layer.depth >= engine.depth) continue;
+        if (sourceDepth(engine.levels, layer.depth) === activeSource) continue;
+        features2 = engine.levelFeatures[layer.depth]?.features;
+        projectionOf = chain.projections[layer.depth];
+        idOf2 = engine.chain[layer.depth]?.idOf;
+        focusId = engine.shownPath[layer.depth];
+      } else if (layer.role === "exiting") {
+        features2 = previous?.chain[layer.depth]?.features;
+        projectionOf = previousChain?.projections[layer.depth];
+        idOf2 = previous?.chain[layer.depth]?.idOf;
+      } else {
+        continue;
+      }
+      if (features2 === void 0 || projectionOf === void 0 || idOf2 === void 0) continue;
+      const path = geoPath(projectionOf);
+      const level = engine.levels[layer.depth];
+      const paths2 = features2.flatMap((feature) => {
+        const d = path(feature);
+        if (d == null) return [];
+        const id = idOf2(feature);
+        const drillable = layer.role === "context" && id !== void 0 && isDrillable(engine.levels, layer.depth, {
+          kind: "region",
+          id,
+          feature,
+          datum: void 0,
+          level: { id: level?.id ?? ROOT_LEVEL.id, depth: layer.depth },
+          drillable: true
+        });
+        const fill = layer.role === "exiting" && id !== void 0 ? previous?.fills.get(id) : void 0;
+        return [{ id, d, focus: id !== void 0 && id === focusId, drillable, fill }];
+      });
+      views.push({
+        key: layer.key,
+        role: layer.role,
+        depth: layer.depth,
+        transform: relativeTransform(projectionOf, activeProjection),
+        paths: paths2
+      });
+    }
+    return views;
+  }, [engine.active, chain, previousChain, previous, layersKey, engine.chainSig, contextMode]);
+  const controller = engine.controller;
+  const drillNav = useMemo3(() => {
+    if (!engine.active || controller === null) return null;
+    const rootLabel = engine.levels[0]?.label ?? labels.breadcrumbRoot;
+    const items = controller.breadcrumbs.map((crumb) => {
+      let label = crumb.label;
+      if (crumb.id === null) label = rootLabel;
+      else if (crumb.label === crumb.id) {
+        const parent = engine.chain[crumb.depth - 1];
+        const feature = parent?.features.find((f) => parent.idOf(f) === crumb.id);
+        label = (feature === void 0 ? void 0 : nameOf(feature)) ?? crumb.id;
+      }
+      return {
+        depth: crumb.depth,
+        id: crumb.id,
+        label,
+        current: crumb.depth === controller.path.length
+      };
+    });
+    return {
+      items,
+      canDrillUp: controller.canDrillUp,
+      drillTo: (depth) => controller.drillTo(controller.path.slice(0, depth)),
+      drillUp: (steps) => controller.drillUp(steps)
+    };
+  }, [
+    engine.active,
+    controller,
+    controller?.path,
+    engine.chainSig,
+    engine.levels,
+    labels.breadcrumbRoot
+  ]);
+  const drillFocusId = engine.active && (machine.phase === "flying" || machine.phase === "loading") && machine.direction !== "up" && machine.direction !== null ? machine.path.at(-1) ?? null : null;
+  const { paths, bordersPath, anchors, project, invert, toPath } = useMemo3(() => {
+    const geoProjection = chain?.projections[chain.projections.length - 1] ?? createProjection({
+      name: projection,
+      width,
+      height,
+      featureCollection: features
+    });
+    const toPath2 = geoPath(geoProjection);
+    const toPoint = (coordinates) => {
+      const at = geoProjection([...coordinates]);
+      return at !== null && Number.isFinite(at[0]) && Number.isFinite(at[1]) ? at : null;
+    };
+    return {
+      paths: features.features.map((f) => toPath2(f)),
+      bordersPath: bordersGeometry === null ? null : toPath2(bordersGeometry),
+      // Anchors are only computed for `bubble` (the only thing that uses them). `geoPath`'s centroid counts
+      // distant territories (France's bubble would land in the Atlantic): the anchor is the pole of
+      // inaccessibility of the main body. The centroid remains as a fallback.
+      anchors: isBubble ? features.features.map((f) => {
+        const anchor = getAnchorPoint({
+          geometry: getFocusGeometry({ feature: f, path: toPath2 }),
+          project: toPoint
+        });
+        if (anchor !== null) return anchor;
+        const [x, y] = toPath2.centroid(f);
+        return Number.isFinite(x) && Number.isFinite(y) ? [x, y] : null;
+      }) : [],
+      project: toPoint,
+      toPath: toPath2,
+      // The reverse: pixels → [lon, lat]. Used by `toViewState` for the public `ViewState`.
+      invert: (point) => {
+        const at = geoProjection.invert?.([point[0], point[1]]);
+        return at != null && Number.isFinite(at[0]) && Number.isFinite(at[1]) ? [at[0], at[1]] : null;
+      }
+    };
+  }, [features, bordersGeometry, projection, width, height, isBubble, chain]);
+  const lastData = useRef5(options.data);
+  if (options.data !== void 0) lastData.current = options.data;
+  const data = options.data ?? lastData.current ?? NO_DATA;
+  const dataLoading = options.loading ?? options.data === void 0;
+  const idOf = getFeatureId ?? defaultFeatureId2;
+  const join = joinData({ features: features.features, data, getId, getFeatureId: idOf });
+  const fallbacks = [];
+  if (fallbackPoints !== void 0 && join.unmatchedData.length > 0) {
+    const wanted = new Set(join.unmatchedData.filter((id) => fallbackPoints[id] !== void 0));
+    const seen = /* @__PURE__ */ new Set();
+    for (const datum of data) {
+      const id = getId(datum);
+      const coordinates = fallbackPoints[id];
+      const at = coordinates === void 0 ? null : project(coordinates);
+      if (wanted.has(id) && !seen.has(id) && coordinates !== void 0 && at !== null) {
+        seen.add(id);
+        fallbacks.push({ id, datum, coordinates, at });
+      }
+    }
+  }
+  const fallbackIds = new Set(fallbacks.map((f) => f.id));
+  const hasOwnCoordinates = options.variant === "bubble" && options.getCoordinates !== void 0;
+  const joinReport = {
+    unmatchedData: hasOwnCoordinates ? [] : join.unmatchedData.filter((id) => !fallbackIds.has(id)),
+    featuresWithoutData: hasOwnCoordinates ? [] : join.featuresWithoutData,
+    duplicateDataIds: join.duplicateDataIds
+  };
+  const entries = features.features.map((feature) => {
+    const id = idOf(feature);
+    return { id, datum: id === void 0 ? void 0 : join.joined.get(id) };
+  });
+  const allEntries = [...entries, ...fallbacks.map(({ id, datum }) => ({ id, datum }))];
+  const formatValue = options.formatValue ?? defaultFormatValue;
+  const emptyFill = options.emptyFill ?? EMPTY_FILL_VAR;
+  const variant = resolveVariant({
+    config: options,
+    entries: allEntries,
+    data,
+    getId,
+    centroids: [...anchors, ...fallbacks.map((f) => f.at)],
+    project,
+    emptyFill,
+    formatValue,
+    emptyLabel: options.emptyLabel
+  });
+  const levelInfo = engine.active ? { id: engine.level?.id ?? ROOT_LEVEL.id, depth: engine.depth } : ROOT_LEVEL;
+  const regions = [];
+  const anonymousPaths = [];
+  features.features.forEach((feature, index) => {
+    const path = paths[index];
+    const entry = entries[index];
+    if (path == null) return;
+    if (entry?.id === void 0) {
+      anonymousPaths.push(path);
+      return;
+    }
+    const datum = entry.datum;
+    let wave;
+    if (engine.active && machine.phase === "revealing") {
+      const [cx2, cy] = toPath.centroid(feature);
+      const reach = Math.hypot(width, height) / 2;
+      wave = Number.isFinite(cx2) && Number.isFinite(cy) ? Math.min(1, Math.hypot(cx2 - width / 2, cy - height / 2) / reach) : 0;
+    }
+    const base = {
+      id: entry.id,
+      feature,
+      datum,
+      path,
+      value: variant.values[index] ?? null,
+      formattedValue: variant.labels[index] ?? "",
+      fill: variant.fills[index] ?? "",
+      wave,
+      opacity: void 0,
+      className: void 0,
+      pattern: void 0,
+      classIndex: variant.classes[index] ?? null,
+      drillable: engine.active && isDrillable(engine.levels, engine.depth, {
+        kind: "region",
+        id: entry.id,
+        feature,
+        datum,
+        level: levelInfo,
+        drillable: true
+      })
+    };
+    const custom = options.getRegionStyle?.(base);
+    regions.push(
+      custom === void 0 ? base : {
+        ...base,
+        fill: custom.fill ?? base.fill,
+        opacity: custom.opacity,
+        className: custom.className,
+        pattern: custom.pattern
+      }
+    );
+  });
+  const fallbackCoordinates = new Map(fallbacks.map((f) => [f.id, f.coordinates]));
+  const bubbles = isBubble ? variant.bubbles.map((bubble) => {
+    const coordinates = fallbackCoordinates.get(bubble.id);
+    return bubble.coordinates === null && coordinates !== void 0 ? { ...bubble, coordinates } : bubble;
+  }) : variant.bubbles;
+  const fallbackMarks = isBubble ? [] : fallbacks.map((f, index) => {
+    const at = features.features.length + index;
+    return {
+      id: f.id,
+      x: f.at[0],
+      y: f.at[1],
+      r: FALLBACK_POINT_RADIUS,
+      fill: variant.fills[at] ?? emptyFill,
+      datum: f.datum,
+      value: variant.values[at] ?? null,
+      formattedValue: variant.labels[at] ?? "",
+      coordinates: f.coordinates
+    };
+  });
+  const reportKey = [
+    data.length,
+    joinReport.unmatchedData.join("
"),
+    joinReport.featuresWithoutData.join("
"),
+    joinReport.duplicateDataIds.join("
")
+  ].join("\0");
+  const { onJoinReport, diagnostics = true } = options;
+  useEffect6(() => {
+    if (status !== "ready") return;
+    onJoinReport?.(joinReport);
+    if (!diagnostics || isProduction()) return;
+    const message = formatJoinDiagnostics({ ...joinReport, dataCount: data.length });
+    const levelHint = formatWrongLevelDataHint({
+      drillActive: engine.active,
+      dataIsSelector: typeof rawOptions.data === "function",
+      dataCount: data.length,
+      unmatchedCount: joinReport.unmatchedData.length,
+      levelId: engine.level?.id ?? null
+    });
+    if (message !== null) {
+      console.warn(levelHint === null ? message : `${message}
+             ${levelHint}`);
+    }
+  }, [reportKey, status]);
+  const noIdsMessage = formatNoIdsDiagnostic({
+    featureCount: features.features.length,
+    idCount: regions.length,
+    levelId: engine.level?.id ?? null,
+    customGetFeatureId: getFeatureId !== void 0
+  });
+  useEffect6(() => {
+    if (status === "ready" && noIdsMessage !== null && diagnostics && !isProduction()) {
+      console.warn(noIdsMessage);
+    }
+  }, [noIdsMessage, status, diagnostics]);
+  const { onSelectedIdChange } = options;
+  const controlled = options.selectedId !== void 0;
+  const selectable = controlled || options.defaultSelectedId !== void 0 || onSelectedIdChange !== void 0;
+  const [internalSelectedId, setInternalSelectedId] = useState5(
+    options.defaultSelectedId ?? null
+  );
+  const selectedId = controlled ? options.selectedId ?? null : internalSelectedId;
+  const [selectionLevel, setSelectionLevel] = useState5(engine.shownKey);
+  if (selectionLevel !== engine.shownKey) {
+    setSelectionLevel(engine.shownKey);
+    if (!controlled && internalSelectedId !== null) setInternalSelectedId(null);
+  }
+  const setSelectedId = (id) => {
+    if (!controlled) setInternalSelectedId(id);
+    onSelectedIdChange?.(id);
+  };
+  const { onItemClick, onItemHover } = options;
+  const { rememberFills } = engine;
+  const drillActive = engine.active;
+  useEffect6(() => {
+    if (drillActive) rememberFills(new Map(regions.map((region) => [region.id, region.fill])));
+  });
+  const regionsById = new Map(regions.map((region) => [region.id, region]));
+  const featuresById = /* @__PURE__ */ new Map();
+  features.features.forEach((feature) => {
+    const id = idOf(feature);
+    if (id !== void 0) featuresById.set(id, feature);
+  });
+  const bubblesById = new Map(bubbles.filter((b) => b.coordinates !== null).map((b) => [b.id, b]));
+  const fallbackMarksById = new Map(fallbackMarks.map((f) => [f.id, f]));
+  const getItemContext = (ref) => {
+    if (ref.kind === "region") {
+      const region = regionsById.get(ref.id);
+      if (region === void 0) return void 0;
+      return {
+        kind: "region",
+        id: region.id,
+        feature: region.feature,
+        datum: region.datum,
+        level: levelInfo,
+        drillable: region.drillable,
+        value: region.value,
+        formattedValue: region.formattedValue,
+        color: region.fill,
+        label: nameOf(region.feature) ?? region.id
+      };
+    }
+    const bubble = bubblesById.get(ref.id);
+    const mark = bubble === void 0 ? fallbackMarksById.get(ref.id) : void 0;
+    const coordinates = bubble?.coordinates ?? mark?.coordinates;
+    const source = bubble ?? mark;
+    if (source === void 0 || coordinates == null) return void 0;
+    const feature = featuresById.get(source.id);
+    const value = bubble === void 0 ? mark?.value ?? null : bubble.value;
+    return {
+      kind: "point",
+      id: source.id,
+      coordinates,
+      feature,
+      datum: source.datum,
+      level: levelInfo,
+      drillable: false,
+      value,
+      formattedValue: bubble === void 0 ? mark?.formattedValue ?? "" : formatValue(bubble.value),
+      color: bubble === void 0 ? mark?.fill ?? emptyFill : bubble.fill,
+      label: (feature === void 0 ? void 0 : nameOf(feature)) ?? source.id
+    };
+  };
+  const previewed = useRef5(null);
+  const hoverItem = (ref) => {
+    if (isSameItem(store.getState().hovered, ref)) return;
+    if (!isSameItem(previewed.current, ref)) previewed.current = null;
+    store.setState({ hovered: ref });
+    onItemHover?.(ref === null ? null : getItemContext(ref) ?? null);
+  };
+  const clickItem = (ref) => {
+    const item = getItemContext(ref);
+    if (item === void 0) return;
+    if (ref.kind === "region" && item.drillable && engine.controller !== null) {
+      if (store.getState().pointerType === "touch" && !isSameItem(previewed.current, ref)) {
+        hoverItem(ref);
+        previewed.current = ref;
+        return;
+      }
+      previewed.current = null;
+      engine.noteItem(item);
+      engine.controller.drillTo([...engine.shownPath, ref.id]);
+    } else if (ref.kind === "region" && selectable) {
+      setSelectedId(ref.id === selectedId ? null : ref.id);
+    }
+    onItemClick?.(item);
+  };
+  const { onDrillIntent } = options;
+  const intentRef = useRef5({ regionsById, shownPath: engine.shownPath, idle: true, onDrillIntent });
+  const { prefetch } = engine;
+  useEffect6(() => {
+    intentRef.current = {
+      regionsById,
+      shownPath: engine.shownPath,
+      idle: engine.machine.phase === "idle",
+      onDrillIntent
+    };
+  });
+  useEffect6(() => {
+    if (!engine.active) return;
+    const timer = createIntentTimer({
+      onIntent: (id) => {
+        const current = intentRef.current;
+        if (!current.idle) return;
+        const path = [...current.shownPath, id];
+        prefetch(path);
+        current.onDrillIntent?.(contextOf(path));
+      }
+    });
+    const sync = () => {
+      const hovered = store.getState().hovered;
+      const drillable = hovered?.kind === "region" && intentRef.current.regionsById.get(hovered.id)?.drillable;
+      timer.hover(hovered !== null && drillable === true ? hovered.id : null);
+    };
+    sync();
+    const unsubscribe = store.subscribe(sync);
+    return () => {
+      unsubscribe();
+      timer.dispose();
+    };
+  }, [engine.active, store, prefetch]);
+  const findRequestProblem = (path) => {
+    const shown = engine.shownPath;
+    for (let depth = 0; depth < path.length; depth++) {
+      if (depth > shown.length || depth > 0 && path[depth - 1] !== shown[depth - 1]) break;
+      const id = path[depth];
+      const level = engine.chain[depth];
+      const knownIds = level === void 0 ? void 0 : new Set(level.features.flatMap((feature) => level.idOf(feature) ?? []));
+      const problem = checkDrillStep({
+        id,
+        depth,
+        levelId: engine.levels[depth]?.id ?? "?",
+        knownIds,
+        drillable: depth === shown.length && !dataLoading ? regionsById.get(id)?.drillable : void 0
+      });
+      if (problem !== null) return problem;
+    }
+    return null;
+  };
+  const latestDrill = useRef5({ findRequestProblem, engine });
+  useEffect6(() => {
+    latestDrill.current = { findRequestProblem, engine };
+  });
+  const drillApi = useMemo3(() => {
+    const refuse = (message) => {
+      if (!isProduction()) console.warn(message);
+      return Promise.resolve({ completed: false });
+    };
+    const go = (path, source) => {
+      const { findRequestProblem: find, engine: current } = latestDrill.current;
+      if (clampPath(path, current.levels.length).clamped) {
+        return refuse(formatTooDeepRequest(path, current.levels.length, source));
+      }
+      const problem = find(path);
+      if (problem !== null) return refuse(formatDrillRequestProblem(problem, source));
+      return current.navigate((controller2) => controller2.drillTo(path));
+    };
+    return {
+      drillDown: (id) => go([...latestDrill.current.engine.target, id], "drillDown()"),
+      drillUp: (steps) => latestDrill.current.engine.navigate((controller2) => controller2.drillUp(steps)),
+      drillTo: (path) => go(path, "drillTo()")
+    };
+  }, []);
+  useEffect6(() => {
+    if (!engine.active) return;
+    store.registerDrill(drillApi);
+    return () => store.registerDrill(null);
+  }, [engine.active, store, drillApi]);
+  const targetKey = JSON.stringify(engine.target);
+  useEffect6(() => {
+    if (!engine.active || isProduction()) return;
+    const problem = latestDrill.current.findRequestProblem(engine.target);
+    if (problem !== null) console.warn(formatDrillRequestProblem(problem, "drill path"));
+  }, [engine.active, targetKey]);
+  const leaveHandler = (ref) => (event) => {
+    if (event.pointerType !== "touch" && isSameItem(store.getState().hovered, ref)) {
+      hoverItem(null);
+    }
+  };
+  const getRegionProps = (region) => {
+    const ref = { kind: "region", id: region.id };
+    return {
+      "data-region-id": region.id,
+      "data-selected": region.id === selectedId ? true : void 0,
+      onClick: () => clickItem(ref),
+      onPointerEnter: () => hoverItem(ref),
+      onPointerLeave: leaveHandler(ref)
+    };
+  };
+  const getPointProps = (point) => {
+    const ref = { kind: "point", id: point.id };
+    return {
+      "data-point-id": point.id,
+      onClick: () => clickItem(ref),
+      onPointerEnter: () => hoverItem(ref),
+      onPointerLeave: leaveHandler(ref)
+    };
+  };
+  const shownKey = engine.shownKey;
+  const previousLevel = useRef5(shownKey);
+  useIsoLayoutEffect(() => {
+    if (!engine.active || previousLevel.current === shownKey) return;
+    previousLevel.current = shownKey;
+    const from = chain?.projections[chain.projections.length - 1];
+    const to = previousChain?.projections[previousChain.projections.length - 1];
+    const camera = machine.direction === "up" && from !== void 0 && to !== void 0 ? relativeTransform(from, to) : FIT_TRANSFORM;
+    void store.getZoom()?.flyTo(camera, { duration: 0, silent: true });
+  }, [engine.active, shownKey, store]);
+  const zoomOptions = resolveZoomOptions(options.zoom, {
+    // With `drill` the click already does something (go down a level): the double click must NOT also zoom
+    // ×2, or the second click would interrupt the drill flight and end up as a plain zoom.
+    clickIsBusy: onItemClick !== void 0 || selectable || engine.active
+  });
+  const focusBounds = { ...DEFAULT_FOCUS_BOUNDS, ...options.focusBounds };
+  const getRegionExtent = (id) => {
+    const feature = featuresById.get(id);
+    return feature === void 0 ? null : getFocusExtent({ feature, path: toPath, project });
+  };
+  const resolveCamera = (target, cameraOptions) => {
+    if (zoomOptions === null) return null;
+    const size = { width, height };
+    const transform = resolveZoomTarget({
+      target,
+      size,
+      padding: cameraOptions?.padding ?? zoomOptions.padding,
+      scaleExtent: [zoomOptions.min, zoomOptions.max],
+      project,
+      getRegionExtent,
+      focusBounds
+    });
+    return transform !== null && zoomOptions.constrain === "contain" ? constrainTransform({
+      transform,
+      content: [
+        [0, 0],
+        [width, height]
+      ],
+      view: [
+        [0, 0],
+        [width, height]
+      ]
+    }) : transform;
+  };
+  return {
+    containerRef: measured.ref,
+    width,
+    height,
+    drillPhase: engine.active ? machine.phase : null,
+    drillFocusId,
+    drillLayers,
+    drillNav,
+    selectContextItem: (depth, id) => {
+      engine.controller?.drillTo([...engine.shownPath.slice(0, depth), id]);
+    },
+    status,
+    dataLoading,
+    regions,
+    anonymousPaths,
+    emptyFill,
+    fallbackPoints: fallbackMarks,
+    labels,
+    zoom: zoomOptions,
+    onViewChange: typeof options.zoom === "object" ? options.zoom.onViewChange : void 0,
+    invert,
+    project,
+    focusId: options.focusId,
+    resolveCamera,
+    borders: bordersPath,
+    legend: variant.legend,
+    sizeLegend: variant.sizeLegend,
+    bubbles,
+    scale: variant.scale,
+    joinReport,
+    formatValue,
+    clickable: onItemClick !== void 0 || selectable,
+    store,
+    selectedId,
+    setSelectedId,
+    hoverItem,
+    clickItem,
+    getItemContext,
+    getRegionProps,
+    getPointProps
+  };
+};
+var useIsoLayoutEffect = typeof window === "undefined" ? useEffect6 : useLayoutEffect;
+var NO_GEOGRAPHY = { type: "FeatureCollection", features: [] };
+var EMPTY_FEATURES = { type: "FeatureCollection", features: [] };
+var NO_DATA = [];
+var EMPTY_FILL_VAR = `var(--cm-empty-fill, ${DEFAULT_EMPTY_FILL})`;
+var nameOf = (feature) => {
+  const name = feature.properties?.name;
+  return typeof name === "string" ? name : void 0;
+};
+var defaultFeatureId2 = (feature) => feature.id === void 0 ? void 0 : String(feature.id);
+
+// src/react/choropleth-context.ts
+import { createContext, useContext } from "react";
+var ChoroplethContext = createContext(null);
+var useChoroplethContext = () => {
+  const value = useContext(ChoroplethContext);
+  if (value === null) {
+    throw new Error(
+      "[choropleth] Choropleth components (Svg, Regions, Legend\u2026) must be rendered inside <Choropleth.Root>."
+    );
+  }
+  return value;
+};
+var useChoroplethApi = () => useChoroplethContext().api;
+var useDefId = (name) => useChoroplethContext().defId(name);
+
+// src/react/components/defs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Defs = ({ children }) => {
+  const { defId } = useChoroplethContext();
+  const color = {
+    color: "var(--cm-pattern-color, color-mix(in srgb, var(--cm-label-color, #111111) 45%, transparent))"
+  };
+  return /* @__PURE__ */ jsxs("defs", { children: [
+    /* @__PURE__ */ jsx(
+      "pattern",
+      {
+        id: defId("hatch"),
+        width: "6",
+        height: "6",
+        patternUnits: "userSpaceOnUse",
+        patternTransform: "rotate(45)",
+        style: color,
+        children: /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "6", stroke: "currentColor", strokeWidth: "2" })
+      }
+    ),
+    /* @__PURE__ */ jsx("pattern", { id: defId("dots"), width: "6", height: "6", patternUnits: "userSpaceOnUse", style: color, children: /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "1.2", fill: "currentColor" }) }),
+    children
+  ] });
+};
+
+// src/react/components/patterns.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Patterns = () => {
+  const { choropleth, defId, emptyPattern } = useChoroplethContext();
+  const marks = choropleth.regions.flatMap((region) => {
+    const name = region.pattern ?? (emptyPattern !== null && region.value === null ? emptyPattern : void 0);
+    return name === void 0 ? [] : [{ id: region.id, d: region.path, name }];
+  });
+  if (marks.length === 0) return null;
+  return /* @__PURE__ */ jsx2("g", { className: "cm-patterns", pointerEvents: "none", "aria-hidden": "true", children: marks.map(({ id, d, name }) => /* @__PURE__ */ jsx2(
+    "path",
+    {
+      d,
+      fill: `url(#${defId(name)})`
+    },
+    id
+  )) });
+};
+
+// src/react/use-camera.ts
+import { useMemo as useMemo4, useSyncExternalStore as useSyncExternalStore3 } from "react";
+var useCamera = (selector) => {
+  const { store, api } = useChoroplethContext();
+  const getSnapshot = useMemo4(
+    () => createCameraSnapshot(store, () => api.getView(), selector),
+    [store, api, selector]
+  );
+  return useSyncExternalStore3(store.subscribe, getSnapshot, getSnapshot);
+};
+var createCameraSnapshot = (store, getView, selector) => {
+  let lastCamera;
+  let last;
+  return () => {
+    const camera = store.getState().camera;
+    if (last !== void 0 && Object.is(camera, lastCamera)) return last.value;
+    const value = selector(getView());
+    lastCamera = camera;
+    if (last === void 0 || !shallowEqual(last.value, value)) last = { value };
+    return last.value;
+  };
+};
+var shallowEqual = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const keysA = Object.keys(a);
+  if (keysA.length !== Object.keys(b).length) return false;
+  return keysA.every(
+    (key) => Object.hasOwn(b, key) && Object.is(a[key], b[key])
+  );
+};
+
+// src/react/use-zoom.ts
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { easeCubicInOut, easeCubicOut } from "d3-ease";
+import { select } from "d3-selection";
+import "d3-transition";
+import { zoom, zoomIdentity, zoomTransform } from "d3-zoom";
+
+// src/react/fade.ts
+var FADE_OUT_MS = 100;
+var FADE_IN_MS = 150;
+var fadeThrough = (element, jump) => {
+  if (typeof element.animate !== "function") {
+    jump();
+    return { promise: Promise.resolve({ completed: true }), cancel: () => {
+    } };
+  }
+  const animations = [];
+  const out = element.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration: FADE_OUT_MS,
+    fill: "forwards"
+  });
+  animations.push(out);
+  const promise = out.finished.then(() => {
+    jump();
+    const back = element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: FADE_IN_MS });
+    animations.push(back);
+    out.cancel();
+    return back.finished;
+  }).then(
+    () => ({ completed: true }),
+    () => ({ completed: false })
+  );
+  return { promise, cancel: () => animations.forEach((animation) => animation.cancel()) };
+};
+
+// src/react/use-zoom.ts
+var BUTTON_ZOOM_MS = 300;
+var isPressOnDrillTarget = (event, root) => {
+  if (event.type !== "mousedown" && event.type !== "touchstart") return false;
+  const phase = root.getAttribute("data-drill-phase");
+  if (phase !== "flying" && phase !== "loading") return false;
+  const target = event.target;
+  return target instanceof Element && target.closest("[data-drill-target]") !== null;
+};
+var CLICK_DISTANCE_PX = 4;
+var ZOOMED_EPSILON = 1.001;
+var useZoom = ({
+  svgRef,
+  viewportRef,
+  rootRef,
+  store,
+  width,
+  height,
+  options,
+  invert,
+  project,
+  onViewChange,
+  resolveCamera,
+  focusId,
+  ready
+}) => {
+  const latest = useRef6({ invert, project, onViewChange, resolveCamera });
+  useEffect7(() => {
+    latest.current = { invert, project, onViewChange, resolveCamera };
+  });
+  const previous = useRef6(null);
+  const enabled = options !== null;
+  const {
+    min,
+    max,
+    wheel,
+    pinch,
+    pan,
+    doubleClick,
+    constrain,
+    initialView,
+    bubbleScaling,
+    inertia
+  } = options ?? NO_ZOOM;
+  useEffect7(() => {
+    const svg = svgRef.current;
+    const viewport = viewportRef.current;
+    const root = rootRef.current;
+    if (!enabled || !ready || svg === null || viewport === null || root === null) return;
+    const size = { width, height };
+    const content = [
+      [0, 0],
+      [width, height]
+    ];
+    let restoring = false;
+    let samples = [];
+    let glide = null;
+    let gesture = { k: 1, x: 0, y: 0, moving: false };
+    const commit = (transform, notify) => {
+      const camera = { k: transform.k, x: transform.x, y: transform.y };
+      store.setState({ camera, interacting: false });
+      if (!notify) return;
+      latest.current.onViewChange?.(
+        toViewState({
+          transform: camera,
+          size,
+          invert: latest.current.invert,
+          level: ROOT_LEVEL
+        })
+      );
+    };
+    const stopGlide = () => {
+      if (glide === null) return;
+      cancelAnimationFrame(glide.frame);
+      glide = null;
+      commit(zoomTransform(svg), true);
+    };
+    const baseFilter = createZoomFilter({
+      wheel,
+      pinch,
+      pan,
+      doubleClick,
+      onGestureHint: (kind) => store.showGestureHint(kind)
+    });
+    const behavior = zoom().extent([
+      [0, 0],
+      [width, height]
+    ]).scaleExtent([min, max]).clickDistance(CLICK_DISTANCE_PX).filter((event) => {
+      if (isPressOnDrillTarget(event, root)) return false;
+      return baseFilter(event);
+    }).on("start", (event) => {
+      if (event.sourceEvent === null) return;
+      stopGlide();
+      samples = [];
+      gesture = {
+        k: event.transform.k,
+        x: event.transform.x,
+        y: event.transform.y,
+        moving: false
+      };
+    }).on(
+      "zoom",
+      ({ transform, sourceEvent }) => {
+        viewport.setAttribute("transform", transform.toString());
+        root.style.setProperty("--cm-k", String(transform.k));
+        root.style.setProperty(
+          "--cm-bubble-scale",
+          String(bubbleScale(transform.k, bubbleScaling))
+        );
+        if (sourceEvent !== null && !gesture.moving) {
+          const moved = sourceEvent.type === "wheel" || transform.k !== gesture.k || Math.hypot(transform.x - gesture.x, transform.y - gesture.y) > CLICK_DISTANCE_PX;
+          if (moved) {
+            gesture.moving = true;
+            store.setState({ interacting: true });
+          }
+        }
+        if (sourceEvent !== null) {
+          samples.push({
+            time: performance.now(),
+            k: transform.k,
+            x: transform.x,
+            y: transform.y
+          });
+          if (samples.length > MAX_SAMPLES) samples.shift();
+        }
+        root.toggleAttribute("data-zoomed", transform.k > ZOOMED_EPSILON);
+      }
+    ).on(
+      "end",
+      ({ transform, sourceEvent }) => {
+        if (glide !== null) return;
+        const velocity = inertia && sourceEvent !== null && !restoring && !prefersReducedMotion() ? releaseVelocity({ samples, now: performance.now() }) : null;
+        samples = [];
+        if (velocity !== null) {
+          store.setState({ camera: { k: transform.k, x: transform.x, y: transform.y } });
+          startGlide(transform, velocity);
+          return;
+        }
+        commit(transform, !restoring);
+      }
+    );
+    if (constrain === "contain") {
+      behavior.constrain((transform, extent) => {
+        const c = constrainTransform({ transform, content, view: extent });
+        return zoomIdentity.translate(c.x, c.y).scale(c.k);
+      });
+    }
+    behavior.interpolate(createZoomInterpolator(DEFAULT_FLIGHT_CURVATURE));
+    const selection = select(svg).call(behavior);
+    if (wheel === "cooperative") svg.style.touchAction = "pan-x pan-y";
+    let restored = store.getState().camera;
+    const before = previous.current;
+    if (before !== null && (before.size.width !== width || before.size.height !== height)) {
+      const moved = preserveView({
+        transform: before.camera,
+        oldSize: before.size,
+        newSize: size,
+        invertOld: before.invert,
+        projectNew: latest.current.project
+      });
+      restored = constrain === "contain" ? constrainTransform({ transform: moved, content, view: content }) : moved;
+    }
+    restoring = true;
+    behavior.transform(selection, zoomIdentity.translate(restored.x, restored.y).scale(restored.k));
+    restoring = false;
+    previous.current = null;
+    const startGlide = (origin, [vx, vy]) => {
+      const start = performance.now();
+      let last = origin;
+      store.setState({ interacting: true });
+      const step = () => {
+        const elapsed = performance.now() - start;
+        const wanted = {
+          k: origin.k,
+          x: origin.x + inertiaOffset({ velocity: vx, elapsed }),
+          y: origin.y + inertiaOffset({ velocity: vy, elapsed })
+        };
+        const next = constrain === "contain" ? constrainTransform({ transform: wanted, content, view: content }) : wanted;
+        behavior.transform(selection, zoomIdentity.translate(next.x, next.y).scale(next.k));
+        const now = zoomTransform(svg);
+        const moved = Math.hypot(now.x - last.x, now.y - last.y);
+        last = now;
+        const remaining = Math.hypot(vx, vy) * INERTIA_TAU_MS * Math.exp(-elapsed / INERTIA_TAU_MS);
+        if (remaining < GLIDE_STOP_PX || elapsed > 0 && moved < 0.01) {
+          glide = null;
+          commit(now, true);
+          return;
+        }
+        glide = { frame: requestAnimationFrame(step) };
+      };
+      glide = { frame: requestAnimationFrame(step) };
+    };
+    const onPointerDown = () => stopGlide();
+    svg.addEventListener("pointerdown", onPointerDown);
+    let fade = null;
+    const animate = (duration, apply, {
+      ease = easeCubicInOut,
+      silent = false
+    } = {}) => {
+      fade?.cancel();
+      fade = null;
+      stopGlide();
+      if (duration <= 0) {
+        restoring = silent;
+        apply(selection);
+        restoring = false;
+        return Promise.resolve({ completed: true });
+      }
+      if (prefersReducedMotion()) {
+        fade = fadeThrough(viewport, () => apply(selection));
+        return fade.promise;
+      }
+      const transition = selection.transition().duration(duration).ease(ease);
+      apply(transition);
+      return transition.end().then(
+        () => ({ completed: true }),
+        () => ({ completed: false })
+      );
+    };
+    const toZoomIdentity = ({ k, x, y }) => zoomIdentity.translate(x, y).scale(k);
+    const current = () => {
+      const { k, x, y } = zoomTransform(svg);
+      return { k, x, y };
+    };
+    const api = {
+      zoomTo: (target, { duration, padding, silent } = {}) => {
+        const destination = latest.current.resolveCamera(target, { padding });
+        if (destination === null) {
+          if (!isProduction()) {
+            console.warn(
+              `[choropleth] zoomTo: could not resolve ${JSON.stringify(target)} (unknown region id, or a point outside the projection).`
+            );
+          }
+          return Promise.resolve({ completed: false });
+        }
+        const length = duration ?? flightDuration({ from: current(), to: destination, size });
+        return animate(
+          length,
+          (t) => behavior.transform(t, toZoomIdentity(destination)),
+          {
+            silent
+          }
+        );
+      },
+      flyTo: (camera, { duration, silent } = {}) => {
+        const length = duration ?? flightDuration({ from: current(), to: camera, size });
+        return animate(
+          length,
+          (t) => behavior.transform(t, toZoomIdentity(camera)),
+          {
+            silent
+          }
+        );
+      },
+      zoomBy: (factor, { duration = BUTTON_ZOOM_MS } = {}) => animate(duration, (t) => behavior.scaleBy(t, factor), {
+        ease: easeCubicOut
+      }),
+      resetView: ({ duration, silent } = {}) => {
+        const length = duration ?? flightDuration({ from: current(), to: FIT_TRANSFORM, size });
+        return animate(length, (t) => behavior.transform(t, zoomIdentity), {
+          silent
+        });
+      },
+      getView: () => toViewState({
+        transform: current(),
+        size,
+        invert: latest.current.invert,
+        level: ROOT_LEVEL
+      })
+    };
+    store.registerZoom(api);
+    return () => {
+      const live = zoomTransform(svg);
+      previous.current = {
+        size,
+        invert: latest.current.invert,
+        camera: { k: live.k, x: live.x, y: live.y }
+      };
+      svg.removeEventListener("pointerdown", onPointerDown);
+      if (glide !== null) cancelAnimationFrame(glide.frame);
+      glide = null;
+      fade?.cancel();
+      store.registerZoom(null);
+      selection.interrupt();
+      selection.on(".zoom", null);
+      svg.style.removeProperty("touch-action");
+      root.toggleAttribute("data-zoomed", false);
+      root.style.removeProperty("--cm-bubble-scale");
+      store.setState({ interacting: false });
+    };
+  }, [
+    svgRef,
+    viewportRef,
+    rootRef,
+    store,
+    enabled,
+    ready,
+    width,
+    height,
+    min,
+    max,
+    wheel,
+    pinch,
+    pan,
+    doubleClick,
+    constrain,
+    bubbleScaling,
+    inertia
+  ]);
+  const applied = useRef6(UNSET);
+  const focus = focusId ?? null;
+  useEffect7(() => {
+    if (!enabled || !ready) return;
+    const api = store.getZoom();
+    if (api === null) return;
+    if (applied.current === UNSET) {
+      applied.current = focus;
+      const first = focus ?? initialView;
+      if (first !== void 0 && first !== null)
+        void api.zoomTo(first, { duration: 0, silent: true });
+      return;
+    }
+    if (focus === applied.current) return;
+    applied.current = focus;
+    if (focus === null) void api.resetView();
+    else void api.zoomTo(focus);
+  }, [store, enabled, ready, focus]);
+  useEffect7(() => () => store.dispose(), [store]);
+};
+var MAX_SAMPLES = 12;
+var GLIDE_STOP_PX = 0.5;
+var UNSET = /* @__PURE__ */ Symbol("unset");
+var NO_ZOOM = {
+  min: 1,
+  max: 1,
+  wheel: "never",
+  pinch: false,
+  pan: false,
+  doubleClick: false,
+  constrain: "contain",
+  bubbleScaling: "sqrt",
+  inertia: false,
+  keyboard: false,
+  padding: 0,
+  initialView: void 0
+};
+
+// src/react/class-names.ts
+var cx = (...parts) => parts.filter((part) => typeof part === "string" && part !== "").join(" ");
+
+// src/react/components/borders.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Borders = () => {
+  const { choropleth, classNames } = useChoroplethContext();
+  if (choropleth.borders === null) return null;
+  return /* @__PURE__ */ jsx3(
+    "path",
+    {
+      className: cx("cm-borders", classNames.borders),
+      d: choropleth.borders,
+      pointerEvents: "none"
+    }
+  );
+};
+
+// src/react/components/breadcrumb.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var CORNERS = {
+  "top-left": { top: 12, left: 12 },
+  "top-right": { top: 12, right: 12 },
+  "bottom-left": { bottom: 12, left: 12 },
+  "bottom-right": { bottom: 12, right: 12 }
+};
+var Breadcrumb = ({ position, className, children }) => {
+  const { choropleth, classNames } = useChoroplethContext();
+  const { drillNav, labels } = choropleth;
+  if (drillNav === null) return null;
+  if (children !== void 0) return /* @__PURE__ */ jsx4(Fragment, { children: children(drillNav) });
+  const { items, canDrillUp, drillTo, drillUp } = drillNav;
+  return /* @__PURE__ */ jsxs2(
+    "nav",
+    {
+      className: cx("cm-breadcrumb", classNames.breadcrumb, className),
+      "aria-label": labels.breadcrumb,
+      style: position === void 0 ? void 0 : { position: "absolute", ...CORNERS[position] },
+      children: [
+        canDrillUp && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "cm-breadcrumb__back",
+            "aria-label": labels.drillUp,
+            onClick: () => drillUp(),
+            children: "\u2190"
+          }
+        ),
+        /* @__PURE__ */ jsx4("ol", { className: "cm-breadcrumb__list", children: items.map((item) => /* @__PURE__ */ jsx4("li", { className: cx("cm-breadcrumb__item", classNames.breadcrumbItem), children: item.current ? /* @__PURE__ */ jsx4("span", { className: "cm-breadcrumb__current", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            className: "cm-breadcrumb__link",
+            onClick: () => drillTo(item.depth),
+            children: item.label
+          }
+        ) }, item.depth)) })
+      ]
+    }
+  );
+};
+
+// src/react/components/bubbles.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Bubbles = () => {
+  const { choropleth, classNames } = useChoroplethContext();
+  const { bubbles, clickable, getPointProps } = choropleth;
+  if (bubbles.length === 0) return null;
+  return /* @__PURE__ */ jsx5("g", { className: cx("cm-bubbles", classNames.bubbles), pointerEvents: "none", children: bubbles.map((bubble) => {
+    const isPoint = bubble.coordinates !== null;
+    return /* @__PURE__ */ jsx5(
+      "circle",
+      {
+        className: cx("cm-bubble", classNames.bubble),
+        "data-bubble-id": bubble.id,
+        cx: bubble.x,
+        cy: bubble.y,
+        r: bubble.r,
+        style: { fill: bubble.fill, cursor: isPoint && clickable ? "pointer" : void 0 },
+        pointerEvents: isPoint ? "auto" : void 0,
+        ...isPoint ? getPointProps(bubble) : void 0
+      },
+      bubble.id
+    );
+  }) });
+};
+
+// src/react/components/drill-layers.tsx
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
+var DrillLayers = ({ role }) => {
+  const { choropleth, classNames } = useChoroplethContext();
+  const { drillLayers, selectContextItem } = choropleth;
+  const layers = drillLayers.filter((layer) => layer.role === role);
+  if (layers.length === 0) return null;
+  return /* @__PURE__ */ jsx6(Fragment2, { children: layers.map((layer) => {
+    const { k, x, y } = layer.transform;
+    return /* @__PURE__ */ jsx6(
+      "g",
+      {
+        className: cx("cm-layer", classNames.layer),
+        "data-role": layer.role,
+        "data-depth": layer.depth,
+        transform: `translate(${x},${y}) scale(${k})`,
+        pointerEvents: layer.role === "exiting" ? "none" : void 0,
+        onClick: layer.role === "context" ? (event) => {
+          const id = event.target.closest?.("[data-context-id]")?.getAttribute("data-context-id");
+          const known = id == null ? void 0 : layer.paths.find((p) => p.id === id);
+          if (known?.drillable === true && id != null) selectContextItem(layer.depth, id);
+        } : void 0,
+        children: layer.paths.map((path, index) => /* @__PURE__ */ jsx6(
+          "path",
+          {
+            className: "cm-context-region",
+            d: path.d,
+            "data-context-id": path.id,
+            "data-focus": path.focus ? "" : void 0,
+            "data-drillable": path.drillable ? "" : void 0,
+            style: path.fill === void 0 ? void 0 : { fill: path.fill }
+          },
+          path.id ?? `anonymous-${index}`
+        ))
+      },
+      layer.key
+    );
+  }) });
+};
+
+// src/react/components/fallback-points.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FallbackPoints = () => {
+  const { choropleth } = useChoroplethContext();
+  const { fallbackPoints, clickable, getPointProps } = choropleth;
+  if (fallbackPoints.length === 0) return null;
+  return /* @__PURE__ */ jsx7("g", { className: "cm-fallback-points", children: fallbackPoints.map((point) => /* @__PURE__ */ jsx7(
+    "circle",
+    {
+      className: "cm-fallback-point",
+      cx: point.x,
+      cy: point.y,
+      r: point.r,
+      style: { fill: point.fill, cursor: clickable ? "pointer" : void 0 },
+      ...getPointProps(point)
+    },
+    point.id
+  )) });
+};
+
+// src/react/components/gesture-hint.tsx
+import { useState as useState6 } from "react";
+
+// src/react/platform.ts
+import { useSyncExternalStore as useSyncExternalStore4 } from "react";
+var isApplePlatform = () => {
+  if (typeof navigator === "undefined") return false;
+  const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
+  return /Mac|iPhone|iPad|iPod/i.test(platform);
+};
+var subscribeNothing = () => () => {
+};
+var useIsApplePlatform = () => useSyncExternalStore4(subscribeNothing, isApplePlatform, () => false);
+
+// src/react/components/gesture-hint.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var GestureHint = ({ className }) => {
+  const { choropleth, store, classNames } = useChoroplethContext();
+  const hint = useMapStore(store, (s) => s.gestureHint);
+  const apple = useIsApplePlatform();
+  const [last, setLast] = useState6("wheel");
+  if (hint !== null && hint !== last) setLast(hint);
+  const { labels } = choropleth;
+  const text = last === "touch" ? labels.gestureHintTouch : apple ? labels.gestureHintWheelMac : labels.gestureHintWheel;
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: cx("cm-gesture-hint", classNames.gestureHint, className),
+      "aria-hidden": "true",
+      "data-visible": hint === null ? void 0 : "",
+      children: text
+    }
+  );
+};
+
+// src/react/components/legend.tsx
+import { useEffect as useEffect8 } from "react";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var GRADIENT_STOPS = 5;
+var Legend = ({
+  title,
+  showCount = false,
+  className,
+  variant = "swatches",
+  interactive = true,
+  children
+}) => {
+  const { choropleth, classNames, emptyPattern } = useChoroplethContext();
+  const { legend: items, sizeLegend: sizeItems, scale, formatValue, containerRef } = choropleth;
+  const canHighlight = interactive && choropleth.regions.some((r) => r.classIndex !== null);
+  const highlight = (key) => {
+    const root = containerRef.current;
+    if (root === null) return;
+    if (key === null) root.removeAttribute("data-highlight-class");
+    else root.setAttribute("data-highlight-class", key);
+  };
+  useEffect8(
+    () => () => containerRef.current?.removeAttribute("data-highlight-class"),
+    [containerRef]
+  );
+  const classKey = (item, index) => item.empty === true ? "empty" : String(index);
+  const hoverProps = (item, index) => canHighlight ? {
+    "data-class": classKey(item, index),
+    onPointerEnter: () => highlight(classKey(item, index)),
+    onPointerLeave: () => highlight(null)
+  } : {};
+  const swatchProps = (item) => ({
+    style: { backgroundColor: item.color },
+    "data-pattern": item.empty === true && emptyPattern !== null ? emptyPattern : void 0
+  });
+  if (children !== void 0) return /* @__PURE__ */ jsx9(Fragment3, { children: children({ items, sizeItems, scale, formatValue }) });
+  const rootClass = cx("cm-legend", classNames.legend, className);
+  const indexed = items.map((item, index) => ({ item, index }));
+  const classRows = indexed.filter(({ item }) => item.empty !== true);
+  const emptyItem = indexed.find(({ item }) => item.empty === true) ?? null;
+  const barItems = variant === "bar" && scale?.kind !== "continuous" && classRows.length > 0 && classRows.every(({ item }) => item.from !== void 0 && item.to !== void 0) ? classRows : null;
+  const barTicks = barItems === null ? [] : [...barItems.map(({ item }) => item.from), barItems.at(-1)?.item.to];
+  const [min, max] = scale?.domain ?? [0, 1];
+  return /* @__PURE__ */ jsxs3("div", { className: rootClass, children: [
+    title !== void 0 && /* @__PURE__ */ jsx9("div", { className: "cm-legend__title", children: title }),
+    scale !== null && scale.kind === "continuous" ? /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: "cm-legend__gradient",
+          "data-legend-gradient": true,
+          style: {
+            background: `linear-gradient(to right, ${Array.from(
+              { length: GRADIENT_STOPS },
+              (_, i) => scale.getColor(min + (max - min) * i / (GRADIENT_STOPS - 1))
+            ).join(", ")})`
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "cm-legend__range", children: [
+        /* @__PURE__ */ jsx9("span", { children: formatValue(min) }),
+        /* @__PURE__ */ jsx9("span", { children: formatValue(max) })
+      ] })
+    ] }) : barItems !== null ? /* @__PURE__ */ jsxs3("div", { className: "cm-legend__bar-wrap", children: [
+      /* @__PURE__ */ jsx9("div", { className: "cm-legend__bar", role: "list", children: barItems.map(({ item, index }) => /* @__PURE__ */ jsx9(
+        "span",
+        {
+          role: "listitem",
+          className: cx("cm-legend__segment", classNames.legendItem),
+          style: { backgroundColor: item.color },
+          title: `${item.label} (${item.count})`,
+          ...hoverProps(item, index)
+        },
+        item.label
+      )) }),
+      /* @__PURE__ */ jsx9("div", { className: "cm-legend__ticks", "aria-hidden": "true", children: barTicks.map((value, i) => /* @__PURE__ */ jsx9(
+        "span",
+        {
+          className: "cm-legend__tick",
+          style: { left: `${i / (barTicks.length - 1) * 100}%` },
+          children: formatValue(value)
+        },
+        i
+      )) }),
+      emptyItem !== null && /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: cx("cm-legend__item", classNames.legendItem),
+          ...hoverProps(emptyItem.item, emptyItem.index),
+          children: [
+            /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: "cm-legend__swatch", ...swatchProps(emptyItem.item) }),
+            /* @__PURE__ */ jsx9("span", { children: emptyItem.item.label }),
+            showCount && /* @__PURE__ */ jsxs3("span", { className: "cm-legend__count", children: [
+              "(",
+              emptyItem.item.count,
+              ")"
+            ] })
+          ]
+        }
+      )
+    ] }) : items.length > 0 && /* @__PURE__ */ jsx9("ul", { className: "cm-legend__items", children: items.map((item, index) => /* @__PURE__ */ jsxs3(
+      "li",
+      {
+        className: cx("cm-legend__item", classNames.legendItem),
+        ...hoverProps(item, index),
+        children: [
+          /* @__PURE__ */ jsx9("span", { "aria-hidden": true, className: "cm-legend__swatch", ...swatchProps(item) }),
+          /* @__PURE__ */ jsx9("span", { children: item.label }),
+          showCount && /* @__PURE__ */ jsxs3("span", { className: "cm-legend__count", children: [
+            "(",
+            item.count,
+            ")"
+          ] })
+        ]
+      },
+      item.label
+    )) }),
+    sizeItems.length > 0 && /* @__PURE__ */ jsx9("ul", { className: "cm-legend__sizes", children: sizeItems.map((item) => /* @__PURE__ */ jsxs3("li", { className: "cm-legend__size", children: [
+      /* @__PURE__ */ jsx9(
+        "svg",
+        {
+          "aria-hidden": true,
+          width: item.radius * 2 + 2,
+          height: item.radius * 2 + 2,
+          className: "cm-legend__circle",
+          children: /* @__PURE__ */ jsx9("circle", { cx: item.radius + 1, cy: item.radius + 1, r: item.radius })
+        }
+      ),
+      /* @__PURE__ */ jsx9("span", { children: item.label })
+    ] }, item.label)) })
+  ] });
+};
+
+// src/react/components/regions.tsx
+import { memo } from "react";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var RegionPath = memo(
+  ({
+    id,
+    d,
+    fill,
+    drillable,
+    empty,
+    dataClass,
+    className,
+    opacity,
+    target,
+    wave
+  }) => /* @__PURE__ */ jsx10(
+    "path",
+    {
+      className: cx("cm-region", className),
+      "data-region-id": id,
+      "data-empty": empty ? "" : void 0,
+      "data-class": dataClass,
+      "data-drillable": drillable ? "" : void 0,
+      "data-drill-target": target ? "" : void 0,
+      d,
+      style: {
+        fill,
+        ...opacity === void 0 ? void 0 : { opacity },
+        ...wave === void 0 ? void 0 : { "--cm-wave": wave }
+      }
+    }
+  )
+);
+var AnonymousPath = memo(({ d, fill }) => /* @__PURE__ */ jsx10("path", { className: "cm-region cm-region--anonymous", d, style: { fill, cursor: "default" } }));
+var regionIdFrom = (event) => event.target.closest?.("[data-region-id]")?.getAttribute("data-region-id") ?? null;
+var Regions = () => {
+  const { choropleth, store, classNames } = useChoroplethContext();
+  const {
+    regions,
+    anonymousPaths,
+    emptyFill,
+    borders,
+    clickable,
+    hoverItem,
+    clickItem,
+    drillFocusId
+  } = choropleth;
+  const known = new Set(regions.map((region) => region.id));
+  const regionRef = (event) => {
+    const id = regionIdFrom(event);
+    return id !== null && known.has(id) ? { kind: "region", id } : null;
+  };
+  const outlined = borders === null;
+  return /* @__PURE__ */ jsxs4(
+    "g",
+    {
+      className: cx("cm-regions", classNames.regions),
+      "data-outlined": outlined ? "" : void 0,
+      style: clickable ? { cursor: "pointer" } : void 0,
+      onClick: (event) => {
+        const ref = regionRef(event);
+        if (ref !== null) clickItem(ref);
+      },
+      onPointerOver: (event) => {
+        const ref = regionRef(event);
+        if (ref !== null) {
+          hoverItem(ref);
+        } else if (store.getState().hovered?.kind === "region") {
+          hoverItem(null);
+        }
+      },
+      onPointerLeave: (event) => {
+        if (event.pointerType === "touch") return;
+        if (store.getState().hovered?.kind === "region") hoverItem(null);
+      },
+      children: [
+        anonymousPaths.map((d, index) => /* @__PURE__ */ jsx10(AnonymousPath, { d, fill: emptyFill }, `anonymous-${index}`)),
+        regions.map((region) => /* @__PURE__ */ jsx10(
+          RegionPath,
+          {
+            id: region.id,
+            d: region.path,
+            fill: region.fill,
+            drillable: region.drillable,
+            empty: region.value === null,
+            dataClass: region.classIndex === null ? "empty" : String(region.classIndex),
+            className: cx(classNames.region, region.className),
+            opacity: region.opacity,
+            target: region.id === drillFocusId,
+            wave: region.wave
+          },
+          region.id
+        ))
+      ]
+    }
+  );
+};
+
+// src/react/components/root.tsx
+import {
+  forwardRef,
+  useCallback as useCallback3,
+  useEffect as useEffect9,
+  useId,
+  useImperativeHandle,
+  useMemo as useMemo5,
+  useRef as useRef7
+} from "react";
+
+// src/react/handle.ts
+var EMPTY_VIEW = {
+  k: 1,
+  x: 0,
+  y: 0,
+  zoom: 1,
+  center: [0, 0],
+  bounds: [
+    [-180, -90],
+    [180, 90]
+  ],
+  level: { id: "root", depth: 0 }
+};
+var NOT_AVAILABLE = Promise.resolve({ completed: false });
+var noDrill = (method) => {
+  if (!isProduction()) {
+    console.warn(`[choropleth] ${method}() needs the \`drill\` prop; this map has none.`);
+  }
+  return NOT_AVAILABLE;
+};
+var createHandle = (store) => ({
+  zoomTo: (target, options) => store.getZoom()?.zoomTo(target, options) ?? NOT_AVAILABLE,
+  zoomBy: (factor, options) => store.getZoom()?.zoomBy(factor, options) ?? NOT_AVAILABLE,
+  resetView: (options) => store.getZoom()?.resetView(options) ?? NOT_AVAILABLE,
+  getView: () => store.getZoom()?.getView() ?? store.getFallbackView() ?? EMPTY_VIEW,
+  drillDown: (id) => store.getDrill()?.drillDown(id) ?? noDrill("drillDown"),
+  drillUp: (steps) => store.getDrill()?.drillUp(steps) ?? noDrill("drillUp"),
+  drillTo: (path) => store.getDrill()?.drillTo(path) ?? noDrill("drillTo")
+});
+
+// src/react/components/root.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var RootInner = ({
+  children,
+  className,
+  style,
+  unstyled,
+  theme,
+  emptyPattern,
+  classNames,
+  dimOthers = "selection",
+  ...options
+}, ref) => {
+  const choropleth = useChoropleth({
+    ...options,
+    dimOthers
+  });
+  const { containerRef, store, status, dataLoading, selectedId, drillPhase } = choropleth;
+  const viewportRef = useRef7(null);
+  useEffect9(() => {
+    const sync = () => {
+      containerRef.current?.toggleAttribute("data-interacting", store.getState().interacting);
+    };
+    sync();
+    return store.subscribe(sync);
+  }, [store, containerRef]);
+  const { width, height, invert } = choropleth;
+  useEffect9(() => {
+    store.registerFallbackView(
+      () => toViewState({ transform: FIT_TRANSFORM, size: { width, height }, invert, level: ROOT_LEVEL })
+    );
+    return () => store.registerFallbackView(null);
+  }, [store, width, height, invert]);
+  const api = useMemo5(() => createHandle(store), [store]);
+  useImperativeHandle(ref, () => api, [api]);
+  const themeVars = useMemo5(() => themeToCssVars(resolveTheme(theme)), [theme]);
+  const slots = useMemo5(() => classNames ?? {}, [classNames]);
+  const instance = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const defId = useCallback3((name) => `cm${instance}-${name}`, [instance]);
+  const pattern = emptyPattern ?? resolveTheme(theme)?.empty?.pattern;
+  const resolvedPattern = pattern === "hatch" || pattern === "dots" ? pattern : null;
+  const handlePointer = (event) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    store.setState({
+      pointer: { x: event.clientX - rect.left, y: event.clientY - rect.top },
+      // The drill asks for one or two taps depending on what is touching (a pen's wheel counts as a mouse).
+      pointerType: event.pointerType === "touch" ? "touch" : event.pointerType === "pen" ? "pen" : "mouse"
+    });
+  };
+  return /* @__PURE__ */ jsx11(
+    ChoroplethContext.Provider,
+    {
+      value: {
+        choropleth,
+        store,
+        viewportRef,
+        api,
+        classNames: slots,
+        defId,
+        emptyPattern: resolvedPattern
+      },
+      children: /* @__PURE__ */ jsx11(
+        "div",
+        {
+          ref: containerRef,
+          className: cx("cm-root", slots.root, className),
+          "data-unstyled": unstyled ? "" : void 0,
+          "data-theme": theme === void 0 ? void 0 : isThemeName(theme) ? theme : "custom",
+          "data-status": status,
+          "data-loading": dataLoading ? "" : void 0,
+          "data-dim": dimOthers,
+          "data-drill-phase": drillPhase === null || drillPhase === "idle" ? void 0 : drillPhase,
+          "data-has-selection": selectedId === null ? void 0 : "",
+          style: { position: "relative", ...themeVars, ...style },
+          onPointerMove: handlePointer,
+          onPointerDown: handlePointer,
+          onPointerLeave: (event) => {
+            if (event.pointerType !== "touch") store.setState({ pointer: null });
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var Root = forwardRef(RootInner);
+
+// src/react/components/selection.tsx
+import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var Selection = () => {
+  const { choropleth, store, classNames } = useChoroplethContext();
+  const { regions, bubbles, fallbackPoints, selectedId } = choropleth;
+  const hovered = useMapStore(store, (s) => s.hovered);
+  const hoveredRegion = hovered?.kind === "region" ? regions.find((r) => r.id === hovered.id) : void 0;
+  const hoveredPoint = hovered?.kind === "point" ? bubbles.find((b) => b.coordinates !== null && b.id === hovered.id) ?? fallbackPoints.find((p) => p.id === hovered.id) : void 0;
+  const selectedRegion = selectedId === null ? void 0 : regions.find((r) => r.id === selectedId);
+  return /* @__PURE__ */ jsxs5("g", { className: cx("cm-selection", classNames.selection), pointerEvents: "none", children: [
+    hoveredRegion !== void 0 && /* @__PURE__ */ jsx12("path", { "data-selection": "hover", d: hoveredRegion.path, style: { fill: hoveredRegion.fill } }),
+    hoveredPoint !== void 0 && /* @__PURE__ */ jsx12("circle", { "data-selection": "hover", cx: hoveredPoint.x, cy: hoveredPoint.y, r: hoveredPoint.r }),
+    selectedRegion !== void 0 && /* @__PURE__ */ jsx12(
+      "path",
+      {
+        "data-selection": "selected",
+        d: selectedRegion.path,
+        style: { fill: selectedRegion.fill }
+      }
+    )
+  ] });
+};
+
+// src/react/components/svg.tsx
+import { useRef as useRef8 } from "react";
+
+// src/react/components/viewport.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Viewport = ({ children }) => {
+  const { viewportRef } = useChoroplethContext();
+  return /* @__PURE__ */ jsx13("g", { ref: viewportRef, className: "cm-viewport", children });
+};
+
+// src/react/components/svg.tsx
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var Svg = ({ children, className, ariaLabel }) => {
+  const { choropleth, store, viewportRef, classNames } = useChoroplethContext();
+  const {
+    width,
+    height,
+    status,
+    labels,
+    zoom: zoom2,
+    invert,
+    project,
+    onViewChange,
+    resolveCamera,
+    focusId,
+    containerRef
+  } = choropleth;
+  const svgRef = useRef8(null);
+  useZoom({
+    svgRef,
+    viewportRef,
+    rootRef: containerRef,
+    store,
+    width,
+    height,
+    options: zoom2,
+    invert,
+    project,
+    onViewChange,
+    resolveCamera,
+    focusId,
+    ready: status === "ready"
+  });
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx14("div", { className: "cm-skeleton", style: { aspectRatio: `${width} / ${height}` } });
+  }
+  if (status === "error") {
+    return /* @__PURE__ */ jsx14("div", { className: "cm-error", role: "alert", style: { aspectRatio: `${width} / ${height}` }, children: labels.geographyError });
+  }
+  const { drillNav } = choropleth;
+  const keyboard = zoom2 !== null && zoom2.keyboard || drillNav !== null;
+  const handleKeyDown = (event) => {
+    if (drillNav?.canDrillUp === true && (event.key === "Escape" || event.key === "Backspace") && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      event.preventDefault();
+      drillNav.drillUp();
+      return;
+    }
+    if (zoom2 === null || !zoom2.keyboard) return;
+    const action = zoomKeyAction(event);
+    if (action === null) return;
+    event.preventDefault();
+    const api = store.getZoom();
+    if (action === "reset") void api?.resetView();
+    else void api?.zoomBy(action === "in" ? 2 : 0.5);
+  };
+  return /* @__PURE__ */ jsx14(
+    "svg",
+    {
+      ref: svgRef,
+      tabIndex: keyboard ? 0 : void 0,
+      onKeyDown: keyboard ? handleKeyDown : void 0,
+      className: cx("cm-svg", classNames.svg, className),
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": ariaLabel,
+      style: { display: "block", width: "100%", height: "auto" },
+      children: children ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+        /* @__PURE__ */ jsx14(Defs, {}),
+        /* @__PURE__ */ jsxs6(Viewport, { children: [
+          /* @__PURE__ */ jsx14(DrillLayers, { role: "context" }),
+          /* @__PURE__ */ jsx14(Regions, {}),
+          /* @__PURE__ */ jsx14(Patterns, {}),
+          /* @__PURE__ */ jsx14(Borders, {}),
+          /* @__PURE__ */ jsx14(Bubbles, {}),
+          /* @__PURE__ */ jsx14(FallbackPoints, {}),
+          /* @__PURE__ */ jsx14(Selection, {}),
+          /* @__PURE__ */ jsx14(DrillLayers, { role: "exiting" })
+        ] })
+      ] })
+    }
+  );
+};
+
+// src/react/components/tooltip.tsx
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var OFFSET = 12;
+var DefaultContent = ({
+  label,
+  formattedValue,
+  drillable,
+  noData,
+  drillHint
+}) => {
+  return /* @__PURE__ */ jsxs7(Fragment5, { children: [
+    /* @__PURE__ */ jsx15("strong", { children: label }),
+    /* @__PURE__ */ jsx15("div", { children: formattedValue === "" ? noData : formattedValue }),
+    drillable && /* @__PURE__ */ jsx15("div", { className: "cm-tooltip__hint", children: drillHint })
+  ] });
+};
+var Tooltip = ({ className, children }) => {
+  const { choropleth, store, classNames } = useChoroplethContext();
+  const point = useMapStore(store, (s) => s.pointer);
+  const hovered = useMapStore(store, (s) => s.hovered);
+  const touch = useMapStore(store, (s) => s.pointerType === "touch");
+  const context = hovered === null ? void 0 : choropleth.getItemContext(hovered);
+  if (context === void 0 || point === null) return null;
+  const flipX = point.x > choropleth.width / 2;
+  const flipY = point.y > choropleth.height / 2;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      role: "tooltip",
+      className: cx(
+        "cm-tooltip",
+        // Only the default content has a box; if you pass `children`, the look is yours.
+        children === void 0 && "cm-tooltip--default",
+        classNames.tooltip,
+        className
+      ),
+      style: {
+        position: "absolute",
+        left: point.x + (flipX ? -OFFSET : OFFSET),
+        top: point.y + (flipY ? -OFFSET : OFFSET),
+        transform: `translate(${flipX ? "-100%" : "0"}, ${flipY ? "-100%" : "0"})`,
+        pointerEvents: "none"
+      },
+      children: children === void 0 ? /* @__PURE__ */ jsx15(
+        DefaultContent,
+        {
+          ...context,
+          noData: choropleth.labels.noData,
+          drillHint: touch ? choropleth.labels.tapAgainHint : choropleth.labels.drillHint
+        }
+      ) : children(context)
+    }
+  );
+};
+
+// src/react/components/zoom-controls.tsx
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var CORNERS2 = {
+  "top-left": { top: 12, left: 12 },
+  "top-right": { top: 12, right: 12 },
+  "bottom-left": { bottom: 12, left: 12 },
+  "bottom-right": { bottom: 12, right: 12 }
+};
+var STEP = 2;
+var ZoomControls = ({
+  position = "bottom-right",
+  reset = true,
+  className
+}) => {
+  const { choropleth, store, classNames } = useChoroplethContext();
+  const { zoom: zoom2, labels } = choropleth;
+  const camera = useMapStore(store, (s) => s.camera);
+  if (zoom2 === null) return null;
+  const atMax = camera.k >= zoom2.max - 1e-6;
+  const atMin = camera.k <= zoom2.min + 1e-6;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cx("cm-zoom-controls", classNames.controls, className),
+      style: { position: "absolute", ...CORNERS2[position] },
+      children: [
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: cx("cm-zoom-button", classNames.controlButton),
+            "aria-label": labels.zoomIn,
+            disabled: atMax,
+            onClick: () => void store.getZoom()?.zoomBy(STEP),
+            children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "+" })
+          }
+        ),
+        /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: cx("cm-zoom-button", classNames.controlButton),
+            "aria-label": labels.zoomOut,
+            disabled: atMin,
+            onClick: () => void store.getZoom()?.zoomBy(1 / STEP),
+            children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u2212" })
+          }
+        ),
+        reset && /* @__PURE__ */ jsx16(
+          "button",
+          {
+            type: "button",
+            className: cx("cm-zoom-button", classNames.controlButton),
+            "aria-label": labels.resetView,
+            disabled: isFitTransform(camera),
+            onClick: () => void store.getZoom()?.resetView(),
+            children: /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: "\u27F2" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/react/choropleth.ts
+var Choropleth = {
+  Root,
+  Svg,
+  Regions,
+  Borders,
+  Defs,
+  Patterns,
+  Breadcrumb,
+  Bubbles,
+  DrillLayers,
+  FallbackPoints,
+  Selection,
+  Viewport,
+  ZoomControls,
+  GestureHint,
+  Legend,
+  Tooltip
+};
+
+// src/react/choropleth-map.tsx
+import {
+  forwardRef as forwardRef2
+} from "react";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var CORNERS3 = {
+  "top-left": { top: 12, left: 12 },
+  "top-right": { top: 12, right: 12 },
+  "bottom-left": { bottom: 12, left: 12 },
+  "bottom-right": { bottom: 12, right: 12 }
+};
+var ChoroplethMapInner = ({
+  legend,
+  breadcrumb,
+  renderTooltip,
+  className,
+  style,
+  unstyled,
+  theme,
+  emptyPattern,
+  classNames,
+  ariaLabel,
+  ...options
+}, ref) => {
+  const legendOptions = legend === false ? null : legend ?? {};
+  const controls = resolveControls(options.zoom);
+  return /* @__PURE__ */ jsxs9(
+    Root,
+    {
+      ref,
+      ...options,
+      emptyLabel: options.emptyLabel ?? resolveLabels(options.labels).noData,
+      className,
+      style,
+      unstyled,
+      theme,
+      emptyPattern,
+      classNames,
+      children: [
+        /* @__PURE__ */ jsx17(Svg, { ariaLabel }),
+        legendOptions !== null && /* @__PURE__ */ jsx17("div", { style: { position: "absolute", ...CORNERS3[legendOptions.position ?? "bottom-left"] }, children: /* @__PURE__ */ jsx17(
+          Legend,
+          {
+            title: legendOptions.title,
+            showCount: legendOptions.showCount,
+            variant: legendOptions.variant,
+            interactive: legendOptions.interactive
+          }
+        ) }),
+        options.drill !== void 0 && breadcrumb !== false && /* @__PURE__ */ jsx17(Breadcrumb, { position: breadcrumb?.position ?? "top-left" }),
+        controls !== null && /* @__PURE__ */ jsx17(ZoomControls, { position: controls.position, reset: controls.reset }),
+        /* @__PURE__ */ jsx17(GestureHint, {}),
+        /* @__PURE__ */ jsx17(Tooltip, { children: renderTooltip })
+      ]
+    }
+  );
+};
+var ChoroplethMap = forwardRef2(ChoroplethMapInner);
+export {
+  Borders,
+  Breadcrumb,
+  Bubbles,
+  Choropleth,
+  ChoroplethMap,
+  DRILL_BRIDGE,
+  Defs,
+  DrillLayers,
+  FALLBACK_POINT_RADIUS,
+  FallbackPoints,
+  GestureHint,
+  Legend,
+  Patterns,
+  REVEAL_MS,
+  ROOT_LEVEL,
+  Regions,
+  Root,
+  Selection,
+  Svg,
+  THEMES,
+  Tooltip,
+  Viewport,
+  ZoomControls,
+  buildDrillEvent,
+  clearGeographyCache,
+  createDrillBridge,
+  createMapStore,
+  defineDrillLevels,
+  defineTheme,
+  extendTheme,
+  isDrillController,
+  isDrillable,
+  sourceDepth,
+  themeToCssVars,
+  useCamera,
+  useChoropleth,
+  useChoroplethApi,
+  useContainerSize,
+  useDefId,
+  useDrillChoreography,
+  useDrillDown,
+  useDrillEngine,
+  useGeography,
+  useMapStore,
+  useZoom
+};
+//# sourceMappingURL=index.js.map